.video-container {
    background: url('Themes/Oqtane.Theme.Arsha/assets/video/video-banner.mp4') no-repeat center center;
    background-size: cover;
    /* Cover the entire container */
}

.g-24px {
    gap: 24px;
}

.btn-svg {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

.swiper-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* Adjust the space between buttons */
}

/* .btn-play-pause,
        .btn-prev,
        .btn-next {
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        } */

/*reponsive -article*/
.category-tag {
    margin-bottom: 20px;
}

.hiden-break-point {
    display: none !important;
}

.article-sec {
    background-color: #F4F3F5 !important;
}

.article-card-m {
    margin-bottom: 20px;
}

/* reponsive - video*/
.video-title-txt {
    font-family: Noto Sans;
    font-size: 39.06px;
    font-weight: 700;
    line-height: 54.68px;
}


/* reponsive - main-sec*/
.margin {
    margin-bottom: 20px;
}

.text-style-slider {
    margin-bottom: 60px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: Noto Sans;
    font-size: 39.06px;
    font-weight: 700;
    line-height: 54.68px;
    text-align: center;
}

@media only screen and (max-width: 1025px) {
    .text-style-slider {
        font-family: Noto Sans !important;
        font-size: 39.06px !important;
        font-weight: 700 !important;
        line-height: 48.8px !important;
        text-align: center !important;
    }
}

@media only screen and (max-width: 567px) {
    .text-style-slider {
        font-family: Noto Sans !important;
        font-size: 25px !important;
        font-weight: 700 !important;
        line-height: 35px !important;
        text-align: center !important;
    }
}

.pb-0 {
    padding-bottom: 0;
}

.scale-size {
    /*reponsive here*/
    width: 100% !important;
    height: 100vh !important;
}

.h-40px {
    height: 65.92px !important;
}

.full-screen {
    width: 100%;
    height: 100%;
    position: relative;
}

    .full-screen .video-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .full-screen .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('Themes/Oqtane.Theme.Arsha/assets/img/AG Masking.png') center center no-repeat;
        background-size: cover;
        transition: transform 0.5s ease;
        z-index: 2;
        /* Ensure mask is above the video but below the play button */
    }

    .full-screen:hover .mask {
        transform: scale(30);
        /* Adjust as needed */
    }

    /* Ensure the video play button is above the mask */
    .full-screen .html-video-play {
        z-index: 3;
        display: none;
    }

    .full-screen:hover .html-video-play {
        display: block;
    }

.mt-8 {
    margin-top: 8rem;
}

.pb-8 {
    padding-bottom: 8rem;
}

/* CSS TECHONOLOGY */
/* Card container styles */
.card-tech {
    position: relative;
    width: 270px;
    /* Adjust to your needs */
    height: 350px;
    /* Adjust to your needs */
    overflow: hidden;
    transition: transform 0.3s ease;
    /* Optional: if you want to animate the entire card */
}

    /* Image styles */
    .card-tech .card_img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        left: 0;
        top: 0;
        transition: transform 0.3s ease;
        /* Smooth zoom transition */
    }

    .card-tech:hover .card_img {
        transform: scale(1.15);
        /* Scale up the image on hover */
    }

    /* Gradient overlay using ::before */
    .card-tech::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(180deg, rgba(1, 5, 29, 0.8) 14%, #066BFC 100%);
        opacity: 0;
        transition: opacity 0.5s ease;
        /* Smooth fade-in transition */
        z-index: 1;
        /* Place below the content */
    }

    .card-tech:hover::before {
        opacity: 1;
        /* Show the overlay on hover */
    }

/* Content container styles */
.card-tech-content {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 15px;
    /* Adjust padding as needed */
    color: white;
    z-index: 2;
    /* Ensure content is above the image */
}

/* Title styles */
.card-tech .card-tech-title {
    position: absolute;
    padding-right: 38px;
    font-size: 25px;
    line-height: 35px;
    font-weight: 700;
    top: 72%;
    /* Start position outside the card */
    left: 33px;
    /* Adjust as needed */
    transition: top 0.5s ease;
    /* Smooth transition for movement */
}

.card-tech:hover .card-tech-title {
    top: calc(100% - 320px);
    /* Move up into view */
}

/* Title styles */
.card-tech .card-tech-title-s {
    position: absolute;
    padding-right: 38px;
    font-size: 25px;
    line-height: 35px;
    font-weight: 700;
    top: 62%;
    /* Start position outside the card */
    left: 33px;
    /* Adjust as needed */
    transition: top 0.5s ease;
    /* Smooth transition for movement */
}

.card-tech:hover .card-tech-title-s {
    top: calc(100% - 320px);
    /* Move up into view */
}

/* Paragraph styles */
.card-tech .card-tech-para {
    position: absolute;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    left: -100%;
    /* Start completely outside from the left */
    top: 125px;
    /* Adjust as needed to position below the title */
    width: calc(100% - 50px);
    /* Adjust to fit inside the card */
    transition: left 0.5s ease;
    /* Smooth transition for sliding in */
    opacity: 0;
    /* Start as invisible */
}

/* Show paragraph on hover */
.card-tech:hover .card-tech-para {
    left: 33px;
    /* End position inside the card, adjust as needed */
    opacity: 1;
    /* Fully visible on hover */
    transition: left 0.5s ease, opacity 0.5s ease;
    /* Transition properties */
}

/* Paragraph styles */
.card-tech .card-tech-para-s {
    position: absolute;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    left: -100%;
    /* Start completely outside from the left */
    top: 155px;
    /* Adjust as needed to position below the title */
    width: calc(100% - 50px);
    /* Adjust to fit inside the card */
    transition: left 0.5s ease;
    /* Smooth transition for sliding in */
    opacity: 0;
    /* Start as invisible */
}

/* Show paragraph on hover */
.card-tech:hover .card-tech-para-s {
    left: 33px;
    /* End position inside the card, adjust as needed */
    opacity: 1;
    /* Fully visible on hover */
    transition: left 0.5s ease, opacity 0.5s ease;
    /* Transition properties */
}

/* Button icon styles */
.card-tech .button-icon {
    position: absolute;
    transition: bottom 0.5s ease;
    /* Smooth transition for sliding up */
    right: 1rem;
    /* Adjust as needed */
    bottom: -100%;
    /* Start position outside the card */
    z-index: 2;
}

.card-tech:hover .button-icon {
    bottom: 1rem;
    /* End position inside the card */
}

/* END TECHNOLOGY */

/* Reveal element CSS */
.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 2s ease;
    transition-property: transform, opacity;
}

    .reveal.active {
        transform: translateY(0);
        opacity: 1;
    }

/* End reveal */

.border-article {
    border: none;
}

.img-article {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    max-width: 200% !important;
}

.img-article-first {
    border-radius: 12px;
    width: 100%;
    height: 240px;
    max-width: 200% !important;
}


.zoom-container {
    overflow: hidden;
}

.zoom-on-hover {
    transition: transform 0.3s ease;
}

.zoom-container:hover .zoom-on-hover {
    transform: scale(1.1);
}


.media-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 270px);
}

.meta-container-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: start;
    /* align-items: center; */
    gap: 4px;
}

.meta-item {
    color: #066BFC;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.40px;
    word-wrap: break-word;
}

.padding-articles {
    padding-top: 20px !important;
    padding-left: 20px !important;
}

.meta-info {
    color: #646970;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    word-wrap: break-word;
}

.meta-info-middle {
    padding-left: 12px;
    padding-right: 12px;
    border-left: 1px solid #646970;
    border-right: 1px solid #646970;
}

.divider {
    width: 15px;
    height: 0px;
    transform: rotate(90deg);
    border: 1px #646970 solid;
}

.title-media-card {
    font-size: 25px;
    font-weight: 700;
    line-height: 35px;
    text-align: left;
    color: black;
}

.content-media {
    padding: 25px;
    border-radius: 0 15px 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.entry-meta {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex: 1 0 0;
    align-self: stretch;
}

.image-wrap {
    overflow: hidden;
    border-radius: 12px;
    padding: 0;
}

@media (max-width: 1025px) {
    .padding-articles {
        padding-top: 0 !important;
        padding-left: 32px !important;
    }

    .category-tag {
        margin-bottom: 0px !important;
    }

    .article-card-m {
        margin-bottom: 40px !important;
    }

    .box-shadow-extra-large {
        -webkit-box-shadow: none !important;
    }

    .article-sec {
        background-color: white !important;
    }



    .hiden-break-point {
        display: -webkit-box !important;
    }

    .img-article-first {
        height: 100% !important;
    }

    .card-f_mobile {
        padding-left: 0px !important;
        padding-right: 0px;
    }

    .video-title-txt {
        line-height: 48.8px !important;
    }

    .scale-size {
        width: 100% !important;
        height: 40vh !important;
    }

    .media-body {
        width: calc(100% - 220px);
    }

    .title-media-card {
        font-size: 25px !important;
        font-weight: 700 !important;
        line-height: 35px !important;
    }

    .meta-item {
        font-size: 14px;
    }

    .meta-info {
        font-size: 11px;
    }

    .zoom-on-hover {
        transform: scale(1.05);
    }
}

@media (max-width: 768px) {


    .media-body {
        width: calc(100% - 180px);
    }



    .meta-item {
        font-size: 13px;
    }

    .meta-info {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .bg-cover {
        background-attachment: scroll !important;
    }

    .img-article-first {
        object-position: 0px 0px !important;
    }

    .padding-articles {
        padding-top: 0 !important;
        padding-left: 16px !important;
    }

    .article-text-slide {
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 15px !important;
    }

    .video-title-txt {
        font-size: 25px !important;
        font-weight: 700 !important;
        line-height: 35px !important;
    }

    .scale-size {
        width: 100% !important;
        height: 220px !important;
    }

    .media-body {
        width: calc(100% - 120px);
    }

    .title-media-card {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 22.4px !important;
    }

    .meta-item {
        font-size: 12px;
    }

    .meta-info {
        font-size: 9px;
    }

    .content-media {
        padding: 10px;
    }
}

/*data mobile*/
.card-text-slide-mobile {
    margin: 0 !important;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-align: start;
    color: #394049;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    word-wrap: break-word;
    height: calc(3 * 1.5em);
    /* 3 lines height */
}

.card-action-mobile {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 366px;
    margin-top: 40px;
    margin-bottom: 40px;
    /* margin-right: 0px; */
    box-shadow: 0px 2px 15px 2px rgba(142, 146, 152, 0.20);
    height: auto;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.swiper-container-mobile {
    width: 100%;
    height: 100%;
}

.swiper-slide-mobile {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.align-swiper-tablet {
    position: relative;
    left: 4vh;
    height: 600px;
}

/* Mặc định ẩn tất cả các section */
.data-product-destop,
.data-product-tablet,
.data-product-mobile {
    display: none;
}

/* Hiển thị section cho màn hình trên 1250px */
@media (min-width: 1251px) {
    .data-product-destop {
        display: block;
    }
}

/* Hiển thị section cho màn hình từ 480px đến dưới 1250px */
@media (min-width: 481px) and (max-width: 1250px) {
    .data-product-tablet {
        display: block;
    }
}

/* Hiển thị section cho màn hình dưới 480px */
@media (max-width: 480px) {
    .data-product-mobile {
        display: block;
    }
}

/* Adjust the distance from the left 
        .swiper-button-next {
            right: calc(10% + 28px);
          
        }

        .swiper-button-prev {
            left: calc(10% + 28px);
           
        }
*/


/* iPad Mini (768px - 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1025px) {

    /* Các styles dành cho iPad Mini */
    .btn-next-tablet {
        top: 40%;
        position: absolute;
        z-index: 2;
        height: 10%;
        left: 85% !important;
    }

    .btn-prev-tablet {
        top: 40%;
        position: absolute;
        z-index: 2;
        height: 10%;
        left: 12% !important;
    }
}

/* iPad Air (820px - 1180px) */
@media only screen and (min-width: 820px) and (max-width: 1025px) {

    /* Các styles dành cho iPad Air */
    .btn-next-tablet {
        top: 40%;
        position: absolute;
        z-index: 2;
        height: 10%;
        left: 78% !important;
    }

    .btn-prev-tablet {
        top: 40%;
        position: absolute;
        z-index: 2;
        height: 10%;
        left: 12% !important;
    }
}

/* iPad Pro (1024px - 1366px) */
@media only screen and (min-width: 1024px) and (max-width: 1025px) {

    /* Các styles dành cho iPad Pro */
    .align-swiper-tablet {
        left: 16vh !important;
    }
}

.btn-next-tablet {
    top: 40%;
    position: absolute;
    z-index: 2;
    height: 10%;
    left: 78%;
}

.btn-prev-tablet {
    top: 40%;
    position: absolute;
    z-index: 2;
    height: 10%;
    left: 12%;
}


.swiper-container {
    margin-right: 20px;
    width: 80%;
    height: 600px;
    overflow: hidden;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-action {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 366px;
    margin-right: 20px;
    box-shadow: 0px 2px 15px 2px rgba(142, 146, 152, 0.20);
    height: auto;
    border-radius: 12px;
    transition: transform 0.3s ease;
}



.card-img-top {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.boder-rad {
    border-radius: 25px;
}

.card-body-slide {
    display: flex;
    flex-direction: column;
    padding: 24px;
    height: auto;
    align-items: start;
    /*
        height: 166px;
        padding: 24px;
        */
}

.card-title-slide {
    color: #21272D;
    font-size: 25px;
    margin: 0 !important;
    font-weight: 700;
    line-height: 35px;
    word-wrap: break-word
}

.article-text-slide {
    font-family: Noto Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    margin: 0 !important;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.card-text-slide {
    margin: 0 !important;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    color: #394049;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    word-wrap: break-word
}

.swiper-slide-active .card-action {
    transform: scaleY(1.11);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2);
}

.swiper-slide-next .card-action,
.swiper-slide-prev .card-action {
    transform: scale(1);
}

.swiper-slide-active .know-more {
    display: block;
}

    .swiper-slide-active .know-more:hover {
        text-decoration: underline;
    }

.know-more {
    display: none;
    margin-top: 24px;
    /* Khoảng cách giữa văn bản và nút */
    color: #066BFC;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.40px;
    word-wrap: break-word
}

.know-more-mobile {
    margin-top: 24px;
    /* Khoảng cách giữa văn bản và nút */
    color: #066BFC;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.40px;
    word-wrap: break-word
}

.swiper-button-next,
.swiper-button-prev {
    color: #000;
    position: absolute;
    top: 50%;
    width: calc((100% - 300px) / 2);
    /* Position buttons closer to the sides */
    height: 100%;
    margin-top: -22px;
    z-index: 10;
}

.swiper-button-next {
    right: 0;
}

.swiper-button-prev {
    left: 0;
}

/*career  banner*/
.bg-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.hero-section {
    height: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.hero-title {
    font-weight: 700;
}

.main-banner-title-text {
    width: 100%;
    height: auto;
    color: white;
    font-size: 39.06px;
    margin-bottom: 0px !important;
    font-weight: 700;
    line-height: 54.68px;
    word-wrap: break-word
}

.banner-content-text {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word
}

.banner-subtitle-text {
    color: #45E8FF;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word
}


.button-banner {
    border: 2px solid #45E8FF !important;
}

.color-white {
    color: white !important;
}

.circle-img {
    position: absolute;
    border-radius: 50%;
    transition: transform 1s ease-out, opacity 1s ease-out;
    opacity: 0;
}

.circle-img-left-1 {
    top: 2%;
    left: 0%;
    width: 220px;
    height: 220px;
}

.circle-img-left-2 {
    top: 60%;
    left: 15%;
    width: 150px;
    height: 150px;
}

.circle-img-right-1 {
    top: 40%;
    right: 0%;
    width: 281px;
    height: 281px;
}

@media screen and (max-width: 1144px) {

    .main-banner-title-text {
        font-size: 25px !important;
        line-height: 35px !important;
        text-align: center;
    }

    .banner-content-text {
        font-size: 14px !important;
        line-height: 21px !important;
        text-align: center;
    }

    .banner-subtitle-text {
        font-size: 14px !important;
        line-height: 21px !important;
        text-align: center;
    }
}

@media screen and (max-width: 1250px) {
    .circle-img {
        display: none !important;
    }
}

/*logo session*/
.bg-gradient-45deq-dark-blue {
    background: linear-gradient(45deg, #02257E, #044DC7, #066BFC) !important;
}

/*stack card*/
.stack-card {
    position: relative;
    margin-top: 80px !important;
    height: 550px;
    margin: 0px;
    width: 1140px;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    z-index: 10;
    left: 20%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, rgba(4, 9, 37, 0) 40%, #040925 100%);
    pointer-events: none;
}

.gradient-overlay-rounded {
    position: absolute;
    top: 50%;
    right: -50%;
    width: 814px;
    height: 895px;
    opacity: 0.30;
    background: linear-gradient(90deg, #066BFC 2%, #2BB5FE 63%, #45E8FF 100%);
    box-shadow: 150px 150px 150px;
    border-radius: 9999px;
    filter: blur(150px);
    pointer-events: none;
    z-index: 0;
}

.stack-card img {
    max-width: 50%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.stack-card-body {
    position: relative;
    z-index: 1;
    /*add new*/
    background: #040925;
    color: white;
    display: flex;
    align-items: start;
    justify-content: center;
    width: 50%;
    height: 100%;
    padding: 76px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;
}

.stack-card-title {
    margin-bottom: 0px !important;
    color: white;
    font-size: 39.06px;
    font-weight: 700;
    line-height: 140% !important;
    padding-bottom: 40px;
}

.stack-card-content {
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    padding-bottom: 30px;
    margin: 0px;
}

/* Module Custom Styles */

/* Module Custom Styles */
.pb-0 {
    padding-bottom: 0;
}

.h-vh {
    height: 100vh;
}

.h-40px {
    height: 65.92px !important;
}

.full-screen {
    width: 100%;
    height: 100%;
    position: relative;
}

    .full-screen .video-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .full-screen .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('Themes/Oqtane.Theme.Arsha/assets/img/AG Masking.png') center center no-repeat;
        background-size: cover;
        transition: transform 0.5s ease;
        z-index: 2;
        /* Ensure mask is above the video but below the play button */
    }

    .full-screen:hover .mask {
        transform: scale(30);
        /* Adjust as needed */
    }

    /* Ensure the video play button is above the mask */
    .full-screen .html-video-play {
        z-index: 3;
        display: none;
    }

    .full-screen:hover .html-video-play {
        display: block;
    }

.mt-8 {
    margin-top: 8rem;
}

.pb-8 {
    padding-bottom: 8rem;
}

/* CSS TECHONOLOGY */
/* Card container styles */
.card-tech {
    position: relative;
    width: 270px;
    /* Adjust to your needs */
    height: 350px;
    /* Adjust to your needs */
    overflow: hidden;
    transition: transform 0.3s ease;
    /* Optional: if you want to animate the entire card */
}

    /* Image styles */
    .card-tech .card_img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        left: 0;
        top: 0;
        transition: transform 0.3s ease;
        /* Smooth zoom transition */
    }

    .card-tech:hover .card_img {
        transform: scale(1.15);
        /* Scale up the image on hover */
    }

    /* Gradient overlay using ::before */
    .card-tech::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(180deg, rgba(1, 5, 29, 0.8) 14%, #066BFC 100%);
        opacity: 0;
        transition: opacity 0.5s ease;
        /* Smooth fade-in transition */
        z-index: 1;
        /* Place below the content */
    }

    .card-tech:hover::before {
        opacity: 1;
        /* Show the overlay on hover */
    }

/* Content container styles */
.card-tech-content {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 15px;
    /* Adjust padding as needed */
    color: white;
    z-index: 2;
    /* Ensure content is above the image */
}

/* Title styles */
.card-tech .card-tech-title {
    position: absolute;
    padding-right: 38px;
    font-size: 25px;
    line-height: 35px;
    font-weight: 700;
    top: 72%;
    /* Start position outside the card */
    left: 33px;
    /* Adjust as needed */
    transition: top 0.5s ease;
    /* Smooth transition for movement */
}

.card-tech:hover .card-tech-title {
    top: calc(100% - 320px);
    /* Move up into view */
}

/* Title styles */
.card-tech .card-tech-title-s {
    position: absolute;
    padding-right: 38px;
    font-size: 25px;
    line-height: 35px;
    font-weight: 700;
    top: 62%;
    /* Start position outside the card */
    left: 33px;
    /* Adjust as needed */
    transition: top 0.5s ease;
    /* Smooth transition for movement */
}

.card-tech:hover .card-tech-title-s {
    top: calc(100% - 320px);
    /* Move up into view */
}

/* Paragraph styles */
.card-tech .card-tech-para {
    position: absolute;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    left: -100%;
    /* Start completely outside from the left */
    top: 125px;
    /* Adjust as needed to position below the title */
    width: calc(100% - 50px);
    /* Adjust to fit inside the card */
    transition: left 0.5s ease;
    /* Smooth transition for sliding in */
    opacity: 0;
    /* Start as invisible */
}

/* Show paragraph on hover */
.card-tech:hover .card-tech-para {
    left: 33px;
    /* End position inside the card, adjust as needed */
    opacity: 1;
    /* Fully visible on hover */
    transition: left 0.5s ease, opacity 0.5s ease;
    /* Transition properties */
}

/* Paragraph styles */
.card-tech .card-tech-para-s {
    position: absolute;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    left: -100%;
    /* Start completely outside from the left */
    top: 155px;
    /* Adjust as needed to position below the title */
    width: calc(100% - 50px);
    /* Adjust to fit inside the card */
    transition: left 0.5s ease;
    /* Smooth transition for sliding in */
    opacity: 0;
    /* Start as invisible */
}

/* Show paragraph on hover */
.card-tech:hover .card-tech-para-s {
    left: 33px;
    /* End position inside the card, adjust as needed */
    opacity: 1;
    /* Fully visible on hover */
    transition: left 0.5s ease, opacity 0.5s ease;
    /* Transition properties */
}

/* Button icon styles */
.card-tech .button-icon {
    position: absolute;
    transition: bottom 0.5s ease;
    /* Smooth transition for sliding up */
    right: 1rem;
    /* Adjust as needed */
    bottom: -100%;
    /* Start position outside the card */
    z-index: 2;
}

.card-tech:hover .button-icon {
    bottom: 1rem;
    /* End position inside the card */
}

/* END TECHNOLOGY */

/* Reveal element CSS */
.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 2s ease;
    transition-property: transform, opacity;
}

    .reveal.active {
        transform: translateY(0);
        opacity: 1;
    }

/* End reveal */


.img-article {
    border-radius: 12px;
    width: 100%;
    max-width: 200% !important;
    object-fit: cover;
}

.img-article-first {
    object-position: 0px -40px;
    border-radius: 12px;
    max-height: 240px;
    width: 100%;
    height: 100%;
    max-width: 200% !important;
    object-fit: cover;
}


.zoom-container {
    overflow: hidden;
    overflow: hidden;
    display: inline-block;
}

.zoom-on-hover {
    transition: transform 0.3s ease;
}

.zoom-container:hover .zoom-on-hover {
    transform: scale(1.1);
}


.media-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 270px);
}

.meta-container {
    display: inline-flex;
    width: 100%;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.meta-container-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: start;
    /* align-items: center; */
    gap: 4px;
}

.meta-item {
    color: #066BFC;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.40px;
    word-wrap: break-word;
}

.meta-info {
    color: #646970;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    word-wrap: break-word;
    white-space: nowrap;
}

.divider {
    width: 15px;
    height: 0px;
    transform: rotate(90deg);
    border: 1px #646970 solid;
}

.title-media-card {
    font-size: 25px;
    font-weight: 700;
    line-height: 140% !important;
    text-align: left;
    color: black;
}

.content-media {
    padding: 25px;
    border-radius: 0 15px 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.image-wrap {
    overflow: hidden;
    border-radius: 12px;
}

@media (max-width: 1025px) {
    .border-article {
        padding-bottom: 32px;
        margin-bottom: 32px !important;
        border-radius: 0;
        border-bottom: 1px solid #B9BBBF;
    }

    .blog-standard {
        border-bottom: 1px solid #B9BBBF;
        margin-bottom: 32px;
    }

    .blog-standard-margin {
        margin-bottom: 32px;
    }

    .media-body {
        width: calc(100% - 220px);
    }

    .title-media-card {
        font-size: 22px;
        line-height: 30px;
    }

    .meta-item {
        font-size: 14px;
    }

    .meta-info {
        font-size: 11px;
    }

    .zoom-on-hover {
        transform: scale(1.05);
    }
}

@media (max-width: 768px) {


    .media-body {
        width: calc(100% - 180px);
    }

    .title-media-card {
        font-size: 20px;
        line-height: 28px;
    }

    .meta-item {
        font-size: 13px;
    }

    .meta-info {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .border-article {
        padding-bottom: 24px;
        margin-bottom: 24px !important;
        border-radius: 0;
        border-bottom: 1px solid #B9BBBF;
    }

    .blog-standard {
        border-bottom: 1px solid #B9BBBF;
        margin-bottom: 24px;
    }

    .blog-standard-margin {
        margin-bottom: 24px;
    }


    .media-body {
        width: calc(100% - 120px);
    }

    .title-media-card {
        font-size: 18px;
        line-height: 25px;
    }

    .meta-item {
        font-size: 12px;
    }

    .meta-info {
        font-size: 9px;
    }

    .content-media {
        padding: 10px;
    }
}

/**/
.swiper-button-next {
    right: calc(10% + 28px);
    /* Adjust the distance from the right */
}

.swiper-button-prev {
    left: calc(10% + 28px);
    /* Adjust the distance from the left */
}

.swiper-container {
    margin-right: 20px;
    width: 80%;
    height: 600px;
    overflow: hidden;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-action {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 366px;
    margin-right: 20px;
    box-shadow: 0px 2px 15px 2px rgba(142, 146, 152, 0.20);
    height: auto;
    border-radius: 12px;
    transition: transform 0.3s ease;
}



.card-img-top {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.boder-rad {
    border-radius: 25px;
}

.card-body-slide {
    display: flex;
    flex-direction: column;
    padding: 24px;
    height: auto;
    /*
      height: 166px;
      padding: 24px;
      */
}

.card-title-slide {
    color: #21272D;
    font-size: 25px;
    margin: 0 !important;
    font-weight: 700;
    line-height: 35px;
    word-wrap: break-word
}

.card-text-slide {
    margin: 0 !important;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    color: #394049;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    word-wrap: break-word
}

.swiper-slide-active .card-action {
    transform: scaleY(1.11);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2);
}

.swiper-slide-next .card-action,
.swiper-slide-prev .card-action {
    transform: scale(1);
}

.swiper-slide-active .know-more {
    display: block;
}

    .swiper-slide-active .know-more:hover {
        text-decoration: underline;
    }

.know-more {
    display: none;
    margin-top: 24px;
    /* Kho?ng cách gi?a v?n b?n và nút */
    color: #066BFC;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.40px;
    word-wrap: break-word
}

.swiper-button-next,
.swiper-button-prev {
    color: #000;
    position: absolute;
    top: 50%;
    width: calc((100% - 300px) / 2);
    /* Position buttons closer to the sides */
    height: 100%;
    margin-top: -22px;
    z-index: 10;
}

.swiper-button-next {
    right: 0;
}

.swiper-button-prev {
    left: 0;
}

/*career  banner*/
.bg-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.hero-section {
    height: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.hero-title {
    font-weight: 700;
}

.main-banner-title-text {
    width: 100%;
    height: auto;
    color: white;
    font-size: 39.06px;
    margin-bottom: 0px !important;
    font-weight: 700;
    line-height: 54.68px;
    word-wrap: break-word
}

.banner-content-text {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word
}

.banner-subtitle-text {
    color: #45E8FF;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word
}


.button-banner {
    border: 2px solid #45E8FF !important;
}

.color-white {
    color: white !important;
}

.circle-img {
    position: absolute;
    border-radius: 50%;
    transition: transform 1s ease-out, opacity 1s ease-out;
    opacity: 0;
}

.circle-img-left-1 {
    top: 2%;
    left: 0%;
    width: 220px;
    height: 220px;
}

.circle-img-left-2 {
    top: 60%;
    left: 15%;
    width: 150px;
    height: 150px;
}

.circle-img-right-1 {
    top: 40%;
    right: 0%;
    width: 281px;
    height: 281px;
}

@media screen and (max-width: 1144px) {

    .main-banner-title-text {
        font-size: 25px !important;
        line-height: 35px !important;
        text-align: center;
    }

    .banner-content-text {
        font-size: 14px !important;
        line-height: 21px !important;
        text-align: center;
    }

    .banner-subtitle-text {
        font-size: 14px !important;
        line-height: 21px !important;
        text-align: center;
    }
}

@media screen and (max-width: 1250px) {
    .circle-img {
        display: none !important;
    }
}

/*logo session*/
.bg-gradient-45deq-dark-blue {
    background: linear-gradient(45deg, #02257E, #044DC7, #066BFC) !important;
}

/*stack card*/
.stack-card {
    position: relative;
    margin-top: 80px !important;
    height: 550px;
    margin: 0px;
    width: 1140px;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    z-index: 10;
    left: 20%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, rgba(4, 9, 37, 0) 40%, #040925 100%);
    pointer-events: none;
}

.gradient-overlay-rounded {
    position: absolute;
    top: 50%;
    right: -50%;
    width: 814px;
    height: 895px;
    opacity: 0.30;
    background: linear-gradient(90deg, #066BFC 2%, #2BB5FE 63%, #45E8FF 100%);
    box-shadow: 150px 150px 150px;
    border-radius: 9999px;
    filter: blur(150px);
    pointer-events: none;
    z-index: 0;
}

.stack-card img {
    max-width: 50%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.stack-card-body {
    position: relative;
    z-index: 1;
    /*add new*/
    background: #040925;
    color: white;
    display: flex;
    align-items: start;
    justify-content: center;
    width: 50%;
    height: 100%;
    padding: 76px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;
}

.stack-card-title {
    margin-bottom: 0px !important;
    color: white;
    font-size: 39.06px;
    font-weight: 700;
    line-height: 140% !important;
    padding-bottom: 40px;
}

.stack-card-content {
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    padding-bottom: 30px;
    margin: 0px;
}

@media screen and (max-width: 391px) {
    .card-tech-title {
        color: #ffffff;
    }
}

.para_even {
    max-height: 150px;
    /* Set the desired max height for both paragraphs */
    overflow: hidden;
    /* Hides overflow content */
    height: auto;
    /* Allows the height to adjust based on content */
}

.content-wrapper-home {
    display: flex;
    flex-direction: column;
    /* Stack children vertically */
    justify-content: space-between;
    /* Equal height distribution */
    height: 100%;
    /* Allow it to take full height of the column */
}

.para_even {
    flex: 1;
    /* Allow paragraphs to grow */
    margin: 0;
    /* Remove default margins */
    padding: 0 16px;
    /* Padding for aesthetics */
}

@media screen and (min-width: 992px) {
    .tech_display_sm {
        display: none;
        visibility: hidden;
    }

    .tech_display_md {
        visibility: visible;
    }
}

@media screen and (min-width: 576px) and (max-width: 992px) {
    .tech_display_sm {
        visibility: hidden;
        display: none;
    }

    .tech_display_md {
        visibility: visible;
    }

    .card-tech-title {
        color: #ffffff;
    }

    .responsive_stack-card {
        position: sticky;
        top: 0;
        height: 200px;
        color: white;
        min-height: 600px !important;
    }

        .responsive_stack-card img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            width: 100%;
        }

    .responsive_stack-card-body {
        position: relative;
        z-index: 1;
        /*add new*/
        background: #040925;
        color: white;
        height: Auto;
        padding: 16px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        overflow: hidden;
        position: relative;
        top: -100px;
        align-items: left;
    }

    .responsive_stack-card-title {
        margin-bottom: 0px !important;
        color: white;
        font-family: Noto Sans;
        font-size: 31.25px;
        font-weight: 700;
        line-height: 43.75px;
        text-align: left;
        padding-bottom: 16px;
    }

    .responsive_stack-card-content {
        color: white;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        height: 72px;
        text-align: left;
        margin-bottom: 30px !important;
        margin: 0px;
    }

    .responsive_gradient-overlay {
        position: relative;
        top: -100px;
        z-index: 10;
        left: 0%;
        width: 100%;
        height: 100px;
        background: linear-gradient(180deg, rgba(4, 9, 37, 0) 50%, #040925 100%);
        pointer-events: none;
    }

    .case_studuies_section {
        min-height: 800px;
    }

    .btn_padding_home_casestudies {
        margin-left: 15px;
        width: 142px;
        height: 44px;
        padding: 12px 32px 12px 32px;
        gap: 10px;
        border-radius: 100px 0px 0px 0px;
        border: 2px 0px 0px 0px;
    }

    .res_btn_text {
        font-family: Noto Sans;
        font-size: 14px;
        font-weight: 600;
        line-height: 19.6px;
        text-align: center;
    }

    .margintop {
        margin-top: 81px;
    }

    .card-img-top {
        max-width: 100%;
        /* Limit the max width for mobile */
        margin: 0 auto;
        /* Center the image */
    }

    .card-action {
        width: 100%;
    }

    .swiper-slide-active {
        width: 360px !important;
    }

    .swiper-slide-prev {
        width: 360px !important;
    }

    .swiper-slide-next {
        width: 360px !important;
    }

    .ajust_container {
        width: 100% !important;
        max-width: 1200px !important;
    }
}

@media screen and (min-width: 383px) and (max-width: 575px) {
    /* .swiper-slide-active {
                margin-left: 10% !important;
            } */
}


@media screen and (max-width: 575px) {
    .card-body-slide a img {
        position: absolute;
        left: -15px;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .tech_display_sm {
        display: block;
        visibility: visible;
    }

    .tech_display_md {
        visibility: hidden;
        display: none;
    }

    .responsive_stack-card {
        position: sticky;
        top: 0;
        height: 200px;
        color: white;
        min-height: 600px !important;
    }

        .responsive_stack-card img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            width: 100%;
        }

    .responsive_stack-card-body {
        position: relative;
        z-index: 1;
        /*add new*/
        background: #040925;
        color: white;
        height: Auto;
        padding: 16px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        overflow: hidden;
        position: relative;
        top: -100px;
        align-items: left;
    }

    .responsive_stack-card-title {
        margin-bottom: 0px !important;
        color: white;
        font-family: Noto Sans;
        font-size: 31.25px;
        font-weight: 700;
        line-height: 43.75px;
        text-align: left;
        padding-bottom: 16px;
    }

    .card-body-slide {
        padding: 24px 0;
    }

    .responsive_stack-card-content {
        color: white;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: left;
        margin-bottom: 30px !important;
        margin: 0px;
        height: 72px;
    }

    .responsive_gradient-overlay {
        position: relative;
        top: -100px;
        z-index: 10;
        left: 0%;
        width: 100%;
        height: 100px;
        background: linear-gradient(180deg, rgba(4, 9, 37, 0) 50%, #040925 100%);
        pointer-events: none;
    }

    .swiper-slide-next {
        width: 360px !important;
    }

    .change_bg_color_tech {
        background-color: transparent !important;
        /* Remove background color */
        box-shadow: none !important;
        /* Remove shadow */
    }

    .card-tech-title {
        color: #fff;
        font-weight: 700;
    }

    .card-tech-para {
        color: #fff;
        padding-right: 10px;
    }

    .card-body-slide {
        padding: 24px 0;
    }
}

@media screen and (max-width: 396px) {
    .custom-card h5 {
        font-size: 40px !important;
    }
}