@import url('https://fonts.googleapis.com/css2?family=Red+Rose:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Red+Rose:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


/*==============================================================*/
/* ======================== BODY DEFAULT =====================*/
/*==============================================================*/

.padding-set{
    padding-left:80px;
    padding-right: 80px;
}
.padding-small{
    padding-left:2%;
    padding-right: 2%;
}


/*==============================================================*/
/* ======================== NAVIGATION BAR =====================*/
/*==============================================================*/

        

* {
    line-height: 25.2px;
}

.offcanvas {
    background-color: #7A1315; /* Change this to your desired background color */
    padding-left: 110px;
    padding-right: 70px;
    padding-top: 10px;
}

.image-container {
    position: relative;
}

.link-area {
    position: absolute;
}

.trang-chu {
    left: 40%;
    top: 0%;
    width: 15%;
    height: 8%;
}

.du-an {
    left: 23%;
    top: 41%;
    width: 11%;
    height: 8%;
}

.lien-he {
    left: 65%;
    right: 10%;
    top: 50%;
    width: 12%;
    height: 8%;
}

.ve-chung-toi {
    left: 42%;
    /* right: 45%; */
    bottom: 0%;
    width: 19%;
    height: 8%;
}

button.navbar-toggler.custom-toggler {
    border: none !important;
    outline: none !important;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 0;
    width: auto;
    display: flex;
    align-items: center;
}

button.navbar-toggler.custom-toggler:hover,
button.navbar-toggler.custom-toggler:active,
button.navbar-toggler.custom-toggler:focus,
button.navbar-toggler.custom-toggler:visited
{
    border: none !important;
    outline: none !important;
    overflow-x: hidden;
    box-shadow: none;
}


img.navbar-toggler-img {
    width: 102px;
    /* max-width: 70px;  */
    height: auto; /* Maintain the aspect ratio */
    border: none !important;

}

.fixed-button {
    position: fixed;
    bottom: 36px;
    /* left: 10px; */
    z-index: 1000; /* Ensure it is above other elements */
    text-decoration: none;
}

.fixed-button-img {
    /* width: 50px; */
    height: auto; /* Maintain aspect ratio */
    width: 70%;
}

.lien-he-box {
    padding: 0;
}
.text-box {
    display: flex; /* Use flexbox to arrange text and square */
    align-items: center; /* Vertically align items */
  }

.text-box span {
color: var(--BLACK, #000);
font-family: "Plus Jakarta Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
text-decoration: none;
}

.menu {
    padding: 0;
}


.text-box-menu {
    display: flex; /* Use flexbox to arrange text and square */
    align-items: center; /* Vertically align items */
  }

.text-box-menu span{
    color: var(--BLACK, #000);
    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
}
.circle {
    width: 50px; /* Adjust size as needed */
    height: 50px;
    background: var(--RED, #CE9458);    
    margin-left: 15px;
    border-radius: 50%;
  }
  
.square {
    width: 46px; /* Adjust size as needed */
    height: 46px;
    background: var(--RED, #7A1315);    
    margin-right: 15px;
  }


.square.yellow {
    background: var(--YELLOW, #CE9458);
}

.text-box span.white {
    color: transparent;
}

.text-box-menu span.white {
    color: white;
}

.navbar {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid black;
    margin: 0px;
    background: white;
    transition: background-color 0.3s;
}
/* width="48" height="52"  */
.corner-img {
    width: 50%;
}


.close-img {
    padding-right: 0;
    margin-right: 0;
    padding-right: 0;
}

.offcanvas-header {
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
   
}

@media (max-width: 576px) {
    .padding-set {
        padding-left: 20px;
        padding-right: 20px;
    }

    .offcanvas {
        padding-left: 20px;
        padding-right: 10px;
        padding-top: 10px;  
    }


    .offcanvas-header {
        padding-top: 10px;
    }

    .corner-img {
        width: 70%;
    }

    .image-container {
        margin-top: 10px;
    }

    .navbar-logo {
        width: 25px;
        height: 33px;
    }

    .menu-img {
        width: 40%;
    }

    .circle {
        width: 25px; /* Adjust size as needed */
        height: 25px;
        margin-left: 10px;
      }
      
    .square {
        width: 25px; /* Adjust size as needed */
        height: 25px;
      }

    .fixed-button-img {
    width: 40%;
    }

    .text-box-menu span{
        font-size: 12px;
    }

    .text-box span {
        font-size: 12px;
    }

    .navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .fixed-button {
        position: fixed;
        bottom: 10px;
    }
    
}

@media (min-width: 576px) and (max-width: 768px) {

    .padding-set {
        padding-left: 60px;
        padding-right: 60px;
    }
    .offcanvas {
        padding-left: 60px;
        padding-right: 50px;
        padding-top: 10px;       
    }

    .corner-img {
        width: 50%;
    }
    .image-container {
        margin-top: 20px;
    }
    .offcanvas-header {
        padding-top: 10px;
    }
    .navbar-logo {
        width: 25px;
        height: 33px;
    }

    .menu-img {
        width: 40%;
    }

    .circle {
        width: 25px; /* Adjust size as needed */
        height: 25px;
        margin-left: 10px;
      }
      
    .square {
        width: 25px; /* Adjust size as needed */
        height: 25px;
      }

    .fixed-button-img {
    width: 40%;
    }

    .text-box-menu span{
        font-size: 12px;
    }

    .text-box span {
        font-size: 12px;
    }

    .navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .fixed-button {
        position: fixed;
        bottom: 10px;
    }
    
}

@media (min-width: 768px) and (max-width: 992px) {
    .padding-set {
        padding-left: 70px;
        padding-right: 70px;
    }
    .offcanvas {
        padding-left: 70px;
        padding-right: 60px;
        padding-top: 10px;       
    }

    .corner-img {
        width: 50%;
    }
    .image-container {
        margin-top: 20px;
    }

    .navbar-logo {
        width: 30px;
        height: 38px;
    }

    .menu-img {
        width: 50%;
    }

    .circle {
        width: 30px; /* Adjust size as needed */
        height: 30px;
      }
      
    .square {
        width: 30px; /* Adjust size as needed */
        height: 30px;
      }

    .fixed-button-img {
    width: 50%;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .padding-set {
        padding-left: 90px;
        padding-right: 90px;
    }
    .offcanvas {
        padding-left: 90px;
        padding-right: 80px;
        padding-top: 10px;   }

    .corner-img {
        width: 50%;
    }
    .image-container {
        margin-top: 20px;
    }

    .navbar-logo {
        width: 40px;
        height: 48px;
    }

    .menu-img {
        width: 70%;
    }

    .circle {
        width: 40px; /* Adjust size as needed */
        height: 40px;
        margin-left: 10px;
      }
      
    .square {
        width: 40px; /* Adjust size as needed */
        height: 40px;
      }
    /* .fixed-button-img {
    width: 70%;
    } */

}

/* @media (min-width: 1200px) and (max-width: 1400px) {
    .offcanvas {
        padding: 10px 90px;
    }
} */

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

    .padding-set {
        padding-left: 180px;
        padding-right: 180px;
    }

    .offcanvas {
        padding-left: 180px;
        padding-right: 170px;
        padding-top: 10px;
    }
    .corner-img {
        width: 60%;
    }
    .image-container {
        margin-top: 20px;
    }

    .navbar-logo {
        width: 59px;
        height: 68px;
    }

    .menu-img {
        width: 100%;
    }

    .text-box-menu span{
        font-size: 20px;
    }

    .text-box span {
        font-size: 20px;
    }

    .circle {
        width: 68px; 
        height: 68px;
      }
      
    .square {
        width: 68px; 
        height: 68px;
      }


    .fixed-button-img {
        width: 100%;
    }
}
 */

/*==============================================================*/
/* ======================== HOME PAGE =========================*/
/*==============================================================*/

/* @media (width<1200px) {
    .action-quote {
      font-size: 18px;
      margin-bottom: 10px;
    }
  
    .action-text {
      font-size: 15px;
    }
  }
  
  
  
  @media (width<991px) {
    .action-quote {
      font-size: 16px;
      margin-bottom: 10px;
      margin-left: 10%;
    }
  
    .action-text {
      font-size: 14px;
      margin-left: 10%;
    }
  }
  
  
  @media (width<768px) {
    .col-6half {
      width: 100%;
    }
  }   */

.intro{
    margin-top: 0; /* Remove default margin-top */
}
.intro .container-fluid {
    /* padding: 20px;  */
    text-align: center;
    margin: 0px;
}

.intro img {
    max-width: 100%;
    height: auto;
}

.intro-text {
    /* border: 2px solid red; */
    padding: 0;
}
.intro-title{
    padding: 0;
    text-align: left;
    color: var(--RED, #7A1315);
    /* Website/Title 1 */
    font-family: "Red Rose";
    font-size: 125px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 30px;
}

.intro-content {
    margin: 0;
    padding:0;
    text-align: left;
    color: var(--BLACK, #000);
    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.section-start {
    margin-top: 5%;
}
.section-title {
    color: var(--RED, #7A1315);
    font-family: "Plus Jakarta Sans";
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


:root {
    --white-100: hsl(206, 5%, 100%);
    --white-200: hsl(206, 5%, 90%);
    --white-300: hsl(206, 5%, 80%);
    --white-400: hsl(206, 5%, 65%);
    --white-500: hsl(206, 5%, 45%);
    --black-100: hsl(210, 20%, 10%);
    --black-200: hsl(210, 20%, 8%);
    --black-300: hsl(210, 20%, 6%);
    --black-400: hsl(210, 20%, 4%);
    --black-500: hsl(210, 20%, 1%);
}

/* body {
    font-family: "Rubik", sans-serif;
    background-color: var(--white-100);
    color: var(--black-500);
} */

.swiper-img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
    display: none; /* Hide arrows and pagination dots */
}

.slider-section {
    margin-top: 36px;
}
.swiper-slide .slide-content {
    display: none; /* Hide the content by default */
}

.swiper-slide-active .slide-content {
    display: block; /* Show the content only when the slide is active */
}

.swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -40px; /* Half of the spaceBetween value */
    width: 2px;
    z-index: 10;
    height: 330px; /* Adjust the height as needed */
    display: none;
}

.swiper-wrapper {
    position: relative;
    display: flex;
}

.swiper-slide {
    position: relative;
}

.project-name {
    color: var(--BLACK, #000);
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 28px;
}

.project-type {
    color: var(--BLACK, #000);
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.all-project-btn {
    padding: 10px 20px;
    border-radius: 42.5px;
    background: var(--RED, #7A1315);
    border: none;

    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.all-project-btn:active, .all-project-btn:focus, .all-project-btn:visited, .all-project-btn:hover {
    border: none;
    outline: none;
}

.all-project-btn a {
    text-decoration: none;
    color: white;
}

.wrapper {
    margin-top: 20px;
}

.service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
    /* background-color: #f0f0f0; */
    border-bottom: 2px solid var(--BLACK, #000);

    color: var(--BLACK, #000);
    font-family: "Plus Jakarta Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.service-content {
    display: none;
    /* padding: 10px; */
    /* border: 1px solid #ccc;
    background-color: #fff; */
    border-bottom:2px solid var(--BLACK, #000);
}

.section-service.active .service-content {
    display: block;
}

.service-toggle {
    width: 36px;
    height: 36px;
    background-image: url('../images/plus.png'); /* Replace 'toggle-img1.png' with your toggle image URL */
    background-size: cover;
}

.service-toggle.active {
    background-image: url('../images/collapse.png'); /* Replace 'toggle-img2.png' with your active toggle image URL */
}

.service-img {
    /* display: block; */
    max-width: 100%;
    /* height: auto;
    object-fit: cover; */
}

.service-info {
  color: #000;
  font-family: "Plus Jakarta Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 25.2px;
  margin-top: 20px;
}

.service-header.collapsed {
    border-bottom: none;
}

.service {
    margin-bottom: 5%;
}

/* body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */
.footer {
    background-color: #7d0a0a;
    color: white;
    padding-top: 2%;
    padding-bottom: 0px;
}
.footer a {
    color: white;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
.footer .contact-info {
    line-height: 2;
}
.footer .contact-info a {
    display: block;
}

.com-name {
    color: var(--WHITE, #FFF);
    font-family: "Plus Jakarta Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.footer-text {
    color: var(--WHITE, #FFF);
    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.header-footer {
    padding: 40px 0;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    margin-bottom: 20px;
}
.dia-chi-footer {
    margin-top: 5%;
    margin-bottom: 2%;
}
.list-unstyled{
    margin-top: 76px;
}
.list-unstyled >li>:active, .list-unstyled >li>:hover, .list-unstyled >li>:focus,  .list-unstyled >li>:visited {
    text-decoration: none;
}

/* ABOUT US*/
.info {
    margin-top: 5%;
}
.info-title {
    color: var(--BLACK, #000);
    font-family: "Plus Jakarta Sans";
    font-size: 45px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 5%;
    
}
.line {
    border-bottom: 2px solid black;
}

.content-part {
    margin-top: 30px;
}

.info-content {
    color: var(--BLACK, #000);
    font-family: "Plus Jakarta Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-right: 70px;
}


.intro-images img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px; 
}

.content-cnt {
    margin-top: 5%;
}
.content-cnt-img {
    width: 100%;
    height: auto;
}

.content-cnt-img-1 {
    width: 50%;
    height: auto;
    padding-bottom: 20px;
}

.triet-ly {
    margin-top: 5%;
}

.triet-ly-title {
    color: var(--BLACK, #000);
    font-family: "Plus Jakarta Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.triet-ly-content {
    width: 40%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}


.animated {
    width: 100%;
    height: 430px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 2px solid black; */
}

.circle-ani, .square-ani {
    position: absolute;
    bottom: -20px;
    opacity: 1;
    transition: all 1s ease;
}

.circle-ani {
    width: 349px;
    height: 349px;
    background-color: #CE9458;
    border-radius: 100%;
}

.square-ani {
    width: 350px;
    height: 350px;
    background-color: #7A1315;
}

.animate .circle-ani {
    left: 23.5%;
    bottom: 15%;
    opacity: 1;
}

.animate .square-ani {
    right: 23.5%;
    bottom: 15%;
    opacity: 1;
}

.merge .circle-ani {
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: mergeCircle 0.5s forwards;
}

.merge .square-ani {
    right: 50%;
    transform: translateX(50%);
    animation: mergeSquare 0.5s forwards;
}



.ra-doi-title {
    color: var(--BLACK, #000);
    text-align: center;
    font-family: "Plus Jakarta Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 40px 0;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}


.mini-title {
    color: var(--BLACK, #000);
/* Website/Sub Title */
font-family: "Plus Jakarta Sans";
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-top: 5%;
margin-bottom: 20px;
padding-left: 0;
margin-left: 0;
}

.ra-doi-left {
    padding-right: 40px;
    
}

.ra-doi-right {
    padding-left: 100px;
}


.ra-doi-img {
    width: 100%;
}

.ra-doi-2 {
    margin-top: 5%;
}

.gia-tri {
    margin-top: 5%;
}

.gia-tri-box {
    border-top: 2px solid black;
    border-bottom: 2px solid black; 

}

.gia-tri-left {
    padding: 20px 0px ;
    margin: 0;
}

.gia-tri-left .mini-title {
    margin: 0;
}
.gia-tri-right {
    /* border-bottom: 2px solid black; */
    border-left: 2px solid black;
    /* border: 2px solid red; */
    padding: 0;
}

.last-com {
    border-bottom: none;
}

.last-info{
    border-bottom: none;

}
.padding-mini {
    padding: 20px;
}

.gia-tri-wrap {
    /* border: 2px solid red; */
    margin: 0;
}

.padding-collapse {
    padding: 0px 90px 20px 20px;
}
.lien-he-part {
    margin-bottom: 5%;
}
.lien-he-cnt {
    width: 50%;
}

.lien-he-mini {
    padding: 20px 60px;
    width: 100%;
}

.lien-he-cnt p {
    text-align: center;
}

@media (max-width: 576px) {
    .intro-title {
        font-size: 40px;
    }
    .intro-content {
        font-size: 14px;
    }
    .section-title {
        font-size: 36px;
    }
    .project-title {
        font-size: 48px;
    }
    .project-name-detail {
        font-size: 32px;
    }
    .project-overview {
        font-size: 14px;
    }
    .service-header {
        font-size: 18px;
    }
    .service-info {
        font-size: 14px;
    }
    .com-name {
        font-size: 20px;
    }
    .footer-text {
        font-size: 12px;
    }
    .info-title {
        font-size: 36px;
    }
    .info-content {
        font-size: 20px;
        padding-right: 0;
    }
    .mini-title {
        font-size: 20px;
    }
    .triet-ly-title {
        font-size: 20px;
    }
    .ra-doi-title {
        font-size: 20px;
    }
    .project-name-info {
        font-size: 28px;
    }
    .relevant-projects-title {
        font-size: 32px;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .intro-title {
        font-size: 60px;
    }
    .intro-content {
        font-size: 16px;
    }
    .section-title {
        font-size: 40px;
    }
    .project-title {
        font-size: 60px;
    }
    .project-name-detail {
        font-size: 36px;
    }
    .project-overview {
        font-size: 16px;
    }
    .service-header {
        font-size: 20px;
    }
    .service-info {
        font-size: 16px;
    }
    .com-name {
        font-size: 24px;
    }
    .footer-text {
        font-size: 14px;
    }
    .info-title {
        font-size: 40px;
    }
    .info-content {
        font-size: 22px;
        padding-right: 0;
    }
    .mini-title {
        font-size: 24px;
    }
    .triet-ly-title {
        font-size: 24px;
    }
    .ra-doi-title {
        font-size: 24px;
    }
    .project-name-info {
        font-size: 32px;
    }
    .relevant-projects-title {
        font-size: 36px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .intro-title {
        font-size: 72px;
    }
    .intro-content {
        font-size: 18px;
    }
    .section-title {
        font-size: 48px;
    }
    .project-title {
        font-size: 72px;
    }
    .project-name-detail {
        font-size: 40px;
    }
    .project-overview {
        font-size: 18px;
    }
    .service-header {
        font-size: 22px;
    }
    .service-info {
        font-size: 18px;
    }
    .com-name {
        font-size: 26px;
    }
    .footer-text {
        font-size: 15px;
    }
    .info-title {
        font-size: 48px;
    }
    .info-content {
        font-size: 24px;
        padding-right: 50px;
    }
    .mini-title {
        font-size: 26px;
    }
    .triet-ly-title {
        font-size: 26px;
    }
    .ra-doi-title {
        font-size: 26px;
    }
    .project-name-info {
        font-size: 36px;
    }
    .relevant-projects-title {
        font-size: 40px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .intro-title {
        font-size: 96px;
    }
    .intro-content {
        font-size: 20px;
    }
    .section-title {
        font-size: 52px;
    }
    .project-title {
        font-size: 100px;
    }
    .project-name-detail {
        font-size: 56px;
    }
    .project-overview {
        font-size: 20px;
    }
    .service-header {
        font-size: 24px;
    }
    .service-info {
        font-size: 20px;
    }
    .com-name {
        font-size: 28px;
    }
    .footer-text {
        font-size: 16px;
    }
    .info-title {
        font-size: 52px;
    }
    .info-content {
        font-size: 20px;
        padding-right: 10px;
    }
    .mini-title {
        font-size: 28px;
    }
    .triet-ly-title {
        font-size: 28px;
    }
    .ra-doi-title {
        font-size: 28px;
    }
    .project-name-info {
        font-size: 48px;
    }
    .relevant-projects-title {
        font-size: 52px;
    }
}

/* @media (min-width: 1200px) and (max-width: 1400px) {
    .intro-title {
        font-size: 100px;
    }
    .intro-content {
        font-size: 22px;
    }
    .section-title {
        font-size: 56px;
    }
    .project-title {
        font-size: 110px;
    }
    .project-name-detail {
        font-size: 62px;
    }
    .project-overview {
        font-size: 22px;
    }
    .service-header {
        font-size: 26px;
    }
    .service-info {
        font-size: 22px;
    }
    .com-name {
        font-size: 30px;
    }
    .footer-text {
        font-size: 17px;
    }
    .info-title {
        font-size: 56px;
    }
    .info-content {
        font-size: 28px;
        padding-right: 90px;
    }
    .mini-title {
        font-size: 30px;
    }
    .triet-ly-title {
        font-size: 30px;
    }
    .ra-doi-title {
        font-size: 30px;
    }
    .project-name-info {
        font-size: 52px;
    }
    .relevant-projects-title {
        font-size: 56px;
    }
}

@media (min-width: 1400px) {
    .intro-title {
        font-size: 125px;
    }
    .intro-content {
        font-size: 24px;
    }
    .section-title {
        font-size: 56px;
    }
    .project-title {
        font-size: 130px;
    }
    .project-name-detail {
        font-size: 68px;
    }
    .project-overview {
        font-size: 24px;
    }
    .service-header {
        font-size: 28px;
    }
    .service-info {
        font-size: 24px;
    }
    .com-name {
        font-size: 32px;
    }
    .footer-text {
        font-size: 18px;
    }
    .info-title {
        font-size: 59px;
    }
    .info-content {
        font-size: 28px;
        padding-right: 100px;
    }
    .mini-title {
        font-size: 32px;
    }
    .triet-ly-title {
        font-size: 32px;
    }
    .ra-doi-title {
        font-size: 32px;
    }
    .project-name-info {
        font-size: 56px;
    }
    .relevant-projects-title {
        font-size: 70px;
    }
} */









/* projects */
.static-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    z-index: 1;
    padding: 10px 20px;
}
.static-header .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-buttons {
    display: flex;
    gap: 20px;
    padding-left: 0px;
}



/* Fading Slides CSS */
.slides-container {
    margin-top: 70px; /* Adjust to the height of the static header */
    height: calc(100vh - 70px); /* Adjust to the height of the static header */
    overflow: hidden;
    position: relative;
}

.slides {
    position: relative;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
    padding-left: 0px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

.slide-content {
    display: flex;
    width: 100%;
}


.project-details {
    padding-left: 20px;
    
}
.project-image {
    margin-bottom: 20px;
}
.project-header {
    display: flex;
    /* justify-content: space-between; */
    /* justify-content: center; */
    align-items: end;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    border-bottom: 2px solid black;
    margin-top: 60px;
}
.view-options {
    display: flex;
    gap: 10px;
    justify-content: end;
    padding: 0;
    margin-bottom: 20px;
}
.view-options img {
    width: 40px;
}

.project-image {
    padding-top: 60px;
    /* padding-left: 0px; */
}

.img-fluid {
    width: 95%;
}

.category {
    padding:  10px 20px;
    background-color: #7A1315;
    border-radius: 42.5px;
    color: white;

    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.project-title {
    color: var(--RED, #7A1315);
    text-align: right;
    /* Website/Title 1 */
    font-family: "Red Rose";
    font-size: 120px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0px;
    padding: 0px;
}

.project-name-detail {
    color: var(--BLACK, #000);
    /* Website/Title 2 */
    font-family: "Plus Jakarta Sans";
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 20px;
    margin-bottom: 20px;
}

.project-overview {
    color: var(--BLACK, #000);
    /* Website/Body height */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}











.swiper-slider-4 .swiper-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.swiper-slider-4 .swiper-button-next,
.swiper-slider-4 .swiper-button-prev,
.swiper-slider-4 .swiper-pagination {
    display: none; /* Show arrows and pagination dots */
}

.slider-section {
    margin-top: 36px;
}

/* .swiper-slider-4 .swiper-slide .slide-content {
    display: none; 
}

.swiper-slider-4 .swiper-slide-active .slide-content {
    display: block;
} */

/* .swiper-slider-4 .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -20px;
    width: 2px;
    background-color: var(--BLACK, #000);
    z-index: 10;
    height: 330px; 
} */

.swiper-slider-4 .swiper-wrapper {
    position: relative;
    display: flex;
}

.swiper-slider-4 .swiper-slide {
    position: relative;
    flex: 1 0 auto; /* Allow the slide to grow and shrink as needed */
    
}

.projects-list {
    margin-top: 7%;
}

.swiper-slider-4 .swiper-slide::after {
    display: none;
}

























.projects-infor .project-image {
    padding-left: 0;  
    margin-right: 0;
}

.projects-infor .img-fluid {
    padding: 0;
}

.projects-infor .project-content {
    margin-top: 20px;
    padding-right: 30px;
}



.project-ct-ovv {
    /* padding-left: 50px; */
    padding-top: 0;
    margin-right: 0;
    /* padding-right: 0; */
}



.project-ct-ovv p {
    margin: 0px;
}

.project-ct-ovv .row {
    margin-bottom: 20px;
}


.project-ct-ovv .final-row {
    border-bottom: 2px solid black;
    padding-bottom: 20px;
}


.project-mini-img .img-fluid {
    padding: 0;
}





.mini-title-project{
    color: var(--RED, #7A1315);
    /* Website/Sub Title */
    font-family: "Plus Jakarta Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    /* margin-top: 20px; */
    margin-bottom: 0px;
}


.project-name-info {
    color: var(--RED, #7A1315);
/* Website/Title 2 */
font-family: "Plus Jakarta Sans";
font-size: 46px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: 10px;
}

.second-part  {
    padding-right: 60px;
    margin: 0;
    /* border: 2px solid rgb(39, 202, 42); */
    margin-top: 4%;
}

.first-page .project-mini-img {
    padding-top: 200px;
}

.project-content {
    flex-grow: 1; /* Makes the project-content take up available space */
}

.relevant-img{
    width: 100%;
}
.big-one {
    padding-left: 80px;
}

.relevant-projects-title{
    color: var(--RED, #7A1315);
/* Website/Title 2 */
font-family: "Plus Jakarta Sans";
font-size: 70px;
font-style: normal;
font-weight: 500;
line-height: normal;
}


.contact {
    margin-top: 8%;
}

.company-name {
    margin-top: 30px;
}

.info-contact {
    padding-left: 150px;
}

.info-contact-r {
    padding-left: 60px;
}

.company-name {
    color: var(--RED, #7A1315);
    /* Website/Sub Title */
    font-family: "Plus Jakarta Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-top: 200px;
}

.contact-title {
    color: var(--RED, #7A1315);
    text-align: center;
    /* Website/Title 1 */
    font-family: "Red Rose";
    font-size: 120px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
        .content-mobile{
            display:none;
        }
        .content-mobile-intro{
            display:none;
        }
        .content-mobile-offcanvas{
            display: none;
        }
        .content-mobile-offcanvas a{
            color: #FFFFFF;
            text-decoration: none;
            font-family: "Red Rose";
            font-weight: 700;
            font-size: 40px;
            line-height: normal;
        }
        .content-mobile-footer{
            display:none;
        }
        .content-mobile-btn{
            display:none;
        }
        
        @media only screen and (max-width: 768px) {
            .content-desktop {
                display: none;
            }
        }
        
        @media only screen and (max-width: 768px) {
            .project-ct-ovv .row{
                margin-bottom: 0px;
            }
            .relevant-projects{
                width: 50%;
            }
            .second-part{
                padding-right: 0;
                margin: 0;
                margin-top: 0;
            }
            .big-one{
                padding-left:0;
            }
            .relevant-projects-title{
                font-size:28px;
            }
            .slides-container {
                margin-top: 10vh;
                overflow: auto;
            }
            .img-fluid{
                width: 100%;
                height: 30vh;
            }
            .project-image{
                padding-top:0;
                margin-bottom: 0;
            }
            .slide{
                padding: 0;
                display:block;
            }
            .mini-title-project{
                font-size: 16px;
            }
            .project-name-info{
                font-size: 24px;
                margin-top: 0px;
            }
            .swiper-img{
                width:100%;
            }
            .slide-content-4{
                margin-bottom:10px;
                color:black;
            }
            .project-name{
                font-size:16px;
                color:var(--RED, #7A1315);
                margin-top: 0;
            }
            .header-buttons {
                gap: 5%;
                padding-right: 0px;
            }
            .project-title{
                text-align: left;
                font-size: 40px;
            }          
            .contact{
                margin-top:17%;
            }
            .info-contact{
                padding-left:0;
            }
            .company-name{
                margin-top:0;
                font-size:25px;
            }
            .contact-title{
                text-align:left;
                padding-top:20%;
                font-size:40px;
            }
            .map iframe{
                width:100%;
                height:50vh;
            }
            .header-footer{
                padding:20px 0;
            }
            .lien-he-mini{
                padding:0;
            }
            .lien-he-cnt{
                width: 100%;
            }
            .gia-tri-right{
                border-top: 2px solid black;
                border-left: none;
                padding: 0;
            }
            .gia-tri-box{
                border-top:none;
            }
            .ra-doi-left {
                padding-right: 2px;
            }
            .ra-doi-title{
                font-size: 16px;
                padding: 20px 0;
            }
            .animated{
                height:200px;
            }
            .circle-ani {
                width: 165px;
                height: 165px;
                background-color: #CE9458;
                border-radius: 100%;
            }
            .square-ani {
                width: 165px;
                height: 165px;
                background-color: #7A1315;
            }
            .triet-ly-content {
                width: 100%;
            }
            .content-mobile{
                display:block;
            }
            .all-project-btn{
                margin-top: 3%;
                margin-left: 30%;
                margin-right: 30%;
                width: 40%;
            }
            .content-mobile-btn {
                display: block;
            }
            .content-mobile-footer{
                display: block;
            }
            .content-mobile-offcanvas{
                display: block;
            }
            .content-mobile-intro{
                display:block;
                padding-top:10%;
            }
            .info-title {
                color: var(--BLACK, #000);
                font-family: "Plus Jakarta Sans";
                font-size: 16px;
                font-style: normal;
                font-weight: bold;
                line-height: normal;
                padding-bottom: 5%;
                padding-right: 2%;
            }
            .info-content {
                font-size: 12px;
                padding-right: 0;
    }
    
        }
 .bubble-container {
      position: relative;
      width: 60px;
      height: 60px;
    }

    .bubble {
      width: 60px;
      height: 60px;
      background: #0078ff;
      border-radius: 50%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 24px;
      cursor: pointer;
    }

    .bubble-links {
      position: absolute;
      top: -10px;
      left: -10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transform: scale(0.8);
      pointer-events: none;
      transition: opacity 0.3s, transform 0.3s;
    }

    .bubble:hover .bubble-links {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }

    .bubble-links a {
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      color: #0078ff;
      font-size: 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      transition: background 0.3s;
    }

    .bubble-links a:hover {
      background: #0078ff;
      color: #fff;
    }

    .bubble-links a i {
      line-height: 1;
    }