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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#08130F;
    min-height:100vh;
}

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

:root{

    --primary:#2EE59D;
    --primary-dark:#18B67A;
    --white:#ffffff;
    --text:#E8F4F0;

    --glass:rgba(255,255,255,.08);

    --glass-hover:rgba(255,255,255,.12);

    --border:rgba(255,255,255,.18);

    /* These three are referenced throughout the file below
       (form inputs, focus states, checkboxes, form-status)
       but were never defined here — that's why the submit
       message, input backgrounds, and checked-state colors
       were all silently failing to render. */
    --green:#2EE59D;
    --muted:rgba(255,255,255,.6);
    --input-bg:rgba(255,255,255,.05);

}

/*===============================
        NAVBAR
================================*/

/*===============================
            NAVBAR
================================*/

.navbar{

    position: fixed;

    top: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: 95%;

    height: 84px;

    padding: 0 28px;

    display: flex;

    align-items: center;

    border-radius: 24px;

    backdrop-filter: blur(25px);

    background: var(--glass);

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

    z-index: 999;

}

/*===============================
            LOGO
================================*/

.logo{

    width: 220px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-shrink: 0;

}

.logo img{

    width: 190px;

    display: block;

}

/*===============================
        NAV LINKS
================================*/

.nav-links{

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    list-style: none;

    gap: 22px;

    margin: 0;

    padding: 0;

}

.nav-links li{

    position: relative;

}

.nav-links li a{

    text-decoration: none;

    color: var(--white);

    font-size: 16px;

    font-weight: 500;

    padding: 12px 18px;

    border-radius: 999px;

    transition: .35s;

    display: block;

    position: relative;

    overflow: hidden;

    white-space: nowrap;

}

/* Glass Hover */

.nav-links li a::before{

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 999px;

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

    backdrop-filter: blur(10px);

    border: 1px solid rgba(46,229,157,.25);

    opacity: 0;

    transition: .35s;

}

.nav-links li a:hover::before{

    opacity: 1;

}

.nav-links li a:hover{

    color: var(--primary);

}

.nav-links li a span{

    position: relative;

    z-index: 2;

}

.nav-links li a.active{

    background: rgba(46,229,157,.12);

    border: 1px solid rgba(46,229,157,.3);

    color: var(--primary);

}

/*===============================
        BOOK BUTTON
================================*/

.book-btn{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    background:white;

    color:#08130F;

    padding:13px 22px;

    border-radius:999px;

    font-weight:600;

    transition:.35s;

    white-space:nowrap;

}

.book-btn span{

    width:36px;

    height:36px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary);

    color:white;

    transition:.35s;

}

.book-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 35px rgba(46,229,157,.30);

}

.book-btn:hover span{

    transform:rotate(45deg);

}

/*===============================
        MENU TOGGLE
================================*/

.menu-toggle{

    width:48px;

    height:48px;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

    border-radius:14px;

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

    backdrop-filter:blur(20px);

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

}

.menu-toggle span{

    width:24px;

    height:2px;

    background:white;

    transition:.35s;

}

/* Animation */

.menu-toggle.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}

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

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    height:100vh;

    background:#08130F;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:30px;

    transition:.45s ease;

    z-index:998;

}

.mobile-menu.active{

    right:0;

}

.mobile-menu a{

    color:white;

    text-decoration:none;

    font-size:24px;

    font-weight:600;

    transition:.3s;

}

.mobile-menu a:hover{

    color:var(--primary);

}

.mobile-btn{

    margin-top:20px;

    background:white;

    color:#08130F !important;

    padding:14px 28px;

    border-radius:999px;

}

/* =========================================================
   MOBILE RESOURCE LINKS
========================================================= */

.mobile-resource-links {

    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    margin-top: 18px;
    padding-top: 18px;

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

}


/* Individual resource links */

.mobile-resource-links a {

    width: 100%;

    padding: 10px 0;

    color: rgba(255, 255, 255, 0.6);

    font-size: 14px;

    text-align: center;

    text-decoration: none;

    transition: color 0.25s ease;
}


.mobile-resource-links a:hover {

    color: #2EE59D;

}

/*=========================================
        4K MONITORS (2560px+)
=========================================*/

@media (min-width:2560px){

    .navbar{
        width:80%;
        height:92px;
    }

    .logo img{
        width:220px;
    }

    .nav-links{
        gap:30px;
    }

    .nav-links li a{
        font-size:18px;
        padding:15px 22px;
    }

    .book-btn{
        padding:16px 28px;
        font-size:17px;
    }

}


/*=========================================
        LARGE DESKTOP
=========================================*/

@media (max-width:1600px){

    .navbar{
        width:92%;
    }

    .nav-links{
        gap:20px;
    }

}


/*=========================================
        DESKTOP
=========================================*/

@media (max-width:1440px){

    .logo img{
        width:180px;
    }

    .nav-links{
        gap:18px;
    }

    .nav-links li a{
        font-size:15px;
        padding:12px 16px;
    }

}


/*=========================================
        LAPTOP (MacBook Air / Surface)
=========================================*/

@media (max-width:1280px){

    .navbar{
        padding:0 22px;
    }

    .logo{
        width:180px;
    }

    .book-btn{
        width:auto;
    }

    .nav-links{
        gap:14px;
    }

    .nav-links li a{

        font-size:14px;

        padding:11px 14px;

    }

}


/*=========================================
        SMALL LAPTOP
=========================================*/

@media (max-width:1100px){

    .logo img{
        width:155px;
    }

    .nav-links{
        gap:10px;
    }

    .nav-links li a{

        font-size:13px;

        padding:10px 12px;

    }

    .book-btn{

        padding:10px 16px;

        font-size:13px;

    }

}


/*=========================================
        TABLETS
=========================================*/

@media (max-width:992px){

    .navbar{

        height:74px;

        padding:0 18px;

    }

    .logo img{

        width:145px;

    }

    .nav-links{

        gap:6px;

    }

    .nav-links li a{

        font-size:12px;

        padding:9px 10px;

    }

    .book-btn{

        padding:9px 15px;

        font-size:12px;

    }

}


/*=========================================
        TABLET & LARGE MOBILE
=========================================*/

@media (max-width:768px){

    .navbar{

        height:72px;

        padding:0 18px;

        justify-content:space-between;

    }

    .nav-links{

        display:none;

    }

    .book-btn{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .logo{

        width:auto;

    }

    .logo img{

        width:145px;

    }

}


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

@media (max-width:576px){

    .navbar{

        width:94%;

        height:68px;

        padding:0 15px;

        border-radius:18px;

    }

    .logo img{

        width:130px;

    }

    .menu-toggle{

        width:42px;

        height:42px;

    }

}


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

@media (max-width:430px){

    .navbar{

        height:64px;

        top:12px;

    }

    .logo img{

        width:120px;

    }

    .menu-toggle{

        width:40px;

        height:40px;

    }

}


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

@media (max-width:375px){

    .navbar{

        width:96%;

        padding:0 12px;

    }

    .logo img{

        width:110px;

    }

    .menu-toggle{

        width:38px;

        height:38px;

    }

}


/*=========================================
        EXTRA SMALL MOBILE
=========================================*/

@media (max-width:320px){

    .logo img{

        width:100px;

    }

    .menu-toggle{

        width:36px;

        height:36px;

    }

}

.form-header {

    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    /*
       IMPORTANT:
       Creates space between navbar and heading
    */
    padding-top: 170px;

    padding-left: 30px;
    padding-right: 30px;

    padding-bottom: 70px;

    text-align: center;

    box-sizing: border-box;
}


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

.form-header h1 {
    margin: 0 auto;

    width: 100%;

    text-align: center;

    font-size: clamp(65px, 8vw, 115px);

    line-height: 0.95;

    letter-spacing: -5px;

    font-weight: 800;

    color: #ffffff;

    white-space: nowrap;
}

.form-header h1 span {
    color: #2EE59D;
    display: inline;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.form-header p {

    max-width: 680px;

    margin: 32px auto 0;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.7;
}


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

.form-wrapper {

    width: min(1200px, calc(100% - 60px));

    margin: 0 auto 100px;

    padding: 60px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(4, 36, 29, 0.88),
            rgba(2, 20, 16, 0.94)
        );

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

    border-radius: 36px;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.25);
}


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

.form-intro {

    padding-bottom: 35px;

    margin-bottom: 50px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


.form-intro > span {

    display: block;

    margin-bottom: 16px;

    color: #FF9F2A;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 4px;
}


.form-intro h2 {

    margin: 0;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.1;

    letter-spacing: -2px;

    color: #ffffff;
}


.form-intro h2 strong {

    color: #FF9F2A;

    font-weight: 700;
}


.form-intro p {

    margin: 15px 0 0;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.6;
}


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

.form-row {

    display: grid;

    gap: 28px;

    margin-bottom: 32px;
}


/* THREE COLUMNS */

.three-columns {

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


/* TWO COLUMNS */

.two-columns {

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


/* =========================================================
   FIELD
========================================================= */

.field {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.field label {

    color: var(--text);

    font-size: 15px;

    font-weight: 500;
}


.field input,
.field select,
.field textarea {

    width: 100%;

    box-sizing: border-box;

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

    border-radius: 14px;

    background: var(--input-bg);

    color: var(--white);

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/* INPUT */

.field input,
.field select {

    height: 54px;

    padding: 0 18px;
}


/* TEXTAREA */

.field textarea {

    min-height: 140px;

    padding: 16px 18px;

    resize: vertical;
}


/* SELECT */

.field select {

    appearance: none;

    cursor: pointer;
}


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

.field input::placeholder,
.field textarea::placeholder {

    color: rgba(255, 255, 255, 0.32);
}


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

.field input:focus,
.field select:focus,
.field textarea:focus {

    border-color: var(--green);

    background: rgba(46, 229, 157, 0.055);

    box-shadow:
        0 0 0 3px rgba(46, 229, 157, 0.08);
}


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

.field select option {

    background: #09221c;

    color: white;
}


/* =========================================================
   CHOICE SECTION
========================================================= */

.choice-section {

    display: flex;

    align-items: center;

    gap: 50px;

    margin: 42px 0;
}


.choice-title {

    min-width: 220px;

    color: var(--text);

    font-size: 15px;

    font-weight: 500;
}


.choice-options {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 30px;
}


/* =========================================================
   CHOICE
========================================================= */

.choice {

    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;

    cursor: pointer;
}


.choice input {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   CUSTOM CHECKBOX
========================================================= */

.custom-checkbox {

    position: relative;

    width: 21px;

    height: 21px;

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

    border-radius: 6px;

    display: inline-block;

    transition: all 0.25s ease;
}


.choice input:checked + .custom-checkbox {

    background: var(--green);

    border-color: var(--green);

    box-shadow:
        0 0 15px rgba(46, 229, 157, 0.35);
}


/* Checkmark glyph — makes the checked state readable by
   shape, not just color, since green-on-dark-green background
   has low contrast on its own. */
.choice input:checked + .custom-checkbox::after {

    content: "";

    position: absolute;

    left: 6px;

    top: 2px;

    width: 6px;

    height: 11px;

    border: solid #07110F;

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}


/* =========================================================
   CUSTOM RADIO
========================================================= */

.custom-radio {

    position: relative;

    width: 20px;

    height: 20px;

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

    border-radius: 50%;

    display: inline-block;

    transition: all 0.25s ease;
}


.choice input:checked + .custom-radio {

    border-color: var(--green);
}


/* Filled centre dot — same reasoning as the checkbox above:
   a distinct shape reads more clearly than a color-only cue. */
.choice input:checked + .custom-radio::after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 10px;

    height: 10px;

    background: var(--green);

    border-radius: 50%;

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

    box-shadow:
        0 0 10px rgba(46, 229, 157, 0.6);
}


/* =========================================================
   MESSAGE
========================================================= */

.message-field {

    margin-top: 45px;

    margin-bottom: 40px;
}


.message-field label span {

    color: rgba(255, 255, 255, 0.4);

    font-size: 13px;
}


/* =========================================================
   SUBMIT AREA
========================================================= */

.submit-area {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 45px;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.submit-btn {

    min-width: 270px;

    height: 62px;

    padding: 0 12px 0 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: none;

    border-radius: 50px;

    background: var(--white);

    color: #07140F;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.submit-btn i {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--green);

    font-size: 16px;

    transition: transform 0.25s ease;
}


.submit-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.25);
}


.submit-btn:hover i {

    transform: translateX(4px);
}


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

.form-status {

    margin: 0;

    font-size: 14px;

    color: var(--green);
}

/* Previously missing entirely — booking.js adds these exact
   classes on success/error, but with nothing defined for
   either, both looked identical (and, combined with the
   undefined --green variable above, invisible). */
.form-status.success {

    color: #2EE59D;
}

.form-status.error {

    color: #FF6B6B;
}


/* =========================================================
   LARGE DESKTOP
   1440px+
========================================================= */

@media (min-width: 1440px) {

    .form-header {

        padding-top: 190px;

        padding-bottom: 85px;
    }

    .form-header h1 {

        font-size: 115px;
    }

    .form-wrapper {

        padding: 70px;
    }

}


/* =========================================================
   LAPTOP
   1200px – 1439px
========================================================= */

@media (max-width: 1439px) {

    .form-header {

        padding-top: 170px;
    }

    .form-wrapper {

        width: min(1150px, calc(100% - 60px));

        padding: 55px;
    }

}


/* =========================================================
   SMALL LAPTOP
   1024px – 1199px
========================================================= */

@media (max-width: 1199px) {

    .form-header {

        padding-top: 155px;
    }

    .form-header h1 {

        font-size: clamp(60px, 8vw, 95px);

        letter-spacing: -4px;
    }

    .form-wrapper {

        width: calc(100% - 50px);

        padding: 45px;
    }

    .choice-section {

        gap: 30px;
    }

    .choice-title {

        min-width: 190px;
    }

}


/* =========================================================
   TABLET / IPAD
   768px – 1023px
========================================================= */

@media (max-width: 1023px) {

    .form-header {

        padding-top: 145px;

        padding-bottom: 60px;

        padding-left: 25px;

        padding-right: 25px;
    }

    .form-header h1 {

        font-size: clamp(58px, 9vw, 82px);

        letter-spacing: -3px;

        /*
           Still one line
        */
        white-space: nowrap;
    }

    .form-header p {

        font-size: 16px;

        margin-top: 28px;
    }

    .form-wrapper {

        width: calc(100% - 40px);

        padding: 40px;

        border-radius: 30px;
    }

    .three-columns {

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

    .choice-section {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

    .choice-title {

        min-width: auto;
    }

}


/* =========================================================
   LARGE MOBILE
   576px – 767px
========================================================= */

@media (max-width: 767px) {

    .form-header {

        padding-top: 135px;

        padding-bottom: 50px;

        padding-left: 20px;

        padding-right: 20px;
    }

    .form-header h1 {

        font-size: clamp(44px, 10vw, 65px);

        line-height: 1;

        letter-spacing: -2.5px;

        /*
           Keep heading on one line
        */
        white-space: nowrap;
    }

    .form-header p {

        max-width: 500px;

        margin-top: 25px;

        font-size: 15px;

        line-height: 1.6;
    }

    .form-wrapper {

        width: calc(100% - 30px);

        padding: 30px 24px;

        margin-bottom: 60px;

        border-radius: 26px;
    }

    .form-intro {

        margin-bottom: 35px;

        padding-bottom: 28px;
    }

    .form-intro h2 {

        font-size: 34px;

        letter-spacing: -1.5px;
    }

    .form-intro p {

        font-size: 14px;
    }

    .form-row {

        gap: 20px;

        margin-bottom: 22px;
    }

    .three-columns,
    .two-columns {

        grid-template-columns: 1fr;
    }

    .choice-section {

        margin: 32px 0;

        gap: 17px;
    }

    .choice-options {

        gap: 18px 25px;
    }

    .message-field {

        margin-top: 30px;

        margin-bottom: 30px;
    }

    .submit-area {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        margin-top: 30px;
    }

    .submit-btn {

        width: 100%;

        min-width: 0;
    }

}


/* =========================================================
   MOBILE
   480px – 575px
========================================================= */

@media (max-width: 575px) {

    .form-header {

        /*
           Extra space below navbar
        */
        padding-top: 125px;

        padding-bottom: 45px;
    }

    .form-header h1 {

        font-size: clamp(38px, 10vw, 52px);

        letter-spacing: -2px;

        /*
           One line
        */
        white-space: nowrap;
    }

    .form-header p {

        margin-top: 22px;

        font-size: 14px;
    }

    .form-wrapper {

        width: calc(100% - 24px);

        padding: 26px 20px;

        border-radius: 22px;
    }

    .form-intro > span {

        font-size: 11px;

        letter-spacing: 3px;
    }

    .form-intro h2 {

        font-size: 29px;
    }

    .form-intro p {

        font-size: 14px;
    }

    .field input,
    .field select {

        height: 52px;

        font-size: 14px;
    }

    .field textarea {

        font-size: 14px;
    }

    .choice-title {

        font-size: 14px;
    }

    .choice {

        font-size: 14px;
    }

}


/* =========================================================
   SMALL MOBILE
   375px – 479px
========================================================= */

@media (max-width: 479px) {

    .form-header {

        padding-top: 115px;

        padding-bottom: 40px;

        padding-left: 12px;

        padding-right: 12px;
    }

    .form-header h1 {

        font-size: 35px;

        letter-spacing: -1.8px;

        white-space: nowrap;
    }

    .form-header p {

        font-size: 13px;

        line-height: 1.55;
    }

    .form-wrapper {

        width: calc(100% - 20px);

        padding: 24px 17px;

        border-radius: 20px;
    }

    .form-intro h2 {

        font-size: 26px;
    }

    .form-intro > span {

        font-size: 10px;

        letter-spacing: 2.5px;
    }

    .choice-options {

        gap: 16px 20px;
    }

    .submit-btn {

        height: 58px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   320px – 374px
========================================================= */

@media (max-width: 374px) {

    .form-header {

        padding-top: 110px;

        padding-bottom: 35px;
    }

    .form-header h1 {

        /*
           Smallest size that still attempts
           to keep the complete heading in one line
        */
        font-size: 30px;

        letter-spacing: -1.5px;
    }

    .form-header p {

        font-size: 12px;
    }

    .form-wrapper {

        padding: 22px 15px;
    }

    .form-intro h2 {

        font-size: 24px;
    }

    .choice-options {

        gap: 14px;
    }

}

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

.footer{

    position:relative;

    width:100%;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #07110F 0%,
        #04100D 60%,
        #020705 100%
    );

    padding:90px 0 35px;

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

}

/*====================================
        BACKGROUND GLOW
====================================*/

.footer::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    background:#2EE59D;

    border-radius:50%;

    filter:blur(220px);

    opacity:.06;

    left:50%;

    top:-450px;

    transform:translateX(-50%);

}

.footer::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background:#FF9F2A;

    border-radius:50%;

    filter:blur(220px);

    opacity:.03;

    right:-200px;

    bottom:-250px;

}

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

.footer-container{

    width:90%;

    max-width:1450px;

    margin:auto;

    position:relative;

    z-index:2;

}

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

.footer-divider{

    width:100%;

    height:1px;

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

}

.bottom-divider{

    margin-top:65px;

}

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

.footer-content{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:130px;

    padding:70px 0;

}

/*====================================
            LEFT
====================================*/

.company-header{

    display:flex;

    align-items:center;

    gap:22px;

    margin-bottom:45px;

}

.company-header img{

    width:72px;

    transition:.45s;

}

.company-header img:hover{

    transform:rotate(-5deg) scale(1.05);

}

.company-header h3{

    color:#fff;

    font-size:26px;

    margin-bottom:8px;

    font-weight:700;

}

.company-header span{

    color:#2EE59D;

    font-size:16px;

}

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/*====================================
        CONTACT ITEM
====================================*/

.contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.contact-icon{

    width:54px;

    height:54px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:rgba(46,229,157,.10);

    border:1px solid rgba(46,229,157,.20);

    color:#2EE59D;

    transition:.4s;

}

.contact-item:hover .contact-icon{

    transform:translateY(-6px);

    background:#2EE59D;

    color:#07110F;

    box-shadow:0 15px 30px rgba(46,229,157,.25);

}

.contact-item p,

.contact-item a{

    color:#D4DDD9;

    text-decoration:none;

    line-height:1.8;

    transition:.35s;

}

.contact-item a:hover{

    color:#2EE59D;

}

.phones{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/*====================================
            RIGHT
====================================*/

.footer-right{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.footer-logo{

    margin-bottom:35px;

}

.footer-logo img{

    width:180px;

    transition:.45s;

}

.footer-logo img:hover{

    transform:scale(1.05);

}

.footer-links ul{

    list-style:none;

}

.footer-links li{

    margin-bottom:18px;

}

.footer-links a{

    color:#D4DDD9;

    text-decoration:none;

    position:relative;

    transition:.35s;

    display:inline-block;

    font-size:17px;

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:#2EE59D;

    transition:.35s;

}

.footer-links a:hover{

    color:#fff;

    transform:translateX(8px);

}

.footer-links a:hover::after{

    width:100%;

}

/*====================================
        CDS SITE
====================================*/

.partner-site{

    margin-top:40px;

}

.partner-site span{

    display:block;

    color:#9EA8A4;

    margin-bottom:10px;

    font-size:14px;

}

.partner-site a{

    color:#2EE59D;

    text-decoration:none;

    font-size:20px;

    font-weight:600;

    position:relative;

}

.partner-site a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:#2EE59D;

    transition:.35s;

}

.partner-site a:hover::after{

    width:100%;

}

/*====================================
        COPYRIGHT
====================================*/

.footer-bottom{

    padding-top:30px;

    text-align:center;

}

.footer-bottom p{

    color:#AEB7B3;

    font-size:15px;

    letter-spacing:.5px;

}

/*==================================================
                4K DISPLAY
==================================================*/

@media (min-width:2560px){

    .footer{
    
    padding:120px 0 40px;
    
    }
    
    .footer-container{
    
    max-width:1800px;
    
    }
    
    .footer-content{
    
    gap:180px;
    
    padding:90px 0;
    
    }
    
    .company-header h3{
    
    font-size:34px;
    
    }
    
    .company-header span{
    
    font-size:18px;
    
    }
    
    .contact-item p,
    .contact-item a{
    
    font-size:20px;
    
    }
    
    .footer-links a{
    
    font-size:22px;
    
    }
    
    .partner-site a{
    
    font-size:24px;
    
    }
    
    .footer-logo img{
    
    width:240px;
    
    }
    
    }
    
    /*==================================================
                LARGE DESKTOP
    ==================================================*/
    
    @media (max-width:1600px){
    
    .footer-content{
    
    gap:120px;
    
    }
    
    }
    
    /*==================================================
                    DESKTOP
    ==================================================*/
    
    @media (max-width:1440px){
    
    .footer-content{
    
    gap:90px;
    
    }
    
    .company-header h3{
    
    font-size:24px;
    
    }
    
    .footer-logo img{
    
    width:170px;
    
    }
    
    }
    
    /*==================================================
                MACBOOK / SURFACE LAPTOP
    ==================================================*/
    
    @media (max-width:1280px){
    
    .footer-content{
    
    grid-template-columns:1.7fr 1fr;
    
    gap:70px;
    
    }
    
    .company-header img{
    
    width:65px;
    
    }
    
    .company-header h3{
    
    font-size:22px;
    
    }
    
    .contact-icon{
    
    width:50px;
    
    height:50px;
    
    }
    
    }
    
    /*==================================================
                    SMALL LAPTOP
    ==================================================*/
    
    @media (max-width:1100px){
    
    .footer-content{
    
    gap:55px;
    
    }
    
    .footer-links a{
    
    font-size:16px;
    
    }
    
    .partner-site a{
    
    font-size:18px;
    
    }
    
    }
    
    /*==================================================
            SURFACE PRO / iPAD PRO
    ==================================================*/
    
    @media (max-width:992px){
    
    .footer{
    
    padding:80px 0 30px;
    
    }
    
    .footer-content{
    
    grid-template-columns:1fr;
    
    gap:60px;
    
    }
    
    .footer-right{
    
    align-items:flex-start;
    
    }
    
    .footer-logo{
    
    margin-bottom:30px;
    
    }
    
    .footer-divider{
    
    margin:15px 0;
    
    }
    
    .bottom-divider{
    
    margin-top:40px;
    
    }
    
    }
    
    /*==================================================
                    TABLET
    ==================================================*/
    
    @media (max-width:768px){
    
    .footer{
    
    padding:70px 0 25px;
    
    }
    
    .footer-container{
    
    width:92%;
    
    }
    
    .footer-content{
    
    padding:50px 0;
    
    gap:50px;
    
    }
    
    .company-header{
    
    flex-direction:column;
    
    align-items:flex-start;
    
    }
    
    .company-header img{
    
    width:60px;
    
    }
    
    .company-header h3{
    
    font-size:21px;
    
    }
    
    .contact-item{
    
    gap:15px;
    
    }
    
    .contact-icon{
    
    width:48px;
    
    height:48px;
    
    font-size:18px;
    
    }
    
    .footer-logo img{
    
    width:155px;
    
    }
    
    .partner-site{
    
    margin-top:30px;
    
    }
    
    }
    
    /*==================================================
                LARGE MOBILE
    ==================================================*/
    
    @media (max-width:576px){
    
    .footer{
    
    padding:60px 0 20px;
    
    }
    
    .footer-container{
    
    width:92%;
    
    }
    
    .company-header{
    
    flex-direction:column;
    
    align-items:center;
    
    text-align:center;
    
    }
    
    .footer-left{
    
    text-align:center;
    
    }
    
    .contact-item{
    
    flex-direction:column;
    
    align-items:center;
    
    text-align:center;
    
    gap:12px;
    
    }
    
    .contact-icon{
    
    margin-bottom:5px;
    
    }
    
    .footer-right{
    
    align-items:center;
    
    text-align:center;
    
    }
    
    .footer-links ul{
    
    padding:0;
    
    }
    
    .footer-links li{
    
    margin-bottom:16px;
    
    }
    
    .partner-site{
    
    text-align:center;
    
    }
    
    .footer-logo img{
    
    width:140px;
    
    }
    
    .footer-bottom{
    
    padding-top:22px;
    
    }
    
    }
    
    /*==================================================
                    MOBILE
    ==================================================*/
    
    @media (max-width:430px){
    
    .footer{
    
    padding:55px 0 20px;
    
    }
    
    .footer-content{
    
    gap:40px;
    
    }
    
    .company-header img{
    
    width:55px;
    
    }
    
    .company-header h3{
    
    font-size:18px;
    
    }
    
    .company-header span{
    
    font-size:13px;
    
    }
    
    .contact-item p,
    .contact-item a{
    
    font-size:14px;
    
    line-height:1.6;
    
    }
    
    .contact-icon{
    
    width:44px;
    
    height:44px;
    
    font-size:17px;
    
    }
    
    .footer-logo img{
    
    width:125px;
    
    }
    
    .footer-links a{
    
    font-size:15px;
    
    }
    
    .partner-site a{
    
    font-size:17px;
    
    }
    
    .footer-bottom p{
    
    font-size:13px;
    
    }
    
    }
    
    /*==================================================
                SMALL MOBILE
    ==================================================*/
    
    @media (max-width:375px){
    
    .footer{
    
    padding:50px 0 15px;
    
    }
    
    .company-header img{
    
    width:50px;
    
    }
    
    .company-header h3{
    
    font-size:16px;
    
    }
    
    .company-header span{
    
    font-size:12px;
    
    }
    
    .contact-item{
    
    gap:10px;
    
    }
    
    .contact-icon{
    
    width:40px;
    
    height:40px;
    
    font-size:15px;
    
    }
    
    .footer-logo img{
    
    width:110px;
    
    }
    
    .footer-links a{
    
    font-size:14px;
    
    }
    
    .partner-site a{
    
    font-size:15px;
    
    }
    
    }
    
    /*==================================================
                EXTRA SMALL MOBILE
    ==================================================*/
    
    @media (max-width:320px){
    
    .footer{
    
    padding:40px 0 15px;
    
    }
    
    .company-header h3{
    
    font-size:15px;
    
    }
    
    .company-header span{
    
    font-size:11px;
    
    }
    
    .contact-item p,
    .contact-item a{
    
    font-size:12px;
    
    }
    
    .contact-icon{
    
    width:38px;
    
    height:38px;
    
    font-size:14px;
    
    }
    
    .footer-logo img{
    
    width:100px;
    
    }
    
    .footer-links a{
    
    font-size:13px;
    
    }
    
    .partner-site a{
    
    font-size:14px;
    
    }
    
    .footer-bottom p{
    
    font-size:12px;
    
    }
    
    }

    .nav-dropdown {
        position: relative;
    }
    
    
    /* RESOURCES BUTTON */
    
    .nav-dropdown-btn {
    
        display: flex;
        align-items: center;
        gap: 8px;
    
        background: transparent;
        border: none;
    
        color: #ffffff;
    
        font-family: inherit;
        font-size: 16px;
        font-weight: 500;
    
        cursor: pointer;
    
        padding: 10px 0;
    
        transition: color 0.3s ease;
    }
    
    
    .nav-dropdown-btn:hover {
        color: #2EE59D;
    }
    
    
    /* CHEVRON */
    
    .nav-dropdown-btn i {
    
        font-size: 10px;
    
        transition:
            transform 0.3s ease,
            color 0.3s ease;
    }
    
    
    .nav-dropdown.active .nav-dropdown-btn {
        color: #2EE59D;
    }
    
    
    .nav-dropdown.active .nav-dropdown-btn i {
        transform: rotate(180deg);
    }
    
    
    /* =========================================================
       DROPDOWN MENU
    ========================================================= */
    
    .nav-dropdown-menu {
    
        position: absolute;
    
        top: calc(100% + 14px);
        right: 0;
    
        width: 230px;
    
        padding: 10px;
    
        background: rgba(8, 25, 21, 0.96);
    
        border: 1px solid rgba(46, 229, 157, 0.25);
    
        border-radius: 18px;
    
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    
        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            0 0 30px rgba(46, 229, 157, 0.05);
    
        opacity: 0;
        visibility: hidden;
    
        transform: translateY(-8px);
    
        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;
    
        z-index: 9999;
    }
    
    
    /* OPEN */
    
    .nav-dropdown.active .nav-dropdown-menu {
    
        opacity: 1;
        visibility: visible;
    
        transform: translateY(0);
    }
    
    
    /* =========================================================
       DROPDOWN LINKS
    ========================================================= */
    
    .nav-dropdown-menu a {
    
        display: flex;
    
        align-items: center;
        justify-content: space-between;
    
        padding: 14px 15px;
    
        border-radius: 11px;
    
        color: rgba(255, 255, 255, 0.82);
    
        text-decoration: none;
    
        font-size: 15px;
        font-weight: 500;
    
        transition:
            background 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease;
    }
    
    
    .nav-dropdown-menu a i {
    
        font-size: 11px;
    
        color: #2EE59D;
    
        opacity: 0;
    
        transform: translateX(-5px);
    
        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
    }
    
    
    .nav-dropdown-menu a:hover {
    
        background: rgba(46, 229, 157, 0.10);
    
        color: #ffffff;
    
        transform: translateX(2px);
    }
    
    
    .nav-dropdown-menu a:hover i {
    
        opacity: 1;
    
        transform: translateX(0);
    }