/* @font-face { font-family: 'DIN Next LT Arabic'; src: url('assets/fonts/DINNextLTArabic-Bold.woff2') format('woff2'), url('assets/fonts/DINNextLTArabic-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'DIN Next LT Arabic'; src: url('assets/fonts/DINNextLTArabic-Medium.woff2') format('woff2'), url('assets/fonts/DINNextLTArabic-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DIN Next LT Arabic'; src: url('assets/fonts/DINNextLTArabic-Regular.woff2') format('woff2'), url('assets/fonts/DINNextLTArabic-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'DIN Next LT Arabic'; src: url('assets/fonts/DINNextLTArabic-Light.woff2') format('woff2'), url('assets/fonts/DINNextLTArabic-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } */

@font-face{font-family: 'PingARLT'; src:url(assets/fonts/PingARLT-Regular.woff2?v=0.2) format('woff2'),url(assets/fonts/PingARLT-Regular.woff?v=0.2) format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family: 'PingARLT'; src:url(assets/fonts/PingARLT-Light.woff2?v=0.2) format('woff2'),url(assets/fonts/PingARLT-Light.woff?v=0.2) format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family: 'PingARLT'; src:url(assets/fonts/PingARLT-ExtraLight.woff2?v=0.2) format('woff2'),url(assets/fonts/PingARLT-ExtraLight.woff?v=0.2) format('woff');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family: 'PingARLT'; src:url(assets/fonts/PingARLT-Thin.woff2?v=0.2) format('woff2'),url(assets/fonts/PingARLT-Thin.woff?v=0.2) format('woff');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family: 'PingARLT'; src:url(assets/fonts/PingARLT-Hairline.woff2?v=0.2) format('woff2'),url(assets/fonts/PingARLT-Hairline.woff?v=0.2) format('woff');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family: 'PingARLT'; src:url(assets/fonts/PingARLT-Medium.woff2?v=0.2) format('woff2'),url(assets/fonts/PingARLT-Medium.woff?v=0.2) format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family: 'PingARLT'; src:url(assets/fonts/PingARLT-Bold.woff2?v=0.2) format('woff2'),url(assets/fonts/PingARLT-Bold.woff?v=0.2) format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family: 'PingARLT'; src:url(assets/fonts/PingARLT-Black.woff2?v=0.2) format('woff2'),url(assets/fonts/PingARLT-Black.woff?v=0.2) format('woff');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family: 'PingARLT'; src:url(assets/fonts/PingARLT-Heavy.woff2?v=0.2) format('woff2'),url(assets/fonts/PingARLT-Heavy.woff?v=0.2) format('woff');font-weight:800;font-style:normal;font-display:swap}


/* Global Box-sizing
------------------------------------*/
:root
{
    --greenBgColor: #CFF7EE;
    --darkGreenColor: #004956; 
}



[data-aos=fade-up] { transform: translate3d(0, 50px, 0); }
[data-aos=fade-down] {     transform: translate3d(0, -50px, 0); }


body[data-aos-easing="salla-easing"] [data-aos], [data-aos][data-aos][data-aos-easing="salla-easing"] {
    transition-timing-function: cubic-bezier(0.365, 1.320, 0.400, 1.650);
}



body { background: #fff; font-weight: 400; font-family: 'PingARLT';  font-style: normal; font-size: 16px; line-height: 24px; color: #666666; padding: 0; margin: 0px; position: relative; }
p { font-weight: 400; font-family: 'PingARLT';  font-style: normal; font-size: 16px; line-height: 24px; color: #666666; padding: 0; margin: 0 0 30px 0; direction: rtl; }
ul { list-style: none;margin: 0; padding: 0;  }
li { list-style: none; }
h1, h2, h3, h4, h5, h6 {font-family: 'PingARLT'; padding: 0;margin: 0;}
h2 { font: normal 700 48px/88px 'PingARLT';  color: var(--darkGreenColor); padding: 0px; margin: 0;  }

h5 { font: normal 700 18px/33px 'PingARLT'; color: #004956; padding: 0; margin: 0; }
h5 span { display: inline-block; padding: 8px 16px; background-color: #CFF7EE; border-radius: 57px; display: inline-flex; justify-content: center; align-content: center; margin: 0 0 15px 0; }
h5 span i { font-size: 22px; margin-left: 5px; }
h5 span img { margin-left: 8px; }
a, span, i { display:  inline-block; }
a, a:hover, a:visited { text-decoration: none; }
a:focus, span:focus, button:focus, li, div, input, * { outline: none; }
img, a img { display: inline-block; max-width: 100%; height: auto; }
*, *:after, *:before { padding:0; margin:0; list-style:none; border:none; box-sizing:border-box; }
.clearfix:before, .gform_wrapper:before, ul:before,
.clearfix:after, .gform_wrapper:after, ul:after { content:''; display:table; }
.clearfix:after, .gform_wrapper:after, ul:after { clear:both; }
.clearfix, .gform_wrapper, ul { *zoom:1; }

.defaultBtn {padding: 7px 38px; color: var(--greenBgColor);position: relative;z-index: 2;border-radius: 0.75rem;font-size: 22px;font-weight: 700;line-height: 50px; transition: 0.5s; }
/* .defaultBtn:before */
.defaultBtn sup{position: absolute; left:0; right:0; top:0; bottom:0; z-index: 1; perspective: 550px; transition: 0.5s;}
.defaultBtn sup:before {transform: rotateX(30deg);background-color: var(--darkGreenColor);position: absolute;left: 0;right: 0px;top: 0;bottom: 0;z-index: -1;content: '';border-radius: .75rem; border: 1px solid var(--darkGreenColor); }
.defaultBtn span {position: relative; z-index: 10;}
.defaultBtn:hover sup:before { background-color: transparent; }
.defaultBtn:hover { color: var(--darkGreenColor); }

.bannerSec { background-color: var(--greenBgColor); padding-bottom: 40px; }
.banLogos { text-align: center; padding: 72px 0 56px 0; }
.banLogos > img{max-width: 100%; width: 540px; height: auto;}
.banLogos .logosInfo { font: normal 700 18px/33px 'PingARLT';  color: var(--darkGreenColor); margin-top: 60px;  }
.banLogos .logosInfo span {background-color: #73E7CC;height: 49px;border-radius: 48px;border: 3px solid white;width: auto;line-height: 49px;padding: 0px 50px 0px 15px;     position: relative; box-shadow: 0px 5px 24px 0px #00000014; display: inline-block; }
.banLogos .logosInfo span img, .banLogos .logosInfo span i { position: absolute; right: 14px; top: -3px; bottom: 0; margin: auto; font-size: 26px; }
.banInfo { text-align: center; }
.banInfo h2 { font: normal 700 60px/111px 'PingARLT';  color: var(--darkGreenColor); padding: 0px; margin: 0 0 16px 0; }
.banInfo p { font: normal 400 22px/40px 'PingARLT';  color: var(--darkGreenColor); padding: 0px; margin: 0; }
.banBtn { margin: 52px 0 33px; }
.borBtn { margin: 0 25px 0 0; font-size: 22px; font-weight: 700; color: var(--darkGreenColor); position: relative; z-index: 2; line-height: 50px; padding: 7px 25px 8px 25px; transition: 0.5s; }
/* .borBtn:hover {color: var(--darkGreenColor);} */
.borBtn:hover {color: #cff7ee;}
.borBtn sup{position: absolute; left:0; right:0; top:0; bottom:0; z-index: 1; perspective: 550px; transition: 0.5s;}
.borBtn sup:before { content: ''; z-index: -1; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0; border: 1px solid #004956; transform: rotateX(30deg); border-radius: .75rem; }
.borBtn:hover sup:before { background-color: var(--darkGreenColor); }
.borBtn span {position: relative; z-index: 10;}

.counterSec { padding: 96px 0px; }
.counterSec p {font: normal 400 20px/37px 'PingARLT';padding: 0px;margin: 12px 0 0 0;font-size: 19px;line-height: 24px;}
.counterSec .counterSec{padding: 51px 0px;}
.counterSec .counterSec p{margin: 0px 0 0 0;font-size: 16px;}
.counterSec ul {display: flex;justify-content: center;align-items: center;}
.counterSec ul li {font: normal 500 32px / 45px 'PingARLT';color: var(--darkGreenColor);padding: 0px;margin: 0;text-align: right;position: relative;padding-right: 80px; font-family: Helvetica Neue, sans-serif; }
.counterSec ul li strong{}
.counterSec ul li strong:before{content:"+"; font-size: 0.9em; display: inline-block; vertical-align: middle; margin: -12px 7px 0px 0px;}
.counterSec ul li span { width: 62px; height: 56px; border: 3px solid var(--greenBgColor); display: inline-flex; justify-content: center; align-items: center; border-radius: 10px; position: absolute; right: 0; top: 6px; }
.counterSec ul li span i { font-size: 25px; }
.counterSec ul li:first-child {min-width: 370px;}
.counterSec ul li:last-child {width: 260px;margin-left: 40px;}

.doubleSliderSec { padding-top: 52px; padding-bottom: 180px; }
.doubleSliderSec h2 { margin-bottom: 47px; }

.slider-area ul.slider-nav {display: flex;justify-content: center;align-items: center;margin-bottom: 32px;position: relative;}
.slider-area ul.slider-nav li {border: 2px solid #96EDD9; /* min-width: 180px; */ border-radius: 24px; height: 113px;display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 16px 0px;cursor: pointer;transition: 0.3s;margin: 0 8px; text-align: center; }
.slider-area ul.slider-nav li i { color: #348d9c; font-size: 30px; }
.slider-area ul.slider-nav li i svg path { fill: #348D9C; }
.slider-area ul.slider-nav li p { margin: 0; padding: 0; font-size: 18px; line-height: 33px; font-weight: 500; color: #004956; margin-top: auto; }
.slider-area ul.slider-nav li i.hgi-solid.hgi-heart-check { margin-right: -25px; }



.slider-area ul.slider-nav li.slick-slide.slick-current.slick-active, .slider-area ul.slider-nav li:hover { background-color: #004956; border-color: #004956; }
.slider-area ul.slider-nav li.slick-slide.slick-current.slick-active p,
.slider-area ul.slider-nav li.slick-slide.slick-current.slick-active i,
.slider-area ul.slider-nav li:hover p,
.slider-area ul.slider-nav li:hover i { color: white; }
.slider-area ul.slider-nav li.slick-slide.slick-current.slick-active svg path, .slider-area ul.slider-nav li:hover i svg path { fill: white;}


.slider-area .slick-prev {position: absolute;cursor: pointer;font-size: 0;z-index: 110;width: 48px;height: 48px;background: url(assets/images/slider-left-arrow.png) left top no-repeat;right: 9px;top: 30px;left: inherit;opacity: 1; bottom: inherit; }
.slider-area .slick-next {position: absolute;left: 60px;cursor: pointer;right: inherit;font-size: 0;z-index: 105;width: 48px;height: 48px;background: url(assets/images/slider-right-arrow.png) left top no-repeat; top: 30px; bottom: inherit; opacity: 1; }

.slider-area .slick-prev.slick-disabled, .slider-area .slick-next.slick-disabled { opacity: 0; }

.slider-area .sliderNavContainer{overflow: hidden; position: relative;}
.slider-area .sliderNavContainer .sliderScrollDv{overflow: auto; direction: rtl; margin-bottom: -15px;}
.slider-area .sliderNavContainer ul.slider-nav{display: block; white-space: nowrap;}
.slider-area .sliderNavContainer ul.slider-nav li{display: inline-block; min-width: 180px;}
.slider-area .sliderNavContainer ul.slider-nav li.active{background-color: #004956; border-color: #004956; }
.slider-area .sliderNavContainer ul.slider-nav li.active p,
.slider-area .sliderNavContainer ul.slider-nav li.active i{color: white;}
.slider-area .sliderNavContainer ul.slider-nav li.active i svg path { fill: white;}
.slider-area .sliderNavContainer:before,
.slider-area .sliderNavContainer:after{content:''; display: block; position: absolute; top: 0; bottom: 0; width: 130px; z-index: 100;}
.slider-area .sliderNavContainer:before{left: 0; background: linear-gradient(to right, rgb(255, 255, 255) 20%,rgba(255,255,255,0) 100%); }
.slider-area .sliderNavContainer:after{right: 0; background: linear-gradient(to left, rgb(255, 255, 255) 20%,rgba(255,255,255,0) 100%); }
.slider-area .sliderNavContainer .slideArrow{position: absolute;cursor: pointer;font-size: 0;z-index: 110;width: 48px;height: 48px;top: 30px;}
.slider-area .sliderNavContainer .slideArrow.arrowLeft{background: url(assets/images/slider-left-arrow.png) left top no-repeat; left:10px;}
.slider-area .sliderNavContainer .slideArrow.arrowRight{background: url(assets/images/slider-right-arrow.png) left top no-repeat; right:10px;}
.slider-area .sliderNavContainer.hide-rightArrow .slideArrow.arrowRight,
.slider-area .sliderNavContainer.hide-rightArrow:after{display: none;}
.slider-area .sliderNavContainer.hide-leftArrow .slideArrow.arrowLeft,
.slider-area .sliderNavContainer.hide-leftArrow:before{display: none;}



.slider-detail { padding: 0 8px; }
.slider-detail .sliderInfoBg {background-color: #CFF7EE;border-radius: 32px; }
/* .slider-detail .sliderInfoBg>.row { flex-direction: row-reverse; } */
/* .slider-detail .sliderInfoBg .row { height: 586px; } */
.slider-detail .sliderInfoBg .sliderImgArea { height: 100%; background-position: center; background-repeat: no-repeat; }
.slider-detail .sliderInfoBg .sliderImgAreaMobile { display: none; height: 100%; background-position: center; background-repeat: no-repeat; }

.slider-detail .sliderInfoBg .sliderScreenshotDv{position: relative;}
.slider-detail .sliderInfoBg .sliderScreenshotDv .item{position: relative; width: 420px; aspect-ratio: 21 / 16;}
.slider-detail .sliderInfoBg .sliderScreenshotDv .item img{width: 100%; height: 100%; object-fit: contain;}
.slider-detail .sliderInfoBg .sliderScreenshotDv .item.top{position:absolute; right:0; bottom: 100%; margin: 0 0 20px;}
.slider-detail .sliderInfoBg .sliderScreenshotDv .item.mid{}
.slider-detail .sliderInfoBg .sliderScreenshotDv .item.bot{position:absolute; left:0; top: 100%; margin: 20px 0 0;}

.slider-detail .sliderInfoBg .sliderInfoArea { text-align: right; padding: 48px 48px 48px 0; }
.slider-detail .sliderInfoBg .sliderInfoArea h3 { font-size: 36px; line-height: 66px; font-weight: 700; color: #004956; padding: 0px; margin:0 0 8px -20px; }
.slider-detail .sliderInfoBg .sliderInfoArea p { font-size: 20px; line-height: 37px; font-weight: 400; color: #004956; padding: 0px; margin: 0 0 48px 0; }

.slider-detail .sliderInfoBg .sliderInfoArea ul {padding: 0px;margin: 0 0 48px 0;display: flex;justify-content: flex-end;flex-direction: column;}
.slider-detail .sliderInfoBg .sliderInfoArea ul li {position: relative;font-size: 20px;font-weight: 700;color: #004956;padding: 0 40px 0 0px;margin: 0 0 24px 0;line-height: 37px;}
.slider-detail .sliderInfoBg .sliderInfoArea ul li:last-child { margin-bottom: 0; }
.slider-detail .sliderInfoBg .sliderInfoArea ul li img {position: absolute;right: 0;top: 0;bottom: 0;margin: auto;}
.slider-detail .sliderInfoBg .sliderInfoArea ul li i { color: #5ca9b5; font-size: 25px; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; }
.slider-detail .sliderInfoBg .sliderInfoArea h4 {font-size: 30px;font-weight: 700;color: #004956;padding: 0 100px 10px 0;margin: 0;line-height: 55px;position: relative;}
.slider-detail .sliderInfoBg .sliderInfoArea h4 span {display: block;line-height: 37px;font-weight: 500;font-size: 20px;}
.slider-detail .sliderInfoBg .sliderInfoArea h4:before {position: absolute;right: 0;content: '';background: url(assets/images/slider-icon-big.png) left top no-repeat;width: 78px;height: 65px;top: 0;bottom: 0;margin: auto;}




.bodyHeading{padding:36px 0px 17px;}



.createStoreSec { padding: 0;  }
.createStoreSec.sec01{margin-bottom: 5px;}
.createStoreSec.sec06{padding:7px 0 6px;}

.createStoreSec .row.align-items-center { min-height: 645px; }
.sectionInfo { text-align: right; padding-top: 18px;}
.sectionInfo h3 { font: normal 700 35px/66px 'PingARLT'; color: #004956; padding: 0; margin: 0 0 6px; direction: rtl; }
.sectionInfo p { font-size: 20px; line-height: 37px; direction: rtl; margin-bottom: 55px; }
.createStoreSec .imageArea { text-align: left; padding: 50px;}
.sectionInfo ul { padding: 0px; margin: 0; display: flex; justify-content: flex-end; flex-direction: column; }
.sectionInfo ul li { position: relative; font: normal 700 20px/37px 'PingARLT'; color: #004956; padding: 0 40px 0 0px; margin: 0 0 24px 0; direction: rtl; }
.sectionInfo ul li img { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; max-width: 28px; max-height: 28px;}
.sectionInfo ul li i { color: #5CA9B5; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; font-size: 25px;} 
.createStoreSec.reverseCol { background-color: #FCFCFC; }
.createStoreSec.reverseCol .row.align-items-center { flex-direction: row-reverse; }
.createStoreSec.reverseCol .row.align-items-center .imageArea { text-align: right; }

/* .mainReverseCol .row { flex-direction: row-reverse; } */


.threeBoxSec { padding: 70px 0px; }
.threeBoxSec h2 { margin-bottom: 48px; }
.threeBoxSec .boxArea { text-align: center;  }
.threeBoxSec .boxArea h3 {  font: normal 700 30px/55px 'PingARLT'; color: #004956; direction: rtl; }
.threeBoxSec .boxArea .boxImgBg { display: flex; justify-content: center; align-items: center; background-color: #EEFCF9; border-radius: 24px; height: 300px; margin: 0 65px 24px 65px; }

.ctaSec { padding: 92px 0px;}
.ctaSec .ctaBg { background-color: #baf3e6; padding: 51px 21px 51px 24px; border-radius: 12px; }

.ctaSec .ctaBg ul { display: flex; align-items: center; }
.ctaSec .ctaBg ul li:first-child { min-width: 250px; }
.ctaSec .ctaBg ul li:last-child { margin-left: auto;}
.ctaSec .ctaBg ul li h3 { font: normal 700 35px/45px 'PingARLT'; color: #004956; padding: 0 0 10px 0; margin: 0px; text-align: right; }
.ctaSec .ctaBg ul li p {  font: normal 400 22px/32px 'PingARLT'; color: #686868; padding: 0px; margin: 0px; text-align: right; }





.mobSec { padding: 120px 0 32px; }
.mobBg { background-color: #F6F1EA; border-radius: 40px; padding: 48px 35px 45px 55px; } 
.mobSec .mobImg{margin:-45px 0;}
.mobInfo { text-align: right;}
.mobInfo h4 {  font: normal 700 36px / 66px 'PingARLT'; color: #562F2F; padding: 0px; margin: 16px 0 8px 0; }
.mobInfo p { padding: 0px; margin: 0 0 48px 0;  font: normal 400 19px / 37px 'PingARLT'; color: #666666;}

.mobInfo ul { padding: 0px; margin:0 0 25px; display: flex; justify-content: flex-end; flex-direction: column; }
.mobInfo ul li { position: relative; font: normal 700 20px / 37px 'PingARLT'; color: #562F2F; padding: 0 40px 0 0px; margin: 0 0 24px 0; direction: rtl;}
.mobInfo ul li img, .mobInfo ul li i { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; color: #444444; font-size: 23px; }
.mobInfo .btnArea a + a { margin-left: 16px; }



.twoBoxes { margin-bottom: 32px; }
.leftBox { background-color: #EEFCF9; border-radius: 40px; padding: 48px 48px 32px 48px; min-height: 605px; height: 100%;}
.leftBox .imageArea { margin: 0 0 58px 0; position: relative; }
.leftBox .imageArea h5 { padding: 8px 16px; margin: 0; font: normal 700 24px / 45px 'PingARLT'; color: #004956; background-color: #96EDD9; border-radius: 85px; border: 4px solid white; position: absolute; right: 0; top: 0; direction: rtl; }
.leftBox .boxInfo { text-align: right; }
.leftBox .boxInfo h4 { padding: 0; margin: 0 0 24px 0; }
.leftBox .boxInfo h3 { font: normal 700 36px/66px 'PingARLT'; color: #004956; padding: 0; margin: 0 0 8px 0; direction: rtl; }
.leftBox .boxInfo p { font-size: 20px; line-height: 37px; color: #004956; margin: 0; padding: 0; }
.leftBox .boxInfo h4 span { padding: 8px 16px; background-color: white; border-radius: 222px; font: normal 700 24px/44px 'PingARLT'; color: #4A9E8A; display: inline-flex; justify-content: center; align-items: center; }
.leftBox .boxInfo h4 span img, .leftBox .boxInfo h4 span i { margin-left: 10px; font-size: 26px; }


.leftBox.rightBox {  background-color: #F1F8F9; }
.leftBox.rightBox .imageArea h5 { background-color: #95C8D0; color: #004956; }
.leftBox.rightBox .boxInfo h4 span {color: #348D9C; }


.darkSec .mobBg { background-color: #333333; padding: 48px 35px 95px 0px;}
.mobSec.darkSec{padding:0px;}
.mobSec.darkSec .mobImg{margin:-45px 0;margin-right: -50px;}
.mobSec.darkSec .mobInfo h4,
.mobSec.darkSec .mobInfo p,
.mobSec.darkSec .mobInfo ul li
 { color: white;}

 .mobSec.darkSec .mobInfo ul li i { color: #DDDDDD;     font-size: 26px; }
 .mobSec.darkSec .mobInfo ul li i.hgi-store-location-02{transform: scaleX(-1);}

.mobSec.darkSec .borBtn {    color: #BAF3E6; margin:0 6px 0 0; padding:7px 35px 8px 45px;}
.mobSec.darkSec .borBtn i { margin-left: 6px; bottom: -4px; }
.mobSec.darkSec .borBtn sup:before { border-color: #BAF3E6; }  



.videoSec { padding:  140px 0 0 0;}
.videoSec h2 { font-size: 36px; line-height: 66px; margin: 0 0 48px 0; text-align: center; }
.videoSec .videoArea { border: 2px solid #96EDD9; border-radius: 24px; padding: 48px 40px;}
.videoSec .videoArea .row.mobFlip { flex-direction: row-reverse; }
.videoSec .videoArea .videoInfoArea { padding-right: 20px; }
.videoSec .videoArea .videoInfoArea h3 { font-size: 30px; line-height: 56px; color: #004956; text-align: right; padding: 0 0 24px 120px; margin: 0; font-weight: 400; direction: rtl; min-height: 200px;}
.videoSec .videoArea .videoInfoArea h5 { font-size: 24px; line-height: 38px; color: #004956; text-align: right; font-weight: 700; padding: 0 0 2px; margin: 0px;  }
.videoSec .videoArea .videoInfoArea p { padding: 0px; margin: 0; font-size: 20px; font-weight: 500; line-height: 32px; color: #999999; text-align: right; }
.videoSec .videoArea .videoInfoArea p span { margin-right: 8px;}
.videoSec .videoArea .videoInfoArea .img{width: 62px; height: 62px; display: inline-flex; justify-content: center; align-items: center; margin: 0px 0px 0px; vertical-align: middle;}
.videoSec .videoArea .videoInfoArea p img { display: inline; max-width: 57px; }
@media only screen and (min-width: 1200px){
    .videoSec .container{width:1200px;}
}


.videoSec .imgArea { position: relative; }
.videoSec .videoIcon { position: absolute; left: 0; right: 0; margin: auto; font-size: 30px; background-color: #BAF3E6; width: 65px; height: 65px; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
.videoSec .videoIcon::before {content: ""; width: 0px; height: 0px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid #004956; margin: 0px 0px 0px 10px;}
.videoSec .imgArea iframe { display: none; border-radius: 17px; }

.videoSlider { margin-bottom: 100px; }
.slick-disabled { opacity: 0.5; pointer-events:none; }
button.slick-arrow i {font-size: 15px;width: 60px;height: 60px;border: 1px solid #ccc;display: flex;justify-content: center;align-items: center;border-radius: 50%;color: #333;cursor: pointer;}
.slick-prev, .slick-next { background: transparent; position: absolute; left: 0; right: 0; bottom: -100px; margin: auto; width: 60px; height: 60px; }

.slick-prev {right: -75px;}
.slick-next  {left: -75px;}




.clientLogos { min-height: 600px; padding: 140px 0 150px; }
.clientLogos .clientLogoSlider{margin-top: 50px;}
.clientLogos .clientLogoSlider .item{width: 300px;}
.clientLogos .clientLogoSlider .item > div{width: 100%;}
.clientLogos ul { display: flex; justify-content: center; align-items: center; margin-top: 50px; }
.clientLogos ul li { }
.clientLogos ul li a,
.clientLogos a { text-align: center; height: 90px; display: flex; justify-content: center; align-items: center; margin: 15px 0; }
.clientLogos ul li img,
.clientLogos img {max-width: 100px;margin: auto; max-height: 70px; }
.clientLogos button.slick-next{left:-35px;}
.clientLogos button.slick-arrow,
.clientLogos button.slick-arrow i{width: 40px; height: 40px;}



.slider-area ul.slider-nav {  }
.slider-area .slider-nav.slick-initialized.slick-slider:before { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 130px; z-index: 100; background: linear-gradient(to right, rgb(255, 255, 255) 20%,rgba(255,255,255,0) 100%); }
.slider-area .slider-nav.slick-initialized.slick-slider.nextArrow-hidden:before{display:none}
.slider-area .slider-nav.slick-initialized.slick-slider.slick-moved:after { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 130px; z-index: 100; background: linear-gradient(to left, rgb(255, 255, 255) 20%,rgba(255,255,255,0) 100%); }
.slider-area .slider-nav.slick-initialized.slick-slider:after,
.slider-area .slider-nav.slick-initialized.slick-slider.prevArrow-hidden:after{display:none;}



/* Safari Only */
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    /*.defaultBtn span{position: relative; z-index: 10;transform: rotateX(30deg);}
    .borBtn span{position: relative; z-index: 10;transform: rotateX(30deg);}*/
    .sectionInfo ul li i.hgi-discount-tag-02{right:25px;}
  }




    /* Responsive
------------------------------------*/

@media only screen and (min-width: 1700px){
    .videoSlider{position: relative; max-width: 2400px; margin: 0 auto 100px;}
    .videoSlider:before,
    .videoSlider:after{content:''; display: block; position: absolute; top: 0; bottom: 0; width:20vw; z-index: 100;}
    .videoSlider:before{left: 0; background: linear-gradient(to right, rgb(255, 255, 255) 20%,rgba(255,255,255,0) 100%); }
    .videoSlider:after{right: 0; background: linear-gradient(to left, rgb(255, 255, 255) 20%,rgba(255,255,255,0) 100%); }

}

@media only screen and (min-width: 1200px){
	.container {    max-width: 1320px;}
}

/* @media only screen and (max-width: 1366px) */
@media (min-width:1282) and (max-width: 1366px){ }
@media (min-width:1170px) and (max-width: 1281px) { }
@media (min-width:1000px) and (max-width: 1200px) {
    .threeBoxSec .boxArea .boxImgBg { margin: 0 0px 24px 0px; }

    .leftBox .boxInfo h3 { font-size: 30px; line-height: 60px;     } 
    .leftBox .boxInfo p { font-size: 16px; line-height: 30px; }
    .leftBox {     min-height: 510px; }

    .mobInfo h4 { font-size: 30px; line-height: 60px;; }
    .videoSec .videoArea .videoInfoArea h3 { font-size: 28px; line-height: 45px; padding: 0 0 20px 0px; margin: 0; }




 }
@media (min-width: 768px) and (max-width: 999px) { }
@media (max-width: 1000px) {
    .container { max-width: 100%; }
    h2 { font-size: 35px; line-height: 50px; }
    h5 { font-size: 14px; line-height: 25px; }
    h5 span { margin: 0 0 10px 0; }
    h5 span i { font-size: 16px; margin-left: 8px; }
    .defaultBtn{ font-size: 18px; padding: 7px 29px; line-height: 39px;  }
    .borBtn { font-size: 18px; margin: 0 12px 0 0; line-height: 33px; padding: 10px 20px; }
    .banLogos { padding: 48px 0 40px 0; }
    .banLogos .logosInfo { margin-top: -8px; font-size: 14px; line-height: 25px; font-weight: 700; }
    .banLogos .logosInfo span { padding: 4px 40px 4px 12px; height: auto; line-height: normal; }
    .banLogos .logosInfo span i{ top: 6px; font-size: 20px; }
    .banInfo h2 { font-size: 30px; line-height: 55px; }
    .banInfo p { font-size: 16px; line-height: 29px; }
    .banBtn { margin: 40px 0 33px; display: flex; justify-content: center; }

    .counterSec { padding: 48px 0px; }
    .counterSec p { font-size: 16px; line-height: 30px; margin: 4px 0px 0px; }
    .counterSec .counterSec{padding:44px 0px 29px;}

    .doubleSliderSec { padding-bottom: 80px; }
    .doubleSliderSec h2{margin-bottom: 32px;}
    
    .slider-area .sliderNavContainer ul.slider-nav li{min-width: 120px; margin:0 6px;}
    .slider-detail .sliderInfoBg { border-radius: 24px;}
    .slider-detail .sliderInfoBg .sliderImgArea { display: none; }
    .slider-detail .sliderInfoBg .sliderImgAreaMobile { display: block; min-height: 148px; height: 30vw; margin-top: 32px; background-size: contain;}

    .slider-detail .sliderInfoBg .row { height: auto; }
    .slider-detail .sliderInfoBg .sliderImgArea { height: 148px; }
    .slider-detail .sliderInfoBg .sliderInfoArea {  padding: 32px 10px; }

    .slider-detail .sliderInfoBg .sliderScreenshotDv{margin:40px 0 0;}
    .slider-detail .sliderInfoBg .sliderScreenshotDv .item{width:calc(60vw - 40px);}
    .slider-detail .sliderInfoBg .sliderScreenshotDv .item.top{right:100%; bottom: 0; margin: 0 20px 0 0px;}
    .slider-detail .sliderInfoBg .sliderScreenshotDv .item.mid{}
    .slider-detail .sliderInfoBg .sliderScreenshotDv .item.bot{left:100%; top:0; margin: 0px 0 0 20px;}

    .slider-detail .sliderInfoBg .sliderInfoArea h3 { font-size: 24px; line-height: 44px; margin:0 0 8px 0px;}
    .slider-detail .sliderInfoBg .sliderInfoArea p { font-size: 16px; line-height: 30px; margin: 0 0 32px 0; }
    .slider-detail .sliderInfoBg .sliderInfoArea ul li { font-size: 16px; padding: 0 30px 0 0px; margin: 0 0 24px 0; line-height: 29px;     }
    .slider-detail .sliderInfoBg .sliderInfoArea ul li i { font-size: 20px; }
    .slider-detail .sliderInfoBg .sliderInfoArea ul { margin-bottom: 32px; }
    .slider-detail .sliderInfoBg .sliderInfoArea h4:before  { width: 48px; height: 40px; background-size: cover; }
    .slider-detail .sliderInfoBg .sliderInfoArea h4 { font-size: 20px; padding: 0 65px 0 0; line-height: 37px;  }
    .slider-detail .sliderInfoBg .sliderInfoArea h4 span { font-size: 16px;  line-height: 29px;  }

    .bodyHeading h2 { padding-bottom: 48px; }
    .createStoreSec .imageArea { text-align: center; padding:0px; padding-bottom: 16px; }
    .sectionInfo h3 { font-size: 24px; line-height: 44px; padding-bottom: 8px; }
    .sectionInfo p { font-size: 16px; line-height: 29px; }
    .sectionInfo ul li  { font-size: 16px; line-height: 29px; padding: 0 35px 0 0px; }
    .sectionInfo ul li i { font-size: 20px; bottom: 0; margin: auto; height: 28px;  }

    .createStoreSec.reverseCol { padding: 32px 0; }
    .createStoreSec { padding: 25px 0; }

    .threeBoxSec h2 { margin-bottom: 51px; font-size: 30px; line-height: 55px; }

    .threeBoxSec {  padding: 72px 0px 0;}
    
    .threeBoxSec .boxArea .boxImgBg { margin: 0 0px 16px 0px; height:auto; }
    .threeBoxSec .boxArea h3 { font-size: 24px;  line-height: 44px; padding-bottom: 48px; }


    .ctaSec { padding: 0px 0px;}
    .ctaSec .ctaBg ul li h3 {  font: normal 700 28px / 40px 'PingARLT'; text-align: center; }
    .ctaSec .ctaBg ul li p { font-size: 18px; text-align: center; padding-bottom: 25px; }
    .ctaSec .ctaBg ul li p br { display: none;}

    .mobBg { border-radius: 24px; padding: 15px 15px 30px 15px; }
    .mobImg { padding-bottom: 25px; }
    .mobInfo>img { max-width: 121px; }
    .mobInfo h4 { font-size: 24px; line-height: 44px; }
    .mobInfo p { font-size: 16px; line-height: 29px; margin-bottom: 32px; }
    .mobInfo ul li { font-size: 16px; line-height: 29px; padding-right: 32px; }
    .mobInfo .btnArea a + a { margin-left: 6px; }

    .btnArea { display: flex; justify-content: space-around; }

    .sliderInfoBg .col-sm-6, .createStoreSec .col-sm-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

    .videoSec { padding: 50px 0 80px 0; }
    .videoSec .container{padding: 0;}
    .videoSec .videoArea .videoInfoArea h3 { font-size: 20px; line-height: 37px; padding: 30px 0 16px 0px; font-weight: 400; }
    .videoSec .videoArea .row.mobFlip { flex-direction: column-reverse; }
    .videoSec .row.mobFlip .col-7, .videoSec .row.mobFlip .col-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    .videoSec .videoArea { padding: 16px; margin: 0 10px; width: 80vw;}
    .videoSec .videoSlider .slick-list{padding: 0 40px;}
    .videoSec .slick-slide img { width: 100%; }
    .videoSec .videoArea .videoInfoArea p img { width: 50px; height: 50px; }
    .videoSec .videoArea .videoInfoArea h5 { font-size: 16px; line-height: 25px; }
    .videoSec .videoArea .videoInfoArea p { font-size: 16px; line-height: 25px; }

    .twoBoxes .col-sm-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    .twoBoxes .row.mobFlip { flex-direction: column-reverse; }
    .leftBox .boxInfo h3 { font-size: 24px; line-height: 44px;     } 
    .leftBox .boxInfo p { font-size: 16px; line-height: 30px; }
    .leftBox { min-height: inherit; margin-top: 30px; padding: 16px; border-radius: 24px;}
    .leftBox.rightBox{padding-bottom: 70px;}
    .leftBox .imageArea { text-align: center; margin: 0 0 16px 0; }
    .leftBox .imageArea h5 { font-size: 14px; line-height: 26px; padding: 5px 10px; }
    .leftBox .boxInfo h4 { margin: 0 0 16px 0;}
    .leftBox .boxInfo h4 span { font-size: 16px; line-height: 30px; padding: 6px 16px;}

    .videoSec h2 { font-size: 30px; line-height: 55px; margin:0 30px 42px; }
    .videoSec .videoIcon { width: 50px; height: 50px; font-size: 22px; }
    .videoSec .videoIcon::before{border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #004956; margin: 0px 0px 0px 5px;}


    .slider-area .slick-prev { left: 0px; }
    .slider-area .slick-next { right: 0px; }
    

    .mobSec .col-sm-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    .ctaSec .ctaBg ul li:first-child { min-width: 210px; text-align: center; }

    .clientLogos { padding: 50px 0 150px; }
    .clientLogos ul { margin-top: 20px; }


}
@media (max-width: 767px) { 
    ::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    h2 { font-size: 24px; line-height: 44px; }
    .banInfo{margin:0 -5px;}
    .banInfo p br { display: none;}

    .threeBoxSec .row.mobFlip { flex-direction: column-reverse; }
    .threeBoxSec .boxArea .boxImgBg { margin: 0 32px 16px 32px; }
    .ctaSec .ctaBg ul { flex-direction: column-reverse;}

    .counterSec ul { justify-content: flex-end; align-items: flex-end; flex-direction: column-reverse; }
    .counterSec ul li:last-child { width: auto; margin-left: 0; margin-bottom: 51px; }
    .threeBoxSec .col-sm-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    .slider-detail .sliderInfoBg .sliderInfoArea ul li img { width: 21px; }

    /* .videoSec .imgArea iframe { height: auto !important;} */
    .videoSec .videoArea .videoInfoArea { padding-right: 0px; }
     .videoSec .imgArea { /* min-height: 200px; */ } 
    .videoSec .imgArea .video-placeholder, .videoSec .imgArea .iframeClass {width: 100% !important; height: 100% !important; }
    .videoSec .imgArea .iframeClass { position: absolute; left: 0; top: 0; z-index: 10;}
    .videoSec .imgArea.vidActive .video-placeholder,
    .videoSec .imgArea.vidActive .videoIcon{}
    .videoSec .imgArea.vidActive .iframeClass{display:block;}

    .mobSec { padding: 48px 0 0px; }
    .mobSec .mobImg{margin: 0;}
    .mobSec.darkSec { padding-top: 0; }
    .mobSec.darkSec .mobImg{margin: -70px -1px -20px;}
    .mobSec.darkSec .mobBg{padding:60px 17px 70px;}
    .mobSec.darkSec .mobInfo p{margin-bottom: 41px;}
    .mobSec.darkSec .mobInfo ul{margin-bottom: 18px;}
    .mobSec.darkSec .mobInfo ul li{margin-bottom: 18px;}
    .mobSec.darkSec .borBtn { font-size: 16px; margin: 0 0px 0 0; line-height: 30px; padding: 11px 15px; flex-grow: 1; text-align: center; max-width: 300px; }

    .slider-area .sliderNavContainer{margin-bottom: 15px;}
    .slider-area .sliderNavContainer .sliderScrollDv{overflow: auto; }
    .slider-area .sliderNavContainer .slideArrow.arrowLeft, .slider-area .sliderNavContainer.hide-rightArrow .slideArrow.arrowRight, .slider-area .sliderNavContainer.hide-rightArrow::after, .slider-area .sliderNavContainer::before, .slider-area .sliderNavContainer::after, .slider-area .sliderNavContainer::before, .slider-area .sliderNavContainer .slideArrow.arrowRight { display: none !important;}


    footer { padding-top: 100px; }

    
    /* Safari Only */
    @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
        .sectionInfo ul li i.hgi-discount-tag-02{right:20px;}
    }
}
@media (max-width: 512px) {
    h5 span { margin: 0 0 15px 0; }

    .slider-area ul.slider-nav{margin-bottom: 16px;}
    .slider-area ul.slider-nav li { border-radius: 16px; height: 90px;  min-width: none;}
    .slider-area ul.slider-nav li p { font-size: 14px; line-height: 25px; min-width: 117px; }
    .slider-area ul.slider-nav li i { font-size: 25px; ;}
    .slider-area .slider-nav.slick-initialized.slick-slider:before { opacity: 0; }
    .defaultBtn, .borBtn { white-space: nowrap;  }

    .counterSec ul li { font-size: 28px; line-height: 32px; padding-top: 5px; }

    .bodyHeading{padding: 17px 0px 0px;}
    .bodyHeading h2 { padding-bottom: 26px; }

    .createStoreSec{padding: 35px 0;}
    .createStoreSec .imageArea{margin: 0 -5px;padding-bottom: 0px;}
    .sectionInfo{padding-top: 13px;}
    .sectionInfo h3{padding-bottom: 2px;}
    .sectionInfo p{margin-bottom: 33px;}
    .sectionInfo ul li{margin-bottom: 25px;}

    .createStoreSec.sec01{padding:25px 0;}

    .createStoreSec.sec02{padding: 12px 0;}
    .createStoreSec.sec02 .sectionInfo{padding-top: 22px;}

    .createStoreSec.sec03 .sectionInfo{padding-top: 26px;}

    .createStoreSec.sec04 .sectionInfo{padding-top: 44px;}

    .createStoreSec.sec05{padding: 28px 0;}

    .createStoreSec.sec06 .sectionInfo{padding-top: 41px;}

    .ctaSec { padding: 6px 0px 0px; }
    .ctaSec .ctaBg{padding:33px 21px 36px 24px;}
    .ctaSec .ctaBg ul li h3{padding-bottom: 8px;}
    .ctaSec .ctaBg ul li p{font-size: 21px; padding-bottom: 41px; line-height: 33px;}
    .ctaSec .ctaBg .defaultBtn{font-size: 22px; padding: 11px 22px;}

    .mobSec .mobImg { margin: -9px 2px -2px; }
    .mobInfo ul{margin: 0 0 8px;}
    .mobInfo ul li{padding-right: 33px; margin: 0 0 25px 0;}

    .leftBox{margin-top: 15px;}
    .leftBox.rightBox .imageArea{margin-bottom: 21px;}
    .leftBox.rightBox{margin-top: 15px; padding: 14px 16px 62px;}

    .twoBoxes { margin-bottom: 15px; }

}
@media (max-width: 340px) {
    .counterSec ul li { font-size: 20px; }
}