.list-group-numbered>.list-group-item::before {
    content: counters(section, ".") ". ";
    counter-increment: section;
}
.modal {
  display: flex; /*Hidden by default */
  visibility: hidden;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
  justify-content: center;
  align-items: center;
  transition: opacity .5s ease-in-out;
  opacity: 0;
}
.modal-container{
  height: 80%;	
	width: 95%;
	position: relative;
	top: 10%;

}
.modal-content {
  background-color: white;
  overflow-y: auto;
  height: 80%;
  border-radius: 0 0 0 10px;


}

.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: static;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

button {
  border: none;
  color: white;
  padding: 5px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
margin: 0;
}


button:hover {
  background-color: rgba (244,244,244,0.5);
}
#donateBtn {
background-color: rgba (244,244,244,0.5); 
width: 100px;
height: 100px;

}
#donateBtn img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
#donateBtn img:hover {
filter: grayscale(0);
transition: filter 0.3s ease;
}
.donation-modal-header {
padding: 10px 20px;	
display: flex;
justify-content: space-between;
border-bottom: 1px solid;
background-color: white;
border-radius: 10px 10px 0 0;
}
.donation-modal-body {
padding: 30px 20px;

}

.modal-title,
.close-modal {
display: flex;
align-items: center;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 20px;
  color: var(--bs-list-group-color);
  text-decoration: none;
  background-color: var(--bs-list-group-bg);
  border: 1px solid #dee2e6;
}
.list-group-numbered {
  list-style-type: none;
  counter-reset: section;
}
.list-group {

  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--bs-list-group-border-radius);
}



.donate-method-section {
	display: flex;
	gap: 15px;
	justify-content: center;
	padding: 30px;
	flex-wrap: wrap;
}




















.sub-header .overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 300px;

  opacity: .5;

  background-color: #000000;

}

.align-items-start {

  -ms-flex-align: start !important;

  align-items: flex-start !important;

}

.sub-header-pretitle {
	color: #fff;
}




























































.content-wrap {

    padding: 60px 0;

}



.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}

.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}

@media (min-width: 992px) {

  .col-lg-3 {

    -ms-flex: 0 0 25%;

    flex: 0 0 25%;

    max-width: 25%;

  }

}



.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {

  position: relative;

  width: 100%;

  padding-right: 15px;

  padding-left: 15px;

}













.sub-header {

	background-color: white;

	width: 100%;

	top: 0;

	background: url(../img/mid-section.jpg) center no-repeat;

	background-size: cover;

	height: 300px;

	display: flex;
	padding: 150px 0 30px 0;
}

.sub-header-title {
	
	font-family: "muli-light", sans-serif;

	color: #fff;

	font-size: 40px;

	line-height: 60px;

	font-weight: 600;

	letter-spacing: 0px;

	text-shadow: 0px 0px 5px rgba(0,0,0,0.5);

	margin-bottom: 0;

	width: 100%;

	float: left;

	/* margin-top: 100px; */

	/* position: absolute; */

}

.column-container {

	display: flex;

	flex-direction: column;

	margin-bottom: 10px;

}

.row-container {

	display: flex;

	flex-direction: row;

	gap: 10px;

}

.form-heading {

	font-family: 'montserrat';

	font-weight: 600;

	font-size: 30px;

	margin-bottom: 15px;	

}

.input-label {

	font-family: 'montserrat';

	font-weight: 400;

	font-size: 14px;		

}

.input-fields {

	display: flex;

	flex-direction: column;

	width: 100%;

}





#yellow-ribbon {

	height: 50px;

	background-color: rgba(255, 185, 48, 1);

}

#submenu-section {



	margin: 10px 0;

	display: flex;

	align-items: center;



}

#submenu {

	/* font-size: 14px; */
	color: white!important;
}
#submenu a {

	/* font-size: 14px; */
	color: white;
}


#submenu a:hover {

	color: #767676;

}



@media (min-width: 992px) {
    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
	.col-lg-4 {
		-ms-flex:0 0 33.333333%;
		flex:0 0 33.333333%;
		max-width:33.333333%}	

}

.single-menu h4 {
    color: white;
    font-family: 'montserrat';
    font-weight: 200;
    font-size: 20px;
    font-weight: 600;
}

.single-menu p {

    color: white;

    font-family: 'montserrat';

    font-size: 14px;

}

.single-menu img {

	max-width: none;
  height: 75px;
}

.single-menu {

    display: flex;

    /* background-color: rgba(255, 255, 255, 0.7); */

    /* box-shadow: 0px 10px 30px 0px rgb(182 136 52 / 20%); */

    border-radius: 0px;

    padding: 10px 10px;

    margin-bottom: 30px;

    transition: all 0.3s ease 0s;

    position: relative;

    gap: 10px;

}



#features {

    /* background: url(../img/mid-section.jpg); */

    background-attachment: fixed;

    background-size: cover;

    background-repeat: no-repeat;

}

.features-btn {

border-style: solid;

  border-radius: 10px 10px 10px 10px;

  color: #FFFFFF;

  border-color: rgba(255,255,255,0.65);

  background-color: rgba(255,255,255,0.25);

  width: 100%;

  box-sizing: border-box;

  text-align: center;

}



#loadMore:before {

	padding-right: 10px;

  content: '\e8b1';

	

}

#features .section-header:before,

#features .section-header {

	color: #fff;

	position: relative;

}





.hero-buttons {

	width: 100%;

	display: flex;

	gap: 20px;

	flex-wrap: wrap;

	align-content: center;

	justify-content: left;	

}	







#home .animated {

  animation: up-down 2s ease-in-out infinite alternate-reverse both!important;

}



#home .logo img {

  padding: 0;

  margin: 0;

  max-height: 50px;

  content: url(../../assets/img/drizzlero-logo-small.png); 

}

























.clear {

    clear: both;

    display: block;

    font-size: 0;

    height: 0;

    line-height: 0;

    width: 100%;

    overflow: hidden;

}



.title-center {

    text-align: center;

}

.center .heading-block:after, .heading-block.center:after, .heading-block.title-center:after {

    margin: 30px auto 0;

}

.heading-block {

    margin-bottom: 50px;

	background: url(../img/fancy_heading_hr.png) bottom center no-repeat;	

}

#features .heading-block {

    margin-bottom: 50px;

	/* background: url(../img/fancy_heading_hr_wh.png) bottom center no-repeat;	 */

}

.heading-block h2 {

    font-size: 42px;

	font-family: 'montserrat';

	font-weight: 500;

}

.heading-block span {

    font-size: 14px;

	font-family: 'montserrat';

	font-weight: 400;

	font-style: italic;

	color: #000;

}

.section-header {

	color: #ff9600;

	padding-bottom: 30px;

	justify-content: center;

    display: flex;	

}

.img-section-header {

    /* background: url(../../assets/img/section-bg.png) center top no-repeat; */

	/*margin-top: 40px;*/

}



/* ------------------------------------------------------------------- 

 * 

 * What's New 

 *

 * ------------------------------------------------------------------- */

.col_five_sixth, .col_four_fifth, .col_full, .col_half, .col_one_fifth, .col_one_fourth, .col_one_sixth, .col_one_third, .col_three_fifth, .col_three_fourth, .col_two_fifth, .col_two_third, .postcontent, .sidebar {

    display: block;

    position: relative;

    margin-right: 4%;

    /*margin-bottom: 50px;*/

  	margin-bottom: 20px;

    float: left;

}



.col_one_third {

    width: 30.63%;

}

@media (max-width: 768px) {

    .news-row-container {

        flex-direction: column;

        gap: 0px;

    }

}



.nobottommargin {

    margin-bottom: 0!important;

}



.text-justify {

    text-align: justify;

}

.container, .container-fluid {

    padding-left: 15px;

    padding-right: 15px;

}

.col_last {

    margin-right: 0!important;

    clear: right;

}





@media (max-width: 767px) {

.col_five_sixth, .col_four_fifth, .col_full, .col_half, .col_one_fifth, .col_one_fourth, .col_one_sixth, .col_one_third, .col_three_fifth, .col_three_fourth, .col_two_fifth, .col_two_third, .postcontent, .postcontent.bothsidebar, .sidebar {

    width: 100%;

    margin-right: 0;

    float: none;

    margin-bottom: 50px!important;

	}

}



.feature-box:first-child {

    margin-top: 0;

}

.feature-box {

    position: relative;

    /*margin-top: 20px;

    padding: 0 0 0 80px;*/

	padding: 10px 10px 10px 10px;

  /*box-sizing: content-box;

  padding: 30px 30px 30px 60px;

  margin: 30px 15px;*/

  min-height: 100px;

  height: 120px;

  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.08);

  background: #fff;

  border-radius: 20px 20px 20px 20px;

}



.feature-box .fbox-icon {

    display: block;

    position: absolute;

    width: 64px;

    height: 64px;

    top: 0;

    left: 0;

}



.feature-box h3 {

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 0;

    color: #000;

  	text-align: center;

}

.feature-box h3, .promo-uppercase {

    text-transform: uppercase;

}



#content p {

    line-height: 1.8;

	font-size: 14px;

}

.feature-box p {

    margin: 8px 0 0;

    color: #333;

  	text-align: center;

}

.updates h2 {

	font-size: 28px;

    margin: 0px 0 20px 0;

	font-family: 'montserrat';

	font-weight: 600;	

}

.updates p {

	font-size: 14px;

    margin: 8px 0 15px 0;

    color: #000;

}

.updates strong {

    font-size: 16px;	

    margin: 8px 0 0;

    color: #000;

}



#content, #content .container, #portfolio, #portfolio-filter, #portfolio-filter li, #portfolio-filter li a, .content-wrap, .portfolio-item {

    position: relative;

}



	

.icofont-file-document {

	color: gray;

}



.features-learn-more {

	display: flex;

	justify-content: center;

}



.button.btn-more {

	display: inline-block;

    /*border-radius: 3px;*/

    border-bottom: 3px solid rgba(0,0,0,.15);

    -webkit-transition: none;

    -o-transition: none;

    transition: none;

	background: #ffb931;

	/* background: url(../../assets/img/bg-button.png) no-repeat #ffb931; */

    margin: 20px 5px 20px 5px;

    font-size: 14px;

	color: #FFF;

    white-space: nowrap;	

	font-weight: bold;

    /* text-transform: uppercase; */

    letter-spacing: 1px;

    border: none;

	margin-bottom: 20px!important;

	position: relative;

	padding: 15px 50px;

	overflow: hidden;

	text-decoration: none !important;

	cursor: pointer;

	border-style: solid;

	transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out;

}	







.button.btn-more:hover {

  display: inline-block;

  box-shadow: 0 0 2px 1px #999;   

  letter-spacing: 1px;

  background: rgba(254, 145, 37, 0.4);

  color: rgba(255, 255, 255, 0.6);

  text-shadow: 0 0 2px 1px #999;  

}

































































.right-nav-widget {

	background-color: #fff;

	height: 100%;

	right: 0;

	width: 300px;

	position: fixed;

	top: 0;

	box-shadow: 0 0 40px 0 rgba(94,92,154,.06);

	transition: transform .4s ease-in-out,-webkit-transform .4s ease-in-out;

}



.right-nav-widget.rnw-slide-in {

	-webkit-transform: translate(220px);

	transform: translate(220px);

}	



.right-nav-widget-toggle {

    display: block;

    width: 300px;

    height: 10%;

    background: #000;

    overflow: hidden;

    position: absolute;

    bottom: 0;

    left: 0;

    /* -webkit-transform: translate(0, -50%); */

    /* -moz-transform: translate(0, -50%); */

    /* -ms-transform: translate(0, -50%); */

    /* -o-transform: translate(0, -50%); */

    /* transform: translate(0, -50%); */

    padding: 1rem .75rem



}

























.left-nav-widget {

	background-color: #fff;

	height: 100%;

	left: 0;

	width: 300px;

	position: fixed;

	top: 0;

	box-shadow: 0 0 40px 0 rgba(94,92,154,.06);

	transition: transform .4s ease-in-out,-webkit-transform .4s ease-in-out;

	transition: transform 0.4s ease-in-out;

	-webkit-transform: translate(-220px);

	transform: translate(-220px);	

}

	

.left-nav-widget.is-slide-out {

	-webkit-transform: translate(0px);

	transform: translate(0px);

}	



.left-nav-widget-toggle {

    display: block;

    width: 305px;

    height: 80px;

    background: #000;

    overflow: hidden;

    position: absolute;

    bottom: 0;

    right: 0;

    /* -webkit-transform: translate(0, -50%); */

    /* -moz-transform: translate(0, -50%); */

    /* -ms-transform: translate(0, -50%); */

    /* -o-transform: translate(0, -50%); */

    /* transform: translate(0, -50%); */

    padding: 10px;



}

.left-nav-widget-button-text {

  position: absolute;

  left: 20px;

  top: 20px;

  height: 42px;



  line-height: 42px;

  font-family: "montserrat-regular", sans-serif;

  font-size: 14px;

  text-transform: uppercase;

  letter-spacing: .2rem;

  color: rgba(255, 255, 255, 0.5);

  -webkit-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

}



.left-nav-widget-toggle .burger-icon {

  position: absolute;

  right: 25px;

  top: 30px;

  height: 42px;

  width: 32px;

  line-height: 42px;

  font-family: "montserrat-regular", sans-serif;

  font-size: 1.4rem;

  text-transform: uppercase;

  letter-spacing: .2rem;

  color: rgba(255, 255, 255, 0.5);

  -webkit-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;  

}

.burger-icon .burger-icon-bar {

  height: 2px;

  background-color: rgb(255, 255, 255);

  position: absolute;

  left: 0px;

  transition: width 0.4s ease-in-out;

}

.left-nav-widget-toggle .burger-icon-bar:first-child {

  top: 0;

  width: 100%;

}

.left-nav-widget-toggle .burger-icon-bar:nth-child(2) {

  top: 9px;

  width: 75%;

}





.left-nav-widget-toggle .burger-icon-bar:nth-child(3) {

  top: 18px;

  width: 50%;

}



.left-nav-widget.is-slide-out .left-nav-widget-toggle .burger-icon-bar:first-child {

  top: 0;

  width: 50%;

}

.left-nav-widget.is-slide-out .left-nav-widget-toggle .burger-icon-bar:nth-child(2) {

  top: 9px;

  width: 75%;

}





.left-nav-widget.is-slide-out .left-nav-widget-toggle .burger-icon-bar:nth-child(3) {

  top: 18px;

  width: 100%;

}













































.page-title-statistics {

	display: flex;

	/* width: 50%; */

	margin: 20px 0;

	align-items: flex-end;

	justify-content: center;

}

.page-title-statistics h1 {

	font-family: inherit;

	text-align: center;

	font-weight: 600;

	color: #3e3f5e;

	margin-bottom: 5px;

}

.page-title-statistics p {

	text-align: center;

	color: #adafca;

	font-weight: 600;

	margin-bottom: 5px;

}

.page-title .single-counter p {

	text-align: center!important;

}

/*--------------------------------------

		Account Pages Styles

--------------------------------------*/

#sub-page-container {

	min-height: calc(60vh);
	background-color: #FCFCFC;
	background-color: white;
	width: 100%;
	top: 0;
	/*background: url(../img/menu-bg.jpg) center no-repeat;*/
	background-size: cover;
}

#account > * label {

	font-weight: 600;

	

	text-align: left;

	padding: 0;

}

#account > * p:not(.section-pretitle) p:not(.counter) {

	text-align: left;

	padding: 0;

	margin: 10px 0 20px 0!important;	

}

.account-header-info {

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

}

.account-header-info {

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

}

.single-counter {

	flex: 0 0 25%;

	position: relative;

	width: 100%;

	padding-right: 15px;

	padding-left: 15px;

}

.page-title-statistics {

	display: flex;

	/* width: 50%; */

	margin-bottom: 20px;

	align-items: flex-end;



	

}

.page-title-statistics h1 {

	font-family: inherit;

	text-align: center;

	font-weight: 600;

	color: #3e3f5e;

}

.page-title-statistics p {

	text-align: center;

	color: #adafca;

	font-weight: 600;	

}

.page-title {

	/* width: 50%; */

}



.page-title .single-counter p {

	text-align: center!important;

}














.form-container {

	display: flex;

	justify-content: center;

	width: 100%;

}

.required {
  color: red;
}

@media (min-width: 1200px) {
  .form-container {
    width: 50%; 
  }
}






.form-control {

	padding: 10px 40px 10px 40px!important;

	background-color: rgba(255,255,255,1) !important;	

	/* background: rgba(255,255,255,.2) !important; */

	width: 100%;

	height: 40px;

	margin-bottom: 20px!important;

	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.02)!important;

	border: 1px solid #EBEBEB!important;

	border-radius: 0!important;



}

.form-control:focus {

	border: 1px solid #fff!important;

	box-sizing: border-box;

	-webkit-box-shadow: none!important;	

	background-color: rgba(255,255,255,1) !important;	

	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.02)!important;

	border: 1px solid #EBEBEB!important;

color: #3479f5!important;	

}



.form-button {

	font-family: 'montserrat';

	font-weight: 600;

	font-size: 14px;

	background-color: rgba(255, 185, 48, 1);

	width: 100%!important;

	height: 45px;

	border: 0px; 

	margin-bottom: 20px!important;

	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.02);	

	color: #fff;

}





.cp-container {

	display: flex;

	justify-content: center;

}

.generic-form {

	padding: 10px;

	background-color: transparent!important;

	border: none!important;

	width: 100%;

	padding: 0 20%;

	box-sizing: border-box;

	position: relative;  

	margin: 60px 0;

	padding: 0;
}



.input-field input[type="text"]{width: 206px; height: 36px;background:transparent;color: black;padding-left: 10px;}

.input-field input[type="password"]{width: 206px; height: 36px;background:transparent;color: black;padding-left: 10px;}







.forgot-password,
.register-now {
	color: #767676!impprtant;
	font-family: 'montserrat';
	font-weight: 400;
	font-size: 14px;		
}



/* ===================================================================

 *  01. Bootstraps - (_site-layout.scss)

 *

 * ------------------------------------------------------------------- */

.container {

	padding-right: 0px;

	padding-left: 0px;

	margin-right: auto;

	margin-left: auto;

      transition: transform 0.5s ease-in-out; /* Smooth transition for sliding */

      transform: translateX(0); /* Initially at original position */

}

.d-flex {

	display: -ms-flexbox !important;

	display: flex!important;

}

.align-items-center {

    -ms-flex-align: center !important;

    align-items: center !important;

}

.fixed-top {

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    z-index: 1030;

}

.mr-auto {

    margin-right: auto !important;

}

.inner-container, .container-fluid {

    padding-left: 15px;

    padding-right: 15px;

	width: 100%;

}

.img-fluid {

    max-width: 100%;

    height: auto;

}



/*@media (min-width: 1200px) {

  .container {

    width: 1170px;



  }

}*/

.header-wrap{

	max-width: 900px;

}



.animated {

  animation: up-down 2s ease-in-out infinite alternate-reverse both!important;

}

@-webkit-keyframes up-down {

  0% {

    transform: translateY(5px);

  }

  100% {

    transform: translateY(-5px);

  }

}





/* ===================================================================

 *  02. Body - (_site-layout.scss)

 *

 * ------------------------------------------------------------------- */

body {

	background-image: url("../img/menu-bg.jpg")!important;

	/* background: gray!important; */

    background-attachment: fixed!important; /* Creates the parallax effect */

    background-position: center!important; /* Centers the image */

    background-repeat: no-repeat!important; /* Prevents the image from repeating */

    background-size: cover!important; /* Ensures the image covers the entire div */

}

/* .header-logo.header-scrolled { */

    /* display: none!important; */

/* } */

/* ===================================================================

 *  01. Bootstraps - (_site-layout.scss)

 *

 * ------------------------------------------------------------------- */

/* #header-nav-wrap { */

	/* margin: 0; */

	/* padding: 0; */

	/* list-style: none; */

	/* display: flex; */

	/* align-items: center; */

/* } */



/* .nav-menu > ul > li { */

  /* position: relative; */

  /* white-space: nowrap; */

  /* float: left; */



/* } */



/* .nav-menu a { */

  /* display: block; */

  /* position: relative; */

  /* color: whitesmoke; */

  /* padding: 8px 20px 8px 20px; */

  /* /*padding: 8px 25px 12px 0px;*/ */

  /* transition: 0.3s; */

  /* font-size: 14px; */

  /* font-weight: 500!important; */

  /* font-family: 'montserrat'; */

  /* /* text-shadow: black 0px 0px 10px; */ */

/* } */



/* /*.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {*/ */

/* .nav-menu a:hover, .nav-menu li:hover > a { */

  /* color: #ff9600; */

  /* text-decoration: none; */

  /* /* text-shadow: black 0px 0px 10px; */ */

/* } */











#header-nav-wrap, #header-nav-wrap * {

	margin: 0;

	padding: 0;

	list-style: none;

	display: flex;

	align-items: center;

}

#header-nav-wrap .drop-down ul {

  display: block;

  position: absolute;

  top: calc(100% + 30px);

  transition: ease all 0.5s;

  /* left: -25px; */

  /* top: 72px; */

  z-index: 999;

  opacity: 0;

  visibility: hidden;

  padding: 10px 0;

  /* background: rgba(0,0,0,0.9) !important; */

  background: #111111;

  margin: 0;

  border-radius: 0;  

}



#header-nav-wrap .drop-down:hover > ul {

  opacity: 1;

  top: calc(100%);

  visibility: visible;

}



#header-nav-wrap .drop-down li {

  min-width: 180px;

  position: relative;

  display: block;

}



#header-nav-wrap .drop-down ul a {

  display: block;

  padding: 10px 20px;

  font-size: 12px;

  text-transform: none;

  color: #fff;

  text-shadow: none;

  font-size: 14px;

  font-weight: normal!important;

  font-family: "montserrat", sans-serif;  

}



/*.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {*/







#header-nav-wrap .drop-down > a:after {

	content: "\eac8";

	font-family: IcoFont;

	padding-left: 5px;

}



#header-nav-wrap .drop-down .drop-down ul {

  top: 0;

  left: calc(100% - 30px);

}



#header-nav-wrap .drop-down .drop-down:hover > ul {

  opacity: 1;

  top: 0;

  left: 100%;

}



#header-nav-wrap .drop-down .drop-down > a {

  padding-right: 35px;

}



#header-nav-wrap .drop-down .drop-down > a:after {

  content: "\eaa0";

  font-family: IcoFont;

  position: absolute;

  right: 15px;

}



@media (max-width: 1366px) {

  #header-nav-wrap .drop-down .drop-down ul {

    left: -90%;

  }

  #header-nav-wrap .drop-down .drop-down:hover > ul {

    left: -100%;

  }

  #header-nav-wrap .drop-down .drop-down > a:after {

    /* content: "\ea9d"; */

  }

}









@media only screen and (max-width: 768px) {

  /* Make the dropdown position relative to the parent item */

  #header-nav-wrap .drop-down ul {

    position: relative;

    display: block;

	opacity: 1;

	visibility: visible;	

    top: 0; /* reset top position */

    left: 0; /* reset left position */

    background: #111111; /* Adjust background for mobile */

    padding: 0;

    box-shadow: none; /* Optional: remove shadow if needed */

    border-top: 1px solid rgba(255, 255, 255, 0.03); /* Optional border */

	margin: 0;

	background: transparent!important;

  }



  /* Show the dropdown when the parent item is hovered on or clicked */

  #header-nav-wrap .drop-down:hover > ul {

    display: block; /* Ensure the dropdown is shown */

    opacity: 1;

    visibility: visible;

  }



  /* Adjust the dropdown links on mobile */

  #header-nav-wrap .drop-down ul a {

    padding: 10px 15px;

    font-size: 14px;

    color: #fff;

  }

  /* Remove the bottom border for the last li in the dropdown */

  #header-nav-wrap .drop-down ul li:last-child {

    border-bottom: none;

  }

  /*adding indention to submenus */

  #header-nav-wrap .drop-down ul li a {

	position: relative;

    left: 10px;

  }

}





/* Default state for the drop-down arrow (downward icon) */

#header-nav-wrap .drop-down > a:after {

  content: "\eac8"; /* Default down arrow icon */

  font-family: IcoFont;

  padding-left: 5px;

  display: inline-block; /* Make sure the icon is treated as a block element */

  transform: rotate(0deg); /* Initial state: pointing down */

  transition: transform 0.3s ease, content 0.3s ease; /* Smooth transition for both rotation and icon change */

  transform-origin: center; /* Rotate around the center */

}







/* When hovering the link (before dropdown opens) */

/* #header-nav-wrap .drop-down > a:hover:after { */

  /* content: "\eaa1"; /* Change to up arrow */ */

  /* transform: rotate(90deg); /* Rotate to point upwards (right direction) */ */

  /* transform-origin: center; /* Ensure rotation is around the center */ */

/* } */



/* Optional: Keep the up-arrow rotated after dropdown opens */

/* #header-nav-wrap .drop-down.open > a:after { */

  /* content: "\eaa1"; /* Keep up arrow */ */

  /* transform: rotate(90deg); /* Rotate right */ */

  /* transform-origin: center; /* Rotate around the center */ */

/* } */











/* Default state for the drop-down arrow (downward icon) */

/* #header-nav-wrap .drop-down > a:after { */

  /* content: "\eac8"; /* Default down arrow icon */ */

  /* font-family: IcoFont; */

  /* padding-left: 5px; */

  /* display: inline-block; /* Make sure the icon is treated as a block element */ */

  /* transform: rotate(0deg); /* Initial state: pointing down */ */

  /* transition: transform 0.3s ease; /* Smooth transition for the rotation */ */

  /* transform-origin: center; /* Rotate around the center */ */

/* } */



When the dropdown is open, rotate the icon (around its center)

/* #header-nav-wrap .drop-down.open > a:after { */

  /* content: "\eaa1"; /* Change to up arrow */ */

  /* transform: rotate(-360deg); /* Rotate 360 degrees */ */

  /* transform-origin: center; /* Ensure rotation is around the center */ */

/* } */











/* When hovering the link (before dropdown opens) */

/* #header-nav-wrap .drop-down > a:hover:after { */

  /* content: "\eaa1"; /* Change to up arrow */ */

  /* transform: rotate(-360deg); /* Rotate to point upwards (right direction) */ */

  /* transform-origin: center; /* Ensure rotation is around the center */ */

/* } */







.d-lg-none{display:none!important}

.d-lg-block{display:block!important}

.d-none{display:none!important}









/* Mobile Nav body classes */

body.mobile-nav-active {

  overflow: hidden;

}



body.mobile-nav-active #mobile-nav {

  left: 0;

}



body.mobile-nav-active #mobile-nav-toggle {

  color: #fff;

}	



.login-menu-toggle {

	display: none!important;

	text-align: center;

	margin-bottom: 20px;

}

.agreement-container-left {
  padding: 15px 0 0rem 0;
  position: relative;
  width: 70%;
}
.agreement-image-right {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  /* top: 0; */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  /* padding-top: 21rem; */
  z-index: 500;
  width: 30%;
  text-align: right;
}
.agreement-content {
  background-color: rgba(244, 244, 244, 0.5);
  padding: 20px;
  border-radius: 20px;
  margin: 10px 0;
  border: 1px solid rgba(244, 244, 244, 1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Light shadow */
}
.agreement-content h3 {
  border: none;
  font-family: 'montserrat', sans-serif;
  font-weight: 500;
}
.agreement-content h3::first-letter {
  font-weight: 500;
}

/*toggle button for mobile login widget*/

.login-menu-toggle .mobile-login-panel-icon {

	position: relative;

	font-size: 16px;

	color: white;

	z-index: 400;

}

/* Login Widget Body

-----------------------------------*/

.mobile-login-widget {

	padding: 20px;

	position: fixed;

	right: -100%;

	/* background: #111111; */

	background: #fff;

	width: 100%;

	height: 100%;

	/* overflow: auto; */

	-webkit-transform: translateY(0);

	-moz-transform: translateY(0);

	-ms-transform: translateY(0);

	-o-transform: translateY(0);

	transform: translateY(0);

	z-index: 503;

	transition: all .25s ease-in-out;

	display: block;	

	box-sizing: border-box;

	display: flex;

	flex-direction: column;	

}

.mobile-login-widget label {

	font-family: "montserrat", sans-serif;

	font-weight: 400;

	color: #000;

}

/* Login Widget Slide In Effects

-----------------------------------*/

.mobile-login-widget.login-slide-in {

	right: 0;

}

/* Login Widget Header Blocks

-----------------------------------*/

.mobile-login-widget-header {

	display: flex;

	/* justify-content: space-between; */

	/* padding: 20px; */

}

.widget-header-title {

	width: 100%;

	position: absolute;

	margin: 0 -20px;

	z-index: -1;



}

.widget-header-title h1 {

	margin: 0;

	color: rgba(0,0,0,.8);

	padding: 0 15px;

	font-family: "montserrat", sans-serif;

	text-align: center;

    /* width: calc(100% - 40px); */

    width: 100%;



}

	

}

.close-login-menu-toggle {	

  justify-content: center;

  display: absolute;

  align-items: center;

  width: 40px;

  height: 40px;

  /* right: 32px; */

  top: 15px;

  height: 42px;

  width: 42px;

  z-index: 500;



}

.close-login-menu-toggle i {

	z-index: 5;

	display: flex;

	justify-content: center;

	align-items: center;

	width: 40px;

	height: 40px;

	font-size: 20px;

	cursor: pointer;

	color:  rgba(0,0,0,.3);	

}

.logged-account-id {

  display: flex;

  justify-content: center;

}





.mobile-login-panel-form-wrap {

	width: 100%;

}























.input-container {

    position: relative;

}





.input-user::before {
    font-weight: 100;
    content: '\ec8e'; /* Your icon content */

    font-family: 'icofont'; /* Make sure this is the correct font-family for your icon */

    position: absolute;

    left: 10px; /* Position it inside the left side of the input */

    top: 50%;

    transform: translateY(-50%); /* Vertically center the icon */

    font-size: 16px; /* Adjust the size of the icon */

    color: #999; /* Optional: Adjust the color of the icon */

}

.input-password::before {
    font-weight: 100;
    content: '\ec71'; /* Your icon content */

    font-family: 'icofont'; /* Make sure this is the correct font-family for your icon */

    position: absolute;

    left: 10px; /* Position it inside the left side of the input */

    top: 50%;

    transform: translateY(-50%); /* Vertically center the icon */

    font-size: 16px; /* Adjust the size of the icon */

    color: #999; /* Optional: Adjust the color of the icon */

}

.input-email::before {
  font-weight: 100;
  content: '\ef12'; /* Your icon content */
  font-family: 'icofont'; /* Make sure this is the correct font-family for your icon */
  position: absolute;
  left: 10px; /* Position it inside the left side of the input */
  top: 50%;
  transform: translateY(-50%); /* Vertically center the icon */
  font-size: 16px; /* Adjust the size of the icon */
  color: #999; /* Optional: Adjust the color of the icon */
}


.show-password-input::after {
    content: '\ef24'; /* Your icon content */
    font-family: 'icofont'; /* Make sure this is the correct font-family for your icon */
    font-weight: 100;
    position: absolute;
    right: 10px; /* Position it inside the left side of the input */
    top: 50%;
    transform: translateY(-50%); /* Vertically center the icon */
    font-size: 16px; /* Adjust the size of the icon */
    color: #999; /* Optional: Adjust the color of the icon */
}

.show-password-input.showing-password::after {

    content: '\ef22'; /* Icon when password is visible */

}

label.input-label {

	color: #111;

}

.input-user,
.input-password,
.input-email {
  height: 50px;
  margin-bottom: 20px;

}





/*--------------------------------------

		Login Panel

--------------------------------------*/



#header-nav-wrap .login-panel-wrap {

	padding: 20px;


}
#header-nav-wrap .login-panel-wrap h4 {
  color: #767676!important;
}
#header-nav-wrap .login-drop-down ul li {

	padding: 0; /*removing existing ul li padding*/

	list-style: none;	

}

#header-nav-wrap .login-drop-down .forgot-password > a,
#header-nav-wrap .login-drop-down .register-now > a {
	font-family: 'montserrat-medium';
	font-weight: 400;
	font-size: 14px;
	color: #767676;	

}

#header-nav-wrap .login-drop-down .form-control {	

	width: 100%;

	height: 50px;

	border: 0px; 

	margin-bottom: 10px!important;

	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.02);



	

}

#header-nav-wrap .login-drop-down .form-control:focus {

	border: 1px solid #fff!important;

	box-sizing: border-box;

	-webkit-box-shadow: none!important;	

	background: rgba(255,255,255,.2);

}

#header-nav-wrap .login-drop-down .form-button {

	font-family: 'montserrat';

	font-weight: 600;

	font-size: 14px;

	background-color: rgba(255, 185, 49, 1);

	width: 100%!important;

	height: 45px;

	border: 0px; 

	margin: 20px 0!important;

	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.02);	

	color: #fff;

	border-radius: 0;

	box-sizing: border-box;

}

#header-nav-wrap .login-drop-down .form-button:hover {

	background-color: rgba(255, 185, 49, 0.45);

}

#header-nav-wrap .login-drop-down ul {

  display: block;

  position: absolute;

  top: calc(100% + 30px);

  transition: ease all 0.5s;

  right: -15px;

  z-index: 999;

  opacity: 0;

  visibility: hidden;

  background: #fff;

  width: 340px;

  /* box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); */

  margin: 0; 

  border-radius: 0;

}

#header-nav-wrap .login-drop-down.panel-is-active > ul {

  opacity: 1;

  top: calc(100%);

  visibility: visible;	

}







/*--------------------------------------

		Mobile Login Panel

--------------------------------------*/

#mobile-login-widget .mobile-login-panel-form-wrap .login-panel-wrap {

	/* padding: 20px; */

	

}

#mobile-login-widget .mobile-login-panel-form-wrap h4 {
  color: #767676!important;
}

#mobile-login-widget .mobile-login-panel-form-wrap .forgot-password a,

#mobile-login-widget .mobile-login-panel-form-wrap .register-now a {

	font-family: 'montserrat';

	font-weight: 400;

	font-size: 14px;

	color: white;	

}

#mobile-login-widget .mobile-login-panel-form-wrap .form-control {	

	width: 100%;

	height: 50px;

	border: 0px; 

	margin-bottom: 20px!important;

	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.02);



	font-size: 16px;

	border-radius: 0;

}

#mobile-login-widget .mobile-login-panel-form-wrap .form-control:focus {



    border: 1px solid #fff!important;

	box-sizing: border-box;

	-webkit-box-shadow: none!important;	

	background: rgba(0,0,0,.2)!important;

}

#mobile-login-widget .mobile-login-panel-form-wrap .form-button {

	font-family: 'montserrat';

	font-weight: 600;

	font-size: 14px;

	background-color: rgba(255, 255, 255, 0.45);

	width: 100%!important;

	height: 45px;

	border: 0px; 

	margin-bottom: 20px!important;

	box-shadow: inset 0 0 2px 2px rgba(0,0,0,0.02);	

	color: #000;

	border-radius: 0;

	box-sizing: border-box;

}

#mobile-login-widget .mobile-login-panel-form-wrap .form-button:hover {

	background-color: #fff;

}









/* this line is for login panel*/

.login-panel-header {

	display: flex;

	justify-content: center;

	flex-direction: column;

}

.login-panel-header img {

	max-width: 25%;

}



.login-panel-header h4 {

	text-align: center;

}

.login-panel-header a {

	text-align: center;

}

.login-panel-user {

	font-size: 14px;

	font-family: "montsserat", sans-serif;

	color: #111;	

}



.login-panel-header .login-panel-email {

	font-size: 12px;

	font-family: "montsserat", sans-serif;

	color: #333!important;

}

.login-panel-header .login-panel-email:hover {

	font-size: 12px;

	font-family: "montsserat", sans-serif;

	color: rgba(255, 185, 48, 1)!important;

}



.already-logged-in p {

	color: #333;

}

.isloggedin-msg p strong a {

	color: #333;

	font-weight: bold;

}























.btn-downloads {

	font-family: 'montserrat';

	color: #fff!important;

	border-radius: 5px;

	padding: 15px 25px;

	margin: 10px 10px;

}

.mfire {

	background-color: #003366;

}

.mega {

	background-color: #dd1405;

}

.gdrive {

	background-color: #ffd04b;

}

.direct {

	background-color: rgba(255, 185, 48, 1);

}

.download-btn-container {

	display: flex;

}



.download-section h3 {

	font-family: 'montserrat';

}

.download-section h3::first-letter {

  font-weight: normal;

}










/*Login Panel Login*/

.isloggedin-account a,
.isloggedin-changepass a,
.isloggedin-email a,
.isloggedin-logout a {
	color: #000!important;

}
.isloggedin-account a:hover,
.isloggedin-changepass a:hover,
.isloggedin-email a:hover,
.isloggedin-logout a:hover {
	color: rgba(255, 185, 48, 1)!important;
}

.isloggedin-msg a {
	color: #000!important;
}

.login-panel-user:hover {
    color: rgba(255, 185, 48, 1);
}


.login-captcha { 
  margin-bottom: 10px;
}
.login-captcha label {
    color: #767676!important;
}
.login-captcha strong a {
  color: #767676!important;
}


.flex-center {
  display: flex;
  justify-content: center;
}







/* GRID TABLE*/
*,
*::before,
*::after {
    box-sizing: border-box;
}
.grid-container {
  width: 100%;
  display: flex;
  flex-direction: row; /* Align items vertically */
  justify-content: space-between;
  align-items: flex-start;
}
.grid-table {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Equal width for both columns */
  /*grid-gap: 10px;*/
  /*border: 1px solid #000;*/
  /*padding: 10px;*/
  flex-grow: 1;
}
.grid-table div {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
}
.grid-table .grid-header {
  font-weight: bold;
  background-color: #f4f4f4;
}