/* =====================================================
   CONTACT FORM PAGE / SECTION
   ===================================================== */
.modern-contact-card {
    width: 100%;
    max-width: 1000px; 
    margin: 0 auto;
    background: #ffffff;
    color: #111111;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 35px 50px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

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

.modern-contact-heading {

    margin-bottom: 35px;
}


.contact-small-title {

    display: inline-block;

    color: #ffb400;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 8px;
}


.modern-contact-heading h2 {

    margin: 0 0 10px;

    color: #111111;

    font-size: 34px;

    font-weight: 800;
}


.modern-contact-heading p {

    margin: 0;

    color: #6f6f6f;

    font-size: 16px;

    line-height: 1.6;
}


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

.modern-contact-form {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


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

.contact-form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.contact-form-group label {

    color: #111111;

    font-size: 15px;

    font-weight: 700;
}


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

   .contact-form-group input,
   .contact-form-group textarea {
       width: 100%;
       border: 1px solid #cfd6df;
       border-radius: 8px;
       background: #ffffff;
       color: #222222;
       padding: 10px 15px; 
       font-size: 14px; 
       font-family: inherit;
       outline: none;
       transition: border-color 0.25s ease, box-shadow 0.25s ease;
   }

   .contact-form-group textarea {
       min-height: 100px; 
       resize: vertical;
   }

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

    color: #999999;
}


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

    border-color: #ffb400;

    box-shadow:
        0 0 0 3px
        rgba(255, 180, 0, 0.14);
}

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

   .modern-send-btn {
       width: 100%;
       border: none;
       border-radius: 8px;
       background: #ffb400;
       color: #000000;
       padding: 12px; 
       font-size: 15px;
       font-weight: 800;
       cursor: pointer;
       transition: all 0.3s ease;
   }

.modern-send-btn:hover {

    background: #000000;

    color: #ffffff;

    transform: translateY(-2px);
}


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

.modern-form-message {

    display: none;

    margin-top: 5px;

    text-align: center;

    font-weight: 700;
}


/* =====================================================
   HOME PAGE CONTACT SECTION
   ===================================================== */

.contact-section {

    background: #f5f6f8;

    padding: 90px 20px;
}


.contact-container {

    max-width: 1000px;

    margin: 0 auto;
}


/* =====================================================
   SEPARATE CONTACT PAGE
   ===================================================== */

.contact-page-body {

    background: #f5f6f8;

    color: #111111;
}


.standalone-contact-page {

    min-height: 100vh;

    background: #f5f6f8;

    padding:
        115px
        20px
        70px;
}


.standalone-contact-container {
    max-width: 1000px; 
    margin: 0 auto;
}


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

@media screen and (max-width: 768px) {

    .modern-contact-card {

        padding:
            30px
            20px;
    }


    .modern-contact-heading h2 {

        font-size: 28px;
    }


    .modern-contact-heading p {

        font-size: 14px;
    }


    .contact-section {

        padding:
            60px
            15px;
    }


    .standalone-contact-page {

        padding:
            110px
            15px
            50px;
    }

}

/* =====================================================
   SUCCESS TOAST
   Default = HIDDEN
   ===================================================== */

.toast-box {

    position: fixed;

    top: 110px;
    right: 25px;

    width: 340px;

    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding: 18px 20px;

    background: #111111;

    color: #ffffff;

    border-radius: 10px;

    border-left: 5px solid #00d26a;

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

    z-index: 99999;


    /* IMPORTANT - DEFAULT HIDDEN */

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateX(120%);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0.35s ease;
}


/* =====================================================
   JS "show" CLASS ADD KAREGA TAB DIKHEGA
   ===================================================== */

.toast-box.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateX(0);
}


/* GREEN ICON */

.toast-icon {

    color: #00e676;

    font-size: 28px;

    margin-top: 2px;
}


/* TEXT */

.toast-text h4 {

    margin: 0 0 6px;

    color: #ffffff;

    font-size: 17px;
}


.toast-text p {

    margin: 0;

    color: #cccccc;

    font-size: 13px;

    line-height: 1.5;
}


/* MOBILE */

@media screen and (max-width: 600px) {

    .toast-box {

        top: 90px;

        left: 15px;
        right: 15px;

        width: auto;

        transform: translateY(-30px);
    }


    .toast-box.show {

        transform: translateY(0);
    }

}


/* =====================================================
   MAP & INFO BOX SECTION
   ===================================================== */
.map-info-container {
    max-width: 1000px;
    margin: 50px auto 0;
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e6e6e6;
}

/* Left Map Box */
.map-box {
    flex: 1;
    min-height: 350px;
}

.map-box iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* Right Info Box */
.info-box {
    flex: 1;
    padding: 40px;
    background: #fdfdfd;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-box h3 {
    font-size: 26px;
    color: #111111;
    margin: 0 0 5px 0;
    font-weight: 800;
}

.hq-location {
    color: #777777;
    font-size: 15px;
    margin-bottom: 25px;
    font-weight: 500;
}

.hq-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hq-details li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 15px;
    color: #333333;
    line-height: 1.5;
}

.hq-details li i {
    color: #ffb400;
    font-size: 18px;
    min-width: 20px;
    text-align: center;
    margin-top: 2px;
}

/* Mobile Responsive: Upar Map, Niche Info Box */
@media screen and (max-width: 768px) {
	/* =====================================================
	   MAP & INFO BOX SECTION (ALAG-ALAG BOXES)
	   ===================================================== */
	.map-info-container {
	    max-width: 1000px;
	    margin: 50px auto 0;
	    display: flex;
	    gap: 30px; /* Dono boxes ke beech ka naya gap */
	    /* Pehle ka background, border aur shadow yahan se hata diya hai */
	}
	/* Left Map Box - Ab ye alag box banega */
	.map-box {
	    flex: 1;
	    min-height: 400px;
	    border-radius: 12px; /* Naya round corner */
	    overflow: hidden;
	    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Naya shadow */
	    border: 1px solid #e6e6e6; /* Nayi border */
	}

	.map-box iframe {
	    width: 100%;
	    height: 100%;
	    display: block;
	}

	/* Right Info Box - Ab ye alag box banega */
	.info-box {
	    flex: 1;
	    padding: 40px;
	    background: #ffffff; /* Iska apna background */
	    border-radius: 12px; /* Naya round corner */
	    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Naya shadow */
	    border: 1px solid #e6e6e6; /* Nayi border */
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}
}


/* =====================================================
   FORM ROW LAYOUT (SIDE-BY-SIDE)
   ===================================================== */
.form-row {
    display: flex;
    gap: 15px; /* Dono fields ke beech ki jagah */
    width: 100%;
}

.form-row .contact-form-group {
    flex: 1; /* Dono aadhi-aadhi (50%-50%) jagah lenge */
}

/* Mobile screen par wapas ek ke niche ek dikhane ke liye */
/* Mobile Responsive: Upar Map, Niche Info Box alag-alag */
@media screen and (max-width: 768px) {
    .map-info-container {
        flex-direction: column;
        margin: 40px 15px 0;
        gap: 20px; /* Mobile par boxes ke beech ka vertical gap */
    }
    .map-box {
        min-height: 250px;
    }
    .info-box {
        padding: 30px 20px;
    }
}
}