/*==================================================
    VETNOL RESPONSIVE STYLES
    File : assets/css/responsive.css
==================================================*/

/*==================================================
                LARGE DESKTOP
        1600px and above
==================================================*/

@media (min-width:1600px){

    .container{

        max-width:1500px;

    }

    .hero-grid{

        gap:100px;

    }

    .hero-title{

        font-size:4.5rem;

    }

    .section{

        padding:140px 0;

    }

    .feature-grid{

        gap:40px;

    }

    .species-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .blog-grid{

        grid-template-columns:repeat(4,1fr);

    }

    .footer-grid{

        grid-template-columns:2fr 1fr 1fr 1fr;

    }

}

/*==================================================
                DESKTOP
        1400px
==================================================*/

@media (max-width:1400px){

    .container{

        max-width:1200px;

    }

    .hero-title{

        font-size:3.8rem;

    }

    .mega-menu{

        width:820px;

    }

}

/*==================================================
                LAPTOP
        1200px
==================================================*/

@media (max-width:1200px){

    .container{

        max-width:960px;

    }

    .hero-grid{

        gap:50px;

    }

    .hero-title{

        font-size:3.2rem;

    }

    .section-title{

        font-size:2.6rem;

    }

    .species-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .blog-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .doctor-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .pricing-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .gallery-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .mega-menu{

        width:720px;

    }

}

/*==================================================
                SMALL LAPTOP
        1100px
==================================================*/

@media (max-width:1100px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        order:-1;

    }

    .hero-image img{

        max-width:600px;

        margin:auto;

    }

    .about-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .testimonial-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}
/*==================================================
                TABLET
        992px
==================================================*/

@media (max-width:992px){

    .container{

        max-width:720px;

    }

    .desktop-menu{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

    .section{

        padding:90px 0;

    }

    .section-title{

        font-size:2.3rem;

    }

    .species-grid,

    .blog-grid,

    .doctor-grid,

    .pricing-grid,

    .gallery-grid,

    .service-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .feature-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

        gap:40px;

    }

    .cta-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .appointment-card{

        flex-direction:column;

        align-items:flex-start;

    }

    .timeline::before{

        left:16px;

    }

    .timeline-item{

        padding-left:50px;

    }

}

/*==================================================
                SMALL TABLET
        900px
==================================================*/

@media (max-width:900px){

    .hero-title{

        font-size:2.8rem;

    }

    .hero-subtitle{

        font-size:1.1rem;

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .counter-card{

        padding:30px 20px;

    }

    .newsletter{

        flex-direction:column;

        gap:20px;

    }

    .newsletter-form{

        width:100%;

    }

    .newsletter-form input{

        width:100%;

    }

    .pricing-card{

        padding:30px;

    }

    .doctor-photo{

        width:120px;

        height:120px;

    }

}

/*==================================================
                LARGE MOBILE
        768px
==================================================*/

@media (max-width:768px){

    .container{

        max-width:540px;

        padding-inline:18px;

    }

    .section{

        padding:80px 0;

    }

    .hero-title{

        font-size:2.4rem;

    }

    .section-title{

        font-size:2rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

        gap:16px;

    }

    .btn{

        width:100%;

        justify-content:center;

    }

    .species-grid,

    .blog-grid,

    .doctor-grid,

    .pricing-grid,

    .gallery-grid,

    .feature-grid,

    .service-grid,

    .stats-grid,

    .testimonial-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer{

        text-align:center;

    }

    .social-list{

        justify-content:center;

    }

    .breadcrumb{

        flex-wrap:wrap;

    }

    .table-responsive{

        overflow-x:auto;

    }

    table{

        min-width:700px;

    }

    .accordion-header{

        font-size:1rem;

    }

    .modal{

        width:95%;

    }

    .cookie-banner{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

}
/*==================================================
                MOBILE
        576px
==================================================*/

@media (max-width:576px){

    .container{

        padding-inline:16px;

    }

    .section{

        padding:70px 0;

    }

    .hero{

        padding-top:110px;

    }

    .hero-title{

        font-size:2rem;

        line-height:1.2;

    }

    .hero-subtitle{

        font-size:1rem;

    }

    .section-title{

        font-size:1.75rem;

    }

    .section-subtitle{

        font-size:.95rem;

    }

    .navbar{

        height:70px;

    }

    .nav-logo img{

        width:44px;

        height:44px;

    }

    .logo-title{

        font-size:1.15rem;

    }

    .logo-subtitle{

        display:none;

    }

    .service-card,

    .species-card,

    .blog-card,

    .pricing-card,

    .doctor-card,

    .testimonial-card{

        border-radius:22px;

    }

    .service-card,

    .doctor-card,

    .pricing-card{

        padding:24px;

    }

    .species-card-image img,

    .blog-image img,

    .gallery-card img{

        height:220px;

    }

    .stats-number{

        font-size:2.2rem;

    }

    .counter-card{

        padding:24px;

    }

    .timeline-item{

        padding-left:40px;

    }

    .timeline::before{

        left:12px;

    }

    .timeline-item::before{

        width:18px;

        height:18px;

        left:3px;

    }

    .chat-window{

        max-height:380px;

    }

    .chat-input{

        padding:12px;

    }

    .footer-widget{

        text-align:center;

    }

}

/*==================================================
                SMALL MOBILE
        480px
==================================================*/

@media (max-width:480px){

    .hero-title{

        font-size:1.8rem;

    }

    .section-title{

        font-size:1.55rem;

    }

    .btn{

        padding:13px 18px;

        font-size:.95rem;

    }

    .hero-buttons{

        gap:12px;

    }

    .feature-card,

    .service-card,

    .doctor-card,

    .pricing-card,

    .species-card-body,

    .blog-content{

        padding:20px;

    }

    .doctor-photo{

        width:100px;

        height:100px;

    }

    .service-icon{

        width:72px;

        height:72px;

        font-size:30px;

    }

    .stats-number{

        font-size:2rem;

    }

    .carousel-btn{

        display:none;

    }

    .modal-content{

        padding:22px;

    }

    .cookie-banner{

        left:10px;

        right:10px;

        bottom:10px;

        padding:18px;

    }

    .floating-buttons{

        right:12px;

        bottom:12px;

    }

}

/*==================================================
                EXTRA SMALL
        360px
==================================================*/

@media (max-width:360px){

    .container{

        padding-inline:12px;

    }

    .hero-title{

        font-size:1.6rem;

    }

    .section-title{

        font-size:1.4rem;

    }

    .btn{

        font-size:.9rem;

        padding:12px 16px;

    }

    .nav-logo{

        gap:8px;

    }

    .nav-logo img{

        width:38px;

        height:38px;

    }

    .logo-title{

        font-size:1rem;

    }

    .service-icon{

        width:64px;

        height:64px;

        font-size:26px;

    }

    .species-card-image img,

    .blog-image img{

        height:190px;

    }

    .price{

        font-size:2.2rem;

    }

    .stats-number{

        font-size:1.8rem;

    }

}

/*==================================================
                MOBILE UTILITIES
==================================================*/

@media (max-width:768px){

    .mobile-center{

        text-align:center !important;

    }

    .mobile-left{

        text-align:left !important;

    }

    .mobile-hidden{

        display:none !important;

    }

    .mobile-block{

        display:block !important;

    }

    .mobile-flex{

        display:flex !important;

    }

    .mobile-full{

        width:100% !important;

    }

    .mobile-stack{

        display:flex;

        flex-direction:column;

        gap:20px;

    }

    .mobile-scroll{

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

}
/*==================================================
                LANDSCAPE PHONES
==================================================*/

@media (max-height:500px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding:120px 0 80px;

    }

    .navbar{

        height:64px;

    }

    .mobile-menu nav{

        margin-top:70px;

        gap:16px;

    }

    .section{

        padding:60px 0;

    }

}

/*==================================================
                ULTRA WIDE DISPLAYS
==================================================*/

@media (min-width:1920px){

    .container{

        max-width:1700px;

    }

    .hero-title{

        font-size:5rem;

    }

    .section{

        padding:160px 0;

    }

    .hero-grid{

        gap:120px;

    }

    .feature-grid,

    .service-grid{

        gap:48px;

    }

}

/*==================================================
                HIGH DPI / RETINA
==================================================*/

@media (-webkit-min-device-pixel-ratio:2),
       (min-resolution:192dpi){

    img{

        image-rendering:auto;

    }

    .logo img{

        image-rendering:-webkit-optimize-contrast;

    }

}

/*==================================================
                REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

    }

}

/*==================================================
                PRINT STYLES
==================================================*/

@media print{

    body{

        background:#fff !important;

        color:#000 !important;

    }

    .site-header,

    .mobile-menu,

    .floating-buttons,

    .chat-widget,

    .cookie-banner,

    .newsletter,

    .video-section,

    .hero-buttons,

    .back-to-top,

    .loader,

    .progress-bar{

        display:none !important;

    }

    a{

        color:#000 !important;

        text-decoration:underline;

    }

    img{

        max-width:100%;

        page-break-inside:avoid;

    }

    .section{

        padding:30px 0;

        page-break-inside:avoid;

    }

    h1,h2,h3{

        page-break-after:avoid;

    }

}

/*==================================================
                RESPONSIVE SPACING
==================================================*/

@media (max-width:768px){

    .py-mobile-sm{

        padding-top:20px !important;

        padding-bottom:20px !important;

    }

    .py-mobile{

        padding-top:40px !important;

        padding-bottom:40px !important;

    }

    .px-mobile{

        padding-left:16px !important;

        padding-right:16px !important;

    }

    .mt-mobile{

        margin-top:20px !important;

    }

    .mb-mobile{

        margin-bottom:20px !important;

    }

    .gap-mobile{

        gap:16px !important;

    }

}

/*==================================================
                RESPONSIVE TYPOGRAPHY
==================================================*/

@media (max-width:768px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.7rem;

    }

    h3{

        font-size:1.35rem;

    }

    h4{

        font-size:1.15rem;

    }

    p{

        font-size:.98rem;

        line-height:1.7;

    }

    small{

        font-size:.8rem;

    }

}

/*==================================================
                RESPONSIVE IMAGES
==================================================*/

img,

picture,

video,

canvas,

svg{

    max-width:100%;

    height:auto;

}

.responsive-image{

    width:100%;

    display:block;

    object-fit:cover;

}

.aspect-square{

    aspect-ratio:1/1;

}

.aspect-video{

    aspect-ratio:16/9;

}

.aspect-portrait{

    aspect-ratio:3/4;

}

/*==================================================
                FLEX HELPERS
==================================================*/

@media (max-width:768px){

    .stack{

        display:flex;

        flex-direction:column !important;

    }

    .stack-center{

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .justify-mobile-center{

        justify-content:center !important;

    }

    .align-mobile-center{

        align-items:center !important;

    }

}

/*==================================================
                GRID HELPERS
==================================================*/

@media (max-width:768px){

    .grid-2,

    .grid-3,

    .grid-4,

    .grid-5{

        grid-template-columns:1fr !important;

    }

}

/*==================================================
                VISIBILITY HELPERS
==================================================*/

.desktop-only{

    display:block;

}

.mobile-only{

    display:none;

}

@media (max-width:768px){

    .desktop-only{

        display:none !important;

    }

    .mobile-only{

        display:block !important;

    }

}

/*==================================================
                SAFE AREA SUPPORT
==================================================*/

@supports (padding:max(0px)){

    .safe-bottom{

        padding-bottom:max(20px, env(safe-area-inset-bottom));

    }

    .safe-top{

        padding-top:max(20px, env(safe-area-inset-top));

    }

}

/*==================================================
                END OF FILE
==================================================*/