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

.contact-section {

    position: relative;

    padding: 150px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fbff 100%);

}

/* =========================================================
   BACKGROUND EFFECTS
========================================================= */

.contact-bg {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

}

/* LEFT */

.contact-bg-1 {

    width: 320px;
    height: 320px;

    background: rgba(15, 157, 88, 0.08);

    top: -120px;
    left: -100px;

}

/* RIGHT */

.contact-bg-2 {

    width: 300px;
    height: 300px;

    background: rgba(11, 44, 138, 0.08);

    bottom: -120px;
    right: -100px;

}

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

.contact-heading {

    position: relative;

    z-index: 2;

    margin-bottom: 70px;

}

/* TAG */

.contact-heading span {

    display: inline-block;

    padding: 14px 28px;

    border-radius: 60px;

    background:
        rgba(15, 157, 88, 0.08);

    border: 1px solid rgba(15, 157, 88, 0.12);

    color: #0F9D58;

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 28px;

}

/* TITLE */

.contact-heading h2 {

    font-size: 44px;

    line-height: 1.3;

    font-weight: 900;

    color: #0F172A;

    margin-bottom: 30px;


}

/* TEXT */

.contact-heading p {

    font-size: 18px;

    line-height: 1.9;

    color: #64748B;

    max-width: 850px;

    margin: auto;

}

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

.contact-wrapper {

    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 40px;

    background: #ffffff;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.06);

}

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

.contact-info-side {

    position: relative;

    height: 100%;

    padding: 70px 50px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #07143B,
            #0B2C8A);

}

/* Glow */

.contact-glow {

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    top: -120px;
    right: -120px;

}

/* =========================================================
   TOP
========================================================= */

.contact-info-top {

    position: relative;

    z-index: 2;

    margin-bottom: 45px;

}

/* TITLE */

.contact-info-top h3 {

    font-size: 38px;

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 18px;

}

/* TEXT */

.contact-info-top p {

    font-size: 16px;

    line-height: 1.9;

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

    margin: 0;

}

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

.contact-info-item {

    position: relative;

    z-index: 2;

    display: flex;

    gap: 20px;

    margin-bottom: 30px;

}

/* ICON */

.contact-icon {

    min-width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.10);

    color: #ffffff;

    font-size: 26px;

}

/* SPAN */

.contact-info-item span {

    display: block;

    font-size: 14px;

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

    margin-bottom: 8px;

}

/* TEXT */

.contact-info-item h4 {

    font-size: 22px;

    line-height: 1.5;

    font-weight: 700;

    color: #ffffff;

    margin: 0;

}

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

.contact-form-side {

    padding: 70px 60px;

}

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

.contact-form-top {

    margin-bottom: 40px;

}

/* TITLE */

.contact-form-top h3 {

    font-size: 38px;

    font-weight: 800;

    color: #0F172A;

    margin-bottom: 18px;

}

/* TEXT */

.contact-form-top p {

    font-size: 16px;

    line-height: 1.9;

    color: #64748B;

    margin: 0;

}

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

.contact-input {

    margin-bottom: 25px;

}

/* INPUT */

.contact-input input,
.contact-input textarea {

    width: 100%;

    border: none;

    outline: none;

    padding: 20px 24px;

    border-radius: 22px;

    background: #F8FAFC;

    border: 1px solid #E2E8F0;

    font-size: 15px;

    color: #0F172A;

    transition: 0.4s ease;

}

/* Focus */

.contact-input input:focus,
.contact-input textarea:focus {

    border-color: #0F9D58;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(15, 157, 88, 0.10);

}

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

.contact-btn {

    border: none;

    padding: 18px 38px;

    border-radius: 60px;

    background:
        linear-gradient(135deg,
            #0B2C8A,
            #0F9D58);

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    transition: 0.4s ease;

}

/* Hover */

.contact-btn:hover {

    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(11, 44, 138, 0.20);

}

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

@media(max-width:991px) {

    .contact-section {

        padding: 100px 0;

    }

    .contact-heading h2 {

        font-size: 38px;

    }

}

@media(max-width:767px) {

    .contact-heading h2 {

        font-size: 32px;

    }

    .contact-info-side,
    .contact-form-side {

        padding: 50px 35px;

    }

    .contact-info-top h3,
    .contact-form-top h3 {

        font-size: 28px;

    }

}

@media(max-width:576px) {

    .contact-section {

        padding: 80px 0;

    }

    .contact-heading {

        margin-bottom: 50px;

    }

    .contact-heading h2 {

        font-size: 28px;

    }

    .contact-heading p {

        font-size: 16px;

    }

    .contact-wrapper {

        border-radius: 30px;

    }

    .contact-info-side,
    .contact-form-side {

        padding: 40px 25px;

    }

    .contact-info-item {

        gap: 15px;

    }

    .contact-icon {

        min-width: 55px;
        height: 55px;

        font-size: 22px;

    }

    .contact-info-item h4 {

        font-size: 18px;

    }

    .contact-form-top h3 {

        font-size: 24px;

    }

    .contact-btn {

        width: 100%;

    }

}

/* =========================================================
   SUPPORT SECTION
========================================================= */

.support-section {

    position: relative;

    padding: 40px 0;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fbff 100%);

}

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

.support-bg {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

}

.support-bg-1 {

    width: 320px;
    height: 320px;

    background:
        rgba(22, 163, 74, 0.08);

    top: -120px;
    left: -120px;

}

.support-bg-2 {

    width: 280px;
    height: 280px;

    background:
        rgba(37, 99, 235, 0.08);

    bottom: -120px;
    right: -120px;

}

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

.support-heading {

    margin-bottom: 70px;

}

.support-heading span {

    display: inline-block;

    padding: 14px 28px;

    border-radius: 60px;

    background:
        rgba(22, 163, 74, 0.08);

    color: #16A34A;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 28px;

}

.support-heading h2 {

    font-size: 44px;

    line-height: 1.3;

    font-weight: 900;

    color: #0F172A;

    margin-bottom: 28px;

}

.support-heading p {

    font-size: 18px;

    line-height: 1.9;

    color: #64748B;

    max-width: 850px;

    margin: auto;

}

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

.support-card {

    position: relative;

    height: 100%;

    padding: 42px 35px;

    border-radius: 32px;

    overflow: hidden;

    transition: 0.4s ease;

}

.support-card:hover {

    transform:
        translateY(-10px);

}

/* NUMBER */

.support-number {

    font-size: 70px;

    font-weight: 900;

    line-height: 1;

    margin-bottom: 25px;

}

/* TITLE */

.support-card h3 {

    font-size: 28px;

    line-height: 1.3;

    font-weight: 900;

    margin-bottom: 18px;

}

/* TEXT */

.support-card p {

    font-size: 16px;

    line-height: 2;

    color: #475569;

    margin: 0;

}

/* =========================================================
   GREEN
========================================================= */

.support-green {

    background: #F0FDF4;

    border: 1px solid #BBF7D0;

}

.support-green h3 {

    color: #16A34A;

}

.support-green .support-number {

    color:
        rgba(22, 163, 74, 0.12);

}

/* =========================================================
   BLUE
========================================================= */

.support-blue {

    background: #EFF6FF;

    border: 1px solid #BFDBFE;

}

.support-blue h3 {

    color: #2563EB;

}

.support-blue .support-number {

    color:
        rgba(37, 99, 235, 0.12);

}

/* =========================================================
   ORANGE
========================================================= */

.support-orange {

    background: #FFF7ED;

    border: 1px solid #FED7AA;

}

.support-orange h3 {

    color: #EA580C;

}

.support-orange .support-number {

    color:
        rgba(234, 88, 12, 0.12);

}

/* =========================================================
   MAP
========================================================= */

.support-map-wrapper {

    margin-top: 70px;

    overflow: hidden;

    border-radius: 40px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.08);

}

.support-map-wrapper iframe {

    width: 100%;

    height: 550px;

    border: none;

}

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

@media(max-width:991px) {

    .support-section {

        padding: 100px 0;

    }

    .support-heading h2 {

        font-size: 38px;

    }

}

@media(max-width:767px) {

    .support-heading h2 {

        font-size: 32px;

    }

    .support-card h3 {

        font-size: 24px;

    }

}

@media(max-width:576px) {

    .support-section {

        padding: 80px 0;

    }

    .support-heading {

        margin-bottom: 50px;

    }

    .support-heading h2 {

        font-size: 28px;

    }

    .support-heading p {

        font-size: 16px;

    }

    .support-card {

        padding: 35px 28px;

        border-radius: 28px;

    }

    .support-map-wrapper {

        margin-top: 50px;

        border-radius: 28px;

    }

    .support-map-wrapper iframe {

        height: 400px;

    }

}