/* ==========================================================================
   Contact Form Section
   ========================================================================== */

.contact-form-section {
    padding: 7.1875rem 0 5.625rem; /* 115px top, 90px bottom */
    background-color: var(--white);
}
.contact-form-section h2 {
    color: var(--deep-blue);
}
.contact-form-section h6 {
    color: var(--accent-blue);
}
.contact-form {
    /*  No specific styles here, let the form elements style themselves */
}

.form-group {
    margin-bottom: 1.5rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    color: var(--text-gray);
    transition: var(--transition-base);
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 5px rgba(var(--accent-blue), 0.5);
}

.contact-form textarea {
    height: 150px; /* Adjust as needed */
    resize: vertical; /* Allow vertical resizing */
}

/* ==========================================================================
   Contact Info Section
   ========================================================================== */

 .contact-info-section {
     padding: 4rem 0;
     background-color: var(--primary-blue);
     color: var(--white);
}
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 2rem;
    text-align: center;
}

.contact-info-item {
    /*  No specific styles - let content flow */
}

.contact-info-item i {
    font-size: 2.5rem;  /*  Larger icon */
    color: var(--accent-blue);
    margin-bottom: 1rem;
    display: block; /* Make icon a block element */
}

.contact-info-item h5 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--white);
}

.contact-info-item span {
    color: #ddd; /* Lighter text color */
    display: block;
}

/* Responsive adjustments */

@media (max-width: 767.98px) {
    .contact-info-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
    }
}

/* Inside your enhanced-styles.css, within the .contact-form-section styles: */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns of equal width */
    gap: 1rem; /* Spacing between grid items (both rows and columns) */
}

/* Keep existing styles for .form-group, input, and textarea */

@media (max-width: 767.98px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}