/* Contact Form Container */
.contact-form {
    background-color: var(--Butterscotch-300); /* Light Butterscotch */
    padding: 30px;
    border-radius: 15px; /* Rounded corners */
    max-width: 100%;
    height: auto;
    margin: auto;
    box-shadow: none !important;
}

/* Form Input Fields */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border-radius: 4.8px;
    border: 1px solid var(--Grayscale-200, #D8D8D8);
    background: var(--Grayscale-50, #FDFCFC);
    font-size: var(--fs-headline);
    font-family: var(--font-poppins);
    font-weight: var(--fw-regular);
    color: var(--Grayscale-800);
    outline: none;
    transition: border-color 0.3s;
}
/* Placeholder Styling */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--Grayscale-400); /* Light gray */
    font-family: var(--font-poppins);
    font-size: var(--fs-headline);
    font-weight: var(--fw-regular);
    opacity: 1; /* Ensure full opacity */
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--Prussian-700); /* Darker Blue Border on Focus */
}

/* Styling for disabled input fields and textareas */
#contactForm input:read-only,
#contactForm textarea:read-only {
  background-color: #e9ecef !important; /* Light grey background */
  color: #6c757d !important; /* Dark grey text */
  border-color: #ced4da !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

/* Separate styling for disabled button */
#submitButton:disabled {
  background-color: #f5b7b1 !important; /* Light Red */
  border-color: #f5b7b1 !important;
  color: white !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}


/* Labels */
.contact-form label {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--Prussian-900, #192B46);
    font-family: var(--font-poppins);
    display: block;
    margin-bottom: 5px;
}

/* Textarea */
.contact-form textarea {
    resize: none;
    height: 150px;
}

/* Submit Button */
.contact-form button {
    background-color: var(--Sienna-400); /* Red Button */
    color: var(--Grayscale-50, #FDFCFC);;
    font-size: var( --fs-title-3);
    font-weight: var(--fw-semibold);
    font-family: var(--font-roboto);
    border: none;
    padding: 12px;
    width: 100%;
    border-radius: 7px;
    cursor: pointer; 
    transition: background-color 0.3s;
}

.contact-form button:hover {
    background-color: var(--Sienna-500); /* Darker Red on Hover */
}

/* Align button properly */
.form-button {
    margin-top: 10px;
}

/* Contact Icon Styling */
.contact-icon {
  font-size: 2rem; /* Set icon size to 1rem */
  color: var(--Marian-900); /* Use brand color */
}

.bi-envelope.contact-icon {
  text-decoration: none;
}

.contact-email-container a {
  text-decoration: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-form {
        padding: 20px;
    }
}

/* Form Message */
#formMessage {
    display: none;
    font-family: var(--font-roboto);
}

#formMessage.text-primary {
    color: var(--Marian-700);
}

#formMessage.text-danger {
    color: var(--Sienna-600);
}

.side-image{
    width: 250px;
    height: 330px;
    object-fit: cover;
    margin-left: -17px;
    margin-top: 10px;
    margin-bottom: -1px
}
.social-text, .email-text{
    color: var(--Grayscale-700);
    font-family: var(--font-poppins);
    font-size: var(--fs-title-3);
    font-style: normal;
    font-weight: var(--fw-semibold);
}

.contact-email {
    color: var(--Grayscale-700);
    font-family: var(--font-roboto);
    font-size: var(--fs-title-3);
    font-style: normal;
    font-weight: var(--fw-regular);
}

.contact-email-container {
  display: flex !important;
  align-items: center !important; 
  gap: 8px; 
}

/* LinkedIn Icon Styling */
.bi-linkedin.contact-icon {
  color: #0A66C2; /* LinkedIn brand blue color */
}

.bi-linkedin.contact-icon:hover {
  color: #005A8C; /* Darker blue on hover */
}

/* Side description styling using CSS variables */
.side-description {
  color: var(--Grayscale-800);
  font-family: var(--font-roboto);
  font-size: var(--fs-headline); /* 18px */
  font-style: normal;
  font-weight: var(--fw-regular);
  line-height: 140%;
}