@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

    .font-main{ font-family: 'Manrope', sans-serif !important; }
    .font-secondary{ font-family: 'Playfair Display', sans-serif !important; }

    /* Body Options */
    body{ font-family: 'Manrope', sans-serif; font-weight: 400; letter-spacing: 0px; font-size:19px; }
    body *{outline:none;}


    ::selection{color:white;background-color:#363636;}

    .colored,.colored-hover:hover,.colored-active.active,
    .plyr--full-ui input[type=range],
    .modern-nav.link-hover-01 .nav-container .nav-menu .nav-links li:not(.extra-links):hover>a.nav-link,
    .modern-nav.link-hover-01 .nav-container li.extra-links>a.nav-link:hover,
    .modern-nav.link-hover-01 .nav-container li.active>a.nav-link,
    .modern-nav.link-hover-01 .nav-container li>a.nav-link.active{
        color:#3f241e !important;
    }
    /* Colored1 */
    .colored1,.colored1-hover:hover,.colored1-active.active{
        color:#080E33 !important;
    }
    /* Colored2 */
    .colored2,.colored2-hover:hover,.colored2-active.active{
        color:#a44b24 !important;
    }
    .text-gradient-yellow {
        /* Tạo dải màu chuyển từ Vàng sáng (Gold) sang Cam/Vàng đậm */
        background: linear-gradient(90deg, #FFD700 0%, #FF8C00 100%);
        
        /* Cắt background theo viền chữ */
        -webkit-background-clip: text;
        background-clip: text;
        
        /* Làm trong suốt màu chữ gốc để lộ background gradient phía sau */
        -webkit-text-fill-color: transparent;
        color: transparent; 
        
        /* Giúp gradient hiển thị chính xác trên thẻ span (inline) */
        display: inline-block; 
    }
/* =============== #3f241e 0%, #a44b24===============================
    BACKGROUND COLORS
============================================== */

    /* bg-colored */
    .bg-colored,.bg-colored-hover:hover,.bg-colored-active.active,.bg-colored-hover-trigger:hover .bg-colored-hover-target,
    .modern-nav .nav-links .nav-link:before,
    .irs-from, .irs-to, .irs-single, .irs-line-left, .irs-line-mid, .irs-line-right,
    .dots-colored-active:not(.dots-circle) .slick-dots li.slick-active:before,
    .plyr__control--overlaid,
    .plyr__volume .plyr__control:hover,
    .plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true],
    .twentytwenty-handle:active,
    .underline-slide.underline-colored:before,.underline-slide.underline-colored:after{
        background-color:#3f241e !important;
    }
    /* bg-colored1 */
    .bg-colored1,.bg-colored1-hover:hover,.bg-colored1-active.active,.bg-colored1-hover-trigger:hover .bg-colored1-hover-target{
        background-color:#f5efe0 !important;
    }
    /* bg-colored2 */
    .bg-colored2,.bg-colored2-hover:hover,.bg-colored2-active.active,.bg-colored1-hover-trigger:hover .bg-colored1-hover-target{
        background-color:#a44b24 !important;
    }

    .bg-gradient-new{
        background: #3f241e;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #a44b24, #3f241e);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #a44b24, #3f241e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        
    }
    /* Soft backgrounds - colored Tones */
    .bg-soft-colored:before,.bg-soft-colored-hover:hover:before,.bg-soft-colored-active.active:before,.bg-soft-colored9:before,.bg-soft-colored9-hover:hover:before,.bg-soft-colored9-active.active:before{background-color:rgba(219,36,27,0.9);}
    .bg-soft-colored1:before,.bg-soft-colored1-hover:hover:before,.bg-soft-colored1-active.active:before{background-color:rgba(219,36,27,0.1);}
    .bg-soft-colored2:before,.bg-soft-colored2-hover:hover:before,.bg-soft-colored2-active.active:before{background-color:rgba(219,36,27,0.2);}
    .bg-soft-colored3:before,.bg-soft-colored3-hover:hover:before,.bg-soft-colored3-active.active:before{background-color:rgba(219,36,27,0.3);}
    .bg-soft-colored4:before,.bg-soft-colored4-hover:hover:before,.bg-soft-colored4-active.active:before{background-color:rgba(219,36,27,0.4);}
    .bg-soft-colored5:before,.bg-soft-colored5-hover:hover:before,.bg-soft-colored5-active.active:before{background-color:rgba(219,36,27,0.5);}
    .bg-soft-colored6:before,.bg-soft-colored6-hover:hover:before,.bg-soft-colored6-active.active:before{background-color:rgba(219,36,27,0.6);}
    .bg-soft-colored7:before,.bg-soft-colored7-hover:hover:before,.bg-soft-colored7-active.active:before{background-color:rgba(219,36,27,0.7);}
    .bg-soft-colored8:before,.bg-soft-colored8-hover:hover:before,.bg-soft-colored8-active.active:before{background-color:rgba(219,36,27,0.8);}
    .bg-soft-colored10:before,.bg-soft-colored10-hover:hover:before,.bg-soft-colored10-active.active:before{background-color:rgba(219,36,27,1);}

/* ==============================================
    BORDER COLORS
============================================== */

    /* b-colored */
    .b-colored,.b-colored-hover:hover,.b-colored-active.active,
    .strip-timeline .dates div:hover:after, .strip-timeline .dates div.active:after,
    .interactive-packages .selector{
        border-color:#3f241e !important;
    }
    /* b-colored1 */
    .b-colored1,.b-colored1-hover:hover,.b-colored1-active.active{
        border-color:#080E33 !important;
    }
    /* b-colored2 */
    .b-colored2,.b-colored2-hover:hover,.b-colored2-active.active{
        border-color:#a44b24 !important;
    }

/* ==============================================
    SVG COLORS
============================================== */

/* Fills */
    /* fill-colored */
    .fill-colored,.fill-colored-hover:hover,.fill-colored-active.active{
        fill:#fcbd0b !important;
    }
    /* fill-colored1 */
    .fill-colored1,.fill-colored1-hover:hover,.fill-colored1-active.active{
        fill:#0068FF !important;
    }
    /* fill-colored2 */
    .fill-colored2,.fill-colored2-hover:hover,.fill-colored2-active.active{
        fill:#811712 !important;
    }

/* Strokes */
    /* stroke-colored */
    .stroke-colored,.stroke-colored-hover:hover,.stroke-colored-active.active{
        stroke:#fcbd0b !important;
    }
    /* stroke-colored1 */
    .stroke-colored1,.stroke-colored1-hover:hover,.stroke-colored1-active.active{
        stroke:#0068FF !important;
    }
    /* stroke-colored2 */
    .stroke-colored2,.stroke-colored2-hover:hover,.stroke-colored2-active.active{
        stroke:#811712 !important;
    }

/* ==============================================
    GRADIENT BACKGROUNDS
============================================== */

    /* bg-gradient, hover, active, bg-soft-gradient */
    .bg-soft-gradient:before,.bg-gradient,.bg-gradient-hover:hover,.bg-gradient-active.active{
        background-image: #202a3e !important; background-image: linear-gradient(45deg, #202a3e 0%, #5b2c2c 100%) !important;
    }
    /* bg-gradient1, hover, active, bg-soft-gradient1 */
    .bg-soft-gradient1:before,.bg-gradient1,.bg-gradient1-hover:hover,.bg-gradient1-active.active{
        background-image: #ba2922 !important; background-image: linear-gradient(45deg, #ba2922 0%, #1a4c98 100%) !important;
    }
    /* bg-gradient2, hover, active, bg-soft-gradient2 */
    .bg-soft-gradient2:before,.bg-gradient2,.bg-gradient2-hover:hover,.bg-gradient2-active.active{
        background-image: #37191f !important; background-image: linear-gradient(-90deg, #37191f 0%, #1f2b4f 100%) !important;
    }
    /* bg-gradient3, hover, active, bg-soft-gradient3 */
    .bg-soft-gradient3:before{ opacity: 0.92;}
    .bg-soft-gradient3:before,.bg-gradient3,.bg-gradient3-hover:hover,.bg-gradient3-active.active{
        background-image: #7CD8AC !important; background-image: linear-gradient(-90deg, #7CD8AC 0%, #57AF82 100%) !important;
    }
    /* bg-gradient4, hover, active, bg-soft-gradient4 */
    .bg-soft-gradient4:before,.bg-gradient4,.bg-gradient4-hover:hover,.bg-gradient4-active.active{
        background-image: #131313 !important; background-image: linear-gradient(45deg,  #131313 0%,#282828 100%) !important;
    }


#content p,
#content h2,
#content h3,
#content h4,
#content h5{
    margin-bottom: 15px;
}
#content img{
    max-width: 100%;
    margin-bottom: 5px;

}
#content ul,
#content ol{
    list-style: disc;
    padding-left: 15px;
}

figure h4{
/*      overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  */
}


/* Container */
.floating-cta {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px; /* khoảng cách giữa các nút */
    z-index: 999;
  }
  
  /* Base button */
  .cta-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    text-decoration: none;
  }
  
  /* Icon chung */
  .cta-btn span {
    color: #fff;
    font-size: 16px;
  }
  
  /* Zalo */
  .cta-btn.zalo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  
  /* Call */
  .cta-btn.call {
    background: #fcbd0b;
  }
  
  /* Layout */
  .cta-btn.layout {
    background: #1D6F41;
  }
  
  /* Ripple effect */
  .cta-btn::before,
  .cta-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.5;
    animation: ripple 1.8s infinite;
  }
  
  .cta-btn::after {
    animation-delay: 0.8s;
  }
  
  /* Set màu ripple theo button */
  .cta-btn.call {
    color: #fcbd0b;
  }
  .cta-btn.layout {
    color: #1D6F41;
  }
  .cta-btn.zalo {
    color: #0068ff;
  }
  
  /* Animation ripple */
  @keyframes ripple {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    100% {
      transform: scale(1.6);
      opacity: 0;
    }
  }
  
  /* Icon nháy nhẹ cho layout */
  .cta-btn.layout span {
    animation: shake 1.2s infinite;
  }
  
  /* Shake */
  @keyframes shake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
  }


    .card-hover {
        transition: all 0.4s ease;
    }
    .card-hover:hover {
        background: rgba(0, 0, 0, 0.03);
    }
    
    .icon-wrap {
        width: 90px;
        height: 90px;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .icon-wrap i {
        color: #6c757d;
        transition: all 0.3s ease;
    }
    
    .card-hover:hover .icon-wrap {
        background: #3f241e; /* primary */
        border-color: #3f241e;
    }
    
    .card-hover:hover .icon-wrap i {
        color: #fff;
    }
    .feature-list .number {
        font-size: 24px;
        font-style: italic;
        color: #6c757d;
        opacity: 0.5;
        transition: all 0.3s ease;
        min-width: 50px;
        padding-top: 8px !important;
    }
    .ratio-9x16 {
        --bs-aspect-ratio: 177.77%; /* 16:9 đảo lại = 9:16 */
      }
    .group-item:hover .number {
        opacity: 1;
        color: #0d6efd; /* primary */
    }
    
    .group-item {
        transition: all 0.3s ease;
    }
    .promo-box {
        background: linear-gradient(135deg, #2A0845 0%, #4B1248 50%, #68205F 100%);
    }
    
    .promo-title {
        color: #e2c073;
        font-size: clamp(24px, 4vw, 32px);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        line-height: 1.4;
    }
    
    .promo-sub {
        color: #f0f0f0;
    }
    
    .promo-inner {
        background: rgba(0, 0, 0, 0.25);
        border: 2px solid #E2C073;
    }
    
    .promo-highlight {
        color: #e2c073;
        font-size: clamp(18px, 3vw, 24px);
        text-transform: uppercase;
    }
    
    .promo-item {
        background: rgba(226, 192, 115, 0.1);
        border: 1px solid rgba(226, 192, 115, 0.5);
        padding: 15px;
        border-radius: 8px;
    }
    
    .promo-note {
        font-style: italic;
        color: #ccc;
    }
    .overview-box {
        background: #fdfafc;
        border: 1px solid #e0d0e0;
    }
    
    .overview-title span {
        color: #4b1248;
        text-transform: uppercase;
        font-size: 24px;
        border-bottom: 3px solid #E2C073;
        padding-bottom: 8px;
    }
    
    .overview-item {
        padding: 12px 0;
        border-bottom: 1px dashed #d5c5d5;
    }
    
    .overview-item:last-child {
        border-bottom: none;
    }
    
    .label {
        color: #68205f;
    }
    
    .content {
        color: #444;
        line-height: 1.6;
    }

.gap-20 { gap: 20px; }
.countdown-item {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 15px;
    border-radius: 10px;
    min-width: 90px;
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
}
.countdown-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.25);
}
@media (max-width: 576px) {
    .gap-10-sm { gap: 10px; }
    .countdown-item { min-width: 70px; padding: 10px 5px; }
}
.fw-bold { font-weight: 700; }
.opacity-8 { opacity: 0.8; }

.colored-new {
    background: linear-gradient(
        120deg,
        #1E120F 0%,
        #3F241E 30%,
        #B07A63 50%,
        #3F241E 70%,
        #1E120F 100%
    );

    background-size: 200% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: goldShine 5s linear infinite;
}


@keyframes goldShine {
    to {
        background-position: 200% center;
    }
}
.text-energy {
    background: linear-gradient(
        90deg,
        #FFF3B0 0%,
        #F7D774 20%,
        #E6B85C 45%,
        #C9972B 70%,
        #FFF1A8 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    letter-spacing: 1px;
}
.img-utility {
    width: 100%;
    /* Thiết lập tỷ lệ khung hình cố định (Chiều rộng / Chiều cao) */
    aspect-ratio: 3 / 2; 
    /* Giúp hình ảnh không bị móp/méo, tự động cắt trung tâm */
    object-fit: cover;
    /* Đảm bảo hình ảnh hiển thị sắc nét */
    object-position: center; 
    display: block;
}

/* Tùy chỉnh thêm để đồng bộ chiều cao của khối nội dung bên dưới (nếu cần) */
.custom-slider .bg-colored {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.custom-slider .px-30 {
    flex-grow: 1; /* Giúp các ô nội dung có chiều cao bằng nhau */
}
.border-bottom {
    border-bottom: 1px solid #fffef3 !important;
}

.project-overview {
    position: relative;
}

.overview-wrapper {
    border: 1px solid rgba(63, 36, 30, 0.12);
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(63, 36, 30, 0.08);
}

.overview-header {
    padding: 50px 30px;
    text-align: center;
    background: linear-gradient(
        135deg,
        #1e120f 0%,
        #3f241e 45%,
        #a44b24 100%
    );
}

.overview-title {
    font-size: 42px;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.overview-subtitle {
    color: rgba(255,255,255,.8);
    font-size: 16px;
    letter-spacing: 1px;
}

.overview-body {
    width: 100%;
}

.overview-row {
    display: flex;
    border-bottom: 1px solid #f3ece7;
}

.overview-row:last-child {
    border-bottom: 0;
}

.overview-label {
    width: 28%;
    padding: 28px 30px;
    background: #fcf8f5;
    font-weight: 700;
    color: #3f241e;
    font-size: 15px;
}

.overview-value {
    width: 72%;
    padding: 28px 30px;
    color: #555;
    line-height: 1.8;
    font-size: 15px;
}

.overview-highlight {
    font-size: 24px;
    font-weight: 800;
    color: #a44b24;
    letter-spacing: 1px;
}

.overview-list {
    margin: 0;
    padding-left: 20px;
}

.overview-list li {
    margin-bottom: 6px;
}

.overview-partner {
    display: flex;
    gap: 25px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.overview-note {
    border: 1px dashed #a44b24;
    border-radius: 12px;
    padding: 15px;
    background: #fcfaf8;
    font-size: 14px;
    line-height: 1.8;
}

.overview-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.overview-tags span {
    padding: 8px 14px;
    border-radius: 999px;
    background: #3f241e;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.overview-penthouse {
    margin-top: 15px;
    color: #a44b24;
    font-weight: 700;
}

.overview-footer {
    padding: 25px;
    text-align: center;
    background: #fcf8f5;
    border-top: 1px solid #f3ece7;
    font-size: 16px;
    color: #3f241e;
}

.overview-footer a {
    color: #a44b24;
    text-decoration: none;
    font-weight: 700;
    margin-left: 5px;
}

.overview-footer a:hover {
    opacity: .8;
}

/* Mobile */

@media (max-width: 768px) {

    .overview-row {
        flex-direction: column;
    }

    .overview-label,
    .overview-value {
        width: 100%;
        padding: 20px;
    }

    .overview-title {
        font-size: 30px;
    }

    .overview-highlight {
        font-size: 18px;
    }

    .overview-tags {
        flex-direction: column;
    }

}

/* =========================================================
   INSIGHTS SECTION
========================================================= */

.insights-section{
    background: #F5EFE0;
    position: relative;
    overflow: hidden;
}

.insights-subtitle{
    display: inline-block;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8B583D;
    margin-bottom: 20px;
    font-weight: 600;
}

.insights-title{
    font-size: clamp(42px,5vw,80px);
    line-height: .9;
    text-transform: uppercase;
    color: #492919;
    font-family: var(--font-secondary);
    margin-bottom: 25px;
}

.insights-line{
    width: 120px;
    height: 1px;
    background: #8B583D;
    margin: 0 auto 30px;
    position: relative;
}

.insights-line::after{
    content: "";
    width: 60px;
    height: 1px;
    background: #8B583D;
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
}

.insights-desc{
    max-width: 760px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    color: #5E514A;
}

/* =========================================================
   WRAPPER
========================================================= */

.insights-wrapper{
    background: #3E241E;
    overflow: hidden;
    border-radius: 10px;
}

/* =========================================================
   IMAGE
========================================================= */

.insights-image-wrap{
    position: relative;
    height: 100%;
    min-height: 760px;
    overflow: hidden;
    background: #EADBC8;
}

.insights-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* overlay */

.insights-overlay{
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 3;
}

.insights-overlay span{
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(62,36,30,.7);
    backdrop-filter: blur(10px);
    color: #fff;
    letter-spacing: 3px;
    font-size: 12px;
}

/* circles */

.insight-circle{
    position: absolute;
    border: 1px dashed rgba(201,128,71,.5);
    border-radius: 50%;
    pointer-events: none;
}

.insight-circle-big{
    width: 420px;
    height: 420px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.insight-circle-medium{
    width: 240px;
    height: 240px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.insight-circle-small{
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* =========================================================
   RIGHT CONTENT
========================================================= */

.insights-list{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.insight-item{
    display: flex;
    gap: 30px;
    padding: 35px 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: all .4s ease;
}

.insight-item:hover{
    background: rgba(255,255,255,.03);
}

.insight-item.active{
    background: rgba(255,255,255,.03);
}

.insight-number{
    min-width: 85px;
}

.insight-number span{
    font-size: 70px;
    line-height: .8;
    font-family: var(--font-secondary);
    background: linear-gradient(180deg,#D58A4C 0%,#F3C18F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.insight-content h3{
    font-size: 24px;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 600;
}

.insight-content p{
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255,255,255,.7);
    margin: 0;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

    .insights-wrapper{
        border-radius: 0;
    }

    .insights-image-wrap{
        min-height: 500px;
    }

    .insight-item{
        padding: 25px 20px;
        gap: 20px;
    }

    .insight-number{
        min-width: 65px;
    }

    .insight-number span{
        font-size: 52px;
    }

    .insight-content h3{
        font-size: 20px;
    }

    .insights-title{
        line-height: 1;
    }
}

@media(max-width:767px){

    .insights-image-wrap{
        min-height: 360px;
    }

    .insight-item{
        flex-direction: column;
        gap: 10px;
    }

    .insight-number{
        min-width: 100%;
    }

    .insight-number span{
        font-size: 42px;
    }

    .insight-content h3{
        font-size: 18px;
    }

    .insights-desc{
        font-size: 14px;
    }
}
.strategy-section{
    position: relative;
    padding: 140px 0;
    background: #f5efe5;
    overflow: hidden;
}

.strategy-heading{
    margin-bottom: 70px;
    max-width: 1000px;
}

.strategy-heading .sub-title{
    display: inline-block;
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #9c7448;
    margin-bottom: 20px;
}

.strategy-heading h2{
    font-size: clamp(42px,5vw,82px);
    line-height: .95;
    font-weight: 700;
    color: #1d1d1d;
    letter-spacing: -2px;
    text-transform: uppercase;
}

.strategy-heading h2 span{
    color: #b7793e;
    font-style: italic;
}

/* LAYOUT */

.strategy-wrapper{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* LEFT */

.strategy-content{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.strategy-item{
    position: relative;
    display: flex;
    gap: 28px;
    padding: 34px;
    border-radius: 28px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0,0,0,.06);
    transition: .4s ease;
}

.strategy-item:hover{
    transform: translateY(-6px);
    background: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
}

.strategy-number{
    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    color: rgba(183,121,62,.18);
    min-width: 90px;
}

.strategy-info h4{
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 10px;
    color: #1a1a1a;
    text-transform: uppercase;
}

.strategy-info span{
    display: inline-block;
    margin-bottom: 18px;
    color: #a06b37;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.strategy-info p{
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color: #555;
}

/* RIGHT */

.strategy-gallery{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
    position: sticky;
    top: 120px;
}

.gallery-item{
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    height: 280px;
    display: block;
}

.gallery-item:nth-child(2),
.gallery-item:nth-child(3){
    transform: translateY(40px);
}

.gallery-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1.2s ease;
}

.gallery-item:hover img{
    transform: scale(1.08);
}

/* MOBILE */

@media(max-width:991px){

    .strategy-section{
        padding: 90px 0;
    }

    .strategy-wrapper{
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .strategy-gallery{
        position: relative;
        top: unset;
    }

    .strategy-heading h2{
        font-size: 44px;
    }

    .strategy-number{
        font-size: 54px;
        min-width: 60px;
    }

    .strategy-info h4{
        font-size: 24px;
    }

    .gallery-item{
        height: 220px;
    }
}

@media(max-width:767px){

    .strategy-item{
        flex-direction: column;
        padding: 26px;
    }

    .strategy-gallery{
        grid-template-columns: 1fr;
    }

    .gallery-item:nth-child(2),
    .gallery-item:nth-child(3){
        transform: none;
    }

    .gallery-item{
        height: 260px;
    }
}
#services{
    background:#3A241C;
}

.sub-title{
    opacity:.7;
}

.white-opacity{
    color:rgba(255,255,255,.72);
}

.border-light-opacity{
    border-color:rgba(255,255,255,.12)!important;
}

.service-number{
    min-width:54px;
    height:54px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#D9B98B;
    font-size:18px;
    font-weight:700;
    font-family:var(--font-secondary);
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(10px);
}

.map-wrapper{
    border-radius:24px;
    overflow:hidden;
}

.img-utility{
    display:block;
    position:relative;
    z-index:2;
}

.map-glow{
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(217,185,139,.18);
    filter:blur(100px);
    right:-80px;
    bottom:-80px;
    z-index:1;
}

.gap-15{
    gap:15px;
}

.radius-20{
    border-radius:20px;
}

@media(max-width:991px){

    #services{
        padding-bottom:60px;
    }

    .service-number{
        min-width:42px;
        height:42px;
        font-size:14px;
    }

}

/* ================================
   VLASTA PREMIER LAYOUT SECTION
================================ */

.section-content {
    position: relative;
}

.section-content h2,
.section-content h3,
.section-content h4 {
    color: #111;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.section-content h2 {
    font-size: 42px;
    letter-spacing: 1px;
}

.section-content h3 {
    font-size: 34px;
    margin-top: 20px;
}

.section-content h4 {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.section-content p {
    font-size: 16px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 18px;
}

.section-content ul {
    padding-left: 22px;
    margin-bottom: 25px;
}

.section-content ul li {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 10px;
}

.section-content strong {
    color: #111;
    font-weight: 700;
}

.section-content a {
    color: #b88a44;
    text-decoration: none;
    transition: all .3s ease;
}

.section-content a:hover {
    color: #000;
}

/* ================================
   TABS
================================ */

.tabbed-content {
    margin-top: 20px;
}

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 35px;
    padding: 0;
    list-style: none;
     border-bottom: 1px solid transparent !important;
}

.nav-tabs .tab {
    margin: 0;
}

.nav-tabs .tab a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 999px;
    background: #f5f5f5;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    transition: all .35s ease;
    border: 1px solid transparent;
}

.nav-tabs .tab.active a,
.nav-tabs .tab a:hover {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: translateY(-2px);
}

/* ================================
   TAB PANELS
================================ */

.tab-panels {
    position: relative;
}

.panel {
    animation: fadeIn .4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   IMAGE STYLE
================================ */

.panel img {
    width: 100%;
    display: block;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    transition: all .5s ease;
}

.panel img:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

/* ================================
   CONTENT BOX
================================ */

.panel p {
    max-width: 900px;
    margin: 0 auto 25px;
    text-align: center;
    color: #666;
}

/* ================================
   GAP
================================ */

.gap-element {
    width: 100%;
}

/* ================================
   MOBILE
================================ */

@media (max-width: 849px) {

    .section-content h2 {
        font-size: 28px;
    }

    .section-content h3 {
        font-size: 24px;
    }

    .section-content h4 {
        font-size: 17px;
        letter-spacing: 1px;
    }

    .section-content p,
    .section-content ul li {
        font-size: 15px;
        line-height: 1.8;
    }

    .nav-tabs {
        gap: 8px;
    }

    .nav-tabs .tab a {
        padding: 12px 18px;
        font-size: 13px;
    }

    .panel img {
        border-radius: 18px;
        margin-bottom: 18px;
    }
}

/* ================================
   LARGE DESKTOP
================================ */

@media (min-width: 1400px) {

    .section-content {
        max-width: 1400px;
        margin: auto;
    }

    .section-content h2 {
        font-size: 52px;
    }

    .section-content p,
    .section-content ul li {
        font-size: 17px;
    }
}
#section_banggia_vlasta{
    padding:100px 0;
    background:#fdf4ee;
    overflow:hidden;
}

.section-subtitle{
    display:inline-block;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#a44b24;
    margin-bottom:15px;
    font-weight:700;
}

.section-title{
    font-size:54px;
    line-height:1.1;
    color:#3f241e;
    font-weight:800;
    margin-bottom:20px;
    text-transform:uppercase;
}

.section-desc{
    max-width:850px;
    margin:0 auto;
    font-size:17px;
    line-height:1.8;
    color:#5d514b;
}

.pricing-card{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    height:100%;
}

.pricing-head{
    padding:45px;
    background:linear-gradient(135deg,#3f241e,#a44b24);
    color:#fff;
}

.pricing-label{
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.7;
}

.pricing-head h3{
    font-size:34px;
    margin:15px 0 10px;
    line-height:1.2;
    color:#fff;
}

.pricing-head p{
    margin:0;
    opacity:.8;
}

.pricing-body{
    padding:20px 45px;
}

.pricing-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 0;
    border-bottom:1px solid #eee;
}

.pricing-item:last-child{
    border:none;
}

.pricing-info h4{
    margin:0;
    font-size:20px;
    color:#3f241e;
}

.pricing-info span{
    font-size:14px;
    color:#777;
}

.pricing-price{
    font-size:22px;
    font-weight:800;
    color:#a44b24;
}

.offer-card{
    background:#3f241e;
    color:#fff;
    padding:45px;
    border-radius:30px;
    height:100%;
    position:relative;
    overflow:hidden;
}

.offer-badge{
    display:inline-block;
    background:#fff;
    color:#3f241e;
    padding:10px 18px;
    border-radius:100px;
    font-size:12px;
    font-weight:700;
    margin-bottom:25px;
}

.offer-card h3{
    color:#fff;
    font-size:30px;
    line-height:1.3;
    margin-bottom:25px;
}

.offer-list{
    margin:0;
    padding-left:20px;
}

.offer-list li{
    margin-bottom:15px;
    line-height:1.7;
    opacity:.9;
}

.offer-card .button{
    margin-top:30px;
    background:#fff!important;
    color:#3f241e!important;
    font-weight:700;
    border:none;
    box-shadow:none;
}

.image-grid-vlasta{
    margin-top:70px;
}

.img-box{
    overflow:hidden;
    border-radius:24px;
}

.img-box img{
    width:100%;
    object-fit:cover;
    transition:.6s ease;
}

.img-box:hover img{
    transform:scale(1.06);
}

.value-title{
    font-size:42px;
    color:#3f241e;
    margin-top:10px;
    margin-bottom:40px;
    font-weight:800;
}

.value-card{
    background:#fff;
    border-radius:24px;
    padding:35px;
    height:100%;
    box-shadow:0 10px 40px rgba(0,0,0,.05);
    transition:.4s ease;
}

.value-card:hover{
    transform:translateY(-8px);
}

.value-number{
    font-size:58px;
    font-weight:800;
    color:#d8b8a7;
    line-height:1;
    margin-bottom:20px;
}

.value-card h4{
    font-size:22px;
    color:#3f241e;
    margin-bottom:15px;
}

.value-card p{
    color:#666;
    line-height:1.8;
    margin:0;
}

@media(max-width:849px){

    #section_banggia_vlasta{
        padding:70px 0;
    }

    .section-title{
        font-size:34px;
    }

    .pricing-head,
    .pricing-body,
    .offer-card{
        padding:30px;
    }

    .pricing-item{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .pricing-price{
        font-size:20px;
    }

    .value-title{
        font-size:30px;
    }



}
/* =========================
   HERO VLASTA
========================= */

.hero-vlasta{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#000;
}

.min-height-screen{
    min-height:100vh;
    padding:120px 0;
}

.videobg{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.videobg video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.55) 45%,
        rgba(0,0,0,.68) 100%
    );
    z-index:2;
}

.hero-blur{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    z-index:1;
}

.hero-blur-1{
    width:500px;
    height:500px;
    background:rgba(212,145,75,.22);
    top:-150px;
    left:-100px;
}

.hero-blur-2{
    width:400px;
    height:400px;
    background:rgba(255,255,255,.08);
    bottom:-150px;
    right:-100px;
}

.hero-content{
    position:relative;
    z-index:5;
    max-width:720px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    padding:10px 18px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    border-radius:100px;
    font-size:12px;
    letter-spacing:1.5px;
    color:#fff;
    margin-bottom:28px;
    text-transform:uppercase;
}

.hero-title{
    font-size:72px;
    line-height:1;
    font-weight:700;
    color:#fff;
    margin-bottom:28px;
}

.hero-title span{
    display:block;
    margin-top:15px;
    font-size:34px;
    line-height:1.2;
    color:#d9a15d;
}

.hero-desc{
    font-size:20px;
    line-height:1.8;
    color:rgba(255,255,255,.85);
    max-width:650px;
}

.hero-highlights{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:45px;
}

.highlight-item{
    min-width:140px;
    padding:20px;
    border-radius:22px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.08);
}

.highlight-item strong{
    display:block;
    font-size:32px;
    line-height:1;
    color:#fff;
}

.highlight-item span{
    display:block;
    margin-top:10px;
    font-size:13px;
    color:rgba(255,255,255,.72);
    text-transform:uppercase;
    letter-spacing:1px;
}

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:45px;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 30px;
    border-radius:100px;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:.4s ease;
    text-decoration:none;
}

.hero-btn-primary{
    background:linear-gradient(135deg,#d9a15d,#9d5f2d);
    color:#fff;
}

.hero-btn-primary:hover{
    transform:translateY(-3px);
    color:#fff;
}

.hero-btn-outline{
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);
    color:#fff;
    backdrop-filter:blur(12px);
}

.hero-btn-outline:hover{
    background:#fff;
    color:#111;
}

/* =========================
   FORM
========================= */

.hero-form-wrap{
    position:relative;
    z-index:5;
    padding:40px;
    border-radius:32px;
    background:rgba(18,18,18,.72);
    backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
    0 30px 60px rgba(0,0,0,.35);
}

.hero-form-sub{
    font-size:12px;
    color:#d9a15d;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.hero-form-title{
    font-size:34px;
    line-height:1.2;
    color:#fff;
    margin-bottom:15px;
}

.hero-form-desc{
    font-size:15px;
    line-height:1.7;
    color:rgba(255,255,255,.7);
    margin-bottom:30px;
}

.form-group{
    margin-bottom:18px;
}

.form-group input,
.form-group select{
    width:100%;
    height:62px;
    border:none;
    outline:none;
    padding:0 22px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:15px;
    border:1px solid rgba(255,255,255,.08);
}

.form-group input::placeholder{
    color:rgba(255,255,255,.45);
}

.form-group select{
    appearance:none;
}

.hero-submit{
    width:100%;
    height:64px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg,#d9a15d,#9d5f2d);
    color:#fff;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:.4s ease;
}

.hero-submit:hover{
    transform:translateY(-2px);
}

.hero-form-note{
    margin-top:18px;
    text-align:center;
    font-size:12px;
    color:rgba(255,255,255,.45);
}

/* =========================
   MOBILE
========================= */

@media(max-width:991px){

    .hero-vlasta{
        text-align:center;
    }

    .hero-title{
        font-size:44px;
    }

    .hero-title span{
        font-size:24px;
    }

    .hero-desc{
        font-size:16px;
        line-height:1.7;
    }

    .hero-highlights{
        justify-content:center;
    }

    .highlight-item{
        min-width:calc(50% - 10px);
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-form-wrap{
        margin-top:40px;
        padding:28px 22px;
    }

}

@media(max-width:767px){

    .min-height-screen{
        padding:100px 0 60px;
    }

    .hero-title{
        font-size:36px;
    }

    .hero-title span{
        font-size:20px;
    }

    .highlight-item{
        min-width:100%;
    }

    .hero-btn{
        width:100%;
    }

}