html {
    scroll-behavior: smooth;
}
body{
    padding-top: 30px;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}
.theme{
    color: #975c35;
}
.bg-theme{
    background-color: #975c35;
}
.hero-text{
    margin-top: 150px !important; 
}
.img-hero{
    width: 500px !important;
}
.bigger{
    font-size: 58px;
}
.big-title{
    font-size: 55px;
    margin-top: 40px;
    position: relative;
}

.section-heading {
    padding-bottom: 5px;
    position: relative;
}

.section-heading h2::after {
    content: "";
    height: 3px;
    background: #975c35;
    display: inline-block;
    width: 120px;
}
.about-title{
    padding: 0 !important;
    margin: 0 !important;
}
.about-me-underline{
    text-decoration: underline;
}
.material-icons.icons{
    font-size: 3rem;
}
.btn-theme{
    background-color: #975c35;
    color: white;
}
.btn-theme:hover{
    color: white;
    background-color: #975c35;
    box-shadow: 0px 2px 6px #975c35;
    transition: 0.3s ease-in-out;
}
.form-control:focus {
    border-color: #975c35 !important;
    outline: none !important; 
    box-shadow: 0 0 5px #975c35 !important; 
}
.service-card h6{
    font-size: 17.5px !important;
}
.service-card h4{
    font-weight: bold !important;
    font-size: 20px;
}
.contact-section{
    margin-bottom: 100px;
}
.btn-primary{
    background-color: #975c35 !important;
    border: #975c35 !important;
}


.carousel-container {
    width: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    /* Remove backdrop-filter for better mobile performance */
}

.marquee-wrapper {
    display: flex;
    width: max-content; /* Important for proper scrolling */
    animation: scroll 25s linear infinite;
}

.carousel-div {
    flex-shrink: 0;
    margin: 0 15px;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
    width: 500px; /* Reduced width for mobile */
}

.carousel-div:hover {
    transform: scale(1.05);
}

.items {
    width: 100%;
    display: block;
    border-radius: 15px;
    height: auto; /* Ensure proper aspect ratio */
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); 
    }
}

/* Pause animation on hover */
.carousel-container:hover .marquee-wrapper {
    animation-play-state: paused;
}

@media screen and (max-width: 767px) {
    .carousel-div {
        width: 300px; 
        margin: 0 10px;
    }
    
    .marquee-wrapper {
        animation: scroll 25s linear infinite; /* Slower for mobile */
    }
    
    
    .carousel-container {
        backdrop-filter: none;
    }
    
    
    .carousel-div:hover {
        transform: none;
    }
}

@media screen and (max-width: 767px) {
    body{
        padding-top: 0px;
        margin-top: 0px;
        font-family: 'Poppins', sans-serif;
    }
    .bigger{
        font-size: 2.5rem;
    }
    .hero-text{
        margin-top: 120px !important; 
        text-align: center;
    }
    .img-hero{
        width: 300px !important;
        text-align: center;
    }
    .img-about{
        text-align: center;
    }
    .img-mail{
        width: 300px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .img-md, .img-hero {
        max-width: 350px; /* Adjust this value as needed */
        margin-top: 80px;
    }
    .about-title.bigger{
        font-size: 2rem;
    }
}