/* 
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: 55px;
        padding-bottom: 5px;
        gap: 2rem;
    }

    .banner-right {
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
    }

    .card-slider {
        margin: 1px;
    }

    .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: 95vw;
    }

    /* 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: 100%;
        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: 100%;
        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: 100%;
        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;
    }
}