/* ======================================
   RESPONSIVE.CSS
====================================== */

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

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

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

.container{
    width:100%;
}

@media (max-width:991px){

    .container{
        padding-left:20px !important;
        padding-right:20px !important;
    }

    [class*="col-lg-"],
    [class*="col-md-"]{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
    }

    .row{
        row-gap:25px;
    }

}

@media (max-width:767px){

    .container{
        padding-left:15px !important;
        padding-right:15px !important;
    }

    h1{
        font-size:34px !important;
        line-height:1.2;
    }

    h2{
        font-size:28px !important;
    }

    h3{
        font-size:22px !important;
    }

    p{
        font-size:15px !important;
        line-height:28px;
    }

}


/* ==========================================
   HEADER RESPONSIVE
========================================== */

@media (max-width:1199px){

    .tmp-header-area-start{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:9999;
        background:#fff;
    }

    .tmp-header-area-start .container{
        width:100%;
        max-width:100%;
        padding:0 18px !important;
    }

    .tmp-header-area-start .header-content{
        height:70px;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .tmp-mainmenu-nav{
        display:none !important;
    }

    .tmp-side-collups-area{
        display:flex !important;
        align-items:center;
        justify-content:flex-end;
    }

    .tmp-menu-bars{
        width:45px;
        height:45px;
        border:none;
        background:transparent;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
    }

    .tmp-menu-bars i{
        font-size:28px;
        color:#111;
    }

    body{
        padding-top:70px;
    }

}

@media (max-width:1199px){

    .tmp-sidebar-area{
        display:block !important;
    }

}

.mobile-nav{
    margin-top:40px;
}

.mobile-nav ul{
    list-style:none;
    padding:0;
    margin:0;
}

.mobile-nav li{
    border-bottom:1px solid #eee;
}

.mobile-nav a{
    display:block;
    padding:18px 20px;
    font-size:18px;
    font-weight:600;
    color:#111;
    text-decoration:none;
}

.mobile-nav a:hover{
    color:#ff4a57;
}

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

@media (max-width:991px){

    .rpp-banner-four-area{
        position:relative;
        overflow:hidden;
        padding-top:20px;
    }

    .banner-four-main-wrapper{
        position:relative;
        overflow:hidden;
        padding:80px 0 60px !important;
    }

    .banner-four-right-bg-img{
        position:absolute;
        top:0;
        left:50%;
        transform:translateX(-50%);
        width:340px;
        z-index:1;
        display:block !important;
    }

    .banner-four-right-bg-img img{
        width:100%;
        height:auto;
        display:block;
    }

    .bg-benner-img-four{
        position:absolute;
        top:85px;
        left:50%;
        transform:translateX(-50%);
        width:190px;
        z-index:2;
        margin:0;
    }

    .bg-benner-img-four img{
        width:100%;
        height:auto;
        display:block;
    }

    .banner-four-main-wrapper .row{
        position:relative;
        z-index:3;
        text-align:center;
        margin-top:270px;
    }

    .banner-four-main-wrapper .inner{
        padding:0 20px;
    }

    .banner-four-main-wrapper .sub-title{
        font-size:16px;
    }

    .banner-four-main-wrapper .title{
        font-size:36px !important;
        line-height:1.15 !important;
    }

    .banner-four-main-wrapper .description{
        font-size:15px;
        line-height:28px;
        max-width:100%;
    }

    .banner-right-content{
        margin-top:35px;
        text-align:center;
    }

    .year-expariance-wrap{
        margin-bottom:25px;
    }

    .find-me-on{
        margin-top:20px;
    }
}

@media (max-width:576px){

    .banner-four-right-bg-img{
        width:290px;
    }

    .bg-benner-img-four{
        width:170px;
        top:78px;
    }

    .banner-four-main-wrapper .row{
        margin-top:245px; 
    }

    .banner-four-main-wrapper .title{
        font-size:30px !important;
    }

    .banner-four-main-wrapper .description{
        font-size:14px;
        line-height:26px;
    }
}

@media (max-width:991px){
.bg-benner-img-four{
        position:absolute !important;
        top:60px;
        left:50%;
        transform:translateX(-50%);
        width:330px !important;   /* image container size */
        z-index:5;
    }

    .bg-benner-img-four img{
        width:330px !important;
        max-width:none !important;
        height:auto !important;
        display:block;
    }

}


/* ===================================
   TEXT PARA SECTION RESPONSIVE
=================================== */

@media (max-width:991px){

    .text-para-doc-wrap{
        position: relative;
        padding: 50px 25px !important;
        text-align: center;
        overflow: hidden;
    }

    .text-para-documents{
        font-size: 34px !important;
        line-height: 1.4 !important;
        word-break: break-word;
        position: relative;
        z-index: 2;
    }

    .right-bg-text-para{
        position: absolute;
        right: -40px;
        bottom: -30px;
        width: 140px;
        opacity: .15;
        z-index: 1;
    }

    .right-bg-text-para img{
        width: 100%;
        display: block;
    }

    .left-bg-text-para{
        position: absolute;
        left: -40px;
        top: -30px;
        width: 140px;
        opacity: .15;
        z-index: 1;
    }

    .left-bg-text-para img{
        width: 100%;
        display: block;
    }

}

@media (max-width:576px){

    .text-para-doc-wrap{
        padding: 40px 18px !important;
    }

    .text-para-documents{
        font-size: 24px !important;
        line-height: 1.5 !important;
    }

    .left-bg-text-para,
    .right-bg-text-para{
        width: 90px;
        opacity: .12;
    }

}



/* ===================================
   ABOUT SECTION RESPONSIVE
=================================== */

@media (max-width:991px){

    .about-us-area{
        padding:70px 0 !important;
    }

    .about-us-area .row{
        display:flex;
        flex-direction:column;
        gap:40px;
    }

    .about-us-left-content-wrap{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:20px;
        margin-bottom:20px;
    }

    /* Experience Card */

    .years-of-experience-card{
        width:100%;
        max-width:320px;
        margin:0 auto;
        text-align:center;
    }

    .years-of-experience-card .card-title{
        font-size:55px !important;
    }

    /* Business Card */

    .design-card{
        width:100%;
        max-width:320px;
        margin:0 auto;
    }

    .design-card .card-info{
        text-align:left;
    }

    /* Right Content */

    .about-us-right-content-wrap{
        text-align:center;
    }

    .section-head{
        margin-bottom:35px !important;
    }

    .section-head .title{
        font-size:36px !important;
        line-height:1.25 !important;
    }

    .section-head .description{
        max-width:100%;
        font-size:15px;
        line-height:28px;
    }

    /* Cards */

    .about-us-section-card{
        margin-top:10px;
    }

    .about-us-section-card .col-lg-6,
    .about-us-section-card .col-md-6{
        width:100%;
        max-width:100%;
        flex:0 0 100%;
    }

    .about-us-card{
        width:100%;
        padding:25px;
        margin:0 auto;
    }

    .about-us-card .card-head{
        display:flex;
        align-items:center;
        gap:15px;
    }

    .about-us-card .card-title{
        font-size:22px !important;
    }

    .about-us-card .card-para{
        font-size:15px !important;
        line-height:26px !important;
    }

}

@media (max-width:576px){

    .about-us-area{
        padding:55px 0 !important;
    }

    .years-of-experience-card{
        max-width:100%;
    }

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

    .years-of-experience-card .card-title{
        font-size:48px !important;
    }

    .section-head .title{
        font-size:30px !important;
    }

    .section-head .description{
        font-size:14px !important;
        line-height:25px !important;
    }

    .about-us-card{
        padding:20px;
    }

    .about-us-card .card-title{
        font-size:20px !important;
    }

}


/* =========================================
   COMPANIES SECTION RESPONSIVE
========================================= */

@media (max-width:991px){

    .tmp-portfolio-area{
        padding:70px 0 !important;
    }

    /* Heading */

    .tmp-portfolio-area .section-head{
        text-align:center;
        margin-bottom:40px !important;
    }

    .tmp-portfolio-area .section-head .title{
        font-size:36px !important;
        line-height:1.3 !important;
    }

    .tmp-portfolio-area .section-head .description{
        max-width:100%;
        font-size:15px !important;
        line-height:28px !important;
        margin:15px auto 0;
    }

    /* Cards */

    .tmp-portfolio-area .row{
        row-gap:25px;
    }

    .tmp-portfolio-area .col-lg-4,
    .tmp-portfolio-area .col-md-6{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
    }

    .company-card{
        max-width:500px;
        margin:0 auto;
        border-radius:18px;
        overflow:hidden;
    }

    .company-image img{
        width:100%;
        height:auto;
        display:block;
    }

    .company-info{
        padding:20px !important;
    }

    .company-hover h3{
        font-size:24px !important;
        line-height:1.3 !important;
    }

    .company-hover p{
        font-size:15px !important;
        line-height:26px !important;
    }

    .company-category{
        font-size:14px !important;
    }

}

@media (max-width:576px){

    .tmp-portfolio-area{
        padding:55px 0 !important;
    }

    .tmp-portfolio-area .section-head .title{
        font-size:30px !important;
    }

    .tmp-portfolio-area .section-head .description{
        font-size:14px !important;
        line-height:25px !important;
    }

    .company-card{
        border-radius:15px;
    }

    .company-info{
        padding:18px !important;
    }

    .company-hover h3{
        font-size:21px !important;
    }

    .company-hover p{
        font-size:14px !important;
        line-height:24px !important;
    }

}
/* ===== MOBILE COMPANY CARD REDESIGN ===== */

@media (max-width:991px){

.company-card{
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:auto !important;
}

.company-image{
    height:220px !important;
}

.company-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Hide default layer */

.company-default{
    display:none !important;
}

/* Remove hover effect */

.company-hover{
    position:relative !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    inset:auto !important;
    background:#fff !important;
    color:#222 !important;
    padding:22px !important;
    min-height:auto !important;
}

.company-category.white{
    color:#ff5a1f !important;
    font-weight:600;
}

.company-hover h3{
    color:#111 !important;
    font-size:22px !important;
    margin:8px 0 12px;
}

.company-hover p{
    color:#666 !important;
    line-height:1.7;
    margin:0;
}

}


/* =========================================
   EXPERTISE SECTION RESPONSIVE
========================================= */

@media (max-width:991px){

    .my-skill-area-style-two{
        padding:60px 20px !important;
        margin-top:50px !important;
    }

    .tpm-custom-box-bg{
        padding:40px 20px !important;
        border-radius:20px;
    }

    /* Heading */

    .my-skill-area-left-content-wrap{
        text-align:center;
        margin-bottom:35px;
    }

    .my-skill-area-left-content-wrap .title{
        font-size:34px !important;
        line-height:1.3 !important;
    }

    .my-skill-area-left-content-wrap .description{
        font-size:15px !important;
        line-height:28px !important;
        max-width:100%;
    }

    /* Cards */

    .my-skill-card-style-two{
        row-gap:20px;
    }

    .my-skill-card-style-two .col-xl-6,
    .my-skill-card-style-two .col-lg-6,
    .my-skill-card-style-two .col-md-6{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
    }

    .my-skill-card{
        padding:25px !important;
        border-radius:18px;
        height:auto !important;
        min-height:unset !important;
    }

    .my-skill-card .card-title{
        font-size:22px !important;
        margin-bottom:12px;
    }

    .my-skill-card .card-para{
        font-size:15px !important;
        line-height:26px !important;
    }

}

@media (max-width:576px){

    .my-skill-area-style-two{
        padding:45px 15px !important;
    }

    .tpm-custom-box-bg{
        padding:30px 15px !important;
    }

    .my-skill-area-left-content-wrap .title{
        font-size:28px !important;
    }

    .my-skill-area-left-content-wrap .description{
        font-size:14px !important;
        line-height:25px !important;
    }

    .my-skill-card{
        padding:20px !important;
        border-radius:15px;
    }

    .my-skill-card .card-title{
        font-size:20px !important;
    }

    .my-skill-card .card-para{
        font-size:14px !important;
        line-height:24px !important;
    }

}



/* =========================================
   FOOTER RESPONSIVE
========================================= */

@media (max-width:991px){

    .footer-area{
        padding:70px 0 40px !important;
    }

    .footer-main{
        text-align:center;
    }

    .footer-main .row{
        row-gap:40px;
    }

    .footer-main .col-lg-4,
    .footer-main .col-lg-3,
    .footer-main .col-lg-2,
    .footer-main .col-md-6{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
    }

    .single-footer-wrapper,
    .quick-link-wrap{
        padding:0 !important;
        border:none !important;
    }

    .border-right{
        border:none !important;
    }

    .ft-title{
        font-size:24px !important;
        margin-bottom:18px;
    }

    .description{
        max-width:100%;
        margin:0 auto 25px;
        font-size:15px !important;
        line-height:28px !important;
    }

    .social-link.footer{
        justify-content:center;
        display:flex;
        gap:15px;
    }

    .ft-link{
        padding:0;
        margin:0;
        list-style:none;
    }

    .ft-link li{
        margin-bottom:14px;
    }

    .ft-link a{
        font-size:16px;
    }

    .contact-wrap .ft-link li{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
    }

    /* Copyright */

    .copyright-area-one{
        padding:20px 0;
    }

    .copyright-area-one .main-wrapper{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:15px;
        text-align:center;
    }

    .copyright-area-one ul{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:18px;
        padding:0;
        margin:0;
        list-style:none;
    }

}

/* Mobile */

@media (max-width:576px){

    .footer-area{
        padding:55px 0 30px !important;
    }

    .ft-title{
        font-size:22px !important;
    }

    .description{
        font-size:14px !important;
        line-height:25px !important;
    }

    .ft-link a,
    .ft-link li{
        font-size:15px !important;
    }

    .social-link.footer a{
        width:42px;
        height:42px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
    }

    .copyright-area-one .copy-right-para{
        font-size:14px !important;
    }

    .copyright-area-one ul{
        gap:12px;
    }

}


/* =========================================
   HERO RIGHT CONTENT RESPONSIVE
========================================= */

@media (max-width:991px){

    .banner-right-content{
        margin-top:35px !important;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:25px;
    }

    /* Experience Card */

    .year-expariance-wrap{
        width:240px;
        padding:25px 20px;
        border-radius:18px;
        margin:0 auto;
        text-align:center;
    }

    .year-expariance-wrap .title{
        font-size:48px !important;
        line-height:1;
        margin-bottom:10px;
    }

    .year-expariance-wrap .para{
        font-size:16px !important;
        line-height:26px !important;
        margin:0;
    }

    /* Social */

    .find-me-on{
        width:100%;
        margin-top:0 !important;
    }

    .find-me-on-title{
        font-size:22px !important;
        margin-bottom:15px;
    }

    .social-link.banner{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:15px;
        flex-wrap:wrap;
    }

    .social-link.banner a{
        width:50px;
        height:50px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        font-size:20px;
    }

}

@media (max-width:576px){

    .year-expariance-wrap{
        width:200px;
        padding:20px 15px;
    }

    .year-expariance-wrap .title{
        font-size:42px !important;
    }

    .year-expariance-wrap .para{
        font-size:14px !important;
        line-height:22px !important;
    }

    .find-me-on-title{
        font-size:20px !important;
    }

    .social-link.banner a{
        width:45px;
        height:45px;
        font-size:18px;
    }

}


.banner-four-main-wrapper .inner .title {
    font-size: 72px;
    line-height: 1.05;
}

/* Desktop view */
@media (min-width: 992px) {
    .banner-four-main-wrapper .inner .title {
        white-space: nowrap;
    }
}

/* Tablet & Mobile */
@media (max-width: 991px) {
    .banner-four-main-wrapper .inner .title {
        font-size: 45px;
        line-height: 1.1;
    }
}



/* Disable Scroll Snap */
html,
body {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    overflow-x: hidden;
}

* {
    scroll-snap-align: unset !important;
    scroll-snap-stop: normal !important;
}

/* Mobile only */
@media (max-width: 991px) {
    html,
    body {
        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
        overscroll-behavior: auto !important;
    }

    section,
    .swiper,
    .swiper-wrapper,
    .swiper-slide {
        scroll-snap-align: unset !important;
        scroll-snap-stop: normal !important;
    }
}


.developer-credit {
    margin: 0;
    font-size: inherit; 
    color: inherit;     
}

.developer-credit a {
    color: inherit;    
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
    transition: color 0.3s ease;
}

.developer-credit a:hover {
    color: #ffb400;
}

/* Mobile Menu Width */
@media (max-width: 767px) {
    .tmp-sidebar-area {
        width: 300px !important;
        max-width: 85vw !important;
    }

    .mobile-nav ul li a {
        display: block;
        width: 100%;
        font-size: 18px;
        white-space: nowrap;
        overflow: visible;
        text-overflow: unset;
    }
}