/* =====================================================
   IMMAR TRADING - CONTACT PAGE
===================================================== */

:root{
    --blue1:#0b3c8a;
    --blue2:#1e73d8;
    --blue3:#4fa3ff;

    --white:#ffffff;
    --light:#f5f7fb;
    --lightblue:#edf4ff;

    --dark:#172033;
    --grey:#667085;

    --green:#25d366;

    --border:#e4eaf2;

    --shadow:
        0 12px 35px rgba(0,0,0,.08);
}


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

.contact-header{

    background:
        linear-gradient(
            135deg,
            var(--blue1),
            var(--blue2) 60%,
            var(--blue3)
        );

    color:#fff;

    padding:
        18px
        22px
        75px;
}


.contact-navbar{

    max-width:1250px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:relative;
}


/* BRAND */

.contact-brand a{

    display:flex;

    align-items:center;

    gap:14px;

    color:#fff;

    text-decoration:none;
}


.contact-brand img{

    height:75px;

    width:auto;
}


.contact-brand-text{

    display:flex;

    flex-direction:column;
}


.contact-brand-text strong{

    font-size:18px;

    line-height:1.2;
}


.contact-brand-text span{

    margin-top:3px;

    color:#e5efff;

    font-size:11px;
}


/* NAVIGATION */

.contact-navbar .nav-links{

    display:flex;

    align-items:center;

    gap:25px;

    list-style:none;

    margin:0;

    padding:0;
}


.contact-navbar .nav-links li{

    list-style:none;
}


.contact-navbar .nav-links a{

    color:#fff;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.25s ease;
}


.contact-navbar .nav-links a:hover{

    opacity:.85;
}


.contact-navbar .nav-links a.active{

    border-bottom:
        2px solid #fff;

    padding-bottom:5px;
}


.contact-navbar .nav-book{

    padding:
        11px
        22px;

    border-radius:30px;

    background:#fff;

    color:
        var(--blue1) !important;

    font-weight:700;

    box-shadow:
        0 6px 18px
        rgba(0,0,0,.12);
}


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

.contact-hero{

    max-width:850px;

    margin:
        70px
        auto
        0;

    padding:
        0
        20px;

    text-align:center;
}


.contact-hero-label{

    display:inline-block;

    padding:
        8px
        17px;

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

    border-radius:30px;

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

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;
}


.contact-hero h1{

    margin:
        18px
        0
        16px;

    font-size:48px;

    line-height:1.18;
}


.contact-hero p{

    max-width:720px;

    margin:auto;

    color:#e8f2ff;

    font-size:15px;

    line-height:1.8;
}


.contact-hero-buttons{

    display:flex;

    justify-content:center;

    gap:14px;

    margin-top:30px;
}


.contact-primary-btn,
.contact-secondary-btn{

    display:inline-block;

    padding:
        14px
        28px;

    border-radius:30px;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:.25s ease;
}


.contact-primary-btn{

    background:#fff;

    color:var(--blue1);
}


.contact-secondary-btn{

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

    color:#fff;
}


.contact-primary-btn:hover,
.contact-secondary-btn:hover{

    transform:
        translateY(-2px);
}


.contact-secondary-btn:hover{

    background:#fff;

    color:var(--blue1);
}


/* =====================================================
   SHARED SECTION HEADING
===================================================== */

.section-heading{

    max-width:760px;

    margin:
        0
        auto
        50px;

    text-align:center;
}


.section-label{

    display:inline-block;

    color:var(--blue2);

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;
}


.section-heading h2{

    margin:
        7px
        0
        12px;

    color:var(--blue1);

    font-size:36px;

    line-height:1.25;
}


.section-heading p{

    margin:0;

    color:var(--grey);

    font-size:14px;

    line-height:1.8;
}


/* =====================================================
   QUICK CONTACT
===================================================== */

.contact-quick{

    padding:
        90px
        22px;

    background:#fff;

    scroll-margin-top:25px;
}


.quick-contact-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:20px;
}


.quick-contact-card{

    min-width:0;

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:
        25px
        22px;

    border:
        1px solid
        var(--border);

    border-radius:17px;

    background:#f8faff;

    color:var(--dark);

    text-decoration:none;

    transition:.3s ease;
}


a.quick-contact-card:hover{

    transform:
        translateY(-5px);

    background:#fff;

    border-color:#c9d9ee;

    box-shadow:var(--shadow);
}


.quick-contact-icon{

    width:52px;

    height:52px;

    min-width:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:
        var(--lightblue);

    font-size:23px;
}


.quick-contact-card > div:last-child{

    min-width:0;
}


.quick-contact-card span{

    color:var(--blue2);

    font-size:10px;

    font-weight:700;

    letter-spacing:1.2px;
}


.quick-contact-card h3{

    margin:
        6px
        0
        5px;

    color:var(--blue1);

    font-size:15px;

    overflow-wrap:anywhere;
}


.quick-contact-card p{

    margin:0;

    color:var(--grey);

    font-size:11px;

    line-height:1.6;
}


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

.contact-main{

    padding:
        95px
        22px;

    background:
        var(--light);
}


.contact-main-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
        .85fr
        1.15fr;

    gap:60px;

    align-items:start;
}


/* =====================================================
   LEFT CONTACT INFORMATION
===================================================== */

.contact-information{

    padding-top:15px;
}


.contact-information > h2{

    margin:
        8px
        0
        15px;

    color:var(--blue1);

    font-size:37px;

    line-height:1.25;
}


.contact-information > p{

    margin:
        0
        0
        30px;

    color:var(--grey);

    font-size:14px;

    line-height:1.8;
}


.contact-info-list{

    display:flex;

    flex-direction:column;

    gap:16px;
}


.contact-info-item{

    display:flex;

    align-items:flex-start;

    gap:17px;

    padding:
        20px
        0;

    border-bottom:
        1px solid
        #dde4ee;
}


.contact-info-number{

    width:42px;

    height:42px;

    min-width:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--blue1),
            var(--blue2)
        );

    color:#fff;

    font-size:11px;

    font-weight:700;
}


.contact-info-item h3{

    margin:
        1px
        0
        6px;

    color:var(--blue1);

    font-size:16px;
}


.contact-info-item p{

    margin:0;

    color:var(--grey);

    font-size:12px;

    line-height:1.7;
}


.contact-direct-buttons{

    display:flex;

    gap:12px;

    margin-top:30px;
}


.contact-call-btn,
.contact-whatsapp-btn{

    display:inline-block;

    padding:
        13px
        24px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

    transition:.25s;
}


.contact-call-btn{

    background:
        var(--blue1);

    color:#fff;
}


.contact-whatsapp-btn{

    background:
        var(--green);

    color:#fff;
}


.contact-call-btn:hover,
.contact-whatsapp-btn:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.12);
}


/* =====================================================
   CONTACT FORM CARD
===================================================== */

.contact-form-card{

    padding:
        38px
        35px;

    border:
        1px solid
        #e4eaf2;

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 14px 40px
        rgba(0,0,0,.07);
}


.contact-form-heading{

    margin-bottom:28px;
}


.contact-form-heading > span{

    color:var(--blue2);

    font-size:10px;

    font-weight:700;

    letter-spacing:1.4px;
}


.contact-form-heading h2{

    margin:
        7px
        0
        9px;

    color:var(--blue1);

    font-size:28px;
}


.contact-form-heading p{

    margin:0;

    color:var(--grey);

    font-size:12px;

    line-height:1.7;
}


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

.contact-form{

    width:100%;
}


.form-row{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:16px;
}


.form-group{

    display:flex;

    flex-direction:column;

    gap:7px;

    margin-bottom:17px;
}


.form-group label{

    color:#344054;

    font-size:12px;

    font-weight:600;
}


.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:
        13px
        14px;

    border:
        1px solid
        #d8e0ea;

    border-radius:10px;

    outline:none;

    background:#fff;

    color:var(--dark);

    font-family:inherit;

    font-size:13px;

    transition:
        border-color .2s,
        box-shadow .2s;
}


.form-group input,
.form-group select{

    min-height:48px;
}


.form-group textarea{

    min-height:125px;

    resize:vertical;
}


.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#98a2b3;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:
        var(--blue2);

    box-shadow:
        0 0 0 3px
        rgba(30,115,216,.10);
}


.contact-submit-btn{

    width:100%;

    min-height:52px;

    margin-top:4px;

    border:0;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            var(--blue1),
            var(--blue2)
        );

    color:#fff;

    font-family:inherit;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
}


.contact-submit-btn:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(30,115,216,.25);
}


.contact-form-note{

    max-width:500px;

    margin:
        13px
        auto
        0;

    color:#98a2b3;

    text-align:center;

    font-size:10px;

    line-height:1.6;
}


/* Remove awkward number arrows on some browsers */

#contactDays{

    appearance:textfield;

    -moz-appearance:textfield;
}


#contactDays::-webkit-outer-spin-button,
#contactDays::-webkit-inner-spin-button{

    margin:0;

    -webkit-appearance:none;
}


/* =====================================================
   BUSINESS INFORMATION
===================================================== */

.contact-business{

    padding:
        90px
        22px;

    background:
        linear-gradient(
            135deg,
            #082e6d,
            #0b4b9d,
            var(--blue2)
        );

    color:#fff;
}


.contact-business-container{

    max-width:1150px;

    margin:auto;
}


.business-heading{

    max-width:700px;

    margin:
        0
        auto
        45px;

    text-align:center;
}


.business-heading > span{

    color:#cfe2ff;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;
}


.business-heading h2{

    margin:
        7px
        0
        10px;

    font-size:36px;
}


.business-heading p{

    margin:0;

    color:#dceaff;

    font-size:14px;

    line-height:1.8;
}


.business-grid{

    display:grid;

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

    gap:22px;
}


.business-card{

    padding:
        30px
        27px;

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

    border-radius:17px;

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

    text-align:center;
}


.business-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:
        0
        auto
        17px;

    border-radius:15px;

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

    font-size:25px;
}


.business-card h3{

    margin:
        0
        0
        18px;

    font-size:18px;
}


.business-card p{

    margin:
        12px
        0
        3px;

    color:#dceaff;

    font-size:12px;
}


.business-card strong{

    display:block;

    color:#fff;

    font-size:14px;
}


.business-card .business-small{

    margin-top:18px;

    color:#c8dbf6;

    font-size:11px;

    line-height:1.7;
}


/* =====================================================
   FAQ
===================================================== */

.contact-faq{

    padding:
        90px
        22px;

    background:#fff;
}


.faq-grid{

    max-width:1050px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:20px;
}


.faq-card{

    padding:
        27px;

    border:
        1px solid
        var(--border);

    border-radius:16px;

    background:#f8faff;

    transition:.3s;
}


.faq-card:hover{

    background:#fff;

    transform:
        translateY(-4px);

    box-shadow:var(--shadow);
}


.faq-card h3{

    margin:
        0
        0
        9px;

    color:var(--blue1);

    font-size:16px;
}


.faq-card p{

    margin:0;

    color:var(--grey);

    font-size:12px;

    line-height:1.75;
}


/* =====================================================
   CTA
===================================================== */

.contact-cta-wrap{

    padding:
        20px
        22px
        70px;

    background:#fff;
}


.contact-cta{

    max-width:1200px;

    margin:auto;

    padding:
        42px
        38px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            var(--blue1),
            var(--blue2),
            var(--blue3)
        );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;
}


.contact-cta > div:first-child{

    max-width:700px;
}


.contact-cta span{

    font-size:11px;

    font-weight:700;

    letter-spacing:1.4px;
}


.contact-cta h2{

    margin:
        7px
        0
        8px;

    font-size:29px;
}


.contact-cta p{

    margin:0;

    color:#e5f0ff;

    font-size:13px;

    line-height:1.7;
}


.contact-cta-buttons{

    display:flex;

    gap:12px;
}


.contact-cta-primary,
.contact-cta-whatsapp{

    display:inline-block;

    padding:
        13px
        22px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

    text-decoration:none;

    transition:.25s;
}


.contact-cta-primary{

    background:#fff;

    color:var(--blue1);
}


.contact-cta-whatsapp{

    background:
        var(--green);

    color:#fff;
}


.contact-cta-primary:hover,
.contact-cta-whatsapp:hover{

    transform:
        translateY(-2px);
}


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

.footer-brand-contact{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:14px;
}


.footer-brand-contact img{

    height:60px;

    width:auto;
}


.footer-brand-contact h3{

    margin:0;
}


.footer-brand-contact span{

    color:#9aa6b7;

    font-size:11px;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1050px){

    .quick-contact-grid{

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


    .contact-main-container{

        gap:40px;
    }

}


/* =====================================================
   MOBILE NAV / TABLET
===================================================== */

@media(max-width:900px){

    .contact-brand img{

        height:60px;
    }


    .contact-brand-text{

        display:none;
    }


    .menu-toggle{

        display:block;
    }


    .contact-navbar .nav-links{

        display:none;

        position:absolute;

        top:75px;

        left:0;

        right:0;

        z-index:999;

        flex-direction:column;

        align-items:flex-start;

        gap:3px;

        padding:20px;

        border-radius:14px;

        background:#fff;

        box-shadow:
            0 12px 35px
            rgba(0,0,0,.18);
    }


    .contact-navbar .nav-links.active{

        display:flex;
    }


    .contact-navbar .nav-links li{

        width:100%;
    }


    .contact-navbar .nav-links a{

        display:block;

        width:100%;

        padding:9px;

        color:var(--blue1);
    }


    .contact-navbar .nav-links a.active{

        border:0;

        border-radius:8px;

        background:
            var(--lightblue);
    }


    .contact-navbar .nav-book{

        width:100%;

        background:
            var(--blue1);

        color:#fff !important;

        text-align:center;
    }


    .contact-main-container{

        grid-template-columns:1fr;

        gap:50px;
    }


    .contact-information{

        max-width:700px;
    }


    .business-grid{

        grid-template-columns:1fr 1fr;
    }


    .business-card:last-child{

        grid-column:
            1 / -1;
    }


    .contact-cta{

        flex-direction:column;

        text-align:center;
    }

}


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

@media(max-width:600px){

    .contact-header{

        padding:
            14px
            18px
            55px;
    }


    .contact-brand img{

        height:55px;
    }


    .contact-hero{

        margin-top:48px;
    }


    .contact-hero h1{

        font-size:31px;
    }


    .contact-hero p{

        font-size:14px;
    }


    .contact-hero-buttons{

        flex-direction:column;
    }


    .contact-primary-btn,
    .contact-secondary-btn{

        width:100%;
    }


    /* QUICK CONTACT */

    .contact-quick{

        padding:
            65px
            18px;
    }


    .section-heading{

        margin-bottom:35px;
    }


    .section-heading h2{

        font-size:29px;
    }


    .quick-contact-grid{

        grid-template-columns:1fr;
    }


    .quick-contact-card{

        padding:
            21px
            18px;
    }


    /* CONTACT MAIN */

    .contact-main{

        padding:
            65px
            18px;
    }


    .contact-information > h2{

        font-size:29px;
    }


    .contact-info-item{

        gap:13px;
    }


    .contact-direct-buttons{

        flex-direction:column;
    }


    .contact-call-btn,
    .contact-whatsapp-btn{

        width:100%;

        text-align:center;
    }


    /* FORM */

    .contact-form-card{

        padding:
            28px
            20px;

        border-radius:17px;
    }


    .contact-form-heading h2{

        font-size:24px;
    }


    .form-row{

        grid-template-columns:1fr;

        gap:0;
    }


    .form-group input,
    .form-group select,
    .form-group textarea{

        font-size:16px;
    }


    /* 16px prevents unwanted iPhone zoom */


    /* BUSINESS */

    .contact-business{

        padding:
            70px
            18px;
    }


    .business-heading h2{

        font-size:29px;
    }


    .business-grid{

        grid-template-columns:1fr;
    }


    .business-card:last-child{

        grid-column:auto;
    }


    /* FAQ */

    .contact-faq{

        padding:
            65px
            18px;
    }


    .faq-grid{

        grid-template-columns:1fr;
    }


    /* CTA */

    .contact-cta-wrap{

        padding:
            15px
            18px
            50px;
    }


    .contact-cta{

        padding:
            32px
            22px;
    }


    .contact-cta h2{

        font-size:25px;
    }


    .contact-cta-buttons{

        width:100%;

        flex-direction:column;
    }


    .contact-cta-primary,
    .contact-cta-whatsapp{

        width:100%;

        text-align:center;
    }

}


/* =====================================================
   VERY SMALL SCREENS
===================================================== */

@media(max-width:390px){

    .contact-header{

        padding-left:15px;

        padding-right:15px;
    }


    .contact-hero h1{

        font-size:28px;
    }


    .contact-quick,
    .contact-main,
    .contact-business,
    .contact-faq{

        padding-left:15px;

        padding-right:15px;
    }


    .contact-form-card{

        padding:
            25px
            16px;
    }


    .quick-contact-icon{

        width:46px;

        height:46px;

        min-width:46px;

        font-size:20px;
    }


    .quick-contact-card h3{

        font-size:14px;
    }

}