/*=============================
      ALAP
=============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#eaf8fb;
    color:#29445b;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

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

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:90px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(15px);
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    z-index:999;
}

nav ul{
    display:flex;
    list-style:none;
    gap:45px;
}

nav a{
    text-decoration:none;
    color:#2f8fc7;
    font-weight:600;
    transition:color .3s;
}

nav a:hover{color:#176b97;}

/* HERO */
.hero{
    min-height:100vh;
    padding:110px 20px 20px;
    background:
        linear-gradient(rgba(90,200,216,.45),rgba(47,143,199,.55)),
        url("images/hero.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hero-content{max-width:900px;}

.hero-logo{
    width:180px;
    border-radius:50%;
    margin-bottom:35px;
    box-shadow:0 25px 50px rgba(0,0,0,.18);
}

.hero h1{font-size:64px;color:#fff;margin-bottom:20px;}
.hero p{font-size:22px;color:#fff;margin-bottom:40px;}

.buttons{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-width:220px;
    height:56px;
    background:#fff;
    color:#2F8FC7;
    text-decoration:none;
    font-size:17px;
    font-weight:600;
    border:2px solid #2F8FC7;
    border-radius:14px;
    cursor:pointer;
    transition:background .25s,color .25s,transform .25s;
}

.btn:hover{
    background:#329FCA;
    color:#fff;
}

section{padding:100px 8%;}
section h2{text-align:center;font-size:42px;margin-bottom:45px;color:#2f8fc7;}

.offer-card,.category,.contact-grid div,.contact-card{
    background:#fff;
    border-radius:25px;
    border:1px solid #d9eef8;
    box-shadow:0 18px 45px rgba(60,120,180,.08);
    transition:.35s;
}

.offer-card:hover,.category:hover,.contact-grid div:hover,.contact-card:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 55px rgba(63,169,245,.18);
}

.offer-card{max-width:700px;margin:auto;padding:45px;text-align:center;}
.offer-card h3{font-size:34px;margin-bottom:20px;}
.offer-card p{color:#6c7b88;line-height:1.8;}
.offer-card span{display:block;margin-top:25px;font-size:34px;font-weight:bold;color:#2f8fc7;}

.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px;}
.category{padding:45px;text-align:center;}
.category i{font-size:55px;color:#5ac8d8;margin-bottom:20px;}
.category h3{color:#2f8fc7;}

.about{background:#fff;}
.about p{max-width:900px;margin:auto;text-align:center;line-height:2;color:#687785;}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;}
.contact-grid div,.contact-card{padding:40px;text-align:center;}
.contact-grid i{font-size:45px;color:#5ac8d8;margin-bottom:20px;}
.contact-card{display:block;text-decoration:none;color:inherit;}

footer{background:linear-gradient(135deg,#5ecfe6,#42b5dd);color:#fff;text-align:center;padding:70px 20px;}
footer img{width:90px;border-radius:50%;margin-bottom:15px;}
footer p{opacity:.85;}

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:5000;
    backdrop-filter:blur(6px);
}
.modal.show{opacity:1;visibility:visible;}

.modal-image{
    max-width:90%;
    max-height:90%;
    border-radius:20px;
    box-shadow:0 30px 60px rgba(0,0,0,.45);
    animation:zoom .3s ease;
}

.close{
    position:absolute;
    top:25px;
    right:35px;
    color:#fff;
    font-size:45px;
    cursor:pointer;
    user-select:none;
}

@keyframes zoom{
    from{transform:scale(.8);opacity:0;}
    to{transform:scale(1);opacity:1;}
}

.nav-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.85);
    color:#2F8FC7;
    font-size:22px;
    cursor:pointer;
    transition:.25s;
    z-index:10;
}

.nav-btn:hover{
    background:#EAF8FB;
    color:#176B97;
    transform:translateY(-50%) scale(1.08);
}

.prev{left:30px;}
.next{right:30px;}

.page-dots{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#cfd8dc;
    transition:.3s;
}

.dot.active{
    background:#2F8FC7;
    transform:scale(1.35);
}

@media (max-width:900px){
    header{height:auto;padding:20px;}
    nav ul{flex-wrap:wrap;justify-content:center;gap:18px;}
    .hero h1{font-size:42px;}
    .hero p{font-size:18px;}
    .hero-logo{width:140px;}
    .buttons{flex-direction:column;}
    .btn{width:220px;margin:auto;}
    section{padding:70px 25px;}
}

@media (max-width:768px){
    .nav-btn{width:45px;height:45px;font-size:18px;}
    .prev{left:10px;}
    .next{right:10px;}
}