/* ==========================================================
   MICE EVENT INDIA
   CONTACT PAGE
========================================================== */


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

.ct-page {

    width: 100%;

    overflow: hidden;

    background: #ffffff;

}


/* ==========================================================
   COMMON
========================================================== */

.ct-kicker {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    color: #000000;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.ct-kicker > span {

    width: 8px;

    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #920405;

}


.ct-section-number {

    color: rgba(0, 0, 0, 0.48);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.ct-section-number > span {

    margin-right: 14px;

    color: #920405;

}


.ct-section-number-light {

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

}


.ct-section-number-light > span {

    color: #FEFC44;

}


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

.ct-hero {

    padding:
        92px
        0
        95px;

    background: #ffffff;

    border-bottom: 1px solid rgba(0, 0, 0, 0.12);

}


.ct-hero-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(340px, 0.5fr);

    gap: 100px;

    align-items: end;

}


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

.ct-hero-content h1 {

    max-width: 880px;

    margin: 0;

    color: #000000;

    font-family: "Manrope", sans-serif;

    font-size: clamp(55px, 5.6vw, 82px);

    font-weight: 510;

    line-height: 0.99;

    letter-spacing: -4.5px;

}


.ct-hero-content h1 strong {

    display: block;

    color: #920405;

    font-weight: 540;

}


.ct-hero-content > p {

    max-width: 680px;

    margin:
        31px
        0
        0;

    color: rgba(0, 0, 0, 0.58);

    font-size: 16px;

    line-height: 1.8;

}


/* ==========================================================
   HERO CONTACT DETAILS
========================================================== */

.ct-hero-side {

    border-top: 1px solid #000000;

}


.ct-availability {

    min-height: 62px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.15);

    color: rgba(0, 0, 0, 0.48);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.ct-status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #FEFC44;

    border: 1px solid #000000;

}


.ct-contact-detail {

    padding:
        20px
        0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.15);

}


.ct-contact-detail > span {

    display: block;

    margin-bottom: 7px;

    color: rgba(0, 0, 0, 0.42);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}


.ct-contact-detail a,
.ct-contact-detail strong {

    color: #000000;

    font-family: "Manrope", sans-serif;

    font-size: 16px;

    font-weight: 550;

}


.ct-contact-detail a {

    transition: color 0.25s ease;

}


.ct-contact-detail a:hover {

    color: #920405;

}


/* ==========================================================
   MAIN CONTACT AREA
========================================================== */

.ct-main {

    padding:
        115px
        0
        125px;

    background: #f7f7f3;

}


.ct-main-grid {

    display: grid;

    grid-template-columns:
        minmax(270px, 0.65fr)
        minmax(0, 1.35fr);

    gap: 105px;

    align-items: start;

}


/* ==========================================================
   CONTACT INFO
========================================================== */

.ct-info {

    position: sticky;

    top: 115px;

}


.ct-info h2 {

    max-width: 440px;

    margin:
        28px
        0
        0;

    color: #000000;

    font-family: "Manrope", sans-serif;

    font-size: clamp(39px, 4vw, 57px);

    font-weight: 450;

    line-height: 1.05;

    letter-spacing: -2.7px;

}


.ct-info > p {

    max-width: 410px;

    margin:
        23px
        0
        0;

    color: rgba(0, 0, 0, 0.53);

    font-size: 14px;

    line-height: 1.75;

}


/* ==========================================================
   INFO LIST
========================================================== */

.ct-info-list {

    margin-top: 40px;

    border-top: 1px solid rgba(0, 0, 0, 0.14);

}


.ct-info-list > div {

    display: grid;

    grid-template-columns:
        37px
        1fr;

    gap: 15px;

    padding:
        16px
        0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.14);

}


.ct-info-list span {

    color: #920405;

    font-size: 9px;

    font-weight: 700;

}


.ct-info-list p {

    margin: 0;

    color: rgba(0, 0, 0, 0.67);

    font-size: 12px;

    line-height: 1.5;

}


/* ==========================================================
   DIRECT CONTACT
========================================================== */

.ct-direct-contact {

    margin-top: 40px;

    padding:
        22px;

    background: #000000;

}


.ct-direct-contact > span {

    display: block;

    margin-bottom: 10px;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.ct-direct-contact a {

    color: #FEFC44;

    font-family: "Manrope", sans-serif;

    font-size: 18px;

    font-weight: 550;

}


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

.ct-form-wrap {

    width: 100%;

    padding:
        42px;

    background: #ffffff;

    border-top: 4px solid #920405;

}


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

.ct-form {

    width: 100%;

}


.ct-form-row {

    display: grid;

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

    gap: 25px;

}


.ct-field {

    width: 100%;

    margin-bottom: 28px;

}


.ct-field label {

    display: block;

    margin-bottom: 10px;

    color: #000000;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}


.ct-field label span {

    color: #920405;

}


.ct-field input,
.ct-field select,
.ct-field textarea {

    width: 100%;

    border: 0;

    border-bottom:
        1px solid rgba(0, 0, 0, 0.22);

    border-radius: 0;

    outline: none;

    background: transparent;

    color: #000000;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    transition:
        border-color 0.25s ease;

}


.ct-field input {

    height: 53px;

}


.ct-field select {

    height: 53px;

    cursor: pointer;

}


.ct-field textarea {

    min-height: 135px;

    padding:
        15px
        0;

    resize: vertical;

    line-height: 1.7;

}


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

    color: rgba(0, 0, 0, 0.34);

}


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

    border-color: #920405;

}


/* DATE CONTROL */

.ct-field input[type="date"] {

    color: rgba(0, 0, 0, 0.75);

}


/* ==========================================================
   SUBMIT ROW
========================================================== */

.ct-submit-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin-top: 12px;

    padding-top: 28px;

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

}


.ct-submit-row > p {

    max-width: 390px;

    margin: 0;

    color: rgba(0, 0, 0, 0.40);

    font-size: 10px;

    line-height: 1.6;

}


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

.ct-submit {

    min-width: 205px;

    padding:
        8px
        8px
        8px
        22px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border: 0;

    border-radius: 999px;

    background: #000000;

    color: #ffffff;

    cursor: pointer;

    font-family: "DM Sans", sans-serif;

    font-size: 13px;

    font-weight: 700;

    transition:
        background 0.3s ease,
        transform 0.3s ease;

}


.ct-submit strong {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #FEFC44;

    color: #000000;

    font-size: 15px;

    font-weight: 500;

    transition:
        transform 0.3s ease;

}


.ct-submit:hover {

    background: #920405;

    transform: translateY(-2px);

}


.ct-submit:hover strong {

    transform: rotate(45deg);

}


/* ==========================================================
   HONEYPOT
========================================================== */

.ct-honeypot {

    position: absolute !important;

    left: -99999px !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;

}


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

.ct-form-message {

    display: grid;

    grid-template-columns:
        40px
        1fr;

    gap: 18px;

    align-items: start;

    margin-bottom: 35px;

    padding:
        20px;

}


.ct-form-message > span {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 14px;

    font-weight: 800;

}


.ct-form-message strong {

    display: block;

    margin-bottom: 4px;

    font-size: 14px;

}


.ct-form-message p {

    margin: 0;

    font-size: 12px;

    line-height: 1.65;

}


/* SUCCESS */

.ct-form-success {

    background:
        rgba(254, 252, 68, 0.35);

    border:
        1px solid rgba(0, 0, 0, 0.1);

}


.ct-form-success > span {

    background: #000000;

    color: #FEFC44;

}


/* ERROR */

.ct-form-error {

    background:
        rgba(146, 4, 5, 0.07);

    border:
        1px solid rgba(146, 4, 5, 0.18);

}


.ct-form-error > span {

    background: #920405;

    color: #ffffff;

}


/* ==========================================================
   COVERAGE
========================================================== */

.ct-coverage {

    padding:
        100px
        0;

    background: #000000;

    color: #ffffff;

}


.ct-coverage-grid {

    display: grid;

    grid-template-columns:
        1fr
        1.2fr;

    gap: 100px;

    align-items: center;

}


.ct-coverage-title h2 {

    max-width: 560px;

    margin:
        28px
        0
        0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: clamp(41px, 4.4vw, 62px);

    font-weight: 440;

    line-height: 1.04;

    letter-spacing: -3px;

}


.ct-coverage-title h2 strong {

    display: block;

    color: #920405;

    font-weight: 500;

}


/* ==========================================================
   LOCATIONS
========================================================== */

.ct-locations {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.ct-locations span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding:
        10px
        18px;

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

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

    font-size: 11px;

    font-weight: 600;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;

}


.ct-locations span:hover {

    border-color: #FEFC44;

    color: #FEFC44;

}


.ct-locations
.ct-location-highlight {

    border-color: #FEFC44;

    background: #FEFC44;

    color: #000000;

}


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

@media (max-width: 950px) {


    .ct-hero-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .ct-hero-side {

        max-width: 550px;

    }


    .ct-main-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .ct-info {

        position: static;

    }


    .ct-info-list {

        max-width: 600px;

    }


    .ct-direct-contact {

        max-width: 380px;

    }


    .ct-coverage-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

}


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

@media (max-width: 650px) {


    .ct-hero {

        padding:
            60px
            0
            68px;

    }


    .ct-hero-grid {

        gap: 45px;

    }


    .ct-hero-content h1 {

        font-size: 42px;

        line-height: 1.02;

        letter-spacing: -2.4px;

    }


    .ct-hero-content > p {

        margin-top: 24px;

        font-size: 14px;

        line-height: 1.75;

    }


    .ct-main {

        padding:
            75px
            0
            85px;

    }


    .ct-main-grid {

        gap: 45px;

    }


    .ct-info h2 {

        font-size: 37px;

        letter-spacing: -2px;

    }


    .ct-form-wrap {

        padding:
            30px
            22px;

    }


    .ct-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .ct-field {

        margin-bottom: 24px;

    }


    .ct-submit-row {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

    }


    .ct-submit {

        width: 100%;

    }


    .ct-coverage {

        padding:
            75px
            0;

    }


    .ct-coverage-title h2 {

        font-size: 38px;

        letter-spacing: -2px;

    }


    .ct-locations {

        gap: 8px;

    }


    .ct-locations span {

        min-height: 42px;

        padding:
            8px
            13px;

        font-size: 10px;

    }

}