/*
 Theme Name:   Juggle It
 Theme URI:    https://connvisor.com
 Description:  Child Theme - Connvisor Digital
 Author:       Connvisor
 Author URI:   https://connvisor.com
 Template:     Divi
 Version:      1.0.1
*/

:root{
  --title-line-color: #25AEA6;
  --title-line-thickness: 2px;
  --primary-color: #25AEA6;
  --secondary-color: #F4F1A6;
  --third-color: #6A56DF;
}
.menu-item-mobile-only {display: none !important}
/*****Add any custom CSS below this line*****/
body{font-family: 'Assistant', sans-serif !important;}
/**---BODY & GENERAL---**/
#et-top-navigation {float: none !important; font-weight: 400; padding: 0 !important; display: flex; justify-content: space-between; height: 100px}
#top-menu-nav {float: none !important; margin: auto; display: flex; justify-content: center; padding-bottom: 0 !important}
#top-menu {padding: 10px 45px 15px 45px; background-color: #F8F5F5; border-radius: 40px}
.et_mobile_menu li a {font-size: 20px}
.nav li ul {top: 25px !important}
#top-menu li.current-menu-item>a:after, #top-menu li.current_page_item>a:after {
content: "";
  position: absolute;
  left: 0;
  bottom: -8px; 
  width: 100%;
  height: 2px; 
  background-color: #6A56DF;
}

/* Responsive background video column */
.hero-video-column {aspect-ratio: 16 / 9;min-height: 240px; }


li.menu-item-has-children>a:after {display: none !important}
.d-none {display: none;}
.title-image {display: flex; justify-content: flex-start; align-items: center; position: relative; z-index: 10}
.title-image img {position: relative; top: 6px; right: 5px;}
#team-values {display: flex; justify-content: space-between; align-items: center; list-style-type: none; padding-bottom: 0; gap: 10px}
#team-values li {border: 1px solid #000; padding: 1px 5px; border-radius: 25px; min-width: 155px; text-align: center}
.header-phone {background-color: var(--third-color); color: #fff; position: absolute; left: 0; top: 30px ; padding: 8px 10px; border-radius: 50px; display: flex}
.header-phone a {color: #fff; font-weight: 700; line-height: 1; padding: 0;}
#main-header {box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.1);}
.d-flex {display: flex}
.w-200 {width: 200px !important}
.align-items-center {justify-content: center;}
#top-menu li li a {padding-right: 0 !important;}
#top-menu li li a::after{bottom: 0 !important}

.arrow-button {min-width: 200px; padding: 1rem !important; text-align: right; min-height: 52px; font-size: 22px; display: block }
.arrow-button::before{
  content: url('/wp-content/themes/Divi-Child/images/icons/purple-top-left-arrow.svg');
  display: block !important;
  font-size: 16px;
  width: 18px;
  height: 18px;
  left: -3px;
  top: -3px;  
  opacity: 1 !important;
  margin-left: 0 !important;
  transition: transform 0.4s ease; /* smooth rotation */
}
.arrow-button-white {min-width: 200px; padding: 1rem !important; text-align: right; min-height: 52px; font-size: 22px; background: #fff !important; color: #6A56DF !important; display: inline-block}

.arrow-button-white::before{
  content: url('/wp-content/themes/Divi-Child/images/icons/arrow-left-white-purple-bg.svg');
  display: block !important;
  font-size: 16px;
  width: 18px;
  height: 18px;
  left: -3px;
  top: -3px;  
  opacity: 1 !important;
  margin-left: 0 !important;
}



.yellow {color: #F4F1A6}
.lightGreen {background: #acdec7; border: none;}
.lightYellow {background: #F4F1A6; border: none}
.darkGreen {background: #25AEA6; border: none;}
.purple {background: #6A56DF; border: none;}
.arrow-white-wrapper  .et_pb_button:hover {background-color: #6A56DF !important }
.mt-5 {margin-top: 30px}
.hp-hero-slider {direction: ltr; }
.hp-hero-slider .slick-dots {padding-bottom: 0}
.hp-hero-slider img {border-radius: 25px !important; margin-top: 1rem}
.slick-dots li.slick-active button:before {color: #fff; opacity: 1}
.slick-dots li button:before {color: #fff; font-size: 10px}
.flex-img-text-column {display: flex}
.flex-img-text-column img {border-radius: 32px; margin-right: 15px; width: 380px; height: 380px}
.flex-img-text-column h4 {font-size: 32px; font-weight: 700; color: #fff; line-height: 1}
.flex-img-text-column .text p {color: #fff; line-height: 1; font-size: 21px; font-weight: 400; margin-top: 15px}
.text-button-wrapper {display: flex; justify-content: space-between; flex-direction: column; }
.unequal-rect-column-item-light .flex-img-text-column h4, .unequal-rect-column-item-light .flex-img-text-column p {color: #161617}
@media (min-width: 981px) {
    .unequal-rect-column-item-light .et_pb_column_2_5, .unequal-rect-column-item .et_pb_column_2_5{
        width: 48.2% !important;
    }
	.unequal-rect-column-item-light .et_pb_column_3_5, .unequal-rect-column-item .et_pb_column_3_5{
        width: 54.8% !important;
    }
}
.row-flex-center {display: flex; justify-content: center; align-items: center}
.column-flex-center {display: flex; flex-direction: column; justify-content: center; align-items: center}
.column-flex-center .et_pb_text {width: 100%; text-align: right !important}
.column-secret-is-team::after{
  content: url('/wp-content/themes/Divi-Child/images/icons/juggle-icon-decoration.svg');
  position: absolute;  
  width: 228px;
  height: 290px;
  left: -100px;
  top: 0;  
}
.larger {font-size: 40px}
.row-37-31-31 .et_pb_column_1_2 {width: 39% !important}
.row-37-31-31 .et_pb_column_1_4 {width: 31% !important}
.row-35-36-25 .et_pb_column_1_3:first-child {width: 35% !important}
.row-35-36-25 .et_pb_column_1_3 {width: 35% !important}
.row-35-36-25 .et_pb_column_1_3:last-child {width: 25% !important}
.row-55-45 .et_pb_column_3-5 {width: 55% !important}
.row-55-45 .et_pb_column_2-5 {width: 45% !important}
.top-right-juggle-decoration::before{
  content: url('/wp-content/themes/Divi-Child/images/icons/top-right-decoration.svg');
  position: absolute;  
  right: 0;
  top: 0;  
}
.testimonials-wrapper .item {background: #fff; border-radius: 40px; padding: 80px 50px; margin: 0 10px}
.testimonials-wrapper .item .rating img {margin: auto; margin-bottom: 15px}
.testimonials-wrapper .item {font-size: 21px; line-height: 1.2}
.testimonials-wrapper .item .name-location {text-align: center}
.testimonials-wrapper .item .name {font-size: 26px; font-weight: 600; padding-bottom: 0; margin-top: 30px}
.testimonials-wrapper .item .location {font-size: 21px}
.slick-prev:before, .slick-next:before {color: var(--third-color); opacity: 1}


/******* BLOGS ************/
.custom-list li {
    list-style: none;
    padding-right: 28px;
    position: relative;
}

.custom-list li::before {
    content: "✔";
    position: absolute;
    right: 0;
    top: 0;
    color: #1bb934; /* green tick, change as needed */
    font-weight: bold;
}

#the-blog .et_pb_post {padding: 30px; background-color: transparent !important}
#the-blog .et_pb_post .entry-featured-image-url {padding: 15px !important;  }
#the-blog .et_pb_post .entry-featured-image-url img {border-radius: 30px !important;}

/* Pattern every 3 posts */
#the-blog .et_pb_salvattore_content > .column:nth-child(3n+1) .et_pb_post {
    background-color: #ACDEC7 !important;
}

#the-blog .et_pb_salvattore_content > .column:nth-child(3n+2) .et_pb_post {
    background-color: #F4F1A6 !important;
}

#the-blog .et_pb_salvattore_content > .column:nth-child(3n+3) .et_pb_post {
    background-color: #25AEA6 !important;
}
/********* CONTACT *************/
/* RTL container */
.contact {
  direction: rtl;
  text-align: right;
}

/* Grid for the first row */
.cf7-grid {
  display: grid;
  gap: 16px; /* spacing between fields */
}
.cf7-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

input[type="text"], input[type="email"], input[type="tel"] {background: #fff; padding: 14px; width: 100%; border-radius: 40px; border: none !important; font-size: 21px}
input[type="email"], input[type="tel"] {direction: rtl; text-align: right;}
textarea {background: #fff; padding: 30px; width: 100%; border-radius: 40px; border: none !important; font-size: 21px}
.wpcf7-submit {
  /* same base styles as before */
  min-width:150px; min-height:52px; padding:1rem; border-radius:40px;
  background:#fff !important; color:#6A56DF !important; border:none !important;
  font-size:22px; text-align:right; position:relative;  
}
.wpcf7-submit:hover {opacity: 0.8 !important; -webkit-transition: opacity 1000ms linear;
    -ms-transition: opacity 1000ms linear;
    transition: opacity 1000ms linear;}
.wpcf7-submit::before {
  content:""; position:absolute; left:0; top:3px;
  width:57px; height:57px; background:url('/wp-content/themes/Divi-Child/images/icons/arrow-left-white-purple-bg.svg') no-repeat center/contain;
}

.contact-form-white .wpcf7-submit {background: #6A56DF !important; color: #fff !important }
.contact-form-white .wpcf7-submit::before {background:url('/wp-content/themes/Divi-Child/images/icons/purple-top-left-arrow.svg') no-repeat center/contain}

@media (max-width: 980px) {
  .cf7-grid-3 { grid-template-columns: 1fr; }
}

/* Field block */
.cf7-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 20px; color: #fff;
  font-family: 'Assistant', sans-serif;
}

.contact-form-white .cf7-field label {color: #161617}

/* Make CF7 inputs full width and consistent */
.contact-rtl .wpcf7-form-control {
  width: 100%;
  box-sizing: border-box;
}

/* Submit alignment */
.cf7-actions {
  margin-top: 12px;
  text-align: right; /* keep submit aligned to the right in RTL */
}
.social-item {margin-left: 15px}
.social-item {color: #fff;}
.white-label .social-item {color: #161617}
.social-item .social-label {margin-left: 5px}

.hero-title h2 {display: flex; align-items: center; position: relative}
.hero-title h2 img {margin-right: 15px; margin-top: 15px; position: absolute; bottom: -22px; right: 150px;}

#about-hero .et_pb_image {position: relative; left: 0; bottom: -30px}
.workshop-wrapper {background-color: #FFFED9; padding: 30px; border-radius: 20px}
.workshop-flex {display: flex; justify-content: space-between; align-items: center}
.stick-bottom {position: absolute; bottom: 30px}
/* FOOTER */
#footer-widgets{padding: 80px 0 0 0 !important; border-bottom: 1px solid #6A56DF}
.footer-widget {float: right; }
.footer-widget:last-child .fwidget {float: none}
.et_pb_widget {float: right}
#footer-widgets .footer-widget li:before{display: none}    
#footer-widgets .footer-widget li{margin-bottom: 0; padding-right: 0; padding-bottom: 15px}
#footer-widgets .footer-widget p {padding-bottom: 15px}
.footer-widget .cf-item {padding-bottom: 15px}
#main-footer .footer-social {margin: 70px auto;}
#main-footer .footer-social h4 {color: #fff; font-size: 26px; font-weight: 500; margin-bottom: 30px; text-align: center;}
.footer-credit {color: #fff; font-size: 16px; text-align: left}

/******* FLIP CARD ANIMATION ***/
.flip-content{
  position: relative;
  border-radius: 16px;           /* optional */
  overflow: hidden;              /* keep edges clean */
  transform-style: preserve-3d;
  z-index: 0;                    /* create a stacking context */
}

/* Keep Divi modules above the background faces */
.flip-content > .et_pb_module{
  position: relative;
  z-index: 2;
}

/* 3) Two faces as backgrounds (front=image, back=gradient) */
.flip-content::before,
.flip-content::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .6s ease;
  pointer-events: none;          /* IMPORTANT: prevents hover flicker */
  z-index: 1;                    /* sit under the content (z-index:2) */
}

/* FRONT: mirrors the column’s own background (your image in Divi) */
.flip-content::before{
  background: inherit;           /* copies whatever background Divi set */
  transform: rotateY(0deg);
}

/* BACK: your gradient */
.flip-content::after{
  background: linear-gradient(180deg, #03A3A6 27.71%, #7CCAA6 79%, #F4F1A6 130.3%);
  transform: rotateY(180deg);
}

/* 4) Flip on hover/focus (keyboard friendly) */
.flip-content:hover::before,
.flip-content:focus-within::before{
  transform: rotateY(-180deg);
}

.flip-content:hover::after,
.flip-content:focus-within::after{
  transform: rotateY(0deg);
}

/* Hide the title smoothly on hover */
.flip-content:hover .absolute-bottom h2,
.flip-content:focus-within .absolute-bottom h2 {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

/* Default state: hidden text stays invisible */
.flip-content .content-to-flip {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

/* Reveal hidden text on hover */
.flip-content:hover .content-to-flip,
.flip-content:focus-within .content-to-flip {
  display: block !important;   /* overrides .d-none */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Optional: position and alignment for the revealed text */
.flip-content .content-to-flip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: right; /* since site is RTL */
  z-index: 3; /* above gradient background */
}

@media only screen and (min-width: 981px) {
    .et_header_style_left #et-top-navigation nav>ul>li>a, .et_header_style_split #et-top-navigation nav>ul>li>a {
        padding-bottom: 0 !important;
    }
    .et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation {
        padding: 42px 0 0 0 !important;
    }
    
  
    .et_pb_gutters3 .footer-widget {
        margin-left: 5.5%;
        margin-bottom: 70px;
        margin-right: 0;
    }
    .et_pb_gutters3 .footer-widget:last-child {margin-left: 0; margin-right: 0}
    .et_pb_gutters3.et_pb_footer_columns4 .footer-widget .fwidget {
        margin-bottom: 30px;
    }
        .et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation {
        padding: 0 0 0 0 !important;
    }
    .row-55-45 .et_pb_column_2_5, .row-55-45 .et_pb_column_2_5 {
        width: 45% !important;
    }  
}

@media only screen and (max-width: 981px){
  .header-phone {display: none}
  .hero-video-column {
    aspect-ratio: 16 / 9;
    min-height: 220px !important;
	display: block !important;
  }
	.flex-img-text-column img {width: auto !important; height: auto !important;}
  .mobile-column-reverse {display: flex ;flex-direction: column-reverse;}
  .mobile-column-margin {margin: 30px 15px !important; }
  .et_pb_row .et_pb_column.mobile-column-margin:last-child {margin-right: 15px !important}
  .flex-img-text-column img {margin-right: 0;}
  .text-button-wrapper {margin-top: 30px}
  .text-button-wrapper .et_pb_button {margin-top: 30px}
  .mobile-gutter {gap: 30px !important}
  .mobile-gutter .et_pb_column {margin-bottom: 0 !important}
  .row-37-31-31 {width: calc(100% - 30px) !important}
  .et_pb_row {width: calc(100% - 30px) !important}
  .row-37-31-31 .et_pb_column {width: 100% !important;}  
  .row-35-36-25 .et_pb_column_1_3, .row-35-36-25 .et_pb_column_1_3:first-child, .row-35-36-25 .et_pb_column_1_3:last-child {width: 100% !important; }  
  .slick-prev {right: -10px !important}
  .slick-next {left: -10px !important}
  .row-flex-center {flex-direction: column-reverse; padding: 0 15px; gap: 30px}
  .social-item {display: block}
  
  .align-items-center {align-items: center;}
  .hero-title h2 img {width: 60%; bottom: -8px; right: 104px}
  .workshop-flex {flex-direction: column; gap: 30px}
  .et_pb_toggle_title {padding-right: 10px !important;}
	#team-values {flex-direction: column; }
	.et_header_style_left #et-top-navigation .mobile_menu_bar {padding-bottom: 0 !important; padding-top: 34px !important}
	#logo {max-height: 100% !important;}
	.flip-content {min-height: 310px;}
	.workshop-row .et_pb_column:last-child {margin-bottom: 30px}	
	.workshop-row:after {display: none !important}
}

@media only screen and (max-width: 767px){
	.menu-item-mobile-only {display: block !important; margin-top: 30px; padding: 4px 15px;background: #6A56DF; text-align: center; border-radius: 25px;}
	.menu-item-mobile-only a {color: #fff !important}
	.hero-video-column {
    	aspect-ratio: 16 / 9;
	    min-height: 200px;
  	}
	
}