/* =========================================================
   COMPLETE RESPONSIVE CSS
   CLEAN + MERGED + OVERRIDE SAFE
   =========================================================
   BREAKPOINTS
   1300px  - Large Desktop
   1100px  - Tablet / Small Desktop
   991px   - Tablet
   900px   - Small Tablet
   767px   - Mobile
   600px   - Small Mobile
   480px   - Small Mobile
   360px   - Extra Small
========================================================= */


/* =========================================================
   GLOBAL RESPONSIVE SAFETY
========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}


/* =========================================================
   LARGE DESKTOP
   MAX-WIDTH: 1300px
========================================================= */

@media (max-width:1300px){

    /* =====================================================
       ABOUT
    ===================================================== */

    .about-section{
        padding:90px 25px;
    }

    .about-container{
        gap:40px;
    }

    .about-images{
        width:50%;
        min-height:730px;
    }

    .about-image-one{
        width:65%;
        height:460px;
    }

    .about-image-two{
        top:445px;
        width:86%;
        height:400px;
    }

    .experience-badge{
        left:44%;
        width:110px;
        height:275px;
    }

    .experience-text{
        height:178px;
        font-size:22px;
    }

    .experience-number{
        width:88px;
        height:88px;
        font-size:44px;
    }

    .about-content h2{
        font-size:31px;
    }

    .about-content p{
        font-size:15px;
    }

    .about-features{
        margin-top:55px;
        gap:25px;
    }

    .feature-icon{
        width:66px;
        height:66px;
        font-size:24px;
    }

    .feature-text h4{
        font-size:17px;
    }
}


/* =========================================================
   TABLET / SMALL DESKTOP
   MAX-WIDTH: 1100px
========================================================= */

@media (max-width:1100px){

    /* =====================================================
       HERO
    ===================================================== */

    .hero-slider{
        width:100%;
        height:650px;
    }

    .hero-section{
        width:100%;
        min-height:650px;
    }

    .hero-container{
        width:100%;
        gap:35px;
    }

    .hero-content h1{
        font-size:46px;
    }

    .hero-image img{
        max-width:460px;
        width:100%;
        height:auto;
    }


    /* =====================================================
       SERVICES
    ===================================================== */

    .services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* =====================================================
       STATS
    ===================================================== */

    .stats-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* =====================================================
       PROCESS
    ===================================================== */

    .process-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* =====================================================
       PROJECTS
    ===================================================== */

    .projects-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* =====================================================
       TESTIMONIALS
    ===================================================== */

    .testimonial-section{
        padding:75px 0;
    }

    .testimonial-section .container{
        width:90%;
        max-width:100%;
    }

    .testimonial-grid{
        display:flex;
        flex-wrap:wrap;
        gap:22px;
    }

    .testimonial-card{
        width:calc(33.333333% - 15px);
        flex:0 0 calc(33.333333% - 15px);
        padding:29px 25px 26px;
        box-sizing:border-box;
    }

    .testimonial-section .section-heading h2{
        font-size:38px;
    }


    /* =====================================================
       CLIENT LOGOS
    ===================================================== */

    .client-logo-section{
        padding:30px 35px;
    }

    .client-logo-slider{
        width:100%;
        height:90px;
    }

    .client-logo-track{
        gap:25px;
        padding:0 48px;
    }

    .client-logo{
        width:145px;
        flex-basis:145px;
        height:70px;
    }

    .client-logo img{
        max-width:135px;
        max-height:58px;
    }

}


/* =========================================================
   TABLET
   MAX-WIDTH: 991px
========================================================= */

@media (max-width:991px){

    /* =====================================================
       ABOUT
    ===================================================== */

    .about-section{
        padding:80px 25px;
    }

    .about-container{
        display:flex;
        flex-direction:column;
        gap:50px;
    }

    .about-images{
        width:100%;
        max-width:750px;
        min-height:650px;
        margin:0 auto;
    }

    .about-image-one{
        width:62%;
        height:410px;
    }

    .about-image-two{
        top:395px;
        width:82%;
        height:330px;
    }

    .experience-badge{
        top:45px;
        left:45%;
        width:105px;
        height:255px;
    }

    .experience-text{
        height:165px;
        font-size:21px;
    }

    .experience-number{
        width:82px;
        height:82px;
        font-size:42px;
    }

    .about-content{
        width:100%;
        padding:0;
    }

    .about-small-title{
        margin-bottom:30px;
        text-align:left;
    }

    .about-content h2{
        font-size:30px;
    }

    .about-content p{
        font-size:15px;
        line-height:1.7;
    }

    .about-features{
        margin-top:45px;
    }

    .about-bottom{
        margin-top:45px;
    }


    /* =====================================================
       PRICING / TEAM / WHY / BLOG
    ===================================================== */

    .pricing-grid,
    .team-grid,
    .why-grid,
    .blog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* =========================================================
   SMALL TABLET
   MAX-WIDTH: 900px
========================================================= */

@media (max-width:900px){

    /* =====================================================
       HERO
    ===================================================== */

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content{
        width:100%;
    }

    .hero-content > p{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-image{
        width:100%;
        max-width:600px;
        margin:auto;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-container{
        grid-template-columns:1fr;
        gap:50px;
    }

    .about-image{
        width:100%;
        max-width:650px;
        margin:auto;
    }


    /* =====================================================
       APPOINTMENT
    ===================================================== */

    .appointment-container{
        grid-template-columns:1fr;
    }

    .appointment-info{
        width:100%;
        max-width:700px;
    }


    /* =====================================================
       PRICING
    ===================================================== */

    .pricing-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* =====================================================
       TEAM
    ===================================================== */

    .team-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* =====================================================
       WHY
    ===================================================== */

    .why-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* =====================================================
       BLOG
    ===================================================== */

    .blog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    /* =====================================================
       TESTIMONIALS
    ===================================================== */

    .testimonial-section{
        padding:70px 0;
    }

    .testimonial-section .section-heading{
        margin-bottom:40px;
    }

    .testimonial-section .section-heading h2{
        font-size:35px;
    }

    .testimonial-grid{
        gap:20px;
    }

    .testimonial-card{
        width:calc(50% - 10px);
        flex:0 0 calc(50% - 10px);
        padding:28px 25px;
    }

    .testimonial-card > p{
        font-size:14px;
        line-height:1.75;
    }
}


/* =========================================================
   MOBILE
   MAX-WIDTH: 767px
========================================================= */

@media (max-width:767px){

    /* =====================================================
       GLOBAL
    ===================================================== */

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    .container{
        width:100%;
        max-width:100%;
        padding-left:15px;
        padding-right:15px;
        box-sizing:border-box;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-section{
        width:100%;
        min-height:auto;
        padding:80px 0 60px;
        overflow:hidden;
    }

    .hero-slider{
        width:100%;
        height:auto;
        min-height:780px;
        overflow:hidden;
    }

    .hero-slide{
        position:absolute;
        width:100%;
        min-height:780px;
        height:100%;
        overflow:hidden;
    }

    .hero-container{
        width:100%;
        min-height:780px;
        height:auto;

        padding:75px 20px 90px;

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;

        text-align:center;
        gap:35px;

        box-sizing:border-box;
    }

    .hero-content{
        width:100%;
        max-width:650px;
        order:1;
        text-align:center;
    }

    .hero-content h1{
        width:100%;
        max-width:100%;
        font-size:34px;
        line-height:1.2;
        word-wrap:break-word;
    }

    .hero-content h1 span{
        display:block;
    }

    .hero-content > p{
        width:100%;
        max-width:600px;

        margin-left:auto;
        margin-right:auto;
        margin-bottom:25px;

        font-size:14px;
        line-height:1.7;
    }

    .hero-small-title{
        font-size:11px;
    }

    .hero-buttons{
        width:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:stretch;
        gap:12px;
    }

    .hero-buttons a{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    .primary-btn,
    .secondary-btn,
    .white-btn{
        min-height:48px;
        padding:0 20px;
        font-size:14px;
        box-sizing:border-box;
    }

    .hero-image{
        width:100%;
        max-width:100%;
        order:2;

        display:flex;
        justify-content:center;
        align-items:center;
    }

    .hero-image img{
        width:auto;
        max-width:330px;
        max-height:280px;
        height:auto;
        object-fit:contain;
    }

    .hero-image::before{
        width:280px;
        height:280px;
    }

    .hero-prev,
    .hero-next{
        width:38px;
        height:38px;
        font-size:13px;
        z-index:20;
    }

    .hero-prev{
        left:10px;
    }

    .hero-next{
        right:10px;
    }

    .hero-dots{
        bottom:20px;
    }


    /* =====================================================
       SECTION SPACING
    ===================================================== */

    .about-section,
    .services-section,
    .stats-section,
    .team-section,
    .pricing-section,
    .process-section,
    .faq-section,
    .projects-section,
    .appointment-section,
    .why-section,
    .blog-section{
        padding:70px 0;
    }

    .section-heading{
        margin-bottom:35px;
    }

    .section-heading h2,
    .stats-heading h2,
    .about-content h2,
    .appointment-info h2{
        font-size:30px;
    }

    .section-heading p{
        font-size:14px;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-section{
        width:100%;
        padding:65px 18px;
        box-sizing:border-box;
        overflow:hidden;
    }

    .about-container{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:45px;
    }

    .about-images{
        width:100%;
        max-width:650px;
        min-height:480px;
        margin:0 auto;
        box-sizing:border-box;
    }

    .about-image-one{
        width:72%;
        height:300px;
        border-radius:0 22px 0 22px;
    }

    .about-image-two{
        top:285px;
        width:88%;
        height:235px;
        border-width:7px;
        border-radius:20px 0 12px 0;
    }

    .experience-badge{
        top:35px;
        left:52%;
        width:82px;
        height:205px;
        border-radius:6px 6px 45px 45px;
    }

    .experience-text{
        height:132px;
        font-size:16px;
    }

    .experience-number{
        width:66px;
        height:66px;
        font-size:34px;
    }

    .about-content{
        width:100%;
        max-width:100%;
        padding:0;
    }

    .about-small-title{
        font-size:18px;
        margin-bottom:22px;
        text-align:left;
    }

    .about-content h2{
        width:100%;
        max-width:100%;
        font-size:25px;
        line-height:1.3;
        letter-spacing:0;
    }

    .about-content p{
        width:100%;
        max-width:100%;
        font-size:14px;
        line-height:1.7;
        text-align:left;
    }

    .about-features{
        width:100%;
        margin-top:38px;

        display:flex;
        flex-direction:column;
        align-items:flex-start;

        gap:25px;
    }

    .about-feature{
        width:100%;
        max-width:100%;
        gap:18px;
    }

    .feature-icon{
        width:60px;
        height:60px;
        font-size:22px;
        flex-shrink:0;
    }

    .feature-text h4{
        font-size:16px;
    }

    .about-bottom{
        width:100%;
        margin-top:35px;

        display:flex;
        flex-direction:column;
        align-items:flex-start;

        gap:25px;
    }

    .about-btn{
        min-width:190px;
        height:48px;
    }

    .about-contact{
        gap:15px;
    }

    .contact-icon{
        width:52px;
        height:52px;
        font-size:21px;
        flex-shrink:0;
    }

    .about-contact strong{
        font-size:18px;
    }


    /* =====================================================
       ALL GRIDS
    ===================================================== */

    .services-grid,
    .stats-grid,
    .team-grid,
    .pricing-grid,
    .process-grid,
    .projects-grid,
    .why-grid,
    .blog-grid{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
    }


    /* =====================================================
       SERVICES
    ===================================================== */

    .service-card{
        width:100%;
        padding:30px 25px;
        box-sizing:border-box;
    }


    /* =====================================================
       CONSULTATION
    ===================================================== */

    .consultation-section{
        padding:55px 0;
    }

    .consultation-container{
        flex-direction:column;
        text-align:center;
    }

    .consultation-container h2{
        font-size:30px;
    }


    /* =====================================================
       TEAM
    ===================================================== */

    .team-image{
        width:100%;
        height:350px;
    }


    /* =====================================================
       APPOINTMENT
    ===================================================== */

    .form-row{
        grid-template-columns:1fr;
    }

    .appointment-form{
        width:100%;
        padding:25px 20px;
        box-sizing:border-box;
    }

    .appointment-form .primary-btn{
        width:100%;
    }


    /* =====================================================
       PROJECTS
    ===================================================== */

    .project-card{
        width:100%;
        max-width:100%;
    }

    .project-card > img{
        width:100%;
        height:260px;
        object-fit:cover;
    }


    /* =====================================================
       TESTIMONIALS
    ===================================================== */

    .testimonial-section{
        width:100%;
        padding:60px 0;
        overflow:hidden;
        box-sizing:border-box;
    }

    .testimonial-section .container{
        width:90%;
        max-width:100%;
        padding:0;
        margin:0 auto;
    }

    .testimonial-section .section-heading{
        margin-bottom:32px;
    }

    .testimonial-section .section-label{
        font-size:11px;
        letter-spacing:1.5px;
    }

    .testimonial-section .section-heading h2{
        font-size:31px;
    }

    .testimonial-grid{
        display:flex !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;

        width:100% !important;
        max-width:100% !important;

        gap:20px !important;

        align-items:center !important;
        justify-content:flex-start !important;

        overflow:visible !important;
    }

    .testimonial-card{
        display:block !important;

        width:100% !important;
        max-width:650px !important;
        min-width:0 !important;

        flex:0 0 auto !important;

        margin:0 !important;
        padding:28px 25px !important;

        box-sizing:border-box !important;

        overflow:visible !important;
    }

    .testimonial-card > p{
        width:100% !important;
        max-width:100% !important;

        min-height:0 !important;
        height:auto !important;

        font-size:14px !important;
        line-height:1.8 !important;

        white-space:normal !important;
        overflow:visible !important;

        word-break:normal !important;
        overflow-wrap:anywhere !important;
    }


    /* =====================================================
       CLIENT LOGOS
    ===================================================== */

    .client-logo-section{
        width:100%;
        max-width:100%;
        padding:25px 28px;

        box-sizing:border-box;
        overflow:hidden;
    }

    .client-logo-slider{
        width:100%;
        max-width:100%;
        height:80px;
        overflow:hidden;
    }

    .client-logo-track{
        width:max-content;
        max-width:none;
        gap:20px;
        padding:0 38px;
    }

    .client-logo{
        width:125px;
        flex-basis:125px;
        height:65px;
        flex-shrink:0;
    }

    .client-logo img{
        max-width:115px;
        max-height:52px;
    }

    .logo-arrow{
        width:28px;
        height:35px;
    }

    .logo-arrow::before{
        width:11px;
        height:11px;
    }


    /* =====================================================
       CTA
    ===================================================== */

    
}


/* =========================================================
   SMALL MOBILE
   MAX-WIDTH: 600px
========================================================= */

@media (max-width:600px){

    /* =====================================================
       TESTIMONIALS
    ===================================================== */

    .testimonial-section{
        padding:52px 0;
    }

    .testimonial-section .container{
        width:90%;
    }

    .testimonial-section .section-heading{
        margin-bottom:28px;
    }

    .testimonial-section .section-label{
        padding:6px 14px;
        font-size:10px;
        letter-spacing:1.3px;
    }

    .testimonial-section .section-heading h2{
        font-size:27px;
        line-height:1.3;
    }

    .testimonial-grid{
        gap:17px !important;
    }

    .testimonial-card{
        width:100% !important;
        max-width:100% !important;

        padding:25px 21px 23px !important;

        border-radius:16px;
    }

    .testimonial-stars{
        margin-bottom:16px;
    }

    .testimonial-stars i{
        font-size:14px;
    }

    .testimonial-card > p{
        font-size:13px !important;
        line-height:1.8 !important;
    }

    .client-info{
        gap:12px;
        margin-top:20px;
        padding-top:16px;
    }

    .client-avatar{
        width:44px;
        height:44px;
        flex-basis:44px;
        font-size:16px;
        flex-shrink:0;
    }

    .client-info strong{
        font-size:14px;
    }

    .client-info span{
        font-size:11px;
    }
}


/* =========================================================
   SMALL MOBILE
   MAX-WIDTH: 480px
========================================================= */

@media (max-width:480px){

    /* =====================================================
       GLOBAL
    ===================================================== */

    .container{
        padding-left:12px;
        padding-right:12px;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-slider,
    .hero-slide,
    .hero-container{
        min-height:760px;
    }

    .hero-container{
        padding:65px 30px 80px;
        gap:30px;
    }

    .hero-content h1{
        font-size:29px;
        line-height:1.2;
    }

    .hero-content > p{
        font-size:13px;
    }

    .hero-image img{
        max-width:280px;
        max-height:230px;
    }

    .hero-image::before{
        width:230px;
        height:230px;
    }

    .hero-prev,
    .hero-next{
        width:34px;
        height:34px;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-section{
        padding:55px 12px;
    }

    .about-images{
        min-height:405px;
    }

    .about-image-one{
        width:75%;
        height:250px;
    }

    .about-image-two{
        top:238px;
        width:91%;
        height:190px;
        border-width:6px;
    }

    .experience-badge{
        top:28px;
        left:54%;
        width:70px;
        height:175px;
        border-radius:5px 5px 38px 38px;
    }

    .experience-text{
        height:112px;
        font-size:14px;
    }

    .experience-number{
        width:57px;
        height:57px;
        font-size:29px;
    }

    .about-content h2{
        font-size:22px;
    }

    .about-content p{
        font-size:13px;
    }

    .feature-icon{
        width:55px;
        height:55px;
        font-size:20px;
    }

    .feature-text h4{
        font-size:15px;
    }

    .about-contact strong{
        font-size:16px;
    }


    /* =====================================================
       SECTION HEADINGS
    ===================================================== */

    .section-heading h2,
    .stats-heading h2,
    .about-content h2,
    .appointment-info h2{
        font-size:27px;
    }


    /* =====================================================
       STATS
    ===================================================== */

    .stat-box{
        padding:28px 15px;
    }

    .stat-box strong{
        font-size:30px;
    }


    /* =====================================================
       PRICING
    ===================================================== */

    .pricing-card{
        padding:30px 22px;
    }


    /* =====================================================
       FAQ
    ===================================================== */

    .faq-list summary{
        padding:18px;
        font-size:14px;
    }

    .faq-list details p{
        padding:0 18px 18px;
        font-size:13px;
    }


    /* =====================================================
       PROJECTS
    ===================================================== */

    .project-card > img{
        height:220px;
    }


    /* =====================================================
       BLOG
    ===================================================== */

    .blog-image{
        height:220px;
    }


    /* =====================================================
       TESTIMONIALS
    ===================================================== */

    .testimonial-section{
        padding:45px 0;
    }

    .testimonial-section .container{
        width:92%;
    }

    .testimonial-section .section-heading{
        margin-bottom:25px;
    }

    .testimonial-section .section-heading h2{
        font-size:24px;
    }

    .testimonial-grid{
        width:100%;
        gap:15px !important;
    }

    .testimonial-card{
        width:100% !important;
        max-width:none !important;

        padding:23px 19px 21px !important;

        border-radius:14px;
    }

    .testimonial-card > p{
        font-size:13px !important;
        line-height:1.75 !important;
    }

    .testimonial-card > p::before{
        top:-20px;
        left:-3px;
        font-size:65px;
    }

    .client-info{
        margin-top:18px;
    }


    /* =====================================================
       CLIENT LOGOS
    ===================================================== */

    .client-logo-section{
        padding:22px;
    }

    .client-logo-slider{
        height:72px;
    }

    .client-logo-track{
        gap:15px;
        padding:0 32px;
    }

    .client-logo{
        width:105px;
        flex-basis:105px;
        height:60px;
    }

    .client-logo img{
        max-width:95px;
        max-height:48px;
    }

    .logo-arrow{
        width:25px;
    }


    /* =====================================================
       CTA
    ===================================================== */

}


/* =========================================================
   EXTRA SMALL MOBILE
   MAX-WIDTH: 360px
========================================================= */

@media (max-width:360px){

    /* =====================================================
       HERO
    ===================================================== */

    .hero-container{
        padding-left:25px;
        padding-right:25px;
    }

    .hero-content h1{
        font-size:26px;
    }

    .hero-content > p{
        font-size:12.5px;
    }

    .hero-image img{
        max-width:250px;
        max-height:210px;
    }


    /* =====================================================
       TESTIMONIALS
    ===================================================== */

    .testimonial-section{
        padding:40px 0;
    }

    .testimonial-section .container{
        width:92%;
    }

    .testimonial-section .section-heading h2{
        font-size:22px;
    }

    .testimonial-card{
        padding:21px 17px !important;
    }

    .testimonial-card > p{
        font-size:12.5px !important;
        line-height:1.75 !important;
    }
}


/* =========================================================
   FINAL MOBILE OVERFLOW PROTECTION
   MAX-WIDTH: 767px
========================================================= */

@media (max-width:767px){

    .hero-section,
    .hero-slider,
    .about-section,
    .testimonial-section,
    .client-logo-section{
        max-width:100vw;
    }

    .hero-container,
    .about-container,
    .testimonial-grid,
    .services-grid,
    .stats-grid,
    .team-grid,
    .pricing-grid,
    .process-grid,
    .projects-grid,
    .why-grid,
    .blog-grid{
        max-width:100%;
    }

    .hero-content,
    .hero-image,
    .about-content,
    .about-images,
    .testimonial-card,
    .service-card,
    .project-card{
        min-width:0;
    }
}