@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    background-color: #f7f7f7;
    /* Soft off-white background */
    color: #333;
    padding: 0;
    word-wrap: break-word;
}

.page-wrapper {
    max-height: 100vh;
    overflow-y: scroll;
    border: 1px solid gray;
    /* scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(3rem);
    scroll-snap-type: y mandatory;
    */
}

header,
section {
    scroll-snap-align: start !important;
}

h1,
h2 {
    font-family: "DM Sans", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

hr {
    opacity: 0.2;
}

input,
textarea {
    font-family: 'DM Sans', sans-serif;
}

.container {
    max-width: 860px;
    margin: 0 auto;
}

/* Hero Section */
.hero {
    position: relative;
    background: linear-gradient(135deg, rgb(228 192 129 / 81%), rgb(160 160 226 / 80%)), url(assets/header.jpg);
    background: linear-gradient(135deg, rgb(228 192 129 / 90%), rgba(200, 200, 255, 0.8)), url(assets/header.jpg);
    /* background: linear-gradient(135deg, rgba(255, 235, 200, 0.902), rgba(200, 200, 255, 0.7)), url('assets/header.jpg'); */
    /* Soft fabric-like texture */
    background-size: cover;
    background-position: center;
    color: #333;
    text-align: center;
    padding: 6rem 2rem;
    /* border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px; */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Hero Content */
.hero-content h1 {
    font-size: 3.2rem;
    margin-bottom: 1rem;
    color: #1A1A1A;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 560px) {
    .hero-content h1 {
        font-size: 2.2rem;
    }
}

@media (max-width: 720px) {
    .hero {
        padding: 2.4rem;
    }

    .hero-content h1 {
        line-height: 1.2;
    }
}

.hero-content p {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
    color: #333;
    text-shadow: 1px 0px 10px rgba(255, 235, 200, .8);
}

.hero-content img {
    max-width: 4rem;
}

/* CTA Buttons */
.cta-buttons .btn {
    display: inline-block;
    padding: 1rem 2rem;
    margin: 1rem;
    border-radius: 50px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 700;
    background-color: #e2572c;
    /* Vibrant warm orange */
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: none;
}

.prefered-technologies {
    list-style: none;
    list-style-type: none;
}

.prefered-technologies li {
    display: inline;
    filter: saturate(0);

    img {
        width: 2rem;
        margin: 1rem 1rem;
        opacity: .9;
    }
}

.btn.primary:hover {
    background-color: #FF5722;
    /* Darker orange */
}

/* About Section */
.about {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    /* border-top-left-radius: 12px;
    border-top-right-radius: 12px; */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.about h2 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    color: #333;
}

.about p {
    font-size: 1rem;
    max-width: 750px;
    margin: 0 auto;
    color: #333;
}

/* Profile Picture */
.profile-picture {
    margin: 0 auto 2rem;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Services Section */
.services {
    padding: 4rem 2rem;
    background-color: rgba(240, 248, 255, 0.6);
    /* Soft background */
}

.services h2 {
    font-size: 2.5rem;
    text-align: center;
    color: #2A3E50;
    /* Modern and soft heading color */
    margin-bottom: 2rem;
}

.services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
    /* Responsive grid */
    gap: 2rem;
    /* Space between items */
    align-items: stretch;
}

.service-card {
    background: linear-gradient(135deg, #f5f7fa, rgba(90, 197, 243, 0.2));
    /* Vibrant gradient */
    padding: 2rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.service-card h3 {
    font-size: 1.5rem;
    color: #2A3E50;
    margin-bottom: 1rem;
}

.service-card p {
    font-size: 1rem;
    color: #4A4A4A;
}

/* Mobile Layout */
@media (max-width: 960px) {
    .services-container {
        grid-template-columns: 2fr;
        /* Stack items vertically */
    }
}

@media (max-width: 768px) {
    .services-container {
        grid-template-columns: 1fr;
        /* Stack items vertically */
    }
}

/* Contact Section */
.contact {
    padding: 4rem 2rem;
    background: linear-gradient(135deg, rgba(251, 238, 215, 0.7), rgba(212, 212, 253, 0.5));
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    /* Subtle border */
    text-align: center;
}

.contact h2 {
    font-size: 2.5rem;
    color: #2A3E50;
    /* Modern, soft text color */
    margin-bottom: 1.5rem;
}

.contact p {
    font-size: 1.2rem;
    color: #4A4A4A;
    /* Subtle and readable */
    margin-bottom: 2rem;
}

/* Contact Form */
.contact form {
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(255, 235, 200, 0.7), rgba(200, 200, 255, 0.5));
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for softness */
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* For a clean and polished edge */
}

.contact form input,
.contact form textarea {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    font-size: 1rem;
    background: #f9fafc;
    /* Soft inner background for inputs */
}

.contact form input:focus,
.contact form textarea:focus {
    outline: none;
    border-color: #3B82F6;
    /* Highlight with blue */
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}

/* .contact form button {
    color: #ffffff;
    background-color: #FF7043;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
    border: none;
} */


.contact form button:focus {
    outline: 2px solid #1e40af;
    /* Accessibility focus */
}


/* Footer */
.footer {
    text-align: center;
    padding: 1rem;
    background: #333;
    color: white;
}

.footer p {
    margin: 0;
    font-size: 1rem;
}

/* WCAG Focus Styles */
a:focus,
.btn:focus,
input:focus,
button:focus {
    outline: 3px solid #e45b2d;
    outline-offset: 2px;
}


/* Clients Section */
.clients {
    padding: 4rem 2rem;
    background-color: rgba(240, 248, 255, 0.6);
    /* Soft fabric-like transparent background */
    text-align: center;
}

.clients h2 {
    font-size: 2.5rem;
    color: #2A3E50;
    /* Modern and soft heading color */
    margin-bottom: 1rem;
}

.clients p {
    /* font-size: 1.2rem; */
    color: #4A4A4A;
    margin-bottom: 2rem;
}

.clients-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    align-items: center;
}

.client {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    padding: .5rem;
    border-radius: 1rem;
    background-color: white;
}

.client img {
    max-width: 100%;
    max-height: 80px;
    /* Maintain a consistent size for logos */
    /*filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));*/
    transition: filter 0.3s ease-in-out;
}

/*
.client:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
}*/

/* Updated Secondary Button */
.cta-buttons .btn-secondary {
    display: inline-block;
    padding: 1rem 2rem;
    margin: 1rem;
    border-radius: 50px;
    text-decoration: none;
    color: #ffffff;
    /* White text for better contrast */
    font-weight: 700;
    background-color: #1C70C1;
    /* Darker blue for secondary button */
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: none;
}

.cta-buttons .btn-secondary:hover {
    background-color: #1565C0;
    /* Even darker blue for hover effect */
    color: #fff;
    /* Keep the text white on hover */
}

/* Outline Variant for Secondary Button */
.cta-buttons .btn-secondary.outline {
    background-color: transparent;
    color: #1C70C1;
    border: 2px solid #1C70C1;
    box-shadow: none;
}

.cta-buttons .btn-secondary.outline:hover {
    background-color: #1C70C1;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn.secondary {
    background-color: #3B82F6;
}

.btn {
    align-content: center;
}

.btn img {
    width: 1.5rem;
    height: auto;
}


/* Container for all logos */
.clients-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Space between the client boxes */
    justify-content: center;
    /* Center-align the logos */
    padding: 20px;
}

/* Individual client logo box */
.client {
    border: 2px solid #ddd;
    /* Light gray border */
    border-radius: 10px;
    /* Rounded corners */
    padding: 10px;
    /* Space inside the box */
    background-color: #f9f9f9;
    /* Subtle background color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Shadow for depth */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    /* Fixed width for uniform size */
    height: 100px;
    /* Fixed height for uniform size */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth hover effects */
}

/* Hover effect for each logo box */
.client:hover {
    transform: scale(1.05);
    /* Slight zoom effect */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    /* Enhanced shadow on hover */
}

/* Styling the logo images */
.client img {
    max-width: 100%;
    /* Ensure logo fits inside box */
    max-height: 100%;
    /* Maintain aspect ratio */
    object-fit: contain;
    /* Prevent distortion or cropping */
}


/* Primary Button Styles */
.fabric-button {
    display: inline-block;
    width: 100%;
    padding: 12px 24px;
    /* Adjust padding for button size */
    font-size: 16px;
    /* Base font size */
    font-weight: 600;
    /* Bold text */
    color: #ffffff;
    /* White text */
    background-color: #e2725b;
    /* background: linear-gradient(96.51deg, rgb(255, 71, 143) 0%, rgb(255, 152, 0) 99.87%); */
    /* Terra cotta base color */
    border: none;
    /* Remove default border */
    border-radius: 6px;
    /* Rounded corners */
    cursor: pointer;
    /* Pointer cursor */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    transition: all 0.3s ease;
    /* Smooth transition for hover effects */
}

/* Hover Effect */
.fabric-button:hover {
    background-color: #c7614e;
    /* Slightly darker terra cotta */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    /* Deeper shadow */
}

/* Active (Pressed) Effect */
.fabric-button:active {
    background-color: #b05144;
    /* Even darker terra cotta */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    /* Reduced shadow */
    transform: translateY(2px);
    /* Subtle "pressed" effect */
}

.fabric-button:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(226, 114, 91, 0.5);
}

.fabric-button:disabled {
    background-color: #f4e4e1;
    color: #a89c99;
    cursor: not-allowed;
    box-shadow: none;
}

.hidden {
    display: none;
}

.map-section {
    margin-top: 50px;
}

#map {
    border: 1px solid #ccc;
    height: 400px;
    width: 100%;
}