.banner .banner-slider .swiper-slide .banner-image {
    height:auto;
    width: 100%;
}
.banner .banner-slider .swiper-button {
    display: flex;
    position: absolute;
    bottom: 28px;
    z-index: 999;
}
.banner .banner-slider .swiper-button .blue-btn {
    margin-right: 10px;
}
.banner .swiper-horizontal>.swiper-pagination-bullets, .banner .swiper-pagination-bullets.swiper-pagination-horizontal, .banner .swiper-pagination-custom, .banner .swiper-pagination-fraction {
    bottom: 23px!important;
}

.large {
    margin-top: -30px;
}


.about {
    padding-bottom: 100px;
    margin-top: -80px
}
.about .left {
    width: 60%;
}
.about .right {
    width: 34%;
    padding-top: 9.5%;
}
.about .left .title {
    font-family: var(--roboto);
    font-size: var(--fs30);
    color: var(--dark-blue);
    font-weight: var(--fwb);
    padding-bottom: 25px;
}
.about .left .bars {
    display: flex;
    padding-bottom: 50px;
}
.about .left .bars .first {
    width: 23%;
    background-color: var(--dark-blue);
    height: 6px;
}
.about .left .bars .second {
    width: 9%;
    background-color: var(--blue);
    height: 6px;
}
.about .left .bars .third {
    width: 9%;
    background-color: #147CBF;
    height: 6px;
}
.about .left .bars .fourth {
    width: 9%;
    background-color: #75C4EF;
    height: 6px;
}
.about .left .bars .fifth {
    width: 9%;
    background-color: var(--yellow);
    height: 6px;
}
.about .left .bars .sixth {
    width: 9%;
    background-color: var(--purple);
    height: 6px;
}
.about .left .bars .seventh {
    width: 9%;
    background-color: var(--red);
    height: 6px;
}
.about .left .description {
    font-family: var(--roboto);
    font-size: var(--fs15);
    color: var(--medium-black);
    line-height: var(--fs28);
    padding-bottom: 40px;
}
.about .right .d-flex {
    cursor: pointer;
}
.about .right .thumbnail {
    width: 100%;
    height: 270px;
    object-fit: cover;
    transition: all 0.5s;
}
.about .right .play {
    position: absolute;
    border: 8px solid rgba(25, 147, 221, 0.5);
    border-radius: 50%;
    transition-property: transform;
    transition-duration: 0.7s;
}
.about .right .d-flex:hover .play {
    animation-name: play-button; 
    animation-duration: 1s; 
    animation-iteration-count: infinite;
    animation-timing-function: both;
}
.about .right .d-flex:hover .thumbnail {
    filter: brightness(0.7);
    transition: all 0.5s;
}



.our-products {
    background-image: url('../images/home/our_products_background.png');
    height: 800px;
    background-size: cover;
    padding-top: 120px;
    padding-bottom: 120px;
}
.our-products .left {
    width: 60%;
}
.our-products .right {
    width: 34%;
    padding-top: 8%;
    text-align: end;
}
.our-products .left .title {
    font-family: var(--roboto);
    font-size: var(--fs40);
    color: var(--white);
    font-weight: var(--fwb);
    padding-bottom: 30px;
}
.our-products .left .description {
    font-family: var(--roboto);
    font-size: var(--fs15);
    color: var(--white);
    line-height: var(--fs28);
    text-align: justify;
}
.our-products .bottom-row {
    padding-top: 45px;
    position: relative;
}
.our-products .bottom-row .product-slider .swiper-slide {
    position: relative;
    padding-bottom: 70px;
    /* cursor: pointer; */
}
.our-products .bottom-row .product-slider .image {
    width: 100%;
    height: auto;
    background: #F4F6FA;
    object-fit: cover;
    transition: all 0.5s;
    padding-bottom: 40px;
}
.our-products .bottom-row .product-slider .details {
    position: absolute;
    background-color: transparent;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: auto;
    bottom: 70px;
    padding: 0 35px;
    transition: all 0.5s;
    width: 100%;
}
.our-products .bottom-row .product-slider .details .title {
    font-family: var(--roboto);
    font-size: var(--fs16);
    color: var(--blue);
    font-weight: var(--fwb);
}
.our-products .swiper-horizontal>.swiper-pagination-bullets, .our-products .swiper-pagination-bullets.swiper-pagination-horizontal, .our-products .swiper-pagination-custom, .our-products .swiper-pagination-fraction {
    bottom: 15px!important;
}

.our-products .bottom-row .product-slider .swiper-slide:hover .image {
    filter: brightness(0.6);
    transition: all 0.5s;
}
.our-products .bottom-row .product-slider .swiper-slide:hover .details {
    background-color: var(--dark-blue);
    transition: all 0.5s;
}
.our-products .bottom-row .product-slider .swiper-slide:hover .details .title {
    color: var(--white);
}
.our-products .swiper-button-next, .our-products .swiper-button-prev {
    top: 45%;
    width: 50px;
    height: 50px;
    background-color: var(--white);
    border-radius: 50%;
    transition: all 0.3s;
}
.our-products .swiper-button-next:after, .our-products .swiper-button-prev:after {
    font-size: 20px;
    color: var(--purple);
    font-weight: var(--fwsb);
}
.our-products .swiper-button-next {
    right: -25px;
}
.our-products .swiper-button-prev {
    left: -25px;
}
.our-products .swiper-button-next:hover, .our-products .swiper-button-prev:hover {
    background-color: var(--blue);
    transition: all 0.3s;
}
.our-products .swiper-button-next:hover:after, .our-products .swiper-button-prev:hover:after {
    color: var(--white);
}
.our-products .mobile {
    display: none;
}



.technology .technology-slider .swiper-slide {
	width: 100%;
	height: 590px;
	background-repeat: no-repeat!important;
	background-size: cover!important;
    background-position: center!important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.technology .technology-slider .swiper-slide .title {
	font-family: var(--roboto);
    font-size: var(--fs86);
    color: var(--white);
    text-transform: uppercase;
    font-weight: 400;
}
.technology .technology-slider .swiper-slide .frame {
    position: relative;
    width: 35%;
    margin-left:auto;
    margin-right:auto;
}
.technology .technology-slider .swiper-slide .frame .border-frame {
    border: 2px solid #4992D7; 
}
.technology .technology-slider .swiper-slide .frame .border-Top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.technology .technology-slider .swiper-slide .frame .border-right-top {
    position: absolute;
    top: 0;
    right: 0;
    height: 40%;
}
.technology .technology-slider .swiper-slide .frame .border-right-bottom {
    position: absolute;
    bottom:0;
    right: 0;
    height: 40%;
}
.technology .technology-slider .swiper-slide .frame .border-left-top {
    position: absolute;
    top: 0;
    left: 0;
    height: 40%;
}
.technology .technology-slider .swiper-slide .frame .border-left-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 40%;
}
.technology .technology-slider .swiper-slide .frame .border-Bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.technology .technology-slider .swiper-slide .frame .inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.technology .swiper-pagination-clickable .swiper-pagination-bullet {
    width: auto;
    height: auto;
    background-color: transparent;
    font-family: var(--roboto);
    font-size: var(--fs20);
    color: var(--white);
    opacity: 0.8;
    font-weight: var(--fwb);
}
.technology .swiper-pagination-bullet-active {
    background: transparent!important;
    opacity: 1!important;
}
.technology .bars {
    display: flex;
}
.technology .bars .first {
    width: 15%;
    background-color: var(--dark-blue);
    height: 8px;
}
.technology .bars .second {
    width: 15%;
    background-color: var(--blue);
    height: 8px;
}
.technology .bars .third {
    width: 15%;
    background-color: #147CBF;
    height: 8px;
}
.technology .bars .fourth {
    width: 15%;
    background-color: #75C4EF;
    height: 8px;
}
.technology .bars .fifth {
    width: 15%;
    background-color: var(--yellow);
    height: 8px;
}
.technology .bars .sixth {
    width: 15%;
    background-color: var(--purple);
    height: 8px;
}
.technology .bars .seventh {
    width: 15%;
    background-color: var(--red);
    height: 8px;
}
.technology .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -6px;
}
.technology .swiper-pagination-bullet .text {
    height: 120px;
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.technology .swiper-pagination-bullet .text .circle {
    border: 2px solid white;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    opacity: 0;
    position: absolute;
    top: 62px;
    transition: all 0.5s;
}
.technology .swiper-pagination-bullet .line {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.technology .swiper-pagination-bullet .line::after {
    content: '';
    position: relative;
    height: 0px;
    width: 0px;
    background: var(--white);
    transition: all 0.5s;
}
.technology .swiper-pagination-bullet-active .line::after {
    content: '';
    position: relative;
    width: 2px;
    height: 100px;
    transition: all 0.5s;
}
.technology .swiper-pagination-bullet-active .text {
    height: 70px;
    transition: all 0.5s;
}
.technology .swiper-pagination-bullet-active .text .circle {
    opacity: 1;
    transition: all 0.5s;
}



.why {
    background-color: #F4F6FA;
    padding-top: 100px;
    margin-bottom: 210px;
}
.why .top-row {
    padding-bottom: 80px;
}
.why .title {
    font-family: var(--roboto);
    font-size: var(--fs40);
    color: var(--dark-blue);
    font-weight: var(--fwb);
    padding-bottom: 25px;
}
.why .description {
    font-family: var(--roboto);
    font-size: var(--fs15);
    color: var(--medium-black);
    line-height: var(--fs28);
    text-align: justify;
}
.why .large-wrap .single-why {
    width: 17%;
    padding: 0;
}
.why .large-wrap .single-why .icons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.why .large-wrap .single-why .triangle {
    position: relative;
    z-index: 1;
}
.why .large-wrap .single-why .icon {
    position: absolute;
    z-index: 1;
}
.why .large-wrap .single-why .triangle-border {
    position: absolute;
    bottom: 0px;
    opacity: 0;
    transition: all 0.5s;
}
.why .large-wrap .single-why .single-why-title {
    font-family: var(--roboto);
    font-size: var(--fs18);
    color: var(--dark-blue);
    font-weight: var(--fwb);
    line-height: 27px;
    text-align: center;
    padding-top: 25px;
}
.why .large-wrap .single-why hr {
    width: 0px;
    border: 2px solid transparent;
    margin: auto;
    margin-top: 30px;
    transition: all 0.5s;
}
.why .large-wrap .active .triangle {
    content: url('../images/home/blue_triangle.png');
    transition: all 1s;
}
.why .large-wrap .active .triangle-border {
    opacity: 1;
    bottom: 15px;
    transition: all 0.5s;
}
.why .large-wrap .active .icon {
    filter: brightness(0) saturate(100%) invert(96%) sepia(97%) saturate(0%) hue-rotate(201deg) brightness(96%) contrast(114%);
}
.why .large-wrap .active hr {
    border: 2px solid #707070;
    width: 40px;
    transition: all 0.5s;
    transition-delay: 0.2s;
}

.why .bottom-row {
    padding-top: 180px;
    position: relative;
}
.why .bottom-row .left {
    width: 47%;
    padding: 30px 0 0 160px;
}
.why .bottom-row .right {
    width: 40%;
    padding: 0;
}
.why .bottom-row .left .icon {
    position: absolute;
    bottom: 0;
    left: -90px;
}
.why .bottom-row .left .title, .why .bottom-row .left .description, .why .bottom-row .left .blue-btn {
    position: relative;
    z-index: 1;
}
.why .bottom-row .right .image {
    width: 100%;
    height: 390px;
    object-fit: cover;
}
.why .bottom-row .left .blue-btn {
    margin-top: 30px;
}
.why .bottom-row .large-logo {
    position: absolute;
    bottom: -150px;
    width: 100%;
}
.why .bottom-row .right .description, .why .bottom-row .right .blue-btn {
    display: none;
}
.why .bottom-row .right .mobile-logo {
    display: none;
}



.sustainability {
    padding-bottom: 100px;
}
.sustainability .left {
    width: 52%;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.sustainability .right {
    width: 39%;
    padding: 0;
}
.sustainability .right .title {
    font-family: var(--roboto);
    font-size: var(--fs40);
    color: var(--dark-blue);
    font-weight: var(--fwb);
    padding-bottom: 25px;
}
.sustainability .right .description {
    font-family: var(--roboto);
    font-size: var(--fs15);
    color: var(--medium-black);
    line-height: var(--fs28);
    padding-bottom: 25px;
    text-align: justify;
}
.sustainability .left .image {
    width: 100%;
    height: 430px;
}
.sustainability .left .triangle {
    position: absolute;
    z-index: 1;
}
.sustainability .left .icon {
    position: absolute;
    z-index: 1;
}
.sustainability .left .triangle-border {
    position: absolute;
    bottom: 105px;
}
.sustainability .mobile .description, .sustainability .mobile .blue-btn {
    display: none;
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: none;
}

.more {
    background-color: var(--blue);
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.more .more-content {
    margin: 0 30px;
}


@keyframes rotation {
    0% {
      transform: rotate3d(0, 1, 0, 0deg);
    }
    20% {
      transform: rotate3d(0, 1, 0, 60deg);
    }
    40% {
      transform: rotate3d(0, 1, 0, 120deg);
    }
    60% {
        transform: rotate3d(0, 1, 0, 180deg);
    }
    80% {
    transform: rotate3d(0, 1, 0, 240deg);
    }
    100% {
    transform: rotate3d(0, 1, 0, 360deg);
    }
  }
  .container {
    background-color: transparent;
    width: 100px;
    height: 100px;
    perspective: 1000;
    margin: 1em auto;
  }
  .coin {
    position: fixed;
    bottom: 0;
    right: 4%;
    z-index: 9999999999;
    top: 43%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    animation-name: rotation;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 3.5s;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transform-origin: center;
}
  .face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
  }
  .heads {
    background-color: transparent;
    z-index: 2;
    transform: rotateY(0deg);
  }
  .tails {
    background-color: transparent;
    z-index: 1;
    transform: rotateY(180deg);
  }
  .heads img, .tails img {
    box-shadow: 0px 8px 8px -2px rgb(0 0 0 / 16%);
    border-radius: 50%;
}




/* Responsive */
@media screen and (max-width: 1680px) {
    .technology .technology-slider .swiper-slide .frame {
        width: 40%;
    }
}

@media screen and (max-width: 1600px) {
    .technology .technology-slider .swiper-slide .frame {
        width: 42%;
    }
}

@media screen and (max-width: 1536px) {
    .banner .banner-slider .swiper-slide .banner-image {
        height: 530px;
    }

    .about .left .title {
        font-size: var(--fs25);
    }
    .about .left .bars {
        padding-bottom: 30px;
    }
    .about .left .bars .first {
        width: 16%;
    }
    .about .left .bars .second {
        width: 8%;
    }
    .about .left .bars .third {
        width: 8%;
    }
    .about .left .bars .fourth {
        width: 8%;
    }
    .about .left .bars .fifth {
        width: 8%;
    }
    .about .left .bars .sixth {
        width: 8%;
    }
    .about .left .bars .seventh {
        width: 8%;
    }
    .about .left .description {
        font-size: var(--fs14);
    }
    .about .right {
        padding-top: 7.5%;
    }


    .our-products {
        height: 700px;
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .our-products .left .title {
        font-size: var(--fs35);
        padding-bottom: 10px;
    }
    .our-products .left .description {
        font-size: var(--fs14);
    }
    .our-products .right {
        padding-top: 6%;
    }

    .technology .technology-slider .swiper-slide {
        height: 530px;
    }
    .technology .technology-slider .swiper-slide .title {
        font-size: var(--fs60);
    }
    .technology .technology-slider .swiper-slide .frame {
        width: 30%;
    }
    .technology .swiper-pagination-clickable .swiper-pagination-bullet {
        font-size: var(--fs18);
    }

    .why {
        padding-top: 70px;
        margin-bottom: 190px;
    }
    .why .title {
        font-size: var(--fs35);
        padding-bottom: 10px;
    }
    .why .description {
        font-size: var(--fs14);
    }
    .why .top-row {
        padding-bottom: 40px;
    }
    .why .large-wrap .single-why .single-why-title {
        font-size: var(--fs17);
        padding-top: 20px;
    }
    .why .bottom-row {
        padding-top: 130px;
    }
    .why .bottom-row .left .icon {
        left: -45px;
        height: 450px;
    }
    .why .bottom-row .right .image {
        height: 350px;
    }


    .sustainability .left .image {
        height: 350px;
    }
    .sustainability .right .title {
        font-size: var(--fs35);
        padding-bottom: 10px;
    }
    .sustainability .right .description {
        font-size: var(--fs14);
        padding-bottom: 20px;
    }
    .sustainability .left .triangle-border {
        bottom: 60px;
    }
}

@media screen and (max-width: 1440px) {
    .about {
        margin-top: -75px;
    }

    .about .left .bars .first {
        width: 20%;
    }

    .technology .technology-slider .swiper-slide .frame {
        width: 33%;
    }
}

@media screen and (max-width: 1366px) {
    .about .left .bars .first {
        width: 24%;
    }

    .technology .technology-slider .swiper-slide .frame {
        width: 35%;
    }
}

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

@media screen and (max-width: 1280px) {
    .about {
        margin-top: -70px;
    }

    .why .bottom-row .left .icon {
        left: -15px;
    }
    
}

@media screen and (max-width: 1025px) {
    .banner .banner-slider .swiper-slide .banner-image {
        height: 400px;
        object-fit: initial;
    }
    .banner .banner-slider .swiper-button {
        bottom: 50px;
    }

    .about {
        margin-top: -55px;
    }
    .about .left .bars .first {
        width: 30%;
    }
    .about .left .bars .second {
        width: 10%;
    }
    .about .left .bars .third {
        width: 10%;
    }
    .about .left .bars .fourth {
        width: 10%;
    }
    .about .left .bars .fifth {
        width: 10%;
    }
    .about .left .bars .sixth {
        width: 10%;
    }
    .about .left .bars .seventh {
        width: 10%;
    }

    .our-products .left {
        width: 70%;
    }
    .our-products .right {
        width: 30%;
        padding-top: 8%;
    }

    
    .technology .technology-slider .swiper-slide {
        height: 450px;
    }
    .technology .technology-slider .swiper-slide .frame {
        width: 45%;
    }


    .why .large-wrap .row {
        justify-content: center!important;
    }
    .why .large-wrap .single-why {
        width: 33%;
        margin-bottom: 40px;
    }
    .why .bottom-row {
        padding-top: 0px;
    }
    .why .bottom-row .left .icon {
        left: -30px;
        height: 300px;
    }
    .why .bottom-row .left {
        width: 50%;
        padding: 30px 0 0 75px;
    }
    .why .bottom-row .right {
        width: 45%;
    }
    .why .bottom-row .right .image {
        height: 300px;
    }
    .coin {
        right: 15%;
        top: 27%;
        width: 0;
    }
    .our-products .swiper-button-next, .our-products .swiper-button-prev {
        top: 50%;
        width: 35px;
        height: 35px;
        z-index: 99999;
    }
    .our-products .swiper-button-prev {
        left: -15px;
    }
    .our-products .swiper-button-next {
        right: -15px;
    }
    
}

@media screen and (max-width: 991px) {
    .about {
        margin-top: -50px;
    }
}

@media screen and (max-width: 850px) {
    .our-products .swiper-button-next {
        right: -15px;
    }
    .our-products .swiper-button-prev {
        left: -15px;
    }
}

@media screen and (max-width: 768px) {
    .banner .main-wrap {
        display: none;
    }

    .about {
        margin-top: -40px;
        padding-bottom: 60px;
    }
    .about .left {
        width: 100%;
    }
    .about .right {
        width: 100%;
    }
    .about .bars div {
        height: 5px!important;
    }
    .about .left .bars .first {
        width: 24%;
    }
    .about .left .bars .second {
        width: 10%;
    }
    .about .left .bars .third {
        width: 8%;
    }
    .about .left .bars .fourth {
        width: 8%;
    }
    .about .left .bars .fifth {
        width: 6%;
    }
    .about .left .bars .sixth {
        width: 8%;
    }
    .about .left .bars .seventh {
        width: 8%;
    }
    .about .left .blue-btn {
        display: none;
    }
    .about .right {
        padding-top: 0;
    }
    .about .right .thumbnail {
        height: 300px;
    }


    .our-products {
        height: 710px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .our-products .left {
        width: 100%;
    }
    .our-products .right {
        display: none;
    }
    .our-products .mobile {
        display: block;
        padding-top: 20px;
    }
    /* .our-products .swiper-button-prev {
        left: -15px;
    }
    .our-products .swiper-button-next {
        right: -15px;
    } */


    .technology .technology-slider .swiper-slide .frame {
        width: 60%;
    }
    .technology .bars div {
        height: 5px!important;
    }

    .why {
        padding-top: 40px;
        margin-bottom: 40px;
        padding-bottom: 60px;
    }
    .why .bottom-row .left {
        width: 100%;
        padding: 0 0 30px 0;
    }
    .why .title {
        text-align: center;
    }
    .why .bottom-row .right {
        width: 100%;
    }
    .why .bottom-row .right .image {
        height: 400px;
    }
    .why .bottom-row .left .description, .why .bottom-row .left .blue-btn {
        display: none;
    }
    .why .bottom-row .right .description {
        display: block;
        text-align: center;
        padding-top: 40px;
    }
    .why .bottom-row .right .blue-btn {
        display: flex;
        margin: auto;
    }
    .why .bottom-row .right .mobile-logo {
        display: block;
        width: 100%;
    }
    .why .bottom-row .left .icon {
        left: -240px;
        height: initial;
        bottom: 50%;
    }
    .why .bottom-row .large-logo {
        display: none;
    }


    .sustainability {
        padding-bottom: 50px;
    }
    .sustainability .row {
        flex-direction: column-reverse;
    }
    .sustainability .left {
        width: 100%;
    }
    .sustainability .right {
        width: 100%;
        padding-bottom: 30px;
    }
    .sustainability .right .title {
        text-align: center;
    }
    .sustainability .right .description, .sustainability .right .blue-btn {
        display: none;
    }
    .sustainability .mobile .description {
        display: block;
        text-align: center;
        padding-top: 40px;
        padding-bottom: 40px;
        font-family: var(--roboto);
        font-size: var(--fs14);
        color: var(--medium-black);
        line-height: var(--fs28);
    }
    .sustainability .mobile .blue-btn {
        display: flex;
        margin: auto;
    }
}

@media screen and (max-width: 428px) {
    .banner .banner-slider .swiper-slide .banner-image {
        height: 250px;
    }
    

    .large .large-logo {
        height: 130px;
    }


    .about {
        margin-top: -35px;
        padding-bottom: 30px;
    }
    .about .left .title {
        padding-bottom: 10px;
    }
    .about .left .bars {
        padding-bottom: 10px;
    }
    .about .left .description {
        padding-bottom: 15px;
    }
    .about .left .bars .first {
        width: 40%;
    }
    .about .left .bars .second {
        width: 10%;
    }
    .about .left .bars .third {
        width: 10%;
    }
    .about .left .bars .fourth {
        width: 10%;
    }
    .about .left .bars .fifth {
        width: 10%;
    }
    .about .left .bars .sixth {
        width: 8%;
    }
    .about .left .bars .seventh {
        width: 8%;
    }


    .our-products {
        height: 650px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .our-products .left .title {
        font-size: var(--fs25);
    }
    .our-products .swiper-button-prev {
        left: -10px;
    }
    .our-products .swiper-button-next {
        right: -10px;
    }
    .our-products .swiper-horizontal>.swiper-pagination-bullets, .our-products .swiper-pagination-bullets.swiper-pagination-horizontal, .our-products .swiper-pagination-custom, .our-products .swiper-pagination-fraction {
        display: none;
    }
    .our-products .bottom-row .product-slider .swiper-slide {
        padding-bottom: 0px;
    }
    .our-products .mobile {
        padding-top: 35px;
    }
    .our-products .bottom-row {
        padding-top: 20px;
    }


    .technology .technology-slider .swiper-slide {
        height: 300px;
    }
    .technology .technology-slider .swiper-slide .title {
        font-size: var(--fs35);
    }
    .technology .technology-slider .swiper-slide .frame {
        width: 65%;
    }
    .technology .swiper-pagination-bullet-active .line::after {
        height: 50px;
    }


    .why {
        padding-top: 30px;
        padding-bottom: 0px;
        margin-bottom: 30px;
    }
    .why .title {
        font-size: var(--fs25);
        padding-bottom: 0px;
    }
    .why .large-wrap .single-why {
        width: 50%;
    }
    .why .bottom-row {
        top: -40px;
    }
    .why .bottom-row .left {
        padding: 0px 0 20px 0;
    }
    .why .bottom-row .left .icon {
        bottom: 46%;
        height: 400px;
        left: -185px;
    }
    .why .bottom-row .right .image {
        height: 275px;
    }
    .why .bottom-row .right .description {
        padding-top: 15px;
    }


    .sustainability {
        padding-bottom: 30px;
    }
    .sustainability .right {
        padding-bottom: 10px;
    }
    .sustainability .right .title {
        font-size: var(--fs25);
    }
    .sustainability .left .image {
        height: 275px;
    }
    .sustainability .mobile .description {
        padding-top: 10px;
        padding-bottom: 20px;
    }
    .sustainability .left .triangle {
        height: 130px;
    }
    .sustainability .left .triangle-border {
        bottom: 60px;
        height: 130px;
    }
    .sustainability .left .icon {
        height: 40px;
    }


    .more {
        height: 215px;
    }
    .more .more-content {
        margin: 0;
    }
    .more .logo {
        margin-bottom: 20px;
    }
    .more .row .d-flex {
        flex-direction: column;
    }

    .our-products .bottom-row .product-slider .details {
        bottom: 5px;
    }

}

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

@media screen and (max-width: 395px) {
    .our-products {
        height: 675px;
    }
    .our-products .swiper-button-next, .our-products .swiper-button-prev {
        width: 40px;
        height: 40px;
    }
    .our-products .swiper-button-prev {
        left: -5px;
    }
    .our-products .swiper-button-next {
        right: -5px;
    }
    .our-products .swiper-button-next:after, .our-products .swiper-button-prev:after {
        font-size: var(--fs15);
    }


    .technology .technology-slider .swiper-slide {
        height: 270px;
    }
    .technology .technology-slider .swiper-slide .frame {
        width: 50%;
    }
    .technology .technology-slider .swiper-slide .title {
        font-size: var(--fs25);
    }

    .technology .technology-slider .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .technology .technology-slider .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        transform: translateX(-65%);
    }
}

@media screen and (max-width: 375px) {
    .technology .technology-slider .swiper-slide .frame {
        width: 55%;
    }


    .why .bottom-row {
        top: -40px;
    }
    .why .bottom-row .left {
        padding: 0px 0 20px 0;
    }
    .why .bottom-row .left .icon {
        height: 400px;
        left: -185px;
    }
    .why .title {
        padding-bottom: 0px;
    }
}

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

@media screen and (max-width: 320px) {
    .banner .banner-slider .swiper-slide .banner-image {
        height: 200px;
    }

    .about .right .thumbnail {
        height: 200px;
    }
    .about .right .play {
        border: 4px solid rgba(25, 147, 221, 0.5);
        height: 40px;
    }

    .our-products {
        height: 700px;
    }

    .technology .technology-slider .swiper-slide .frame {
        width: 60%;
    }


    .why {
        padding-bottom: 15px;
    }
    .why .large-wrap .single-why {
        width: 100%;
        margin-bottom: 30px;
    }
    .why .large-wrap .single-why hr {
        margin-top: 10px;
    }
    .why .top-row {
        padding-bottom: 25px;
    }
    .why .bottom-row {
        top: -10px;
    }
    .why .bottom-row .right .image {
        height: 200px;
    }
    .why .bottom-row .left .icon {
        height: 350px;
        left: -150px;
    }

}
/* Responsive */