/*
 Theme Name:     Search For Services
 Theme URI:      https://www.s4serv.com
 Description:    S4serv Official Theme
 Author:         S4SERV
 Author URI:     https://www.s4serv.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

/*style the Divi blog pagination buttons*/
.pagination .alignleft a,
.pagination .alignright a {
  color: #ffffff;
	background: #0071fc;
	border: 2px solid #0070fc;
	padding: .7em 1.3em;
	border-radius: 50px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

/*style the Divi blog pagination buttons on hover*/

.pagination .alignleft a:hover,
.pagination .alignright a:hover {
	background: transparent;
  color: #0070fc;
	border: 2px solid #0070fc;
	transition: all 0.3s ease-in-out;
}
/*style the wp-pagenavi pagination links*/

.wp-pagenavi a,
.wp-pagenavi span {
	color: #000000;
	background: #f1f3f5;
	font-size: 1em !important;
	line-height: 1em;
	font-weight: bold !important;
	padding: 0.45em 0.8em !important;
	border-radius: 100px;
	transition: all .5s;
}


/*style the wp-pagenavi current page number*/

.wp-pagenavi span.current {
	color: #ffffff !important;
	background: #0070fc !important;
	border-radius: 100px;
}


/*style the wp-pagenavi pagination links on hover*/

.wp-pagenavi a:hover {
	color: #ffffff!important;
	background: #0070fc!important;
}


/*style the wp-pagenavi pages text*/

.wp-pagenavi .pages {
	background: none;
}


/*remove border and center the wp-pagenavi links*/

.wp-pagenavi {
	border-top: none;
	text-align: center;
	display: flex;
    align-items: center;
    justify-content: center;
}

/*Sticky Buttons*/
.sticky-buttons{position:fixed; bottom:0; z-index:1000;}
.sticky-buttons.left{left:0;}
.sticky-buttons.right{right:0;}
.sticky-buttons a{display:flex; align-items:center; justify-content:center; margin:10px; color:#ccc; fill:#ccc; 
background-color:#66cc66; box-shadow:0 2px 5px 0px #777; transition:.4s all;}
.sticky-buttons.square a{border-radius:0;}
.sticky-buttons.rounded a{border-radius:5px;}
.sticky-buttons.round a{border-radius:50%;}
.sticky-buttons.small a{width:40px; height:40px; font-size:22px;}
.sticky-buttons.medium a{width:50px; height:50px; font-size:28px;}
.sticky-buttons a:hover{cursor:pointer; color:#fff; fill:#fff;}
.sticky-buttons a.whatsapp{background-color:#4dc247;}
.sticky-buttons a.messenger{background-color:#0084FF;}
.sticky-buttons.inactive a.sticky_toggler, .sticky-buttons a.sticky_toggler{transform:rotate(0deg);}
.sticky-buttons.active a.sticky_toggler{transform:rotate(180deg);}
.sticky-buttons a svg{width:75%; height:75%;}
.sticky-buttons .hidden-data{background-color:#777; width:500px; margin:10px 0; padding:10px; font-size:16px; position:fixed; bottom:0; z-index:101; box-shadow:0 2px 5px 0px #777; transition:.4s all;}
.sticky-buttons.square .hidden-data{border-radius:0;}
.sticky-buttons.rounded .hidden-data, .sticky-buttons.round .hidden-data{border-radius:5px;}
.sticky-buttons.small .hidden-data{max-width:calc(100% - 70px);}
.sticky-buttons.medium .hidden-data{max-width:calc(100% - 80px);}
.sticky-buttons.left .hidden-data{left:0; transform:translateX(-100%);}
.sticky-buttons.active.left.small .hidden-data.active{transform:translateX(60px);}
.sticky-buttons.active.left.medium .hidden-data.active{transform:translateX(70px);}
.sticky-buttons.right .hidden-data{right:0; transform:translateX(100%);}
.sticky-buttons.active.right.small .hidden-data.active{transform:translateX(-60px);}
.sticky-buttons.active.right.medium .hidden-data.active{transform:translateX(-70px);}
.sticky-buttons .hidden-data form br{display:none;}
.sticky-buttons .hidden-data form textarea{height:auto; display:block; width:100%;}
.sticky-buttons .hidden-data form input{line-height:36px!important; display:block; width:100%;}
.sticky-buttons .hidden-data form .wpcf7-form-control-wrap{margin-top:5px!important; margin-bottom:5px!important; display:block;}


/*Magic Sticky Button*/
.sticky-navigate {position: fixed; width: 420px; height: 70px; background: #2E2E2E; box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset 5px 5px 20px rgba(255, 255, 255, 0.2), inset -5px -5px 15px rgba(0, 0, 0, 0.75); border-radius: 25px 25px 0 0; display: flex; justify-content: center; align-items: center; bottom:0; left:50%; margin-left:-210px; z-index: 1;}
.sticky-navigate li {position: relative; list-style: none; width: 80px; margin: 0 5px;}
.sticky-navigate li::before {content: ""; position: absolute; top: 35px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: #222; border-radius: 50%; transition: 0.5s;}
.sticky-navigate li.active::before {background: #0f0; box-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0, 0 0 40px #0f0, 0 0 50px #0f0;}
.sticky-navigate li a {display: flex; align-items: center; justify-content: center; flex-direction: column; text-decoration: none;}
.sticky-navigate li a .sticky-navigate-icon {position: absolute; font-size: 2.5em; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; color: #aaa; border-radius: 50px; transition: 0.5s; transition-delay: 0.2s;}
.sticky-navigate li.active a .sticky-navigate-icon { font-size:1.75em; background: #EF8722; color: #fff; transform: translateY(-40px); box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25), inset 2px 2px 3px rgba(255, 255, 255, 0.25),  inset -3px -3px 5px rgba(0, 0, 0, 0.5); transition-delay: 0s;}
.sticky-navigate li a .sticky-navigate-icon::before {content: ""; position: absolute; inset: 10px; background: #2E2E2E; border-radius: 50%; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), inset 2px 2px 3px rgba(255, 255, 255, 0.25), inset -3px -3px 5px rgba(0, 0, 0, 0.5); transform: scale(0); transition: 0.5s;}
.sticky-navigate li.active a .sticky-navigate-icon::before {transform: scale(1);}
.sticky-navigate li a .text {position: absolute; font-size: 0.75em; color: #2f363e; opacity: 0; transform: translateY(20px); padding: 2px 10px; background: #fff; border-radius: 15px; box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25), inset -3px -3px 5px rgba(0, 0, 0, 0.5); transition: 0.5s; transition-delay: 0s;}
.sticky-navigate li.active a .text {opacity: 1; transform: translateY(10px); transition-delay: 0.2s;}

/* Circular Sticky Buttons */
.csticky-buttons{position:fixed; bottom:5%; z-index:1000; width: 280px; height: 280px; display: flex; align-items: flex-end; justify-content: flex-start;}
.csticky-buttons.left{left:2%;}
.csticky-buttons.right{right:0;}
.csticky-buttons.square a{border-radius:0;}
.csticky-buttons.rounded a{border-radius:5px;}
.csticky-buttons.round a{border-radius:50%;}
.csticky-buttons.small a{width:40px; height:40px; font-size:22px;}
.csticky-buttons.medium a{width:50px; height:50px; font-size:28px;}
.csticky-buttons a:hover{cursor:pointer; color:#fff; fill:#fff;}
.csticky-buttons a.whatsapp{background-color:#4dc247;}
.csticky-buttons a.messenger{background-color:#0084FF;}
.csticky-buttons.inactive a.csticky_toggler, .csticky-buttons a.csticky_toggler{transform:rotate(0deg); transition:1.25s;}
.csticky-buttons.active a.csticky_toggler{transform:rotate(360deg);}
.csticky-buttons a svg{width:75%; height:75%;}
.csticky-buttons .hidden-data{background-color:#777; width:500px; margin:10px 0; padding:10px; font-size:16px; position:fixed; bottom:0; z-index:101; box-shadow:0 2px 5px 0px #777; transition:.4s all;}
.csticky-buttons.square .hidden-data{border-radius:0;}
.csticky-buttons.rounded .hidden-data, .sticky-buttons.round .hidden-data{border-radius:5px;}
.csticky-buttons.small .hidden-data{max-width:calc(100% - 70px);}
.csticky-buttons.medium .hidden-data{max-width:calc(100% - 80px);}
.csticky-buttons.left .hidden-data {left: 0; transform: translate(45%, 125%);}
.csticky-buttons.active.left.small .hidden-data.active{transform:translateX(60px);}
.csticky-buttons.active.left.medium .hidden-data.active {transform: translate(45%, 0px);}
.csticky-buttons.right .hidden-data{right:0; transform:translateX(100%);}
.csticky-buttons.active.right.small .hidden-data.active{transform:translateX(-60px);}
.csticky-buttons.active.right.medium .hidden-data.active{transform:translateX(-70px);}
.csticky-buttons .hidden-data form br{display:none;}
.csticky-buttons .hidden-data form textarea{height:auto; display:block; width:100%;}
.csticky-buttons .hidden-data form input{line-height:36px!important; display:block; width:100%;}
.csticky-buttons .hidden-data form .wpcf7-form-control-wrap{margin-top:5px!important; margin-bottom:5px!important; display:block;}
.csticky-buttons li:not(.csticky_toggler) {position: absolute; left: 40%; bottom: -14%; list-style: none; transition: 0.5s; transform: rotate(calc(-180deg/8 * var(--i))); transform-origin: -120px; scale: 0; transition-delay: calc(0.05s * var(--i));}
.csticky-buttons.active li {scale: 1;}
.csticky-buttons li a {position: relative; display: flex; transform: rotate(calc(360deg/-8 * var(--i))); width: 60px; height: 60px; background-color: black; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.75rem; color: var(--clr); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15); transition: 0.5s; margin: 10px; fill: #ccc;}
.csticky-buttons .csticky_toggler {position: relative; height: 60px; width: 60px; background: #8A9E70; border-radius: 50%; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; color: #333; font-size: 2rem; cursor: pointer; transition: 1.25s; z-index: 5;}
.csticky-buttons.active .csticky_toggler {transform: rotate(360deg); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 0 0 2px #333, 0 0 0 8px #8A9E70;}
.csticky-buttons li a {position: relative; display: flex; transform: rotate(calc(360deg/-8 * var(--i))); width: 60px; height: 60px; background-color: #8A9E70; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.75rem; color: var(--clr); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15); transition: 0.5s;}
.csticky-buttons li:hover a{font-size:2.5rem; box-shadow:0 0 0 2px var(--clr), 0 0 0 6px #8A9E70;}

/* Sided Sticky Buttons */