:root {
    --main-color: #ff1f49;
    --main-color2: #4CAF50;
    --l-main-color: #ff1f49cf;
    --gray-color: #f8f8f8;
    --bg-white: #fff;
    --dark-color: #686868;
    --bg-dark: #001F2C;
    --bg-dark2: #1B1B1B;
    --disabled-color: #f9f9f9;
    --pane-padding: 5px 42px;

    
}


@font-face {
    font-display: block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 900;
    src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?9bbb245e67a133f6e486d8d2545e14a5);
    src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?9bbb245e67a133f6e486d8d2545e14a5) format("embedded-opentype"),url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?1551f4f60c37af51121f106501f69b80) format("woff2"),url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?eeccf4f66002c6f2ba24d3d22f2434c2) format("woff"),url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?be9ee23c0c6390141475d519c2c5fb8f) format("truetype"),url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?7a8b4f130182d19a2d7c67d80c090397) format("svg")
}

body{
    color:var(--dark-color) !important;
}


.landing-page{
    height: 57rem !important;
}

section.landing-page:before {
    content: "";
    background: url(/img/bg.png);
    background-size: cover;
    width: 100%;
    height: 57rem;
    position: absolute;
    background-repeat: no-repeat;
    margin: 0 auto;
    opacity: 0.6;
    z-index: -1;
    -webkit-box-reflect: left;
}

section.why-work-with-us .container{
    padding-top: 100px;
    padding-bottom: 100px;
    z-index: 0;
}

section.contact-us .container{
    padding-top: 100px;
    padding-bottom: 100px;
    z-index: 0;
}

section.why-work-with-us:before {
    content: "";
    background: url(/img/work-with-us.jpg);
    background-size: cover;
    width: 100%;
    height: 139rem;
    position: absolute;
    background-repeat: no-repeat;
    margin: 0 auto;
    opacity: 0.1;
    z-index: -1;
}


section.contact-us:before {
    content: "";
    background: url(/img/contact-us.png);
    background-size: cover;
    width: 100%;
    height: 58.5rem;
    position: absolute;
    background-repeat: no-repeat;
    margin: 0 auto;
    z-index: -1;
    filter: brightness(10%) saturate(140%);
}

section.contact-us .contact-info{
    color:white !important;
}

.contact-info svg{
    color:var(--main-color) !important;
}


.bg-main-color{
    background-color: var(--main-color)!important;
    background: var(--main-color)!important;
    color: #fff !important;
}

.bg-gray-color{
    background-color: var(--gray-color)!important;
    background: var(--gray-color)!important;
}

.ul-menu li a{
    color:var(--bg-dark);
    font-weight: 400;
}

.ul-menu-icon li a{
    color:#c5c5c5;
    font-weight: 400;
    border-radius: 50%;
    border: 1px solid #c5c5c5;
    padding: 1px 5px;
}

.ul-menu li a:hover{
    color:var(--main-color) !important;
}

.ul-menu-icon li a:hover{

    background-color:var(--main-color) !important;
    border-color:var(--main-color) !important;
    color:#fff !important;
}

.content{
    /* margin-top:198px !important; */
}

.content p {
    font-size: 16px;
}

.menu-header a{
    color: var(--dark-color);
}

.menu-header a:hover{
    color: var(--main-color) !important;
}

.work-with-us{
    margin-bottom: 40px;
}

.work-with-us > div{
    padding: 20px 50px;
    cursor: pointer;
}
 
.work-with-us > div:hover svg{
    color:white !important;
}

.work-with-us:not(.img) > div:hover{
    background-color: var(--l-main-color); 
    color:white !important;
}

.work-with-us:not(.img) div:hover > label {
    color: white !important;
}

.work-with-us.img:hover label{
    color:white !important;
}




.work-with-us.img:hover >  label{
    color:white !important;
}

.work-with-us.img:hover{
    background-color: var(--l-main-color); 
    color:white !important;
}

 


.work-with-us svg{
    margin: 20px;
    /* color: var(--main-color);  */
}

.work-with-us p{
    text-align: justify;
}

.work-with-us label{
    font-size: 24px;
    /* text-align: center; */
    width: 100%;;
    margin-bottom: 20px;
    color: var(--main-color);
    
}
 
.main-color{
    color: var(--main-color)!important;
}

.text-dark{
    color: var(--bg-dark)!important;

}

/* .text-danger strong,
.text-danger{
    color: var(--main-color)!important;
} */

/* .rw-hover:hover{
    border : 2px solidvar(--main-color)!important;
    color:var(--main-color)!important;
} */

.knowledge .rw-hover:hover img{
    -webkit-filter: drop-shadow(-2px 3px 39px rgba(255,140,0, 0.9));
    filter: drop-shadow(-2px 3px 39px rgba(255,140,0, 0.9));
}

.rw-hover:hover div.icon-top{
    top:-320px !important; 
    opacity: 1 !important; 
    transition-property: top,opacity;
    transition-duration: 0.5s, 0.3s;
}
   

.rw-hover:hover p {
    color:var(--main-color)!important;
}

.base-color{ 
    background-color: var(--main-color)!important;
    position: absolute;
    right: 0;
    font-size: 25px;
    font-weight: 600;
    color: white;
    border-radius: 0px 5px;
    padding: 6px 14px !important;

}

.card-fixed-height{
    height: 325px;
}

.card .to-bottom{
    bottom: 30px !important;
    position: absolute;
}

.card.process:hover{
    border-color:var(--main-color)!important;

}

.card.process:hover .base-color{
    cursor: pointer;
    color: #fff !important;
    background-color:var(--main-color)!important;
    transition: all .3s linear;
}

.card.process:hover h3
{ 
    color:var(--main-color)!important; 
}

.card.process:hover a,
.card.process:hover a:hover{
    cursor: pointer;
    color: #fff !important;
    background-color:var(--main-color)!important;
    border-color:var(--main-color)!important;
    transition: all .3s linear;
}

.btn_three_outline {
    background: #fff;
    border: 1px solid var(--main-color);
    border-radius: 3px;
    color: var(--main-color);
    cursor: pointer;
    display: inline-block;
    font: 500 14px Poppins,sans-serif;
    margin-top: 50px;
    padding: 15px 30px;
    transition: all .3s linear;
}

.card.process .software_featured_item h3{
    margin: 5px 0 25px !important;
}

/* HEADER */
.header_top li a{
    color: white !important;
}

.main-header{
    /* height: 75px !important; */
}

.service-offer .card:hover img,
.gallery-list .col:hover img{
    transform: scale(1.2);
}

/* STEPS TIMELINE */ 
.updates-wrapper {
    position: relative;
    
}

.updates-content.faqs {
    position: relative;
    padding-left: 22px !important;
	padding-top:0px !important;
	padding-bottom:50px !important;
}

.updates-content:not(.faqs) {
    position: relative;
    border-left: 2px solid #dee2e6!important;
    padding-left: 45px !important;
}

.updates-content:not(.faqs):first-child {
    border-left: 2px solid var(--main-color) !important;
}

.updates-content:before {
    content: '';
    position: absolute;
    top: 35px;
    left: -8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.updates-content.faqs:before {
    top: 5px !important;
    left: -3px !important;
}

.updates-content:hover *,
.updates-content:hover::before{ 

    /* color: var(--main-color) !important; */
    /* background-color: rgba(var(--main-color), 0.8) !important; */
    transition: all .3s linear;
    cursor: pointer;
}

 
.updates-content.up:first-child:before ,
.updates-content.faqs:before {
    background: var(--main-color) !important;
}

.updates-content.up:before {
    background: #dee2e6 !important;
}




/* FORM STYLE */

/* button[type=submit],
button.btn-dark,
a.btn:not(.btn-secondary),
a.btn:not(.btn-outline-secondary){
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color:white !important;
} */

button[type=submit]:hover,
button.btn-dark:hover,
a.btn:not(.btn-secondary):hover{
    background-color: var(--light-main-color) !important;
    border-color: var(--main-color) !important;
    color: var(--main-color) !important;
    transition: all .3s linear;
}

#advised-results button{
    color: var(--dark-color) !important;
    background-color: transparent !important;

}

#advised-results button:hover{
    color: var(--main-color) !important;

}
 
.selection {
    color: white;
}

.selection .select:hover h5, a,
.selection .select:hover i{
    color: var(--main-color);
}

 
    
.selection .select {
  border-top: 0;
  border-right: 0;
  -webkit-transform-origin: 50% 50%;
}
     


.select-check + label .text-danger strong{
    color: var(--dark-color) !important;
}

.select-check:checked+label h5,
.select-check:checked+label i,
.select-check:checked+label .text-danger strong {
    color: var(--main-color)  !important;

}

.select-check + label .text-danger{
    /* color: white  !important; */
    width: 100%;
    display: block;

}

.selection .select{
    background-color: var(--disabled-color) !important;
}

.polls.selection .select{
    background-color: transparent !important;

}

 

.select-check:checked+label {
    color: var(--dark-color);
    background-color: var(--light-main-color) !important;
    border: 1px solid  var(--main-color);
    /* border-bottom: 2px solid var(--main-color); */
}

.orders .nav-link{
    color:var(--main-color) !important;
}
 
.orders .nav-link.active{
    background-color:var(--main-color) !important;
    background:var(--main-color) !important;
    border-color:var(--main-color) !important;
    color:white !important;


}

.selectize-dropdown .selected,
.selectize-dropdown .option:hover{

    background-color: var(--main-color) !important;
    color:white !important;
}
 


/*PRICE COLOR CODE START*/
.generic_content{
	background-color: #fff;
}

 .generic_content .generic_head_price{
	background-color: #f6f6f6;
}

 .generic_content .generic_head_price .generic_head_content .head_bg{
	border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4;
}

 .generic_content .generic_head_price .generic_head_content .head span{
	color: #525252;
}

 .generic_content .generic_head_price .generic_price_tag .price .sign{
    color: #414141;
}

 .generic_content .generic_head_price .generic_price_tag .price .currency{
    color: #414141;
}

 .generic_content .generic_head_price .generic_price_tag .price .cent{
    color: #414141;
}

 .generic_content .generic_head_price .generic_price_tag .month{
    color: #414141;
}

 .generic_content .generic_feature_list ul li{	
	color: #a7a7a7;
}

 .generic_content .generic_feature_list ul li span{
	color: #414141;
}
 .generic_content .generic_feature_list ul li:hover{
	background-color: #E4E4E4;
	border-left: 5px solid var(--main-color);
}

 .generic_content .generic_price_btn a{
	border: 1px solid var(--main-color); 
    color: var(--main-color);
} 

 .generic_content.active .generic_head_price .generic_head_content .head_bg,
 .generic_content:hover .generic_head_price .generic_head_content .head_bg{
	border-color: var(--main-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) var(--main-color);
	color: #fff;
}

 .generic_content:hover .generic_head_price .generic_head_content .head span,
 .generic_content.active .generic_head_price .generic_head_content .head span{
	color: #fff;
}

 .generic_content:hover .generic_price_btn a,
 .generic_content.active .generic_price_btn a{
	background-color: var(--main-color);
	color: #fff;
}

.row .table{
    padding: 28px 0;
}

/*PRICE BODY CODE START*/

 .generic_content{
	overflow: hidden;
	position: relative;
	text-align: center;
}

 .generic_content .generic_head_price {
	margin: 0 0 20px 0;
}

 .generic_content .generic_head_price .generic_head_content{
	margin: 0 0 50px 0;
}

 .generic_content .generic_head_price .generic_head_content .head_bg{
    border-style: solid;
    border-width: 90px 1411px 23px 399px;
	position: absolute;
}

 .generic_content .generic_head_price .generic_head_content .head{
	padding-top: 40px;
	position: relative;
	z-index: 1;
}

 .generic_content .generic_head_price .generic_head_content .head span{
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

 .generic_content .generic_head_price .generic_price_tag{
	padding: 0 0 20px;
}

 .generic_content .generic_head_price .generic_price_tag .price{
	display: block;
}

 .generic_content .generic_head_price .generic_price_tag .price .sign{
    display: inline-block;
    font-family: sans-serif;
    font-size: 28px;
    font-weight: 400;
    vertical-align: middle;
}

 .generic_content .generic_head_price .generic_price_tag .price .currency{
    font-family: sans-serif;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 60px;
    padding: 0;
    vertical-align: middle;
}

 .generic_content .generic_head_price .generic_price_tag .price .cent{
    display: inline-block;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 400;
    vertical-align: bottom;
}

 .generic_content .generic_head_price .generic_price_tag .month{
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    vertical-align: bottom;
}

 .generic_content .generic_feature_list ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

 .generic_content .generic_feature_list ul li{
	font-size: 18px;
	padding: 15px 0;
	font-weight: 500;
	transition: all 0.3s ease-in-out 0s;
}
 .generic_content .generic_feature_list ul li:hover{
	transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;

}
 .generic_content .generic_feature_list ul li .fa{
	padding: 0 10px;
}
 .generic_content .generic_price_btn{
	margin: 20px 0 32px;
}

 .generic_content .generic_price_btn a{
    border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	-o-border-radius: 50px;
	-webkit-border-radius: 50px;
    display: inline-block;
    font-size: 18px;
    outline: medium none;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
}

 .generic_content,
 .generic_content:hover,
 .generic_content .generic_head_price .generic_head_content .head_bg,
 .generic_content:hover .generic_head_price .generic_head_content .head_bg,
 .generic_content .generic_head_price .generic_head_content .head h2,
 .generic_content:hover .generic_head_price .generic_head_content .head h2,
 .generic_content .price,
 .generic_content:hover .price,
 .generic_content .generic_price_btn a,
 .generic_content:hover .generic_price_btn a{
	transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
} 
@media (max-width: 320px) {	
    
    .navbar-brand img {
        height: 30px !important;
    }
    .header-1 li a{        
        font-size: 14px !important;
    }
    
}

@media (max-width: 767px) {
	 .generic_content{
		margin-bottom:75px;
	}
    section.knowledge{
        height: 137vh !important;
    }
    section.knowledge::before {
        height: 145vh !important;
    }
    .navbar-brand img {
        height: 45px !important;
    }
    .header-1 li a{        
        font-size: 14px !important;
    }
    .content{
        /* margin-top:380px !important; */
    }

    .banner img{
        height: auto !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
	 .col-md-3{
		float:left;
		width:50%;
	}
	
	 .col-md-4{
		float:left;
		width:50%;
	}
	
	 .generic_content{
		margin-bottom:75px;
	}
}

 
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 1200px) {
}

 
.demo-pic{
	margin: 0 auto;
}
.demo-pic:hover{
	opacity: 0.7;
}

.price-heading{
    text-align: center;
}
.price-heading h1{
	color: #666;
	margin: 0;
	padding: 0 0 50px 0;
}
.demo-button {
    background-color: #333333;
    color: #ffffff;
    display: table;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: medium ;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
}
.bottom_btn{
	background-color: #333333;
    color: #ffffff;
    display: table;
    font-size: 28px;
    margin: 60px auto 20px;
    padding: 10px 25px;
    text-align: center;
    text-transform: uppercase;
}
.demo-button:hover{
	background-color: #666;
	color: #FFF;
	text-decoration:none;
	
}
.bottom_btn:hover{
	background-color: #666;
	color: #FFF;
	text-decoration:none;
}

a .card h5{
    color: var(--dark-color) !important;
}
 

.music-wrapper
#status,
.music-wrapper
#artist-status {
    position: absolute;
    right: 25px;
    top:   16px;
}


#status {
    position: absolute;
    right: 25px;
    top:   45px;
}

#advised-search,
#artist-advised-search{
    position: relative;;
}

#advised-search input, 
#artist-advised-search input{
    border: 1px solid #e3e3e3;
    border-radius: 10px;
}
 
#advised-search input:focus, 
#artist-advised-search input:focus{
    outline: none;
    /* border-bottom: 2px solid var(--main-color) !important; */
    /* transition: left 250ms ease-in-out, right 250ms ease-in-out; */
}


input[type=text]:focus,
input[type=number]:focus,
textarea:focus{
    outline: none !important;
}

 

@media (min-width: 992px){
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1450px;
    }
}


/* v2 */

/* HEADER */
.navbar-expand-lg,
.navbar-expand-lg .navbar-nav{
    max-height: 75px !important;
    align-items: center;
}

.navbar-brand img{
    height: 64px;
}

.btnLogin,
.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{

    font-size: 16px;
    line-height: 21px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 18px;

}

/* HOME */
.btnSubmitGrading,
.btnSubmitGrading:hover,
.btnSubmitGrading:focus{

    background: var(--main-color);
    border-radius: 37.5px;
    font-size: 20px;
    line-height: 26px;
    text-transform: uppercase;
    color: #FFFFFF;
    border: none;

}
 
.btnSubmitGrading:hover{
    background-color: transparent !important;
    border: 1px solid var(--main-color) !important;
    color: var(--main-color) !important;
    /* filter: drop-shadow(0px 3px 20px rgba(0, 128, 255, 0.9)); */
}

.bg-image{
    background-image: var(--bg-image);
    background-size: cover;
    width: 100%;
    height: 360px;
}

.btn:hover{
    border: none;
}

.navbar .search_cart .search a.nav-link{
    margin-left: 0px !important;
}

.heading-img{
    /* height: 475px  !important; */
    height: 352px  !important;
}


.service-wrapper .card{
    border:none;
}
.service-wrapper .card.selected{
    min-height: 450px;
}

.service-wrapper .card-body{
    background-color:#282828 !important;
    color: white;
    border-radius: 5px 5px 0px 0px;
}

.service-wrapper .card.selected .card-body,
.service-wrapper .card.selected .card-footer{
    background-color:white !important;
    border: none;
    color: #282828;
}


.service-wrapper{
    align-items: center;
    padding: 0 120px;
}

.service-wrapper .card-body h1{
    font-size: 76px;
}

.service-wrapper .card.selected .card-body h1{
    font-size: 109px;
}


.service-wrapper .card.selected::before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    background-color: var(--main-color);
    color: white;
    position: absolute;
    right: 0;
    padding: 4px 10px;
    border-radius: 0px 5px;
}

.service-wrapper .card-body h1 sup{ 
    font-size: 34px; 
    letter-spacing: -19px;
    top: -27px;
}

.service-wrapper .card.selected .card-body h1 sup{ 
    font-size: 48px; 
    letter-spacing: -40px;
    top: -27px;
}



.service-wrapper .card-body span.btn,
.service-wrapper .card-body span.btn:hover{
    background-color:#2d2d2d !important;
    border:none;
    border-radius: 22.5px;
    color: white;
}

.service-wrapper .card.selected  .card-body span.btn,
.service-wrapper .card.selected  .card-body span.btn:hover{
    background-color: #ffdac2 !important;
    color: var( --main-color);
}


.service-wrapper .card-footer{
    background-color: var(--bg-dark2) !important;
    color: white;
}

.service-wrapper .card-footer .btn{
    background-color: var(--main-color) !important;
    color: white;
    border-radius: 22.5px;
}
 
 
.service-wrapper .card.selected .card-footer .btn{
    filter: drop-shadow(0px 3px 38px rgba(255, 177, 151, 0.9));
}
 
.btn.capsule{
    border-radius: 22.5px;
}

.btn.submit,
.btn.submit:hover {
    background-color: var(--main-color);
    color:white;
    border:none;
    border-radius: 82px;
}

/* PROCESS */

.card.process .card-body h3{
    font-size: 20px !important;
}

.card.process .card-body .capsule{
    position: absolute;
    bottom: 25px;
}


/* CASE TYPE */
.card.case-type .card-img-top {
    background-color: #313131;
}

.disabled  .card-img-top {
   filter: brightness(0.4);
}

.cases .card-title{
    font-size: 14px;
}

.cases .disabled .card-title{
    color:#666 !important;
}

.cases .disabled .card-footer{
    background-color: #3A3A3A !important;
}

.cases a:hover:not(.disabled) .card-footer ,
.cases a:focus:not(.disabled) .card-footer {
    background-color: var(--main-color);
    color: white !important;
}


.cases a:hover:not(.disabled) .card-footer .card-title ,
.cases a:focus:not(.disabled) .card-footer .card-title {
    background-color: var(--main-color);
    color: white !important;
}


/* SUBMIT FOR GRADING */

.type-label{
    position: absolute;
    text-align: center;
    display: block;
    width: 100%;
    bottom: 33px;
    font-size: 16px;
}
.parent > div .card:not(.disabled) {
    min-height: 200px !important;
    background-color: #313131;
}

.parent > div .card.disabled {
    min-height: 200px !important;
    background-color: #0f0f0f !important;
    cursor: not-allowed;
}
.parent > div .card.disabled::before {
    content: attr(data-disable);
    color: #3f3f3f !important;
     z-index:9;
    margin:2px 10px;
    position: absolute;
    
}
.parent > div .card.disabled span {
   color: #3f3f3f !important;
}

.alert-remind{
    border:  1px solid var(--main-color);
    border-radius: 10px;
    line-height: 20px;
    background-color: #ff663310;
}

.alert-remind.info{
    border:  1px solid #63B5FF !important;
    color: #63B5FF !important;
    background-color: #63B5FF10  !important;
}

.alert-remind strong{
    color: var(--bg-dark);
    font-weight: 500;
}

.row.parent a.active p, 
.row.parent a.active{ 
    border-color: var(--main-color) !important;
}

.row.parent a.active .card{ 
    border: 1px solid var(--main-color) !important;
}

.row.parent a.active span{ 
    color: var(--main-color) !important;
 }
 
.submit-form{
    background: #FFFFFF;
    box-shadow: 0px 3.83934px 6.71885px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.submit-form label.d-block{
    color: var(--bg-dark) !important;
    font-size: 14px;
    text-transform: uppercase;

}


.card.disabled .card-img-top,
.card.disabled{
    background-color: #262626 !important;    
}

span.coming-soon {
    position: absolute;
    right: 5px;
    background-color: #2f2f2f;
    font-size: 12px;
    padding: 0px 8px;
    top: 5px;
    color: #666;
    z-index: 1;
    border-radius: 5px;
}

.submit-form label + span{
    color: #7A7A7A;
    font-size: 24px;
}

.submit-form label span{
    color: #7A7A7A;
    font-size: 12px;
    font-weight: 400;
}

.rewind-form input,
.rewind-form select, 
.submit-form input, 
.submit-form textarea,
.submit-form select{
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    outline: none;
    padding: 10px 20px;
}

.rewind-form .selectize-input,
.submit-form .selectize-input{
   padding: 13px 20px;
   font-size: 16px;
   border-radius: 10px !important;
}

.selectize-dropdown [data-selectable].option {
    
    font-size: 16px !important;
    padding: 10px 20px !important;
}

.selection .col label{
    border-radius: 10px;
    min-height: 155px !important;
    position: relative;

}

.polls.selection .col label{
    border-radius: 10px;
    min-height: 270px !important;
    position: relative;

}

.selection .row .col {
    padding: 10px;
}

.selection .row .col:first-child {
    padding-left: 0px;
}

.selection .select h5.price {
    font-size: 32px !important;

}

 

.select-check:checked+label::before{

    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    background-color: var(--main-color);
    color: white;
    position: absolute;
    right: 0;
    top: 0;
    padding: 4px 10px;
    border-radius: 0px 5px;
}


/* QUEUE PAGE */
.queue-item{
    background: #F8F8F8;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
}

.queue-ctrl{
    color: #969696 !important;
    background-color: transparent !important;
    outline: none;
    border: none;
}

.shipping_cost{
    font-size: 36px !important;
}

.address-item {
    position: relative;
}

.address-item.selected{
    border-color: var(--main-color);
    background-color: #ff663310;
}

.address-item input:checked+div::before{
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    background-color: var(--main-color);
    color: white;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0px 8px;
    border-radius: 0px 5px;
    font-size: 14px;
}

.service-list span{
    float:right;
}

/* INVOICE */

.invoice-process{
    width: 80% !important;
}

.invoice-process .updates-content{
    border-left-color: #323232 !important;
    padding-top: 0px !important;
    padding-bottom: 40px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}


.invoice-process .updates-content:first-child:before,
.invoice-process .updates-content::before{
    background: #323232 !important;
}


/* ORDERS */
.orders-wrapper{
    border-radius: 10px;
}

.orders-wrapper .header {
    border-radius: 10px 10px 0px 0px;
}

.orders .nav-link {
    padding: 10px 50px;
}

/* BLOG */

.blog-wrapper{
    color: var(--bg-dark)
}

.blog-wrapper img{
    width: auto;
    max-width: 100%;
}

.blog-wrapper h1,
.blog-wrapper h2,
.blog-wrapper h3,
.blog-wrapper h4,
.blog-wrapper h5,
.blog-wrapper h6{
    font-size: 1rem;
}

.article-filter-wrapper {
    background-color: #22222203;
}

.article-filter-wrapper .search{
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    padding: 20px 50px;
}

.search-icon{
    top: 23px;
    left: 19px;
    font-size: 20px;
    color: #d9d9d9;
}
 

/* ABOUT */

.card.team-wrapper{
    background-color: #1c1c1c !important;
    min-height: 510px;
    margin-bottom: 20px;
}

/* CONTACT */
.contact-form input,
    .contact-form textarea{
    border-radius: 10px;
    border:1px solid #D9D9D9;
}

 
/* COMMON */


#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
    z-index: 99999999999999999;
}

body{
    background-color: #FFF !important;
}
h2.title{
    font-size: 48px !important;
    color: var(--bg-dark) !important;
    text-align: center;
}

footer.footer_area{
    background-color: #fff !important;
    max-height: 72px;
    /* position: absolute;
    bottom: 0;
    display: block;
    width: 100%; */
}

.btn-secondary,
.btn-secondary:hover{
    background-color: #E1E4EB !important;
    border: 0 !important;
    font-size: 16px !important;
}

.rewind-form{
    background: #FFFFFF;
    box-shadow: 0px 3.83934px 6.71885px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding:  50px;
}

.reminder-header{
    background-color: #ff663310;
}

.reminder-header.info{
    /* border:  1px solid #63B5FF !important; */
    background-color: #63B5FF10  !important;
}


.reminder-header.info i{
    /* border:  1px solid #63B5FF !important; */
    color: #63B5FF !important;
}


.dropdown-item:hover,
.dropdown-item:focus{
    background-color: var(--bg-dark);
    color: var(--main-color) !important;
}

.dropdown-menu{
    background-color: var(--bg-dark);
}

.dropdown-item{
    color:white !important;
    padding: 10px 120px 10px 40px;

}

/* .dropdown-menu[data-bs-popper]{
    left: 55px;
} */

.dropdown-menu.mobile-menu[data-bs-popper]{
    left: -225px;
}

.dropdown-menu.mobile-menu{
    background-color: white;
}
.dropdown-item.mobile-menu{
    color:var(--dark-color) !important;
    padding: 10px 120px 10px 40px;

}


.selectize-control.single .selectize-input, .selectize-dropdown.single{
    border-color:  #ced4da !important;
    border-radius: 0.375rem;
}

.selectize-control.single .selectize-input {
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat;
}

.modal{
    background-color: #000000b8;
}

/* .header-title::after{
    content: '';
    background: url(/images/header-img.svg);
    height: 410px !important;
    width: 100%;
    position: absolute;
    top: 0;
    object-fit: scale-down;
    background-repeat: no-repeat;
    background-position: right bottom 85px;
} */

.header-title::after {
    content: '';
    /* background: url(/images/header-img.svg); */
    background-image: url(/images/new-banner.png);
    height: 410px !important;
    width: 100%;
    position: absolute;
    top: 0;
    object-fit: scale-down;
    background-repeat: no-repeat;
    background-position: right bottom 160px;
    background-size: 550px;
}

.header-title{
    padding-top: 100px !important;
    position: relative;
    min-height: 325px;
}


.header-title2{
    padding-top: 100px !important;
    position: relative;
    min-height: 325px;
}


.home-desktop{
    display: flex;
}

.home-mobile{
    display: none;
}

.back-wrapper{
    text-align: right !important;
}

 

.e-mobile{
    display: none;
}

.reminder-header i{ 
    font-size: 32px;
    color: var(--main-color);
    margin: 5px 15px;
}

span.required{
    color:red;
    margin: 0 5px;
}


@media (min-width: 1250px){
    .container-header {
        max-width: 1460px !important;
    }
} 
 


@media (min-width: 992px){
    .collapse:not(.show) {
        display: none !important;
    }
}

@media (min-width: 1025px){
    .navbar-expand-lg .navbar-collapse {
        display: flex!important; 
        flex-basis: auto !important;
    }
}
 

@media (max-width: 1024px){

    .heading-text h1{
        font-size: 38px !important;

    }
    .heading-text h4{
        font-size: 22px !important;
    }

    section.landing-page:before{
        /* background: none !important; */
        opacity: 0.1;
    }

    section.why-work-with-us:before{
        background-repeat: repeat-y;
        height: 665% !important; 
    }
    section.contact-us:before{
        height: 159% !important; 

    }

    footer{
        background: none !important;
    }

    .subscribe_form{ float:right; max-width:100% !important; width:100%; border-radius:10px; padding:6px 6px 6px 6px !important; position:relative;  }
    

    h2.title{
        margin-bottom: 30px !important;
    }

    .home-desktop{
        display: none;
    }

    img.heading-img {
        /* height: 400px !important; */
        width: 100% !important;
    }

    .banner_top {
        padding-top: 0px !important;
    }

    .saas_home_area,
    .home-mobile{
        display: block;
    }

    .header-title{
        min-height: 185px !important;
        /* padding-right: 100px; */
        padding-top: 25px !important;
        
    }

    .header-title p {
        font-size: 12px;
        line-height: 20px;
    }

    .header-title::after{
        background-image: url(/images/new-banner.png);
        right: 0;
        top: 120px;
        background-repeat: no-repeat;
        background-position: right top;
        background-size: 215px;
        opacity: 0.6;
    }
    

    #navbarSupportedContent{
        margin-left: -15px !important;
        margin-right: -15px !important;
        max-height: max-content;
    }

    #navbarSupportedContent
    .navbar-nav{    
        display: inline-block;
    }

    #navbarSupportedContent
    .navbar-nav
    li.nav-item {
        padding-left: 20px;
        padding-bottom: 10px;
    }

    button.navbar-toggler {
        margin-top: -12px !important;
    }

    #login-submit-wrapper{
        width: 100%;
        display: inline-grid;
        align-items: center;
        padding: 25px 17px;
    }

    #login-submit-wrapper > button{
        margin-top: 10px;
    }

    .service-wrapper{
        padding: 0px 35px;
    }

    .service-wrapper .col{
        border: none !important;
        border-color: transparent;
        padding: 10px 20px;
        box-shadow: none !important;
    }

    h2.title{
        font-size: 30px !important;
        margin-top: 20px !important;
    }

    .submit-form{
        padding: 50px 30px !important;
    }
    .submit-form label.title{
        font-size: 14px !important;

    }

    .submit-form label + span{
        font-size: 18px !important;
    }

    .rewind-form{
        padding: 50px 25px !important;
    }

    .price-total{
        text-align: center !important;
        font-size: 28px !important;
        padding-bottom: 30px !important;
    }

    .back-wrapper{
        text-align: center !important;
        margin: 10px auto;
    }

    .queue-item .h5{
        color:#222222;
        font-size: 16px;
    }

    .invoice-process {
        width: 100% !important;
    }

    .timeline-arrow{
        right: 41% !important;
      }

      .timeline-arrow.left{
        right: 34% !important;
      }


    .e-desktop{
        display: none;
    }

    .e-mobile{
        display: block;
    }
    .e-desktop{
        display: none;
    }
    

    footer.footer_area{
        max-height: 100% !important;
    }

    .header_social_icon{
        display: block;
        text-align: center !important;
        margin-top: 50px !important;
    }

    .reminder-header i{ 
        font-size: 32px;
        color: var(--main-color);
        margin: 5px 10px 0px 0px;
    }

    .reminder-header {
        margin-top: 0;
        padding: 10px 0px;
    }

    .reminder-header .btn {
        margin-top: 20px;
    }

    .reminder-notes {
        line-height: 20px;
    }
    .reminder-title {
        font-size: 14px;
        font-weight: 600;
    }
    .menu_toggle .hamburger span,
    .menu_toggle .hamburger-cross span{
        background: white !important;
    }


} 
 

/* Bar Graph Horizontal */
.bar-graph .year {
    -webkit-animation: fade-in-text 2.2s 0.1s forwards;
    -moz-animation: fade-in-text 2.2s 0.1s forwards;
    animation: fade-in-text 2.2s 0.1s forwards;
    opacity: 0;
  }
  
  .bar-graph-horizontal {
    max-width: 100%;
  }
  
  .bar-graph-horizontal > div {
    float: left;
    margin-bottom: 8px;
    width: 100%;
  }
  
  .bar-graph-horizontal .year {
    float: left;
    margin-top: 18px;
    width: 50px;
  }
  
  .bar-graph-horizontal .bar {
    border-radius: 3px;
    height: 55px;
    float: left;
    overflow: hidden;
    position: relative;
    width: 0;
  }
  
  .bar-graph-one .bar::after {
    -webkit-animation: fade-in-text 2.2s 0.1s forwards;
    -moz-animation: fade-in-text 2.2s 0.1s forwards;
    animation: fade-in-text 2.2s 0.1s forwards;
    color: #fff;
    content: attr(data-percentage);
    font-weight: 700;
    position: absolute;
    right: 16px;
    top: 17px;
  }
  
  .bar-graph-one .bar-one .bar {
    background-color: #64b2d1;
    -webkit-animation: show-bar-one 1.2s 0.1s forwards;
    -moz-animation: show-bar-one 1.2s 0.1s forwards;
    animation: show-bar-one 1.2s 0.1s forwards;
  }
  
  .bar-graph-one .bar-two .bar {
    background-color: #5292ac;
    -webkit-animation: show-bar-two 1.2s 0.2s forwards;
    -moz-animation: show-bar-two 1.2s 0.2s forwards;
    animation: show-bar-two 1.2s 0.2s forwards;
  }
  
  .bar-graph-one .bar-three .bar {
    background-color: #407286;
    -webkit-animation: show-bar-three 1.2s 0.3s forwards;
    -moz-animation: show-bar-three 1.2s 0.3s forwards;
    animation: show-bar-three 1.2s 0.3s forwards;
  }
  
  .bar-graph-one .bar-four .bar {
    background-color: #2e515f;
    -webkit-animation: show-bar-four 1.2s 0.4s forwards;
    -moz-animation: show-bar-four 1.2s 0.4s forwards;
    animation: show-bar-four 1.2s 0.4s forwards;
  }
  
  /* Bar Graph Horizontal Animations */
  @-webkit-keyframes show-bar-one {
    0% {
      width: 0;
    }
    100% {
      width: var(--pb0);
    }
  }
  
  @-webkit-keyframes show-bar-two {
    0% {
      width: 0;
    }
    100% {
      width: var(--pb1);
    }
  }
  
  @-webkit-keyframes show-bar-three {
    0% {
      width: 0;
    }
    100% {
      width: var(--pb2);
    }
  }
  
  @-webkit-keyframes show-bar-four {
    0% {
      width: 0;
    }
    100% {
      width: var(--pb3);
    }
  }

  @-webkit-keyframes show-bar-five {
    0% {
      width: 0;
    }
    100% {
      width: var(--pb4);
    }
  }
  
  @-webkit-keyframes fade-in-text {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  

  section.saas_home_area.py-5.mb-5.bg-dark::after {
    background: url(/img/pricing-bg.png);
    height: 179vh !important;
    width: 52vw;
    content: '';
    position: absolute;
    right: -45px;
    top: -438px;
    object-fit: fill;
    z-index: 0;
    background-repeat: no-repeat;
    opacity: 0.2;
    -webkit-box-reflect: left;
    background-position: right;
}

section.pricing{
    padding-top: 65px;
    height:100vh;
}

section.pricing::after {
    background: url(/img/pricing-bg.png);
    height: 100vh !important;
    width: 52vw;
    content: '';
    position: absolute;
    right: -45px;
    top: 294px;
    object-fit: fill;
    z-index: 0;
    background-repeat: no-repeat;
    opacity: 0.2;
    -webkit-box-reflect: left;
    background-position: right;
}


 
section.knowledge::before {
    content: '';
    background: url(/blogs/knowledge-background.png);
    background-repeat: no-repeat;
    background-size: cover;
    /* display: block; */
    position: absolute;
    /* left: 0; */
    top: 258px;
    width: 100%;
    height: 100vh;
    background-position: 50% 0;
    /* opacity: 0.2; */
}

section.services::before {
    content: '';
    background: url(/images/what-we-do/services-bg.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 247px;
    width: 100%;
    height: 90vh;
    background-position: center;
    background-size: 100% auto;
}
#status i{    
    font-size: 20px;
    margin-top: 8px;
    color: #bfbfbf;
}

.encapsulation-list dd{
    display: inline-flex;
    width: 100%;
}

.encapsulation-list dd span{
    display: block;
    width: 100%;
}
 
.encapsulation-list dd::before{
    content: "";
    width: 60px !important;
    background-size: 38px 38px;
    width: 100px;
    display: inline-block;
    height: 40px;
    background-repeat: no-repeat;
    top:0px;
    
}

.banner_top.header {
    min-height: 572px !important;
}

.carousel-item{
    min-height: 550px !important;
}

.carousel-indicators{
    display: block;
    margin-bottom: -64px;
    text-align: right;
    width: 80%;
}

.carousel-indicators:not(.thumbnail) [data-bs-target]{
    height: 10px !important;
    width: 10px !important;
    border-radius: 50%;
    background-color: #000 !important;


}
.carousel-indicators .active {
    background: transparent;
    /* color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important; */
    border: 2px solid rgba(var(--bs-dark-rgb),var(--bs-text-opacity));
}

.carousel-control-prev i,
.carousel-control-next i{
    font-size: 30px; 
    /* color:white !important; */
    color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important;
    font-weight: bold;
}

.carousel-control-prev{
    left: -145px !important;
    display: block;
    font-size: 20px;
    color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important;
    /* color: white !important; */
}
.carousel-control-next{
    right: -145px !important;
    display: block;
    font-size: 20px;
    color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important;
    /* color: white !important; */
}


.polycarbonate::before{
    background-image: url(/images/landingpage/encapsulation/polycarbonate.png);
}

.tamper::before{
    background-image: url(/images/landingpage/encapsulation/tamper.png);
}

.uv::before{
    background-image: url(/images/landingpage/encapsulation/uv.png);
}

.resistant::before{
    background-image: url(/images/landingpage/encapsulation/resistant.png);
}

.lightweight::before{
    background-image: url(/images/landingpage/encapsulation/lightweight.png);
}


.stream-links a:hover{
    color: var(--main-color) !important;
}


.knowledge .card {
    border:none !important;
}

.knowledge .card:hover .card-body h5 {
    color: var(--main-color) !important;
}

#preview img{
    height: 500px !important;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 334px;
    height: 480px;
    /* border: 1px solid #f1f1f1; */
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    border-radius: 5px;
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    margin-bottom: 50px;
  }
  .flip-card:hover{
    cursor: pointer;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);

  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 20px;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
    display: inline-grid;
    align-content: space-evenly;
    display: grid;
    text-align: center;
  }

  .stars-wrap .flip-card-front {
    align-content: center !important;
  }

  .flip-card-front img{
    height: 200px;
    margin: 0px auto;
  }

.stars-wrap .flip-card-front img {
    height: 260px !important;
    margin: 0px auto;
}
  
  /* Style the back side */
  .flip-card-back {
    background-color: white;
    transform: rotateY(180deg);
  }

.label-scroller > a{
    height: 40px;
    margin: 15% 0px;
    border-radius: 50%;
    background: var(--bg-dark) !important;
    color: white !important;
    border: 1px solid white;
    width: 40px;
    padding: 5px 12px;
    z-index: 1;
}


.gallery-img:hover{
    position: relative;
    height: 250px !important;
    width: 300px;
    transition: width 0.2s, height 0.2s;
    top: -30px;
    left: -16px;
    box-shadow: 0px 6px 46px var(--main-color);
    /* transition-delay: 0.1s; */
    /* border:10px solid #222 !important; */
}

.label-list .col:hover img,
.gallery-list .col:hover img{
    -webkit-filter: drop-shadow(-2px 3px 20px rgba(255,140,0, 0.9));
    filter: drop-shadow(-2px 3px 20px rgba(255,140,0, 0.9));
}

.blog-content{
    min-height: 330px !important;
}

.blog-content > div > :nth-child(2) {
    position: absolute;
    width: 100% !important;
    background-color: #555c64 !important;
    border-radius: 0px !important;
    min-height: 370px;
    max-width: 284px !important;
    height: 100%;
    min-width: 284px !important;
}

.blog-content > div > video:hover ,
.blog-content > div > iframe:hover ,
.blog-content > div > img:hover,
.blog-content > div > :nth-child(2):hover {
    /* object-fit: contain !important; */
    /* transition: object-fit 1s; */
    box-shadow: 0px 6px 35px var(--main-color) !important;
    

}

.knowledge h6{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-wrap:hover img{
    display: none;
}


.video-wrap:hover video{
    display: block !important;
}

.video-wrap iframe,
.video-wrap + iframe{
    min-width: 267px !important;
    max-width: 267px !important;
    height: 100%;
}


.title_heading {
    border-bottom: 1px solid #DCDCDC;
    margin-bottom: 40px;
    text-align: left;
}
.title_heading h2{ display:inline-block; position:relative; margin-bottom:30px; font-size:36px; font-weight: 500; color: var(--bg-dark) !important;}

.title_heading h2:after {
    position: absolute;
    left: 0px;
    bottom: -34px;
    width: 100%;
    height: 7px;
    background: #009BD7;
    content: " ";
}

/*-- Subscribe --*/
.subscribe{background: #042f53 url(/img/subscribe-banner.jpg) top center; background-size:cover; padding:80px 0px;}
.subscribe h4{ font-size:30px; font-weight:bold; color:#fff; margin-bottom:10px;}
.subscribe p{ font-size:16px; color:#fff;}
.subscribe_form{ float:right; max-width:520px; width:100%; border-radius:10px; padding:6px 110px 6px 6px; position:relative;  }
.subscribe_form .form-control{  background:none;  }
.subscribe_form  .btn-subscribe{border-radius:10px;position:absolute; right:6px; top:6px; font-size:14px; background:#FFEE00; color:#000; line-height:22px;}
.subscribe_form  .btn-subscribe:hover{ background:#016d98;}
/*--// Subscribe --*/


/*-- footer --*/
.w-90 {
    width: 90%;
}
footer{
	/* background: #fff url(/img/subscribe-banner.jpg) top center; background-size:cover; padding:80px 0 30px; */
	/* background-blend-mode: hard-light; */
	padding:80px 0 30px;
	position: relative;
}

footer:before{
    content: "";
    width: 100%;
    height: 50vh;
    background:  url(/img/subscribe-banner.jpg) top center;
    background-size:cover;
    top: 0;
    position: absolute;
    z-index: -1;
    opacity: 0.2;
}

section {
    scroll-behavior: smooth;
}

 

.footer-grids h4 {
     font-size: 18px;  margin-bottom:40px;  font-weight:bold;
}


.footer-grids p,.footer-grids p a{
    font-size: 14px;  c  font-weight: normal;
}
.footer-grids ul.list{ padding-left:15px;}
.footer-grids ul.list,.footer-grids ul.list li{ list-style-type:disc; }
.footer-grids ul.list li{ padding-left:5px; padding-bottom:5px;}
.footer-grids ul li a {
    font-size: 14px;
    /* color: #AEC0C8; */
	font-weight: normal;
    letter-spacing: 0px; line-height:18px; padding:9px 0; display:inline-block;
}
.footer-grids ul li {
	padding:0; 
}
.footer-grids ul li a:hover {color:#0080ff;}
.copyright {
     padding:30px 0 0 0; margin-top:30px;   font-size:14px; text-align:center;
}
.footer_about{  margin:0; }
.social_footer{ margin:0px; padding:0px;display:block; text-align:left;}
.social_footer li{display:inline-block; margin:0px; padding:0px;}
.social_footer li a{
	font-size: 14px !important;
	display: inline-block;
	/* color: #fff !important; */
	background: none;
	text-align: center;
	margin-right: 5px;
	height: 34px;
	width: 34px;
	line-height: 14px !important;
	border-radius: 17px; border:2px solid #fff;	
}
.social_footer li a:hover{
    color: white !important;
    background-color: var(--main-color);
    border:2px solid var(--main-color);
}
.footer_subscribe{ position:relative; width:100%; padding-right:90px; margin-top:10px;}
.footer_subscribe .form-control{ border-radius:0px;}
.footer_subscribe .btn-subscribe{ border-radius:0px;position:absolute; right:0px; top:0px; font-size:14px; background:#2680EB; color:#fff; line-height:24px;}
.footer_subscribe .btn-subscribe:hover{ background:#016d98;}
.footer_payment{ margin-top:80px; display:block; text-align:right;}
/*-- //footer --*/

.addcart{ background: var(--main-color) ; color:#fff; font-size:14px;}
.addcart:hover{ background:var(--main-color) ; color:#fff;}

#myBtn {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

.top-notifs p{
    line-height: 20px;
    padding: 5px 0px;
    text-align: center;
    display: inline-block;
    font-size: 15px;
    margin: 0;
}

#menu-mobile{
    width: 100%;
    border: 1px solid #444;
    border-top: 0px;
}

#cssmenu{width:100%;margin-top:0;}
#cssmenu ul{width:100%;  border:1px solid #444; border-top:0px;}
#cssmenu ul li{width:100%;border-top:1px solid #444}
#cssmenu ul li:hover{background:#fff;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0; padding:15px;}
#cssmenu > ul > li{float:none}
#cssmenu > ul > li:first-child > a {
    padding-left: 15px;
}
#cssmenu ul ul{border:0px solid #444;}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:#fff !important;}
#cssmenu ul ul li:hover{background:#fff !important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#001F2C; background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#0080FF;}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:50px;color:#ddd;font-size:12px;font-weight:700}
.button{width:55px;height:46px;position:absolute;right:0;top:20px;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:22px;right:20px;display:block;height:8px;width:20px;border-top:2px solid #001F2C;border-bottom:2px solid #001F2C;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#001F2C;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#001F2C;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#001F2C;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
/* #cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:45px;width:45px;cursor:pointer} */
/* #cssmenu .submenu-button.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button{height:34px;width:34px}
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#fff}
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none} */
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}

#cssmenu > ul > li:first-child > a {
    padding-left: 15px;
}

#cssmenu ul li a {
    width: 100%;
    border-bottom: 0;
    padding: 15px;
    display: block;
    color: var(--bg-dark);
}

#knowledge-menu:hover  .dropdown-menu {
    display: block;
    margin-top: 0;  
}


/* MODAL */

.acc-modal .modal-dialog {
    width: 750px;
    max-width: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) !important;
}


form.login-form {
    max-width: 460px;
    margin: auto;
    margin-top: 70px;
    margin-bottom: 120px;
}

.error, #regresponse, #loginresponse, #frgtresponse {
    font-size: 12px;
    color: #f00;
    font-weight: bold;
}

.login-form h3 {
    margin-bottom: 30px;
}

form.login-form input {
    font-size: 12px;
    border: none;
    background-color: #f9f9fb;
    padding: 9px 12px;
}


form.login-form button {
    font-size: 13px;
}
 
.full-width {
    width: 100%;
}

.form-group {
    margin-bottom: 1rem;
}


.signup-link {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%);
    font-size: 14px;
}

form.login-form.signup {
    margin-top: 25px;
    margin-bottom: 50px;
}

.toast{
    position: fixed;
    top: 19px;
    right: 12px;
    z-index: 9999;
}

 

.p-list {
    position: relative;
}

.p-list:hover{
    color: var(--main-color) !important;
    font-weight:600;
}

 

.p-list.collapsed:before {
    content: "\f054";
    height: 30px;
    color: var(--main-color);
    position: absolute;
    right: 0;
    font-family: FontAwesome;
}

 


.p-list:not(.collapsed):before {
    content: "\f078";
    height: 30px;
    color: var(--main-color);
    position: absolute;
    right: 0;
    font-family: FontAwesome;
}

/* SELLER */
.sidemenu{
    border-radius: 0px !important;
}

.sidemenu button:focus,
.sidemenu button:active,
.sidemenu button:hover{
    background-color: var(--main-color);
    background: var(--main-color);
    color:#fff;

}

/* .btn-outline-primary.active,
.btn-primary{
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
} */

.c-blue{
    background-color:rgba(0,93,255,0.1);
}

.i-blue{
    background-color:rgba(0,93,255,1);
    border-color:rgba(0,93,255,1);
    color:#fff;
}

.i-blue2{
    background-color:rgba(0,93,255,0.1);
    border-color:rgba(0,93,255,0.1);
    color:rgba(0,93,255,1);
}

.c-pink{
    background-color:rgba(255,0,221,0.1);
}

.i-pink{
    background-color:rgba(255,0,221,1);
    border-color:rgba(255,0,221,1);
    color:#fff;
}

.c-green{
    background-color:rgba(0,206,21,0.1);
}

.i-green{
    background-color:rgba(0,206,21,1);
    border-color:rgba(0,206,21,1);
    color:#fff;
}

.i-green2{
    background-color:rgba(0,206,21,0.1);
    border-color:rgba(0,206,21,0.1);
    color:rgba(0,206,21,1);
}

.i-pink2{
    background-color:rgba(255,0,221,0.1);
    border-color:rgba(255,0,221,0.1);
    color:rgba(255,0,221,1);
}


.sidemenu .btn.active{
    background-color: var(--main-color) !important;
}

.btn-primary,
.bg-primary,
.btn-check:active+.btn, .btn-check:checked+.btn, .btn.active, .btn.show, .btn:active{
    background-color: var(--main-color2) !important;
    border-color: var(--main-color2) !important;
    color: #fff !important;

}

.text-primary{
    color: var(--main-color) !important;
}

.btn-outline-primary{
    border-color: var(--main-color) !important;
    color: var(--main-color) !important;
}

.btn-outline-primary:hover{
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: #fff !important;
}


::-webkit-scrollbar { 
  width: 0px; 
  scrollbar-width: thin; 
} 

/* CAROUSEL */
  /* Make the image fully responsive */
  
  .product .carousel-inner img {
    width: 700px;
    height: 60vh;
    object-fit: contain;
  }
  .product .carousel-indicators{
    display:inline-block;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position:static;
    direction: rtl;
  }
  @media screen and (max-width:992px){
    .product .carousel-indicators{
      display: inline-flex;
      direction: inherit;
      height: auto;
      width: 100%;
      max-width:800px;
      overflow-x: auto;
      position: relative;
      margin-left: 0;
      margin-right: 0;
      overflow-y: hidden;
      justify-content: normal;
      margin-bottom:20px;
    }
    .product .carousel-inner{
      margin-left:0!important;
    }
    .product .carousel-inner img{
      width:100%;
    }
  }
  /* width */
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
  .product .item{
    margin-bottom:10px;
    margin-left: 10px;
    cursor:pointer;
  }
  .product .item.active img{
    border:1px solid red;
    opacity:1;
    height: 80px;
    width: 80px;
    object-fit: cover;
  }
  .product .item img{
    border:1px solid transparent;
    opacity:0.5;
    transition:0.5s;
    height: 80px;
    width: 80px;
    object-fit: cover;
  }
  .product .item:hover img{
    border:1px solid red;
    opacity:1;
  }
    
 
  @media screen and (min-width: 1440px) and (max-width: 1800px) {
    .product .carousel-inner{
      margin-left: 0px;
      
    }
    section.landing-page:before {
        opacity: 0.3 !important;
    }
  }
  @media screen and (min-width: 1200px) and (max-width: 1439px) {
    section.landing-page:before {
        opacity: 0.3 !important;
    }

    .product .carousel-inner{
      margin-left: -20px;
    }

  }
  @media screen and (min-width: 880px) and (max-width: 1199px) {
    .product .carousel-inner{
      margin-left: 20px;
    }

    .heading-text h1{
        font-size: 69px !important;
    }
    section.landing-page:before {
        opacity: 0.2 !important;
    }
     
  }
  @media screen and (min-width: 576px) and (max-width: 879px) {
    .product .carousel-inner{
      margin-left: 50px;
    }
    
  }
  
  
  
  .product .vert .carousel-item-next.carousel-item-left,
  .product .vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  
  .product .vert .carousel-item-next,
  .product .vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100% 0);
  }
  
  .product .vert .carousel-item-prev,
  .product .vert .active.carousel-item-left {
    -webkit-transform: translate3d(0,-100%, 0);
    transform: translate3d(0,-100%, 0);
  }
  

  .zoomable__img {
    transform-origin: var(--zoom-pos-x, 0%) var(--zoom-pos-y, 0%);
    transition: transform 0.15s linear;
  }
  .zoomable--zoomed .zoomable__img {
    cursor: zoom-in;
    transform: scale(var(--zoom, 2));
  }

  .line{
    position: relative;
  }

  .line::before{
    content:'';
    position: absolute; width: 97%; margin: 57px auto; z-index: -1;
    border:1px solid #eee;
  }

  .address .col,
  .payment .col{
    cursor: pointer;
  }

  .address input[type="radio"]:checked + div,
  .payment input[type="radio"]:checked + div{
    
        position:relative;

    }
    .address input[type="radio"]:checked + div:before,
    .payment input[type="radio"]:checked + div:before{
        content:"Default";
        position:absolute;
        top: -8px;
        right: 5px;
        font-size:10px;
        background-color: var(--main-color);
        padding:0px 10px;
        color:white;
        border-radius:10px;
        line-height:15px; 
    }

    .payment input[type="radio"]:checked + div:before{
        content:"Selected" !important;

    }

    .shelf-container{
        height: 640px;
    }

    .shelf-container:before {
        content: "";
        background: url(/img/Shelf.png) 100% 100%;
        background-size: contain;
        height: 597px;
        display: block;
        width: 100%;
        background-repeat: no-repeat;
        position: absolute;
    }

    .shelf-container img{
        box-shadow: 3px 10px 15px -2px #2b2b2b;
    }

    .shelf-thumbnails .item{
        position: relative;
        display: inline-block;
    }

    .shelf-thumbnails .item:before{
        content: "";
        background: url(/img/Shelf.png) 35%;
        background-size: contain;
        height: 150px;
        display: block;
        width: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left:15px;
    }

    .shelf-thumbnails img{
        box-shadow: 3px 10px 15px -2px #2b2b2b;
        height:30px;
    }

    /* .horizontal-row > .row { 
        overflow-x: auto; 
        white-space: nowrap; 
    } 
      
    .horizontal-row > .row > div { 
        display: inline-block; 
        float: none; 
    }  */


    .checkout-tabs .tab{
        display: none;
    }
    .checkout-tabs .tab.active{
        display: block !important;
    }

    .checkout-icons li.selected{
        color: var(--main-color) !important;
    }

    /*******/
    .contactus{ padding:0 0 100px 0;}
    .contact_map{ width:100%; height:auto;}
    .contact_box{ box-shadow: 0 10px 40px rgb(200 200 200 / 100%); width:100%; max-width: 1140px; min-height:200px; padding:0px; margin: -200px auto 0; position:relative; z-index:99; background:#fff;}
    .contact_box .left_section{ position:absolute; width:360px; height:100%; background:#019bd9; padding:60px 50px; color:#fff;}
    .contact_box .right_section{ margin-left:360px; padding:60px 50px; color:#252525;}
    .contact_box h4{ font-size:29px; margin-bottom:50px;}
    .right_section label{ font-size:14px; color:#6e6e6e; display:block;}
    .right_section input{ border:0px; padding:0px 5px;font-size:17px; color:#191919; border-bottom:1px solid #ebebeb; width:100%; margin-bottom:20px; }
    .right_section textarea{ border:0px; padding:0px 5px;font-size:17px; color:#191919; border-bottom:1px solid #ebebeb; width:90%; margin-bottom:20px; height:50px; }
    .social_contact{ text-align:left; margin-top:40px;}
    .social_contact a{ color:#fff; font-size:17px; display:inline-block; margin:0 10px;}
    .contact_box .left_section p { font-size: 17px; color: #fff; font-weight: normal; line-height: 22px; padding-left: 30px; position: relative;   letter-spacing: 0px; margin-bottom: 30px;}
    .contact_box .left_section p.c_address:before{ position:absolute; content:"\f041";left:0px; font-size:18px; color:#fff; font-family:FontAwesome;}
    .contact_box .left_section p.c_phone:before{ position:absolute; content:"\f095";left:0px; font-size:18px; color:#fff; font-family:FontAwesome;}
    .contact_box .left_section p.c_email:before{ position:absolute; content:"\f1fa";left:0px; font-size:18px; color:#fff; font-family:FontAwesome;}

    .latest-articles b{
        width: 325px;
        font-size: 0.85em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content-articles img{
        width: -webkit-fill-available;
    }



    .circle {
        padding: 13px 20px;
        border-radius: 50%;
        background-color: var(--main-color);
        color: #fff;
        max-height: 50px;
        z-index: 2;
      }
      
      .how-it-works.row .col-2 {
        align-self: stretch;
      }
      .how-it-works.row .col-2::after {
        content: "";
        position: absolute;
        /* border-left: 3px solid #ED8D8D; */
        z-index: 1;
      }
      .how-it-works.row .col-2.bottom::after {
        height: 50%;
        left: 50%;
        top: 50%;
      }
      .how-it-works.row .col-2.full::after {
        height: 100%;
        left: calc(50% - 3px);
      }
      .how-it-works.row .col-2.top::after {
        height: 50%;
        left: 50%;
        top: 0;
      }
      
      
      .timeline div {
        padding: 0;
        height: 40px;
      }
      .timeline hr {
        border-top: 3px solid var(--main-color);
        margin: 0;
        top: 17px;
        position: relative;
      }
      .timeline .col-2 {
        display: flex;
        overflow: hidden;
      }
      .timeline .corner {
        border: 3px solid var(--main-color);
        width: 100%;
        position: relative;
        border-radius: 15px;
      }
      .timeline .top-right {
        left: 50%;
        top: -50%;
      }
      .timeline .left-bottom {
        left: -50%;
        top: calc(50% - 3px);
      }
      .timeline .top-left {
        left: -50%;
        top: -50%;
      }
      .timeline .right-bottom {
        left: 50%;
        top: calc(50% - 3px);
      }
      

      .timeline-arrow{
        margin-block: auto;
        position: absolute;
        bottom: -3px;
        right: 45%;
        color: #ff1f49;
      }

      .timeline-arrow.left{
        right: 43%;
      }



      .py-8{padding-bottom:4.5rem!important;padding-top:4.5rem!important}@media(min-width:576px){.py-sm-8{padding-bottom:4.5rem!important;padding-top:4.5rem!important}}@media(min-width:768px){.py-md-8{padding-bottom:4.5rem!important;padding-top:4.5rem!important}}@media(min-width:992px){.py-lg-8{padding-bottom:4.5rem!important;padding-top:4.5rem!important}}@media(min-width:1200px){.py-xl-8{padding-bottom:4.5rem!important;padding-top:4.5rem!important}}@media(min-width:1400px){.py-xxl-8{padding-bottom:4.5rem!important;padding-top:4.5rem!important}}.bsb-timeline-1{--bsb-tl-color:var(--bs-primary-bg-subtle);--bsb-tl-circle-color:var(--bs-primary);--bsb-tl-circle-size:18px;--bsb-tl-circle-offset:9px}.bsb-timeline-1 .timeline{list-style:none;margin:0;padding:0;position:relative}.bsb-timeline-1 .timeline:after{background-color:var(--bsb-tl-color);bottom:0;content:"";left:0;margin-left:-1px;position:absolute;top:0;width:2px}.bsb-timeline-1 .timeline>.timeline-item{margin:0;padding:0;position:relative}.bsb-timeline-1 .timeline>.timeline-item:before{background-color:var(--bsb-tl-circle-color);border-radius:50%;content:"";height:var(--bsb-tl-circle-size);left:calc(var(--bsb-tl-circle-offset)*-1);position:absolute;top:0;width:var(--bsb-tl-circle-size);z-index:1}.bsb-timeline-1 .timeline>.timeline-item .timeline-body{margin:0;padding:0;position:relative}.bsb-timeline-1 .timeline>.timeline-item .timeline-content{padding:0 0 2.5rem 2.5rem}@media(min-width:768px){.bsb-timeline-1 .timeline>.timeline-item .timeline-content{padding-bottom:3rem}}.bsb-timeline-1 .timeline>.timeline-item:last-child .timeline-content{padding-bottom:0}






      /* GALLERY */

      .gallery_1 * {
        font-family: Nunito, sans-serif;
      }
      
      .gallery_1 .text-blk {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        line-height: 25px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
      }
      
      .gallery_1 img {
        object-fit: cover;
      }
      
      .gallery_1 .responsive-container-block {
        min-height: 75px;
        height: fit-content;
        width: 100%;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        display: flex;
        flex-wrap: wrap;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        justify-content: flex-start;
      }
      
      .gallery_1 .responsive-container-block.bigContainer {
        padding-top: 10px;
        padding-right: 30px;
        padding-bottom: 10px;
        padding-left: 30px;
      }
      
      .gallery_1 .responsive-container-block.Container {
        max-width: 1320px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        margin-top: 50px;
        margin-right: auto;
        margin-bottom: 50px;
        margin-left: auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      
      .gallery_1 .text-blk.heading {
        font-size: 36px;
        line-height: 45px;
        font-weight: 600;
        color: #242424;
        text-align: center;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 20px;
        margin-left: 0px;
      }
      
      .gallery_1 .text-blk.subHeading {
        text-align: center;
        font-size: 20px;
        line-height: 30px;
        max-width: 750px;
        color: #a3a3a3;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 50px;
        margin-left: 0px;
      }
      
      .gallery_1 .responsive-container-block.imgContainer {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        min-height: auto;
        height: 720px;
        position: relative;
      }
      
      .gallery_1 .overlay {
        position: fixed;
        overflow-y: scroll;
        background-image: initial;
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat-x: initial;
        background-repeat-y: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: rgba(71, 69, 69, 0.7);
        height: 100%;
        width: 100%;
        max-height: 100%;
        top: 0px;
        left: 0px;
        z-index: 100;
        display: none;
        padding-top: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
      }
      
      .gallery_1 .overlay-inner {
        top: 57%;
        right: 0px;
        bottom: 0px;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: initial;
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat-x: initial;
        background-repeat-y: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: white;
        max-width: 700px;
        width: 100%;
        padding-top: 35px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        position: relative;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        opacity: 1;
      }
      
      .gallery_1 .close {
        position: absolute;
        top: 9px;
        right: 15px;
        background-image: none;
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat-x: initial;
        background-repeat-y: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: initial;
        outline-color: initial;
        outline-style: initial;
        outline-width: 0px;
        color: #474545;
        border-top-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-left-width: 0px;
        border-top-style: initial;
        border-right-style: initial;
        border-bottom-style: initial;
        border-left-style: initial;
        border-top-color: initial;
        border-right-color: initial;
        border-bottom-color: initial;
        border-left-color: initial;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
      
      .gallery_1 .overlay-inner img {
        height: auto;
        width: 100%;
        transform: none;
      }
      
      .gallery_1 .close:hover {
        cursor: pointer;
      }
      
      .gallery_1 .project {
        position: absolute;
        width: 39.8%;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
      }
      
      .gallery_1 .btn-box {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
      }
      
      .gallery_1 .project:hover .btn-box {
        display: block;
      }
      
      .gallery_1 .btn {
        cursor: pointer;
      }
      
      .gallery_1 .smallImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .gallery_1 .project.project1 {
        width: 39.8%;
        height: 66.67%;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
      }
      
      .gallery_1 .project.project2 {
        bottom: 0px;
        top: auto;
        right: auto;
        width: 39.75%;
        height: 32.6%;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
      }
      
      .gallery_1 .project.project3 {
        left: 40.2%;
        right: auto;
        bottom: auto;
        width: 19.4%;
        height: 32.98%;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
      }
      
      .gallery_1 .project.project4 {
        left: 40.2%;
        top: 33.7%;
        width: 19.5%;
        height: 32.98%;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
      }
      
      .gallery_1 .project.project5 {
        right: 0px;
        left: auto;
        bottom: auto;
        width: 39.8%;
        height: 32.6%;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
      }
      
      .gallery_1 .project.project6 {
        bottom: 0px;
        top: auto;
        left: auto;
        right: 0px;
        width: 39.8%;
        height: 66.67%;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
      }

        .gallery_1 .project.project7 {
            left: 40.2%;
            top: 67.3%;
            width: 19.5%;
            height: 32.91%;
            padding-top: 0px;
            padding-right: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
        }
      
      @media (max-width: 1024px) {
        .gallery_1 .responsive-container-block.imgContainer {
          height: 600px;
        }
      
        .gallery_1 .text-blk.subHeading {
          font-size: 18px;
          line-height: 27px;
        }
      }
      
      @media (max-width: 768px) {
        .gallery_1 .project.project5 {
          top: 520px;
          width: 100%;
          left: 0px;
          right: auto;
          bottom: auto;
          height: 200px;
        }
      
        .gallery_1 .responsive-container-block.imgContainer {
          height: 930px;
        }
      
        .gallery_1 .project.project1 {
          width: 64%;
          height: 300px;
        }
      
        .gallery_1 .project.project3 {
          left: auto;
          width: 35%;
          height: 145px;
          right: 0px;
        }
      
        .gallery_1 .project.project4 {
          left: auto;
          width: 35%;
          height: 145px;
          top: 155px;
          right: 0px;
        }
      
        .gallery_1 .project.project6 {
          height: 200px;
          width: 100%;
        }
      
        .gallery_1 .project.project2 {
          width: 100%;
          top: 310px;
          height: 200px;
        }
      
        .gallery_1 .project {
          width: 100%;
          padding-top: 10px;
          padding-right: 0px;
          padding-bottom: 10px;
          padding-left: 0px;
        }
      
        .gallery_1 .overlay-inner {
          width: 90%;
        }
      
        .gallery_1 .text-blk.subHeading {
          line-height: 25px;
          font-size: 17px;
          max-width: 600px;
        }
      
        .gallery_1 .text-blk.heading {
          font-size: 30px;
          line-height: 40px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 15px;
          margin-left: 0px;
        }
      }
      
      @media (max-width: 500px) {
        .gallery_1 .responsive-container-block.imgContainer {
          height: 890px;
        }
      
        .gallery_1 .responsive-container-block.bigContainer {
          padding-top: 10px;
          padding-right: 20px;
          padding-bottom: 10px;
          padding-left: 20px;
        }
      
        .gallery_1 .text-blk.heading {
          font-size: 30px;
          line-height: 35px;
        }
      
        .gallery_1 .text-blk.subHeading {
          font-size: 16px;
          line-height: 22px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 30px;
          margin-left: 0px;
        }
      
        .gallery_1 .project.project1 {
          height: 250px;
        }
      
        .gallery_1 .project.project3 {
          height: 123px;
        }
      
        .gallery_1 .project.project4 {
          height: 123px;
          top: 127px;
        }
      
        .gallery_1 .project.project2 {
          top: 260px;
        }
      
        .gallery_1 .project.project5 {
          top: 470px;
        }
      
        .gallery_1 .project.project6 {
          top: 680px;
        }
      }

      .project .projectlabel{
        opacity: 0;
      }

      .project:hover .projectlabel{
        opacity: 1;
        bottom: 0;
        background: var(--main-color);
        color: white;
        padding: 5px 10px;
        font-size: 12px;
      }