/* =========================================
   Seacom Fisheries - Under Construction
========================================= */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:linear-gradient(135deg,#021B2B,#063A5B,#0C6A8D);

    color:#fff;

    overflow-x:hidden;

    min-height:100vh;

}

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

.background{

    position:fixed;

    inset:0;

    z-index:-2;

    overflow:hidden;

}

.overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top,#0f7ea622 0%,transparent 60%),
    radial-gradient(circle at bottom,#00c2ff11 0%,transparent 60%);

}

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

.bubble{

    position:absolute;

    bottom:-120px;

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

    border-radius:50%;

    animation:float 18s linear infinite;

}

.b1{

    width:20px;
    height:20px;
    left:8%;
    animation-duration:16s;

}

.b2{

    width:30px;
    height:30px;
    left:22%;
    animation-duration:20s;

}

.b3{

    width:15px;
    height:15px;
    left:40%;
    animation-duration:14s;

}

.b4{

    width:40px;
    height:40px;
    left:60%;
    animation-duration:22s;

}

.b5{

    width:18px;
    height:18px;
    left:78%;
    animation-duration:18s;

}

.b6{

    width:26px;
    height:26px;
    left:92%;
    animation-duration:25s;

}

@keyframes float{

    from{

        transform:translateY(0);
        opacity:0;

    }

    20%{

        opacity:.5;

    }

    to{

        transform:translateY(-120vh);
        opacity:0;

    }

}

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

main{

    width:min(1150px,90%);

    margin:auto;

}

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

.hero{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.logo{

    width:170px;

    margin-bottom:25px;

}

.badge{

    padding:8px 18px;

    border-radius:50px;

    background:#ffffff18;

    backdrop-filter:blur(10px);

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

    letter-spacing:2px;

    font-size:.8rem;

    margin-bottom:25px;

}

.hero h1{

    font-size:4.5rem;

    line-height:1.1;

    margin-bottom:20px;

    font-weight:800;

}

.subtitle{

    max-width:720px;

    font-size:1.1rem;

    line-height:1.8;

    color:#dfeff7;

}

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

.buttons{

    margin-top:45px;

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.buttons a{

    text-decoration:none;

    padding:16px 34px;

    border-radius:50px;

    transition:.35s;

    font-weight:600;

}

.btn-primary{

    background:#00bcd4;

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-4px);

    background:#00d5f1;

}

.btn-secondary{

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

    color:#fff;

}

.btn-secondary:hover{

    background:white;

    color:#063A5B;

}

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

.features{

    display:grid;

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

    gap:30px;

    margin-bottom:100px;

}

.card{

    padding:40px;

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

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

    backdrop-filter:blur(15px);

    border-radius:25px;

    text-align:center;

    transition:.4s;

}

.card:hover{

    transform:translateY(-10px);

}

.icon{

    font-size:55px;

    margin-bottom:20px;

}

.card h3{

    margin-bottom:15px;

}

.card p{

    color:#d5e7f3;

    line-height:1.7;

}

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

.contact{

    margin-bottom:90px;

}

.contact-box{

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

    border-radius:30px;

    backdrop-filter:blur(15px);

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

    padding:55px;

}

.contact-box h2{

    text-align:center;

    margin-bottom:40px;

    font-size:2rem;

}

.info{

    display:grid;

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

    gap:20px;

}

.info div{

    padding:18px 24px;

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

    border-radius:15px;

}

.info span{

    margin-right:12px;

}

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

footer{

    padding:30px;

    text-align:center;

    color:#b6d4e4;

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

}

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

@media(max-width:900px){

.hero h1{

    font-size:3rem;

}

.features{

    grid-template-columns:1fr;

}

.info{

    grid-template-columns:1fr;

}

.contact-box{

    padding:35px;

}

}

@media(max-width:600px){

.logo{

    width:120px;

}

.hero h1{

    font-size:2.2rem;

}

.subtitle{

    font-size:1rem;

}

.buttons{

    flex-direction:column;

    width:100%;

}

.buttons a{

    width:100%;

}

}