html,
body {
    width: 100%;
    overflow-x: hidden;
}

/* Navigation */
#header {
    color: #fff;
    padding: 20px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#header .logo {
    width: 20%;
}

#header .logo img {
    width: 100%;
}

@media (max-width: 640px) {
    #header .logo {
        width: 50%;
    }

    #header {
        padding: 20px 20px;
    }
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.navbar li {
    position: relative;
    margin: 0 3px;
}

.navbar li a i {
    font-size: 16px;
    margin: 0 0 0 5px;
}

.navbar li .menu-bar,
.navbar li .menu-bar-two {
    text-decoration: none;
    font-family: "Outfit";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    color: #444444;
    line-height: 24px;
    padding: 7px 20px;
    transition: all 0.5s ease;
    margin: 0 5px;
}

.navbar li .menu-bar-two {
    background-color: #996830;
    color: white;
    border-color: #fff;
    border-width: 2px;
    border-style: solid;
}

.navbar li .menu-bar.active,
.navbar li .menu-bar:hover {
    background-color: #996830;
    color: white;
    cursor: pointer;
}

.navbar li .menu-bar-two.active,
.navbar li .menu-bar-two:hover {
    background-color: #fff;
    color: #996830;
    cursor: pointer;
    border-color: #996830;
    border-width: 2px;
    border-style: solid;
}

#mobile,
#close {
    display: none;
}

@media (max-width: 1007px) {
    .navbar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: nowrap;
        position: fixed;
        top: 0;
        right: -270px;
        height: 100vh;
        width: 270px;
        max-width: 50%;
        background-color: #fff;
        box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
        padding: 80px 0 0 20px;
        transition: 0.3s ease;
        z-index: 2147483647;
    }

    #navbar.active {
        right: 0px;
    }

    .navbar li {
        margin-bottom: 25px;
        font-size: 20px;
    }

    #mobile {
        display: block;
        cursor: pointer;
    }

    #mobile i {
        color: #444444;
        font-size: 20px;
        padding-left: 25px;
        transition: 0.3s ease;
    }

    #close {
        display: initial;
        position: absolute;
        top: 30px;
        right: 30px;
    }

    #close i {
        color: #121212;
        font-size: 24px;
    }
}

/*Header Text*/
.header-text {
    width: 100%;
    padding: 10px 20px;
}

.header-text p {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 500;
    font-size: 65px;
    text-align: center;
    letter-spacing: -0.025em;
    font-feature-settings: "pnum" on, "lnum" on, "liga" off;
    color: #2c2c2c;
}

@media (max-width: 1007px) {
    .header-text p {
        font-size: 40px;
    }
}

@media (max-width: 640px) {
    .header-text {
        padding: 10px 20px;
        margin: 10px 0px;
    }

    .header-text p {
        font-size: 30px;
    }
}

.header-sub-text {
    width: 100%;
    padding: 10px 100px;
}

.header-sub-text p {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    font-feature-settings: "liga" off;
    color: #444444;
}

@media (max-width: 1007px) {
    .header-sub-text {
        padding: 10px 40px;
    }

    .header-sub-text p {
        font-size: 16px;
    }
}

@media (max-width: 640px) {
    .header-sub-text {
        padding: 5px 10px;
        margin: 5px 0px;
    }

    .header-sub-text p {
        font-size: 14px;
    }
}

/* Carousel */
.swiper {
    width: 100%;
    margin: 20px 0px;
}

.swiper-slide {
    /* text-align: center; */
    font-size: 18px;
    background: #fff;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    position: relative;
}

.carousel-image {
    display: block;
    height: 500px;
    width: 100%;
    object-fit: cover;
    margin-top: 4vw;
}

.cta-button {
    display: block;
    position: absolute;
    left: 12vw;
    width: 8vw;
    height: 8vw;
    top: -4vw;
    margin-top: 4vw;
}

@media (max-width: 640px) {
    .carousel-image {
        margin-top: 6vw;
        width: 100%;
        height: 200px;
    }

    .cta-button {
        position: absolute;
        left: 10vw;
        width: 12vw;
        height: 12vw;
        top: -6vw;
        text-align: left;
        margin-top: 6vw;
    }
}

.swiper-pagination-bullet {
    background-color: #2c2c2c;
}

/* About Text */
.about {
    margin-top: 80px;
    /* padding: 10px 30px; */
    width: 100%;
}

.about-text {
    margin-top: 100px;
}

.sub-title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 60%;
}

.line {
    width: 64px;
    height: 5px;
    border-bottom: 2px solid #996830;
    margin-right: 20px;
    margin-top: 0.5vw;
}

.sub-title p {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #996830;
}

.title {
    margin-top: 10px;
}

.title p {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400;
    font-size: 50px;
    color: #2c2c2c;
}

@media (max-width: 1007px) {
    .title p {
        font-size: 40px;
    }

    .line {
        width: 50px;
        margin-top: 6px;
    }
}

@media (max-width: 640px) {
    .title p {
        font-size: 30px;
    }

    .sub-title p {
        font-size: 12px;
    }

    .line {
        width: 40px;
        margin-top: 5px;
    }
}

.text p {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    color: #444444;
}

@media (max-width: 640px) {
    .about {
        margin-top: 30px;
        padding: 0px 20px;
    }

    .text p {
        font-size: 16px;
    }
}

.about-image {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.about-image img {
    width: 40vw;
    height: 40vw;
    object-fit: cover;
    margin-left: 10px;
    margin-right: 10px;
}

.about-image .img2 {
    margin-top: 120px;
}

@media (max-width: 750px) {
    .about-text {
        margin-top: 20px;
    }

    .about-image img {
        margin-top: 30px;
        width: 40vw;
        height: 70vw;
    }

    .about-image .img2 {
        margin-top: 80px;
    }
}

/* Stats */
.stats {
    margin-top: 50px;
}

.stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.stat .number {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400;
    font-size: 60px;
    color: #2c2c2c;
    margin-right: 10px;
}

.stat .text {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #2c2c2c;
    margin-top: 15px;
}

@media (max-width: 640px) {
    .stat .number {
        font-size: 40px;
    }

    .stat .text {
        font-size: 12px;
    }
}

.divide {
    width: 90%;
    border-bottom: 1px solid #d9d9d6;
    height: 5px;
    margin-top: 30px;
}

/* Services */
.services {
    margin-top: 80px;
    /* padding: 10px 30px; */
}

.service {
    padding: 40px;
    border: 1px solid #996830;
    margin: 30px 10px;
    min-height: 435px;
    transition: 0.6s ease;
}

.service:hover {
    background-color: #2c2c2c;
    cursor: pointer;

    .service-title {
        color: #996830;
    }

    .service-description {
        color: #d9d9d6;
    }
}

.services-list a {
    text-decoration: none;
}

.service-image {
    margin-bottom: 50px;
}

.service-title {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    color: #2c2c2c;
}

.service-description {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    color: #444444;
}

@media (max-width: 640px) {
    .services .sub-title {
        padding: 0px 20px;
    }

    .services .title {
        padding: 0px 20px;
    }

    .service {
        padding: 30px;
        border: 1px solid #996830;
        margin: 30px 10px;
        min-height: 416px;
    }
}

/* Recent Works */
.recent-works {
    margin-top: 80px;
}

.work {
    padding: 10px;
}

.work-title {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    color: #2c2c2c;
    margin-top: 10px;
}

.work-description {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    color: #444444;
}

.work-image {
    width: 90%;
    object-fit: contain;
}

@media (max-width: 640px) {
    .work-title {
        font-size: 24px;
    }

    .work-description {
        font-size: 14px;
    }

    .work-image {
        width: 100%;
        object-fit: contain;
    }

    .recent-works .sub-title,
    .recent-works .title {
        padding: 0px 20px;
    }
}

/* Articles */
.articles {
    margin-top: 80px;
}

.article {
    text-align: center;
    margin: 10px;
}

.article p {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    color: #444444;
    text-decoration: underline;
}

.article p:hover {
    color: #996830;
    cursor: pointer;
}

.article a {
    text-decoration: none;
}

@media (max-width: 640px) {

    .articles .sub-title,
    .articles .title {
        padding: 0px 20px;
    }
}

/* Footer */
.footer {
    margin-top: 80px;
}

.footer-title p {
    font-size: 40px;
}

.footer-sub-title {
    margin-top: 30px;
}

.footer-sub-title p {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 400;
    font-size: 40px;
    color: #996830;
    text-decoration: underline;
}

.city p {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    color: #2c2c2c;
}

.address p {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    color: #2c2c2c;
}

.contact-title p {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    color: #2c2c2c;
}

.contact-description p {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    color: #996830;
}

.connect {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.connect-title {
    margin-right: 10px;
    margin-top: 15px;
}

.connect-title p {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #444444;
}

.social {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #e6d8cc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.icon {
    color: #996830;
    font-size: 18px;
}

@media (max-width: 640px) {
    .footer {
        margin-top: 30px;
        padding: 10px;
    }

    .footer-title p {
        font-size: 30px;
    }

    .footer-sub-title p {
        font-size: 30px;
    }

    .city {
        margin-top: 20px;
    }

    .city p {
        font-size: 20px;
    }

    .address p {
        font-size: 16px;
    }

    .contact-title p {
        font-size: 12px;
    }

    .contact-description p {
        font-size: 20px;
    }
}

.copyright {
    margin-top: 30px;
    margin-bottom: 30px;
}

.copyright p {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    color: #444444;
}

.developed-by {
    margin-top: 30px;
    margin-bottom: 30px;
}

.developed-by p {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    color: #444444;
    text-align: right;
}

@media (max-width: 640px) {
    .copyright {
        margin-top: 30px;
        margin-bottom: 0;
    }

    .copyright p {
        text-align: center;
    }

    .developed-by {
        margin-top: 0;
        margin-bottom: 30px;
    }

    .developed-by p {
        text-align: center;
    }
}