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

@media (max-width:1400px){

.container{

    width:95%;

}

.hero h1{

    font-size:64px;

}

.card-1{

    left:-20px;

}

.card-2{

    right:-20px;

}

}







@media (max-width:1200px){

.menu{

    gap:24px;

}

.hero-grid{

    gap:40px;

}

.hero h1{

    font-size:56px;

}

.hero p{

    font-size:16px;

}

.hero-stats{

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

}

.mega-menu{

    width:900px;

    left:-300px;

}

}







@media (max-width:1024px){

.topbar{

    display:none;

}

.menu{

    display:none;

}

.header-phone{

    display:none;

}

.mobile-toggle{

    display:block;

}

.navbar{

    height:82px;

}

.logo img{

    height:56px;

}

.hero{

    padding:70px 0;

}

.hero-grid{

    grid-template-columns:1fr;

}

.hero-content{

    order:2;

    text-align:center;

}

.hero-image{

    order:1;

}

.hero-buttons{

    justify-content:center;

}

.hero-review{

    justify-content:center;

}

.hero h1{

    font-size:52px;

}

.hero p{

    max-width:100%;

}

.hero-stats{

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

}

.trust-grid{

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

}

.card-1{

    left:20px;

}

.card-2{

    right:20px;

}

.card-3{

    left:20px;

}

}







@media (max-width:768px){

.hero{

    padding:50px 0;

}

.hero h1{

    font-size:44px;

}

.hero p{

    font-size:15px;

    line-height:1.8;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons a{

    width:100%;

}

.hero-review{

    flex-direction:column;

    gap:10px;

}

.hero-stats{

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

}

.stat-card{

    padding:22px;

}

.trust-grid{

    grid-template-columns:1fr;

}

.floating-card{

    position:relative;

    left:0;

    right:0;

    top:0;

    bottom:0;

    margin-top:20px;

    animation:none;

}

.hero-image{

    display:flex;

    flex-direction:column;

}

.hero-image img{

    border-radius:28px;

}

.mega-menu{

    display:none;

}

}







@media (max-width:576px){

.logo img{

    height:48px;

}

.navbar{

    height:72px;

}

.hero-badge{

    font-size:12px;

}

.hero h1{

    font-size:36px;

}

.hero p{

    font-size:14px;

}

.hero-stats{

    grid-template-columns:1fr 1fr;

    gap:12px;

}

.stat-card h3{

    font-size:28px;

}

.stat-card p{

    font-size:13px;

}

.primary-btn{

    width:100%;

    justify-content:center;

}

.secondary-btn{

    width:100%;

}

.mobile-menu{

    width:100%;

}

.floating-buttons{

    right:15px;

    bottom:15px;

}

.floating-buttons a{

    width:52px;

    height:52px;

}

}







@media (max-width:400px){

.hero h1{

    font-size:30px;

}

.hero-stats{

    grid-template-columns:1fr;

}

.hero-review{

    text-align:center;

}

.trust-grid div{

    flex-direction:column;

    text-align:center;

}

}