@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {box-sizing: border-box;
}

:root {
    --red-color: #C3263D;
    --yellow-color: #FFBB00;
    --white-color: #ffffff;
    --secondary-red:#E6001A;
    --body-color: #F2F2F2;
    --color-2e: #2E2E2E;
    --color-00: #000000;
    --default-color: #363636;
    --sec-color: #373F55;
     --primary-font2: 'Inter', sans-serif;
    --primary-font1: 'Inter', sans-serif;
    --primary-font2: 'Roboto', sans-serif;
    --font-72: 800 72px/.7 var( --primary-font2);
    --font-48: 800 48px/1.2 var( --primary-font2);
    --font-36: 700 36px/1.3 var( --primary-font2);
    --font-30: 700 30px/1.2 var( --primary-font2);
    --font-24: 700 24px/1.3 var( --primary-font2);
    --font-21: 400 21px/1.4 var( --primary-font2);
    --font-18: 400 18px/1.4 var( --primary-font2);
    --font-14: 400 15px/1.4 var( --primary-font2);
    --font-12: 400 14px/1.5 var(--primary-font2);	
}

@media (max-width: 1800px){    
    :root {    
        --font-12: 400 14px/1.5 var( --primary-font2);
        --font-48: 800 40px/1.2 var( --primary-font2);
    }
}
@media (max-width: 1400px){    
    :root {    
        --font-72: 800 52px/1 var( --primary-font2);
        --font-48: 800 36px/1.2 var( --primary-font2);
        --font-36: 700 30px/1.3 var( --primary-font2);
        --font-30: 700 26px/1.3 var( --primary-font2);
        --font-24: 700 24px/1.3 var( --primary-font2);
        --font-21: 400 18px/1.4 var( --primary-font2);
        --font-18: 400 22px/1.4 var( --primary-font2);
        --font-14: 400 14px/1.4 var( --primary-font2);
        --font-12: 400 18px/1.8 var( --primary-font2);
    }
}

@media (max-width: 991px){    
    :root {    
        --font-72: 800 52px/1 var( --primary-font2);
        --font-48: 800 36px/1.2 var( --primary-font2);
        --font-36: 700 30px/1.3 var( --primary-font2);
        --font-30: 700 26px/1.3 var( --primary-font2);
        --font-24: 700 24px/1.3 var( --primary-font2);
        --font-21: 400 18px/1.4 var( --primary-font2);
        --font-18: 400 16px/1.4 var( --primary-font2);
        --font-14: 400 14px/1.4 var( --primary-font2);
        --font-12: 400 12px/1.5 var( --primary-font2);
    }
    .container {
        padding: 0 1.5rem;
        max-width: 100%;
    }
}

@media (max-width:480px){    
    :root {    
        --font-72: 800 52px/1 var( --primary-font2);
        --font-48: 800 30px/1.2 var( --primary-font2);
        --font-36: 700 28px/1.3 var( --primary-font2);
        --font-30: 700 20px/1.3 var( --primary-font2);
        --font-24: 700 24px/1.3 var( --primary-font2);
        --font-21: 400 18px/1.4 var( --primary-font2);
        --font-18: 400 16px/1.4 var( --primary-font2);
        --font-14: 400 14px/1.4 var( --primary-font2);
        --font-12: 400 16px/1.5 var( --primary-font2);
    }
}

@media (max-width:360px){    
    :root {    
        --font-72: 800 52px/1 var( --primary-font2);
        --font-48: 800 24px/1.2 var( --primary-font2);
        --font-36: 700 28px/1.3 var( --primary-font2);
        --font-30: 700 20px/1.3 var( --primary-font2);
        --font-24: 700 24px/1.3 var( --primary-font2);
        --font-21: 400 18px/1.4 var( --primary-font2);
        --font-18: 400 16px/1.4 var( --primary-font2);
        --font-14: 400 14px/1.4 var( --primary-font2);
        --font-12: 400 12px/1.5 var( --primary-font2);
    }
}


html {font-size: 62.5%;scroll-behavior: smooth;}

body {
    font-family: var(--primary-font2);color: var(--default-color);line-height: 1.6;background-color: var(--body-color);font-size: max(12px, 1.2rem);
    font-weight: 400;
}


@media (min-width: 575px) {
    /* .container,.container-sm,.container-lg,.container-xl {padding-inline: calc(var(--bs-gutter-x) * .5)} */
}
@media (min-width: 1200px) {
    .container,.container-sm,.container-lg,.container-xl {max-width: 1200px;}
}

@media (min-width: 1400px) {
    .container,.container-sm,.container-lg,.container-xl {max-width: 1278px;}
    /* body {font-size: 1.4rem} */
}

@media (min-width: 1600px) {
    /* html {font-size: 70.32%;} */
    .container,.container-sm,.container-lg,.container-xl {max-width: 1400px;}
}

@media (min-width: 1800px) {
    /* html {font-size: 70.32%;} */
    .container,.container-sm,.container-lg,.container-xl {max-width: 1640px;}
}
.maxwidth {
    max-width: 1920px;
    margin-inline: auto;
}
.swiper-button-prev:after, .swiper-button-next:after{
    display: none;
}
.swiper-button-prev{
    transform: rotate(180deg);
}
.full-width {width:100%; max-width: 1920px; margin-inline: auto}

/* Typography */
/* .text-50{font-size:5rem; line-height:0.9; font-weight:600; } */
.text-36 {font: var(--font-36);}
.text-30 {font: var(--font-30);}
.text-21 {font: var(--font-21);}
.text-18 {font: var(--font-18);}
.text-14 {font: var(--font-14);}
.text-12 {font: var(--font-12);}

.lead{font-size: 1.3em;}

.light {font-weight: 300;}
.reg {font-weight: 400;}
.med {font-weight: 500;}
.semi {font-weight: 600;}
.bold {font-weight: 700;}
.ebold {font-weight: 800;}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure {margin-bottom: 0;}

:where(h1, h2, h3, h4):not(:last-child) {margin-bottom: 3rem;}
:where(h5, h6):not(:last-child) {margin-bottom: 2rem;}
:where(p, ul, ol):not(:last-child) {margin-bottom: 2rem;}

p, li {font: var(--font-12); line-height: 1.5;font-weight: 400;}

section {padding-block: 6rem}

.section-title {font-weight: 700;font: var(--font-30); color: var(--red-color);}
.section-title:not(:last-child) {margin-bottom: 3rem;}
.heading-top{color: var(--color-00); font-weight: 700; font: var(--font-18)}
.heading-top.reg{font-weight: 400;}
.section-heading p:not(:last-child){margin-bottom: 3rem;}

.hover-red{ transition-duration: .6s; transition-timing-function: linear; background-image: linear-gradient(to right, var(--red-color)50%, rgba(255,255,255,1)50%); background-clip: text; background-size: 200%; background-position: right; color: transparent; transition-delay: .3s;}
.hover-red:hover{background-position: left;  color: transparent; transition-delay: 0s;}
.after-line:before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + 2rem);
    width: 5rem;
    translate: 0 -0.5px;
    height: 1px;
    transition-duration: .3s; transition-timing-function: linear;
}
.hover-red.after-line:before{   
    background-color: transparent; 
    background-image: linear-gradient(to right, var(--red-color)50%, rgba(255,255,255,1)50%);
    background-size: 200%;
    background-position: right;
    transition-delay: 0s;
}
.hover-red.after-line:hover:before{
    background-position: left;
    transition-delay: .5s;
}
/* Typography end */


/* Figure related css*/
.with-scale {overflow: hidden;}

.with-scale img {transition: .5s all;-webkit-transition: .5s all;-moz-transition: .5s all;-ms-transition: .5s all;-o-transition: .5s all;}

.with-scale img:hover {scale: 1.15;}

.img-fit {height: 100%}

.img-fit img {height: 100%;width: 100%;object-fit: cover}

.image, .image2, .image3{
    opacity: 0;
}
.image4::before{scale: 0 1;}
.reveal-image,
.reveal-image:after {position: absolute;animation-delay: 0s;animation-iteration-count: 1;animation-duration: 1600ms;animation-fill-mode: both;animation-timing-function: ease-in-out;}
.reveal-image2,
.reveal-image2:after {position: absolute;animation-delay: .1s;animation-iteration-count: 1;animation-duration: 1800ms;animation-fill-mode: both;animation-timing-function: ease-in-out;}
.reveal-image {opacity: 1;position: relative;animation-name: reveal-image;}
.reveal-image2 {opacity: 1;position: relative;animation-name: reveal-image2;}
.reveal-image3 {opacity: 1;position: relative;animation-name: fadeInline1;animation-delay: .1s;animation-iteration-count: 1;animation-duration: 1800ms;animation-fill-mode: both;animation-timing-function: ease-in-out; transform-origin: top;}
.reveal-image4::before{scale: 0 1; position: relative;animation-name: fadeInline2;animation-delay: .2s;animation-iteration-count: 1;animation-duration: 2200ms;animation-fill-mode: both;animation-timing-function: ease-in-out; transform-origin: left;}

/* .reveal-image3 {opacity: 1;position: relative;animation-name: fadeInline1;animation-delay: .1s;animation-iteration-count: 1;animation-duration: 1800ms;animation-fill-mode: both;animation-timing-function: ease-in-out; transform-origin: top;} */

@keyframes reveal-image {
    from { clip-path: inset(0 100% 0 0);}
    to { clip-path: inset(0 0 0 0);}
}

@keyframes reveal-image2 {
    from {
      clip-path: inset(0 0% 100% 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
}
@keyframes fadeInLeft{
    from {opacity: 0; margin-left:-25%;}
    to{opacity: 1;margin-left:0%;}
}

@keyframes fadeInRight{
    from {opacity:0;
        margin-left: 30%;
    }
    to {opacity: 1;
        margin-left: 0%;
    }
}

@keyframes fadeInline1 {
    0% {opacity: 0; scale: 1 0}
    100% {opacity: 1;scale: 1 1;}
}
@keyframes fadeInline2 {
    0% {opacity: 0; scale: 0 1}
    100% {opacity: 1;scale: 1 1;}
}
.image-container {
    position: relative; overflow: hidden; padding-bottom: calc(50% / (var(--ratio))); 
}

.img-hover{overflow: hidden;}
.img-hover img{ transition: .8s all; -webkit-transition: .8s all; -moz-transition: .8s all; -ms-transition: .8s all; -o-transition: .8s all; }
.img-hover img:hover{scale: 1.1;}
/* Figure related css end */

li {padding-left: 0;list-style: none;}
a {text-decoration: none;}
ul {padding-left: 0;}
/* Btns */
.a-line {position: relative;margin-top: 3rem; overflow: hidden;}
.a-line::before, .a-line::after {content: "";position: absolute;left: 2.7rem;top: 50%;width: calc(100% - 2.7rem);border: 1px solid #000; border-color: #707070;}
.a-line::after{ border-color: var(--red-color); scale: 0 1; transition:.6s all ; -webkit-transition:.6s all ; -moz-transition:.6s all ; -ms-transition:.6s all ; -o-transition:.6s all ; transform-origin: left;}
.a-line:hover::after{scale: 1;}
.line-white:before {background-color: #ffffff4d;}
.link-icon {position: relative;width: max(24px, 2.7rem);height: max(27px, 2.7rem);display: block; cursor: pointer;}
.link-icon.icon-outline-red::before {content: '';position: absolute;inset: 0;background-image: url('./../images/red-next-icon.svg');background-size: contain;background-position: center;background-repeat: no-repeat;transition: .3s all;-webkit-transition: .3s all;-moz-transition: .3s all;-ms-transition: .3s all;-o-transition: .3s all;}
.line-white .icon-outline-red {filter: brightness(0) invert(1);-webkit-filter: brightness(0) invert(1);}
.link-icon.icon-outline-red:hover::before {background-image: url('./../images/red-bg-next-icon.svg');}
.line-white .icon-outline-red:hover {filter: none;-webkit-filter: none;}
.side-line {position: absolute;width: 1rem;background-color: var(--red-color);z-index: 1;}

.icon-btn{color: var(--red-color);fill: none; stroke: currentColor;}
.icon-btn svg{ transition:.4s all ; -webkit-transition:.4s all ; -moz-transition:.4s all ; -ms-transition:.4s all ; -o-transition:.4s all ; }

.toggletdiv{display: none;}
.toggler-btn{display: block; width: fit-content; cursor: pointer;}
.toggletdiv > p:last-child{margin-bottom: 2rem;}

.btn-close{background-image: none; opacity: 1; width: fit-content; height: auto; margin-inline: auto; margin-right: 0; display: block;}

/* Form Elements */
.form-control{ font-size: 1.2rem; background: transparent; border: none; border-radius:0 ; -webkit-border-radius:0 ; -moz-border-radius:0 ; -ms-border-radius:0 ; -o-border-radius:0 ; padding: 0; padding-bottom: 1.5rem;}
select.form-control{background-image: url('./../images/arrow-down.svg'); background-position: right 1rem;
    background-size: 3.5rem 2rem;
    background-repeat: no-repeat;}
select.form-control:focus{box-shadow: none; outline: none;}
/* Form Elements end*/

/* mobile menu */
.mobile-menu-btns {display: flex; position: fixed; left:0; bottom: 0; width: 100%;}
.mobile-menu-btns .mobile-menu-toggler {width: 25%;color: #fff;font-size: max(.63rem, 9px);row-gap: .3rem;padding-block: .89rem;display: flex;flex-direction: column;justify-content: center;align-items: center; background: var(--color-2e);flex-grow: 1; border: none}
.mobile-menu-btns .mobile-menu-toggler.active {background: var(--body-color); color: var(--color-2e);}
.mobile-menu-btns .mobile-menu-toggler img{ filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); }
.mobile-menu-btns .mobile-menu-toggler.active img{ filter: brightness(0); -webkit-filter: brightness(0); }

 

.mobile-panel.show{
    transform: translateY(0px);
}
.mobile-panel{display: block;text-align: left;position: fixed;top: 0px;width: 100%;height: 100%;left: 0;background: var(--body-color);padding: 0px 0px 80px;transform: translateY(100%);transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);background-size: cover;z-index: 999;overflow-y: scroll;max-height: 100%;}
.mobile-menu-btns {display: flex;position: fixed;bottom: 0;width: 100%;z-index: 9999;}
/* business mobile css */
.mobile-panel .future-box{flex-direction: column; height: auto;}
.future-box {
    background-color: var(--sec-color);
    border-radius: 5px;
    padding: 3rem;
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    height: 100%;
}
.future-box figure {
    justify-content: center;
    display: flex;
    margin-bottom: 0rem;
}
.future-content h4 {
    color: #fff;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    margin-bottom: 2.6rem;
    text-align: center;
}
.future-content p {
    color: #fff;
}
.future-box.red {
    background-color: #A83232;
}
.mobile-business-panel {
    padding: 2.8rem 2.8rem 8rem;
}
.mobile-business-panel.mobile-panel a.future-box {
    margin-bottom: 2.5rem;
}
.mobile-business-panel a.future-box .reveal2 {
    padding-bottom: 2.5rem;
}
.mobile-business-panel .future-content p {
    display: block;
    text-align: center;
    margin: 0;
}
.mobile-business-panel .future-content h4 {
    padding-bottom: 4.4rem;
    margin: 0;
}
.mobile-business-panel a.future-box .reveal2 img {
    max-height: 9rem;
}
.mobile-contact-panel .mobile-panel-top {
    background-color: #A83232;
    text-align: center;
    height: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.mobile-contact-panel .mobile-panel-top h5 {
    font-size: 2.4rem;
    padding-bottom: 1.8rem;
    margin: 0;
}
.mobile-contact-panel .mobile-panel-top p {
    font-size: 2.1rem;
    line-height: 1.4;
}
.mobile-contact-panel .mobile-panel-top h5,
.mobile-contact-panel .mobile-panel-top p{
    color:#FFFFFF;
}
.mobile-contact-panel .mobile-panel-bottom {
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    background-color: #F2F2F2;
}
.mobile-contact-panel .mobile-panel-bottom .phone a,
.mobile-contact-panel .mobile-panel-bottom .phone img {
    display: block;
    text-align: center;
    margin: 0 auto;
}
.mobile-contact-panel .mobile-panel-bottom .phone img {
    border: 1px solid white;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 auto 2rem;
}
.mobile-contact-panel .mobile-panel-bottom .phone:first-child {
    margin-top: -2.4rem;
    border-bottom: 1px solid #373F551a;
}
.mobile-contact-panel .mobile-panel-bottom .phone a {
    font-size: 2.1rem;
    color: #000000;
    line-height: 1;
    font-weight: 500;
}
.mobile-contact-panel .mobile-panel-bottom .phone {
    width: 100%;
    padding-bottom: 6rem;
}
.mobile-contact-panel .mobile-panel-bottom .phone:last-child {
    padding-bottom: 0;
    padding-top: 6rem;
}
.mobile-contact-panel .mobile-panel-top,
.mobile-contact-panel .mobile-panel-bottom {
    padding: 0 5rem;
}
.mobile-menu-panel .m-menu-box {
    background-color: #F2F2F2;
}
.mobile-menu-panel .m-menu-box ul li a {
    color: #000;
    font-size: 1.8rem;
    line-height: 1.2;
}
.mobile-menu-panel .m-menu-box .accordion ul li.open a {
    color: #000;
}
.mobile-menu-panel .m-menu-box li{
    border-bottom: 1px solid gainsboro;
}
.mobile-menu-panel .m-menu-box .submenu{
    margin-bottom: 0;
}
.mobile-menu-panel .m-menu-box ul li a.link:after{
    background: url(../images/icon-plus-one.png) no-repeat;
}
.mobile-menu-panel .m-menu-box ul li.open a.link:after {
    background: url(../images/icon-minus-one.png) no-repeat;
}
.mobile-menu-panel .m-menu-box ul li ul li a {
    font-size: 1.5rem;
}
.mobile-menu-panel .m-menu-box ul li ul li {
    padding: 1rem;
}
.mobile-menu-panel .m-menu-box ul li a{
    font-family: var(--primary-font1);
}
@media only screen and (max-width: 375px) {
    .mobile-contact-panel .mobile-panel-top,
    .mobile-contact-panel .mobile-panel-bottom {
        padding: 0 2.5rem;
    }
    .mobile-contact-panel .mobile-panel-top h5{
        font-size: 2rem;
    }
    .mobile-contact-panel .mobile-panel-top p {
        font-size: 1.8rem;
    }
    .mobile-contact-panel .mobile-panel-bottom .phone a{
        font-size: 1.8rem;
    }
    .mobile-menu-panel .m-menu-box ul li a{
        font-size: 1.6rem;
    }
    .mobile-menu-panel .m-menu-box ul li ul li a {
        font-size: 1.4rem;
    }
    .mobile-menu-panel .m-menu-box ul li ul li {
        padding: 0.8rem;
    }
    .mobile-menu-panel .m-menu-box .link:after{

    }
    .mobile-menu-panel .m-menu-box ul li a.link:after,
    .mobile-menu-panel .m-menu-box ul li.open a.link:after{
        background-size: 86%;
    }
}
/*contact mobile css*/

/*menu mobile css*/
.m-menu-box {background: #992361;width: 100%;height: auto;left: 0;padding: 70px 20px 30px;}
.m-menu-box li {list-style: none;border-bottom: 1px solid #ffffff45;padding: 20px 0;}
.m-menu-box .accordion {width: 100%;max-width: 360px;margin: 0px auto 20px;background: #FFF;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background: none;}
.m-menu-box .submenu {display: none;background: #efefef17;font-size: 14px;margin: 15px 0;}
.m-menu-box .accordion li.open .link {color: #fff;}
.m-menu-box .link { cursor: pointer; font-size: 1.3rem; color: #fff; text-decoration: none; font-family: var(--primary-font2); display: block; padding: 0px; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; font-weight: 600; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; }
.m-menu-box li a {font-size: 1.3rem;color: #fff;text-decoration: none;font-weight: 600;}
.m-menu-box .submenu li a {font-size: 1rem;color: #fff;font-weight: 400;}
.m-menu-box .submenu li {padding: 15px;}
.m-menu-box .submenu li {border-bottom: 1px solid #ffffff1c;}
.m-menu-box .link:after {content: "";width: 14px;height: 14px;position: absolute;top: 4px;right: 0;background: url('../images/icon-plus.png') no-repeat;background-position: center;}
.m-menu-box .open .link:after {background: url('../images/icon-minus.png') no-repeat;}
.m-menu-box li.open>ul {display: block;}
.m-menu-box .accordion h3 {margin: 0px;}
.m-menu-box .open .submenu .link:after {content: "";background: url('../images/icon-plus.png') no-repeat;background-position: center;}
.m-menu-box .open .submenu .open .submenu .link:after {content: "";background: url('../images/icon-plus.png') no-repeat;background-position: center;}
.m-menu-box .open .submenu .open .link:after {content: "";background: url('../images/icon-minus.png') no-repeat;background-position: center;}
.m-menu-box .open .submenu .open .submenu .open .link:after {content: "";background: url('../images/icon-minus.png') no-repeat;background-position: center;}
.m-menu-box2 {padding: 45px 20px;}
.m-menu-box2 ul li a {color: #fff;font-size: 16px;font-weight: 600;}
.m-menu-box2 ul {display: flex;flex-wrap: wrap;}
.m-menu-box2 ul li {width: 50%;margin-bottom: 25px;}
.m-menu-box .accordion h3 a {font-size: 1.3rem;font-weight: 600;}

.custom-dash li{margin-bottom: 1rem; position: relative; line-height: 1.7; font-size: max(12px, 1.4rem); padding-left: 2rem}
.custom-dash li::before{position: absolute; content: ''; left: 0; width: .7rem; height: 2px; top: .8rem; background-color: var(--red-color);}

@media (min-width: 992px) {
    .text-48 { font-size: 4.8rem;line-height: .95;}
    .text-43 { font-size: 4.3rem;line-height: 0.95;}
    .text-36 { font-size: 3.6rem;line-height: 1.17;}
    .mobile-menu-btns {display: none;}
}
@media (min-width: 1200px) {
    .modal .modal-xl{ --bs-modal-width: 962px;}
}
@media (min-width: 1400px) {
    .modal .modal-xl{ --bs-modal-width: 1140px;}
}

