/* Gian Changes */
:root {
    --default-width: 'fit-content';
    --default-height: 'fit-content';
    --default-border-radius: 0.375rem;
    --default-border: 'none';
    --default-btn-padding-x: 0.75rem;
    --default-btn-padding-y: 0.375rem;
}

/* Fonts */

@font-face {
	font-family: Afacad-Regular;
	src: url(../fonts/Afacad/static/Afacad-Regular.ttf);
	font-weight: normal;
}

@font-face {
	font-family: BeVietnamPro-Regular;
	src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Regular.ttf);
	font-weight: normal;
}

@font-face {
	font-family: BeVietnamPro-Medium;
	src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Medium.ttf);
	font-weight: normal;
}

@font-face {
	font-family: BeVietnamPro-SemiBold;
	src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-SemiBold.ttf);
	font-weight: normal;
}

@font-face {
	font-family: BeVietnamPro-Bold;
	src: url(../fonts/Be_Vietnam_Pro/BeVietnamPro-Bold.ttf);
	font-weight: normal;
}

@font-face {
	font-family: Urbanist-Bold;
	src: url(../fonts/Urbanist/static/Urbanist-Bold.ttf);
}

@font-face {
	font-family: Urbanist-Medium;
	src: url(../fonts/Urbanist/static/Urbanist-Medium.ttf);
}

@font-face {
	font-family: Urbanist-SemiBold;
	src: url(../fonts/Urbanist/static/Urbanist-SemiBold.ttf);
}

@font-face {
	font-family: Urbanist-Black;
	src: url(../fonts/Urbanist/static/Urbanist-Black.ttf);
}


/* End of Fonts */


* {
    margin: 0;
    padding: 0;
}

main {
    font-family: BeVietnamPro-Regular;
}

header {
    background-color: #1b1b1b;
}

[data-history-node-id],
.redirect-page {
    background-image: url(/sites/default/files/2025-06/gridlines-background.webp);
    background-repeat: repeat;
    background-size: 50%;
}

article > div {
    scroll-snap-type: both mandatory;
    scroll-padding: 50%;
}


.layout.layout--onecol {
    scroll-snap-align: center;
}


/* Typography */

h2, 
.h2 {
    font-family: Urbanist-Bold;
    font-weight:bolder!important;
    @media only screen and (max-width: 1200px) {
        line-height: 1.25;    
    }
}

h3, h4, h5, h6,
.h3, .h4, .h5, .h6 {
    font-family: BeVietnamPro-Medium;
    font-weight:bolder!important;
    letter-spacing: 1px;
    @media only screen and (max-width: 1200px) {
        line-height: 1.25;    
    }
}

h1, .h1,
h1 > *, .h1 > * {
    font-family: Urbanist-Black;
    font-size: 94px!important;
    font-weight:bolder;
    line-height: 1.05!important;
    @media only screen and (max-width: 1200px) {
      /* font-size: clamp(3.5rem, 1.8182rem + 3.4091vw, 4.375rem)!important; */
        font-size: calc(4.5rem + 2.5vw) !important;
    }
    @media only screen and (max-width: 576px) {
        font-size: calc(4rem + 2.5vw) !important;
    }
}

h2, .h2,
h2 > *, .h2 > *{
    font-size: 70px!important;
    font-weight:bolder;
    line-height: 1!important; 
    @media only screen and (max-width: 1200px) {
        font-family: Urbanist-Black;
        font-size: calc(3rem + 1.5vw) !important;
    }
}

h3, .h3,
h3 > *, .h3 > *{
    font-size: 55px!important;
    font-weight: bolder;
    font-family: 'BeVietnamPro-Bold' !important;
    @media only screen and (max-width: 1200px) {
        /* font-size: clamp(2rem, 1.8636rem + 0.6818vw, 2.375rem)!important; */
        font-size: calc(2.5rem + 1.5vw) !important;
    }
}

h4, .h4,
h4 > *, .h4 > *{
    font-size: 38px!important;
    font-weight:bolder;
    @media only screen and (max-width: 1200px) {
        font-size: clamp(1.5rem, 1.3316rem + 0.8421vw, 2rem)!important;
    }
}

h5, .h5,
h5 > *, .h5 > *{
    font-size: 25px!important;
    font-weight:bolder;
    @media only screen and (max-width: 1200px) {
        /* font-size: clamp(1.25rem, 1.1447rem + 0.5263vw, 1.5625rem)!important; */
        font-size: calc(1.2rem + 1.325vw) !important;
    }
}

h6, .h6,
h6 > *, .h6 > *{
    font-size: 20px!important;
    font-weight:bolder;
    @media only screen and (max-width: 1200px) {
        font-size: clamp(1rem, 0.9158rem + 0.4211vw, 1.25rem)!important;
    }
}

b, strong {
    font-weight: 900!important;
}

.eco-fs-s {
    font-size: 1rem!important;
    line-height: 1.25rem;
}

p, li {
    font-family: 'BeVietnamPro-Medium';
    font-size: 1.125rem!important; /* 18px */
    line-height: 1.5;
    @media only screen and  (max-width: 768px) { 
        font-family: 'BeVietnamPro-Regular'!important;
    }
}

.subheader {
    color: #f21c1c;
    font-size: clamp(1rem, -0.1111rem + 2.3148vw, 1.625rem);
    font-weight: bolder !important;
    line-height: 1 !important;
    font-family: 'BeVietnamPro-Bold';
}

/* End of Typography */

/* 
footer,
header {
    display: none!important;
} */


/* Utilities */
.form-layout-row .fieldset-wrapper {
    display: flex!important;
    gap: 1rem!important;
}

.font-afacad-regular {
    font-family: Afacad-Regular;
}

.contextual .trigger {
    z-index: 999;
}

.btn-main {
    --bs-btn-color: #fff!important;
    --bs-btn-bg: #BF0000!important;
    --bs-btn-border-color: #BF0000!important;
    --bs-btn-hover-color: #fff!important;
    --bs-btn-hover-bg: #B80000;
    --bs-btn-hover-border-color: #A52834;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #A52834;
    --bs-btn-active-border-color: #A52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #BF0000;
    --bs-btn-disabled-border-color: #BF0000;
}

.btn-outline-main {
    --bs-btn-color: #D22027!important;
    --bs-btn-border-color: #D22027!important;
    --bs-btn-hover-color: #fff!important;
    --bs-btn-hover-bg: #BF0000!important;
    --bs-btn-hover-border-color: #D22027!important;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff!important;
    --bs-btn-active-bg: #BF0000!important;
    --bs-btn-active-border-color: #D22027!important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #BF0000;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #BF0000;
    --bs-gradient: none;
}

.btn-main-lg {
    padding: 1rem 1.5rem;
    font-family: 'BeVietnamPro-Medium';
    font-size: large;
}



    

.object-fit-cover {
    object-fit: cover;
}

/* End of Utilities */

/* Interaction observer */

.observe {
    opacity: 0;  /* Start invisible */
    transition: all 1s ease;
}

body:has(.layout-builder) .head-fixed-top {
    position:static!important;
    background-color: #000 !important;
}


.layout-builder .observe {
    opacity: unset;
}
  
.in-view {
    opacity: 1;
    transition: opacity 1s ease;
}

/* End interaction observer */

/* Components */
p , a {
    font-family: BeVietnamPro-Medium;
    /* font-size: 1.125rem !important; */
    line-height: 1.5;
    font-weight: lighter;
}
.btn {
    font-family: BeVietnamPro-Medium;
    font-size: 1.125rem!important; /* 18px */
    line-height: 1.5;
}

.section {
    width:var( --section-width);
    height:var( --section-height, var( --default-height));
    padding:var( --section-padding)!important;
    flex-wrap:var( --section-flex-wrap);
    margin:var( --section-margin);
    gap:var( --section-gap);
    background-color:var( --section-background-color);
    background-image:var( --section-background-image);
    background-position: var( --section-background-position);
    background-size: var( --section-background-size);
    text-align:var( --section-text-align);
    color:var( --section-color);
    border-radius:var( --section-border-radius);
    border:var( --section-border);
    z-index: var(--section-z-index);
    flex: 1 1  var(--section-flex-basis, unset);

    @media only screen and (max-width: 1024px) {
        width: 100%!important;
        margin: 0!important;
        gap: 1rem;
    }

}

.text {
    width: var( --text-width, var( --default-width))!important;
    height: var( --text-height, var( --default-height))!important;
    padding: var( --text-padding , 0)!important;
    margin: var( --text-margin, 0)!important;
    color:var( --text-color,'#000')!important;
}

.text > * {
    margin: 0;
}

.eco-button {
    width: var( --button-width, var( --default-width))!important;
    height: var( --button-height, var( --default-height));
    padding: var( --button-padding , var( --default-btn-padding-y) var( --default-btn-padding-x))!important;
    margin: var( --button-margin)!important;
    text-align: var( --button-text-align)!important;
    background-color:var( --button-background-color, var(--bs-btn-bg) )!important;
    color:var( --button-color,'#000')!important;
    border-radius:var( --button-border-radius, var(--default-border-radius))!important;
    border:var( --button-border , var(--default-border))!important;
    transition: all 300ms ease-in-out;

    &:hover {
      background-color: var( --button-hover-background-color , var(--bs-btn-bg)) !important;  
      color:#fff!important;
    }
}

.video {
    border-radius:var( --video-border-radius, var(--default-border-radius))!important;
    height: fit-content;
}

.image {
    width:100%;
    max-width: var(--image-width)!important;
    max-height: var(--image-height)!important;
    border-radius: var(--image-border-radius)!important;
    object-fit: var(--image-object-fit)!important;
}

.grid-box {
    gap:var(--grid-box-gap, 0);
}

/* .grid-box-wrapper .row > .section {
    padding: var(--section-padding, .5rem)!important;
} */

.box-icon {
    width:var( --box-icon-width, var( --default-width))!important;
    height:var( --box-icon-height, var( --default-height)) !important;
    padding:var( --box-icon-padding)!important;
    background-color:var( --box-icon-background-color) !important;
    color:var( --box-icon-color) !important;
    border-radius:var( --box-icon-border-radius) !important;
    border:var( --box-icon-border) !important;
}

.box-icon .box-icon-image {
    width: var(--box-icon-image-border-width, 150px);
    height: var(--box-icon-image-border-height, 150px);
    padding: 1rem;
    background: var(--box-icon-image-background-color, white );
    margin-top: var(--box-icon-image-top) !important;
    border: 0.8rem solid var(--box-icon-image-border-color, #e2e2e2 );
}

.box-icon .box-icon-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    padding: 0.3rem;
    object-fit: contain;
}

.card {
    transition: 0.3s ease-in-out;
}

.background-picture .card-body {
    box-shadow: 0px -18rem 70px -21px rgba(0, 0, 0, 0.70) inset;
    overflow: visible;
    backdrop-filter: blur(1px);
    color: white;
    justify-content: flex-end;
}

.card_stretched:hover {
    transform: scale(1.05);
}

.card .button_stretched {
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0!important;
    margin-top: 0 !important;
    background: transparent!important;
    border-color: transparent!important;
    line-height: 0%;
}

.mySwiper {
    width:100%;
    display: flex;
    z-index: 0;
}

.mySwiper swiper-slide {
    display: flex;
    height: auto;
}

.mySwiper .wrapper-box-icon {
    width: 100%;
}

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

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.carousel-slider > div > a {
    padding: 1rem 1.5rem !important;
    font-family: 'BeVietnamPro-Medium';
    font-size: large !important;
}

.counter-item span {
    font-size: 70px!important;
}

.timeline .timeline-item {
    position: relative;
    width: 50%;
    transition: all 1s linear;
    &:hover .indicator::after {
        background-color: white;
        border: 6px solid  #D22027;
    }
    &:hover .content {
        background: #d22027!important;
        color: white!important;
    }

    @media only screen and (max-width: 768px) {
        background: unset!important;
        &:hover .content {
            background: unset!important;
            color: unset;
        }
      }
}

.timeline {
    width:var(--timeline-width);
}

@keyframes background-change {
    35% {
        background: rgb(235, 235, 235);
        color: rgb(0, 0, 0);
    }
    45% {
    background: rgb(175, 0, 0);
    color: #ffffff;
    }
    55% {
        background: rgb(175, 0, 0);
        color: rgb(255, 255, 255);
    }
    65% {
        background: rgb(255, 255, 255);
        color: rgb(0, 0, 0);
    }
}

.timeline-item .content {
    --animation-range-start: 40%;
    --animation-range-end: 100%;
    animation-range: contain var(--animation-range-start) contain var(--animation-range-end);
    view-timeline-inset: 0%;
    animation: background-change linear;
    animation-fill-mode: none;
    /* animation-duration: 1s; */
    animation-timeline: view();
    animation-iteration-count: 1;
    background: rgb(255, 255, 255);
    color: #000;
}

.timeline .timeline-item .content {
    min-height: 150px;
    height: 100%;
}

.timeline .indicator::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: -12px;
    background-color: white;
    border: 6px solid #C7C7C7;
    top: 50%;
    border-radius: 50%;
    z-index: 1;
    transition: all .5s ease-in-out;
    transform: translateY(-50%);
    @media only screen and (max-width: 768px) {
        right: 100%;
        left: 12px!important;
    }
}

.timeline .indicator-right::after {
    right: 100%;
    left: -12px;
}

.timeline .left {
    left: 0;
}

.timeline .right {
    left: 50%;
    @media only screen and (max-width: 768px) {
        left: 0%;
    }
}

.timeline-item .vertical-line::before {
    top: 50% !important;
    transform: translateY(-50%);
    left: 100%;
    @media only screen and (max-width: 768px) {
        left: 24px!important;
        top: 55%!important;
    }
}

.timeline .right .vertical-line::before {
    left: 0%;
}

.link-list .number {
    max-width: 50px;
    width: 100%;
    height: 50px;
    background-color: white;
    font-size: x-large;
    text-align: center;
    place-items: center;
    display: grid;
    font-weight: 300;
    border-radius: 50%;
    border: 1px solid red;
}

.timeline .vertical-line::before,
.link-list .vertical-line::before {
    content: "";
    position: absolute;
    border-left: 1px dashed red;
    width: 0px;
    height: 100%;
    top: 100%;
    z-index: 0;
    @media only screen and (max-width: 1024px) {
        height: calc(100%)!important;
      }
}

.timeline .timeline-item-start::before {
    height: 50%;
    top: 100% !important;
    transform: translateY(-100%);
}

.timeline .timeline-item-end::before {
    height: 50%;
    top: -100% !important;
    transform: translateY(200%);
}

.paragraph:has(.webform-submission-form){
    width:100%;
}

.article-page h1, .article-page .h1, .article-page h1 > *, .article-page .h1 > * {
    font-size: clamp(3.5rem, -1.5278rem + 7.8704vw, 4.375rem)!important;
    font-family: Urbanist-SemiBold;
}

.article-page header {
    height: clamp(23.125rem, 7.25rem + 20vw, 31.25rem);

    @media only screen and (max-width: 1024px) {
        height:60vh!important;
      }
    
    @media only screen and (max-width: 768px) {
        height:100%!important;
      }
}

.article-page-content p, 
.article-page-content p > * {
    text-align: justify;
    color: rgb(18 18 18);
    font-family: BeVietnamPro-Regular;
}

.article-page .grid-box-wrapper {
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.article-page .grid-box-wrapper .row{
    margin-top: 0!important;
    margin-bottom: 0!important;
}

.article-page .carousel-slider {
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.article-page .image-wrapper {
    @media only screen and (max-width: 991.98px) {
        height: 100%!important;
    }
}

.article-comments-section .article-comments-list .links {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 1rem;
}

.article-comments-section .article-comments-list .links li:first-child { order: 2 !important; }
.article-comments-section .article-comments-list .links li:nth-child(2) { order:3!important; }
.article-comments-section .article-comments-list .links li:nth-child(3) { order:1!important; margin-right: auto; }


.other-articles-item .featured-article-image,
.featured-news-image {
    background-size: 130% auto!important;
    background-repeat: no-repeat;
    background-position: center!important;
    transition: all 0.5s linear;
}

.latest-insights-image {
    background-size: auto 130%!important;
    background-repeat: no-repeat;
    background-position: center!important;
    transition: all 0.5s linear;
}

.other-articles-item:hover .featured-article-image,
.other-news-featured-item:hover .featured-news-image {
    background-size: 110% auto!important;
}

.latest-insights-item:hover .latest-insights-image {
    background-size: auto 110%!important;
}

.featured-news-image {
    width: clamp(12.5rem, 4.9051rem + 15.8228vw, 18.75rem)!important;
    height: 100%;
}

.featured-news-featured-image {
    height: 460px;
    object-fit: cover;
    border-radius: 2rem;
}

.featured-news-featured-description {
    line-height: 1.25 !important;
}

.featured-news-description > p,
.featured-news-description {
    word-wrap: unset;
    word-break: unset;
    display: -webkit-box;             
    -webkit-box-orient: vertical;    
    overflow: hidden;                 
    -webkit-line-clamp: 3;            
    text-overflow: ellipsis;
    font-size: 1rem !important;
    line-height: 1.25rem;
    @media only screen and  (max-width: 768px) { 
        font-size: 1.125rem !important;
    }
}

.latest-insights-description > p,
.latest-insights-description,
.service-item-description {
    font-size: 1rem !important;
    word-wrap: unset;
    word-break: unset;
    display: -webkit-box;             
    -webkit-box-orient: vertical;    
    overflow: hidden;                 
    -webkit-line-clamp: 2;            
    text-overflow: ellipsis;
    @media only screen and  (max-width: 768px) { 
        font-size: 1.125rem !important;
    }
}

.service-item-description p {
    font-size: 1rem!important;
    line-height: 1.5rem;
    height:100% !important;
    @media only screen and  (max-width: 768px) { 
        font-size: 1.125rem !important;
    }
}

/* Media Responsive */
/* Small Desktop */
@media only screen and (max-width: 1440px) {
    .section {
        max-width:100% !important;
        height: fit-content;
    }
    .timeline {
        width:100%;
    }
}

/* Laptops */
@media only screen and (max-width: 1270px) {
    .featured-news-title {
        font-size: clamp(1.5rem, 1.3316rem + 0.8421vw, 2rem) !important;
    }
    .featured-news-image {
        width: 100%!important;
        height: 100px!important;
    }
    .timeline .vertical-line::before, .link-list .vertical-line::before {
        height: 150%;
    }
}

/* Tablet Landscape */
@media only screen and (max-width: 1024px) { 
    .gap-eco-md-0 {
        gap:0;
    }
    .text {
        width: 100% !important;
    }
    .timeline {
        width: 100% !important;
    }
    .timeline .vertical-line::before, .link-list .vertical-line::before {
        height: 100%;
    }
    .timeline-item {
        padding: 0 !important;
    }
    .featured-news-image {
        width: clamp(18.75rem, -17.6136rem + 75.7576vw, 25rem)!important;
        height: 100%!important;
    }
    .featured-news-date {
        font-size: 1rem!important;
    }
    
}

/* Large Smartphones */
@media only screen and (max-width: 600px) {
    .section,.image {
        width:100% !important;
        height: fit-content;
    }
    .grid-box {
        grid-template-columns: unset!important;
    }
    .gap-eco-sm-0 {
        gap: 0;
    }

    .gap-eco-sm-1 {
        gap: 1rem;
    }
    .wrapper-box-icon {
        padding: 0!important;
    }
    .testimonial-card img{ 
        width: 100%;
        max-height: 400px;
        object-fit: contain;
    }
    .featured-news-featured-image {
        height: 250px!important;
    }
    .featured-news-featured-description {
        line-height: 1.25!important;
    }
    .featured-news-description > p,
    .featured-news-description {
        word-break: normal;
    }
}

/* Small Smartphones */
@media only screen and (max-width: 320px) {
    .section,
    .box-icon {
        padding: 0.75rem!important;
    }
}

/* End of Media Responsive */

/* End of Gian Changes */

.m-container {
    max-width: 1440px;
    margin: auto;
}
.ltr-rtl > div:only-child > div:only-child{
    display: flex;
}
.ltr-rtl {
    padding: 1rem 0;
    /* background-color: #F4F6FA; */
}
.ltr-rtl .reverse-display {
    flex-direction: row-reverse;
}

.rtl-video {
    display: flex;
    align-items: center;
}

.rtl-image > img {
    width: 100%;
    height: 100%;
}
.rtl-image > video {
    width: -webkit-fill-available;
    height: fit-content;
}
.ltr-ltr-content > div:nth-child(2) {
    border-left: 8px solid #BF0000;
    padding-left: 1rem;
    margin-left: .45rem;
}
.ltr-ltr-content > a {
    width: fit-content;
    padding: 1rem 1.5rem;
    background-color: #BF0000;
    color: white;
    text-decoration: none;
    transition: all 0.075s linear;
    font-family: 'BeVietnamPro-Medium';
    font-size: large;
}

.ltr-ltr-content > a:hover {
    background-color: #DD1B16;
    color: white;
}
.ltr-rtl .p-text {
    padding: 2rem 4rem 0 8rem !important;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-self: center;
}
.ltr-ltr-content {
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-self: center;
}
.multi-rtl > div:only-child {
    padding: 3rem 0;
}
.top-menus .navbar-nav {
    flex-direction: row !important;
    justify-content: space-evenly;
}
.top-menus .navbar-nav .nav-item {
    width: fit-content;
}
.top-menus {
    align-content: center;
}
.rtl-image {
    aspect-ratio: 1500 / 1000;
    padding: 0 2rem;
    @media only screen and (max-width: 1200px) {
        padding: 0 0.75rem;
        aspect-ratio: auto!important;
        order: 1!important;
    }
}

.ltr-ltr-content {
    @media only screen and (max-width: 1200px) {
        padding: 0 0.75rem;
    }
}

.rtl-image:not(:has( img )) {
    aspect-ratio:unset;
}

.rtl-image:has(.grid-box-wrapper) {
    aspect-ratio: unset;
    padding: 0;
    @media only screen and (max-width: 1200px) {
        padding: 0.75rem!important;
    }
}

/* ltr-rtl layout - END */

.icons > div:only-child {
    display: flex;
    gap: 1rem;
}
 
.footer-con > div:first-child > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 .50rem;
    @media only screen and (max-width: 575.98px) {
        align-items: center;
    }
}


.footer-con > div:first-child > div:first-child .f-block-1 {
    @media only screen and (max-width: 575.98px) {
        align-items: center;
    }
}

/* footer-ian Start*/
.footer-block {
    background-color: black;
    color: white;
    padding: 4rem 2rem 3rem 2rem;
}
.footer-con > div:first-child  {
    display: grid;
    grid-template-columns: 2fr 3.5fr;
    gap: 4rem;
}
.footer-con > div:first-child > div:nth-child(2) {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
}

.footer-block .terms-condition > a {
    color: white;
    text-decoration: none;
}
.footer-block .f-down {
    padding: 0; 
}
.contact-info {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 0;
}
.contact-info > li a {
    font-size: 16px;
}
.contact-f {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.footer-block .main-menu > ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin-bottom: 0;
    gap: 3rem;
}
.footer-block .main-menu > ul > li > a {
    font-size: large !important;
    font-weight: bold !important;
}
.footer-block .footer-menu {
    background-color: black;
}
.footer-con .nested-submenu > a {
    color: white;
    text-decoration: none;
}
.footer-con .sub-menu .menus {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.footer-block .main-sub-menu {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-block .has-submenu > span {
    font-size: 17px !important;
    font-family: 'Urbanist-Black';
    text-transform: uppercase;
}

.footer-block .main-sub-menu-item > a {
    color: white;
    text-decoration: none;
    font-size: 16px !important;
    font-weight: 500;
}

.footer-block .main-sub-menu-item > a:hover,
.footer-block .main-sub-menu-item > a:hover,
.contact-info > li a:hover,
.contact-f > span:first-child a:hover,
.top-head .main-sub-menu-item a:hover,
.top-header .main-sub-menu > li a:hover,
.footer-con .nested-submenu > a:hover {
    color: #f21c1c!important;
}
.footer-block .main-sub-menu-item {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.footer-con h2 {
    margin: 0;
}
@media only screen and (max-width: 1200px) {
    .footer-con > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .footer-menu > ul {
        justify-content: space-between !important;
    }
    .footer-block .main-menu > ul {
        justify-content: start;
    }
    .footer-block {
        padding: 2rem 1.5rem;
    }
    .ltr-rtl > div:only-child > div:only-child{
        flex-direction: column;
    }
    .rtl-image ,
    .ltr-ltr-content  {
        width: 100% !important;
    }
}
@media only screen and (max-width: 768px) {
    .footer-con > div:first-child > div:nth-child(2) {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .footer-block .main-menu > ul  {
        justify-content: space-between;
    }
    .rtl-imag {
        padding: 1rem;
    }
    .ltr-ltr-content {
        padding: 1rem;
        gap: 0.5rem;
    }
    .footer-block {
        padding: 1rem 0.75rem;
    }
    .footer-block .terms-condition > a {
        padding: 0!important;
        border: 0!important;
    }
    .footer-block .terms-condition {
        justify-content: space-between;
    }
}
@media only screen and (max-width: 600px) {
    .footer-block .main-menu > ul  {
        flex-direction: column;
        gap: 2rem;
    }
    .footer-con > div:first-child > div:first-child {
        padding: 0;
    }
}

/* /* header STart */
.top-header .main-menu > ul:first-child {
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
    display: flex;
}
.top-header .main-menu > ul:first-child > li.has-submenu:hover > a::after {
    transform: rotate(180deg);
}
.top-header .main-sub-menu-item > a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-family: 'BeVietnamPro-Medium';
    letter-spacing: 0.3px;
}
.top-head .main-sub-menu-item.active > a ,
.footer-block .main-sub-menu-item.active > a,
.footer-con .nested-submenu.active > a,
.level-1 .nested-submenu.active > a,
.level-2 .nested-submenu.active > a {
    color: #BF0000!important;
    font-weight: bold;
}

.top-head > div:only-child {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
   
}
/* new implementation for navigation menu */

#main-header .level-1 {
    left: 42%;
    position: absolute;
    background: #f4f4f4;
    list-style: none;
    margin: 0;
    width: fit-content;
    z-index: 1000;
    box-sizing: border-box;
    place-items: start;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 3rem;
    justify-content: center;
    gap: 2rem;
    overflow-y: auto; /* menu sroll length trigger */
    height: fit-content;
    max-height: 85vh;/*limit*/
    transition: opacity .3s ease-in-out;
    opacity: 1;
    border-bottom: 5px solid #bf0000;
    box-shadow: 4px 6px 11px 0px #3232327d;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.menus {
    padding: 0;
    list-style: none;
}
#main-header .sub-menu {
    max-width: 100%;
    position: absolute;
    top: 136%;
}
.nested-submenu.has-submenu .sub-menu {
    position: static!important;
}
#main-header .nested-submenu {
    width: max-content;
}
#main-header .level-2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
}
#main-header .nested-submenu span {
    font-size: 16px!important;
    font-weight: bold;
}
.nested-submenu span,
.nested-submenu a {
    color: #484848;
    text-decoration: none;
    font-size: 14px !important;
    font-family: 'BeVietnamPro-Bold';
}

.nested-submenu li,
.top-head .main-sub-menu-item > .sub-menu > .level-1 > li > a {
    position: relative;
}

.nested-submenu a:after {
    background: none repeat scroll 0 0 transparent;
    /* bottom: -4px; */
    content: "";
    display: block;
    height: 4px;
    position: absolute;
    background: #bf0000;
    transition: width 0.1s ease 0s;
    width: 0%;
}

.top-head .main-sub-menu-item > .sub-menu > .level-1 > li > a:after {
    bottom: unset;
    top: 1.5rem;
}

.nested-submenu a:hover:after,
.top-head .main-sub-menu-item > .sub-menu > .level-1 > li > a:hover:after {
    width: 100%; 
}



.footer-block .nested-submenu span,
.footer-block .nested-submenu a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px !important;
    font-family: 'BeVietnamPro-Medium';
    position: relative;
}

.submenu-columns {
  display: flex;
  gap: 5rem;
}
.submenu-columns .column {
  list-style: none;
  margin: 0;
  padding: 0;
}
.submenu-columns .column li {
  break-inside: avoid;
}
.top-header .main-sub-menu > li a {
    color: white;
    display: block;
    padding: 10px;
    text-decoration: none;
    width: fit-content;
}
.top-head .main-sub-menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .50rem;
    animation: fadeIn 1s ease-out forwards;
    justify-content: center;
    font-size: 14px !important;
    text-transform: uppercase;
}

.top-head .main-sub-menu-item > .sub-menu > .level-1 > li > a {
    font-size: 16px !important;
    font-weight: bold;
    font-family: 'BeVietnamPro-Bold';
    color: #1b1b1b;
}
.brush-underline {
    color: black;
}
.top-head {
    padding: 1.5rem 1rem;
    background-color: #0e0e0e;
    position: relative;/*drop position*/
    z-index: 2;
    width: 100%;
}
.top-head.is-fixed {
  position: fixed;
  z-index: 1000;
}
.top-head.show  {
    top: 0;
    transform: translateY(0);
    transition: transform 0.5s ease-in-out;
    width: 100%;
}
.top-head.hide {
    position: fixed;
    opacity: 1;
    transform: translateY(-100%);
    transition: all 0.5s ease-in-out;
}
.header-con {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.top-head .mobile-btn {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.mobile-nav-btn {
    position: relative;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.mobile-nav-btn:active {
    transition: .3s ease-in-out;
}

.mobile-nav-btn span,
.mobile-nav-btn::before,
.mobile-nav-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #ffff;
    transition: .3s ease-in-out;
}

.mobile-nav-btn span {
top: 70%;
transform: translateY(-50%);
}

.mobile-nav-btn::before {
    top: 6px;
}

.mobile-nav-btn::after {
    top: 25px;
}

.mobile-nav-btn.active::before {
    transform: rotate(45deg);
    top: 10px;
}

.mobile-nav-btn.active span {
    opacity: 0;
}

.mobile-nav-btn.active::after {
    transform: rotate(-45deg);
    top: 10px;
}
.top-header {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
}
.top-header .main-menu > ul:first-child > li.has-submenu > a::after {
    font-size: 1.125rem;
    margin-left: 0.35rem;
    transition: transform 0.3s ease;
    display: inline-block;
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    transform: rotate(0deg);
}


@media (max-width: 1200px) {
    .header-con {
        flex-direction: row;
        align-items: center;
    }
    .top-head > div:only-child {
        position: static;
        flex-direction: column;
    }
   
    .top-header .main-menu > ul:first-child > li.has-submenu > a.rotated::after {
        transform: rotate(-180deg)!important;
    }
    .top-header {
        display: none;
        flex-direction: column;
        background: #000000f7;
        width: 100%;
        position: absolute;
        top: 107px;
        left: 0;
        padding-top: 1.5rem;
        align-items: center;
        transition: all 0ms ease-in-out;
        overflow-y: auto;
        max-height: 100vh;
        height: 100vh;
    }
    .top-menus {
        order: 1;
        overflow: scroll;
        align-content: flex-start;
    }
    .top-header .quote-button {
        order: 1;
    }    
    .top-head {
        z-index: 1;
    }
    .top-head .logo {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .top-header .quote-button,
    .top-header .quote-button:hover {
        background: transparent!important;
        padding: 0;
        border: none!important;
        background-color: transparent!important;
    }
   .mobile-nav-btn {
        display: flex!important;
    }
    .top-header .main-menu > ul:first-child {
        /* position: absolute; */
        top: 99%;
        left: 0;
        flex-direction: column;
        width: 100%;
        max-width: max(100%, 1200px);
        gap: 2rem;
        background-color: #000000f7;
        z-index: 1;
        padding: 1.5rem;
        /* height: 100vh; */
        overflow-y: auto;
    }
    .top-head .main-sub-menu-item > a {
        text-align: center;
        font-size: 18px!important;
        font-weight: bold;
    }
    .top-head > div::nth-child(2) {
        justify-content: end!important;
        gap: 2rem;
    }
    .top-head .mobile-btn {
        justify-content: end;
        gap: 2rem;
    }
    .top-header .main-sub-menu {
        position: static;
        width: 100%;
        padding: 0 1rem;
        grid-template-columns: none;
        transform: none;
        place-items: start;
        background-color: transparent;    
    }
    .top-head .main-sub-menu-item {
        font-size: 18px!important;
    }
    
}
@media (max-width: 768px) {
    .top-head > div:only-child {
        padding: 0;
    }
    .top-head {
        padding: 1rem 0.75rem;
    }
    .top-header {
        top: 92%;
    }
    .top-header .main-menu > ul:first-child {
        padding: 0 1.5rem!important;
    }
    
}
/* banner */
.banner-image > img {
    width: 100%;
    height: 100%;
}

.banner-con {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #fff;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.banner-con > div:only-child > div:first-child {
    padding: 0 9rem 0 0;
    animation: slideOutRight 0.5s ease-in forwards;
}
.banner-con-description > * {
    line-height: 1.3;
}

.banner-con-description p {
    font-size: 20px!important;
    font-family: BeVietnamPro-Medium !important;
}
  
@keyframes slideOutRight {
  from {
    transform: translateX(-5%);
    opacity: 1;
  }
  to {
    transform: translateX(0)
  }
}
@keyframes slideUp {
  from {
    transform: translateY(80%);
    opacity: 0.5;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
    animation: fadeIn 1.5s ease-in forwards !important;
}
.banner-con > div:only-child > div:nth-child(2) {
  animation: fadeIn 1.5s ease-out forwards;
  position: relative;
}
.background-video {
    display: none;
}
.has-video .background-video {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.banner-con > div:only-child {
    color: white;
    width: 100%;
    display: grid;
    grid-template-columns: 3.5fr 1.5fr;
    gap: 2rem;
}
.video-wrapper > div:last-child {
    color: white;
    width: 100%;
    display: grid;
    grid-template-columns: 3.5fr 1.5fr;
    gap: 2rem;
}
 .banner-con .design {
    display: flex;
    gap: 1rem;
 }
 .banner-con .design > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
 }
.design > div:first-child > span:first-child {
    padding: 1rem 1.5rem;
    background-color: #D22027;
    text-align: center;
    position: relative;
    border-radius: 5px;
 }
 .design > div:first-child > span:first-child:hover {
    background-color: #fe3c33;
 }
.design > div:first-child > span:first-child > a {
    color: white;
    text-decoration: none;
 }
 @media (max-width: 1200px) {
    .banner-con > div:only-child > div:nth-child(2) {
        animation: none;
    }
    .video-wrapper > div:last-child,
    .video-wrapper > div:only-child {
        grid-template-columns: 2.5fr 1.5fr;
    }
    .banner-con > div:only-child > div:nth-child(2) {
        display: none;
    }
    .banner-con > div:only-child > div:first-child {
    animation: none;
    }
    .banner-con > div:only-child {
        grid-template-columns: 1fr;
    }
 }
 @media (max-width: 992px) {
    .video-wrapper > div:last-child, 
    .video-wrapper > div:only-child {
        grid-template-columns: 1fr;
    }
    .banner-con > div > div:last-child,
    .video-wrapper > div:last-child > div:last-child {
        display: none;
    }
    .video {
        width: -webkit-fill-available;
    }
    .text {
        padding: 1rem 0 !important;
    }

 }
 .single-items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem 2rem;
    align-items: center;
 }
 .single-items > div {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
 }
 .single-items  > img {
    width: 100%;
    height: auto;
 }

 /* Cards Flex */
.card-list > div:only-child {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.card-list > div:only-child > div {
    display: flex;
}
.component-item:hover {
    box-shadow: 0 0 2px 2px #BF0000;
}
.icon-item:hover {
    box-shadow: 0 0 3px 3px #BF0000;
    border: 5px;
}
.adjust-50 {
    width: 51px;
    height: 59px
}
.component-item .rounded ,
.component-item .rounded-circle ,
.component-item .rounded-start ,
.component-item .rounded-end ,
.component-item .rounded-top ,
.component-item .rounded-bottom {
    background-color: #D9D9D9;
}

.faq-con {
    background-color: var(--accordion-background-color);
}

.faq-con .accordion-button:not(.collapsed) {
    border: 2px solid red;
    background-color: #fff;  
    border-bottom: none;
    mix-blend-mode: multiply;
}

.faq-con [aria-expanded="true"] {
    border: 2px solid red;
    border-bottom: none;
}

.accordion-button:focus {
    box-shadow: unset!important;
}

.faq-con .accordion-item > button::after {
    filter: opacity(0.5);
}

.accordion-item:last-of-type>.accordion-collapse {
    border: 2px solid red;
    transition: all 0.3s ease-in-out;
    border-top: 0 !important;
}

/* GRID PHOTO START */

/* bolean codition component */
.reverse > div:only-child > div:only-child {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr;
    padding: 0 1rem;
}
.d-default > div:only-child > div:only-child {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.d-default .image, .reverse .image {
    height: 100% !important;
}
.two-column > div:only-child > div:only-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem;
}
.two-column-reverse > div:only-child > div:only-child {
    grid-template-columns: repeat(3, 1fr)!important;
    gap: 1.5rem;
}
.gallery-photo .image-item > img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 3px 3px #BF0000;
    transition: all 0.4sease-in-out;
}
.gallery-photo > div:first-child {
    height:100%
}
.d-default > div:only-child > div:only-child,
    .reverse > div:only-child > div:only-child {
        gap: 1rem;
        padding: 0 1rem;
        height: 100%;
    }
/* .image-item > img {
    transition: all 0.4sease-in-out;
} */

/* cookie banner */
#sliding-popup {
    background: linear-gradient(150deg, #a52834, #000000f0) !important;
    align-content: center;
}
.eu-cookie-compliance-default-button  {
    font-weight: 100!important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.disagree-button.eu-cookie-compliance-more-button:hover,
.eu-cookie-compliance-agree-button:hover,
.eu-cookie-compliance-default-button:hover,
.eu-cookie-compliance-hide-button:hover,
.eu-cookie-compliance-more-button-thank-you:hover,
.eu-cookie-withdraw-button:hover,
.eu-cookie-compliance-secondary-button:hover  {
    transition: 1s ease in-out;
    background: none!important;
    border: 2px solid #000!important;
    font-weight: bold;
    color: #fff!important;
}
.eu-cookie-compliance-buttons {
    gap: 2rem;
    display: flex;
    width: 100%;
    margin: none!important;
}
.eu-cookie-compliance-secondary-button,
.eu-cookie-compliance-default-button {
    padding: 1rem!important;
    background: #fff;
    color: #000;
    border-radius: 6px;
    width: 100%;
    font-weight: bold;
    border: 2px solid #fff;
}
.eu-cookie-compliance-content {
    place-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 3rem .5rem
}
/* cookie-end */
@media (max-width: 1200px) {
    .d-default > div:only-child > div:only-child,
    .reverse > div:only-child > div:only-child {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        
    }
    .banner-con > div:only-child > div:first-child {
        padding: 0;
    }
    .gallery-photo .image-item {
        height: 200px !important;
    }
}

@media (max-width: 786px) {
    .d-default > div:only-child > div:only-child, 
    .reverse > div:only-child > div:only-child {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem 0;
    }
    /* .image-item {
        height: 150px !important;
    } */
     .single-items {
        padding: 3rem 1rem;
     }
}
@media (max-width: 576px) {
    .d-default > div:only-child > div:only-child, 
    .reverse > div:only-child > div:only-child {
        grid-template-columns: 1fr;
    }
}
/* webform email */
.webform-wrapper .webform-submission-email-address-form {
    display: flex;
    width: fit-content;
}
.webform-wrapper .form-wrapper > input {
    background-color: #D22027;
    border: none;
    padding: .50rem 1rem;
    color: #fff;
    box-shadow: 0 0 2px 2px #D22027
}
.webform-wrapper #edit-email {
    border: none;
    padding: .50rem 1rem;
}
/* .webform-wrapper .form-wrapper:hover {
    box-shadow: 0 0 2px 2px #D22027;
} */
.webform-wrapper .email-label {
    display: none;
}

/* Pagination Gallery START */
/* Pagination Container */
.pagination {
    text-align: center;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  /* Pagination Buttons */
  .pagination-buttons {
    background-color: transparent;
    color: #bf0000;
    border: none;
    padding: 0 .5rem;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
  }

  .pagination-buttons:disabled {
    background-color: transparent !important;
    cursor: not-allowed;
    opacity: 1;
    color: gray;
  }
  .pagination > #prev::after {
    content: '\2039';
    display: flex;
    align-items: center;
    font-size: 30px;
    height: 32px;
    width: 32px;
    justify-content: space-evenly;
  }
  .pagination > #next::after {
    content: ' \00BB';
    display: flex;
    align-items: center;
    font-size: 30px;
    height: 32px;
    width: 32px;
    justify-content: space-evenly;
  }

  .pagination-buttons.active {
    background-color: #D22027;
    border: 2px solid #7a090c;
    transform: scale(1.05);
  }

  #page-indicator {
    font-size: 18px;
    font-weight: bold;
  }


.pagination-gallery > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.pagination-gallery > div:first-child > div {
    display: flex;
    flex-direction: column; 
}

/* Content form Block START */

.contact-form-block {
    width: -webkit-fill-available;
}
/* .contact-block> div:last-child {
    background-color: #434343;
    color: white;
    padding: 3rem 0;
} */

.contact-form-block input,
.contact-form-block textarea {
    border-color: red;
}

.contact-form-block .d-button {
    background-color: #D22027;
    padding: 0;
    border: 1.5px solid red;
    border-radius: 5px;
    margin-top: 2rem;
}
.banner-wrapper-text {
    grid-template-columns: 1fr!important;
}
@media (max-width: 992px) {
    .contact-block {
        flex-direction: column-reverse;
        gap: 2rem;
    }
    .contact-block > div:first-child, 
    .contact-block > div:last-child {
        width: 100%;
    }
}
/* component class */
.text-md {
    font-weight: bold;
    font-size: 20px;
}
.image {
    max-width: var(--image-width)!important;
    max-height: var(--image-height)!important;
    border-radius: var(--image-border-radius)!important;
    object-fit: var(--image-object-fit)!important;
}
.hide-item {
    display: none;
}

/* Log-in Account Start  */
.login-wrapper {
    width: fit-content;
    padding: 1rem;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 4px 8px #adb5bd;
}
.login-wrapper .form-item {
    display: flex;
    flex-direction: column;
}
.login-wrapper .form-item input {
    padding: .65rem;
    border-radius: 5px;
    width: 100%;
}
.login-wrapper .form-item input::after {
    box-shadow: 0 0 2px 2px #BF0000!important;
    border: none !important;
}
.login-wrapper .form-submit {
    width: 100%;
    padding: .50rem;
    background-color: #BF0000;
    border: none;
    color: #fff;
    border-radius: 5px;
    margin-bottom: 1.5rem;
}
.ecomia-login-page {
    background-image: url("../assets/images/ecomia-login.webp");
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    place-content: center;
    justify-items: center;
}
.ecomia-login-page .user-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.width-full {
  grid-template-columns: 1fr!important;
}
#page-indicator span {
  padding: 4px 8px;
  margin: 0 2px;
  cursor: pointer;
}

#page-indicator .active {
  color: red;
  border-radius: 4px;
}
.make-static {
    position: relative;
    z-index: 100;
    background-color: black!important;
}
/*slicck*/
.slick-main {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5rem 0;
    margin: 1rem 0;
}
.swiper-container {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
}

.swiper-slide img {
    width: 100%;
}

.mySwiper  > div:has(.card) > div {
    width: -webkit-fill-available;
}

.swiper-slide:has(.card) > div {
    width: -webkit-fill-available;
}

.slick-main .mySwiper swiper-slide {
    justify-content: center!important;
    width: 450px;
}
.mySwiper-v2 .swiper-wrapper {
    gap: 2rem !important;
    justify-content: end;
}

.mySwiper-v2 .swiper-item {
    width: 500px;
    justify-content: center;
    opacity: 0.7;
    filter: grayscale(80%);
    position: relative;
}
.paragraph--type--mix-combination > div:nth-child(2) {
    position: absolute;
    top: 60%;
    background-color: black;
    color: white;
    padding: 2rem;
    border-radius: 10px;
}
.mySwiper-v2 .swiper-slide-next {
  opacity: 0.7!important;
  filter: grayscale(90%)!important;
}
.mySwiper-v2 .swiper-slide-active  {
  filter: none!important;
  opacity: 1!important;
  z-index: 2!important;

}
.paragraph--type--mix-combination > div:first-child > img {
    width: 100%;
}

/* Back to top button */
.back-to-top {
    display: none; 
    position: fixed;
    bottom: 45%;
    right: 5%;
    display: none;
    text-align: center;
    background-color: #bf0000;
    box-shadow: 0 0 0 5px #7e4b4b4a;
    color: #fff;
    border: none;
    border-radius: 100%;
    width: 50px;
    justify-items: flex-start;
    height: 50px;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.3s;
}
.back-to-top:hover {
    background-color: #bf0000;
    box-shadow: 0 0 2px 2px #000;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 20px;
  align-items: start;
}
.left-main {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
}
.grid-item {
  background: #ddd;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.remove-folio-grid {
    grid-template-columns: 1fr !important;
}

/* views filter page */
.technologies-swiper {
    z-index: 0;
}

.view-search-titles {
    display: flex;
    padding: 0 1rem;
    color: #ffff;
}
.search-filter {
    background-image: url("../assets/images/UX Design.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
}

.search-filter-results {
    height: auto;
}

.search-filter-results .view-search-titles {
    display: block;
}

.search-filter-results .view-content-item img{
    width: -webkit-fill-available;
    object-fit: cover;
    height: 150px;
}

.search-filter-results .search-pager ul li {
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    transition: all 0.3s linear;
    font-size: 18px !important;
    line-height: unset !important;
}

.search-filter-results .search-pager ul li:has(a) {
    background-color: #BF0000!important;
}

    .search-filter-results h1 {
        width: 83.33333333%;
    }

.views-exposed-form {
    display: flex;
    gap: 1rem;
}
.views-exposed-form > form {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.views-exposed-form > form > div:first-child {
    width: 500px;
}
.views-exposed-form > form input[type="text"] {
    width: 100%;
    padding: .7rem;
    border-radius: 25px;
    border: 2px solid #D22027;
    margin-top: 0;
}
.views-exposed-form > form input[type="submit"] {
    border-radius: 22px;
    border: 1.5px solid #D22027;
    padding: .7rem;
    background-color: #D22027;
    color: white!important;
}
.views-rows {
    height: 300px!important;
}
.search-filter .form-text {
    padding: .7rem;
    border-radius: 5px;
    margin-top: 0 !important;
    width: 420px;
    border: 2px solid rgb(220 220 220);
    background-color: #ffffff17;
    backdrop-filter: blur(4px);
    outline: #bf0000;
    transition: all 0.3s linear;
    font-size: 18px;
    color: #ffffff;
}

.search-filter .form-text::placeholder {
    color: #bebebe;
}

.search-filter .form-text:hover,
.search-filter .form-text:focus {
    border: 2px solid #bf0000;
}
.search-filter .form-submit {
    height: 100%;
    padding: 0 .75rem;
    border-radius: 5px;
    background-color: #D22027;
    color: white;
    border: 2px solid transparent;
    transition: all 0.3s linear;
    font-size: 18px;
    position: relative;
}

/* .search-filter .form-submit::before {
    content:'->';
    font-family: 'FontAwesome';
    font-size: larger;
    width: 500px;
    height: 500px;
    position: absolute;
} */
.search-filter .search-filter-helptext-items {
    display: inline-block;
    color: #e74c3c;
    position: relative;
    white-space: nowrap;
    top: 0;
    left: 0;
    animation:move 10s;
    animation-iteration-count:infinite;
    animation-delay:1s;
}

@keyframes move{
0% {
    top: 0px;
}
20% {
    top: -22.5px;
}
40% {
    top: -45px;
}
60% {
    top: -67.5px;
}
80% {
    top: -90px;
}
}
/* .view-content > div:first-child {
    height: 65vh!important;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #999 transparent;
} */

.view-content > div:first-child .view-content-item {
    background: #a8a8a80a;
    transition: all 1s linear;
}

.view-content > div:first-child .view-content-item .content-item-link {
    transition: all 0.5s linear;
}

.view-content > div:first-child .view-content-item:hover {
    background: linear-gradient(180deg,rgb(168 168 168 / 9%) 60%,rgb(168 168 168 / 30%) 100%);
}

.view-content > div:first-child .view-content-item:hover .content-item-link {
    color: var(--bs-btn-active-color);
    background-color: #9b0000;
    border-color: var(--bs-btn-active-border-color);
}

.view-content > div:first-child .content-item-short-description > * {
    line-height: 1.5 !important;
    font-size: 1rem!important;
}

.view-content > div:first-child::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

.field-content > a {
    color: white;
    text-decoration: none;
}
.view-content .views-row:hover {
    background-color: #ffffff1a;
}
.view-content .views-row {
    padding: 1rem;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.view-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0 0 0;
}



.view-filters {
    position: relative;
}
.view-filters > div:first-child {
    padding: 0 1.5rem 0 0;
}
.view-content > div > span:first-child > span:only-child a {
    font-size: 20px;
    font-weight: bold;
}
.view-content .views-rows > div:nth-child(3) > span:only-child a {
    border: 1px solid #D22027;
    border-radius: 5px;
    width: fit-content;
    padding: .2rem 1rem;
}
.search-pager > nav > ul {
    list-style-type: none!important;
    display: flex;
    gap: 1rem;
    padding: 0;
    flex-wrap: wrap;
}
.search-pager {
   place-self: center;
}
.search-pager > nav > ul a {
    text-decoration: none;
    color: #FFF;
}
.search-pager .pager__item {
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    transition: all 0.3s linear;
    font-size: 18px !important;
}
.search-pager .pager__item:hover {
    background-color: rgba(255, 255, 255, 0.5);
}
.search-pager .pager__item.is-active {
    background-color: #D22027!important;
}
.search-pager .pager__item.is-active > a {
    color: white!important;
}
.views-row > div:nth-child(3) > span:only-child a {
    background-color: #bf0000;
    padding: .5rem 1rem;
    border-radius: 5px;
}
.views-row > div:nth-child(3) > span:only-child a:hover,
.search-filter .form-submit:hover {
    background-color: #A52834;
    border: 2px solid #A52834;
}
.no-results > button{
    width: fit-content;
}
.no-results > button a {
    text-decoration: none!important;
    color: #ffff!important;
}
.technologies-swiper swiper-slide  {
    transition: all 1s linear;
    opacity: 1;
}
    
.technologies-swiper swiper-slide:nth-child(1),
.technologies-swiper swiper-slide:last-child
 {
    opacity: 0.1!important;
}

.multi-rtl .grid-box-wrapper,
.multi-rtl .grid-box-wrapper > .row,
.multi-rtl .carousel-slider,
.rtl-image .faq-con > div {
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.multi-rtl .grid-box-wrapper {
    height: 100%;
}

.multi-rtl .grid-box-wrapper > .row,
.multi-rtl .carousel-slider {
    margin-top: 0!important;
    margin-bottom: 0!important;
}

.section .header-section,
.grid-box-wrapper .header-section {
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.mobile-quote {
    display: flex;
    justify-content: space-around;
}
.quote-button {
    transition: all 0.3s linear!important;
    background-color: #bf0000!important;
    border: 2px solid #000 !important;
}

.quote-button .main-sub-menu-item:hover > a,
.quote-button .main-sub-menu-item.active > a {
    color: white!important;
    box-shadow: 0 0 2px 2px #BF0000;
    border-radius: 5px;
}
.quote-button:hover {
    background-color: #000!important;
    border: 2px solid #bf0000 !important;
}
.quote-button .main-menu > ul:first-child  {
    position: static!important;
    background-color: transparent;
    padding: 0;
    height: fit-content;
}
/* log-in */
.user-form,
.user-pass {
    background-color: #343a40;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 2rem;
    width: 500px;
    margin: 5rem 0;
    place-self: center;
}
.user-form .form-item-mail,
.user-form .form-item-name,
.user-form  .layout__region,
.user-pass .layout__region {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.user-form .form-item-mail > :last-child,
.user-form .form-item-name > :last-child {
    display: none;
}
.user-form .form-item-mail > input,
.user-form .form-item-name > input,
.user-form #edit-submit,
.user-pass #edit-submit,
.user-pass .form-text{
    padding: 1rem;
}
.user-pass .form-text{
    width: 100%;
}
.user-form input[type="submit"]:focus,
.user-form input[type="text"]:focus,
.user-form input[type="email"]:focus,
.user-pass input[type="submit"]:focus,
.user-pass input[type="form-text"]:focus {
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7)!important;
}
.user-form input[type="submit"]:hover,
.user-pass input[type="submit"]:hover {
    background-color: #bf0000;
    transition: all 0.3s linear;
    color: #fff;
}
#main-header .level- > .main-sub-menu-item > .sub-menu {
    display: none;
}
/* webform success confirmatio */
.contact-success-msg {
    width: 32px;
    height: 32px;
    place-self: center;
}
.success-message > div:only-child {
    width: fit-content;
    place-self: center;
    box-shadow: #808080b3 12px 12px;
    border-radius: 10px;
}
.success-message > div:only-child > span:last-child {
    width: 50%;
    place-self: center;
}
.success-message .fa-arrow-left {
    transform: translateX(50%);
    transition: all 0.5s ease-in;
}
.success-message > div:only-child > span:last-child:hover .fa-arrow-left {
    transform: translateX(0);
    transition: all 0.5s ease-in-out;
}
/* error message  */
div[aria-label="Error message"] {
    color: #fff;
    background-color: #B80000;
    padding: .5rem 1rem;
    box-shadow: #ff00004a 8px 8px;
    border-radius: 5px 0;
}


/* #edit-combine {
    color: transparent;
} */

.tag-item {
    transition: all 0.3s ease;
    background-color: #626262;
}
.tag-item:hover {
    background-color: #c1131a;
}
.tag-item.removing {
  opacity: 0;
  transform: scale(0.7);
}
#video-message {
    position: absolute;
}
.ui-widget.ui-widget-content {
    padding: 0.5rem 0;
}
.ui-menu .ui-menu-item {
    padding: 0 0.5rem;
}
.ui-menu .ui-menu-item-wrapper {
    text-decoration: none;
    width: -webkit-fill-available;
    display: block;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #B80000;
    background: #d80000;
    font-weight: normal;
    color: #ffffff;
}
.section .grid-box-wrapper {
    padding-top: 0!important;
    padding-bottom: 0!important;
}
.top-menus .main-sub-menu-item-link {
    display: none!important;
}

/* #user message welcome page */
.user-profile {
    place-items: center;
    background-color: firebrick;
    color: white;
}
.user-profile .form-item {
    padding: 3rem 1rem;
    height: 30vh;
    align-content: center;
}

@media only screen and (max-width: 1536px) {
    #main-header .level-1 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.js input.form-autocomplete {
    background-image: unset;
}

@media only screen and (max-width: 1200px) {
    .top-head .main-sub-menu-item > .sub-menu > .level-1 > li > a::after,
    .nested-submenu a:after {
        content: unset;
    }
    .top-menus .main-sub-menu-item-link {
        display: block!important;
    }
    .quote-button .main-sub-menu-item:hover > a,
    .quote-button .main-sub-menu-item.active > a {
        color: unset!important;
    }
    #video-message {
        width: 100%;
        margin: 0 !important;
        text-align: center;
    }
    .ltr-rtl .p-text {
        padding: 2rem !important;
    }
    #main-header .level-1 {
        position: relative;
        left: 0;
        place-self: center;
        padding: 1.5rem 2rem;
        background:unset;
        border-bottom: unset;
        box-shadow: unset;
    }
    .nested-submenu a {
        color: white;
    }
    .top-head .main-sub-menu-item > .sub-menu > .level-1 > li > a {
        color: #fff;
    }
    .search-filter .form-text {
        width: 100%!important;
    }
    .quote-button .main-sub-menu-item:hover > a,
    .quote-button .main-sub-menu-item.active > a {
        box-shadow: 0 0 2px 2px transparent;
        border-radius: 0;
    }
    .mobile-quote {
        justify-content: flex-start!important;
        flex-direction: column;
        height: 75vh;
    }
    .top-head,
    .top-head.show,
    .top-head.hide {
        transition: none;
        transform: none;
    }
    .nested-submenu span,
    .nested-submenu a {
        font-size: 16px!important;
    }
    #main-header .sub-menu {
        position: relative!important;
        top: 0%;
    }
    /* Show submenu only when parent has .is-open */
    .level- .main-sub-menu-item.has-submenu.is-open .submenu {
        display: block;
    }
    .level- .main-sub-menu-item.has-submenu > a::after {
        content: "\25BC"; 
        transform: rotate(0deg) !important;
        transition: transform 0.3s ease;
    }
    .level- .main-sub-menu-item.has-submenu.is-open > a::after {
        transform: rotate(180deg)!important;
    }
    #main-header .nested-submenu {
        width: 100%;
    }
    .footer-con > div:first-child,
    .footer-block .main-menu > ul {
        gap: 1.5rem!important;
    } 
    .rtl-image > img {
        min-height: 360px;
    }
    .image {
        min-height: 300px;
    }
}
@media only screen and (max-width: 992px) {
    .view-search-titles {
        grid-template-columns: 1fr;
    }
    #main-header .level-1 {
        grid-template-columns: repeat(2, 1fr);
        place-self: center;
    }
    .search-filter,
    .view-content > div:first-child {
        height: 100%!important;
    }

    .view-content > div:first-child {
        overflow-y: unset;
    }
    

    #main-header .level-2 {
        padding-left: 1rem;
    }
}
/* Tablet Portrait */
@media only screen and (max-width: 768px) {
    .banner-con {
        height: 100%!important;
        padding: 6rem 0;
    }
    .banner-con-description p {
        font-size: calc(1.275rem + .3vw) !important;
    }
    .video,
    .view-filters{
        width:100% !important;
    }
    .view-search-titles{
        flex-direction: column;
        padding: 3rem 0.75rem;
    }
    .timeline .timeline-item {
        position: relative;
        width: 100%;
    }
    /* .timeline .indicator::after {
        display: none;
    } */
    #webform-submission-get-in-touch-paragraph-556-add-form {
        gap: 1rem;
        padding: 3.4rem 1.5rem;
    }
    .ltr-rtl .p-text {
        padding: 1rem !important;
    }

    .mySwiper-v2 .swiper-item {
        width: 500px;
        justify-content: center;
        opacity: 1 !important;
        padding: 0 1rem;
    }
    .mySwiper-v2 .swiper-slide-active {
        opacity: 0;
        filter: none!important;
    }
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    .section > .wrapper-box-icon > div {
        padding: 1rem !important;
    }
    .technologies-swiper > div {
        padding: 0% !important;
    }

    .search-filter .form-text {
        font-size: 16px;
    }

    .search-filter-results h1 {
        width: 100%;
    }
    
    .faq-con .accordion,
    .grid-box-wrapper > .row,
    .multi-rtl > div > div > .grid-box-wrapper > .row, 
    .multi-rtl > div > div > .carousel-slider {
        padding-right: 0.75rem !important;
        padding-left: 0.75rem !important;
    }

    .timeline .vertical-line::before, 
    .link-list .vertical-line::before {
        height: 110% !important;
        top: 50% !important;
    }

    .timeline .timeline-item-start::before,
    .timeline .timeline-item-end::before {
        transform: unset;
    }
    .quote-button .main-sub-menu-item:hover > a,
    .quote-button .main-sub-menu-item.active > a {
        color: red!important;
    }

    .rtl-image:has(.grid-box-wrapper) {
        opacity: 1;
    }
    .timeline .timeline-item-start::before {
        top: calc(0% + 16px) !important;   
    }
    .timeline .timeline-item-end::before {
        top: calc(0% - 16px) !important;   
    }
    .timeline .timeline-item .content {
        margin-right: 0.75rem;
    }
    .card-wrapper img {
        min-height: 200px;
    }
    .footer-block .nested-submenu span,
    .footer-block .nested-submenu a {
        font-size: initial!important;
    }
    .footer-block .has-submenu > span {
        font-size: 20px!important;
    }
}
@media only screen and (max-width: 576px) {
    h1, h2 {
        word-break: break-word;
    }
    .revert-sm-font {
        font-size: revert!important;
    }
    .initial-sm-font {
        font-size: initial!important;
    }
    .search-filter .form-submit {
        font-size: 16px;
    }
    .card-wrapper {
        flex: 1 1 100%;
    }

    .grid-box-wrapper > .row {
        row-gap: 1rem;
    }
    .featured-news-image {
        width: 100%!important;
        height: 100%;
        min-height: 260px!important;
    }
 
    .section > *,
    .row > .counter-item,
    .faq-con .accordion > div,
    .grid-box-wrapper > .row > *,
    .grid-box-wrapper > .row > div .row,
    .grid-box-wrapper > .row > .section > .header-section > *,
    .grid-box-wrapper > .row > div .accordion > div,
    .grid-box-wrapper > .row > div .image-wrapper {
        padding: 0;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .multi-rtl > div > div > .grid-box-wrapper > .row > *,
    .multi-rtl > div > div > .grid-box-wrapper > .row > .section > *,
    .multi-rtl > div > div > .grid-box-wrapper > .row > .section > .header-section > *,
    .multi-rtl > div > div > .grid-box-wrapper > .row > div .image-wrapper,
    .ltr-rtl:has(.grid-box-wrapper) .row,
    .ltr-rtl .section,
    .ltr-rtl .header-section > *,
    .ltr-rtl .card-wrapper {     
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .user-form,
    .user-pass{
        width: 100%;
    }
    .search-filter .form-text {
        width: 100%;
        font-size: 16px!important;
    }
    .view-filters > div:first-child {
        padding: 1rem 1rem 0 0;
    }
    #main-header .level-1 {
        grid-template-columns: 1fr;
        place-self: flex-start;
    }
    .top-head .main-sub-menu-item a {
        text-align: start!important;
    }
    .quote-button .main-menu > ul:first-child{
        padding: 1rem 1.5rem!important;
    }
    .ltr-rtl {
        padding-left: 0;
        padding-right: 0;
    }
    .ltr-ltr-content {
        padding: 0.75rem;
    }
    .article-page-sidebar {
        background-color: unset!important;
    }
    swiper-slide .card-wrapper {
        padding: 0.75rem!important;
    }

    .footer-block .hr {
        border: 0;
        border-bottom: var(--bs-border-width) solid rgba(255,255,255,0.25);
    }
}