/**********************************
          modular setting
**********************************/
.section-theme {
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: contain;
}
/***************
     Hero
***************/
.section-hero {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 20px 0;
    /*height: calc((var(--vh, 1vh) * 100) - 65px);*/
    /*height: calc(100vh - 65px);*/
    overflow: hidden;
}
.swiper.swiper-hero {
    margin-bottom: 74px;
}
.swiper.swiper-hero .swiper-slide {
    height: 100%;
    position: relative;
    transition-property: transform;
    margin-top: auto;
    margin-bottom: auto;
}
.section-hero:before {
    content: '';
    width: 100%;
    height: calc(100% - 48px);
    background: linear-gradient(-52deg,  #c60001 40%, #d00);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: inline-block;
}
/*.swiper.swiper-hero {*/
/*    padding: 47px 0;*/
/*}*/
/*.swiper.swiper-hero {*/
/*    height: calc(100% - 148px);*/
/*}*/
.item-hero {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s linear;
    position: relative;
    height: 100%;
}
.swiper-slide.swiper-slide-active .item-hero {
    opacity: 1;
    visibility: visible;
}
.hero-image img {
    max-height: 30vh;
    width: auto;
}
.hero-image {
    text-align: center;
    width: 100%;
}
.hero-content .title,.hero-title  {
    color: #fff;
    margin-bottom: 25px;
    font-size: 32px;
    line-height: 34px;
    text-align: center;
}
.hero-content .desc {
    color: #FFFFFF;
    margin-bottom: 20px;
}
.hero-content .desc a {
    color: var(--color2);
    transition: 0.3s ease;
}

.hero-content .desc a:hover {
    color: #3d3d3d;
}
.hero-content .desc p {
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    color: #FFFFFF;
    font-family: var(--med_font), 'Kanit';
}
.buttons {
    text-align: center;
}
.hero-content .buttons {
    margin-bottom: 0;
}
.hero-content .buttons .button:nth-child(2) {
    margin-right: 16px;
}

.swiper-hero .swiper-nav {
    background: rgba(182, 182, 182, 0.5);
    width: 32px;
    height: 32px;
    border-radius: 7px;
    box-shadow: none;
    border: none;
    color: #fff;
    font-size: 16px;
    top: 39%;
}
.swiper-hero .swiper-nav:hover {
    background: rgba(255, 186, 159, 0.5);
}

.swiper-hero .swiper-nav.swiper-nav-prev {
    right: 0;
}
.swiper-hero .swiper-nav.swiper-nav-next {
    left: 0;
}
.scroll-down {
    display: inline-block;
    position: absolute;
    bottom: -34px;
    right: 50%;
    transform: translateX(50%);
}
.scroll-down svg {
    transform: scale(0.65);
}
.scroll-downBtn {
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 100%;
    inset: 0;
    margin: auto;
    color: var(--color1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    z-index: 1;
    transition: 0.3s ease;
}
.scroll-downBtn:before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 100%;
    z-index: -1;
    transition: 0.4s ease;
}
.scroll-downBtn i {
    transition: 0.3s ease;
}
.scroll-downBtn:hover:before {
    width: 0;
    height: 0;
    transform: translateY(10px);

}

.scroll-downBtn:hover {
    color: #fff;
}
.scroll-downBtn:hover i {
   transform: translateY(10px);
}

/***************
     Slider
***************/
.section-slider {
    padding: 50px 0;
}

.item-slider .slider-image {
    border-radius: 16px;
    display: block;
    margin-bottom: 16px;
    position: relative;
    outline: 2px solid #fff;
    transition: 0.4s ease;
}
.item-slider .slider-image img {
    border-radius: 16px;
    width: 100%;
    position: relative;
    z-index: -1;
}
.item-slider:hover .slider-image {
    outline-offset: -7px;
}

.slider-image::before {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    background: var(--color1);
    opacity: 0.4;
    filter: blur(16.5792px);
    border-radius: 10px;
    z-index: -1;
    left: 0;
    bottom: -1px;
    right: 0;
    transition: 0.4s ease-in-out;
    margin: auto;
}
.item-slider:hover .slider-image::before {
    width: 90%;
}
.item-slider .title {
    font-size: 20px;
    line-height: 34px;
    color: #3D3D3D;
    margin-bottom: 16px;
    text-align: center;
}
.item-slider .desc {
    font-size: 15px;
    line-height: 30px;
    color: #666666;
    text-align: center;
    min-height: 90px;
    margin-bottom: 5px;
    padding: 0 5px;
}
.slider-link {
    font-size: 16px;
    line-height: 25px;
    color: #666666;
    text-align: center;
    font-family: var(--med_font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    transition: 0.4s ease;
}
.item-slider:hover .slider-link{
    color: var(--color1);
}
.btns-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}
.cta-slider.button-glow {
    box-shadow: 0px 2px 12px rgba(255, 97, 88, 0.3);
    border-radius: 13px;
    border: none;
    height: 58px;
    padding: 4px 4px 4px 15px;
    font-size: 18px;
    line-height: 29px;
}
.cta-slider span {
    background: #fff;
    width: 49px;
    height: 50px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta-slider .icon-call {
    color: var(--color1);
    font-size: 27px;
    animation: ring 3s ease-in-out infinite;
}
.section-slider .cta-slider, .cta-mobile-wrap .cta-slider {
    font-family: var(--num_font);
}
@keyframes ring {
    0% {
        -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    5% {
        -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    10% {
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }
    15% {
        -webkit-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
        transform: rotate(18deg);
    }
    20% {
        -webkit-transform: rotate(-22deg);
        -ms-transform: rotate(-22deg);
        transform: rotate(-22deg);
    }
    25% {
        -webkit-transform: rotate(22deg);
        -ms-transform: rotate(22deg);
        transform: rotate(22deg);
    }
    30% {
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }
    35% {
        -webkit-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
        transform: rotate(18deg);
    }
    40% {
        -webkit-transform: rotate(-12deg);
        -ms-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }
    45% {
        -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
        transform: rotate(12deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
.btn-slider {
    color: var(--color1);
    text-align: center;
    font-family: var(--bold_font),var(--en_font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: 0.4s ease;
    font-size: 20px;
    line-height: 31px;
    background-image: linear-gradient(to right,var(--color2),var(--color2) 50%,var(--color1) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #0000;
    background-size: 202% 100%;
    background-position: 100%;
    margin-right: 15px;
}
.btn-slider:hover {
    background-position: 199%;
}
.section-slider .swiper-nav {
    top: 70px;
    transform: none;
}
/************
  compare list
*************/
.section-compareList {
    padding: 40px 0 30px;
}
.box-wrap {
    border-radius: 24px;
    padding: 24px 20px 24px 10px;
    box-shadow: 0px 2px 12px rgba(153, 153, 153, 0.15);
    margin-bottom: 32px;
}
.box-wrap.box-light {
    background: #EDEDED;
    color: #000;
}
.box-wrap.box-dark {
    background: #262424;
    color: #fff;
}
.box-wrap > .desc {
    font-size: 16px;
    line-height: 32px;
    text-align: right;
    padding-bottom: 5px;
    padding-top: 5px;
}
.box-wrap.box-light > .desc {
    color: #666666;
}
.box-listItem {
    padding: 12px 0 6px 0;
    display: grid;
    align-items: center;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 56px 1fr;
    gap: 5px 16px;
    grid-template-areas: "a b" "c c";
    grid-template-rows: auto;
}
.box-listItem .title {
    font-size: 18px;
    line-height: 28px;
    grid-area: b;
}
.box-listItem .desc {
    font-size: 14px;
    line-height: 32px;
    grid-area: c;
}
.box-listItem .icon {
    border-radius: 16px;
    min-width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 33px;
    grid-area: a;
}
.box-listItem .icon {
    background: linear-gradient(240.81deg, #C60001 17.97%, #F89949 91.89%);;
    color: #fff;
}

.box-listItem .icon img {
    max-width: 33px;
}

.box-title {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 20px;
    line-height: 27px;
    padding-bottom: 10px;
    font-family: var(--en_font);
}
.button2 .icon-shop {
    font-size: 23px;
}
.compareList-top {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 33px;
}
.compareList-top .title-site {
    margin-bottom: 0;
    text-align: center;
}
.compareList-top .title-site .desc p {
    text-align: center;
}
.compareList-top .buttons {
    display: flex;
    gap: 10px;
}
.compareList-top .buttons a {
    padding: 0 10px;
    font-size: 15px;
    gap: 10px;
}
.box-list {
    max-height: 416px;
    overflow: auto;
    padding: 0 0 0 10px;
    scrollbar-color: var(--color1) #EDEDED;
    scrollbar-width: thin;
}
/* width */
.box-list::-webkit-scrollbar {
    width: 3px;
}
/* Track */
.box-list::-webkit-scrollbar-track {
    background: #EDEDED;
    border-radius: 10px;
}
/* Handle */
.box-list::-webkit-scrollbar-thumb {
    background: var(--color1);
    border-radius: 10px;
}
/* Handle on hover */
.box-list::-webkit-scrollbar-thumb:hover {
    background: var(--color1);
}

/***************
     counter
***************/
.section-counter {
    padding: 30px 0;
}
.counter-item {
    display: grid;
    align-items: center;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 72px 1fr;
    gap: 9px 10px;
    grid-template-areas: "d e" "f f";
    margin-bottom: 15px;
}
.counter-item img {
    grid-area: d;
    transition: 0.4s ease;
    max-width: 86px;
    margin-top: 7px;
}
.counter-item .icon-bg {
    padding: 0;
}
.counter-item:hover img {
    transform: rotateY(180deg);
}
.counter-item:hover .icon-bg {
    transform: rotateY(180deg) scale(0.8);
}
.counter-num {
    color: #F58220;
    font-family: var(--num_font);
    font-size: 30px;
    line-height: 1;
    grid-area: e;
    margin-top: 17px;
    font-weight: bold;
}
.counter-title {
    font-size: 18px;
    line-height: 28px;
    color: #666666;
    font-family: var(--med_font);
    grid-area: f;
}

/***************
     Card
***************/
.item-card {
    display: block;
    background: #FFFFFF;
    box-shadow: 0px 3px 12px -2px rgba(102, 102, 102, 0.2);
    border-radius: 24px;
    padding: 20px 15px;
    transition: 0.4s ease;
    margin: 24px 0;
}
.item-card-wrap:hover .item-card {
    transform: translateY(-10px);
    box-shadow: 0px 2px 15px -2px rgba(237, 28, 36, 0.28);
}
.card-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}
.card-top .title {
    font-size: 20px;
    line-height: 44px;
    color: #666666;
}
.card-top img {
    max-width: 75px;
    height: auto;
}
.item-card .desc {
    font-size: 16px;
    line-height: 24px;
    text-align: right;
    color: #666666;
    margin-bottom: 10px;
    height: 100px;
    overflow: auto;
    scrollbar-color: var(--color1) #EDEDED;
    scrollbar-width: thin;
}
.link-out .item-card .desc {
    height: 125px;
}

/* width */
.item-card .desc::-webkit-scrollbar {
    width: 3px;
}
/* Track */
.item-card .desc::-webkit-scrollbar-track {
    background: #EDEDED;
    border-radius: 10px;
}
/* Handle */
.item-card .desc::-webkit-scrollbar-thumb {
    background: var(--color1);
    border-radius: 10px;
}
/* Handle on hover */
.item-card .desc::-webkit-scrollbar-thumb:hover {
    background: var(--color1);
}
.card-link {
    font-size: 16px;
    line-height: 25px;
    color: #666666;
    text-align: center;
    font-family: var(--med_font);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.4s ease;
}
.item-card-wrap:hover .card-link {
    color: var(--color1);
}
.section-contentCard {
    padding: 40px 0 24px;
    position: relative;
}
.section-contentCard .title-center.title-site {
    margin-bottom: 10px;
}
.section-contentCard .title-site .desc p{
    font-family: Varbee(--bold_font);
}

.section-contentCard::before {
    content: '';
    height: 44%;
    width: 100%;
    background: radial-gradient(ellipse at bottom, #C60001, #F58220);;
    display: inline-block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
}
.section-contentCard .btns-wrap {
    margin-top: 16px;
    gap: 8px;
    flex-direction: row;
}
.section-contentCard .btns-wrap .button-glow.button2 {
    border: none;
}
.swiper-card .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff
}
/***************
   Testimonial
***************/
.section-testimonial {
    padding: 50px 0 30px;
    position: relative;
    overflow: hidden;
}
.section-testimonial .title-site.title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    text-align: center;
}
.title-site.title-wrap .desc p {
    font-size: 16px;
    line-height: 32px;
    color: #3D3D3D;
}
.section-testimonial .swiper-nav {
    top: 145px;
    transform: none;
}
.swiper.swiper-testimonial {
    overflow: visible;
}

.item-testimonial {
    background: #FFFFFF;
    box-shadow: 0px 4px 42px rgba(137, 137, 137, 0.14);
    border-radius: 24px;
    padding: 30px 16px 36px;
    margin: 35px 0;
    position: relative;
    display: block;
}
.item-testimonial:before {
    content: "\e90d";
    position: absolute;
    right: 0;
    top: -9px;
    font-family: icomoon;
    font-size: 38px;
    color: var(--color1);
    line-height: 1;
}
.item-testimonial:after {
    content: "\e90c";
    position: absolute;
    left: 0;
    bottom: -9px;
    font-family: icomoon;
    font-size: 38px;
    color: #e38585;
    line-height: 1;
}
.testimonial-info {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    min-height: 85px;
}
.testimonial-info .title {
    font-size: 19px;
    line-height: 26px;
    color: #666666;
    font-family: var(--bold_font),var(--en_font);
}
.testimonial-text {
    font-size: 14px;
    line-height: 29px;
    color: #666666;
    max-height: 98px;
    overflow: auto;
    scrollbar-color: var(--color1) #EDEDED;
    scrollbar-width: thin;
}
/* width */
.testimonial-text::-webkit-scrollbar {
    width: 3px;
}
/* Track */
.testimonial-text::-webkit-scrollbar-track {
    background: #EDEDED;
    border-radius: 10px;
}
/* Handle */
.testimonial-text::-webkit-scrollbar-thumb {
    background: var(--color1);
    border-radius: 10px;
}
/* Handle on hover */
.testimonial-text::-webkit-scrollbar-thumb:hover {
    background: var(--color1);
}
.testimonial-info img {
    max-width: 118px;
    max-height: 84px;
}
/***************
     CTA
***************/
.section-cta {
    position: relative;
    overflow: hidden;
    padding-top: 45px;
    margin-bottom: 50px;
}
.section-cta .cta-img{
    position: absolute;
    top: 150px;
    right: 0;
    z-index: -1;
}
.section-cta .title-site {
    margin-bottom: 168px;
    text-align: center;
}
.section-cta .title-site .title-heading {
    font-size: 36px;
    line-height: 55px;
    color: #3D3D3D;
    margin-bottom: 15px;
}
.section-cta .title-site .desc p {
    font-size: 16px;
    line-height: 32px;
}
.cta__items {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px 0 32px;
}
.cta-item {
    background: #FFFFFF;
    box-shadow: 0px 4px 39px rgba(153, 153, 153, 0.2);
    border-radius: 24px;
    padding: 24px;
    flex: 0 0 100%;
    max-width: 100%;
    transition: 0.4s ease;
}
.cta-item:hover {
    box-shadow: 0px 6px 12px rgba(189, 90, 90, 0.2);
}
.cta-title {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 15px;
}
.cta-title .title {
    font-size: 22px;
    line-height: 30px;
    color: #3D3D3D;
}
.cta-title i {
    color: var(--color2);
    font-size: 54px;
}
.cta-title img {
    max-width: 56px;
}
.cta-item .desc {
    font-size: 16px;
    line-height: 32px;
    color: #333333;
}
/*******************
 section second hero
 ******************/
.item-second_hero {
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s linear;
    position: relative;
    height: 100%;
    flex-direction: column-reverse;
}
.swiper-slide.swiper-slide-visible.swiper-slide-active .item-second_hero{
    opacity: 1;
    visibility: visible;
}
.second_hero-content .title, .second-hero-title  {
    font-size: 32px;
    line-height: 41px;
    color: #3D3D3D;
    margin-bottom: 15px;
    text-align: center;
}
.second_hero-content .desc {
    margin-bottom: 29px;
    padding-left: 10px;
    position: relative;
}

.second_hero-content .desc p {
    font-size: 18px;
    line-height: 34px;
    text-align: center;
    font-family: var(--med_font);
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    margin-bottom: 0;
    -webkit-box-orient: vertical;
}
.second_hero-image {
    background: radial-gradient(102.89% 325.92% at -9.95% -7.8%, #C60001 0%, #F58220 100%);
    border-radius: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
}
.secondhero-image img {
    max-height: 250px;
    width: auto;
}
.secondhero-image {
    text-align: center;
}
.second_hero-content {
    padding-top: 25px;
}
.swiper.swiper-second_hero {
    padding: 40px 0;
}

.hero-navigation {
    position: relative;
    bottom: 0;
    display: inline-flex;
    gap: 24px;
    justify-content: space-between;
    right: 50%;
    transform: translateX(50%);
    margin-top: 20px;
}
.hero-navigation .swiper-nav {
    position: unset;
    transform: unset;
}
.second_hero-content .buttons .button {
    filter: none;
    border-color: var(--color1);
}
.second_hero-content .buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.btns-wrap .button-glow.button2 {
    filter: none;
    border: 1px solid var(--color1);
}
.section-second_slider .swiper-nav {
    top: 36%;
}
.section-second_slider {
    padding: 30px 0;
}
/* banner */
.section-banner {
    padding: 30px 0;
}
.item-banner {
    display: block;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    border-radius: 24px;
    overflow: hidden;
    transition: 0.4s linear;
    margin-bottom: 15px;
}

.item-banner img {
    width: 100%;
    object-fit: cover;
    border-radius: 24px;
    transition: 0.4s ease;
}

.item-banner:hover {
    box-shadow: 1px 3px 5px 1px #0000001c;
}

.item-banner:hover img {
    filter: saturate(1.4);
}
.section-editor {
    padding: 35px 0 20px;
}
.section-gallery {
    position: relative;
    padding: 40px 0 0;
}
.section-gallery .title-site {
    margin-bottom: 25px;
}
.swiper.swiper-gallery {
    padding-bottom: 104px;
}
.section-gallery.bg_in::after {
    content: '';
    background: radial-gradient(ellipse at bottom, #C60001, #F58220);
    height: 252px;
    width: 100%;
    position: absolute;
    bottom: 0;
}
.gallery-item {
    border: 1.5px solid #FFF;
    border-radius: 16px;
    display: block;
    overflow: hidden;
}
.swiper.swiper-gallery .swiper-pagination {
    display: block;
    bottom: 52px !important;
    position: absolute;
}
.section-gallery.bg_in .swiper.swiper-gallery  .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff;
}
.gallery-item img {
    width: 100%;
}
.gallery-item a {
    display: block;
    position: relative;
}
.gallery-item a:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(99, 99, 99, 0.55);
    backdrop-filter: blur(2.77692px);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
}
.gallery-item a:before{
    opacity: 0;
    visibility: hidden;
    content: "\e94f";
    position: absolute;
    color: #fff;
    font-size: 56px;
    inset: 0;
    margin: auto;
    transition: 0.3s;
    z-index: 2;
    font-family: icomoon;
    line-height: 1;
    height: 56px;
    width: 56px;
}
.gallery-item:hover a:after, .gallery-item:hover a:before {
    opacity: 1;
    visibility: visible;
}
.section-teams {
    padding: 40px 0;
}
.team-img img {
    width: 100%;
}
.team-img {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
}
.team-content {
    text-align: center;
}
.team-content .name {
    font-size: 22px;
    line-height: 30px;
    color: #3D3D3D;
    margin-bottom: 16px;
}
.team-content .post {
    font-size: 14px;
    line-height: 30px;
    color: #666666;
    margin-bottom: 17px;
}
.teams-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    font-size: 33px;

}
.teams-social a {
    color: #898989;
    line-height: 1;
    transition: 0.4s ease;
}
.teams-social a:hover {
    color: var(--color1);
}
.section-icongrid {
    padding: 30px 0;
}
.icongrid-item {
    background: #FFFFFF;
    box-shadow: 0px 0px 24px rgba(184, 184, 184, 0.18);
    border-radius: 20px;
    padding: 15px 10px;
    margin-bottom: 20px;
}
.icongrid-title {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}
.icongrid-title i {
    font-size: 30px;
    color: var(--color1);
}

.icongrid-title img {
    max-width: 30px;
    height: auto;
}
.icongrid-title .title {
    font-size: 20px;
    line-height: 38px;
    color: #3D3D3D;
}
.icongrid-item .desc {
    font-size: 18px;
    line-height: 34px;
    color: #666666;
}
.section-access {
    padding: 30px 0;
}
.access-item-wrap {
    background: #FFFFFF;
    box-shadow: 0px 0px 32px rgba(184, 184, 184, 0.22);
    border-radius: 20px;
    padding: 17px 15px 30px;
    position: relative;
    margin-bottom: 40px;
}
.access-btn {
    background: #FFFFFF;
    border: 2px solid #C60001;
    border-radius: 24px;
    padding: 10px 10px;
    font-size: 18px;
    line-height: 34px;
    color: var(--color1);
    gap: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    bottom: -26px;
    font-family: var(--med_font);
    transition: 0.4s ease;
    white-space: nowrap;
}
.access-btn:hover {
    background:var(--color1);
    color: #fff;
}
.access-items {
    display: flex;
    justify-content: space-around;
}
.access-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    padding: 10px 5px 25px;
    justify-content: space-between;
}
.access-item .title {
    font-size: 18px;
    line-height: 35px;
    margin: 10px;
    color: #666666;
}
.icon-bg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    padding: 7px 0 11px;
    transition: 0.4s ease;
}
.icon-bg {
    transform: scale(0.8);
}
.access-item:hover .icon-bg {
    transform: rotateY(180deg) scale(0.8);
}
.access-item:hover img {
    transform: rotateY(180deg);
}
.icon-bg::before {
    content: '';
    display: inline-block;
    min-width: 80px;
    height: 80px;
    background: rgb(175, 234, 155);
    backdrop-filter: blur(13.1787px);
    transform: rotate(-111.47deg);
    border-radius: 20px;
    border: 1.5px solid #ffffffa8;
    box-shadow: -3px 3px 4px rgba(90, 90, 90, 0.25);
}
.icon-bg::after {
    content: '';
    display: inline-block;
    width: 70px;
    height: 70px;
    background: linear-gradient(180deg, rgba(204, 255, 0, 0.27) 0%, rgba(196, 222, 191, 0.6) 100%);
    border: 1.17667px solid rgba(255, 255, 255, 0.54);
    backdrop-filter: blur(11.3126px);
    transform: rotate(-73.06deg);
    border-radius: 20px;
    position: absolute;
    z-index: -1;
    right: -13px;
    bottom: 9px;
}
.icon-bg i {
    font-size: 36px;
    background: linear-gradient(45.57deg, #FFFFFF 15.13%, rgba(255, 255, 255, 0.2) 151.8%);
    background-clip: border-box;
    filter: drop-shadow(3.37223px 3.37223px 5.39557px rgba(88, 170, 71, 0.49));
    -webkit-background-clip: text;
    -webkit-text-fill-color: #0000;
    position: absolute;
}
.icon-bg i.icon-support, .icon-bg i.icon-location {
    font-size: 48px;
}
.icon-bg.bg-purple::before {
    background: rgb(214, 189, 223);
}
.icon-bg.bg-purple::after {
    background: linear-gradient(180deg, rgba(238, 169, 255, 0.6) 0%, rgba(221, 191, 222, 0.6) 100%);
}
.icon-bg.bg-purple i {
    filter: drop-shadow(6.92727px 6.92727px 11.0836px rgba(86, 5, 115, 0.4));
}
.icon-bg.bg-red::before {
    background: rgb(245, 191, 188);
}
.icon-bg.bg-red::after {
    background: linear-gradient(180deg, rgba(255, 92, 0, 0.6) 0%, rgba(255, 139, 73, 0.36) 100%);
}
.icon-bg.bg-red i {
    filter: drop-shadow(5px 5px 8px rgba(237, 28, 36, 0.3));
}
.icon-bg.bg-blue::before {
    background: rgb(192, 223, 252);
}
.icon-bg.bg-blue::after {
    background: linear-gradient(180deg, rgba(0, 149, 255, 0.27) 0%, rgba(180, 224, 255, 0.354) 100%);
}
.icon-bg.bg-blue i {
    filter: drop-shadow(0px 2.62778px 7.88333px rgba(61, 61, 61, 0.4));
}
.access-item img {
    height: auto;
    max-width: 102px;
    transition: 0.4s ease;
}

.cta-content .title-heading {
    font-size: 25px;
    line-height: 50px;
    color: #3D3D3D;
    margin-bottom: 10px;
}
.cta-content .button-glow {
    margin-top: 10px;
}
.image-cta {
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 15px;
}
.image-cta img {
    width: 100%;
}
.cta-content-wrap {
    display: flex;
    align-items: center;
}
.section-calltoaction {
    padding: 30px 0;
}
.section-faq {
    padding: 30px 0;
}
@media screen and (min-width: 400px){
    .section-hero {
        align-items: center;
    }
}
@media screen and (min-width: 576px){
    .swiper.swiper-testimonial .swiper-slide {
        margin-right: 0;
    }
    .access-item .title {
        font-size: 20px;
        line-height: 35px;
    }
}
@media screen and (min-width: 768px){
    .btns-wrap {
        flex-direction: row;
        gap: 24px;
        margin-top: 40px;
    }
    .counter-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-bottom: 0;
    }
    .counter-item::after {
        content: '';
        width: 40px;
        height: 4px;
        background: var(--color2);
        border-radius: 10px;
        margin-top: -10px;
        transition: 0.2s ease;
    }
    .counter-title {
        text-align: center;
    }
    .second_hero-content .desc p {
        font-size: 20px;
        line-height: 40px;
    }
    .access-item-wrap {
        padding: 17px 32px 50px;
        margin-bottom: 62px;
    }
    .access-item {
        padding: 32px 15px;
    }
    .icon-bg {
        transform: scale(1);
    }
    .access-item:hover .icon-bg {
        transform: rotateY(180deg) scale(1);
    }
    .counter-item:hover .icon-bg {
        transform: rotateY(180deg) scale(1);
    }
    .counter-item img {
        max-width: 115px;
        margin-top: 0;
    }
    .access-item img {
        max-width: 115px;
    }
    .access-item::after {
        content: '';
        width: 40px;
        height: 4px;
        background: var(--color2);
        border-radius: 10px;
        margin-top: -10px;
        transition: 0.2s ease;
    }
    .access-item .title {
        font-size: 22px;
        line-height: 37px;
        margin: 32px 0 24px;
    }
    .access-btn {
        padding: 15px 16px;
        font-size: 22px;
        line-height: 34px;
        gap: 15px;
        bottom: -32px;
    }
    .counter-item .icon-bg {
        padding: 7px 0 11px;
    }
}
@media screen and (min-width: 992px){
    /*.swiper.swiper-hero {*/
    /*    padding: 62px 0;*/
    /*}*/
    .image-cta {
        margin-bottom: 15px;
    }
    .swiper-hero .swiper-nav {
        width: 47px;
        height: 47px;
        font-size: 16px;
        top: 50%;
    }
    .swiper-hero .swiper-nav.swiper-nav-prev {
        right: 50%;
    }
    .swiper-hero .swiper-nav.swiper-nav-next {
        left: 0;
    }
    .item-slider .slider-image {
        margin-bottom: 24px;
    }
    .item-slider .title {
        font-size: 22px;
        line-height: 34px;
        margin-bottom: 24px;
    }
    .item-slider .desc {
        padding: 0 10px;
    }
    .cta-slider.button-glow {
        height: 64px;
        padding: 4px 4px 4px 27px;
        font-size: 20px;
        line-height: 31px;
    }
    .cta-slider span {
        width: 55px;
        height: 56px;
    }
    .compareList-top {
        flex-direction: row;
        align-items: end;
        margin-bottom: 47px;
    }
    .compareList-top .title-site {
        text-align: right;
    }
    .compareList-top .title-site .desc p {
        text-align: right;
    }
    .box-list {
        max-height: 416px;
        padding: 0 24px;
    }

    .box-title {
        font-size: 22px;
        line-height: 30px;
    }
    .box-list .box-listItem:last-child {
        margin-bottom: 12px;
    }
    .counter-item {
        gap: 25px;
    }

    .buttons {
        text-align: right;
    }
    .item-card {
        padding: 32px 24px 27px;
    }
    .section-contentCard .btns-wrap {
        flex-direction: row;
        gap: 24px;
    }

    .section-testimonial .title-site.title-wrap {
        height: 100%;
        padding-left: 40px;
        text-align: right;
    }
.title-site.title-wrap .desc p {
    font-size: 18px;
    line-height: 36px;
}
    .section-testimonial::before {
        content: '';
        height: 100%;
        width: 35%;
        background: #fff;
        position: absolute;
        right: 0;
        top: 0;
        display: inline-block;
        z-index: 2;
    }
    .section-testimonial::after {
        content: '';
        height: 100%;
        width: 214px;
        background: linear-gradient(90.43deg, #FFFFFF 32.81%, rgba(255, 255, 255, 0) 83.51%);
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
        z-index: 1;
    }
.testimonial-text {
    font-size: 16px;
    line-height: 24px;
}
    .section-cta .title-site {
        text-align: right;
    }
    .cta-item {
        flex: 0 0 49%;
        max-width: 49%;
    }
    .item-hero {
        align-items: center;
        flex-direction: row;
        height: 100%;
        padding:0 ;
    }
    .hero-content {
        max-width: 50%;
        flex: 0 0 50%;
        margin-left: 30px;
    }
    .hero-content .title, .hero-title,.hero-content .desc p,.second_hero-content .title, .second_hero-content .desc p  {
        text-align: right;
    }
    .hero-content .desc {
        margin-bottom: 34px;
    }
    .section-cta {
        padding-top: 0;
        margin-bottom: 145px;
    }
    .compareList-top .buttons {
        display: flex;
        gap: 24px;
    }
    .compareList-top .buttons a {
        padding: 0 20px;
        font-size: 20px;
        gap: 15px;
    }
    .button2 .icon-shop {
        font-size: 26px;
    }
    .section-hero {
        align-items: center;
        /*height: calc(100vh - 160px);*/
        min-height: 650px;
    }
    .second_hero-image {
        height: 550px;
    }
    .item-second_hero {
        flex-direction: row;
    }
    .second_hero-content {
        flex: 0 0 45%;
        max-width: 45%;
        padding-bottom: 90px;
        padding-top: 0;
    }
    .swiper.swiper-second_hero {
        padding: 80px 0;
    }
    .second_hero-content .buttons {
        justify-content: flex-start;
    }
    .second_hero-image {
        flex: 0 0 55%;
        max-width: 55%;
        height: 545px;
    }
    .hero-navigation {
        position: absolute;
        bottom: 80px;
        gap: 24px;
        right: 0;
        transform: none;
        margin-top: 0;
    }
    .secondhero-image img {
        max-height: 564px;
    }
    .section-second_slider {
        padding: 60px 0;
    }
    .icongrid-item {
        padding: 40px 25px 32px;
        margin-bottom: 32px;
    }
    .icongrid-title {
        gap: 36px;
        margin-bottom: 25px;
    }
    .icongrid-title i {
        font-size: 40px;
    }
    .icongrid-title .title {
        font-size: 22px;
        line-height: 44px;
    }
    .icongrid-item .desc {
        font-size: 20px;
        line-height: 40px;
    }
    .section-icongrid {
        padding: 40px 0;
    }
    .section-editor {
        padding: 72px 0 20px;
    }
    .section-gallery .title-site {
        margin-bottom: 47px;
    }
    .icongrid-title img {
        max-width: 35px;
        height: auto;
    }
    .box-wrap > .desc {
        font-size: 19px;
        line-height: 42px;
        padding-bottom: 20px;
        padding-top: 10px;
    }
    .section-banner {
        padding: 60px 0;
    }
    .item-banner {
        margin-bottom: 32px;
    }
    .section-access {
        padding: 60px 0;
    }
    .section-counter {
        padding: 60px 0;
    }
    .counter-num {
        margin-top: 0;
    }
    .section-calltoaction {
        padding: 60px 0;
    }
    .section-faq {
        padding: 60px 0;
    }
    .cta-content .title-heading {
        font-size: 32px;
        line-height: 68px;
        margin-bottom: 30px;
    }
    .section-hero:before {
        height: calc(100% - 77px);
        background: linear-gradient(-50deg,  #c60001 50%, #d00);
    }
    .swiper.swiper-hero {
        /*padding: 62px 0;*/
        overflow: visible;
        height: calc(100% - 93px);
    }
    .hero-content .buttons {
        margin-bottom: 0;
    }
    .hero-image img {
        max-height: 68vh;
        width: auto;
    }


}
@media screen and (min-width: 992px){
      .scroll-down {
          bottom: -6px;
          right: 5%;
        transform: unset;
    }
}
@media screen and (min-width: 1200px){
    .section-hero {
        height: calc((var(--vh, 1vh) * 100) - 160px);
    }
    .counter-title {
        font-size: 22px;
        line-height: 32px;
    }
    .scroll-down {
        bottom: -16px;
        right: 5%;
    }
      .scroll-downBtn {
        width: 103px;
        height: 103px;
        font-size: 31px;
    }
    .scroll-down svg {
        transform: scale(1);
    }
    .box-wrap {
        padding: 24px;
        margin-bottom: 32px;
    }
    .hero-content .title {
        position: relative;
        top: unset;
        font-size: 37px;
        line-height: 60px;
        margin-bottom: 32px;
        text-align: right;
    }
    .second_hero-content .title {
        font-size: 37px;
        line-height: 60px;
        margin-bottom: 32px;
    }
    .hero-content .desc {
        margin-bottom: 34px;
    }
    .hero-content .desc p , .second_hero-content .desc p {
        font-size: 22px;
        line-height: 44px;
        text-align: right;
    }
    .hero-content .buttons .button:nth-child(2) {
        margin-right: 16px;
    }

    .swiper-hero .buttons .button, .second_hero-content .buttons .button {
        height: 62px;
        min-width: 145px;
    }
    .section-contentCard .title-center.title-site {
        max-width: 48%;
    }
    .section-contentCard {
        padding: 80px 0;
    }
.item-card .desc {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px;
    padding-left: 10px;
}
    .testimonial-info {
        gap: 24px;
        min-height: 120px;
    }
    .item-testimonial {
        padding: 30px 24px 36px;
    }
    .section-cta .title-site {
        max-width: 44%;
    }
    .cta__items {
        max-width: 76%;
        margin-right: auto;
        gap: 14px;
        padding: 20px 0 65px;
    }
    .cta-item {
        padding: 24px;
        flex: 0 0 43%;
        max-width: 43%;
    }
    .cta__items .cta-item:nth-child(2n),.cta__items .cta-item:nth-child(3n),.cta__items .cta-item:nth-child(7n){
        flex: 0 0 54%;
        max-width: 54%;
    }
    .cta__items .cta-item:nth-child(4n){
        flex: 0 0 43%;
        max-width: 43%;
    }
    .section-cta .cta-img{
        top: unset;
        bottom: 0;
    }
    .section-cta .title-site {
        margin-bottom: 10px;
    }
    .section-cta .title-site .desc p {
        font-size: 20px;
        line-height: 48px;
    }
    .cta-title i {
        font-size: 62px;
    }
    .cta-title img {
        max-width: 64px;
    }

    .cta-title {
        margin-bottom: 25px;
    }
    .cta-title .title {
        font-size: 22px;
        line-height: 30px;
    }
    .cta-item .desc {
        font-size: 18px;
        line-height: 40px;
    }

    .swiper.swiper-card {
        padding: 0 10px;
        margin: 0 -10px;
    }
    .section-hero::before {
        height: calc(100% - 60px);
    }
    .btn-slider {
        margin-right: 26px;
    }
    .section-second_slider .btns-wrap {
        margin-top: 20px;
    }
}
@media screen and (min-width: 1400px){
    .scroll-down {
        bottom: -12px;
        right: 8%;
        z-index: 1;
    }
    .section-testimonial {
        padding: 70px 0;
    }
    .section-compareList {
        padding: 80px 0 68px;
    }
    .section-slider {
        padding: 80px 0;
    }
    .hero-content {
        max-width: 43%;
        flex: 0 0 43%;
    }
    .swiper-hero .swiper-nav.swiper-nav-prev {
        right: 43%;
    }
    .compareList-top {
        gap: 175px;
    }
    .box-listItem {
        padding: 24px 0 24px 0;
        margin-bottom: 16px;
        display: grid;
        align-items: center;
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        grid-template-columns: 64px 2fr;
        gap: 16px 24px;
        grid-template-areas:"a b" "a c";
        grid-template-rows: auto;
    }
    .box-listItem .title {
        font-size: 21px;
        line-height: 28px;
    }
    .box-listItem .desc {
        font-size: 15px;
        line-height: 30px;
    }
    .box-listItem .icon {
        min-width: 64px;
        height: 64px;
        font-size: 37px;
    }
    .box-listItem .icon img {
        max-width: 42px;
    }
    .cta__items {
        gap: 32px;
    }
    .section-hero::before {
        height: calc(100% - 70px);
    }
}
@media screen and (min-width: 1600px){
    .scroll-down {
        bottom: -1px;
        right: 8%;
    }
    .hero-content .title , .second_hero-content .title{
        font-size: 47px;
        line-height: 85px;
    }
    .hero-content .desc p, .second_hero-content .desc p {
        font-size: 24px;
        line-height: 50px;
    }
    .section-hero::before {
        height: calc(100% - 81px);
    }

}
@media screen and (max-width: 576px){
    .hero-image ,.secondhero-image {
        transform: none !important;
    }
    .hero-content .desc.editor-content.long-desc {
        max-height: 170px;
        margin-bottom: 0;
    }
    .hero-content .desc.editor-content.short-desc {
        max-height: 115px;
    }
    .hero-content .desc.editor-content {
        overflow: auto;
        scrollbar-color: #575757 #EDEDED;
        scrollbar-width: thin;
    }
    /* width */
    .hero-content .desc.editor-content::-webkit-scrollbar {
        width: 3px;
    }
    /* Track */
    .hero-content .desc.editor-content::-webkit-scrollbar-track {
        background: #EDEDED;
        border-radius: 10px;
    }
    /* Handle */
    .hero-content .desc.editor-content::-webkit-scrollbar-thumb {
        background: #575757);
        border-radius: 10px;
    }
    /* Handle on hover */
    .hero-content .desc.editor-content::-webkit-scrollbar-thumb:hover {
        background: #575757;
    }
  .counter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
}
.item-card-wrap  .card-top {
    min-height: 95px;
}