/* About section start  */

img {
    max-width: 100%;
}


section {
    display: block;
}


.about-area{
    
        background-color: rgba(22, 37, 66, 0.05);
    
}
.section-title h4{
    font-family: "Frank Ruhl Libre", serif;
    font-weight: 600;
}

.section-title h2{
    font-size: 50px;
    color: rgb(186, 58, 25);
    font-weight: 600;
    font-family: "Frank Ruhl Libre", serif;
}

.section-title.section-title-left {
    text-align: left;
}

span.sub-title {
    position: relative;
    margin-bottom: 15px;
    display: block;
    color: #b68c5a;
    font-size: 22px;
    font-weight: 700;
    font-family: "Karla", sans-serif;
    
}

span.sub-title:before {
    margin-right: 30px;
}

span.sub-title:before {
    display: inline-block;
    content: "";
    width: 50px;
    height: 3px;
    background-color: #b68c5a;
    vertical-align: middle;
}

.about-content-box-one p {
    margin-bottom: 30px;
    text-align: justify;
    font-family: "Karla", sans-serif;
    color: #666666;
    line-height: 25px;
}

.about-img-box-one {
    min-height: 600px;
    position: relative;
    margin-left: 50px;
}

.about-img-box-one .about-img-one {
    position: absolute;
    top: 90px;
    left: 0;
}

.about-img-box-one .about-img-two {
    position: absolute;
    top: 0;
    right: 0;
}

.about-img-box-one .about-img-three {
    position: absolute;
    bottom: 0;
    right: 50px;
    max-width: 415px;
    width: 100%;
}

@media (max-width: 767px) {
    .about-img-box-one {
        margin-left: 0px;
    }
}

@media (max-width: 767px) {
    .about-img-box-one .about-img-one {
        position: relative;
        top: auto;
        left: auto;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about-img-box-one .about-img-two {
        width: 50%;
        top: 100px;
    }
}

@media (max-width: 767px) {
    .about-img-box-one .about-img-two {
        position: relative;
        top: auto;
        left: auto;
        margin: 40px 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .about-img-box-one .about-img-three {
        right: 0;
        max-width: 350px;
    }
}

@media (max-width: 767px) {
    .about-img-box-one .about-img-three {
        position: relative;
        top: auto;
        right: auto;
        max-width: 100%;
    }
}

@media (min-width: 1200px) {
    .about-container {
        max-width: 1200px;
    }
}



@media (max-width: 767px) {
    span.sub-title {
        font-size: 18px;
    }
}








    /* 1. Mobile Animation: Wide Left -> Right */
    @keyframes driveHorizontal {
        0% { 
            transform: translateX(-50px); /* Start far left */
            opacity: 0; 
        }
        10% { opacity: 1; } /* Fade in quickly */
        90% { opacity: 1; } 
        100% { 
            transform: translateX(50px); /* End far right */
            opacity: 0; /* Fade out */
        }
    }

    /* 2. Desktop Animation: High Top -> Down */
    @keyframes driveVertical {
        0% { 
            transform: translateY(-30px); /* Start far up */
            opacity: 0; 
        }
        10% { opacity: 1; }
        90% { opacity: 1; } 
        100% { 
            transform: translateY(30px); /* End far down */
            opacity: 0; 
        }
    }

    /* 3. Base Class (Mobile Default) */
    .moving-car {
        display: inline-block;
        animation: driveHorizontal 4s linear infinite; /* 4s for a smoother long drive */
    }

    /* 4. Desktop Switch (Screens wider than 768px) */
    @media (min-width: 768px) {
        .moving-car {
            animation-name: driveVertical; 
        }
    }
    
    /* Optional: Prevents scrollbars if the car moves too far */
    .modal-body {
        overflow: hidden; 
    }