/* ======================================
   FishArt - Premium Coming Soon
====================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    color:#fff;

    overflow-x:hidden;

    background:#021521;

}

/* Hero Background */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
        linear-gradient(rgba(2,20,35,.75),rgba(2,20,35,.85)),
        url("assets/hero.jpg") center center/cover no-repeat;

    z-index:-3;

}

/* Dark Overlay */

.overlay{

    position:fixed;

    inset:0;

    z-index:-2;

    background:

        radial-gradient(circle at top,
        rgba(0,180,255,.18),
        transparent 55%),

        radial-gradient(circle at bottom,
        rgba(0,255,180,.08),
        transparent 60%);

}

/* ---------------- Hero ---------------- */

header{

    width:100%;

    display:flex;

    justify-content:center;

    padding:40px 20px;

}

.logo{

    width:170px;

    filter:drop-shadow(0 10px 30px rgba(0,0,0,.4));

}

/* ---------------- */

.hero{

    min-height:70vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}

.glass{

    width:min(850px,92%);

    padding:60px;

    text-align:center;

    border-radius:30px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}

/* ---------------- */

.tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

    background:#12c2e920;

    border:1px solid rgba(255,255,255,.15);

    letter-spacing:2px;

    font-size:.8rem;

    margin-bottom:25px;

}

h1{

    font-family:'Playfair Display',serif;

    font-size:72px;

    line-height:1.1;

    margin-bottom:25px;

}

.hero p{

    color:#d8eef7;

    font-size:18px;

    line-height:1.8;

    max-width:700px;

    margin:auto;

}

/* ---------------- Buttons ---------------- */

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;

}

.buttons a{

    padding:16px 36px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.primary{

    background:#00bcd4;

    color:white;

}

.primary:hover{

    background:#17d7ef;

    transform:translateY(-5px);

}

.secondary{

    border:2px solid rgba(255,255,255,.3);

    color:white;

}

.secondary:hover{

    background:white;

    color:#003049;

}

/* ---------------- Services ---------------- */

.services{

    width:min(1200px,92%);

    margin:70px auto;

    display:grid;

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

    gap:30px;

}

.card{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    border-radius:25px;

    padding:40px;

    text-align:center;

    border:1px solid rgba(255,255,255,.1);

    transition:.35s;

}

.card:hover{

    transform:translateY(-12px);

}

.card i{

    font-size:55px;

    color:#6ee7ff;

    margin-bottom:25px;

}

.card h3{

    margin-bottom:15px;

    font-size:24px;

}

.card p{

    color:#dcecf5;

    line-height:1.8;

}

/* ======================================
   CONTACT SECTION
====================================== */

.contact{

    width:min(1200px,92%);

    margin:80px auto;

}

.contact-box{

    padding:50px;

}

.contact-box h2{

    font-size:40px;

    margin-bottom:40px;

    text-align:center;

}

.contact-grid{

    display:grid;

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

    gap:20px;

}

.contact-grid div{

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    padding:20px;

    border-radius:18px;

    transition:.3s;

}

.contact-grid div:hover{

    background:rgba(255,255,255,.12);

}

.contact-grid i{

    color:#59d8ff;

    margin-right:12px;

    font-size:20px;

}

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

footer{

    margin-top:80px;

    padding:35px;

    text-align:center;

    color:#c8dce6;

    border-top:1px solid rgba(255,255,255,.08);

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

    backdrop-filter:blur(10px);

}

/* ======================================
   FLOATING BUBBLES
====================================== */

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background-image:

    radial-gradient(circle,rgba(255,255,255,.20) 2px,transparent 2px),

    radial-gradient(circle,rgba(255,255,255,.12) 3px,transparent 3px),

    radial-gradient(circle,rgba(255,255,255,.15) 1.5px,transparent 1.5px);

    background-size:

    220px 220px,

    280px 280px,

    180px 180px;

    animation:bubblesMove 40s linear infinite;

    opacity:.35;

}

/* ======================================
   ANIMATIONS
====================================== */

@keyframes bubblesMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-250px);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.glass{

    animation:fadeUp 1s ease;

}

.card{

    animation:fadeUp .8s ease;

}

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

@media(max-width:992px){

    h1{

        font-size:54px;

    }

    .services{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .glass{

        padding:40px 25px;

    }

    h1{

        font-size:42px;

    }

    .hero p{

        font-size:16px;

    }

    .buttons{

        flex-direction:column;

        width:100%;

    }

    .buttons a{

        width:100%;

    }

    .logo{

        width:140px;

    }

    .contact-box{

        padding:35px 25px;

    }

    .contact-box h2{

        font-size:30px;

    }

}

@media(max-width:480px){

    h1{

        font-size:34px;

    }

    .tag{

        font-size:12px;

        letter-spacing:1px;

    }

    .card{

        padding:30px;

    }

    .card h3{

        font-size:22px;

    }

}