/* 
Theme Name: Intellego
Author: G Studio Branding Agenxy
Author URI: https://www.gstudiobranding.com/
Template: hello-biz
Version: 2.0.0
Text Domain: hello-biz-child
*/

/* Add your custom styles here */

/*
---------------------------------
General:
---------------------------------
*/
[id] {
  scroll-margin-top: 80px; /* height of your fixed header */
}

.maroon-hover{
	transition: color 300ms;
}
.maroon-hover:hover{
	color: #761D2D !important;
}

.red-hover a{
	transition: color 300ms;
}
.red-hover a:hover{
	color: #b5202d !important;
}

.p-margin-none p{
  margin-bottom: 0;
}

.disable-transition{
  transition: none !important;
}

.overflow-hidden{
  overflow: hidden;
}

.link-style,
.link-style a,
.link-style a:hover,
.link-style a:active,
.link-style a:focus,
.link-style a:visited{
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.position-static{
  position: static;
}

.position-relative{
  position: relative;
}

.child-inherit-position > *{
  position: inherit;
}

.who-we-are-team-image > a{
	display: block;
}


.team-popup .dialog-widget-content{
/* 	height: calc(100vh - 40px); */
}

.team-popup .dialog-message,
.team-popup .elementor-location-popup,
.team-popup .elementor-location-popup > *{
	height: 100% !important;
}

.team-popup-info {
	overflow-y: scroll;
}



@media(min-width: 1025px){
	.team-popup .dialog-widget-content{
		height: 400px;
	}
}


#header {
  background-color: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(25px); 
  -webkit-backdrop-filter: blur(25px);
}

.slide-gradient > *{
	z-index: 1;
}

.slide-gradient::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent linear-gradient(105deg, #232B37A0 0%, #232B3776 40%, #232B370F 77%, #8AACD600 100%) 0% 0% no-repeat padding-box;
}

.slide-gradient.beige::after{
  background: transparent linear-gradient(270deg, #683E38E0 0%, #683E384D 40%, #683E3800 77%, #683E3800 100%) 0% 0% no-repeat padding-box;
}

.slide-gradient.left::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent linear-gradient(255deg, #232B37A0 0%, #232B3776 40%, #232B370F 77%, #8AACD600 100%) 0% 0% no-repeat padding-box;
}

.slide-gradient.left.beige::after{
  background: transparent linear-gradient(90deg, #683E38E0 0%, #683E384D 40%, #683E3800 77%, #683E3800 100%) 0% 0% no-repeat padding-box;
}


@media (max-width:767px){
	.slide-gradient.left.beige::after{
		background: transparent linear-gradient(90deg, #683E38E0 0%, #683E384D 80%, #683E3800 100%, #683E3800 100%) 0% 0% no-repeat padding-box;
	}
}

/*
---------------------------------
Line buttons:
---------------------------------
*/
.hover-line-button .elementor-button-text,
.button-bb1 .elementor-button-text{
  position: relative;
}

.hover-line-button .elementor-button-text::after,
.button-bb1 .elementor-button-text::after{
  content: "";
  width: 100%;
  height: 1px;
  background-color: #687086;
  background-color: currentColor;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  transition: width 300ms;
}

.hover-line-button:hover .elementor-button-text::after,
.button-bb1:hover .elementor-button-text::after{
  width: calc(100% + 30px)
}


/* Add this to your stylesheet */
.zoom-loop {
  display: inline-block;              /* make sure transform applies cleanly */
  animation: zoomInOut 15s ease-in-out infinite;
  transform-origin: center center;    /* zoom from center (adjust if needed) */
}

@keyframes zoomInOut {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }  /* zoom in */
  100% { transform: scale(1); }    /* zoom out */
}


/*
---------------------------------
Menu Icon:
---------------------------------
*/
.icon-hamburger{
  width: 23px;
  height: 20px;
  position: relative;
  cursor: pointer;
  display: block;
}

.icon-hamburger span{
  display: block;
  width: 100%;
  height: 2px;
  background-color: #232B37;
  position: absolute;
  left: 0;
  transition: all 300ms;
}

.icon-hamburger span:nth-child(1){
  top: 0;
}

.icon-hamburger span:nth-child(2){
  top: calc(50% - 1px);
}
.icon-hamburger span:nth-child(3){
  bottom: 0;
}

.icon-hamburger:hover span:nth-child(2){
  left: -5px;
}

.icon-hamburger:hover span:nth-child(1),
.icon-hamburger:hover span:nth-child(3){
  left: 5px;
}

.button-text-left .elementor-button{
  text-align: left;
}


.menu-bg-swap-button a{
  position: static;
}

.menu-bg-swap-button a::after {
  content: "";
  height: 1px;
  width: 0;
  position: absolute;
  bottom: -10px;
  right: 0;
  display: block;
  background-color: #000;
  transition: all 300ms;
}

.menu-bg-swap-button a::before {
  content: "";
  width: 10px;
  height: 5px;
  position: absolute;
  bottom: -16px;
  right: 0;
  display: block;
  transition: right 300ms;
  border-top: 1px solid transparent;
  transform: rotate(-30deg)
}

.menu-bg-swap-button a:hover::after{
  width: 100vw;
}

@media(max-width: 767px){
	.menu-bg-swap-button a::after{
		bottom: -5px;
	}
}

@media(min-width:768px){
  .menu-bg-swap-button a{
    position: relative;
  }

  .menu-bg-swap-button a::after{
    right: -30px;
    bottom: -15px;
  }
  
  .menu-bg-swap-button a:hover::after{
    width: calc(100% + 70px);
  }
  
  .menu-bg-swap-button a:hover::before {
    right: calc(100% + 30px);
    border-color: #000;
    transform: rotate(-30deg)
  }
}

@media(min-width:992px){  
  .menu-bg-swap-button a:hover::after{
    width: calc(100% + 110px);
  }
  
  .menu-bg-swap-button a:hover::before {
    right: calc(100% + 69px);
  }
}


/*
---------------------------------
Elementor overrides:;
---------------------------------
*/
.vertical-separator-wrap{
  width: 1px !important;
}

.vertical-separator-wrap .vertical-separator{
  width: 1px;
  height: 100%;
}

.vertical-separator-wrap .elementor-divider,
.vertical-separator-wrap .elementor-divider-separator{
  height: 100% !important;
  border-right: 1px solid;
  border-color: var(--divider-color);
}


/*
---------------------------------
General animations:
---------------------------------
*/
.js-word-fade{}

.animate-in-line-text{
    transform: rotate(-90deg) translate(calc(-100% + 65px), -10px);
    transform-origin: top left;
    width: auto;
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.animate-in-line-text p{
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 0;
  margin-right: 20px;
  opacity: 0;
}

.animate-in-line-text hr{
  border: none;
  height: 1px;
  width: 0;
  background-color: #E8DFD8 !important;
}

@media(max-width: 767px){
	.animate-in-line-text{
		left: -15px;
	}
}



/*
---------------------------------
Circle graphic animation section:
---------------------------------
Home Page
---------------------------------
*/
.circle-scroll-anim-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.circle-scroll-anim-section .circle-scroll-vertical-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px; /* thickness of the line */
  height: 0%;
  background-color: #761D2D; /* change to match your design */
  z-index: 0; /* behind circle */
}

.circle-scroll-anim-section .circle-scroll-wrapper {
  position: relative;
  width: 480px; /* initial small size */
  height: 480px;
}

.circle-scroll-anim-section .circle-scroll-img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  transform: scale(0.2);
}

.circle-scroll-anim-section .circle-scroll-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.65); /* start smaller */
  opacity: 0;
  width: 480px;
  mix-blend-mode: multiply;
}

@media(max-width:767px){
	.circle-scroll-anim-section .circle-scroll-wrapper {
	  width: 300px;
	  height: 300px;
	}
}



/*
---------------------------------
Left Arc animation section:
---------------------------------
Home Page
---------------------------------
*/

.arc-container .arc-left-overlay{
  position:absolute; 
  inset:0;
  width:100%; 
  height:100%;
  object-fit:fill;      /* fill the container; preserveAspectRatio="none" in SVG lets it stretch */
  pointer-events:none;  /* overlay won't block clicks */
}

.arc-container .arc-left{
  height: 100%;
}

.arc-container .arc-left svg{
  height: 100%;
  width: 100%;
}

.arc-container .arc-img{
  width: 100%;
  height: 100%;
}



.js-seq-list .js-seq-item { will-change: transform, opacity; }
.js-seq-list .js-seq-item { opacity: 0; }


/*
---------------------------------
Red CTA button
---------------------------------
Home Page, contact
---------------------------------
*/
.hover-button-outer{

}

.has-content-trigger{
  cursor: pointer;
}

.hover-button-wrap,
.e-con.hover-button-wrap{
  position: relative;
}

.hover-button-hover,
.e-con.hover-button-hover{
  opacity: 0;
  transition: opacity 300ms;
  position: relative;
  z-index: 1;
}

.hover-button-base,
.e-con.hover-button-base{
  position: absolute;
  opacity: 1;
  transition: opacity 300ms;

  height: 100%;
  display: flex;
  justify-content: center;
}

.hover-button-icon{
  width: 56px;
  height: 56px;
}

.hover-button-content,
.e-con.hover-button-content { display: none; }
.hover-button-content.active { display: block; } /* optional if you rely on JS to show/hide */


.hover-button-outer:hover,
.hover-button-outer.active{
  background-color: #761D2D;
}

.hover-button-outer:hover .hover-button-hover,
.hover-button-outer.active .hover-button-hover{
  opacity: 1;
}

.hover-button-outer:hover .hover-button-base,
.hover-button-outer.active .hover-button-base{
  opacity: 0;
}

.hover-button-outer:hover .hover-button-icon,
.hover-button-outer.active .hover-button-icon{
  color: #F7F5F4;
  transform: rotate(90deg);
}

.hover-button-outer:hover .hover-button-icon svg g,
.hover-button-outer.active .hover-button-icon svg g{
  color: #F7F5F4;
  stroke: #F7F5F4;
}

.hover-button-outer:hover .hover-button-icon svg path,
.hover-button-outer.active .hover-button-icon svg path{
  color: #F7F5F4;
  fill: #F7F5F4;
}


/*
---------------------------------
Centered carousel:
---------------------------------
Our Schools Page
---------------------------------
*/
/* */
/* Allow previews to show */
/*.bg-centered-carousel .elementor-main-swiper,
.bg-centered-carousel .elementor-swiper,
.bg-centered-carousel .swiper {
  overflow: visible;
}*/

/* Limit slide size for 'auto' mode */
.bg-centered-carousel .swiper-slide {
  width: auto;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 300ms;
}

.swiper-slide.swiper-slide-active{
  opacity: 1;
}

@media(min-width:992px){
  .bg-centered-carousel .swiper-slide {
    /*max-width: calc(100%/3);*/
  }
}

/* Arrows styling */
.bg-centered-carousel .custom-prev,
.bg-centered-carousel .custom-next {
  position: absolute;
  z-index: 10;
  width: 40px;
  height: 40px;
  cursor: pointer;
  user-select: none;
  top: 540px;

  background-image: url(https://engagethis.co.za/__external/vault/intellego/wp-content/uploads/2025/08/white-large-circle-arrow-transparent-backg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.bg-centered-carousel .custom-prev{
  transform: rotate(180deg);
}

.bg-centered-carousel .custom-prev:hover,
.bg-centered-carousel .custom-next:hover {
}

/* Responsive tweak */
@media (max-width: 768px) {
  .bg-centered-carousel .custom-prev,
  .bg-centered-carousel .custom-next {
    width: 32px;
    height: 32px;
  }

  .bg-centered-carousel .custom-prev{
    left: 32px !important;
  }

  .bg-centered-carousel .custom-next {
    right: 0;
    left: unset !important;
  }
}



/*
---------------------------------
Custom accordion layout with left Icons:
---------------------------------
Our Schools Page
---------------------------------
*/
.icon-accordion summary{
  padding-top: 20px !important; 
  padding-bottom: 20px !important; 
}

.icon-accordion .e-n-accordion-item-title-text{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.icon-accordion .e-n-accordion-item-title-text span{
  margin-top: 5px;
  font: oblique normal normal 18px/28px Montserrat, sans-serif;
}

.icon-accordion .e-n-accordion-item-title-text:before{
  content: "";
  display: block;
  width: 95px;
  height: auto;
  min-height: 64px;
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: content-box;

  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
  margin-bottom: 10px;

  
  background-size: 95px auto;
  background-repeat: no-repeat;
  background-position: center left;
}

@media(min-width: 768px){
  .icon-accordion .e-n-accordion-item-title-text{
    flex-wrap: nowrap;
  }

  .icon-accordion .e-n-accordion-item-title-text:before{
    height: 100%;

    border-right: 1px solid #F7F5F4;
    padding-right: 40px;
    margin-right: 40px;

    border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }

  .icon-accordion .e-n-accordion-item-title-text span{
    margin-left: 15px;
  }
}

/* usage */
/*.icon-accordion #sjb-brand .e-n-accordion-item-title-text:before{
  background-image: url('https://engagethis.co.za/__external/vault/intellego/wp-content/uploads/2025/08/st-johns-school-logo.svg');
}*/


/*
---------------------------------
Custom icon on accordions:
---------------------------------
Our Schools
---------------------------------
*/

.e-n-accordion-item-title-icon{
  position: relative;
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  flex-shrink: 0;
}

.elementor-widget-n-accordion .e-closed,
.elementor-widget-n-accordion .e-opened{
  display: block !important;
  position: absolute;
  width: 100% !important;
  height: 50% !important;
  transition: top 300ms;
  top: 0;
}

.elementor-widget-n-accordion .e-closed svg,
.elementor-widget-n-accordion .e-opened svg{
  display: none;
}

.elementor-widget-n-accordion .e-closed::before,
.elementor-widget-n-accordion .e-opened::before,
.elementor-widget-n-accordion .e-closed::after,
.elementor-widget-n-accordion .e-opened::after{
  position: absolute;
  content: "";
  background-color: #fff;
  display:block;
}

.elementor-widget-n-accordion.icon-blue .e-closed::before,
.elementor-widget-n-accordion.icon-blue .e-opened::before,
.elementor-widget-n-accordion.icon-blue .e-closed::after,
.elementor-widget-n-accordion.icon-blue .e-opened::after{
  background-color: #1f2124;
}

.elementor-widget-n-accordion .e-closed::before,
.elementor-widget-n-accordion .e-opened::before{
  height: 100%;
  width: 1px;
  top: 0%;
  right: 50%;
}

.elementor-widget-n-accordion .e-closed::before{
  top: 100%;
}

.elementor-widget-n-accordion .e-closed::after,
.elementor-widget-n-accordion .e-opened::after{
  width: 100%;
  height: 1px;
  top: 100%;
  right: 0;
}


.e-n-accordion-item:hover .e-closed,
.e-n-accordion-item[open] .e-closed{
  top: 5px;
}

.e-n-accordion-item:hover .e-opened,
.e-n-accordion-item[open] .e-opened{
  top: -5px;
}



/*
---------------------------------
Banner linked to content:
---------------------------------
Our Schools
---------------------------------
*/
.content-trigger-banner{}
/*.hidden-banner-content{
  display: none;
}
*/
/* Base hidden state for the wrapper */
.content-trigger-banner-wrap .hidden-banner-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.content-trigger-banner-wrap .hidden-banner-content.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* Icon (image) enters first */
.content-trigger-banner-wrap .hidden-banner-content .elementor-widget-image > img {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.content-trigger-banner-wrap .hidden-banner-content.is-active .elementor-widget-image > img {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.1s; /* image first */
}

/* Text enters after icon */
.content-trigger-banner-wrap .hidden-banner-content .elementor-widget-text-editor > * {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.content-trigger-banner-wrap .hidden-banner-content.is-active .elementor-widget-text-editor > * {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; /* text after image */
}





/* */
.prev-btn,
.next-btn{
  cursor: pointer;
}



/* Horizontal full width line */
.horizontal-line-wrap{
  position: relative;
  z-index: 10;
}

.horizontal-line-wrap .base-line{
  position: relative;
  width: 100%;
  height: 1px;
  background-color: #E8DFD8;
}

.horizontal-line-wrap .over-line{
  background-color: #761D2D;
  width: 100px;
  height: 4px;
  position: absolute;
  top: 0;
  left: 30px;
  transform: translate(0, -50%);
}

.horizontal-line-wrap.pillars .icon{
  position: absolute;
  top: 0;
  left: -40px;
  transform: translate(0, -50%);
  width: 20px;
  height: 20px;
}

.horizontal-line-wrap.pillars.globally-connected .icon{
  left: -60px;
  width: 40px;
  height: 40px;
}

.horizontal-line-wrap.pillars.globally-connected .base-line{
  width: calc(100% - 120px);
  left: 90px;
}

.horizontal-line-wrap.pillars .base-line{
  width: calc(100% - 100px);
  left: 70px;
}

.horizontal-line-wrap.pillars .over-line{
  left: 0px;
}


@media (min-width: 768px){
  .horizontal-line-wrap,
  .horizontal-line-wrap > *{
    position: static;
  }

  .horizontal-line-wrap .base-line{
    position: absolute;
    left: 0;
  }

  .horizontal-line-wrap .over-line{
    left: 50%;
  }

  .horizontal-line-wrap.align-left .over-line{
    left: 80px;
  }

  .horizontal-line-wrap.pillars .base-line{
    width: calc(100% - 200px);
    left: 100px;
  }

  .horizontal-line-wrap.pillars .over-line{
    left: calc(50% - 50px);
  }
}


@media (min-width: 768px) and (max-width: 991px){
  .horizontal-line-wrap .base-line{
    width: calc(100% + 60px);
  }

  .horizontal-line-wrap .over-line{
    left: calc(50% - 5px);
  }

  .horizontal-line-wrap.pillars .over-line{
    left: calc(50% - 55px);
  }
}


@media (min-width: 768px) and (max-width: 1199px){
  .horizontal-line-wrap.align-left .over-line{
    left: 60px;
  }

  .horizontal-line-wrap.featured-news-article .over-line{
    left: 30px;
  }
}

@media (min-width: 1024px){
  .horizontal-line-wrap.featured-news-article .over-line{
    left: calc(40% - 35px);
  }

  .horizontal-line-wrap.pillars .base-line {
    width: calc(100% - 140px);
    left: 120px;
  }
	
  .horizontal-line-wrap.pillars.globally-connected .base-line{
    width: calc(100% - 180px);
    left: 140px;
  }
}




/* The pinned section is exactly one viewport tall */
.pinned-slides {
  position: relative;
  height: 100vh;       /* fixed height = stable pin spacing */
  overflow: hidden;    /* hides crossfade edges */
  transition: none !important; /* neutralize Elementor transforms */
}

/* The stage contains absolutely stacked slides */
.pinned-slides > .slides-stage {
  position: relative;
  width: 100%;
  min-height: 100%;
}

/* All slides stack on top of each other */
.pinned-slides .slide {
  position: absolute;
  inset: 0;
  /*display: grid;*/
  /*grid-template-columns: 1fr 1fr;  /* text left, image right */*/
  /*align-items: center;*/
  /*gap: clamp(16px, 4vw, 48px);*/
  opacity: 0;          /* GSAP controls visibility */
  pointer-events: none;/* only the visible slide will be interactive */
}

/* First slide visible before the user reaches the pin */
/*.pinned-slides .slide:first-child {
  opacity: 1;
  pointer-events: auto;
}*/

/* Media defaults */
/*.pinned-slides .slide-media img,
.pinned-slides .slide-media picture,
.pinned-slides .slide-media video {
  max-width: 100%;
  height: auto;
  display: block;
}*/

/* Small screens: stack text above image */
@media (max-width: 768px) {
/*  .pinned-slides .slide {
    grid-template-columns: 1fr;
    padding: 24px 0;
  }*/
}




/*
---------------------------------
Button with vertical split icon:
---------------------------------
Our Schools
---------------------------------
*/
.split-button .elementor-button{
	position: relative;
	padding-right: 70px !important;
}

.split-button .elementor-button-content-wrapper::before,
.split-button .elementor-button-text::before,
.split-button .elementor-button-content-wrapper::after,
.split-button .elementor-button-text::after{
  position: absolute;
  content: "";
  background-color: #fff;
  display:block;
}

.split-button .elementor-button-content-wrapper::before,
.split-button .elementor-button-text::before,
.split-button .elementor-button-content-wrapper::after,
.split-button .elementor-button-text::after{
  background-color: #fff;
	transition: top 300ms;
}

.split-button .elementor-button-content-wrapper::before,
.split-button .elementor-button-text::before{
  height: 14px;
  width: 1px;
  top: 50%;
  right: 35px;
}

.split-button .elementor-button-content-wrapper::before{
  top: calc(50% - 14px);
}

.split-button .elementor-button-content-wrapper::after,
.split-button .elementor-button-text::after{
  width: 28px;
  height: 1px;
  top: 50%;
  right: 21px;
}

.split-button .elementor-button:hover .elementor-button-content-wrapper::before{
  top: calc(50% - 19px);
}

.split-button .elementor-button:hover .elementor-button-content-wrapper::after{
  top: calc(50% - 5px);
}

.split-button .elementor-button:hover .elementor-button-text::before{
  top: calc(50% + 5px);
}

.split-button .elementor-button:hover .elementor-button-text::after{
  top: calc(50% + 5px);
}




/*
---------------------------------
Overline fix:
---------------------------------
Our Schools
---------------------------------
*/
.philosophy-img-pos-fix{
/* 	position: absolute; */
/* 	z-index: 10; */
	width: 100%;
}