/*
 Theme Name:     2Special
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    2Special customizations
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */

:root {
    --color-first: var(--gcid-primary-color);
    --color-second: var(--gcid-secondary-color);
    --color-third: var(--gcid-uure72orwn);
	--color-fourth: var(--gcid-npapjsm294);

	--0\.25: var(--gvid-vy57bgnxct);
	--0\.5: var(--gvid-0ne3fxa72f);
	--0\.75: var(--gvid-2ed209119i);
	--1: var(--gvid-vslsac6s0g);
	--1\.25: var(--gvid-vd58ybg19s);
	--1\.5: var(--gvid-9h3ud2r780);
	--1\.75: var(--gvid-705m5imous);
	--2: var(--gvid-r0azl771if);
	--2\.5: var(--gvid-qbq8hdutc4);
	--3: var(--gvid-8fxn9shd9v);
	--3.5: var(--gvid-ng6xggmgbh);
	--4: var(--gvid-rdq1ib6die);
	--4.5: var(--gvid-0rh7tmkqew);
	--5: var(--gvid-209c1xt2u5);

}

html,
body {
	font-size:16px;
	line-height:130%;
	font-weight:400;
}

.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_text h4,
.et_pb_text h5,
.et_pb_text h6
{
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	line-height:130%;
}

/*-------------------------------- START Buttons ------------------------------------------- */

a.custom-button, .custom-button a {
	text-align: center!important;
    display: flex!important;
    transition: var(--transition);
	align-items: center;
	width:fit-content;
	border-radius: var(--0\.25)!important;
	padding-top: var(--0\.5)!important;
	padding-bottom: var(--0\.5)!important;
	padding-left: var(--1\.5)!important;
	padding-right: var(--1\.5)!important;
	
}

/* add icon to custom button */
.custom-button.icon a {
	gap:.5rem;
}
.custom-button.icon a:after {
	content: '$';
    font-family: ETmodules !important;
	font-size: var(--icon-size);
	line-height: 0;
	margin-top: 3px;
	transition: var(--transition);
}

/* makes buttons full width */
.custom-button.wide a{
	width:100%;
	justify-content: space-between;
}
/* start define color first */
		.custom-button.color-first a {
			color: white!important;
			border: 1px solid var(--color-first)!important;
			background-color: var(--color-first)!important;
		}
		.custom-button.color-first a:hover {
			color: var(--color-first)!important;
			border: 1px solid var(--color-first)!important;
			background-color: white!important;
		}

		/* variation color first outline */
		.custom-button.color-first.outline a {
			color: var(--color-black)!important;
			border: 1px solid var(--color-first)!important;
			background-color: unset!important;
		}

		.custom-button.color-first.outline a:hover {
			color: white!important;
			border: 1px solid var(--color-first)!important;
			background-color: var(--color-first)!important;
		}

		.custom-button.color-first.outline.icon a:after {
				color: var(--color-first)!important;
		}	

		.custom-button.color-first.outline.icon a:hover:after {
				color: white!important;
		}
/* end define color first */
/* start define color second */
		.custom-button.color-second a {
			color: white!important;
			border: 1px solid var(--color-second)!important;
			background-color: var(--color-second)!important;
		}
		.custom-button.color-second a:hover {
			color: var(--color-second)!important;
			border: 1px solid var(--color-second)!important;
			background-color: white!important;
		}

		/* variation color second outline */
		.custom-button.color-second.outline a {
			color: var(--color-black)!important;
			border: 1px solid var(--color-second)!important;
			background-color: white!important;
		}

		.custom-button.color-second.outline a:hover {
			color: white!important;
			border: 1px solid white!important;
			background-color: var(--color-second)!important;
		}

		.custom-button.color-second.outline.icon a:after {
				color: var(--color-second)!important;
		}	

		.custom-button.color-second.outline.icon a:hover:after {
				color: white!important;
		}
/* end define color second */
/* start define color third */
		.custom-button.color-third a {
			color: white!important;
			border: 1px solid var(--color-third)!important;
			background-color: var(--color-third)!important;
		}
		.custom-button.color-third a:hover {
			color: var(--color-third)!important;
			border: 1px solid var(--color-third)!important;
			background-color: white!important;
		}

		/* variation color third outline */
		.custom-button.color-third.outline a {
			color: var(--color-black)!important;
			border: 1px solid var(--color-third)!important;
			background-color: white!important;
		}

		.custom-button.color-third.outline a:hover {
			color: white!important;
			border: 1px solid white!important;
			background-color: var(--color-third)!important;
		}
		.custom-button.color-third.outline.icon a:after {
				color: var(--color-third)!important;
		}	

		.custom-button.color-third.outline.icon a:hover:after {
				color: white!important;
		}
/* end define color third */
/* start define color fourth */
		.custom-button.color-fourth a {
			color: white!important;
			border: 1px solid var(--color-fourth)!important;
			background-color: var(--color-fourth)!important;
		}
		.custom-button.color-fourth a:hover {
			color: var(--color-fourth)!important;
			border: 1px solid var(--color-fourth)!important;
			background-color: white!important;
		}

		/* variation color fourth outline */
		.custom-button.color-fourth.outline a {
			color: var(--color-black)!important;
			border: 1px solid var(--color-fourth)!important;
			background-color: unset!important;
		}

		.custom-button.color-fourth.outline a:hover {
			color: white!important;
			border: 1px solid white!important;
			background-color: var(--color-fourth)!important;
		}
		.custom-button.color-fourth.outline.icon a:after {
				color: var(--color-fourth)!important;
		}	

		.custom-button.color-fourth.outline.icon a:hover:after {
				color: white!important;
		}
/* end define color fourth */

.category-item:hover{
	cursor:pointer;
	background-color: hsl(from var(--gcid-primary-color) calc(h + 0) calc(s + 0) calc(l + 0) / 0.25);
}

.category-item .et_pb_image {
	transition: all 0.2s ease-in-out;max-width:30%;
}

.category-item:hover .et_pb_image {
	transform:scale(1.1);
	
}

.category-item .et_pb_icon{
	opacity:0;
	margin-left:-20px;
	transition: all 0.2s ease-in-out;
	margin-top:3px;
}

.category-item:hover .et_pb_icon{
	opacity:1;
	margin-left:0;
}

/*---------------------------start-fly-out-menu----------------------*/

.custom-menu .submenu {
  display: none;
 /*position: absolute;
  background: #fff;
  border: 1px solid #ccc;*/
  background-color: hsl(from var(--gcid-secondary-color) calc(h + 0) calc(s + 0) calc(l + 0) / 0.1);

}

.custom-menu .menu_item {
  padding: var(--0\.5) var(--0\.75);
  cursor: pointer;
  transition: background-color 0.2s ease;
	border-radius: var(--0\.5) 0 0 var(--0\.5) ;	
}

.custom-menu .menu_item.active {
  background-color: hsl(from var(--gcid-secondary-color) calc(h + 0) calc(s + 0) calc(l + 0) / 0.1);
  color: var(--color-first);
  font-weight:700;	
}

/*---------------------------end-fly-out-menu----------------------*/
/*---------------------------start-vertical-menu----------------------*/
.vertical-menu.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul {
	flex-direction: column;
	gap:0;
}

.vertical-menu.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul a {
	line-height: var(--line-height)!important;
}

.vertical-menu.et_pb_menu .et_pb_menu__menu {
        display: flex;
    }

.vertical-menu.et_pb_menu .et_mobile_nav_menu {
	display: none;
}

.vertical-menu.et_pb_menu .et_pb_menu__wrap {
        justify-content: flex-start!important;
}
/*---------------------------end-vertical-menu----------------------*/


.global-searchfield .search-filter-base .search-filter-input-text{
	    background: #eee!important;
    border: none!important;
    border-radius: 40px 0 0 40px!important;
    padding: 10px 20px!important;
    font-size: 14px!important;
}

.global-searchfield .search-filter-base .search-filter-input-text input {
	 font-size: 14px!important;
	color:#aaa!important;
}

.global-searchbutton .search-filter-base {
	 background: #eee!important;
	 border-radius: 0 40px 40px 0!important;
}

.global-searchbutton button {
    background-color: var(--color-second);
    color: white;
    padding: 12.5px 20px;
    border: none;
    border-radius: 50px;
}

.global-searchbutton button:hover {
	background-color: var(--color-first)!important;
	color:white!important;}