*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',sans-serif}
html{scroll-behavior:smooth}

/* HEADER */
.header{background:#fff;height:80px;display:flex;align-items:center;position:sticky;top:0;z-index:999;box-shadow:0 4px 15px rgba(0,0,0,0.05)}
.container{width:92%;max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center}
.logo img{height:55px}
.nav ul{display:flex;gap:40px;list-style:none}
.nav a{text-decoration:none;color:#777;font-weight:500}
.nav a:hover,.nav a.active{color:#1693b8}
.contact-btn{background:#1693b8;color:#fff!important;padding:10px 20px;border-radius:6px}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.hamburger span{width:25px;height:3px;background:#000}

/* HERO */
.hero-slider{position:relative;height:85vh;overflow:hidden}
.slide{position:absolute;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:.8s}
.slide.active{opacity:1}
.overlay{position:absolute;width:100%;height:100%;background:linear-gradient(to right,rgba(0,0,0,.75),transparent)}
.slide-content{position:absolute;top:50%;left:8%;transform:translateY(-50%);color:#fff;max-width:600px}
.slide-content h1{font-size:52px;font-weight:700}

/* SECTIONS */
.section{background:#fff;padding:60px 0}
.box{width:85%;max-width:1200px;margin:auto;padding:80px 70px}
.grey-box{background:#f3f3f3}
.blue-box{background:#E0EBF6}
.contact-box{background:#E0EBF6}

h2{font-size:48px;margin-bottom:30px}
p{font-size:18px;line-height:1.9;margin-bottom:20px}
ul{padding-left:20px}
li{margin-bottom:15px;font-size:17px}

.primary-btn{background:#1693b8;color:#fff;padding:14px 40px;border:none;border-radius:6px;cursor:pointer}
.primary-btn:hover{background:#117a98}

.hidden-content{display:none}
.hidden-content.show{display:block}

.center{text-align:center}

/* CONTACT GRID */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact-grid form{display:flex;flex-direction:column;gap:20px}
.contact-grid input,.contact-grid textarea{padding:18px;border:none;border-radius:8px;font-size:16px}
.contact-grid button{background:#1693b8;color:#fff;border:none;padding:14px;border-radius:6px;cursor:pointer}

/* FOOTER */
.footer{background:#1793b7;padding:50px 20px;text-align:center;color:#fff}
.footer-social a{display:inline-flex;width:55px;height:55px;margin:0 10px;border-radius:50%;border:1px solid rgba(255,255,255,.4);align-items:center;justify-content:center;color:#fff;text-decoration:none}
.footer-social a:hover{background:rgba(255,255,255,.15)}

/* RESPONSIVE */
@media(max-width:992px){
.nav{position:absolute;top:80px;right:0;background:#fff;width:250px;height:0;overflow:hidden;transition:.3s}
.nav.show{height:300px;padding:20px}
.nav ul{flex-direction:column;gap:20px}
.hamburger{display:flex}
.slide-content h1{font-size:34px}
.box{padding:60px 40px}
.contact-grid{grid-template-columns:1fr}
}

@media(max-width:576px){
.box{width:92%;padding:40px 25px}
h2{font-size:28px}
p{font-size:15px}
}



.nav-link {
    position: relative;
    padding-bottom: 6px;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: #1693b8;
    transition: 0.3s ease;
}

.nav-link.active::after {
    width: 100%;
}




.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.slide.active {
    opacity: 1;
    z-index: 1;
}


.hero-slider {
    position: relative;
    width: 100%;
    height: 85vh;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0.2), transparent);
    z-index: 3;
}

.slide-content {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    color: #fff;
    max-width: 600px;
    z-index: 4;
}

.slide-content h1 {
    font-size: 52px;
    font-weight: 700;
}

/* Arrows */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #1693b8;
    border: none;
    color: #fff;
    font-size: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    transition: 0.3s ease;
}

.arrow:hover {
    background: #117a98;
}

.arrow.left {
    left: 25px;
}

.arrow.right {
    right: 25px;
}

/* Dots */
.dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}

.dot {
    width: 10px;
    height: 10px;
    background: #fff;
    opacity: 0.5;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    opacity: 1;
}