body {
    font-family: "Open Sans", Helvetica, sans-serif;
}

.d-flex {
    display: flex !important;
}
.justify-between{
    flex-direction: row;
    justify-content: space-between;
}
a:hover {
    text-decoration: none;
}
.pb-5, .py-5 {
    padding-bottom: 3rem !important;
}
.px-0 {
    padding-right: 0!important;
    padding-left: 0!important;
}
/* # Header, Main Menu
================================ */

.navbar {
    opacity: 0.8;
    margin-bottom: 0;
    background-color: #fff;
    transition: all 0.2s ease-out;
}

.navbar-container {
    position: relative;
}

.navbar .navbar-nav li a {
    font-size: 14px;
    text-transform: uppercase;
    color: #2e1c05;
    transition: all 0.2s ease-out;
}

.navbar-brand {
    font-size: 25px;
    transition: all 0.2s ease-out;
    color: rgba(200, 100, 0, 0.8);
}

.navbar-scroll {
    opacity: 1;
}

#top-social-menu {
    display: none;
}

@media (min-width: 768px) {
    .navbar {
        height: 100px;
    }

    .navbar-nav > li > a {
        padding: 0;
        margin-top: 35px;
        margin-left: 50px;
        line-height: 70px;
    }

    .navbar-brand {
        font-size: 28px;
        padding: 0;
        height: 100px;
        line-height: 100px;
    }

    #top-social-menu {
        display: initial;
    }

    /* Navbar when scrolled */

    .navbar-scroll {
        height: 70px;
    }

    .navbar-scroll #top-social-menu {
        display: none;
        transition: all 0.2s ease-out;
    }

    .navbar-scroll .navbar-brand {
        height: 70px;
        line-height: 70px;
    }

    .navbar-scroll .navbar-nav > li > a {
        opacity: 1;
        padding: 0;
        margin-top: 0;
    }
}
@media (max-width: 767px) {
    .navbar-brand {
        padding: 0;
    }
    .navbar-brand img {
        height: 50px;
        width: auto;
    }
}

/* # Hover Link Effect
================================ */
@media (min-width: 768px) {
    .navbar-nav > li > a::after {
        position: absolute;
        top: 80%;
        left: 0;
        width: 100%;
        height: 1px;
        background: #2e1c05;
        content: "";
        opacity: 0;
        transition: height 0.3s, opacity 0.3s, transform 0.3s;
        transform: translateY(-10px);
    }

    .navbar-nav > li > a:hover::after,
    .navbar-nav > li > a:focus::after {
        height: 2px;
        opacity: 1;
        transform: translateY(0px);
    }
}

/* # Social menu
================================ */

#top-social-menu {
    position: absolute;
    top: 7px;
    right: 0;
    font-size: 12px;
    z-index: 101;
    padding-right: 0px;
    list-style: none;
    color: #2e1c05;
    transition: all 0.2s ease-out;
}

#top-social-menu li {
    float: left;
    padding: 3px 15px;
}

#top-social-menu li:last-child {
    padding-right: 0;
}

#top-social-menu li a {
    text-decoration: none;
    color: #2e1c05;
}

#top-social-menu li a:hover {
    text-decoration: none;
    color: #543a1a;
}
#top-social-menu li a.top-header {
    background: #337ab7;
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border: 1px solid #337ab7;
    color: #fff;
    border-radius: 8px;
    transition: background 0.8s ease;
}
#top-social-menu li a.top-header:hover svg {
    fill: #337ab7;
}
#top-social-menu li a.top-header:hover {
    background: #ffffff;
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border: 1px solid #337ab7;
    color: #337ab7;
    border-radius: 8px;
}
#top-social-menu i {
    font-size: 16px;

    transition: all 0.2s ease-in;
}

#top-social-menu i:hover {
    text-decoration: none;
    color: #543a1a;
}

/* # Section Full Width Image
================================ */

.full-width-img {
    background: url("https://images.unsplash.com/photo-1474403078171-7f199e9d1335?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80")
    no-repeat center center;
    background-size: cover;
    text-align: center;
    padding-top: 100px;
    height: 450px;
    color: #fff;
}

.box {
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid #000;
    color: #fff;
    text-align: center;
    margin-top: 10px;
    padding: 10px 20px;
}

.subheading-text {
    list-style: none;
    font-size: 35px;
    line-height: 50px;
}

@media (min-width: 768px) {
    .full-width-img {
        padding-top: 110px;
        height: 1000px;
    }

    .subheading-text {
        font-size: 50px;
        line-height: 70px;
    }

    .box {
        margin-top: 100px;
        padding: 80px 20px;
    }
}
/* # Section Black, White
================================ */

.section-black,
.section-white {
    padding: 50px 0;
    color: #fff;
    line-height: 1.7;
}

.section-black h3,
.section-white h3 {
    margin-bottom: 60px;
}

.section-black p,
.section-white p {
    margin-bottom: 60px;
}

.section-black {
    background: linear-gradient(#363437, #121112);
}

.section-white {
    background: linear-gradient(#ffffff, #f3f3f3);
    color: #0e0d0e;
}

/**/
.swiper-slide img {
    width: 100%;
    height: 100%;
    text-align: center;
    max-height: 100vh;
}
section#HomeProject {
    background: -webkit-linear-gradient(270deg, hsla(186, 33%, 94%, 1) 0%, hsla(216, 45%, 79%, 1) 50%, hsla(186, 33%, 94%, 1) 100%);
    padding-bottom: 20px;
}
.project-item {
    padding: 10px;
    border: 1px solid #c7bebe;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

h1.title-hind {
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    padding: 20px;
}

h1.title-hind {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    row-gap: 10px;
    text-align: center;
    justify-content: center;
    justify-items: center;
}

h1.title-hind::before,
h1.title-hind::after {
    width: 100%;
    height: 3px;
    background: #222;
    content: "";
    border-radius: 50%;
}

.pr-item-img figure{
    overflow: hidden;
}
.pr-item-img img{
    width: 100%;
    height: 100%;
    min-height: 202px;
    overflow: hidden;
}
.pr-item-title h3 {
    margin-top: 10px;
}
.pr-item-decs p {
    padding: 15px 0 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 75px;
}
.d-price {
    font-size: 17px;
    color: #f15f25;
}
.pre-viewMoreLink {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    padding: 5px;
}
.pre-viewMoreLink:hover {
    display: flex;
    color: #dd241a;
    align-items: center;
    justify-content: center;
    border: 1px solid #dd241a;
    padding: 5px;
}
.pre-viewMoreLink:hover svg {
    fill: #dd241a;
}
#HomeAbout {
    background: url("/images/bg-3.jpg")
    no-repeat center center;
    background-size: cover;
    text-align: center;
    padding-top: 100px;
    height: 450px;
    color: #fff;
}
#HomeNews {
    padding-bottom: 30px;
}

/* home contact */
.main-ft-registration-section {
    padding: 50px 0 0 0;
    position: relative;
    background-color: #2C2B30;
    overflow: hidden;
}
.main-ft-registration-section::before {
    content: '';
    position: absolute;
    bottom: -30%;
    left: 0;
    width: 20%;
    height: 100%;
    background-image: url(/images/palm-leaves.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    opacity: 1;
    z-index: 1;
    transform: rotate(180deg) scaleX(-1);
}
.main-ft-registration-section::after {
    content: '';
    position: absolute;
    top: -10%;
    right: 0;
    width: 16%;
    height: 100%;
    background-image: url(/images/palm-leaves-2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    opacity: 1;
    z-index: 1;
}
.main-ft-registration-contact {
    max-width: 1000px;
    width: 100%;
    margin: auto;
}
.main-ft-registration-heading {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #ffffff;
    font-family: Cormorant_Infant;
    line-height: 32px;
}
.main-ft-registration-subheading {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 400;
    color: #D3D3D3;
    line-height: 24px;
}
.form-control {
    width: 100%;
    padding: 0.75rem;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 1rem;
}
.main-ft-form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    color: #ffffff;
    padding: 30px 15px;
    margin-bottom: 30px;
}
textarea.main-ft-form-control {
    min-height: 100px;
    resize: none;
}
.btn {
    width: max-content;
    padding: 9px 24px;
    background-color: #ffffff;
    color: #000000;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 16px;
}
.main-ft-btn-register {
    background-color: #ffffff;
    color: #1a1a1a;
    border: none;
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
    transition: all 0.3s;
}
.main-ft-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
}
.main-ft-footer-section {
    padding: 40px 0 0 0;
    background-color: #2C2B30;
    position: relative;
    z-index: 2;
}
.col-12.main-ft-container-element {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}
.ft-element-logo {
    flex: 0 0 40%;
}
.main-ft-land-name {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 15px;
    color: #ffffff;
}
.main-ft-land-description {
    font-size: 16px;
    margin-bottom: 16px;
    color: #e0e0e0;
    line-height: 20px;
    font-weight: 300;
}
.main-ft-footer-heading {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #d4b571;
}
.main-ft-contact-info {
    margin-bottom: 20px;
    color: #A6A6A6;
    font-size: 16px;
    font-weight: 400;
}
.main-ft-social-links {
    margin-top: 20px;
    display: flex;
    gap: 20px
}
.main-ft-contact-info a {
    color: #A6A6A6;
}
.main-ft-contact-info a:hover {
    color: #d4b571;
}
.footer-policy {
    display: flex;
    gap: 20px;
    padding: 10px;
    align-items: center;
    justify-content: center;
}
.footer-policy a {
    color: #A6A6A6;
}
.footer-policy a:hover {
    color: #d4b571;
}
.main-ft-copyright {
    text-align: center;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    padding: 20px 0;
    background-color: #2C2B30;
}

/*.project-item figure {*/
    /*position: relative;*/
/*}*/
/*.project-item figure::before {*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*left: 50%;*/
    /*z-index: 2;*/
    /*display: block;*/
    /*content: '';*/
    /*width: 0;*/
    /*height: 0;*/
    /*background: rgba(255,255,255,.2);*/
    /*border-radius: 100%;*/
    /*-webkit-transform: translate(-50%, -50%);*/
    /*transform: translate(-50%, -50%);*/
    /*opacity: 0;*/
/*}*/
/*.project-item:hover figure::before {*/
    /*-webkit-animation: circle .75s;*/
    /*animation: circle .75s;*/
/*}*/
/*@-webkit-keyframes circle {*/
    /*0% {*/
        /*opacity: 1;*/
    /*}*/
    /*40% {*/
        /*opacity: 1;*/
    /*}*/
    /*100% {*/
        /*width: 200%;*/
        /*height: 200%;*/
        /*opacity: 0;*/
    /*}*/
/*}*/
/*@keyframes circle {*/
    /*0% {*/
        /*opacity: 1;*/
    /*}*/
    /*40% {*/
        /*opacity: 1;*/
    /*}*/
    /*100% {*/
        /*width: 200%;*/
        /*height: 200%;*/
        /*opacity: 0;*/
    /*}*/
/*}*/
.effect-bubba {
    position: relative;
    display: block;
    overflow: hidden;
    background: #000; /* cần để overlay nổi lên khi viền xuất hiện */
}

.effect-bubba figure {
    margin: 0;
    display: block;
    position: relative;
}

.effect-bubba img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* tạo khung viền */
.effect-bubba::before,
.effect-bubba::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    opacity: 0;
    transition: all 0.35s ease;
    z-index: 2;
    pointer-events: none;
}

.effect-bubba::before {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: scale(0, 1);
}

.effect-bubba::after {
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: scale(1, 0);
}

/* hiệu ứng khi hover vào thẻ a */
.project-link:hover .effect-bubba img {
    opacity: 0.8;
    transform: scale(1.05);
}

.project-link:hover .effect-bubba::before,
.project-link:hover .effect-bubba::after {
    opacity: 1;
    transform: scale(1, 1);
}

@media (max-width: 767px) {
    .AboutContent {
        padding-left: 15px;
        padding-right: 15px;
    }
}