:root {
    --dark: #000000;
    --light: #77808B;
    --blue: #0D2F81;
    --yellow: #FEE222;
    --yellow-hover: #f5d506;
    --Monument: Monument;
    --sf-pro-display-medium: SFPRODISPLAYMEDIUM;
    --sf-pro-display-regular: SFPRODISPLAYREGULAR;
    --sf-pro-display-bold: SFPRODISPLAYBOLD;
}

body {
    font-family: 'SFPRODISPLAYREGULAR';
}

a {
    color: inherit;
    text-decoration: unset;
}

a:hover {
    color: unset;

}

.message-empty-data {
    position: absolute;
    transform: translate(-50%, 50%);
    left: 50%;
    font-size: 18px;
    color: gray;
}

/* ========= Start Layout ========= */
.container-fluid {
    width: 90% !important;
}

.container-full {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.bg-gray-100 {
    background-color: var(--bs-gray-100);
}

.relative {
    position: relative;
}

.py-10 {
    padding: 10px 0;
}

.py-20 {
    padding: 20px 0;
}

.py-30 {
    padding: 30px 0;
}

.py-40 {
    padding: 40px 0;
}

.py-50 {
    padding: 50px 0;
}

.py-60 {
    padding: 60px 0;
}

.py-70 {
    padding: 70px 0;
}

.py-80 {
    padding: 80px 0;
}

.py-90 {
    padding: 90px 0;
}

.py-100 {
    padding: 100px 0;
}

.pt-10 {
    padding-top: 10px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-80 {
    padding-top: 80px;
}

.pt-90 {
    padding-top: 90px;
}

.pt-100 {
    padding-top: 100px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pb-90 {
    padding-bottom: 90px;
}

.pb-100 {
    padding-bottom: 100px;
}

.grid-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

/* ========= End Layout ========= */

/* ========= Start Typography ========= */
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.heading {
    width: 80%;
}

.heading .subtitle {
    text-transform: uppercase;
    line-height: 24px;
    color: var(--dark);
    margin-left: 15%;
    position: relative;
}

.subtitle:before {
    content: "";
    height: 1px;
    width: 10%;
    position: absolute;
    background: var(--dark);
    left: -15%;
    top: 50%;
}

.heading .title {
    font-size: 50px;
    line-height: 110%;
    text-transform: capitalize;
    color: var(--dark);
    font-family: var(--sf-pro-display-bold);
    position: relative;
}

.heading .title.with-border-bottom:before {
    position: absolute;
    content: "";
    height: 2px;
    width: 10%;
    background: #4F4F4F;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 20px);
}

.context {
    width: 80%;
}

.context .subtitle {
    margin-bottom: 1rem;
    line-height: 33px;
}

.context p {
    font-family: var(--sf-pro-display-medium);
    line-height: 30px;
}

.text-bold {
    font-family: var(--sf-pro-display-bold) !important;
}

.text-outline-white {
    -webkit-text-fill-color: #FFF;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--dark);
}

.text-outline-dark {
    -webkit-text-fill-color: var(--dark);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #FFF;
}

.heading-page {
    margin: 3rem 0;
    font-family: var(--sf-pro-display-bold);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    background: #000;
}

/* ========= End Typography ========= */

/* ========= Start Button ========= */
.btn:focus,
.btn:hover {
    box-shadow: unset;
}

.direct-link.with-icon a {
    position: relative;
    color: var(--dark);
    text-decoration: unset;
    padding-right: 3.5rem;
    text-transform: uppercase;
}

.direct-link.with-icon a:before {
    content: "\f144";
    font-family: bootstrap-icons;
    position: absolute;
    font-size: 3rem;
    right: 0;
    bottom: 0;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-submit-1 {
    position: relative;
    background-color: var(--yellow);
    color: #333;
    border-radius: 0;
    padding: 0.5rem 5rem 0.5rem 1rem;
}

.btn-submit-1:hover {
    color: #333;
    background-color: var(--yellow-hover)
}

.btn-submit-1:before {
    content: "\f144";
    font-family: bootstrap-icons;
    position: absolute;
    right: 5%;
    top: 30%;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-monochrome-shadow {
    border: 1px solid #241C0F;
    border-radius: 0;
    box-shadow: 5px 5px 0px #FEE222, 0px 0px 1px 0 #FEE222;
}

.btn-monochrome-shadow:hover {
    box-shadow: 5px 5px 0px #FEE222, 0px 0px 1px 0 #FEE222;
}

.btn-message-bold {
    border: 2px solid #222;
    text-transform: uppercase;
    font-family: var(--sf-pro-display-bold);
    border-radius: 50px;
    transition: .5s ease-in-out;
}
.btn-message-bold:hover{
    background-color: var(--yellow-hover);
    color: #000;
    border: 2px solid var(--yellow-hover);

}

/* ========= Start Button ========= */

/* ========= Start Navbar ========= */
.home-page nav.navbar {
    background-color: transparent;
}

nav.navbar {
    background-color: #17212b;
    /* opacity: 0.8; */
    transition-property: background-color, color;
    transition-duration: 0.5s;
    transition-function: ease-in-out;
}

.navbar-brand.nav-logo img {
    width: 80%;
}

.navbar-dark {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.navbar-main {}

.navbar-main .navbar-main-item {
    display: flex;
    flex-direction: row;
    color: #FFF;
    font-size: 24px;
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.5rem;
    padding-left: 0;
}

.navbar-main .navbar-main-item .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
    font-family: var(--sf-pro-display-bold);
    font-size: 22px;
}

.navbar-toggler {
    border: 0;
}

.navbar-toggler:focus {
    box-shadow: unset;
}

.mega-menu.offcanvas {
    width: 100%;
}

.mega-menu.offcanvas .mega-menu-container {
    display: flex;
    position: relative;
}

.mega-menu.offcanvas .mega-menu-container-between {
    display: flex;
    justify-content: space-between;
}

.mega-menu.offcanvas .mega-menu-item:nth-child(1) {
    border-right: 1px solid;
    padding-right: 3rem;
}

.mega-menu.offcanvas .mega-menu-item:nth-child(2) {
    padding-left: 3rem;
}

.mega-menu.offcanvas .mega-menu-container-contact {
    border-left: 1px solid;
    padding-left: 3rem;
}


.mega-menu.offcanvas .offcanvas-body {
    margin-top: 5%;
}


.mega-menu.offcanvas .mega-menu-container .nav-link,
.mega-menu.offcanvas .mega-menu-container-contact .nav-link {
    font-family: var(--sf-pro-display-bold);
    padding: 1rem 0;
    color: rgba(0, 0, 0, 0.55);
}

.mega-menu.offcanvas .mega-menu-container .nav-link:hover,
.mega-menu.offcanvas .mega-menu-container-contact .nav-link:hover,
.mega-menu.offcanvas .mega-menu-container .nav-link.active {
    color: rgb(0, 0, 0);
}

.mega-menu.offcanvas .mega-menu-container .nav-link {
    font-size: 36px;
    line-height: 38px;
}



.mega-menu.offcanvas .mega-menu-container-contact .nav-link {
    font-size: 24px;
    line-height: 1rem;
}

.mega-menu.offcanvas .mega-menu-container-contact .nav-link .bi {
    margin-right: 0.8rem;
}

.mega-menu.offcanvas .mega-menu-container .mega-item-listed .nav-item {
    position: relative;
    padding-left: 3.5rem;
}

.mega-menu.offcanvas .mega-menu-container .mega-item-listed .nav-item:before {
    content: "";
    width: 2rem;
    height: 4px;
    position: absolute;
    background-color: #212529;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.mega-menu.offcanvas .mega-menu-container-contact .mega-menu-contact {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

}

.mega-menu.offcanvas .mega-menu-container-contact .mega-menu-contact .sosmed-widget {
    display: flex;
    justify-content: end;
}

.mega-menu.offcanvas .mega-menu-container-contact .mega-menu-contact .sosmed-widget li {
    display: inline;
}

.mega-menu.offcanvas .mega-menu-container-contact .mega-menu-contact .sosmed-widget li a {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    padding: 0;
    text-decoration: none;
    text-align: center;
    color: rgba(0, 0, 0, 0.55);
    background-color: #fff;
    font-size: 1.3rem;
    font-weight: normal;
    line-height: 2em;
    border-radius: 1.6875rem;
    transition: all 0.5s ease;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.mega-menu.offcanvas .mega-menu-container-contact .mega-menu-contact .sosmed-widget li a:hover {
    color: #000;
}

.mega-menu .btn-close {}



/* .mega-menu.offcanvas .grid-mega-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
} */

/* ========= End Navbar ========= */

/* ========= Start Hero ========= */
.section-hero {
    position: relative;
}

.section-hero .hero-text {
    position: absolute;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 6;
    color: var(--bs-white);
    width: 50%;
}

.section-hero .hero-text h1 {
    line-height: 115px;
    text-transform: uppercase;
    font-family: var(--Monument);
}

.section-hero .hero-image img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.section-hero video {
    object-fit: cover;
    width: 100%;
    height: 100vh;
    position: relative;
    top: 0;
    left: 0;
}

/* ========= End Hero ========= */

/* ========= Start About ========= */
.section-about-page {
    position: relative;
    padding-top: 120px;
}

.section-about-page .heading .title {
    font-size: 48px;
    font-family: var(--sf-pro-display-medium);
    margin-bottom: 1.5rem;
    color: #2B2B2B;
}

.section-about-page .heading p,
.section-about-page .subtitle {
    color: #5A7184;
    margin-bottom: 0;
}

.section-about-page .about-project-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    text-align: center;
    position: relative;
    width: 70%;
    margin: 0 auto;
}

.section-about-page .about-project-grid:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: -40%;
    background: #f5f5f5;
}

.section-about-page .about-project-grid .item-grid .count {
    font-family: var(--sf-pro-display-bold);
    font-size: 30px;
    color: #333;
}

.section-about-page .about-project-grid .item-grid p {
    font-size: 18px;
    color: #333;
}

.section-about-page .list-group,
.section-about .list-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 0.5rem;
    grid-column-gap: 0.5rem;
}

.section-about-page .list-group .list-group-item,
.section-about .list-group .list-group-item {
    border: 0;
    border-radius: 0;
    padding-left: 2rem;
    color: #183B56;
}

.section-about-page .list-group-ceklist>.list-group-item::before,
.section-about .list-group-ceklist>.list-group-item::before {
    content: "";
    position: absolute;
    background: url(../images/icon/ceklist.svg) no-repeat;
    background-size: cover;
    height: 15px;
    width: 20px;
    left: 0;
    top: 35%;
}

.section-about-page .bc {
    position: absolute;
    background: #F9FBFE;
    width: 100%;
    height: 25%;
    z-index: -1;
    top: 0;
}

/* ========= End About ========= */


/* ========= Start Section Museum ========= */
.section-museum {
    background: #FFF;
}

.museum-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    text-align: center;
    padding-top: 1rem;

}

.museum-grid .grid-item img {
    /* width: 100%;
    height: 350px;
    object-fit: cover; */
}

.museum-grid .museum-grid-nav h6,
.museum-grid .museum-grid-nav i:before {
    font-weight: bold !important;
}


/* ========= Start Services ========= */
.section-service-page {
    padding: 120px 0;
}

.section-service-page .image-service img {
    box-shadow: 15px 15px 0px 0 var(--yellow), 0px 0px 0 0 var(--yellow);
    border-top-left-radius: 30%;
}

.section-service-page .service-text {
    padding-left: 3.5rem;
}

.section-services {
    background-color: #F9FBFE;
}

.section-services .service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
}

.section-services .service-grid .service-item .service-icon {
    margin-bottom: 0.5rem;
}

.section-services .service-grid .service-item .service-icon .bi:before {
    font-weight: 600 !important;
    font-size: 24px;
}

.section-services .service-grid .service-item .title {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 0.5rem;
}

.section-services .service-grid .service-item .subtitle {
    font-size: 14px;
    margin-bottom: 0.5rem;
    font-family: 'Open Sans', sans-serif;
    width: 85%;
    color: #777777;
}

/* ========= End Services ========= */

/* ========= Start Services Detail ========= */
.section-service-detail {
    background-color: #F9FBFE;
}

.section-service-detail .service-banner-bg {
    position: relative;
}

.section-service-detail .banner-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: unset;
    text-align: center;
}

.section-service-detail .service-banner-bg img {}

.section-service-detail .banner-heading .title {
    font-size: 48px;
    font-family: var(--sf-pro-display-medium);
    line-height: 110%;
    text-transform: capitalize;
}

.section-service-detail .banner-heading p {
    width: 80%;
    margin: 0 auto;
}

.section-service-detail .banner-heading .title,
.section-service-detail .banner-heading p {
    color: #FFF;
}

.section-service-detail .banner-why-us {
    padding: 100px 0;
    margin-top: 3rem;
}

.section-service-detail .banner-why-us .heading {
    width: 100%;
}

.section-service-detail .banner-why-us .heading .title,
.section-service-detail .banner-why-us .heading .subtitle,
.section-service-detail .banner-why-us .heading .caption {
    color: #FFF;
}

.section-service-detail .banner-why-us .heading .caption {
    text-align: justify;
}

.section-service-detail .banner-why-us .heading .subtitle:before {
    background: #FFF;
}

.section-service-detail .listing-project {
    padding: 3rem 0 5rem 0;
}


.section-service-detail .listing-project .heading .title,
.section-service-detail .service-faq .heading .title,
.section-service-detail .feature-work .heading .title,
.section-service-detail .another-services .heading .title {
    font-size: 40px;
    color: #333;
    font-family: var(--sf-pro-display-medium);
}


.section-service-detail .listing-project .card .card-body {
    width: 80%;
}

.section-service-detail .listing-project .card .card-title {
    font-family: var(--sf-pro-display-medium);
    color: #283646;
    font-size: 28px;
}

.section-service-detail .listing-project .card .card-text {
    font-family: var(--sf-pro-display-regular);
    font-size: 18px;
    line-height: 150%;
    color: #77808B;
}

.section-service-detail .listing-project .project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
}

.section-service-detail .listing-project .project-grid .grid-item h5 {
    font-family: var(--sf-pro-display-medium);
    color: #283646;
    font-size: 24px;
}

.section-service-detail .listing-project .project-grid .grid-item .figure-caption {
    font-family: var(--sf-pro-display-regular);
    font-size: 16px;
    line-height: 150%;
    text-align: justify;
    color: #77808B;
}

.section-service-detail .service-faq {
    padding-bottom: 5rem;
}

.section-service-detail .service-faq .accordion {
    width: 85%;
    margin: 0 auto;
    margin-top: 3rem;
}

.section-service-detail .service-faq .accordion .accordion-item .accordion-button {
    border-bottom: 1px solid #333;
    padding-left: 0;
    background-color: #F9FBFE;
    font-size: 20px;
}

.section-service-detail .service-faq .accordion .accordion-item .accordion-button:focus {
    box-shadow: unset;
}

.section-service-detail .service-faq .accordion .accordion-item .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #333;
}

.section-service-detail .accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 0;
}

.section-service-detail .feature-work {
    padding-bottom: 5rem;
}

.section-service-detail .feature-work .project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    padding-top: 3rem;
}

.section-service-detail .feature-work .project-grid .grid-item .figure-caption {
    color: #77808B;
    margin-top: 0.5rem;
    font-size: 16px;
}

.section-service-detail .feature-work .project-grid .grid-item .figure-title {
    color: var(--dark);
    font-size: 22px;
    font-weight: 600;
    margin-top: 0.5rem;
}

.section-service-detail .feature-work .project-grid .grid-item img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.section-service-detail .section-service .wrapper-service {
    display: flex;
}

.section-service-detail .section-service .box-service {
    position: relative;
}

.section-service-detail .section-service .box-service .box-service-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
    text-align: center;
    width: 100%;
}

.section-service-detail .section-service .box-service .box-service-text p {
    max-width: 70%;
    margin: 0 auto;
}

/* ========= End Services Detail ========= */

/* ========= Start Article Carousel ========= */
.section-article-slide {
    background-color: #E1E5F0;
}

.section-article-slide .article-slide {
    margin-top: 3rem;
}

.section-article-slide .figure img {
    height: 300px;
    object-fit: cover;
    -o-object-fit: cover;
}

.section-article-slide .article-heading h2 {
    font-family: var(--Monument);
    text-transform: uppercase;
}

.section-article-slide .figure .figure-caption-date {
    color: #787A7C;
    font-size: 14px;
}

.section-article-slide .figure .figure-caption {
    color: var(--dark);
}

/* ========= End Article Carousel ========= */

/* ========= Start Article  ========= */
.section-article-page {
    background-color: #F9FBFE;
    padding: 120px 0;
}

.section-article-page .grid-article {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
}

.section-article-page .figure img {
    height: 400px;
    width: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.section-article-page .figure .figure-title {
    color: var(--dark);
    font-size: 22px;
    font-weight: 600;
    margin-top: .8rem;

}

.section-article-page .figure .figure-caption-date {
    color: #787A7C;
    font-size: 14px;
    margin-top: .8rem;
}

.section-article-page .figure .figure-caption-date .figure-category {
    color: #283646;
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 0.8rem;
}

.section-article-page .figure .figure-caption {
    color: #77808B;
    margin-top: .8rem;
    font-size: 16px;
}

/* ========= End Article ========= */

/* ========= Start Article Detail ========= */
.section-detail-article {
    padding: 5rem 0;
}

.section-detail-article .title-detail {
    font-family: var(--sf-pro-display-bold);
    color: #2E2E2E;
}

.section-detail-article .date-detail {
    padding: 5px 0;
    color: #666666;
}

.section-detail-article .subtitle-detail {
    color: #666666;
}

.section-detail-article .content-detail {
    color: #2E2E2E;
    margin-top: 3rem;
}


/* ========= End ArticleDetail ========= */


/* ========= Start Project Page ========= */
.section-project-page {
    padding: 70px 0 120px 0;
    margin-top: -5px;
}

.section-project-page .project-banner {
    position: relative;
}

.section-project-page .project-banner h1 {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-family: var(--sf-pro-display-bold);
    color: #FFFFFF;

}


.section-project-page .nav-pills .nav-link,
.nav-pills .show>.nav-link {
    color: #2B2B2B;
    font-weight: 300;
}

.section-project-page .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #2B2B2B;
    font-weight: 600;
    background-color: transparent;
    font-size: 18px;
}

.section-project-page .project-toolbars {
    text-align: center;
    padding-bottom: 2rem;
}

.section-project-page .project-toolbars button {
    color: #828282;
    background-color: transparent;
    border: 0;
    font-family: var(--sf-pro-display-regular);
    font-size: 18px;
}

.section-project-page .project-toolbars button.active {
    font-family: var(--sf-pro-display-bold);
    color: #2b2b2b;
}

.section-project-page .list-project {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    height: auto !important;
}

.section-project-page .list-project .list-item {
    position: relative !important;
    left: unset !important;
    top: unset !important;
}

.section-project-page .list-project .list-item .figure {
    margin: unset;
}

.section-project-page .list-project .list-item .figure img {
    /* height: 350px;
    width: 100%;
    object-fit: cover;
    -o-object-fit: cover; */
}

.section-project-page .list-project .list-item .figure .figure-caption {
    color: #77808B;
    margin-top: .5rem;
    font-size: 16px;
}

.section-project-page .list-project .list-item .figure .figure-title {
    color: var(--dark);
    font-size: 22px;
    font-weight: 600;
    margin-top: .5rem;

}

/* ========= End Project Page ========= */

/* ========= Start Project Detail ========= */
.section-detail-project {
    padding: 5rem 0;
}

.section-detail-project .title-detail {
    font-family: var(--sf-pro-display-bold);
    color: #2E2E2E;
    margin-bottom: 2rem;
}

.section-detail-project .date-detail {
    padding: 5px 0;
    color: #666666;
}

.section-detail-project .subtitle-detail {
    color: #666666;
    margin-bottom: 0;
}

.section-detail-project .image-detail img {
    /* width: 100%;
    height: 370px;
    object-fit: cover;
    -o-object-fit: cover; */
}

.section-detail-project .content-detail {
    color: #2E2E2E;
    margin-top: 3rem;
}

.section-detail-project .content-detail h3 {
    font-size: 1.5rem;
    font-family: var(--sf-pro-display-bold);
    text-transform: uppercase;
}

.section-detail-project .content-detail p {}

.section-detail-project .content-detail ul {
    padding: 0rem 1.5rem 0 1rem;
    margin: 0;
    list-style: inherit;
}

.section-detail-project .project-information {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding-top: 1.5rem;
}

.section-detail-project .project-information .detail-info-project {
    font-family: var(--sf-pro-display-bold);
    font-size: 22px;
}

.section-detail-project .project-information p {
    color: #808080;
    margin-top: 0.5rem;
    font-size: 18px;
}

.section-detail-project .list-project {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
}

.section-detail-project .list-project .list-item .figure img {
    height: 300px;
    width: 300px;
    object-fit: cover;
    -o-object-fit: cover;
}

.section-detail-project .list-project .list-item .figure .figure-caption {
    color: #77808B;
    margin-top: .5rem;
    font-size: 16px;
}

.section-detail-project .list-project .list-item .figure .figure-title {
    color: var(--dark);
    font-size: 22px;
    font-weight: 600;
    margin-top: .5rem;

}


/* ========= End Project Detail ========= */

/* ========= Start Form 1 ========= */
.section-form1 {
    background-color: #F9FBFE;
}

.section-form1 .nav-text p {
    color: rgba(0, 0, 0, 0.502972);
}

.section-form1 .nav-text h5 a {
    font-family: var(--sf-pro-display-medium);
}

.section-form1 .social-media-text {
    margin-top: 2.5rem;
}

.section-form1 .social-media-text ul {
    padding-left: 0;
}

.section-form1 .social-media-text ul li {
    display: inline;
    text-transform: uppercase;
    font-size: 14px;
}

.section-form1 .social-media-text ul li:not(:first-child) {
    margin-left: 1.5rem;
}

.section-form1 .form-contact {
    background-color: #1A2F44;
    padding: 2rem;
    border-radius: 10px;

}

.section-form1 .form-contact .form-control {
    border-radius: 0;
    background-color: #1A2F44;
    border: 0;
    border-bottom: 1px solid #fff;
    color: rgba(255, 255, 255, 0.5);
}

.section-form1 .form-contact input[type=text]::placeholder,
.section-form1 .form-contact textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-size: 14px;
}

.section-form1 .form-contact input[type=text]:focus,
.section-form1 .form-contact textarea:focus {
    color: rgba(255, 255, 255, 0.5);
    box-shadow: unset;
}

/* ========= End Form 1 ========= */

/* ========= Start Contact Page ========= */
.section-contact-page {
    padding: 150px 0;
}

.section-contact-page .heading .title {
    font-family: var(--sf-pro-display-bold);
    color: #fff !important;
}

.section-contact-page .heading .sub {
    font-family: var(--sf-pro-display-bold);
    font-size: 1.5rem;
}

.section-contact-page .contact-widget-title {
    font-family: var(--sf-pro-display-bold);
    font-size: 1.2rem;
    margin: 1rem 0;
}

.section-contact-page .nav-text p {
    color: #212529;
    width: 80%;
}

.section-contact-page .nav-text h5 a {
    font-family: var(--sf-pro-display-medium);
}

.section-contact-page .social-media-text {}

.section-contact-page .social-media ul li {
    display: inline;
}


.section-contact-page .social-media ul li a {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    padding: 0;
    text-decoration: none;
    text-align: center;
    color: var(--dark);
    background-color: #fff;
    font-size: 1rem;
    font-weight: normal;
    line-height: 2em;
    border-radius: 1.6875rem;
    transition: all 0.5s ease;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.section-contact-page .form-contact {
    background-color: #F8F8F8;
    padding: 2rem;
}

.section-contact-page .form-contact .form-control {
    border-radius: 0;
    background-color: #F8F8F8;
    border: 0;
    border-bottom: 1px solid #000;
    color: #000;
}

.section-contact-page .form-contact input[type=text]::placeholder,
.section-contact-page .form-contact textarea::placeholder {
    color: rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    font-size: 14px;
}

.section-contact-page .form-contact input[type=text]:focus,
.section-contact-page .form-contact textarea:focus {
    color: rgba(0, 0, 0, 0.5);
    box-shadow: unset;
}

/* ========= End Contact Page ========= */

/* ========= Start discuss ========= */
.section-discuss .item {
    font-size: 1.7rem;
    font-weight: 600;
}

.section-discuss .item .bi {
    font-size: 2.3rem;
    margin-right: .8rem;
}

/* ========= End discuss ========= */


/* ========= Start Client ========= */
.section-client {
    background-color: #F9FBFE;
    padding-top: 3rem;
}

.section-client .client-slide {
    text-align: center;
    position: relative;
}

.section-client .client-slide .swiper-button-prev {}

.section-client .client-slide .swiper-button-next {
    right: 5%;
    left: unset;
}


.section-client .client-slide .swiper-button-prev,
.section-client .client-slide .swiper-button-next {
    top: 0;
}

.section-client .swiper {
    height: 500px;

}

.section-client .swiper-slide {
    height: 200px;
}

/* ========= End Client ========= */



/* ========= Start Footer ========= */
.section-footer {
    background-color: #1A2F44;
}

.section-footer .footer-logo {
    font-family: var(--sf-pro-display-bold);
    font-size: 3rem;
}

.section-footer .footer-title {
    font-size: 1.2rem;
    color: var(--yellow);
}

.section-footer ul li:first-child {
    margin-top: 1.5rem;
}

.section-footer ul li {
    margin-top: 0.5rem;
}

.section-footer ul li a {
    color: #fff;
}

.section-footer .social-media ul li {
    display: inline;
}


.section-footer .social-media ul li a {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    padding: 0;
    text-decoration: none;
    text-align: center;
    color: var(--dark);
    background-color: #fff;
    font-size: 1rem;
    font-weight: normal;
    line-height: 2em;
    border-radius: 1.6875rem;
    transition: all 0.5s ease;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.section-footer .footer-copyright {}

.section-footer .footer-copyright .copyright-text {
    color: rgba(255, 255, 255, 0.5);
}

.section-footer .footer-copyright .copyright-link a {
    color: #FFF;
}

.div-line {
    background-color: #FFF;
    opacity: 0.16;
    width: 100%;
    height: 1px;
    margin: 50px 0;
}

/* ========= End Footer ========= */