/*=========================================================
        GOOGLE FONT
=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/*=========================================================
        RESET
=========================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#f4f6fa;

    color:#1d2939;

    font-size:15px;

    line-height:1.6;

    overflow-x:hidden;
}

img{

    max-width:100%;

    display:block;
}

a{

    text-decoration:none;
}

button,
input,
select,
textarea{

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

    outline:none;
}

button{

    cursor:pointer;

    border:none;

    background:none;
}

ul{

    list-style:none;
}


/*=========================================================
            COLORS
=========================================================*/

:root{

    --primary:#0b2149;

    --primary-dark:#06152f;

    /* --gold:#c79a3b; */
    --gold:#6b7280;

    --gold-light:#e5c16d;

    --border:#d8dee9;

    --text:#2d3748;

    --muted:#6b7280;

    --white:#ffffff;

    --bg:#f5f7fb;

    --shadow:
        0 18px 40px rgba(0,0,0,.08);

    --radius:18px;

}


/*=========================================================
            PAGE
=========================================================*/

.page-wrapper{

    width:100%;

    min-height:100vh;

    background:var(--bg);

    padding-bottom:80px;
}


/*=========================================================
            HERO
=========================================================*/

.hero{

    position:relative;

    background:linear-gradient(135deg,
    #06152f 0%,
    #06152f 100%);

    overflow:hidden;

    padding:45px 0 95px;
}


/* top pattern */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(255,255,255,.05) 1px,
    transparent 1px);

    background-size:26px 26px;

    opacity:.35;
}

.Inquiry {
    background: linear-gradient(
        135deg,
        #c79a3b 0%,
        #ddb761 50%,
        #b8862d 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Optional */
    display: inline-block;
}

/*=========================================================
        HERO CONTENT
=========================================================*/

.hero-top{

    position:relative;

    z-index:2;

    width:min(1280px,92%);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;
}


/*=========================================================
        LOGOS
=========================================================*/

.logo-left,
.logo-right{

    width:115px;

    flex-shrink:0;
}

.logo-left img,
.logo-right img{

    width:100%;

    object-fit:contain;
}


/*=========================================================
        CENTER
=========================================================*/

.hero-center{

    flex:1;

    text-align:center;
}


.hero-center h1{

    color:#fff;

    font-size:48px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;
}


.hero-center p{

    color:rgba(255,255,255,.88);

    font-size:18px;

    font-weight:400;
}


/*=========================================================
        GOLD DIVIDER
=========================================================*/

.gold-divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-bottom:18px;
}

.gold-divider span{

    width:110px;

    height:2px;

    background:linear-gradient(to right,
transparent,var(--gold-light),transparent);
}

.gold-divider i{

    width:12px;

    height:12px;

    background:var(--gold-light);

    transform:rotate(45deg);

    border-radius:2px;

    display:block;

    box-shadow:
    0 0 12px var(--gold-light);
}


/*=========================================================
            CURVED BOTTOM
=========================================================*/

.hero-wave{

    position:absolute;

    left:0;

    bottom:-1px;

    width:100%;

    height:85px;

    background:var(--bg);

    border-top-left-radius:100% 100%;

    border-top-right-radius:100% 100%;
}


/*=========================================================
        FORM CONTAINER
=========================================================*/

.form-container{

    position:relative;

    width:min(1180px,92%);

    margin:-55px auto 0;

    z-index:5;
}

/*=========================================================
        CARD SECTION
=========================================================*/

.card-section{

    background:var(--white);

    border-radius:22px;

    padding:35px;

    margin-bottom:30px;

    border:1px solid rgba(11,33,73,.06);

    box-shadow:
        0 10px 30px rgba(15,23,42,.05),
        0 2px 8px rgba(15,23,42,.03);

    transition:.35s ease;
}

.card-section:hover{

    box-shadow:
        0 18px 40px rgba(15,23,42,.08),
        0 5px 15px rgba(15,23,42,.05);
}


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

.section-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:32px;

    padding-bottom:22px;

    border-bottom:1px solid #edf2f7;
}


/*=========================================================
        ICON
=========================================================*/

.section-icon{

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(135deg,
        var(--primary),
        #12366d);

    box-shadow:
        0 10px 20px rgba(11,33,73,.18);
}

.section-icon svg{

    width:26px;

    height:26px;

    fill:#fff;
}


/*=========================================================
        HEADING
=========================================================*/

.section-header h2{

    font-size:23px;

    color:var(--primary);

    font-weight:700;

    letter-spacing:.4px;

    margin-bottom:4px;
}

.section-header p{

    color:#7a8599;

    font-size:14px;
}


/*=========================================================
        FORM GROUP
=========================================================*/

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:24px;
}


/*=========================================================
        LABEL
=========================================================*/

.form-group label{

    font-size:14px;

    color:var(--text);

    font-weight:600;

    margin-bottom:9px;
}

.form-group label span{

    color:var(--primary);

    margin-left:3px;
}


/*=========================================================
        GRID SYSTEM
=========================================================*/

.grid-1{

    display:grid;

    grid-template-columns:1fr;

    gap:22px;
}

.grid-2{

    display:grid;

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

    gap:24px;
}
.upload-document-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* 2. Tablet breakpoint: 2 columns */
@media (min-width: 768px) {
    .upload-document-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3. Desktop breakpoint: 3 columns */
@media (min-width: 1024px) {
    .upload-document-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.grid-3{

    display:grid;

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

    gap:24px;
}

.grid-4{

    display:grid;

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

    gap:24px;
}


/*=========================================================
        CARD TITLE SPACING
=========================================================*/

.card-section:last-child{

    margin-bottom:0;
}


/*=========================================================
        HORIZONTAL DIVIDER
=========================================================*/

.divider{

    width:100%;

    height:1px;

    background:#edf2f7;

    margin:30px 0;
}


/*=========================================================
        SMALL HELP TEXT
=========================================================*/

.small-text{

    font-size:13px;

    color:#8a94a6;

    margin-top:6px;
}


/*=========================================================
        BADGE
=========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:4px 10px;

    border-radius:30px;

    background:#f5ead0;

    color:#8a6423;

    font-size:12px;

    font-weight:600;
}


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

@media (max-width:992px){

    .grid-3{

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

    .grid-4{

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

}

@media (max-width:768px){

    .card-section{

        padding:25px;
    }

    .section-header{

        align-items:flex-start;
    }

    .section-header h2{

        font-size:20px;
    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;
        gap:0px !important;
    }

}

@media (max-width:480px){

    .card-section{

        padding:18px;
    }

    .section-header{

        gap:14px;

        margin-bottom:24px;
    }

    .section-icon{

        width:48px;

        height:48px;
    }

    .section-icon svg{

        width:22px;

        height:22px;
    }

    .section-header h2{

        font-size:18px;
    }

    .section-header p{

        font-size:13px;
    }

}

/*=========================================================
                INPUT CONTROLS
=========================================================*/

.input-box{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    height:58px;

    background:#fff;

    border:1px solid #d9e2ec;

    border-radius:14px;

    transition:all .30s ease;

    overflow:hidden;
}

.input-box:hover{

    border-color:var(--gold);

    box-shadow:0 5px 15px rgba(199,154,59,.08);
}

.input-box:focus-within{

    border-color:var(--gold-light);

    box-shadow:
        0 0 0 4px rgba(199,154,59,.15),
        0 8px 20px rgba(199,154,59,.12);
}


/*=========================================================
                INPUT ICON
=========================================================*/

.input-box i{

    width:56px;

    min-width:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    color:var(--gold);

    border-right:1px solid #edf2f7;

    height:100%;
}


/*=========================================================
                INPUT
=========================================================*/

.input-box input{

    width:100%;

    height:100%;

    border:none;

    outline:none;

    padding:0 18px;

    font-size:15px;

    color:var(--text);

    background:transparent;
}

.input-box input::placeholder{

    color:#98a2b3;
}


/*=========================================================
                SELECT
=========================================================*/

.input-box select{

    width:100%;

    height:100%;

    border:none;

    outline:none;

    padding:0 18px;

    background:transparent;

    font-size:15px;

    color:var(--text);

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;


    background-repeat:no-repeat;

    background-position:right 18px center;

    padding-right:48px;
}


/*=========================================================
                DATE INPUT
=========================================================*/

input[type=date]{

    cursor:pointer;
}

input[type=date]::-webkit-calendar-picker-indicator{

    opacity:.8;

    cursor:pointer;
}


/*=========================================================
                TEXTAREA
=========================================================*/

.textarea-box{

    height:auto;

    align-items:flex-start;
}

.textarea-box i{

    padding-top:18px;

    height:auto;

    min-height:120px;
}

.textarea-box textarea{

    width:100%;

    min-height:120px;

    border:none;

    outline:none;

    resize:vertical;

    padding:16px 18px;

    font-size:15px;

    color:var(--text);

    background:transparent;

    line-height:1.7;
}

.textarea-box textarea::placeholder{

    color:#98a2b3;
}


/*=========================================================
                DISABLED
=========================================================*/

.input-box input:disabled,
.input-box textarea:disabled,
.input-box select:disabled{

    background:#f8fafc;

    color:#94a3b8;

    cursor:not-allowed;
}


/*=========================================================
                AUTOFILL
=========================================================*/

input:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #fff inset;

    -webkit-text-fill-color:#1d2939;
}


/*=========================================================
                PLACEHOLDER
=========================================================*/

::-webkit-input-placeholder{

    color:#98a2b3;
}

::-moz-placeholder{

    color:#98a2b3;
}

:-ms-input-placeholder{

    color:#98a2b3;
}


/*=========================================================
                VALIDATION
=========================================================*/

.input-validation-error{

    border-color:#dc2626 !important;
}

.field-validation-error{

    display:block;

    margin-top:6px;

    color:#dc2626;

    font-size:13px;

    font-weight:500;
}


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

@media(max-width:768px){

    .input-box{

        height:54px;
    }

    .input-box i{

        width:50px;

        min-width:50px;

        font-size:18px;
    }

    .input-box input,
    .input-box select{

        font-size:14px;
    }

    .textarea-box textarea{

        min-height:100px;

        font-size:14px;
    }

}

@media(max-width:480px){

    .input-box{

        border-radius:12px;
    }

    .input-box input,
    .input-box select{

        padding:0 14px;
    }

    .textarea-box textarea{

        padding:14px;
    }

}

/*=========================================================
                GENDER
=========================================================*/

.gender-wrapper{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:8px;
}

.gender-card{

    flex:1;

    min-width:180px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    background:#fff;

    border:2px solid #d9e2ec;

    border-radius:14px;

    cursor:pointer;

    transition:.30s ease;

    user-select:none;
}

.gender-card:hover{

    border-color:var(--gold);

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(199,154,59,.15);
}

.gender-card input{

    display:none;
}

.custom-radio{

    width:22px;

    height:22px;

    border:2px solid var(--gold);

    border-radius:50%;

    position:relative;

    transition:.3s;
}

.custom-radio::after{

    content:"";

    position:absolute;

    width:10px;

    height:10px;

    background:var(--gold);

    border-radius:50%;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) scale(0);

    transition:.25s;
}

.gender-card input:checked + .custom-radio::after{

    transform:translate(-50%,-50%) scale(1);
}

.gender-card input:checked ~ .gender-text{

    color:var(--primary);

    font-weight:700;
}

.gender-card:has(input:checked){

    border-color:var(--gold-light);

    background:#fffaf1;
}

.gender-text{

    font-size:15px;

    font-weight:600;

    color:#344054;
}



/*=========================================================
                COUNTER
=========================================================*/

.counter-box{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:58px;

    border:1px solid #d9e2ec;

    border-radius:14px;

    overflow:hidden;

    background:#fff;
}

.counter-box button{

    width:58px;

    height:58px;

    font-size:26px;

    font-weight:600;

    color:var(--primary);

    background:#f8fafc;

    transition:.25s;
}

.counter-box button:hover{

    background:var(--gold);

    color:#fff;
}

.counter-box input{

    flex:1;

    border:none;

    text-align:center;

    font-size:18px;

    font-weight:600;

    background:#fff;
}



/*=========================================================
                UPLOAD BOX
=========================================================*/

.upload-box{

    display:block;

    width:100%;

    cursor:pointer;
}

.upload-content{

    height:210px;

    border:2px dashed #d4dbe5;

    border-radius:18px;

    background:#fbfcfe;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.35s ease;

    padding:25px;
}

.upload-content:hover{

    border-color:var(--gold);

    background:#fffdf7;

    transform:translateY(-3px);
}

.upload-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,var(--primary),#12366d);

    color:#fff;

    font-size:32px;

    margin-bottom:18px;
}

.upload-content h4{

    font-size:18px;

    color:var(--primary);

    margin-bottom:8px;
}

.upload-content p{

    color:#667085;

    margin-bottom:8px;
}

.upload-content small{

    color:#98a2b3;

    font-size:12px;
}



/*=========================================================
                TERMS and Conditon 
=========================================================*/





/*=========================================================
                MOBILE
=========================================================*/

@media(max-width:768px){

    .gender-wrapper{

        flex-direction:column;
    }

    .gender-card{

        width:100%;
    }

    .upload-content{

        height:180px;
    }

    .counter-box{

        height:54px;
    }

    .counter-box button{

        width:40px;

        height:54px;
    }

}

@media(max-width:480px){

    .upload-content{

        height:160px;

        padding:18px;
    }

    .upload-icon{

        width:58px;

        height:58px;

        font-size:26px;
    }

    .upload-content h4{

        font-size:16px;
    }

    .checkbox{

        font-size:14px;

        align-items:flex-start;
    }

}

/*=========================================================
                SUBMIT SECTION
=========================================================*/

.submit-wrapper{

    display:flex;

    justify-content:center;

    margin-top:40px;
}

.submit-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:280px;

    height:62px;

    padding:0 38px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    overflow:hidden;

    font-size:16px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    color:#fff;

    background:linear-gradient(135deg,
        #c79a3b 0%,
        #ddb761 50%,
        #b8862d 100%);

    box-shadow:
        0 15px 35px rgba(199,154,59,.35);

    transition:all .35s ease;
}

.submit-btn svg{

    width:18px;

    height:18px;

    fill:currentColor;

    transition:.35s ease;
}

.submit-btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 22px 45px rgba(199,154,59,.45);
}

.submit-btn:hover svg{

    transform:translateX(4px);
}

.submit-btn:active{

    transform:scale(.98);
}


/* Shine Effect */

.submit-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent);

    transform:skewX(-25deg);

    transition:.8s;
}

.submit-btn:hover::before{

    left:150%;
}


/*=========================================================
                SECURITY NOTE
=========================================================*/

.security-note{

    margin-top:35px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:#667085;

    font-size:14px;

    text-align:center;
}

.security-note svg{

    width:20px;

    height:20px;

    fill:var(--gold);

    flex-shrink:0;
}


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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.card-section{

    animation:fadeUp .6s ease both;
}


/*=========================================================
                INPUT TRANSITIONS
=========================================================*/

input,
textarea,
select,
button{

    transition:.30s ease;
}




/*=========================================================
                SELECTION COLOR
=========================================================*/

::selection{

    background:rgba(199,154,59,.30);

    color:#0b2149;
}


/*=========================================================
                MOBILE
=========================================================*/

@media(max-width:768px){

    .submit-btn{

        width:100%;

        min-width:unset;

        height:58px;

        font-size:15px;
    }

    .security-note{

        flex-direction:column;

        gap:8px;

        font-size:13px;
    }

}

@media(max-width:480px){

    .submit-wrapper{

        margin-top:30px;
    }

    .submit-btn{

        border-radius:14px;

        height:55px;

        font-size:14px;

        letter-spacing:.5px;
    }

}
/*=========================================================
                RESPONSIVE BREAKPOINTS
=========================================================*/

/*==========================
    1600px
==========================*/

@media (max-width:1600px){

    .hero-top,
    .form-container{

        width:min(1400px,92%);
    }

}

/*==========================
    1400px
==========================*/

@media (max-width:1400px){

    .hero-center h1{

        font-size:42px;
    }

    .form-container{

        width:min(1100px,94%);
    }

}

/*==========================
    1200px
==========================*/

@media (max-width:1200px){

    .hero{

        padding:40px 0 90px;
    }

    .hero-center h1{

        font-size:36px;
    }

    .hero-center p{

        font-size:16px;
    }

    .logo-left,
    .logo-right{

        width:90px;
    }

}

/*==========================
    992px
==========================*/

@media (max-width:992px){

    .hero-top{

        flex-direction:column;

        text-align:center;

        gap:25px;
    }

    .logo-left,
    .logo-right{

        width:80px;
    }

    .hero-center{

        order:2;
    }

    .hero-center h1{

        font-size:32px;
    }

    .gold-divider span{

        width:70px;
    }

}

/*==========================
    768px
==========================*/

@media (max-width:768px){

    .page-wrapper{

        padding-bottom:50px;
    }

    .hero{

        padding:35px 0 75px;
    }

    .hero-wave{

        height:55px;
    }

    .hero-center h1{

        font-size:28px;

        letter-spacing:1px;
    }

    .hero-center p{

        font-size:15px;
    }

    .form-container{

        margin-top:-35px;
    }

}

/*==========================
    576px
==========================*/

@media (max-width:576px){

    .hero{

        padding:30px 0 65px;
    }

    .hero-center h1{

        font-size:24px;
    }

    .hero-center p{

        font-size:14px;
    }

    .logo-left,
    .logo-right{

        width:65px;
    }

    .gold-divider span{

        width:45px;
    }

    .gold-divider i{

        width:10px;
        height:10px;
    }

}

/*==========================
    430px
==========================*/

@media (max-width:430px){

    body{

        font-size:14px;
    }

    .hero-center h1{

        font-size:22px;
    }

    .hero-center p{

        font-size:13px;
    }

}

/*==========================
    390px
==========================*/

@media (max-width:390px){

    .hero-center h1{

        font-size:20px;
    }

    .card-section{

        border-radius:18px;
    }

}

/*==========================
    360px
==========================*/

@media (max-width:360px){

    .hero-center h1{

        font-size:18px;
    }

    .hero-center p{

        font-size:12px;
    }

    .submit-btn{

        font-size:13px;
    }

}

/*==========================
    320px
==========================*/

@media (max-width:320px){

    .hero{

        padding:25px 0 55px;
    }

    .hero-center h1{

        font-size:16px;
    }

    .hero-center p{

        font-size:11px;
    }

    .logo-left,
    .logo-right{

        width:55px;
    }

    .card-section{

        padding:15px;
    }

    .submit-btn{

        height:50px;

        font-size:12px;
    }
    .counter-box button {
        font-size: 22px;
        width: 15px !important;
        height: 32px !important;
    }

}

/*=========================================================
                PRINT
=========================================================*/

@media print{

    body{

        background:#fff;
    }

    .hero{

        background:#0b2149 !important;

        -webkit-print-color-adjust:exact;

        print-color-adjust:exact;
    }

    .submit-wrapper{

        display:none;
    }

}

/*=========================================================
                REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }

}

/*=========================================================
                Toaster Styling 
=========================================================*/

.toast-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
}

.toast {
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: #4caf50; /* Green for success */
    color: white;
    opacity: 0.9;
    transition: opacity 0.5s ease-in-out;
}

    .toast.error {
        background-color: #f44336; /* Red for error */
    }

    .toast.hide {
        opacity: 0;
    }