/* responsive */
@media (min-width: 768px) {

    .hero-subtitle{
        font-size: 1.2rem;
    }

    .hero-subtitle span{
        padding: 5px;
    }

    .home__about-us__image-container--top-right-curve{
        border-radius: 20px 100px 20px 20px;
    }

    .home__about-us__image-container--bottom-left-curve{
        border-radius: 20px 20px 20px 100px;
    }

    .home__about-us__title{
        text-align: left;
        font-size: 1.8rem;
    }

    .home__about-us__title img{
        display: inline;
    }

    .home__about-us__subtitle{
        max-width: 450px;
        text-align: left;
    }

    .home__about-us__brand{
        font-size: 5rem;
    }

    .nav-links {
        margin-left: 80px;
    }

    /* footer */
    .half-circle {
        position: absolute;
        right: 110px;
        width: 330px;
        height: 150px;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        border: 10px;
        border-bottom: 0;
    }

    .half-circle img {
        margin-top: 20px;
        width: 25%;
    }

    .footer-link {
        margin: 13px 6px 0px 6px;
    }


    /* about section */
    .about-left-leaf {
        width: 50%;
    }

    .about-right-leaf {
        top: 150px;
        width: 50%;
    }

    .about-description {
        width: 70%;
        margin-top: 30px;
    }

    .about-title,
    .about-subtitle {
        width: fit-content;
    }

    .about-subtitle{
        text-wrap: nowrap;
        width: 350px;
        overflow: hidden;
    }

    .image-layout {
        width: 50%;
        display: grid;
        grid-auto-rows: 222px;
        grid-template-columns: 1fr 1fr;
    }

    .about-content-section {
        transform: translate(-50%, -60%);
    }

    /* our team */
    .our-team-titles {
        width: 60%;
        position: absolute;
        top: 60%;
        left: 40%;
        transform: translate(-50%, -50%);
    }

    /* contact us */
    .contact-us-img {
        width: 40%;
    }

    .contact-us-title {
        margin-left: -20px;
        line-height: 1.7;
    }

    .contact-us-subtitle {
        width: 60%;
        margin: 20px 0px 40px 0px;
    }

    .contact-us-details {
        margin-left: 50px;
    }

    .contact-right-leaf {
        top: 80px;
        right: -80px;
        width: 30%;
    }

    /* previous work */
    .previous-work-titles p{
        width: 50%;
    }

    .previous-work-container {
        max-height: 750px;
    }

    .work-line-container {
        position: absolute;
        bottom: 60px;
        width: 96%;
        z-index: 1;
    }

    .previous-work-img {
        width: 75%;
        aspect-ratio: auto;
    }

    .previous-work-details {
        padding-left: 60px;
    }

    .previous-work-description p {
        font-size: 0.8rem;
    }

    .carousel-indicators [data-bs-target] {
        width: auto;
        height: auto;
        padding: 0;
        background: none;
        border: none;
        text-indent: 0%;
    }

    .carousel-indicators {
        top: 0;
        left: 78%;
    }

    .carousel-indicators [data-bs-target].active img {
        opacity: 1;
    }

    .carousel-indicators [data-bs-target] img {
        opacity: 0.5;
        transition: opacity 0.3s, transform 0.3s;
        width: 30px;
        height: auto;
    }

    .carousel-indicators [data-bs-target]:hover img {
        opacity: 0.8;
    }

    .previous-work-gallery img {
        width: 100%;
        max-width: 1024px;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 4/5;
    }

    .previous-work-gallery {
        width: 25%;
        max-width: 300px;
        position: absolute !important;
        top: 55%;
        right: 5%;
        transform: translate(-50%, -50%);
        z-index: 4;
    }

    .page-heading h1{
        font-size: 3rem;
    }

    .divider{
        width: 150px;
    }

    .project-listing__image{
        height: 520px;
    }

    .project-listing__specs-item{
        padding-right: 15px;
    }

    .project-listing__specs-item span{
        display: block;
        font-size: 0.8rem;
    }

    .project-header__content{
        max-width: 450px;
    }

    .project-content{
        max-width: 500px;
    }

    .sidemenu,.sidemenu-inner{
        width: 350px;
    }

}