/* 
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV
*/

/* small screens */
@media (max-width: 480px) {
    /* strip section */
.strip{
    display: none;
}


/* section nav */

/* menu bar for mobile and tab showing after click of menu button  strt*/

.menu-strip{
    position: sticky;
}
 /* have some issue -- to be fixed strt */
.rem-display{
    display: block;  /*dont work* rememvber apply on all width below 1024 have to copy paste in diff width mediaquerries*/
    width: 79% !important;
    padding: 20px !important;
    gap: 25px !important;
    pointer-events: auto !important;
    opacity: 1 !important ;
    height:fit-content !important;
    transform: translateY(-20px); /* Positioned slightly above */
    transition: opacity .5s ease, transform .5s ease; /* Smooth animation */
  }
.menu-strip .nav-right .ul-main{

    position: absolute;  /* Position absolutely within its nearest positioned ancestor */
    top: 100%;
    left: 11%;
    right: 68%;
    flex-direction: column;
    align-items: flex-start;
    background-color: #fff;
    width: 79%;
    padding: 20px;
    display: none ;  /* no working*/
    pointer-events: none;
    opacity: 0;
    height: 0;
    display: flex; /* Ensure it becomes visible */
    transform: translateY(0); /* Slide to its original position */
    transition: opacity .5s ease, transform .5s ease; /* Smooth animation */
    gap: 25px;
    background-color: #f6f5f4;
 }

 /* fix end till here */

 .dropdown:hover .dropdown-menu{
    position: relative;
    opacity: .98;
    background-color: #f6f5f4;
 }

 .ul-main .dropdown-menu li{
    font-size: 14px;
    border-bottom: none;
 }

 .ul-main li{
    border-bottom: 1px solid grey;
    width: 100%;
 }
 .ul-main a{
   color: #333;
   width: 100%;
 }
 .dropdown-menu{
    box-shadow: none;
 }

 /* end menu strip verticle applied to all size less than 1024px width */
 .certification-logo{
    display: none;
}
 /* banner home */
 .banner-home{
    height: 100%;
    background-image: url(phonebg.jpg);
 }
 .banner-left h1{
    line-height: 39px;
 }

 .banner-left{
    padding-top: 100px;
    padding-bottom: 20px;
    height: 100vh;
    gap: 2rem;
 }
 .banner-left .f1-line{
   margin-top: 30px;
 }

/* FOR SLIDE SLIDER EFFECT OF F1 LINE */
@keyframes typing-erasing {
   0%, 15% {
     width: 0; /* Start with no text */
   }
   50% {
     width: 78%; /* Text is fully typed */
   }
   70% {
     width: 78%; /* Pause briefly after typing */
   }
   100% {
     width: 0; /* Smooth and slow erasing */
   }
 }
 

 .banner-left .f3-line{
   width: 15em ;
 }

 .banner-right .card-slider{
    width: 76vw;
 }


 /* brief secxtions */
.left-brief-hm{
   font-size: 14px;
   line-height: 2;
}
.left-brief-hm:hover{
   background: none;
}
.brief-section-hm .top-title h1{
   line-height: 37px;
}

 .right-brief-hm{
   min-width: 41vw;
   min-height: 37vh;
   max-width: 43vh;
 }
 .chief-surgeon{
   flex-direction: column-reverse;
 }



 .pointers li::before{
   top: 19%;
 }
/* spseclities */
/* .specialities-hm{
 
} */
 section .card {
   padding: 50px 30px 50px 31px !important;
   margin: 0;
   margin-bottom: 8rem !important;
   width: 100% !important;
   height: 67% !important;
   max-height: none !important;
   flex-direction: column;
 }
 .card img {
   margin: -100px 0 30px 0 !important;
   width: 100% !important;
   max-width: 180px !important;
   height: 176px !important;
 }
 
 .card button {
   min-width: 160px;
 }
 .card .div{
   text-align: left !important;
 }
 
.card .line-ht{
   font-size: unset !important; 
   line-height: 21px !important;
}



 /* styling featured */
 .featured-tube-hm{
   height: 150vh;
   flex-direction: column;
   gap: 8rem;
   /* overflow: scroll; */
 }
 /* .yt-bg-hm{
  
 } */
 .video-container{
   margin-top: 15px;
   
 }
 .video-container iframe {
   background-size: contain;
   width: 100% !important;
   height: 180px;
   margin-top: 10px;
   max-width: 100% !important;
  
   aspect-ratio: 16 / 9 !important; /* Ensure proper video proportions */
}


/* adjkusting rating bg animation for phone */
.ratings-hm{
   background-size: 400% 400%; 
   animation: gradientAnimation 6s ease infinite;
}
.right-tube-hm h1{
   line-height: 3rem;
}
.yt-bg-hm{
   background-size: cover;
}
/* styling footer */

.footer-column {
   width: 100%;
   padding: 0;
   padding-top: 10px;
 }

 .middle-column {
   width: 100%;
 }

 .footer-links {
   flex-direction: column;
   margin-bottom: 2px;
 }

 .link-column {
   width: 100%;
   margin-bottom: 0;
 }
 .link-column a {
   padding: 1px 0;
 }
.last-strip{
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding-top: 12px;
}
 .copyright {
   text-align: center;
   padding-right: 0;
   
 }

.social-icons{
   padding-left: 0;
   padding-top: 0;
}

.imp-sol{
   display: block;
}


}

/* tablets */
@media (min-width: 481px) and (max-width: 768px) {
    /* strip section */
    .strip{
        display: none;
    }

     /* banner home */
 .banner-home{
    height: 100%;
 }
 .banner-left{
    padding-top: 124px;
    padding-bottom: 20px;
    height: 100vh;
 }
 .banner-right .card-slider{
    width: 76vw;
 }

/* section nav */

/* menu bar for mobile and tab showing after click of menu button  strt*/

.menu-strip{
   position: sticky;
}

.rem-display{
   display: block;  /*dont work* rememvber apply on all width below 1024 have to copy paste in diff width mediaquerries*/
   width: 79% !important;
   padding: 20px !important;
   gap: 25px !important;
   pointer-events: auto !important;
   opacity: 1 !important ;
   height:fit-content !important;
   transform: translateY(-20px); /* Positioned slightly above */
   transition: opacity .5s ease, transform .5s ease; /* Smooth animation */
  }
.menu-strip .nav-right .ul-main{

   position: absolute;  /* Position absolutely within its nearest positioned ancestor */
    top: 100%;
    left: 11%;
    right: 68%;
    flex-direction: column;
    align-items: flex-start;
    background-color: #fff;
    width: 79%;
    padding: 20px;
    display: none ;  /* no working*/
    pointer-events: none;
    opacity: 0;
    height: 0;
    display: flex; /* Ensure it becomes visible */
    transform: translateY(0); /* Slide to its original position */
    transition: opacity .5s ease, transform .5s ease; /* Smooth animation */
    gap: 25px;
    background-color: #f6f5f4;
 }

 .dropdown:hover .dropdown-menu{
    position: relative;
    opacity: .98;
    background-color: #f6f5f4;
 }

 .ul-main .dropdown-menu li{
    font-size: 14px;
    border-bottom: none;
 }

 .ul-main li{
    border-bottom: 1px solid grey;
    width: 100%;
 }
 .ul-main a{
   color: #333;
   width: 100%;
 }
 .dropdown-menu{
    box-shadow: none;
 }

 /* end menu strip verticle applied to all size less than 1024px width */

 .certification-logo{
    display: none;
}


@keyframes typing-erasing {
   0%, 15% {
     width: 0; /* Start with no text */
   }
   50% {
     width: 78%; /* Text is fully typed */
   }
   70% {
     width: 78%; /* Pause briefly after typing */
   }
   100% {
     width: 0; /* Smooth and slow erasing */
   }
 }
/* brief secxtions */
.right-brief-hm{
   min-width: 80vw;
   min-height: 50vh;
 }
 .chief-surgeon{
   flex-direction: column-reverse;
 }



 /* specialities */
 .specialities-hm .card{
   padding: 50px 30px 50px 35px !important;
 }
 /* styling featured tube */
 .featured-tube-hm{
   height: fit-content;
   flex-direction: column;
 }


 .video-container iframe {
   /* height: 223px; */
   margin-top: 10px;
   max-width: 100% !important;
   width: 97% !important; /* Make the iframe responsive */
   aspect-ratio: 16 / 9 !important; /* Ensure proper video proportions */
}

/* adjkusting rating bg animation for phone */
.ratings-hm{
   background-size: 400% 400%; 
   animation: gradientAnimation 6s ease infinite;
}


/* stytling footer */
.footer-column {
   width: 100%;
   padding: 0;
   padding-top: 10px;
 }

 .middle-column {
   width: 100%;
 }

 .footer-links {
   flex-direction: column;
   margin-bottom: 2px;
 }

 .link-column {
   width: 100%;
   margin-bottom: 0;
 }
 .link-column a {
   padding: 1px 0;
 }

 .copyright {
   text-align: center;
   
 }

.social-icons{
   padding-left: 0;
   padding-top: 0;
}

.right-tube-hm h1{
   line-height: 3rem;
}

.last-strip{
   flex-direction: column;
   align-items: baseline;

}

}




/* laptops */
@media (min-width: 769px) and (max-width: 1024px) {
    /* strip section */
.strip{
    display: none;
}

/* section nav */

/* menu bar for mobile and tab showing after click of menu button  strt*/

.menu-strip{
   position: sticky;
}

.rem-display{
   display: block;  /*dont work* rememvber apply on all width below 1024 have to copy paste in diff width mediaquerries*/
   width: 79% !important;
   padding: 20px !important;
   gap: 25px !important;
   pointer-events: auto !important;
   opacity: 1 !important ;
   height:fit-content !important;
   transform: translateY(-20px); /* Positioned slightly above */
   transition: opacity .5s ease, transform .5s ease; /* Smooth animation */
  }
.menu-strip .nav-right .ul-main{

   position: absolute;  /* Position absolutely within its nearest positioned ancestor */
    top: 100%;
    left: 11%;
    right: 68%;
    flex-direction: column;
    align-items: flex-start;
    background-color: #fff;
    width: 79%;
    padding: 20px;
    display: none ;  /* no working*/
    pointer-events: none;
    opacity: 0;
    height: 0;
    display: flex; /* Ensure it becomes visible */
    transform: translateY(0); /* Slide to its original position */
    transition: opacity .5s ease, transform .5s ease; /* Smooth animation */
    gap: 25px;
    background-color: #f6f5f4;
 }

 .dropdown:hover .dropdown-menu{
    position: relative;
    opacity: .98;
    background-color: #f6f5f4;
 }

 .ul-main .dropdown-menu li{
    font-size: 14px;
    border-bottom: none;
 }

 .ul-main li{
    border-bottom: 1px solid grey;
    width: 100%;
 }
 .ul-main a{
   color: #333;
   width: 100%;
 }

 .dropdown-menu{
    box-shadow: none;
 }

 /* end menu strip verticle applied to all size less than 1024px width */
 .certification-logo{
    display: none;
}
/* banner home section */
.banner-home{
    height: 100%;
    flex-direction: column;
 }

 .banner-left{
    
    height: 100vh;
    padding-top: 172px;
    flex: none;
 }
.banner-right{
    padding-bottom: 80px;
}
 .banner-right .card-slider{
    width: 37vw;
    height: 70vh;
 }
 /* brief secxtions */
.right-brief-hm{
   min-width: 80vw;
   min-height: 55vh;
 }

 .chief-surgeon{
   flex-direction: column-reverse;
 }

  /* specialities */
  .specialities-hm{
    flex-direction: column;
     height: 100% !important; 
     align-items: center;
  }
     
  /* styling featured-section youube and fyqs */
  .featured-tube-hm{
   flex-direction: column;
   height: 100%;
  }
  .yt-bg-hm{
   height: 74vh;
  }
  .video-container iframe {
   margin-top: 5px;
}


  
}

/* desktops */
@media (min-width: 1025px) and (max-width: 1200px) {
/* section nav */
.burger{
    display: none;
}

/* strip menu nav */
.menu-strip .nav-right .ul-main{
    font-size: 1em;
    gap: 12px;
}
/* banner home section */
.banner-right .card-slider{
    width: 22vw;
 }
 /* .right-brief-hm{
   max-width: 30vw;
   max-height: 75vh;
  
 } */
  .Contoura{
   max-width: 32vw;
   max-height: 75vh;
   background-size: contain;
   background-image: url(machines/contoura.png) !important;
  }


 /* specialities  */  
.specialities-hm .card{
   max-width: 345px;

}


}

/* large screens */
@media (min-width: 1201px) {
/* section nav */
.burger{
    display: none;
}
/* banner home section */
.banner-right .card-slider{
    width: 21vw;
 }
 .techAI{
   line-height: 42px;
 }
 .Contoura{
   max-width: 32vw;
   max-height: 75vh;
   background-size: contain;
   background-image: url(machines/Contour.jpeg) !important;
  }


}