*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:beige;
    overflow-x:hidden;
}

/* HEADER */

header{
    width:100%;
    background:#071739;
    color:white;
    padding:20px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:fixed;
    top:0;
    z-index:1000;
}
.logo{
    max-height: 50px;
}
.logo img{
border-radius: 50%;
max-height: 50px;
}

header h1{
    font-size:28px;
}

nav a{
    color:white;
    text-decoration:none;
    margin-left:20px;
    margin-top: 5px;
    transition:0.3s;
    background: #02c7f8;
    padding: 2px;
    border-radius: 5px;
}

nav a:hover{
    color:#fca311;
}
/*route-nav*/
.route-header{
    width:100%;
    background:#071739;
    color:white;
    padding:20px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:fixed;
    top:0;
    z-index:1000;
}
.route-nav a{
    color: white;
    text-decoration:none;
    margin-left:20px;
    transition:0.3s;
}

.route-nav a:hover{
    color:#fca311;
}
/*End of Route nav*/
/*Route story*/
.story{
    text-align: left;
}
/*Hero*/
.hero{
position:relative;
height:100vh;
overflow:hidden;
}
.hero{
    margin-top:80px;
    width:100%;
    height:100vh;
    overflow:hidden;
    position:relative;
}

.slider-track{
    margin-top: 40px;
    display:flex;
    width:600vw;
    height:90%; 
    animation:testimonyScroll 105s linear infinite; 
    background-image: url(images/1.webp);  
}
.slide{
    width:100vw;
    height:auto;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color: #ffffff;
    margin-top: 1.5%;
}

.overlay{
    position:absolute;
    inset: 0;
    background:#00000042;
}

.slide-content{
    position:relative;
    z-index:5;
    min-width:300px;
    padding:20px;
    background: #00081423;border-radius: 20px;
}

.slide-content h2{
    font-size:60px;
    margin-bottom:20px;
}

.slide-content p{
    font-size:22px;
    line-height:1.6;
}
.slide-content {
    font-size:22px;
    line-height:1.6;
}

.slide1{
     background:url(images/) center/contain;
    background-repeat: no-repeat;
     background-size: contain;
}

.slide2{
    background:url(images/02.png) center/cover;
     background-size: contain;
    background-repeat: no-repeat;

}

.slide3{
    background:url(images/5.png) center/cover;
    background-size: contain;
    background-repeat: no-repeat;
}

.slide4{
    background:url(images/6.webp) center/cover;
     background-size: contain;
    background-repeat: no-repeat;
}

.slide5{
    background:url(images/2.png) center/cover;
     background-size: contain;
    background-repeat: no-repeat;
}
.route-slider-track{
    background:url(images/dolphin-routes.png) center/contain;
     background-size: contain;
    background-repeat: repeat;
    
}

/*Route slide*/

.routes{
    
    width:100%;
    height:100vh;
    overflow:hidden;
    position:relative;
    margin-top: 162px;
}

.route-slider-track{
    display:flex;
    width:700vw;
    height:100%; 
    animation:testimonyScroll 500s linear infinite;
    background-image: url(images/dolphin-routes.png);
}

.route-slide{
    width:100vw;
    height:auto;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
    margin-top: 1.5%;

}
.route-overlay{
    position:absolute;
    inset: 0;
    background:#00000042;
}

table{
    padding: 10px;
    margin: 40px;
    
    th{
         /*box-shadow: -2px -2px 2px 2px #01f8991f;*/
         padding: 20px;
        margin: 40px;
        background: bisque;
        border-radius: 10px;
    }
    tr{
        /*box-shadow: -2px 2px 2px 2px#01f89921;*/
        padding: 20px;
        margin: 40px;width: 500px;
        background: #f8f1e9;
        border-radius: 10px;
    }
    td{
       /*box-shadow: -2px 2px 2px 2px 2px#01f89917;*/
        padding: 20px;
        margin: 10px; 
        border-radius: 10px;
    }
}

/*End of Route slide*/

/* ARROWS */

.arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,0.5);
    color:white;
    font-size:28px;
    cursor:pointer;
    z-index:100;
}

.left{
    left:20px;
}

.right{
    right:20px;
}

/* ABOUT */

.about{
   text-align:center;
    background:beige;
    color: black;
}
.about-us {
     text-align:center;
    background:white;
    color: black;
    width: 90%;
    margin: 0 auto;
    border-radius: 20px;
}

.about h2{
    font-size:42px;
    margin-bottom:20px;
    color:#071739;
}

.about p{
    max-width:900px;
    margin:auto;
    line-height:1.8;
    font-size:18px;
}
.about img{
    max-width:900px;
    height: auto;
    margin:0 auto;
    border-radius: 35px;
    border: solid gray 3px;
    box-shadow: 10px 10px 10ps#000814;
}
.story{
    padding: 30px;
    max-width: 800px;
    min-width: 250px;
    margin: 0 auto;
    text-align: none;
    margin-bottom: 5px;
    border: solid transparent 20px;
    background: #ffffff;
    border-radius: 5px;
}

@media(max-width:500px){
    .story{
        margin-top: 170px; 
    }
}
/*Jobs*/
.jobs{
    padding: 10px;
    text-align:center;
    background:beige;
    color: black;
    margin-top: 270px;
    font-family: Arial, sans-serif;
    display:grid;
    gap:20px;
    margin-top:40px;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    
}
.jobs-terms{
    padding: 10px;
    text-align:center;
    background:beige;
    color: black;
    margin-top: 270px;
    margin-top:40px;    
}

.jobs h2{
    font-size:42px;
    margin-bottom:20px;
    color:#071739;
   
}

.jobs p{
    max-width:900px;
    margin:auto;
    line-height:1.8;
    font-size:18px;
}
.job-type{
    min-width: 350px;
    text-align: left;
    border: transparent;
    border-radius: 10px;
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 25px;
    background: #ffffff;
    padding: 30px;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
/*End of job styles*/
.apply{
    border: solid #fca311 2px;
    border-radius: 13px;
    max-width: 120px;
    margin: 0 auto;
    
}
.apply a{
    color: #000d30;
    font-weight: bolder;
    text-decoration: none;

}

/* TESTIMONIES */

.testimony-section{
    padding:80px 0;
    background:#f1f1f1;
}

.testimony-section h2{
    text-align:center;
    margin-bottom:40px;
    color:#071739;
    font-size:40px;
}

.testimony-container{
    overflow:hidden;
}

.testimony-track{
    display:flex;
    gap:25px;
    width:max-content;
    animation:testimonyScroll 55s linear infinite;
    background-image: url(images/.png);
}
.testimony img{
    max-width: 100px auto;
    border-radius: 10px;
    

}

.testimony{
    width:320px;
    background:white;
    padding:40px;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.testimony h3{
    margin-bottom:15px;
    color:#fca311;
}
.testimony img{
    max-height: 200px;
    margin: 0 auto;
    
}
@keyframes slide-contentScroll{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

@keyframes testimonyScroll{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

/* SIGNUP */

.signup-section{
    background:beige;
    padding:90px 10%;
    margin-top: 25px;
}
.signup-section a{
    color: #fca311;
    text-decoration: none;
}
.signup-box{
    max-width:500px;
    margin:5px auto;
    background:white;
    padding:40px;
    border-radius:20px;
}
.signup-box a{
    text-decoration: none;
    color: #071739;
    border: solid #fca311 3px;
}
.signup-box p a{
    border: solid #fca311 3px;
}
.signup-box {
    text-decoration: none;
    color: #071739;;
}
.signup-box a:hover{
    text-decoration: none;
    color: #fca311;;
}
.signup-box h2{
    text-align:center;
    margin-bottom:25px;
    color:#071739;
}

.signup-box input{
    width:100%;
    padding:15px;
    margin-bottom:20px;
    border:1px solid #ccc;
    border-radius:10px;
    font-size:16px;
}

.signup-box button{
    width:100%;
    padding:15px;
    background:#fca311;
    color:white;
    border:none;
    border-radius:10px;
    font-size:18px;
    cursor:pointer;
}
.signup-box textarea{
    min-width: 300px;
    min-height: 100px;
    font-size: 15px;
}
/*Payment Box*/
.payment-box{
    margin-top: 20px;
    max-width:500px;
    margin:5px auto;
    background:white;
    padding:40px;
    border-radius:20px;
}
.payment-box a{
    text-decoration: none;
    color: #071739;
    
}
.payment-box a p{
    border: solid #fca311 3px;
    margin-bottom: 15px;
    border-radius: 10px;
    background: beige;
}
.payment-box {
    text-decoration: none;
    color: #071739;;
    max-width: 500px;
}
.m-pesa {
    color: #028a02;
}

/* SUPPORT */

/*Imported  paid form styles*/
.application{
padding:100px 40px;
}

.application form,
.contact form{
display:flex;
flex-direction:column;
gap:15px;
max-width:700px;
margin:auto;
}

.application input,
.application textarea,
.contact input,
.contact textarea,
.pay-card input{
width:100%;
padding:14px;
border-radius:8px;
border:1px solid #ccc;
}

.locked{
display:none;
}

.payment-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0.8);
display:none;
justify-content:center;
align-items:center;
z-index:5000;
padding:20px;
}

.payment-modal.active{
display:flex;
}

.payment-box{
background:white;
max-width:500px;
border-radius:20px;
padding:40px;
position:relative;
}

.close-btn{
position:absolute;
top:15px;
right:20px;
font-size:2rem;
cursor:pointer;
}


.hero-buttons{
display:flex;
justify-content:center;
gap:15px;
margin-top:30px;
}

button{
padding:12px 24px;
border:none;
border-radius:8px;
background:#ff9800;
color:white;
cursor:pointer;
transition:0.3s;
}

button:hover{
transform:scale(1.05);
}

.secondary{
background:transparent;
border:2px solid white;
}

/*End of Imported paid form styles*/

.support{
    padding:90px 10%;
    text-align:center;
    background:white;
}

.support h2{
    font-size:40px;
    color:#071739;
    margin-bottom:20px;
}

/* FOOTER */

footer{
    background:#000814;
    color:white;
    text-align:center;
    padding:25px;
    p a{
        color: #fcce02;
        text-decoration: none;
        font-size: 0.7em;
    }
}

/* MOBILE */

@media(max-width:768px){

    header{
        flex-direction:column;
        gap:15px;
    }

    nav{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }

    .slide-content h2{
        font-size:20px;
    }

    .slide-content p{
        font-size:15px;
    }

    .testimony{
        width:260px;
    }
    .about img{
        max-width: 80vw;
    }
}
@media(min-width:500px){
    .slide img{
    height: 100%;
}
.route-slider-track{
    display:flex;
    width:700vw;
    height:100%;
    margin-top: 100px; 
 
}
.route-nav{
    margin-bottom: 1px;
}
}


#popup {
        display: none;
        position: fixed;
        text-align: center;
        margin: 0 auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #03f8cf41;
        padding: 20px;
        border: 1px solid #ccc;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        height: 30%;
        width: 60%;
        border-radius: 15%;
        
        h2{
            font-size: 2.5em;
            color: #fd9d02;
        }
        img{
            max-width: 300px;
            max-height: 300px;
            border-radius: 15px;
        }
        p{
            background: #fd9d02;
            padding: 10px;
            color: #f1f1f1;
            border-radius: 10px;
        }
        z-index: 9999;
    }
    .fac section {

    }
.faq-item{
background:white;
padding:30px;
border-radius:14px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.terms{
    font-size: 0.8em;
    min-width: 350px;
    text-align: left;
    border: transparent;
    border-radius: 10px;
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 25px;
    background: #ffffff;
    padding: 30px;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    button{
        width: 150px;
        color: white;
    }
}
.terms-cont{
     padding: 10px;
    text-align:center;
    background:beige;
    color: black;
    margin-top: 270px;
    font-family: Arial, sans-serif;
    display:grid;
    gap:20px;
    margin-top:40px;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    a{
        text-decoration: none;
        border: solid #ffee00 2px;
        padding: 3px;
        border-radius: 10px;
        font-size: 1.3em;
    }
}
.gap{
    height: 80px;
}
.terms details{
    color: #014ff7;
    font-size: 7px;
    
}



/* ==============================
   DOLPHIN CREW APPLICATION FORM
   Conflict-Free Scoped Styling
   ============================== */

.crew-app{
    --primary:#0a84ff;
    --secondary:#00c2ff;
    --success:#10b981;
    --text:#1f2937;
    --muted:#6b7280;
    --border:#e5e7eb;
    --bg:#f5f7fb;
    --white:#ffffff;

    max-width:900px;
    margin:40px auto;
    padding:30px;
    background:var(--white);
    border-radius:24px;
    box-shadow:
        0 20px 40px rgba(0,0,0,.08),
        0 8px 16px rgba(0,0,0,.04);

    font-family:
        Inter,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
}

.crew-app h1{
    text-align:center;
    color:var(--text);
    font-size:2rem;
    margin-bottom:10px;
}

.crew-app h3{
    margin-top:35px;
    margin-bottom:15px;
    color:var(--primary);
    font-size:1.1rem;
    border-left:4px solid var(--primary);
    padding-left:12px;
}

.crew-app form{
    display:grid;
    gap:16px;
}

.crew-app input,
.crew-app select,
.crew-app textarea{
    width:98%;
    box-sizing:border-box;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    font-size:15px;
    background:#fff;
    transition:.3s ease;
    outline:none;
}

.crew-app textarea{
    min-height:140px;
    resize:vertical;
}

.crew-app input:focus,
.crew-app select:focus,
.crew-app textarea:focus{
    border-color:var(--primary);
    box-shadow:
        0 0 0 4px rgba(10,132,255,.15);
}

.crew-app input[type="file"]{
    padding:12px;
    background:var(--bg);
    cursor:pointer;
}

.crew-app label{
    display:block;
    margin-bottom:6px;
    color:var(--text);
    font-weight:600;
}

.crew-app .row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.crew-app .row-3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:16px;
}

.crew-app button{
    border:none;
    cursor:pointer;
    padding:16px 22px;
    border-radius:14px;
    font-size:16px;
    font-weight:700;
    transition:.3s ease;
}

.crew-app button[type="submit"]{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:white;
}

.crew-app button[type="submit"]:hover{
    transform:translateY(-2px);
    box-shadow:
        0 12px 24px rgba(10,132,255,.25);
}

.crew-app button[type="submit"]:active{
    transform:translateY(0);
}

.crew-app .section-card{
    padding:20px;
    border:1px solid var(--border);
    border-radius:18px;
    background:#fafcff;
}

.crew-app .upload-box{
    padding:20px;
    border:2px dashed #cbd5e1;
    border-radius:16px;
    background:#f8fafc;
}

.crew-app .payment-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:999px;
    background:#ecfdf5;
    color:#065f46;
    font-weight:600;
    margin-bottom:20px;
}

.crew-app .form-note{
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

.crew-app .success-message{
    background:#ecfdf5;
    color:#065f46;
    padding:16px;
    border-radius:12px;
    border:1px solid #a7f3d0;
}

.crew-app .error-message{
    background:#fef2f2;
    color:#991b1b;
    padding:16px;
    border-radius:12px;
    border:1px solid #fecaca;
}
.form-actions{
    a{
        text-decoration: none;
        color: #0602fc;
        font-size: 1.2em;
        border-radius:12px;
        border:3px solid #fecaca;
        padding: 6px;
    }
}

/* Mobile */

@media(max-width:768px){

    .crew-app{
        margin:15px;
        padding:20px;
        border-radius:18px;
    }

    .crew-app .row,
    .crew-app .row-3{
        grid-template-columns:1fr;
    }

    .crew-app h1{
        font-size:1.7rem;
    }
}

.payment-warning{
    padding:15px;
    border-radius:12px;
    background:#fff7ed;
    border:1px solid #fdba74;
    color:#9a3412;
    font-weight:600;
    margin-bottom:20px;
}

.payment-warning.paid{
    background:#ecfdf5;
    border:1px solid #6ee7b7;
    color:#065f46;
}