/* ==========================================================
   CONTACT PAGE
   MAR CONSULTANCY
========================================================== */

/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --primary: #0d6efd;
    --secondary: #0B2447;
    --accent: #ffc107;

    --dark: #222;

    --text: #555;

    --white: #fff;

    --light: #f8f9fa;

    --border: #e7e7e7;

    --shadow-sm: 0 5px 15px rgba(0, 0, 0, .08);

    --shadow-md: 0 15px 35px rgba(0, 0, 0, .12);

    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .18);

}

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

body {

    overflow-x: hidden;

}

.section-tag {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 50px;

    background: #e8f1ff;

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 20px;

}

.section-title {

    margin-bottom: 50px;

}

.section-title h2 {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--dark);

}

.section-title p {

    max-width: 700px;

    margin: auto;

    color: var(--text);

}

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

.contact-hero {

    position: relative;

    padding: 100px 0;

    background: linear-gradient(135deg, #003b95, #0d6efd);

    overflow: hidden;

    color: #fff;

}

.contact-hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

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

    border-radius: 50%;

    top: -220px;

    right: -180px;

}

.contact-hero::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

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

    border-radius: 50%;

    left: -120px;

    bottom: -120px;

}

.hero-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, .15);

}

.hero-content {

    position: relative;

    z-index: 5;

}

.hero-tag {

    display: inline-block;

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

    padding: 10px 22px;

    border-radius: 40px;

    margin-bottom: 25px;

    font-weight: 600;

    backdrop-filter: blur(10px);

}

.contact-hero h1 {

    font-size: 3.3rem;

    font-weight: 800;

    margin-bottom: 20px;

}

.contact-hero p {

    font-size: 1.05rem;

    line-height: 1.9;

    opacity: .92;

    margin-bottom: 35px;

}

.hero-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}

.hero-buttons .btn {

    padding: 14px 34px;

    border-radius: 50px;

    font-weight: 600;

}

.hero-image {

    max-width: 100%;

    animation: floatImage 5s ease-in-out infinite;

}

@keyframes floatImage {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

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

.contact-info-section {

    padding: 70px 0;

    background: #fff;

}

.info-card {

    background: #fff;

    border-radius: 18px;

    padding: 35px;

    text-align: center;

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

    transition: .35s;

    height: 100%;

}

.info-card:hover {

    transform: translateY(-10px);

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

}

.info-card i {

    width: 70px;

    height: 70px;

    line-height: 70px;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    font-size: 26px;

    margin-bottom: 20px;

}

.info-card h4 {

    margin-bottom: 15px;

    font-size: 1.3rem;

    font-weight: 700;

}

.info-card p {

    margin-bottom: 10px;

    color: var(--text);

}

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

.contact-form-section {

    padding: 70px 0;

    background: #f6f9ff;

}

.form-wrapper {

    background: #fff;

    padding: 45px;

    border-radius: 25px;

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

}

.form-wrapper h2 {

    font-weight: 700;

    margin-bottom: 15px;

}

.form-wrapper p {

    color: var(--text);

    margin-bottom: 35px;

}

.form-wrapper label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color: #444;

}

.form-control,

.form-select {

    border-radius: 12px;

    height: 55px;

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

    transition: .3s;

}

textarea.form-control {

    height: auto;

    min-height: 160px;

    resize: none;

}

.form-control:focus,

.form-select:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .15);

}

.form-wrapper button {

    width: 100%;

    padding: 16px;

    border-radius: 50px;

    font-size: 17px;

    font-weight: 600;

}

/* ==========================================================
   RIGHT SIDE CONTENT
========================================================== */

.contact-side-content {

    padding-left: 35px;

}

.contact-side-content h2 {

    font-size: 2.2rem;

    font-weight: 700;

    margin-bottom: 20px;

}

.contact-side-content>p {

    color: var(--text);

    line-height: 1.9;

    margin-bottom: 35px;

}

.feature-list {

    display: flex;

    flex-direction: column;

    gap: 25px;

}

.feature-item {

    display: flex;

    gap: 20px;

    align-items: flex-start;

}

.feature-icon {

    width: 65px;

    height: 65px;

    border-radius: 18px;

    background: #edf4ff;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.feature-icon i {

    color: var(--primary);

    font-size: 24px;

}

.feature-item h5 {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 6px;

}

.feature-item p {

    color: var(--text);

    margin: 0;

    line-height: 1.8;

}

/* ==========================================================
   BUSINESS STATISTICS
========================================================== */

.contact-stats {

    padding: 70px 0;

    background: linear-gradient(135deg, #003b95, #0d6efd);

    color: #fff;

    position: relative;

    overflow: hidden;

}

.contact-stats::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

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

    top: -180px;

    right: -120px;

}

.contact-stats::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

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

    bottom: -150px;

    left: -120px;

}

.stat-box {

    position: relative;

    z-index: 2;

    padding: 35px 20px;

    border-radius: 20px;

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

    backdrop-filter: blur(8px);

    transition: .35s;

}

.stat-box:hover {

    transform: translateY(-10px);

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

}

.stat-box h2 {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 10px;

}

.stat-box p {

    margin: 0;

    font-size: 1rem;

    letter-spacing: .5px;

}

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

.faq-section {

    padding: 70px 0;

    background: #ffffff;

}

.accordion {

    max-width: 900px;

    margin: auto;

}

.accordion-item {

    border: none;

    margin-bottom: 18px;

    border-radius: 18px !important;

    overflow: hidden;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);

}

.accordion-button {

    padding: 22px 25px;

    font-weight: 600;

    font-size: 1.05rem;

    background: #fff;

    color: #222;

}

.accordion-button:not(.collapsed) {

    background: #edf4ff;

    color: #0d6efd;

    box-shadow: none;

}

.accordion-button:focus {

    box-shadow: none;

}

.accordion-body {

    padding: 25px;

    line-height: 1.8;

    color: #555;

}

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

.contact-cta {

    padding: 70px 0;

    background: #f6f9ff;

}

.cta-box {

    background: linear-gradient(135deg, #0d6efd, #003b95);

    border-radius: 30px;

    padding: 70px;

    text-align: center;

    color: #fff;

    box-shadow: 0 25px 50px rgba(0, 0, 0, .15);

}

.cta-box h2 {

    font-size: 2.7rem;

    font-weight: 700;

    margin-bottom: 20px;

}

.cta-box p {

    max-width: 700px;

    margin: 0 auto 35px;

    line-height: 1.9;

    opacity: .92;

}

.cta-box .btn {

    border-radius: 50px;

    padding: 15px 40px;

    font-weight: 700;

}

/* ==========================================================
   LOCATION SECTION
========================================================== */

.location-section {

    padding: 70px 0;

    background: #fff;

}

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

.office-card {

    background: #fff;

    border-radius: 25px;

    padding: 40px;

    height: 100%;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

    transition: .35s;

}

.office-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}

.office-icon {

    width: 75px;

    height: 75px;

    border-radius: 18px;

    background: #0d6efd;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

}

.office-icon i {

    color: #fff;

    font-size: 30px;

}

.office-card h3 {

    font-weight: 700;

    margin-bottom: 20px;

}

.office-card p {

    line-height: 1.8;

    color: #555;

    margin-bottom: 15px;

}

.office-card hr {

    margin: 25px 0;

}

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

.map-card {

    background: #fff;

    border-radius: 25px;

    overflow: hidden;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

    transition: .35s;

    height: 100%;

}

.map-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}

.map-card h4 {

    padding: 25px;

    margin: 0;

    font-weight: 700;

    border-bottom: 1px solid #eee;

}

.map-card iframe {

    width: 100%;

    height: 450px;

    border: 0;

    display: block;

}

/* ==========================================================
   FLOATING WHATSAPP BUTTON
========================================================== */

.floating-whatsapp {

    position: fixed;

    right: 25px;

    bottom: 95px;

    width: 60px;

    height: 60px;

    background: #25D366;

    color: #fff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 28px;

    text-decoration: none;

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

    z-index: 999;

    transition: .35s;

}

.floating-whatsapp:hover {

    color: #fff;

    transform: translateY(-6px) scale(1.08);

}

/* ==========================================================
   FLOATING CALL BUTTON
========================================================== */

.floating-call {

    position: fixed;

    right: 25px;

    bottom: 170px;

    width: 60px;

    height: 60px;

    background: #0d6efd;

    color: #fff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 24px;

    text-decoration: none;

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

    transition: .35s;

    z-index: 999;

}

.floating-call:hover {

    color: #fff;

    transform: translateY(-6px);

}

/* ==========================================================
   BACK TO TOP
========================================================== */

/* ==========================================================
   SUCCESS TOAST
========================================================== */

.success-toast {

    position: fixed;

    top: 30px;

    right: -450px;

    width: 340px;

    background: #28a745;

    color: #fff;

    padding: 18px 22px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    gap: 15px;

    font-weight: 600;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

    transition: .45s;

    z-index: 99999 !important;

}

.success-toast.show {

    right: 25px;

}

.success-toast i {

    font-size: 24px;

}

/* ==========================================================
   LOADING OVERLAY
========================================================== */

.loading-overlay {

    position: fixed;

    inset: 0;

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

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    visibility: hidden;

    opacity: 0;

    transition: .35s;

    z-index: 99998 !important;

}

.loading-overlay.show {

    visibility: visible;

    opacity: 1;

}

.loader {

    width: 60px;

    height: 60px;

    border: 5px solid #ddd;

    border-top: 5px solid #0d6efd;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}

.loading-overlay p {

    margin-top: 20px;

    font-weight: 600;

}

@keyframes spin {

    from {

        transform: rotate(0);

    }

    to {

        transform: rotate(360deg);

    }

}

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

.footer {

    background: #06142e;

    color: #fff;

    padding: 70px 0 20px;

}

.footer h4 {

    margin-bottom: 25px;

    font-weight: 700;

}

.footer p {

    color: #d5d5d5;

    line-height: 1.8;

}

.footer ul {

    list-style: none;

    padding: 0;

}

.footer li {

    margin-bottom: 12px;

}

.footer a {

    color: #d5d5d5;

    text-decoration: none;

    transition: .3s;

}

.footer a:hover {

    color: #fff;

    padding-left: 8px;

}

.footer hr {

    border-color: rgba(255, 255, 255, .15);

    margin: 40px 0 20px;

}

.copyright {

    text-align: center;

}

.copyright p {

    margin: 0;

    color: #bbb;

}

/* ==========================================================
   REVEAL ANIMATION
========================================================== */

.reveal {

    opacity: 0;

    transform: translateY(40px);

    transition: all .8s ease;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}

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

@media (max-width:991px) {

    .contact-hero {

        padding: 70px 0;

        text-align: center;

    }

    .contact-hero h1 {

        font-size: 2.5rem;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-image {

        margin-top: 50px;

    }

    .contact-side-content {

        padding-left: 0;

        margin-top: 50px;

    }

    .cta-box {

        padding: 50px 30px;

    }

    .cta-box h2 {

        font-size: 2rem;

    }

    .section-title h2 {

        font-size: 2rem;

    }

    .office-card {

        margin-bottom: 30px;

    }

}

@media(max-width:768px) {

    .form-wrapper {

        padding: 30px;

    }

    .info-card {

        padding: 25px;

    }

    .map-card iframe {

        height: 320px;

    }

    .floating-call,

    .floating-whatsapp {

        width: 55px;

        height: 55px;

        right: 15px;

    }



    .success-toast {

        width: 90%;

        right: -100%;

    }

    .success-toast.show {

        right: 5%;

    }

}

@media(max-width:576px) {

    .contact-hero {

        padding: 60px 0;

    }

    .contact-hero h1 {

        font-size: 2rem;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .hero-buttons .btn {

        width: 100%;

    }

    .section-title {

        margin-bottom: 40px;

    }

    .cta-box {

        padding: 40px 25px;

    }

    .cta-box h2 {

        font-size: 1.7rem;

    }

}

/* ==========================================================
   MAP LAYOUT PATCH (ADD TO THE BOTTOM OF YOUR FILE)
========================================================== */

/* Fix section titles when placed directly inside columns */
.col-12 .section-title h2,
.col-md-6 .section-title h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* Optional: Adds the clean under-line accent matching your branding */
.col-12 .section-title h2::after,
.col-md-6 .section-title h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--primary);
    margin-top: 8px;
}

/* Ensure the iframe scales to the full 50% width of the row */
.map-card iframe {
    width: 100%;
    height: 450px;
    border: 0;
    display: block;
}

/* Responsive adjustment for tablets/mobile viewports */
@media(max-width: 768px) {
    .map-card iframe {
        height: 350px;
    }
}

/* Hover lift effect for office card */
.office-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
}

/* Ensure all buttons on the contact page have white text color */
.btn,
.btn:hover,
.btn:focus {
    color: #ffffff !important;
}