@charset "utf-8";
/* CSS Document */
@media all{

  :root {
    --color-off-white:#faf9f8;
    --color-black:#000;
    --color-concrete:#a9a7a3;
    --color-gravel:#d9d9ce;
    --color-cement:#c7c6bb;
    --color-onx-blue:#0e0885;
    --color-stone:#ebebe3;
    --color-error:#b51a1a;
    --color-modal-backdrop:
    rgba(0,0,0,.8);
    --font-primary:
    "OnxDiatype",sans-serif;
    --size-header-one:8rem;
    --size-header-two:6rem;
    --size-header-three:4rem;
    --size-header-four:2.5rem;
    --size-header-five:2.5rem;
    --size-header-six:2.5rem;
    --size-button:1.5rem;
    --size-body:1.7rem;
    --size-body-small:1.5rem;
    --size-caption:1.5rem;
    --size-navigation:1.5rem;
    --size-header-sup:4rem;
    --lh-header-one:1;
    --lh-header-two:1.05;
    --lh-header-three:1.075;
    --lh-header-four:1.12;
    --lh-header-five:1.12;
    --lh-header-six:1.18;
    --lh-button:1.2;
    --lh-body:1.29;
    --lh-body-small:1.33;
    --lh-caption:1.2;
    --lh-navigation:1.2;
    --transition-color-time:0.2s;
    --transition-opacity-time:0.2s;
    --transition-transform-time:0.5s;
    --gap-sub-title:1.2rem;
    --gap-tab-header:3rem;
    --gap-margins:5rem;
    --gap-gutter:1rem;
    --gap-title-description:2rem;
    --gap-section-small:2.5rem;
    --gap-section-title:5rem;
    --gap-section-start:10rem;
    --gap-section-large:12.5rem;
    --gap-section-xl:15rem;
    --gap-section-xxl:20rem;
    --gap-page-start:20rem;
    --gap-text-body:4rem;
    --gap-section-mobile:5rem;
    --grid-col-count:6;
    --grid-col-width:
    calc((100vw - (var(--gap-margins) * 2 + var(--gap-gutter) * (var(--grid-col-count) - 1))) / var(--grid-col-count));
    --input-border-radius:
    var(--image-border-radius);
    --input-padding:2.5rem 3rem;
    --image-border-radius:1rem;
    --opacity-disabled:0.5;
    --nav-height:9rem;
    --cover-height-mobile:
    calc(100vw - var(--gap-margins) * 2);
    --ease-out-quart:
    cubic-bezier(0.76,0,0.24,1);
    --nav-z-index:100;
    --modal-z-index:101;
    --select-z-index:102;

    --bigger-gap: var(--gap-text-body);
    --reg-gap:1rem;
    --li-gap:0.3rem;
    --form-btn-color: var(--color-concrete);
    --form-btn-bg: var(--color-gravel);
}


@font-face{
  font-family:OnxDiatype;
  src:url(../fonts/OnxDiatype-Light.woff) format("woff");
  font-weight:300;
  font-style:normal;
  font-display: swap;
}
@font-face{
  font-family:OnxDiatype;
  src:url(../fonts/OnxDiatype-Regular.woff) format("woff");
  font-weight:400;
  font-style:normal;
  font-display: swap;
}
@font-face{
  font-family:OnxDiatype;
  src:url(../fonts/OnxDiatype-Bold.woff2) format("woff2");
  font-weight:700;
  font-style:normal;
  font-display: swap;
}

figure,h1,h2,h3,h4,p{padding:0;margin:0}h4,ol,ul,ul ul{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:0}:focus,body a,body a:active,input[type=text]:focus,textarea:focus{outline:0}article,aside,dialog,figure,footer,header,hgroup,nav,ol,p,section{display:block}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,command,datalist,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,source,span,strike,strong,sub,sup{outline:0;vertical-align:baseline}figure,p{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}ol{list-style-type:decimal}a img,img{vertical-align:middle}a img{border:0}body a:focus{-mos-outline-style:none;outline:0}body:-moz-any-link:focus{outline:0}::-moz-selection{background:#000;color:#fff}::selection{background:#000;color:#fff}

html {-webkit-text-size-adjust:none;}
div{vertical-align:top;}
img{max-width:100%; height:auto;}
a{cursor:pointer; text-decoration:none;  transition:all 0.5s ease;}
a:hover, a:focus{text-decoration:none;}
html {-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
html {position:relative; min-height:100%;}
aside, .right-side, .navbar-collapse{-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease;}
button:focus {outline:0px dotted; outline:0px auto -webkit-focus-ring-color;}
.btn.focus, .btn:focus {outline:0; box-shadow:0 0 0 0rem rgb(0 123 255 / 25%);}

/*Typekit*/
.container{max-width:1170px;}
html, body{font-family:var(--font-primary); padding:0px;margin:0px; background:var(--color-off-white); font-size:var(--size-body); line-height:var(--lh-body); font-weight:300;}
p{margin-bottom:25px}

html {font-size: 62.5%;}

select, input{font-family:var(--font-primary);}
div p:last-child{margin-bottom:0px;}
.form-control:focus{box-shadow:0 0 0 0rem rgba(0,123,255,.25);}
.row:before, .row:after {display:none !important;}

h1, h2, h3, h4, h5, h6{font-family:var(--font-primary); margin-bottom:0px;}
h1{font-size:var(--size-header-one); font-weight:700;}
h2{font-size:var(--size-header-two); font-weight:700; line-height:var(--lh-header-two);}
h3{font-size:var(--size-header-three); font-weight:400; line-height:var(--lh-header-three);}
h4{font-size:var(--size-header-four); font-weight:700; line-height:var(--lh-header-four); text-transform:uppercase;}
h5{font-size:var(--size-header-five);}
h6{font-size:var(--size-header-six); font-weight: 300; line-height: var(--lh-header-six);}


/*Typekit END*/

/* Button Animation  Start*/
.reveal-circle {position:relative; overflow:hidden; -webkit-mask-image:-webkit-radial-gradient(white, black);}
.reveal-circle:hover {color:var(--circle-btn-text); background-color:var(--circle-btn-bg); transition:background-color 0.0s linear var(--circle-btn-speed);}
.reveal-circle::after {pointer-events:none; background-color:var(--circle-btn-bg); transform:translateY(5em); content:""; z-index:-1; position:absolute; width:100%; padding-top:100%;left:0%;top:0%;right:0%; bottom:auto;border-radius:50%; transition:border-radius var(--circle-btn-half-speed) var(--circle-ease-in) 0.0s, transform var(--circle-btn-speed) var(--circle-ease-in);}
.reveal-circle:hover::after {border-radius:0%; transform:translateY(0em); transition:border-radius var(--circle-btn-half-speed) var(--circle-ease-out) var(--circle-btn-half-speed), transform var(--circle-btn-speed) var(--circle-ease-out);}
/* Button Animation End*/

.form-header p,
.clnt-description{letter-spacing:.01em;}


/* Header */
.brnad-logo svg{width: 130px; height: 40.5px;}
.brnad-logo path {fill: #ffffff;}
.navbar-light .navbar-nav{column-gap: 3.5rem;}
.navbar-light .navbar-nav .nav-link{font-size: var(--size-navigation); line-height: var(--lh-navigation); padding: 15px 0px; font-weight: 300;letter-spacing: .01em; color: var(--nav-color); transition: color var(--transition-color-time);}
.navbar-light .navbar-nav .nav-link:hover{opacity: 0.7; color: var(--nav-color);}


.navbar-collapse{column-gap: 3.5rem;}

.book-toor{font-weight: 400; line-height: 1; text-align: center; padding: 1.5rem 2rem; border-radius: 10rem; min-width: 21rem; font-family: var(--font-primary); font-size: var(--size-button); background-color: var(--color-onx-blue);
color: var(--color-off-white)!important; transition: opacity var(--transition-opacity-time); display: block; text-transform: uppercase;}

.header{position: fixed; width: 100%; z-index: var(--nav-z-index);}
.navbar{height: var(--nav-height); width: 100%; top: 0; left: 0; padding: 3rem var(--gap-margins) 1rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--nav-bar-color);
transition: background-color var(--transition-color-time),opacity var(--transition-opacity-time),transform var(--transition-transform-time); color: var(--color-off-white); background-color: transparent;}
.fixed-header {position: fixed; top: 0; left: 0; z-index: var(--nav-z-index); width: 100%;  color: var(--color-black); background-color: var(--color-off-white); transform: translateY(-2rem);}
.fixed-header .brnad-logo path {fill:var(--color-black);}

.navbar .nav-item .dropdown-menu{padding: 0px; border-radius: 0px; background: transparent; border: 0;}
.navbar .nav-item .dropdown-menu li{font-weight: 700; font-size: var(--size-navigation); line-height: var(--lh-navigation); text-transform: capitalize; letter-spacing: .01em; color:var(--color-off-white); transition: color var(--transition-color-time)}
.navbar .nav-item .dropdown-menu li a.dropdown-item{font-weight:400; color:var(--color-off-white); padding: 0px; transition: color var(--transition-color-time),opacity var(--transition-opacity-time);}
.navbar .nav-item .dropdown-menu li a.dropdown-item:hover{background: transparent; opacity: 0.7;}

.fixed-header.navbar .nav-item .dropdown-menu{transition: background-color var(--transition-color-time); padding: 1rem 2rem 2rem 2rem; border-radius: var(--image-border-radius); background-color: var(--color-off-white);
width: 205px; margin-left: -25px;}
.fixed-header.navbar .nav-item .dropdown-menu li,
.fixed-header.navbar .nav-item .dropdown-menu li a.dropdown-item{color: var(--color-black);}

/* Header Finish */


.hero-banner{height:100vh; padding:2rem;}
.hero-caption{border-radius:var(--image-border-radius); }
.hero-caption:before{content:''; position:absolute; top:0; left:0; height:100%; width:100%; z-index:3; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.4) 10%,transparent,rgba(0,0,0,.4) 90%);}
.hero-banner video{object-fit:cover;}
.hero-caption-cnt{z-index:4;bottom:0;left:0;width:100%; padding:1rem calc(var(--gap-margins) - 2rem); color:var(--color-stone);text-transform:uppercase; letter-spacing:-.005em;}
.hero-caption-cnt-inner{row-gap: var(--gap-gutter);}
.hero-caption-cnt h1{line-height:1;}
.hero-caption-cnt h3{font-weight:700; font-size:var(--size-body); line-height: var(--lh-body); letter-spacing: .01em;}
.hero-caption-cnt h3 a{color:#ffffff;}


.comunity-form{display:grid; grid-row-gap:var(--gap-section-mobile); row-gap:var(--gap-section-mobile); grid-auto-columns:100vw; margin-top:var(--gap-section-mobile);}

.wrap{padding:0 var(--gap-margins);}

.form-main{padding:4rem; background-color:var(--color-stone); column-gap:6rem; border-radius:var(--image-border-radius);     letter-spacing:-.005em;}
.form-left{flex-grow:0; flex-shrink:0; width:calc(var(--grid-col-width)*3 + var(--gap-gutter)*2); display:flex; flex-direction:column; align-items:flex-start; row-gap:8rem;}
.form-header{align-items:flex-start; row-gap:var(--gap-title-description);}
.form-right{border-radius:var(--image-border-radius);}

.collection-header{padding:0 var(--gap-margins) var(--gap-section-small); display:grid; grid-column-gap:var(--gap-gutter); column-gap:var(--gap-gutter);}


.ch-right{grid-column:3/span 2; display:flex; align-items:center; justify-content:flex-end; column-gap:2rem;}
.cltn-link{font-weight:700; /* font-size:var(--size-header-four); line-height:var(--lh-header-four); text-transform:uppercase; */ color:var(--color-black);}

.collection-grid{width:100vw; display:grid; grid-template-columns:repeat(var(--grid-col-count),1fr); grid-column-gap:var(--gap-gutter); column-gap:var(--gap-gutter); padding:0 var(--gap-margins); --slide-section-gap:6rem;}

.collection-slider{grid-row:1; grid-column:span 4; width:100%;}
.collection-slide .slick-slide{border-radius:var(--image-border-radius); overflow:hidden;}

.collection-info{grid-row:1; grid-column:span 2; width:100%; padding-left:3rem;} 
.collection-info .sub-title{color:var(--color-concrete); padding-bottom:1rem;}
.collection-info h3{margin-bottom:1.3rem;}
.collection-info ul{list-style:none; padding:0px; margin:0px;}
.collection-info ul li{padding:0.2em 0; border-bottom:1px solid var(--color-black); font-size:var(--size-body); line-height:var(--lh-body); font-weight:300; letter-spacing:.01em;}

.clnt-description{margin-top:2rem; margin-bottom:var(--slide-section-gap);}

.collection-slide{margin-bottom:var(--gap-gutter);}
.collection-nav .slick-track{margin-left:0px; margin-right:0px;}
.collection-nav .slick-track .slick-slide{border:2px solid transparent; margin-right:var(--gap-gutter); transition:border-color var(--transition-color-time),opacity var(--transition-color-time);
  opacity:.7; border-radius:var(--image-border-radius); overflow:hidden; cursor:grab;}
.collection-nav .slick-track .slick-slide:hover{border:2px solid var(--color-onx-blue); }
.collection-nav .slick-track .slick-slide.slick-current{opacity:1;}

.clctn-links{align-items: center;}
.clctn-links a{font-family:var(--font-primary); font-size:var(--size-button); font-weight:700; line-height:1; color:var(--color-onx-blue); background-color:transparent;border:none;} 
.clctn-links .download-brochure{color:var(--color-concrete);}

.intro .slick-lightbox-slick-item{padding:2rem;}
.intro .slick-lightbox-slick-item-inner {display:inline-block; vertical-align:middle; max-width:100%; max-height: 100%!important; height:100%!important; width:100%; background-color:var(--color-stone); padding:2rem;
border-radius:var(--image-border-radius); position:relative;}
.intro .slick-lightbox-slick-caption {position:absolute; top:0; left:0; padding:2rem; color:var(--color-concrete); text-transform:uppercase; font-weight:700; font-size:var(--size-navigation); line-height:var(--lh-navigation); letter-spacing:.01em; text-align:left;}
.intro .slick-lightbox-slick-caption span{color:#000000; display:block;}


.dh-header{padding:0 var(--gap-margins) var(--gap-section-small);}
.dh-header a{font-family:var(--font-primary); font-size:var(--size-button); font-weight:700; line-height:1; color:var(--color-onx-blue);}

.dh-slider{overflow:hidden; padding-left:var(--carousel-indent); --carousel-indent:var(--gap-margins);}
.dh-slider .slick-slider {margin:0 0.5rem;}
.dh-slider .slick-slide {margin-right:0.5rem; margin-left:0.5rem; cursor:grab;}

.dh-video{padding-top:121%; border-radius:var(--image-border-radius); pointer-events:none; transform:translateZ(0);}
.dh-video:before{content:''; position:absolute; top:0; left:0; height:100%; width:100%; z-index:5; background:linear-gradient(0deg,rgba(0,0,0,.8) 20%,transparent 60%); opacity:.5; transition:opacity var(--transition-opacity-time);
  pointer-events:none; transform:translateZ(0);}

.dh-video-card{z-index:1; pointer-events:all;}
.dh-video-card video,
.dh-video-card img{object-fit:cover;}
.dh-caption{padding:2rem; color:var(--color-off-white); z-index:6; user-select:none; transform:translateZ(0);}
.dh-caption h3{font-size:var(--size-header-four);}
.dh-caption p{height:79px;}
.dh-caption h6{font-size:1.4rem; font-weight: 400; display: flex;}
.dh-caption h6 svg{margin-right:8px;}

#features .modal-header{grid-column:1/-1;}
#features .modal-header h5{font-weight:700; text-transform:uppercase; font-size:var(--size-navigation); line-height:var(--lh-navigation); letter-spacing:.01em; color:var(--color-concrete);}
#features .modal-header h5 span{display:block; color:var(--color-black);}
#features .modal-content{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; display:grid; grid-template-columns:repeat(4,1fr); grid-column-gap:var(--gap-gutter); column-gap:var(--gap-gutter);
grid-row-gap:3rem; row-gap:3rem; width:calc(var(--grid-col-width)*4 + var(--gap-gutter)*3); background-color:var(--color-off-white); border-radius:var(--image-border-radius); padding:2rem; color:var(--color-black);
max-height:50rem; overflow-y:auto; pointer-events:all;}

.feature-list {column-count:4; grid-column:1/-1; column-gap:calc(var(--gap-gutter)*2);}
.feature-list ul{list-style:none; padding:0px; margin:0px; font-family:var(--font-primary); font-style:normal; letter-spacing:-.015em; font-size:var(--size-body); line-height:var(--lh-body);font-weight:300;
margin-left:0; margin-bottom:var(--reg-gap);}
.feature-list ul li{display:block;padding-left:1em;font-weight:300;font-size:var(--size-body-small);position:relative;margin-bottom:var(--li-gap);}
.feature-list ul li:before {display:inline-block;content:"";width:4px;height:4px;background-color:currentColor;border-radius:50%;margin-left:0;position:absolute;top:9px;left:0;}

#features .btn-close{position: relative; background: transparent;}
#features .btn-close:focus{box-shadow:0 0 0 0rem rgb(13 110 253 / 25%);}
#features .btn-close:before{transform: translate(-50%,-50%) rotate(45deg);}
#features .btn-close:after {transform: translate(-50%,-50%) rotate(-45deg);}
#features .btn-close:after, #features .btn-close:before {position: absolute; content: ""; top: 50%; left: 50%; width: 100%; height: 2px; background-color: currentColor;}

/* Footer */

.body-small {
  font-size: var(--size-body-small);
  line-height: var(--lh-body-small);
  font-weight: 300;
}

footer{background-color: var(--color-cement); padding: var(--gap-margins); color: var(--color-off-white);}
.f-header{display: grid; grid-template-columns: repeat(var(--grid-col-count),1fr); grid-column-gap: var(--gap-gutter); column-gap: var(--gap-gutter); padding-bottom: 9rem;}
.fh-left{grid-row: 1; grid-column: 1/span 3;}
.fh-left h3{font-weight: 400; font-size: var(--size-header-three); line-height: var(--lh-header-three); letter-spacing: -.005em; max-width: 51rem;}
.fh-left h3 a:hover {color: var(--color-onx-blue)!important;}
.fh-right{grid-row: 1; grid-column: span 3; color: var(--color-black);}

.fh-right .input-field{
  border-radius: 10rem!important;
    overflow: hidden;
    padding-right: 5rem!important;
}
.f-search{
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 2rem;
  border: none;
  background-color: var(--color-cement);
  width: 87px;
  height: 100%;
  -webkit-mask: url(../images/right-skinny-arrow.svg) no-repeat center;
  mask: url(../images/right-skinny-arrow.svg) no-repeat center;
  -webkit-mask-size:36px;
  mask-size:36px;
  text-indent: -9999px;
}


.f-nav{display: grid; grid-template-columns: repeat(var(--grid-col-count),1fr); grid-column-gap: var(--gap-gutter); column-gap: var(--gap-gutter); padding-bottom: 9rem;}
.f-nav nav div{grid-column: span 1; display: flex; flex-direction: column; align-items: flex-start;}
.f-nav p{font-weight: 700; letter-spacing: .01em; text-transform: uppercase; margin: 0px;}
.f-nav a{letter-spacing: .01em; font-weight: 300; color: var(--color-off-white); text-decoration: underline; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; transition: color var(--transition-color-time),opacity var(--transition-opacity-time);}
.f-nav a:hover{opacity: .7;}

.f-devider {background-color: var(--color-off-white); height: 1px; width: 100%; margin-bottom: 3rem;}
.f-logo svg{height:47px; width: 156px;}
.f-logo path {fill:#ffffff;}

button:focus:not(:focus-visible) {box-shadow: none;}

.construction-info{background-color: var(--color-stone); color: var(--color-black); position: relative; width: 100%; padding-top: var(--gap-section-title);     margin-top: var(--gap-section-large);}
.construction-info h4{padding: 0 var(--gap-margins); margin-bottom: var(--gap-section-title);}
.scroll-slide {position: -webkit-sticky; position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: repeat(var(--grid-col-count),1fr); grid-column-gap: var(--gap-gutter); column-gap: var(--gap-gutter);
padding: var(--gap-margins); align-items: center; overflow: hidden; background-color: var(--color-stone); color: var(--color-black);}

.fixed-header.before-animate{opacity: 0;}

.scroll-slide:nth-child(odd) .scroll-slide-left{grid-column: 4/span 3; padding-left: var(--gap-text-body); padding-right: unset;}
.scroll-slide-left{display: flex; flex-direction: column; grid-column: span 3; grid-row: 1; height: calc(100vh - var(--gap-margins)*2); padding-right: var(--gap-text-body);}
.scroll-slide-left h3{font-weight: 700; font-size: var(--size-header-two); line-height: var(--lh-header-two); letter-spacing: -.005em;}
.scroll-slide-left h3 sup{line-height: .1; font-size: var(--size-header-sup);}
.scroll-slide-left h6{margin-top: 1rem; width: 89%; margin-bottom: auto; font-weight: 300; font-size: var(--size-header-six); line-height: var(--lh-header-six); letter-spacing: -.005em;}
.scroll-slide-left-footer{color: var(--color-concrete); border-top: 1px solid; margin-top: 2rem; width: 100%; padding-top: var(--gap-gutter); display: flex; align-items: flex-start; justify-content: space-between;}
.scroll-slide-left-footer p{width: calc(var(--grid-col-width)*2 + var(--gap-gutter)); padding-right: 2rem; flex-shrink: 0; line-height: var(--lh-caption); font-weight: 300; letter-spacing: .01em; margin-bottom: 0px;}
.scroll-slide-left-footer h3{text-align: right; font-weight: 400; font-size: var(--size-header-three); line-height: var(--lh-header-three); letter-spacing: -.005em;}
.scroll-slide-right{grid-column: span 3; grid-row: 1; width: 100%;}

.ss-right-vf{position: absolute; width: 100%; padding-top: 100%; border-radius: var(--image-border-radius); overflow: hidden; top: 50%; transform: translateY(-50%) translateZ(0);}
.ss-right-vf video{position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover;}


.lp-form form{display: grid; grid-gap: var(--gap-gutter); gap: var(--gap-gutter); grid-template-columns: repeat(2,1fr);}
.form-group{grid-column: span 1;}
.form-group.full-width{grid-column: 1/-1;}
.input-field{
  color: inherit;
  width: 100%;
  padding: var(--input-padding);
  border: 1px solid transparent;
  background-color: var(--color-off-white);
  transition: border-color var(--transition-color-time);
  border-radius: var(--input-border-radius);
  font-family: var(--font-primary);
  font-style: normal;
  letter-spacing: -.015em;
  font-size: var(--size-navigation);
  line-height: var(--lh-navigation);
  font-weight: 700;
  transition: opacity var(--transition-opacity-time);
}
.input-field:hover{outline: none; border: 1px solid var(--color-onx-blue);}
.input-field::placeholder{color:var(--color-cement);text-transform:uppercase}

.btn-form{line-height: 1; text-align: center; padding: 1.5rem 2rem; border-radius: 10rem; min-width: 21rem; font-family: var(--font-primary); font-size: var(--size-button); color: var(--color-off-white);
background-color: var(--color-onx-blue); font-weight: 400; border: none; text-transform: uppercase;}

.cust-check {display: block; position: relative; padding-left: 4.5rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: var(--size-body); line-height: var(--lh-body);
font-weight: 300; color: currentColor; letter-spacing: .01em;}
.cust-check a{color: currentColor; text-decoration: underline;}
.cust-check input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark {position: absolute; top: 0; left: 0; height: 1.5rem; width: 1.5rem; border: 1px solid; border-radius: 50%; transform: translateY(0.2em);}
.checkmark:after {content: ""; position: absolute; display: none;}
.cust-check input:checked ~ .checkmark:after,
.cust-check input:checked ~ .checkmark:before {display: block; position: absolute; width: 75%; height: 1px; background-color: currentColor; content: ""; top: 50%; left: 50%;}
.cust-check .checkmark:after {transform: translate(-50%,-50%) rotate(45deg);}
.cust-check .checkmark:before{transform: translate(-50%,-50%) rotate(-45deg);}

.DBModal .modal-dialog{max-width:unset;}
.DBModal .modal-content{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-column-gap: var(--gap-gutter);
  column-gap: var(--gap-gutter);
  grid-row-gap: 3rem;
  row-gap: 3rem;
  width: calc(var(--grid-col-width)*4 + var(--gap-gutter)*3);
  background-color: var(--color-cement);
  border-radius: var(--image-border-radius);
  padding: 2rem;
  z-index: 2;
  color: var(--color-off-white);
  margin: 0 auto;
  border: 0px;
}

.DBModal .modal-content h3{grid-column: span 3;}
.DBModal .lp-form{grid-column: 1/-1; color: var(--color-black);}
.modal-backdrop.show {opacity: 1; background-color: var(--color-modal-backdrop);}
/*.DBModal .btn-form {color: var(--form-btn-color,var(--color-concrete)); background-color: var(--form-btn-bg,var(--color-stone));} */

.DBModal .btn-close{position: relative; background: transparent; color: var(--color-off-white); position: absolute; top: 2rem; right: 2rem; z-index: 3; opacity: 1; width: 2.8rem; height: 2.8rem; padding: 0px;}
.DBModal .btn-close:focus{box-shadow:0 0 0 0rem rgb(13 110 253 / 25%);}
.DBModal .btn-close:before{transform: translate(-50%,-50%) rotate(45deg);}
.DBModal .btn-close:after {transform: translate(-50%,-50%) rotate(-45deg);}
.DBModal .btn-close:after,.DBModal .btn-close:before {position: absolute; content: ""; top: 50%; left: 50%; width: 100%; height: 2px; background-color: currentColor;}

ul.parsley-errors-list{display: none;}
.parsley-error,
select.parsley-error ~ .btn-light,
.cust-check.parsley-error .checkmark{border: 1px solid var(--color-error);}
.cust-check.parsley-error, .la-tnc.parsley-error{border: 0px;}
.la-tnc.parsley-error .form-check-input{border: 1px solid var(--color-error);}

/* Zoho form start */
.zf-subContWrap a{color: var(--color-onx-blue); font-weight: 500;}
.zf-subContWrap ul{display: grid; grid-gap: var(--gap-gutter); gap: var(--gap-gutter); grid-template-columns: repeat(2,1fr); list-style: none; padding: 0px; margin: 0px;}
.zf-subContWrap ul .zf-tempFrmWrapper{grid-column: span 1;}
.zf-subContWrap ul .zf-tempFrmWrapper.full-width{grid-column: 1/-1;}
.zf-subContWrap ul .zf-tempFrmWrapper .input-field{
  color: inherit;
  width: 100%;
  padding: var(--input-padding);
  border: 1px solid transparent;
  background-color: var(--color-off-white);
  transition: border-color var(--transition-color-time);
  border-radius: var(--input-border-radius);
  font-family: var(--font-primary);
  font-style: normal;
  letter-spacing: -.015em;
  font-size: var(--size-navigation);
  line-height: var(--lh-navigation);
  font-weight: 700;
  transition: opacity var(--transition-opacity-time);
}

.zf-subContWrap ul .zf-tempFrmWrapper .input-field:hover{outline: none; border: 1px solid var(--color-onx-blue);}
.zf-subContWrap ul .zf-tempFrmWrapper .input-field::placeholder{color:var(--color-cement);text-transform:uppercase}

.zf-subContWrap ul .zf-tempFrmWrapper .validate-msg ~ span .input-field,
.zf-subContWrap ul .zf-tempFrmWrapper .validate-msg ~ .bootstrap-select .btn,
.zf-subContWrap ul .zf-tempFrmWrapper .validate-msg ~ .zf-termsAccept input,
.zf-subContWrap ul .zf-tempFrmWrapper .validate-msg ~ .combine-form-fields span input,
.zf-subContWrap ul .zf-tempFrmWrapper .validate-msg ~ .phone-code-fields span input{border: 1px solid var(--color-error);}

.zf-subContWrap ul .zf-tempFrmWrapper .zf-errorMessage{display: none!important;}

.zf-termsAccept{display: flex;}
.zf-termsAccept .zf-flLeft{width:2.2rem; height:2.2rem; min-width:2.2rem; border: solid 1px #A9A7A3; border-radius: 50%; background: transparent;}
.zf-termsAccept .form-check-input:checked[type=checkbox] {background-color: var(--color-onx-blue); border-color: var(--color-onx-blue);}
.form-check-input:focus {box-shadow: 0 0 0 0rem rgb(13 110 253 / 25%);}

.zf-termsAccept .zf-descFld{display: block; position: relative; padding-left:1rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: var(--size-body);
line-height: var(--lh-body); font-weight: 300; color: currentColor; letter-spacing: .01em;}
.zf-termsAccept .zf-descFld a {color: currentColor; text-decoration: underline;}

.combine-fields{gap: var(--gap-gutter);grid-gap: var(--gap-gutter);}
.combine-form-fields{
  grid-column: span 1;
  grid-gap: var(--gap-gutter); gap: var(--gap-gutter); grid-template-columns: repeat(2,1fr);
}

.phone-code-fields{
  grid-column: span 1;
  grid-gap: var(--gap-gutter); gap: var(--gap-gutter); grid-template-columns: 30% 1fr;
}

.phone-code-fields .bootstrap-select > .dropdown-toggle:after{background-size: contain;}
.phone-code-fields .input-field{border-radius:0rem 1rem 1rem 0rem; padding-left:1.4rem; padding-right:1.4rem;}
.phone-code-fields .bs-searchbox .form-control {padding: 0.5rem 0.5rem; font-size: 1.4rem; font-weight: 600;}
.phone-code-fields .bootstrap-select .dropdown-menu li a{padding: 1rem 1.4rem; font-size: 1.2rem; font-weight: 400;}




/* Zoho form END */
.zf-errorMessage {
  font: 12px Arial, Helvetica, sans-serif;
  color: #ff0000;
  padding-top: 5px;
}

.slick-lightbox.intro2 .slick-lightbox-slick{height: 100%; padding: 2rem;}
.slick-lightbox.intro2 .slick-list,
.slick-lightbox.intro2 .slick-track{height: 100%;}

.np-btn-group{position: absolute;list-style: none;padding: 0px;margin: 0px;top:20px;right:35%;}

.prev-btn{height: 2.8rem; width: 2.8rem; transform: rotate(90deg); z-index: 9; right: 2rem; position: relative;}
.prev-btn:before{content: ''; height: 100%; width: 100%; display: block; background-color: currentColor; -webkit-mask: url('../images/down-arrow.svg') no-repeat center; mask: url('../images/down-arrow.svg') no-repeat center; -webkit-mask-size: cover; mask-size: cover; opacity: 1; cursor: pointer;}

.next-btn{height: 2.8rem; width: 2.8rem; transform: rotate(-90deg); z-index: 9;}
.next-btn:before{content: ''; height: 100%; width: 100%; display: block; background-color: currentColor; -webkit-mask: url('../images/down-arrow.svg') no-repeat center; mask: url('../images/down-arrow.svg') no-repeat center; -webkit-mask-size: cover; mask-size: cover; opacity: 1; cursor: pointer;}

.slick-lightbox.intro2 .slick-lightbox-slick{height: 100%; padding: 2rem;}
.slick-lightbox.intro2 .slick-list,
.slick-lightbox.intro2 .slick-track{height: 100%;}

.event-info{padding:0px;margin: 0px;list-style: none;display: flex;flex-direction: column;row-gap: 0.5rem;}
.event-info li{position: relative;padding-left: 20px; color: var(--color-onx-blue); font-weight: 700; font-size: 2rem;}
.event-info li::before{content: '';background: url('../images/right-arrow.svg') no-repeat left top;position: absolute;top: 8px;left: 0px;width: 1rem;height: 1rem;background-size: contain;}

.event-time{row-gap: 1rem;}
.et-col{display: flex; align-items: center; width: 100%; font-size: 1.4rem; font-weight: 500;}
.et-col a{color: var(--bs-body-color);}
.et-col a:hover{color: var(--color-onx-blue);}
.et-col figure{background:var(--color-onx-blue); border-radius:50%; padding:10px; min-width: 30px; min-height:30px; margin-right: 15px; display:flex;}
.et-col img{width:15px; filter: invert(92%) sepia(100%) saturate(30%) hue-rotate(65deg) brightness(105%) contrast(110%);}

.webinar-who{
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(var(--grid-col-count));
  grid-column-gap: var(--gap-gutter);
  column-gap: var(--gap-gutter);
  padding: 0 var(--gap-margins);
  --slide-section-gap: 6rem;
  row-gap: var(--gap-sub-title);
}

.webinar-who-info{display: flex; /* justify-content:center; */ width: 100%;}
.webinar-who-info ul{list-style: none; padding: 0px; margin:0px 0rem;}
.webinar-who-info ul li{margin-top: 10px;position: relative;padding-left: 35px;}
.webinar-who-info ul li:before{content: '';position: absolute;left: 0px;top: 2px;background: url('../images/check-sign.jpg') no-repeat left top;width: 20px;height: 20px;background-size: contain;}

.ne-image-col-inner{border-radius: 1rem; padding-top:70%;}
.ne-image-col-inner figure img{object-fit: cover;}

.why-join{padding: 0 var(--gap-margins);  width: 100%;}
.why-join .dh-header{row-gap: var(--gap-sub-title);}
.why-join-row{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-column-gap: var(--gap-gutter);
  column-gap: var(--gap-gutter);
  padding-bottom: var(--gap-section-small);}
.wj-col{
  width: 100%;
  background-color: var(--color-stone);
  padding: 2rem;
  border-radius: 10px;
}
.wj-col figure{
  text-align: center;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wj-col figure img{
  max-width: 150px;
}
.wj-col h3{
  font-weight: 400;
  font-size: var(--size-header-three);
  line-height: var(--lh-header-three);
  margin-bottom: 1rem;
  font-family: var(--font-primary);
  font-style: normal;
  letter-spacing: -.005em;
  color: var(--color-concrete);
}
.wj-col p{
  font-size: var(--size-body);
  line-height: var(--lh-body);
  width: 85%;
  letter-spacing: .01em;
  font-weight: 300;
  color: var(--color-concrete);
}

.dh-slider .slick-track{margin-left:0px; margin-right: 0px;}
.webinar-faq{padding: 0 var(--gap-margins); width: 100%;}

.webinar-faq .accordion{
  position: relative;
  border-radius: var(--image-border-radius);
  color: var(--color-concrete);
  padding-right: 2rem;
}
.webinar-faq .accordion-button{
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: 300;
  letter-spacing: .01em;
  font-family: var(--font-primary);
  color: var(--color-concrete);
  font-style: normal;
  width: 100%;
  padding: 1rem 0;
  text-align: left;
  background: transparent!important;
  border-bottom:1px solid var(--color-concrete);
}
.accordion-item {
  background: transparent!important;
  border: 0px solid var(--color-concrete);
}
.accordion-body{
  width: 100%;
    padding: 1rem 0;
    color: var(--color-black);
}
.accordion-body.regular-markdown{
  display: block;
  --bigger-gap: var(--gap-text-body);
  --reg-gap: 1rem;
  --li-gap: 0.2rem;
}
.accordion-body.regular-markdown p{
  font-family: var(--font-primary);
  font-style: normal;
  letter-spacing: -.015em;
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-weight: 300;
}
.accordion-body.regular-markdown p:not(:last-child) {
  margin-bottom: var(--reg-gap);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  transform: scale(.7) !important;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
}


.gain-knowledge{
  width: 100%;
  display: grid;
  grid-row-gap: var(--gap-section-large);
  row-gap: var(--gap-section-large);
  grid-auto-columns: 100vw;
  padding-bottom: var(--gap-margins);
  overflow: hidden;
  width: calc(100% - var(--gap-margins));
}
.gk-inner{
  background-color: var(--color-onx-blue);
  height: 60vh;
  padding: var(--gap-section-start) var(--gap-margins) var(--gap-section-start);
  align-items: center;
  display: grid;
  grid-column-gap: var(--gap-gutter);
  column-gap: var(--gap-gutter);
  flex-direction: column;
}
.gain-knowledge h4{
  color: var(--color-off-white);
  grid-column: span 4;
  font-weight: 700;
  font-size: var(--size-header-two);
  line-height: var(--lh-header-two);
  letter-spacing: -.005em;
}
.gain-knowledge p{
  color: var(--color-off-white);
}
.gk-width{
  max-width: 75%;
  display: flex;
  row-gap: 1rem;
  flex-direction: column;
}
.gain-knowledge .btn-form{
  border: solid 1px #ffffff;
  max-width: 21rem;
}

.eql-house{max-height: 50px; margin-right: 10px;}
.f-social a{margin: 0px 8px;}
.f-social a img{max-width: 24px;}
.f-social a:hover img{filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(50%);}

.promotion-main{padding: 0 var(--gap-margins);}
.promotion-inner{background: var(--color-onx-blue); padding:4rem 4rem 6rem 4rem; border-radius: var(--image-border-radius); position: relative;}
.promotion-inner h4{color: var(--color-off-white); margin-bottom: 4rem;}

.np-outer{display: flex; row-gap: 2rem;column-gap: 15rem;}
.np-card {display: flex;flex-direction: column;row-gap: 1rem;position:relative; }
.np-card h3{color:#ffffff; font-weight:700; line-height: 1; padding-top: 0.1em; font-size: var(--size-header-two);}
.np-card p{color:#ffffff; font-weight:500; letter-spacing: .01em; font-size: var(--size-body); line-height: var(--lh-body); margin: 0px;} 
.np-outer .np-card:not(:last-child):before{content:'';position: absolute;width:1px;height:100%; background:#d9d9ce; right: -6rem;}

.promotion-tnc{color:#ffffff; font-size: 12px; position: absolute; right: 1.4rem; bottom: 1.4rem;}


}


@media only screen and (min-width: 119.99em){
  html {font-size: 75%;}
  .brnad-logo svg{width: 156px; height: 48.5px;}
}

@media (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {display:block; visibility: hidden; opacity: 0; position: absolute; left: 0; width: 100%; transform: translateY(-2em); z-index: -1; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;}  
  .navbar .nav-item:hover .dropdown-menu{visibility: visible; opacity: 1; z-index: 1; top:100%; transform: translateY(0); transition: .3s; transition-delay: 0s, 0s, 0.3s;}
  .navbar-light .dropdown-toggle::after{display:none;}
}

@media only screen and (max-width: 1100px) and (min-width: 1030px)  {
  h1 {font-size: var(--size-header-two);}
}

@media only screen and (max-width: 60em){
  :root {
    --size-header-one: 6.5rem;
    --size-header-two: 5.25rem;
    --size-header-three: 3.5rem;
    --size-header-four: 2.1rem;
    --size-header-five: 2.5rem;
    --size-header-six: 2.5rem;
    --size-button: 1.4rem;
    --size-body: 1.5rem;
    --size-body-small: 1.25rem;
    --size-caption: 1.4rem;
    --size-header-sup: 2.6rem;
  }


  .hero-caption-cnt{flex-direction: column; align-items: flex-start!important;}
  .form-main {flex-direction: column; column-gap: unset; row-gap: var(--gap-margins);}
  .form-left {width: 100%; row-gap: 6rem;}
  .ch-right {grid-column: 5 / span 2;}
  .collection-grid {row-gap: var(--gap-section-small); --slide-section-gap: 2.5rem;}
  .collection-slider {grid-column: 1 / -1;}
  .collection-info {grid-area: 2 / 1 / auto / -1; padding-left: unset;}

  .intro .slick-lightbox-slick-item-inner{height: 100vh; padding: 2rem; display:flex; align-items: center; justify-content: center;}
  .intro .slick-lightbox-slick-item {padding: 2rem; height: 100vh!important;display:flex;}

  #features .modal-content{max-height: unset; width: calc(100% - 4rem); height: calc(100% - 4rem); grid-auto-rows: max-content; padding: var(--gap-text-body);}
  #features .modal-dialog{max-width: 100%; margin: 0px;}
  #features .modal-dialog-centered{min-height: 100%;}
  .feature-list {column-count: 2;}

  .wap-nav{justify-content: space-between; flex-basis: 100%; justify-content: unset; align-items: center; display: grid; grid-template-columns: repeat(var(--grid-col-count),1fr); grid-column-gap: var(--gap-gutter); column-gap: var(--gap-gutter);}
  .wap-nav .brnad-logo{grid-column: 3/span 2; width: 100%; display: flex; justify-content: center;}
  .wap-nav .book-toor{grid-column: 5/span 2;}

  .brnad-logo svg {width: 100px; height: 30.8px;}

  .navbar-light .navbar-toggler{border: 0px; color:#ffffff; width: 35px; position: relative;}
  .navbar-toggler::before,
  .navbar-toggler::after{
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    height: 2px;
    width: 100%;
    content: "";
    background-color: currentColor;
    transition: transform var(--transition-transform-time);
  }
  .navbar-toggler::before{transform: translate(-50%,-0.75rem);}
  .navbar-toggler::after{transform: translate(-50%,0.75rem);}

  .navbar-toggler.cangle::before{transform: translate(-50%,-50%) rotate(45deg);}
  .navbar-toggler.cangle::after{transform: translate(-50%,-50%) rotate(-45deg);}

  .navbar-collapse{position: fixed; top: 0; left: 0; width: 100%; height: 100vh!important; background-color: var(--color-onx-blue); padding: calc(var(--nav-height) + 2rem) var(--gap-margins) 10rem; color: var(--color-off-white);
  display: flex;flex-direction: column; justify-content: space-between;}

  .navbar-light .navbar-nav {width: 100%;}
  .navbar-light .navbar-nav .nav-link{font-weight:400; font-size: var(--size-header-three); line-height:var(--lh-header-three); border-bottom:1px solid var(--color-off-white); letter-spacing: -.005em; padding: 2rem 0;}
  .navbar-text  .book-toor{background: white; color: var(--color-onx-blue)!important; width: calc(var(--grid-col-width)*4 + var(--gap-gutter)*3); display: block;}

  .navbar .nav-item .dropdown-menu li,
  .fixed-header.navbar .nav-item .dropdown-menu li{font-weight: 300; letter-spacing: .01em; color: var(--color-off-white); margin-bottom: 5px;}
  .navbar .nav-item .dropdown-menu li a.dropdown-item,
  .fixed-header.navbar .nav-item .dropdown-menu li a.dropdown-item{font-weight: 400; font-size: var(--size-header-three); line-height: var(--lh-header-three); color: var(--color-concrete); letter-spacing: -.005em;}

  .navbar .dropdown-toggle.show{border-bottom: transparent;}
  .navbar .nav-item .dropdown-menu{padding:0rem 2rem 2rem calc(var(--grid-col-width) + var(--gap-gutter));border-bottom: 1px solid var(--color-off-white); transform: translateY(0); transition: .3s; transition-delay: 0s, 0s, 0.3s;}

  .fixed-header.navbar .nav-item .dropdown-menu{width: auto; margin: 0px; background: transparent; padding:0rem 2rem 2rem calc(var(--grid-col-width) + var(--gap-gutter));border-bottom: 1px solid var(--color-off-white);}

  .nav-link.dropdown-toggle{position: relative;}
  .nav-link.dropdown-toggle:before,
  .nav-link.dropdown-toggle:after{position: absolute; content: ""; top: 50%; right: -1%; width: 1rem; border: 0px; background-color: currentColor; height: 1px; transition: transform var(--transition-transform-time);}

  .nav-link.dropdown-toggle:after {transform: translate(-50%,-50%) rotate(90deg);}
  .nav-link.dropdown-toggle:before{transform: translate(-50%,-50%); transition: opacity var(--transition-opacity-time);}

  .nav-link.dropdown-toggle.show:before {opacity: 0; transform: translate(-50%,-50%); transition: opacity var(--transition-opacity-time);}
  .nav-link.dropdown-toggle.show:after{transform: translate(-50%,-50%) rotate(180deg);}

  
  .fixed-header.navbar-light .navbar-toggler {color: #000000;}
  .fixed-header.navbar-light .navbar-toggler.cangle {color: #ffffff;}
  
  .navbar-text{width: 100%;}

  .f-header {column-gap: unset; padding-bottom: 6rem;}
  .fh-left {grid-row: unset; grid-column: 1/-1; margin-bottom: 2rem;}
  .fh-right {grid-row: unset; grid-column: 1/-1;}
  .f-logo svg {height:30.8px; width:100px;}

  .f-nav{column-gap: unset; padding-bottom: 6rem; grid-template-columns: auto;}
  .f-nav nav{padding: 0.6rem 0; border-bottom: solid 1px #ffffff;}
  .f-nav nav:last-child{border: 0px;}
  
  .f-nav nav div {max-height: 0; overflow:hidden; /* transition: max-height 5s ease-out; */}
  .f-nav p{position: relative; width: 100%;}
  .f-nav nav p:after,
  .f-nav nav p:before{position: absolute; content: ""; top: 50%; right: -1%; width: 15px; height: 2px; background-color: currentColor; height: 1px; transition: transform var(--transition-transform-time);}
  .f-nav nav p:after {transform: translate(-50%,-50%) rotate(90deg);}
  .f-nav nav p:before {transform: translate(-50%,-50%); transition: opacity var(--transition-opacity-time);}
  .f-nav nav.open p:before {opacity: 0; transform: translate(-50%,-50%); transition: opacity var(--transition-opacity-time);}
  .f-nav nav.open p:after {transform: translate(-50%,-50%) rotate(180deg);}
  .f-nav nav.open div {height:auto; max-height: 500px; transition: max-height 1s ease-in !important; display: flex; flex-direction: column; margin-top:1rem;}

 
  .scroll-slide {grid-template-columns: unset; column-gap: unset; display: flex; flex-direction: column; justify-content: center; align-items: unset;}
  .scroll-slide-left {height: unset; grid-column: unset; grid-row: unset; padding-right: unset; margin-bottom: 6rem;}
  .scroll-slide-left h3{font-size: var(--size-header-five);}
  .scroll-slide-left h6{width: 100%; font-size: var(--size-body);}

  .ss-right-vf{position: relative; top: unset; transform: translateZ(0);}
  .scroll-slide-left-footer p {width: calc(var(--grid-col-width)*4 + var(--gap-gutter)*3); padding-right: var(--gap-gutter);}
  .scroll-slide-left-footer h3{font-size: var(--size-header-three);}

 .DBModal .modal-content{width: calc(100vw - 4rem); height: calc(100vh - 4rem); align-items: center; align-content: center;}

}



@media only screen and (max-width: 37.5em){
    :root {
      --size-header-one: 5rem;
      --size-header-two: 4.5rem;
      --size-header-three: 3rem;
      --size-header-four: 1.8rem;
      --size-header-five: 3rem;
      --size-header-six: 10rem;
      --size-button: 1.3rem;
      --size-body: 1.3rem;
      --size-body-small: 1rem;
      --size-caption: 1.3rem;
      --lh-header-five: 1.1;
      --gap-margins: 2.5rem;
      --gap-section-large: 7.5rem;
      --gap-section-xl: 7.5rem;
      --gap-section-xxl: 7.5rem;
      --gap-section-title: 3rem;
      --gap-section-small: 2rem;
      --gap-title-description: 1rem;
      --input-padding: 1rem 2rem;
      --image-border-radius: .5rem;
      --gap-text-body: 3rem;
      --nav-height: 8rem;
  }

  .hero-banner {height: calc(100vh - 10rem); padding: 1rem;}
  .book-toor{min-width: unset; font-size: var(--size-body-small);  padding: 1rem;}
  .navbar{padding: 2rem var(--gap-margins) 1rem;}
  .comunity-form {margin-top: calc(var(--gap-section-large)/2);}
  .form-main {padding: 2rem;}
  .form-header h2 {font-size: var(--size-header-five);}

  .f-nav nav p:after, .f-nav nav p:before{width: 1rem;}

  .fixed-header {transform: translateY(-1rem);}

  .form-group {grid-column: 1/-1;}
  .zf-subContWrap ul .zf-tempFrmWrapper{grid-column: 1/-1;}
  .scroll-slide-left > h3{padding-top: 15px;}
  .scroll-slide-left-footer h3 {font-size: 2.4rem;}
  .f-search {width: 60px; -webkit-mask-size: 26px; mask-size: 26px;}

  .hero-caption-cnt{padding: 1rem calc(var(--gap-margins) - 1rem) 1rem;}
  .hero-caption-cnt h3{max-width: 65%; line-height: 17px;}
  .hero-caption-cnt h1 {margin-bottom: 0.2rem; font-size: var(--size-header-three);}

 .DBModal .modal-content {width: calc(100vw - 2rem); height: calc(100vh - 2rem);}
 .DBModal .modal-content h3 {grid-column: 1/-1;}

  .np-btn-group{top: 0px; right: 24px;}
  .collection-header{max-width: 75%;}
  .prev-btn, .next-btn{height: 2rem; width: 2rem;}

  .gk-inner{height: auto; padding:2rem;}
  .webinar-who-info{flex-direction: column;}
  .wj-col{margin-bottom: 15px;}
  .why-join-row{flex-direction: column; display: flex;}

  .f-new{display: flex; align-items: center; margin-left: 15px;}
  .eql-house{max-height: 30px;}

  .event-info li::before{top: 3px;}
  .et-col figure {min-width: 36px; min-height: 36px; width: 36px; height: 36px;}
  .webinar-faq .accordion{padding-right: 0px;}

  .combine-fields{flex-wrap:wrap;}
  .combine-form-fields,
  .phone-code-fields{grid-template-columns: 1fr;}

  .promotion-inner{padding: 2rem;}
  .np-outer{flex-direction: column; row-gap: 4rem;}
  .np-card{text-align: center;}
  .np-outer .np-card:not(:last-child):before {width: 100%; height: 1px; right: 0; bottom: -2rem;}
  .np-card h3 {font-size: var(--size-header-three);}
  .promotion-tnc{position: relative; right:0rem; bottom:0rem; text-align: center; margin-top: 2rem;}

}

.loader{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: white;
  opacity: 0.9;
}

.loader div{
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}