/*
Theme Name: White Web Worx
Theme URI: https://whiteweb.co.il
Author: WhiteWebWorx
Author URI: https://whiteweb.co.il/
Requires at least: 5.8.x
Requires PHP: 7.4.x
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap');

:root {
    --primary-color: #F96E8B;
    --secondary-color: #4D4D4D;
    --white: #fff;
    --black: #000;
    --f16: 16px;
    --f18: 18px;
    --f20: 20px;
    --f24: 24px;
    --f25: 25px;
    --f50: 50px;
    --f30: 30px;
    --f35: 35px;
}

html, body {font-family: "Assistant", sans-serif;}

.btn {background-color: var(--primary-color);color: var(--white);padding: 12px 32px;border-radius: 32px;}
.section-title {font-size: var(--f35);font-weight: 600;color: var(--secondary-color);}

@media(min-width: 1600px){
    body:not(.home){display: flex;flex-wrap: wrap;flex-direction: column;min-height: 100vh;}
    body:not(.home) .siteFooter {margin-top: auto;}
}

@media(max-width: 767px){
	.btn {padding: 8px 20px;}
	.section-title {font-size: var(--f24);}
}

/* Header */
.siteHeader {z-index: 9;width: 100%;left: 0;top: 0;position: sticky;}
.modal-open .siteHeader {padding-right: 17px; }
.siteHeader .menuBar {padding-top: 20px;padding-bottom: 20px;background-color: rgba(255,255,255,0.7);}
.page-template-homepage .siteHeader {position: fixed;}
.siteHeader .mainMenu .nav_menu .nav-item {margin-right: 8px;}
.siteHeader .mainMenu .nav_menu .nav-link {color: var(--secondary-color);padding: 10px;margin-right: 8px;}
.siteHeader .dropdown-toggle::after {display: none;}
.siteHeader .navbar-nav .dropdown-menu {text-align: right;}
.siteHeader .mainMenu .nav_menu .nav-item .nav-item {margin-right: 0;}

@media(min-width: 992px){    
    .siteHeader .mainMenu > .navbar {padding-top: 0; padding-bottom: 0;}
}

@media(max-width: 991px){
    .siteHeader .navbar-toggler-icon {height: auto;width: auto;}
    .siteHeader .navbar-nav {padding-left: 15px;padding-right: 15px;} 
    .siteHeader .navbar-nav .dropdown-menu.showinmobile {display: block;}
    .siteHeader .navbar-nav .dropdown-menu {text-align: right;border: 0;padding-right: 15px;}
}

@media(max-width: 767px){
	.siteHeader .menuBar {padding-top: 10px;padding-bottom: 10px;}
	.page-template-homepage .siteHeader {position: sticky;}
}

/*Header Popup*/
.siteHeader .topBar a {background-color: var(--primary-color); text-decoration: none; color: var(--white); font-size: var(--f18);overflow: hidden;
    white-space: nowrap;direction: ltr;}
.siteHeader .topBar a .carousel-content span {padding: 0 50px; }
#contactModal .formBox input:not(.btn), #contactModal .formBox textarea {width: 100%; direction: rtl; padding: 8px 10px; border-radius: 0; border: 1px solid #C2C2C2; color: var(--black);}
#contactModal .modal-header {border:0;}
#contactModal .modal-body {padding-top: 0;}
#contactModal .formBox input:not(.btn)::placeholder, , #contactModal .formBox textarea::placeholder {color: var(--black);}
#contactModal .wpcf7-spinner {display: none;}
#contactModal .mainForm .formBox {width: 100%; max-width: 290px; margin: 0 auto;direction: rtl; }
#contactModal .mainForm .formTitle {font-size: var(--f25); font-weight: 700; }
#contactModal .mainForm .formSubTitle {font-size: var(--f20);margin-bottom: 30px;}
#contactModal .mainForm .btn {padding: 10px 62px;}
#contactModal .modal-header .btn-close {opacity: 1;}
#contactModal .wpcf7-response-output {direction: rtl;}
#contactModal .invalid .wpcf7-response-output {display: none; }

@media(max-width: 991px){    
    .siteHeader .topBar a .carousel-content span {padding: 0 45px;}
}


/*Banner*/
.mainBanner .contentBox h1 {font-size: var(--f50);font-weight: 700;color: var(--secondary-color);}
.mainBanner .contentBox p {font-size: var(--f30);color: var(--secondary-color);}


@media(min-width: 992px){
    .mainBanner img {max-height: 85vh;object-fit: cover;}
}

@media(max-width: 767px){
	.mainBanner .contentBox h1 {font-size: var(--f24);}
	.mainBanner .contentBox p {font-size: var(--f16);}
}

/*Image Content*/
.imageContentSection .imageBoxes .imgBox h3 {font-size: var(--f20);font-weight: 600;color: var(--secondary-color);padding-right: 35px;position: relative;}
.imageContentSection .imageBoxes .imgBox h3:before {content: '';width: 25px;height: 25px;background-image: url(images/title-icon.svg);background-size: contain;position: absolute;right: 0;background-repeat: no-repeat;}

@media(max-width: 991px){
    .imageContentSection .boxContent p:last-child {margin-bottom: 0;}
    .imageContentSection .imageBoxes .imgBox {padding-top: 15px;padding-bottom: 15px;}
}
@media(max-width: 767px){
    .imageContentSection .imageBoxes .imgBox h3:before {width: 20px;height: 20px;}
    .imageContentSection .imageBoxes .imgBox h3 {font-size: var(--f16);padding-right: 25px;}
    .imageContentSection .imageBoxes .imgBox {padding-top: 10px;padding-bottom: 10px;}
}

/*Content Section*/
.contentSection .contentBox {margin-bottom: 30px; }

@media(max-width: 991px){
    .contentSection .contentBox:last-child {margin-bottom: 0px; }
}

/*Footer*/
.siteFooter {border-top: 1px solid var(--primary-color);}
.siteFooter .row > div:first-child ul li:not(:last-child) {margin-left: 30px;}
.siteFooter .row > div:last-child ul li:not(:first-child) {margin-right: 30px;}
.siteFooter .menuBox ul {display: flex; list-style: none; padding: 0;margin: 0;}
.siteFooter .menuBox ul li a {color: var(--secondary-color);text-decoration: none;}

@media(max-width: 991px){
    .siteFooter .menuBox ul {justify-content: center;flex-wrap: wrap;flex-direction: column;align-items: center;}
    .siteFooter .row > div ul li {margin-right: 10px;margin-left: 10px;}
    .siteFooter .row > div:first-child ul {margin-bottom: 15px;}
    .siteFooter .row > div:first-child ul li:not(:last-child) {margin-left: 10px;}
    .siteFooter .row > div:last-child ul li:not(:first-child) {margin-right: 10px;}
}

/*Inner Page*/
.innerPage {color: var(--secondary-color);}
.innerPage .mainContent ol {list-style-position: outside; padding-right: 20px; font-size: 18px; font-weight: 600; }
.innerPage .mainContent ol li {padding: 10px 0; }
.imageContentInner .imgBox img, .imageSection .imgBox img {height: 414px;object-fit: cover;}
.imageContentInner .imageBoxes > .row {justify-content: center; }

@media(max-width: 1179px){
    .imageContentInner .imgBox img, .imageSection .imgBox img {height: 280px;}
}
@media(max-width: 991px){
    .imageContentInner .imgBox img, .imageSection .imgBox img {height: 180px;}
    .imageContentInner .imageBoxes > .row {justify-content: center; }
}