/*=========================================================
                LARGE DESKTOP
=========================================================*/
@media (min-width:1600px){

.container{

max-width:1600px;

padding:0 90px;

}

}

/*=========================================================
                    LAPTOP
=========================================================*/

@media (max-width:1200px){

.container{

padding:0 50px;

}

section{

padding:100px 0;

}

.nav-links{

gap:30px;

}

.logo img{

height:60px;

}

}

/*=========================================================
                    TABLET
=========================================================*/

@media (max-width:992px){

.container{

padding:0 30px;

}

section{

padding:90px 0;

}

.logo img{

height:55px;

}

.nav-links{

gap:22px;

font-size:15px;

}

.btn-primary{

padding:13px 24px;

}

}

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

@media (max-width:768px){

.container{

padding:0 20px;

}

section{

padding:80px 0;

}

/* NAVBAR */

#navbar{

padding:18px 0;

}

.logo img{

height:48px;

}

.nav-container{

flex-wrap:wrap;

gap:20px;

justify-content:center;

}

.nav-links{

width:100%;

justify-content:center;

flex-wrap:wrap;

gap:16px;

}

.nav-links a{

font-size:14px;

}

.btn-primary{

padding:12px 20px;

font-size:14px;

}

}

/*=========================================================
                SMALL MOBILE
=========================================================*/

@media (max-width:576px){

.container{

padding:0 16px;

}

section{

padding:70px 0;

}

.logo img{

height:42px;

}

.nav-links{

gap:12px;

}

.nav-links a{

font-size:13px;

}

.btn-primary{

width:100%;

justify-content:center;

padding:13px;

}

}

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

/* Laptop */

@media (max-width:1200px){

.hero{

min-height:900px;

}

.hero-content{

max-width:100%;

padding-inline:8px;

}

.hero-content h1{

font-size:clamp(3rem,6vw,5rem);

line-height:1.05;

}

.hero-content p{

font-size:18px;

max-width:620px;

}

.hero-buttons{

gap:18px;

}

}

/* Tablet */

@media (max-width:992px){

.hero{

min-height:850px;

padding-top:130px;

}

.hero-content{

max-width:100%;

text-align:center;

margin:auto;

}

.hero-subtitle{

justify-content:center;

}

.hero-content h1{

font-size:clamp(2.8rem,7vw,4.2rem);

}

.hero-content p{

margin:30px auto;

font-size:17px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

gap:16px;

}

.scroll-indicator{

bottom:25px;

}

}

/* Mobile */

@media (max-width:768px){

.hero{

min-height:100vh;

padding:120px 0 80px;

}

.hero-content{

width:100%;
    align-items:center;

    justify-content:center;

    text-align:center;
}

.hero-subtitle{

font-size:13px;

letter-spacing:2px;

}

.hero-content h1{

font-size:clamp(2.2rem,10vw,3.4rem);

line-height:1.1;

}

.hero-content p{

font-size:16px;

line-height:1.8;

margin:25px auto;

    align-items:center;

    justify-content:center;

    text-align:center;


}

.hero-buttons{

flex-direction:column;

align-items:center;

width:100%;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

width:min(320px,100%);

justify-content:center;

}
.hero-title{

    width:100%;

    text-align:center;

    margin:25px auto;

}

.hero-title span{

    display:block;

}

.hero-stats{

flex-wrap:wrap;

justify-content:center;

gap:25px;

margin-top:50px;

}

.hero-video{

object-position:center;

}

}

/* Small Mobile */

@media (max-width:480px){

.hero{

padding-top:110px;

}

.hero-content h1{

font-size:2rem;

}

.hero-content p{

font-size:15px;

}

.hero-buttons{

gap:14px;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

width:100%;

}

.hero-stats{

flex-direction:column;

gap:18px;

}

}

/*=========================================================
                MOBILE NAVIGATION
=========================================================*/

.menu-toggle{

    display:none;

    width:50px;

    height:50px;

    background:transparent;

    border:none;

    cursor:pointer;

    position:relative;

    z-index:10002;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:6px;

}

.menu-toggle span{

    display:block;

    width:28px;

    height:2.5px;

    background:#fff;

    border-radius:10px;

    transition:all .35s ease;

}

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    max-width:420px;

    height:100vh;

    background:rgba(5,5,5,.96);

    backdrop-filter:blur(20px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:28px;

    transition:.45s ease;

    z-index:10000;

    pointer-events:auto;

    box-shadow:-10px 0 40px rgba(0,0,0,.45);

}

.mobile-menu a{

color:#fff;

font-size:20px;

font-weight:500;

text-decoration:none;

transition:.3s;

}

.mobile-menu a:hover{

color:var(--primary);

}

.mobile-menu .btn-primary{

margin-top:20px;

width:220px;

justify-content:center;

}

.mobile-menu.active{

right:0;

}

/*=========================
    HAMBURGER ANIMATION
=========================*/

.menu-toggle.active span:nth-child(1){

    transform:translateY(8.5px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

    transform:scaleX(0);

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-8.5px) rotate(-45deg);

}
/* Dark Overlay */

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.35s;

    z-index:9999;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

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

@media(max-width:992px){

#navbar{

padding:16px 0;

}

.nav-container{

display:flex;

align-items:center;

justify-content:space-between;

padding:0 20px;

width:100%;

}

.logo{

flex-shrink:0;

}

.logo img{

height:46px;

width:auto;

}

.desktop-nav,

.desktop-btn{

display:none;

}

.menu-toggle{

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

margin-left:auto;

}

}

@media(max-width:576px){

.mobile-menu{

width:100%;

}

.mobile-menu a{

font-size:18px;

}

}


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

@media (max-width:992px){

#about{

padding:90px 0;

}

.about-wrapper{

display:grid !important;

grid-template-columns:1fr !important;

gap:60px;

}

.about-image{

width:100%;

max-width:420px;

height:560px;

margin:auto;

}

.about-content{

width:100%;

text-align:center;

align-items:center;

}

.about-content h2{

font-size:clamp(42px,10vw,72px);

}

.about-content p{

max-width:700px;

}

.about-features{

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

width:100%;

}

.about-content .btn-primary{

margin:auto;

}

}

@media (max-width:576px){

.about-wrapper{

gap:45px;

}

.about-image{

max-width:320px;

height:430px;

}

.about-features{

grid-template-columns:1fr;

gap:18px;

}

.feature{

justify-content:flex-start;

}

}
/*=====================================
        TRUST STRIP
======================================*/

@media (max-width:768px){

.trust-box{

display:grid;

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

gap:18px;

padding:25px 20px;

}

.trust-item{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

padding:10px;

}

.trust-item::after{

display:none !important;

}

.trust-item h2{

font-size:48px;

}

.trust-item span{

font-size:11px;

line-height:1.5;

text-align:center;

}

}

@media (max-width:420px){

.trust-item h2{

font-size:42px;

}

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

@media (max-width:992px){

#services{

padding:90px 0;

}

.section-title{

font-size:clamp(42px,10vw,72px);

}

.section-description{

margin:30px auto 50px;

font-size:16px;

line-height:1.8;

}

.services-grid{

grid-template-columns:1fr !important;

gap:25px;

}

.service-card{

height:420px;

}

.service-overlay{

padding:30px;

}

.service-overlay h3{

font-size:42px;

}

}

@media (max-width:576px){

.service-card{

height:360px;

}

.service-overlay{

padding:22px;

}

.service-overlay h3{

font-size:34px;

}

.service-overlay span{

font-size:12px;

letter-spacing:2px;

}

.service-btn{

opacity:1;

transform:none;

width:52px;

height:52px;

}

}


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

@media (max-width:992px){

#why-us{

padding:90px 0;

}

.why-wrapper{

display:grid !important;

grid-template-columns:1fr !important;

gap:60px;

}

.why-content{

text-align:center;

}

.why-content h2{

font-size:clamp(42px,10vw,72px);

margin-bottom:25px;

}

.why-content p{

max-width:700px;

margin:0 auto 35px;

font-size:16px;

line-height:1.9;

}

.why-content .btn-primary{

margin:auto;

}

.why-grid{

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

gap:20px;

}

.offset{

margin-top:0 !important;

}

.why-card{

padding:30px;

height:100%;

}

.icon{

margin-bottom:18px;

}

.why-card h3{

font-size:28px;

}

}

@media (max-width:576px){

.why-wrapper{

gap:45px;

}

.why-grid{

grid-template-columns:1fr !important;

}

.why-card{

padding:28px 24px;

text-align:left;

}

.icon{

width:60px;

height:60px;

font-size:28px;

}

.why-card h3{

font-size:30px;

}

.why-card p{

font-size:15px;

line-height:1.7;

}

}

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

@media (max-width:992px){

#footer{

padding:80px 0 30px;

}

.footer-top{

display:grid !important;

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

gap:40px;

margin-bottom:50px;

}

.footer-about{

grid-column:1/-1;

text-align:center;

}

.footer-about img{

margin:0 auto 20px;

}

.footer-about p{

max-width:600px;

margin:auto;

}

.footer-map iframe{

height:280px;

}

}

@media (max-width:576px){

.footer-top{

display:grid !important;

grid-template-columns:1fr 1fr;

gap:35px 25px;

align-items:start;

text-align:left;

}

/* Logo */

.footer-about{

grid-column:1/-1;

}

.footer-about img{

width:80px;

margin-bottom:20px;

}

.footer-about p{

max-width:100%;

margin:0;

line-height:1.9;

}

/* Two Columns */

.footer-links,
.footer-services{

display:flex;

flex-direction:column;

align-items:flex-start;

gap:14px;

}

.footer-contact{

grid-column:1/-1;

display:flex;

flex-direction:column;

align-items:flex-start;

gap:14px;

margin-top:10px;

}

.footer-top h3{

margin-bottom:12px;

font-size:24px;

}

.footer-top a,
.footer-contact p{

font-size:15px;

line-height:1.8;

word-break:break-word;

}

/* Map */

.footer-map{

margin-top:30px;

border-radius:20px;

overflow:hidden;

}

.footer-map iframe{

height:240px;

}

/* Copyright */

.footer-bottom{

margin-top:30px;

text-align:center;

font-size:14px;

}

}