/*
Theme Name: ECities
Requires at least: WordPress 7.0+
Version: 1.0
Last Update: 2025-1026 0000p
Author: PaulGagu
Text Domain: ecities
*/



	 
:root{    

--purple: #C852B7;    
--green : #00CB6C;   
--red   : #ED004D; 
--yellow: #FFFF57;   
--acqua : #13D9E7;   

--white : #ffffff;   
--light : #F7F4F2;   
--grey  : #D9D9D9;   
--black : #000000;   

--mpink : #F2BBE1;   
--mgreen: #018577;   
--mpeach: #FAC6A9;   
	

--site-width : 1920px;
--site-padx  : 40px ;
--mobi-padx  : 24px ;

}


html { margin: 0; padding: 0; position: relative; scroll-behavior: smooth; scroll-padding-top: 120px; background-color: white; }

body{  margin: 0 auto !important; padding: 0;  max-width: var(--site-width); position: relative; background-color: var(--white); }

main  { min-height: 80vh; position: relative; }


.content    { width:100%; margin:0 auto; padding:0 var(--site-padx); position:relative;  }
.full-site  { width:100%; margin:0 auto; padding:0; position:relative; }

.pad-site   { padding: var(--site-padx); }
.pad-lsite  { padding-left:  var(--site-padx); }
.pad-rsite  { padding-right: var(--site-padx); }
.pad-hsite  { padding-left:  var(--site-padx); padding-right: var(--site-padx); }

@media ( max-width: 600px ){
	
	.content  { padding:0 var(--mobi-padx); }
	.pad-site   { padding: var(--mobi-padx); }
	.pad-lsite  { padding-left:  var(--mobi-padx); }
	.pad-rsite  { padding-right: var(--mobi-padx); }
	.pad-hsite  { padding-left:  var(--mobi-padx); padding-right: var(--mobi-padx); }
	
}	

.skip-link { background: black; color:white; height: 30px; left: 50%; padding: 8px;  position: absolute;  
	         transform: translateY(-120px); transition: transform 0.3s; z-index: 9999; }
.skip-link:focus { transform: translateY(0px); }

.mulish {  font-family: "Mulish", sans-serif; font-optical-sizing: auto;  }
.special-gothic { font-family: "Special Gothic Expanded One", sans-serif; }


/*    - - typography - -    */


html{ font-size: 10px; }
body{ font-family: "Mulish", sans-serif; font-optical-sizing: auto;  font-size:16px; line-height: 24px; font-weight:400;  }

h1, .font-h1,
h2, .font-h2, 
h3, .font-h3,
h4, .font-h4, 
h5, .font-h5, 
h6, .font-h6  { font-family: 'Special Gothic Expanded One', sans-serif;  margin:0 0 12px; font-weight:400;  }

h1, .font-h1 { font-size: clamp(40px, 6.0vw, 64px); line-height: 1;  }
h2, .font-h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.2;  }
h3, .font-h3 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.3;  }
h4, .font-h4 { font-size: clamp(20px, 3.0vw, 32px); line-height: 1.4;  }
h5, .font-h5 { font-size: clamp(18px, 2.8vw, 24px); line-height: 1.4;  }
h6, .font-h6 { font-size: clamp(16px, 2.0vw, 20px); line-height: 1.4;  }

p, 
ul, ol, 
li { font-family: 'Mulish', sans-serif; font-size:16px; line-height: 24px; margin:0 0 12px;font-weight:400; }
ol, ul { padding-left: 20px; }

p:last-child { margin-bottom: 0; }
li:last-child { margin-bottom: 0; }

.big-title{ font-size:clamp(40px, 6vw, 88px); }
.bold-title{ font-size:clamp(18px, 1.3vw, 20px); }
.small-title{ font-size:clamp(12px, 1.1vw, 16px); }



@media all and (min-width:601px) and (max-width:980px){
	
	body{ font-size: 16px; line-height: 24px; }
	h1, .font-h1 { font-size: 48px; line-height: 56px;  }
	h2, .font-h2 { font-size: 40px; line-height: 46px;  }
	h3, .font-h3 { font-size: 32px; line-height: 36px;  }
	h4, .font-h4 { font-size: 28px; line-height: 32px;  }
	h5, .font-h5 { font-size: 22px; line-height: 26px;  }
	h6, .font-h6 { font-size: 18px; line-height: 24px;  }
	.font-h0 { font-size: 60px; line-height: 60px;  }

}

@media all and ( max-width: 600px ) {
	
	body{ font-size: 16px; line-height: 24px; }
	h1, .font-h1 { font-size: 40px; line-height: 48px;  }
	h2, .font-h2 { font-size: 32px; line-height: 32px;  }
	h3, .font-h3 { font-size: 24px; line-height: 24px;  }
	h4, .font-h4 { font-size: 20px; line-height: 24px;  }
	h5, .font-h5 { font-size: 18px; line-height: 24px;  }
	h6, .font-h6 { font-size: 16px; line-height: 24px;  }
	.font-h0 { font-size: 60px; line-height: 60px;  }
	p, ul, ol, li { font-size:16px;  }


}



/*    - - color & backgrounds - -    */

a{ color:currentcolor; }
a:hover{ color:currentcolor; }

a.clean-link,
.clean-link { text-decoration: none; }

.has-clean-links a{ text-decoration: none; }


/* _______________________________ BUILD ____________________________________ */

.has-purple-color{ color:var(--purple); }
.has-yellow-color{ color:var(--yellow); }
.has-green-color { color:var(--green); }
.has-black-color { color:var(--black); }
.has-white-color { color:var(--white); }

/* - - - -  has-links - - - - */

.has-links-yellow  a { color:var(--yellow); } 
.has-links-white  a  { color:var(--white);  } 
.has-links-black  a  { color:var(--black);  } 

.has-links-hover-yellow a:hover  { color:var(--yellow); } 
.has-links-hover-white  a:hover  { color:var(--white);  } 
.has-links-hover-black  a:hover  { color:var(--black);  } 



/* ----- button colors ------  */

.gb-button{ cursor: pointer !important; }

.btn { display:inline-block; padding:8px 16px; background:black; color:white; line-height:24px;
       font-size:16px; font-weight:400; font-family:'Special Gothic Expanded One', sans-serif;
       border:1px solid black; border-radius:4px;  transition:all 0.5s ease; cursor:pointer; }
       
.btn:hover{ border-color:var(--purple); background:white; color:black; transition:all 0.5s ease; }

@media all and ( max-width: 600px ) {

}


/* ----- color & backgrounds -----  */




/* _______________________________ eof:BUILD ____________________________________ */


/* - - - -  is-style classes for gutenberg blocks - - - - */

/* core/paragraph */

.is-style-margin-0 { margin:0; }


@media all and ( max-width: 600px ) {

}

.video-play{ position: relative; display:inline-block;  }
.video-play:after{ content:'';  position:absolute; top:calc(50% - 40px); left:calc(50% - 40px);  width:80px; height:80px; display:inline-block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 22v-20l18 10-18 10z' fill='%23FFFF00' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;
}
.video-play:hover:after{  opacity: 0.9; }

.iframe-box,
.video-box,
[data-iframe],
[data-video] { cursor: pointer; }


/* ----  forms  ---- */

:root{ 

}

:.EC-form label { display:block; margin:0; padding:0; line-height: 30px; font-size:14px; }

.search-form input[type="text"],
:.EC-form select,
:.EC-form textarea,
:.EC-form input[type="text"],
:.EC-form input[type="password"],
:.EC-form input[type="email"] { display:block; border:1px solid var(--blue); border-radius:4px; width:100%; height:40px; margin:0; padding:0 5px; background:white; }
:.EC-form textarea            { height:120px; padding:8px 5px; line-height: 24px; font-size:14px; font-family: "Mulish"; }

:.EC-form select              { }
:.EC-form option  { line-height: 24px; font-size:14px; font-family: "Mulish"; } 

:.EC-form input[type="submit"]{  }

:.EC-form input[type="submit"]:hover { }
					
.search-form::placeholder,						     
:.EC-form::placeholder { font-family:14px; color:var(--iceberg); font-family: "Mulish";  }


.width-48\% { width:48%; }

@media all and ( max-width: 600px ) {

}



/*--------------------------------------------------------------
#  lity lightbox 
--------------------------------------------------------------*/
	
.lity-close, .lity-close:active, .lity-close:focus, .lity-close:hover, .lity-close:visited { background: var(--red); }



/*--------------------------------------------------------------
# generate blocks styles
--------------------------------------------------------------*/


.gb-container { position: relative; }
figure{ margin:0; width:100%; height: auto; }


/*--------------------------------------------------------------
# slick slier
--------------------------------------------------------------*/

.wp-block-cb-carousel .slick-dots li { margin:0;}
.wp-block-cb-carousel .slick-dots li button:before { }
.wp-block-cb-carousel .slick-dots li button:before { font-size:50px; opacity:0.2; color:var(--black); }
.wp-block-cb-carousel .slick-dots li.slick-active button:before { opacity:1; color:var(--orange); }
.wp-block-cb-carousel .slick-dots li button:not(:hover):not(:active) { }
.wp-block-cb-carousel .slick-dots li button:before { font-size:12px; }

 
.wp-block-cb-carousel .slick-next, 
.wp-block-cb-carousel .slick-prev{ width:30px; height:30px; font-size:0; background-repeat: no-repeat !important; background-size: contain !important; color:black; }
.wp-block-cb-carousel .slick-next{ background-image:url(/wp-content/themes/brilliant-c/assets/svgs/icon-arrow.svg); }
.wp-block-cb-carousel .slick-prev{ background-image:url(/wp-content/themes/brilliant-c/assets/svgs/icon-arrow.svg); transform: scaleX(-1); }

.wp-block-cb-carousel .slick-next:before,
.wp-block-cb-carousel .slick-prev:before{ content:''; font-size:0;  }

.wp-block-cb-carousel .slick-next:not(:hover):not(:active),
.wp-block-cb-carousel .slick-prev:not(:hover):not(:active){ background-color: transparent; }

.wp-block-cb-carousel .slick-next:focus, 
.wp-block-cb-carousel .slick-next:hover, 
.wp-block-cb-carousel .slick-prev:focus, 
.wp-block-cb-carousel .slick-prev:hover { color:transparent; background-image:url(/wp-content/themes/brilliant-c/assets/svgs/icon-arrow.svg); }

.wp-block-cb-carousel .slick-next:hover:not(:active),
.wp-block-cb-carousel .slick-prev:hover:not(:active){ }

.wp-block-cb-carousel .slick-prev{ left:-80px !important; z-index:30; }
.wp-block-cb-carousel .slick-next{ right:-80px !important; z-index:30; }


@media all and ( max-width: 600px ) {
	.wp-block-cb-carousel .slick-prev{ left:-40px !important;  }
	.wp-block-cb-carousel .slick-next{ right:-40px !important; }
    .mobi-no-arrows .slick-prev,
    .mobi-no-arrows .slick-next{ display:none !important; }
    .mobi-no-dots   .slick-dots{ display:none !important; }
}


/*--------------------------------------------------------------
# plugin forms
--------------------------------------------------------------*/

.right-arrow{ padding-right:40px; position:relative; }
.right-arrow:before{ content:"\276F"; position:absolute; right:0; background-repeat: no-repeat;  top:0; width:28px; height:28px;  display:inline-block;  border-radius:50%; z-index: 30; border:1px solid currentColor; background: #d4d4d4; text-align: center; font-size: 18px; line-height: 26px; }