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

.others{
    margin-left: 93px;
}


.phone-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.phone-field label { /* For text above input line */
    display: block;
    font-size: 0.85rem;
    color: #aaa; /* Light grey label text */
    margin-bottom: 8px;
    font-weight: 500;
}


.phone-input-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.country-code {
    width: 25% !important;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 8px 0; /* Padding below text */
    font-size: 1rem;
    background-color: transparent;
    color: #333;
    transition: border-color 0.3s ease;
}

.phone-number {
    width: 75% !important;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 8px 0; /* Padding below text */
    font-size: 1rem;
    background-color: transparent;
    color: #333;
    transition: border-color 0.3s ease;
}

.phone-field input:focus{
    outline: none;
    border-bottom-color: #2D88C3; /* Highlight color */
}



.contact-form-section {
    padding: 60px 0;
    background-color: #f8f9fa; /* Light grey background for the page area */
}

/* The main box containing both columns */
.contact-box {
    display: flex;
    background-color: #ffffff; /* White background for the form side */
    border: 4px solid #FF9300; /* Orange border */
    border-radius: 15px;      /* Rounded corners for the whole box */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;         /* Important for border-radius clipping */
    max-width: 1100px;        /* Limit overall width */
    margin: 0 auto;           /* Center the box */
    padding: 10px;
}

/* Left Blue Column */
.contact-info-column {
    flex-basis: 40%; /* Adjust width percentage */
    background-color: #2D88C3; /* Blue background */
    color: #ffffff;
    padding: 40px;
    position: relative; /* For absolute positioning of circles */
    display: flex;
    flex-direction: column; /* Stack content and social icons */
    justify-content: space-between; /* Push social icons down */
    border-radius: 15px 0 0 15px; /* Round top-left and bottom-left */
    overflow: hidden; /* Keep circles contained */
}

.contact-info-column h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.info-subtitle {
    font-size: 0.95rem;
    margin-bottom: 35px;
    color: #e0e0e0;
}

.contact-details-list {
    list-style: none;
    padding: 0;
    margin-top: 100px;
}

.contact-detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 35px;
    font-size: 0.95rem;
}

.contact-detail-item .contact-icon {
    width: 20px; /* Adjust icon size */
    height: auto;
    margin-right: 15px;
    flex-shrink: 0; /* Prevent icon shrinking */
}

.contact-detail-item a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
    display: inline-block; /* Optional but useful for layout control */
    word-break: break-word; /* Allow breaking in long strings */
    overflow-wrap: break-word; /* Ensure proper wrapping */
    max-width: 100%; /* Prevent it from overflowing */
    white-space: normal; /* Allow it to wrap */
}
.contact-detail-item a:hover {
    opacity: 0.8;
}

.social-icons {
    display: flex;
    gap: 15px; /* Space between icons */
    margin-top: 30px; /* Space above icons */
}

.social-icons a {
    display: inline-block;
    width: 36px;  /* Circle size */
    height: 36px; /* Circle size */
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15); /* Optional: slight background */
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-icons a img {
    width: 18px; /* Icon size inside circle */
    height: auto;
    display: block;
}

.social-icons a:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

#message::placeholder {
    font-family: 'Montserrat', sans-serif; /* Or any font you prefer */
}


/* Decorative Circles */
.circle {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08); /* Very subtle white */
    z-index: 0; /* Behind content */
    pointer-events: none; /* Non-interactive */
}
.circle-1 {
    width: 200px;
    height: 200px;
    bottom: -60px;
    right: -60px;
}
.circle-2 {
    width: 120px;
    height: 120px;
    bottom: 50px;
    right: 70px;
    /* opacity: 0.8; */
}


/* Right Form Column */
.contact-form-column {
    flex-basis: 60%; /* Adjust width percentage */
    padding: 40px;
    background-color: #ffffff; /* Ensure white background */
}

.form-row {
    display: flex;
    gap: 30px; /* Space between fields in a row */
    margin-bottom: 25px;
}

.form-group {
    flex: 1; /* Make groups share space equally in a row */
    margin-bottom: 25px; /* Default bottom margin */
}
.form-row .form-group {
    margin-bottom: 0; /* Remove bottom margin when in a row */
}

.form-group label { /* For text above input line */
    display: block;
    font-size: 0.85rem;
    color: #aaa; /* Light grey label text */
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 8px 0; /* Padding below text */
    font-size: 1rem;
    background-color: transparent;
    color: #333;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: #2D88C3; /* Highlight color */
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

/* Placeholder style */
.form-group ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ccc;
  opacity: 1; /* Firefox */
}
.form-group :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ccc;
}
.form-group ::-ms-input-placeholder { /* Microsoft Edge */
  color: #ccc;
}


/* Radio Buttons */
.radio-group {
    margin-bottom: 30px; /* More space after radios */
}
.radio-title {
    font-size: 0.95rem;
    color: #555; /* Darker text for title */
    margin-bottom: 15px;
    font-weight: 600;
}
.radio-group .radio-label {
    display: inline-flex; /* Align items horizontally */
    align-items: center;
    margin-right: 25px; /* Space between radio options */
    cursor: pointer;
    font-size: 0.95rem;
    color: #555;
}

.radio-group input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.custom-radio {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    transition: border-color 0.3s ease;
}

.radio-label input[type="radio"]:checked + .custom-radio {
    border-color: #2D88C3; /* Blue border when checked */
}

.custom-radio::after { /* The inner dot */
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: #2D88C3; /* Blue dot */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Hidden by default */
    transition: transform 0.2s ease;
}

.radio-label input[type="radio"]:checked + .custom-radio::after {
    transform: translate(-50%, -50%) scale(1); /* Show dot when checked */
}


/* Submit Button */
.form-submit {
    text-align: right; /* Align button to the right */
    margin-top: 15px;
}

.submit-button {
    background-color: #f0ad4e; /* Orange/Gold */
    color: #ffffff;
    border: none;
    padding: 12px 35px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.submit-button:hover {
    background-color: #ec971f; /* Darker orange */
    box-shadow: 0 4px 15px rgba(240, 173, 78, 0.4);
}

/* --- Responsive Adjustments --- */

@media (max-width: 992px) {
    .contact-box {
        flex-direction: column; /* Stack columns */
        max-width: 800px; /* Adjust max-width for stacked view */
        border-radius: 15px; /* Keep overall rounding */
    }

    .contact-info-column {
        flex-basis: auto; /* Reset basis */
        border-radius: 15px 15px 0 0; /* Round top corners only */
        padding: 30px;
    }

    .contact-form-column {
        flex-basis: auto; /* Reset basis */
        border-radius: 0 0 15px 15px; /* Round bottom corners only */
         padding: 30px;
    }

    .form-row {
        flex-direction: column; /* Stack fields within a row */
        gap: 0; /* Remove gap when stacked */
        margin-bottom: 0;
    }
    .form-row .form-group {
         margin-bottom: 25px; /* Add margin back to stacked groups */
    }
     /* Ensure last group in stacked row has margin */
     .form-row .form-group:last-child {
         margin-bottom: 25px;
     }

    .form-submit {
        text-align: center; /* Center button on smaller screens */
    }
     .circle-1 { width: 150px; height: 150px; bottom: -50px; right: -50px; }
     .circle-2 { width: 100px; height: 100px; bottom: 20px; right: 60px; }
     
     .contact-details-list {
        margin-top: 60px;
    }
    
    .others{
        margin-left: 0;
    }

}

@media (max-width: 768px) {
    .contact-details-list {
        margin-top: 20px;
    }
    
    .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group textarea {
         padding: 0;
    }
    
    .social-icons {
        margin-top: 10px;
    }
}
@media (max-width: 480px) {
    .contact-form-section {
        padding: 40px 0;
    }
     .contact-info-column, .contact-form-column {
        padding: 25px;
    }
     .contact-info-column h3 { font-size: 1.5rem; }
     .info-subtitle { font-size: 0.9rem; margin-bottom: 25px; }
     .contact-detail-item { font-size: 0.9rem; margin-bottom: 20px; }
     .contact-detail-item .contact-icon { width: 18px; margin-right: 12px; }

     .social-icons a { width: 32px; height: 32px; }
     .social-icons a img { width: 16px; }

     .form-group label { font-size: 0.8rem; }
     .form-group input, .form-group textarea { font-size: 0.95rem; }
     .radio-group .radio-label { font-size: 0.9rem; margin-right: 15px; }
     .submit-button { padding: 10px 25px; font-size: 0.95rem; }

      .circle-1 { width: 120px; height: 120px; bottom: -40px; right: -40px; }
      .circle-2 { display: none; } /* Hide smaller circle */
}

@media (max-width: 390px) {
    
    	.g-recaptcha {
        width: 100% !important; /* Take full width of container */
        max-width: 390px !important;/* Limit max width on very small screens - adjust as needed */
        transform: scale(0.75) !important; /* Scale down significantly for very narrow screens - adjust as needed */
        -webkit-transform: scale(0.75) !important; /* For Safari */
        -ms-transform: scale(0.75) !important; /* For IE */
        transform-origin: 0 0 !important;
        -webkit-transform-origin: 0 0 !important;
        -ms-transform-origin: 0 0 !important;
    }
}

/* Slower + Smoother transitions for outer columns */
.contact-form-section .contact-info-column,
.contact-form-section .contact-form-column {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease, transform 1s ease;
}

.contact-form-section .contact-form-column {
    transform: translateX(50px);
}

/* Smooth in-content animation */
.contact-form-section .info-content h3,
.contact-form-section .info-content .info-subtitle,
.contact-form-section .contact-details-list li,
.contact-form-section .social-icons a,
.contact-form-section .circle,
.contact-form-section .contact-form-column form > .form-row,
.contact-form-section .contact-form-column form > .form-group,
.contact-form-section .contact-form-column form > .form-submit {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Specific scaling for circle elements */
.contact-form-section .circle {
    transform: scale(0) translateY(20px);
}

/* === VISIBLE STATE === */
.contact-form-section.is-visible .contact-info-column,
.contact-form-section.is-visible .contact-form-column {
    opacity: 1;
    transform: translateX(0);
}

.contact-form-section.is-visible .contact-form-column {
    transition-delay: 0.2s; /* Slightly increased delay for smoother entry */
}

.contact-form-section.is-visible .info-content h3,
.contact-form-section.is-visible .info-content .info-subtitle,
.contact-form-section.is-visible .contact-details-list li,
.contact-form-section.is-visible .social-icons a,
.contact-form-section.is-visible .circle,
.contact-form-section.is-visible .contact-form-column form > .form-row,
.contact-form-section.is-visible .contact-form-column form > .form-group,
.contact-form-section.is-visible .contact-form-column form > .form-submit {
    opacity: 1;
    transform: translateY(0);
}

.contact-form-section.is-visible .circle {
    transform: translateY(0) scale(1);
}

/* === STAGGERED DELAYS (SLOWER) === */

/* LEFT Column */
.contact-form-section.is-visible .info-content h3 { transition-delay: 0.4s; }
.contact-form-section.is-visible .info-content .info-subtitle { transition-delay: 0.5s; }
.contact-form-section.is-visible .contact-details-list li:nth-child(1) { transition-delay: 0.6s; }
.contact-form-section.is-visible .contact-details-list li:nth-child(2) { transition-delay: 0.7s; }
.contact-form-section.is-visible .contact-details-list li:nth-child(3) { transition-delay: 0.8s; }
.contact-form-section.is-visible .social-icons a:nth-child(1) { transition-delay: 0.9s; }
.contact-form-section.is-visible .social-icons a:nth-child(2) { transition-delay: 1.0s; }
.contact-form-section.is-visible .circle-1 { transition-delay: 1s; }
.contact-form-section.is-visible .circle-2 { transition-delay: 1.2s; }

/* RIGHT Column (Form) */
.contact-form-section.is-visible .form-row:nth-of-type(1) { transition-delay: 0.6s; }
.contact-form-section.is-visible .form-row:nth-of-type(2) { transition-delay: 0.7s; }
.contact-form-section.is-visible .radio-group { transition-delay: 0.8s; }
.contact-form-section.is-visible .form-group:has(#message) { transition-delay: 0.9s; }
.contact-form-section.is-visible .form-submit { transition-delay: 1s; }