@font-face {
    font-family: 'HK Grotesk';
    src:
      url('../fonts/HankenGrotesk-Regular.woff2') format('woff2 supports variations'),
      url('../fonts/HankenGrotesk-Regular.woff2') format('woff2-variations'),
      url('../fonts/HankenGrotesk-Regular.woff') format('woff');
    font-weight: 400 500 600 700;
    font-display: swap;
    /* font-stretch: 75% 125%; */
  }

:root {
    --font-main: 'HK Grotesk';


	--font-size-h1: 32px;
	--font-size-h2: 28px;
	--font-size-h3: 24px;
	--font-size-h4: 20px;
	--font-size-h5: 18px;
	--line-height-h1: 40px;
	--line-height-h2: 36px;
	--line-height-h3: 32px;
	--line-height-h4: 30px;
	--line-height-h5: 25px;
    
}
.fs-23{font-size:18px;}	
.fs-24{font-size: 22px;}
.lh-36{line-height:30px !important;}
.lh-33-6{line-height: 30.6px;}
.lh-52-9{line-height: 30px;}
.fs-42{font-size:26px !important;line-height: 34.2px !important;}
.fs-48{font-size: 34px;line-height:42.4px;}

@media (min-width: 768px) {
	:root {
		--font-size-h1: 42px;
		--font-size-h2: 32px;
		--font-size-h3: 28px;
        --font-size-h4: 24px;
        --font-size-h5: 20px;
        --line-height-h1: 52.56px;
		--line-height-h2: 39.4px;
        --line-height-h3: 38.6px;
        --line-height-h4: 38px;
        --line-height-h5: 28px;
	}
    .fs-23{font-size:22px;}	
    .fs-24{font-size: 24px;}
    .lh-36{line-height:36px !important;}
    .lh-33-6{line-height: 33.6px;}
    .lh-52-9{line-height: 30.4px;}
    .fs-48{font-size: 40px;line-height:50.4px;}
    .fs-42{font-size:34px !important;line-height: 38.2px !important;}
}
@media (min-width: 992px) {
	:root {
		--font-size-h1: 52px;
		--font-size-h2: 38px;
		--font-size-h3: 32px;
        --font-size-h4: 28px;
        --font-size-h5: 20px;
        --line-height-h1: 62.56px;
		--line-height-h2: 49.4px;
        --line-height-h3: 41.6px;
        --line-height-h4: 42px;
        --line-height-h5: 28px;
	}
    .fs-23{font-size:23px;}	
    .fs-24{font-size: 24px;}
    .lh-36{line-height:36px !important;}
    .lh-33-6{line-height: 33.6px;}
    .lh-52-9{line-height: 34.5px;}
    .fs-48{font-size: 48px;line-height:62.4px;}
    .fs-42{font-size:42px !important;line-height: 46.2px !important;}
}

/**** heading ***/
h1{ 
	font-family: var(--font-main); 
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
    font-weight: 700;
}

h2{ 
	font-family: var(--font-main);
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
    font-weight: 700;
}

h3{ 
	font-family: var(--font-main);
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
    font-weight: 700;
}

h4{ 
	font-family: var(--font-main);
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
    font-weight: 500;
}

h5{ 
	font-family: var(--font-main);
	font-size: var(--font-size-h5);
	line-height: var(--line-height-h5);
    font-weight: 500;
}

/**** paragraph****/
p, li{ 
	font-family: var(--font-main); 
	line-height: 24px;
    font-weight: normal;
}

/* a{ font-weight: 400;} */

@media (min-width: 1200px) {
    p, li{ 
        font-size: 18px;
        line-height: 25.2px;
    }
    
}

a{
	font-family: var(--font-main); 
	text-decoration: none;

}

/*Common*/
    body{ overflow-x:hidden !important; font-family: var(--font-main) !important; color: #000;}
    /* .container{ width: 95%; max-width: 1440px;} */
    .spt-20{padding-top:20px;}
    .sp-50{ padding-top:40px; padding-bottom:40px;}
    .spt-50{ padding-top:40px;}
    .spb-50{ padding-bottom:40px;}
    .mb-30{ margin-bottom: 30px;}
    .mt-30{ margin-top: 30px;}
    .p-30{ padding: 20px;}
    .sp-100{padding-top: 80px; padding-bottom:80px;}
    .btn:focus, .btn.focus, a:focus, .swiper-pagination-bullet:focus, button:focus {outline: 0; box-shadow: none !important;}
   

@media (min-width: 992px) {
	.sp-50{ padding-top:60px; padding-bottom:60px;}
	.spt-20{padding-top:20px;}
	.spt-50{ padding-top:60px;}
	.spb-50{ padding-bottom:60px;}
    .sp-100{padding-top: 120px; padding-bottom:120px;}
}

@media (min-width: 992px) and (max-width:1200px){
    .container{width: 1200px !important;}
}

@media (min-width:992px){
    .col-lg-2-5{width:20% !important;}
}


.bg-l-orange{background-color: #ea7d301f;}
.bg-l-brown{background-color: #ea7e3029;}
.bg-d-green{background-color: #61c5bd71;}
.bg-l-green{background-color: #61c5bc4f;}
.bg-l-pink{background-color: #ec696a38;}
.bg-yellow{background-color: #e6b33d4a;}
.bg-d-pink{background-color: #ec696967;}
.bg-l-yellow{background-color: #e6b33d49;}
.bg-d-purple{background-color: #845ef72e;}
.bg-l-red{background-color: #ec69692e;}
.bg-l-purple{background-color: #845ef740;}
.bg-l-blue{background-color: #31a8fe47;}
.bg-l-violet{background-color: #845ef72f;}
.bg-ll-violet{background-color: #845ef72a;}
.bg-ll-blue{background-color: #31a8fe40;}
.bg-ll-green{background-color: #61c5bd38;}
.bg-d-blue{background-color: #31a9fe7a;}
.bg-l-cream{background-color: #ec696929;}
.bg-d-yellow{background-color: #e6b33d5e;} 
.brand-red{color: #E83A25;}
.bg-red{background-color: #EC696A;}
.bg-blue{background-color: #31A8FE;}
.bg-green{background-color: #1BC6AF;}
.bg-grey{background-color: #F5F5F5;}
.bg-purple{background-color: #845EF7 !important;}
.bg-box-blue{background-color: #F5FBFF;}
.bg-box-orange{background-color: #FFF8F3;}


.text-whitegrey{color: #F0EFEE;}
.text-purple{color: #845EF7 !important;}
.text-green{color: #1BC6AF !important;}
.text-red{color: #EC696A !important;}
.text-orange{color: #EA7D30;}
.text-blue{color: #31A8FE;}
.text-p-purple{color:#874FFB;}
.text-d-grey{color: #808080;}
.text-dd-orange{color:#FF7D19;}
.menu-box{padding: 8px 8px 12px 8px;height: 100%;}
.dropdown-item{white-space: unset !important;}


.dropdown-menu .menu-box a{
    color: #000000db;
    font-size: 12.8px;
    line-height: 18px;
    padding: .3em .8em ;
}
@media (max-width:992px){
    .vh-100{height: auto !important;}
   }

   @media (max-width:600px){
    .mt-mobile{margin-top: 0;}
   }

@media (min-width: 992px){
    .pe-lg-8{padding-right: 13rem;}
    .db{display: block;}
    .p-lg-4-5{padding: 2rem !important;}
    .ps-6-8 {
        padding-left: 4.8rem !important;
    }
    .p-lg-6{padding: 4.5rem !important;}
   
}
.br-24{border-radius: 24px;}
.br-10{border-radius: 10px;}
.br-20{border-radius: 20px;}

.fs-14{font-size: 14px;}
.fs-16{font-size: 16px;}
.lh-24{line-height: 24px;}

@media (min-width:600px){
    .col-md-4-5{width:36.5% !important; display: flex;}
    .col-md-6-5{width:63% !important; display: flex;}
    .col-md-6-3 {
        width: 60.5% !important; display: flex;
    }
    .col-md-4-3 {
        width: 39.5% !important;display: flex;
    }
}

@media (min-width:1200px){
    .w-lg-200{width:200px;}
    .w-lg-224{width:224px;}
    .lh-33-6{line-height: 33.6px !important;}
}

.bg-ll-grey{background-color: #ffffff27; border-radius: 20px;}
.br-76{border-radius:76px;}


.dropdown-menu{background-color: #f9f9f9;}
.menu-box{background-color: #fff !important;padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    transition: background-color .3s, box-shadow .3s;}

    @media (min-width: 1200px){
        .nav-item.dropdown .dropdown-menu{display: block !important;max-height: 0 !important;padding: 20px !important;left: 0;visibility: hidden;transition: max-height 0.3s !important;}
        .nav-item.dropdown:hover .dropdown-menu{display: block !important;max-height: 600px !important;padding: 20px !important;visibility: visible;height: auto !important;}
        .navbar-expand-lg .navbar-nav .nav-link:not(.btn-light){padding-top: 20px; padding-bottom: 20px;}
    }