/* Reset and Base Styles */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Sora', Arial, Helvetica, sans-serif;

    line-height: 1.6;

    color:#000000;

    background-color: #ffffff;

}







.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Header Styles */

.header {

    background-color: #ffffff;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    position: sticky;

    top: 0;

    z-index: 1000;

}



.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;

    max-width: 1200px;

    margin: 0 auto;

}



.logo img {

    height: 40px;

}



.main-menu ul {

    display: flex;

    list-style: none;

    gap: 30px;

}



.main-menu a {

    font-weight: 500;

    padding: 10px;

}



.main-menu a:hover,

.main-menu a.active {

    color: #f14f44;

}



.header-icons {

    display: flex;

    align-items: center;

    gap: 20px;

}



.btn {

    background: #1f1f1f;;

    color: #ffffff;

    padding: 12px 24px;

    border-radius: 5px;

    font-weight: 500;

    transition: transform 0.3s ease;

}



.btn:hover {

    transform: translateY(-2px);

}



/* Page Title Section */

.page-title {

    background-color: #1f1f1f;

    color: #f0f2f4;

    padding: 60px 10px;

    text-align: center;

}



.breadcrumbs {

    margin-top: 15px;

    color: #c5c5c5;

}



.breadcrumbs .delimiter {

    margin: 0 10px;

}



/* Contact Section */

.contact-section {

    padding: 80px 0;

}



.contact-section .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

}



/* Remove invalid 'spacing' property and fix contact-info */

.contact-info {

    gap: 20px; /* Replace invalid 'spacing' property */

    padding: 20px;

    display: flex;

    flex-wrap: wrap;

    position: relative;

    width: 100%;

}



.contact-info *,

.contact-info::after,

.contact-info::before {

    box-sizing: border-box;

}



.contact-info h2 {

    font-family: 'Sora', Arial, Helvetica, sans-serif;

    font-size: 60px;

    line-height: 1.16666em;

    letter-spacing: -0.05em;

    word-spacing: 0px;

    font-weight: 400;

    text-transform: none;

    font-style: normal;

    margin-bottom: 20px;

    color: #1f1f1f;

}

.contact-details {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-top: 30px;

    width: 100%;

}



.contact-item p {

    color: #666;

    line-height: 1.6;

}



.contact-item .custom-link {

    color: #666;

    transition: color 0.3s ease;

}



.contact-item .custom-link:hover {

    color: #f14f44;

}



.social-icons a {

    margin-right: 10px; /* Space between social icons */

}



.contact-item .social-link {

    color: #666;

    transition: color 0.3s ease;

}



.contact-item .social-link:hover {

    color: #f14f44; /* Hover effect for social links */

}



.social-icons a i {

    font-size: 20px; /* Size of social media icons */

}

/* Remove duplicate media queries and combine them */

@media (max-width: 768px) {

    .contact-details {

        display: flex;

        flex-wrap: wrap;

        gap: 15px;

    }

    

    .contact-item {

        flex: 0 0 calc(50% - 8px);

        padding: 15px;

        font-size: 14px;

    }



    .contact-item h6 {

        font-size: 16px;

    }

    

    .main-menu {

        display: none;

    }

    

    .header-icons {

        gap: 10px;

    }

    

    .footer-links {

        grid-template-columns: 1fr;

    }

    

    .footer-bottom {

        flex-direction: column;

        text-align: center;

        gap: 15px;

    }

}

/* Additional breakpoint for very small screens */

@media (max-width: 480px) {

    .contact-item {

        flex: 0 0 100%;  /* Full width on very small screens */

    }

}



.contact-item {

    background: #f8f9fa;

    padding: 25px;

    border-radius: 10px;

    transition: transform 0.3s ease;

    height: 100%;

    display: flex;

    flex-direction: column;

    min-height: 160px;

}



.contact-item:hover {

    transform: translateY(-5px);

}



.contact-item h6 {

    font-size: 18px;

    color: #1f1f1f;

    font-weight: 600;

    margin: 0 0 15px 0;

}



.contact-item p {

    color: #666;

    line-height: 1.6;

    margin: 0;

}



.contact-item a {

    color: #666;

    text-decoration: none;

    transition: color 0.3s ease;

    display: block;

    margin-bottom: 8px;

}



.contact-item a:hover {

    color: #f14f44;

}



/* Social icons specific styling */

.social-icons {

    display: flex;

    gap: 12px;

    margin-top: auto;

    flex-wrap: wrap;

}



.social-icons a {

    margin: 0;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

}



.social-icons a:hover {

    background: #1f1f1f;

    color: #ffffff;

    transform: translateY(-3px);

}



/* Responsive Design */

@media (max-width: 768px) {

    .contact-details {

        gap: 15px;

    }

    

    .contact-item {

        padding: 20px;

        min-height: 140px;

    }

    

    .contact-item h6 {

        font-size: 16px;

        margin-bottom: 12px;

    }

}



@media (max-width: 480px) {

    .contact-details {

        grid-template-columns: 1fr;

    }

    

    .contact-item {

        padding: 15px;

        min-height: auto;

    }

}



/* Contact Form */



.contact-info {

    gap: 20px; /* Replace invalid 'spacing' property */

    padding: 20px;

    display: flex;

    flex-wrap: wrap;

    position: relative;

    width: 100%;

}



.contact-form {

       background: #f8f9fa;

    padding: 35px;

    border-radius: 20px;

    /* box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); */

    width: 100%;

}





.contact-form h4 {

    font-size: 30px;

    line-height: 1.3333em;

    letter-spacing: -0.03em;

    word-spacing: 0px;

    font-weight: 400;

    margin-bottom: 10px;

}



.contact-form .subtitle {

    color: #666;

    font-size: 15px;

    line-height: 1.6;

    margin-bottom: 30px;

}



.form-field {

    margin-bottom: 25px;

    position: relative;

}



.form-field:first-of-type {

    margin-top: 10px;

}



.form-field input,

.form-field textarea {

    width: 100%;

    padding: 15px 20px;

    background: #f8f9fa;

    border: none; /* Remove all borders */

    border-bottom: 1px solid #e0e0e0; /* Add only bottom border */

    border-radius: 0; /* Remove border radius */

    font-size: 15px;

    color: #1f1f1f;

    transition: all 0.3s ease;

}



.form-field textarea {

    height: 150px;

    resize: vertical;

    min-height: 120px;

    max-height: 250px;

}



/* Improve placeholder visibility against transparent background */

.form-field input::placeholder,

.form-field textarea::placeholder {

    color: #666666; /* Darker placeholder color for better visibility */

    font-size: 14px;

    transition: opacity 0.3s ease;

}





/* Required field indicator */

.form-field input:required:valid {

    border-color: #4CAF50;

}



.form-field input:required:invalid:not(:placeholder-shown) {

    border-color: #f14f44;

}



/* Submit button styles updated */

.submit-btn {

    width: 100%;

    padding: 18px;

    background: #000000;

    color: #ffffff;

    border: none;

    border-radius: 12px;

    font-size: 16px;

    font-weight: 500;

    cursor: pointer;

    transition: background-color 0.3s ease;

    margin-top: 10px;

}



.submit-btn span {

    display: inline-block;

    transition: transform 0.3s ease;

}



.submit-btn:hover {

    background: #f14f44;

}



.submit-btn:hover span {

    transform: translateX(-2px);

}

/* Map Section */

.map-section {

    height: 500px;

    width: 100%;

    padding: 40px;

}



.map-section iframe {

    width: 100%;

    height: 100%;

    border: none;

    border-radius: 20px;

    filter: grayscale(100%);

}

/* Footer */

.footer {

    background-color: #1f1f1f;

    color: #ffffff;

    padding: 60px 0 0;

}



.footer-content {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    display: grid;

    grid-template-columns: 1fr 2fr;

    gap: 50px;

}



.footer-logo img {

    height: 30px;

    margin-bottom: 20px;

}



.footer-links {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}



.footer-column h6 {

    font-size: 18px;

    margin-bottom: 20px;

}



.footer-column ul {

    list-style: none;

}



.footer-column ul li {

    margin-bottom: 10px;

}



.footer-column a:hover {

    color: #f14f44;

}



.footer-bottom {

    margin-top: 60px;

    padding: 20px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Responsive Design */

@media (max-width: 992px) {

    .contact-section .container {

        grid-template-columns: 1fr;

    }

    

    .contact-details {

        grid-template-columns: 1fr;

    }

    

    .footer-content {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 768px) {

    .main-menu {

        display: none; /* Add mobile menu functionality */

    }

    

    .header-icons {

        gap: 10px;

    }

    

    .footer-links {

        grid-template-columns: 1fr;

    }

    

    .footer-bottom {

        flex-direction: column;

        text-align: center;

        gap: 15px;

    }

}



/* Update container styles */

/* Remove duplicate contact-container styles and keep the most recent one */

.contact-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 80px 10px;

    display: grid;

    grid-template-columns: 60% 40%;

    gap: 20px;

    width: calc(100% - 20px);

}



/* Update contact details grid */

.contact-details {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-top: 30px;

    width: 100%;

}





/* Update form controls */

.form-control {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid rgba(0,0,0,0.1);

    border-radius: 5px;

    margin-bottom: 15px;

}



/* Enhanced responsive design */

@media (max-width: 1024px) {

    .contact-container {

        grid-template-columns: 55% 45%;

        gap: 15px;

    }

}



@media (max-width: 768px) {

    .contact-container {

        grid-template-columns: 1fr;

        padding: 40px 10px;

    }

    

    .contact-info {

        margin-bottom: 20px;

    }

    

    .contact-details {

        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    }

    

    .contact-form {

        padding: 20px;

    }

}



@media (max-width: 480px) {

    .contact-details {

        grid-template-columns: 1fr;

    }

    

    .contact-item {

        padding: 15px;

    }

    

    .form-control {

        padding: 10px;

    }

    

    h2 {

        font-size: 24px !important;

    }

}



/* Add consistent spacing to all sections */

.page-title {

    padding: 60px 10px;

}



.map-container {

    margin: 40px 10px;

    border-radius: 20px;

    overflow: hidden;

    height: 500px;

}



/* Improve form layout */

.form-group {

    margin-bottom: 15px;

    width: 100%;

}



/* Better button alignment */

.submit-btn {

    width: 100%;

    margin-top: 10px;

}



/* Improve contact item layout */

.contact-item {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

}





/* Ensure consistent border radius in responsive views */

@media (max-width: 768px) {

    .map-section {

        padding: 20px;

        height: 400px;

    }

    

    .map-container {

        height: 400px;

    }

}



/* Update form field classes */

/* Update form field classes with new name */

.contact-inbody-field input, 

.contact-inbody-field textarea {

    width: 100% !important; /* Added specificity */

    padding: 15px 20px !important;

    background: #f8f9fa !important;

    border: none !important;

    border-bottom: 1px solid #e0e0e0 !important;

    border-radius: 0 !important;

    font-size: 15px !important;

    color: #1f1f1f !important;

    transition: all 0.3s ease !important;

}









.contact-inbody-field input::placeholder,

.contact-inbody-field textarea::placeholder {

    color: #666;

    font-size: 14px;

}



.contact-inbody-field input:hover,

.contact-inbody-field textarea:hover,

.contact-inbody-field input:focus,

.contact-inbody-field textarea:focus {

    border-bottom-color: #1f1f1f;

    outline: none;

}



/* Update submit button class */

.inbody-submit-btn {

    width: 100%;

    padding: 18px;

    background: #000000;

    color: #ffffff;

    border: none;

    border-radius: 12px;

    font-size: 16px;

    font-weight: 500;

    cursor: pointer;

    transition: background-color 0.3s ease;

    margin-top: 10px;

}



.inbody-submit-btn:hover {

    background: #f14f44;

}



.inbody-submit-btn span {

    display: inline-block;

    transition: transform 0.3s ease;

}



.inbody-submit-btn:hover span {

    transform: translateX(5px);

}