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

@media (max-width:1400px){

.container{

width:95%;

}

.menu{

gap:30px;

}

.menu>li>a{

font-size:20px;

}

.hero-content h1{

font-size:65px;

}

}


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

@media (max-width:1200px){

.header-right{

display:none;

}

.menu{

gap:22px;

}

.menu>li>a{

font-size:18px;

}

.logo img{

height:55px;

}

}


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

@media (max-width:991px){

header{

height:80px;

background:#fff;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

header .container{

height:80px;

}

.logo img{

height:45px;

}

/* Desktop Menu */

.navbar{

position:fixed;

top:80px;

left:-100%;

width:320px;

height:calc(100vh - 80px);

background:#fff;

overflow-y:auto;

transition:.4s;

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

z-index:9999;

}

.navbar.active{

left:0;

}

/* Menu */

.menu{

display:block;

padding:25px 0;

}

.menu>li{

border-bottom:1px solid #efefef;

}

.menu>li>a{

display:flex;

justify-content:space-between;

padding:18px 25px;

font-size:18px;

}

/* Dropdown */

.dropdown{

position:static;

width:100%;

display:none;

visibility:visible;

opacity:1;

background:#fafafa;

box-shadow:none;

border-radius:0;

}

.dropdown.active{

display:block;

}

.dropdown li a{

padding-left:40px;

color:#222;

}

.submenu{

position:static;

width:100%;

display:none;

visibility:visible;

opacity:1;

background:#f5f5f5;

}

.submenu.active{

display:block;

}

.submenu li a{

padding-left:60px;

}

/* Hamburger */

.mobile-toggle{

display:flex;

}

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

transform:rotate(45deg) translate(6px,6px);

}

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

opacity:0;

}

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

transform:rotate(-45deg) translate(7px,-7px);

}

.hero{

margin-top:80px;

height:70vh;

}

}


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

@media (max-width:768px){

.navbar{

width:100%;

}

.hero{

height:60vh;

min-height:500px;

}

.hero-content{

left:20px;

right:20px;

width:auto;

}

.hero-content h1{

font-size:40px;

line-height:1.2;

}

.hero-content p{

font-size:15px;

line-height:1.7;

width:100%;

}

.hero-btn{

padding:15px 30px;

}

}


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

@media (max-width:480px){

.logo img{

height:40px;

}

.hero{

height:55vh;

min-height:420px;

}

.hero-content h1{

font-size:30px;

}

.hero-content p{

font-size:14px;

}

.hero-btn{

width:100%;

text-align:center;

}

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

@media(max-width:1200px){

.hero-content h1{

font-size:60px;

}

}

@media(max-width:991px){

.hero{

height:70vh;

min-height:550px;

margin-top:80px;

}

.hero-content{

left:6%;

max-width:90%;

}

.hero-content h1{

font-size:48px;

}

.hero-content p{

font-size:17px;

}

.swiper-button-next,
.swiper-button-prev{

display:none;

}

}

@media(max-width:768px){

.hero{

height:60vh;

min-height:500px;

}

.hero-content{

left:25px;

right:25px;

max-width:100%;

}

.hero-content h1{

font-size:36px;

line-height:1.2;

}

.hero-content p{

font-size:15px;

line-height:1.7;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:220px;

text-align:center;

}

}

@media(max-width:480px){

.hero{

height:55vh;

min-height:420px;

}

.hero-content h1{

font-size:30px;

}

.hero-subtitle{

font-size:12px;

letter-spacing:2px;

}

.hero-content p{

font-size:14px;

}

.hero-buttons a{

width:100%;

}

}
@media(max-width:991px){

.navbar{

position:fixed;

top:80px;

left:-100%;

width:320px;

height:100vh;

background:#fff;

transition:.4s;

overflow:auto;

}

.navbar.active{

left:0;

}

.menu{

display:block;

}

.menu li{

border-bottom:1px solid #eee;

}

.menu li a{

display:flex;

justify-content:space-between;

padding:18px 25px;

}

.dropdown{

display:none;

position:static;

opacity:1;

visibility:visible;

width:100%;

background:#fafafa;

}

.has-dropdown.open>.dropdown{

display:block;

}

.submenu{

display:none;

position:static;

opacity:1;

visibility:visible;

width:100%;

background:#f3f3f3;

}

.has-submenu.open>.submenu{

display:block;

}

}
@media(max-width:991px){

.product-grid{

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

}

}

@media(max-width:768px){

.product-grid{

grid-template-columns:1fr;

}

.product-img{

height:280px;

}

.section-title h2{

font-size:38px;

}

.product-content h3{

font-size:26px;

}

}
@media(max-width:991px){

.facility-wrapper{

grid-template-columns:1fr;

}

.feature-grid{

grid-template-columns:1fr;

}

.facility-counter{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.facility{

padding:70px 0;

}

.facility-content h3{

font-size:34px;

}

}
@media(max-width:768px){

.team{

padding:70px 0;

}

.team-wrapper{

gap:40px;

}

.team-card{

width:100%;

max-width:340px;

}

.team-image{

width:180px;

height:180px;

}

.team-content h3{

font-size:24px;

}

}
@media(max-width:991px){

.footer-top{

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

}

}

@media(max-width:768px){

.footer{

padding:70px 0 20px;

}

.footer-top{

grid-template-columns:1fr;

gap:40px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-logo{

height:60px;

}

}
@media(max-width:991px){

.footer-top{

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

gap:40px;

}

}

@media(max-width:768px){

.footer-top{

grid-template-columns:1fr;

text-align:left;

}

}
@media (max-width:768px){

.story-wrapper{

display:flex;

flex-direction:column;

gap:30px;

}

.story-image{

width:100%;

}

.story-image img{

width:100%;

height:auto;

display:block;

border-radius:20px;

}

.story-content{

width:100%;

padding:25px;

margin-top:0;

}

.story-content h3{

font-size:32px;

line-height:1.3;

}

.story-content p{

font-size:16px;

line-height:1.8;

}

}