*,:before,:after {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-rotate: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
}

::backdrop {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-rotate: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
}

body{
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

.right_box{
    width: calc(100vw - 200px);
    margin-top: 25px;
    min-height:450px ;
    height: auto;
    box-sizing: border-box;
    padding: 0 100px;
}
.box{
    width: calc(100vw - 200px);
    min-height: 400px;
    height:auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.details{
    min-height: 400px;
    height: auto;
    width: 40vw;
    display: flex;
}

.details pre{
font-size: 18px;
font-weight: 400;
white-space: pre-wrap;
word-wrap: break-word;
font-family: 'MyFontBlack';
}

.image{ 
    height: 400px;
    width: 30vw;
    border: 3px  solid black;
    box-sizing: border-box;
}
.image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
} 



hr{
    background-color:#004687; 
     height: 3px;
    border: none;
}

.right h1{
        font-family: 'MyFontBold';
  font-size: clamp(28px, 4vw, 48px);
}
.wtf{
    width: 50px;
    height: 50px;
    font-size: 35px;
    background-color: #25d366;
    color: white;
    position: fixed;     
    bottom: 20px;         
    right: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;      
}







bounce animation {
    transform: translateY(-13.6138%);
}
element.style {
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.animate-bounce {
    animation: bounce 1s infinite;
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.left-1\/2 {
    left: 50%;
}

.bottom-8 {
    bottom: 2rem;
}
.absolute {
    position: absolute;
}
.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform {
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes bounce {
    0%,to {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(.8,0,1,1)
    }

    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0,0,.2,1)
    }
}

.animate-bounce {
    animation: bounce 1s infinite
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s
}
.hover\:-translate-y-2:hover {
    --tw-translate-y: -.5rem;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
































@media (max-width: 1024px){

  .box{
    display: flex;
    flex-direction: column;
align-items: center;

  }
.odd{
    flex-direction: column-reverse;
}
.right_box{
    /* justify-content: center;
    align-items: center; */
    width: 100%;
}
.details{
width: 100%;
}
.image{ 
width:80% ;
}

}


@media (max-width: 768px){
.image{ 
width:100% ;
}
.right_box{
padding: 0px;
}
  .box{
width: 100%;  
}
.details{
width: 90%;
}

}

@media (max-width: 420px){
}