/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* === HERO BASE === */
.mai-hero,
.scroll-section-header {
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 60vh;
  background: linear-gradient(135deg,#287189,#287189,#469ba0,#469ba0,#6cbdc1);
  background-size: 400% 400%;
}

.mai-hero.animate, 
.scroll-section-header.animate {
  animation: gradientFlow 10s ease infinite, breatheDepth 12s ease-in-out infinite;
}

@keyframes gradientFlow {
  0%,100% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
}
@keyframes breatheDepth {
  0%,100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.05) saturate(1.1); }
}

/* === DEPTH OVERLAY & SHADOW === */
.mai-hero::before,
.mai-hero::after,
.scroll-section-header::before,
.scroll-section-header::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.mai-hero .hexagon,
.scroll-section-header .hexagon {
    --size: 1000px;
    background: red;
    position: absolute;
  clip-path: polygon(0% 20%, 0% 80%, 50% 100%, 100% 80%, 100% 20%, 50% 0%);
  width: var(--size);
  height: calc(var(--size) * 1.1547);
  transform: translate(50%,50%) rotate(90deg);
  z-index: 1;
    mix-blend-mode: overlay;
}

.mai-hero .hexagon-1,
.scroll-section-header .hexagon-1 {
    --size: 1500px;
    left:15.5%;
    bottom: 30%;
    background: #185266;
  transform: translate(-50%,50%) rotate(90deg);
  z-index: 1;
  opacity: 0;
}

.mai-hero.animate .hexagon-1,
.scroll-section-header.animate .hexagon-1 {
  animation: hexagon1In 3s ease-in-out forwards 0s;
}

@keyframes hexagon1In {
  0% {  
    opacity: 0;
    bottom: -100%;
  }
  100% { 
    opacity: .25;
    bottom: 30%;
      
  }
}


@keyframes moveHexagon1 {
  0% { 
    transform: translate(-50%,50%) rotate(90deg); 
  }
  100% { 
    transform: translate(-50%,50%) rotate(-90deg); 
  }
}

.mai-hero .hexagon-2,
.scroll-section-header .hexagon-2 {
    --size: 1200px;
    left:80%;
    bottom: 30%;
    background: #2D7188;
  transform: translate(-50%,50%) rotate(90deg) ;
  z-index: 2;
    opacity: 0;
}

.mai-hero.animate .hexagon-2,
.scroll-section-header.animate .hexagon-2 {
  animation: hexagon2In 3s ease-in-out forwards .2s;
}

@keyframes hexagon2In {
  0% {  
    opacity: 0;
    bottom: -100%;
  }
  100% { 
      opacity:.3;
    bottom: 30%;
  }
}

@keyframes moveHexagon2 {
  0% { 
  transform: translate(-50%,50%) rotate(-90deg);
  }
  100% { 
  transform: translate(-50%,50%) rotate(-90deg);
  }
}

.mai-hero .hexagon-3,
.scroll-section-header .hexagon-3 {
    --size: 1100px;
    left:40%;
    bottom: 27%;
    background: #90d7db;
  transform: translate(-50%,50%) rotate(90deg);
  z-index: 3;
  opacity: 0;
}

.mai-hero.animate .hexagon-3,
.scroll-section-header.animate .hexagon-3 {
  animation: hexagon3In 3s ease-in-out forwards .4s;
}

@keyframes hexagon3In {
  0% { 
    opacity: 0;
    bottom: -100%;
  }
  100% { 
      opacity:.25;
    bottom: 27%;
  }
}

@keyframes moveHexagon3 {
  0% { 
    transform: translate(-50%,50%) rotate(90deg);
  }
  100% { 
    transform: translate(-50%,50%) rotate(-90deg);
  }
}

.mai-hero .hexagon-4,
.scroll-section-header .hexagon-4 {
    --size: 850px;
    left:-5%;
    bottom: 10%;
    background: #7cd0d6;
  transform: translate(-50%,50%) rotate(90deg);
  z-index: 4;
  opacity: 0;
}

.mai-hero.animate .hexagon-4,
.scroll-section-header.animate .hexagon-4 {
  animation: hexagon4In 3s ease-in-out forwards .6s;
}

@keyframes hexagon4In {
  0% { 
    opacity: 0;
    bottom: -100%;
  }
  100% { 
      opacity:.25;
    bottom: 10%;
  }
}

@keyframes moveHexagon4 {
  0% { 
  transform: translate(-50%,50%) rotate(-90deg);
  }
  100% { 
  transform: translate(-50%,50%) rotate(90deg);
  }
}

.mai-hero .hexagon-5,
.scroll-section-header .hexagon-5 {
    --size: 1300px;
    left:56%;
    bottom: -25%;
    background: #2D7188;
  transform: translate(-50%,50%) rotate(90deg);
  z-index: 1;
  opacity: 0;
}

.mai-hero.animate .hexagon-5,
.scroll-section-header.animate .hexagon-5 {
  animation: hexagon5In 3s ease-in-out forwards .8s;
}

@keyframes hexagon5In {
  0% { 
    opacity: 0;
    bottom: -100%;
  }
  100% { 
      opacity:.3;
    bottom: -25%;
  }
}

@keyframes moveHexagon5 {
  0% { 
  transform: translate(-50%,50%) rotate(-90deg);
  }
  100% { 
  transform: translate(-50%,50%) rotate(90deg);
  }
}


@media all and (max-width: 980px) {
	.mai-hero .hexagon-1,
.scroll-section-header .hexagon-1 {
    --size: 1300px;
    left:-15.5%;
}
	.mai-hero .hexagon-2,
.scroll-section-header .hexagon-2 {
    --size: 800px;
}
	.mai-hero .hexagon-3,
.scroll-section-header .hexagon-3 {
    --size: 1000px;
    left:30%;
}
}

@media all and (max-width: 767px) {
	.mai-hero .hexagon-1,
.scroll-section-header .hexagon-1 {
    --size: 100vh;
    left:-45.5%;
}
	.mai-hero .hexagon-2,
.scroll-section-header .hexagon-2 {
    --size: 70vh;
}
	.mai-hero .hexagon-3,
.scroll-section-header .hexagon-3 {
    --size: 50vh;
    left:-15%;
}
	.mai-hero .hexagon-4,
.scroll-section-header .hexagon-4 {
    --size: 40vh;
    left:130%;
}
	.mai-hero .hexagon-5,
.scroll-section-header .hexagon-5 {
    --size: 60vh;
}
}

/* === TAGLINE (headline shimmer stays) === */
.mai-hero .mai-tagline,
.scroll-section-header .mai-tagline {
  font-size:1.4rem;
  max-width:850px !important;
  line-height:1.4;
  padding-bottom:0.2em;
  opacity:0;
  transform:translateY(10px);
  animation: taglineIn 1s ease forwards .25s, textShimmer 5s ease-in-out infinite .25s !important;
  background: linear-gradient(90deg,#ffffff 0%,#94d0d3 50%,#ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes taglineIn {to{opacity:1;transform:translateY(0);}}
@keyframes textShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === SUBTEXT (shimmer removed, stronger shadow) === */
.mai-hero .mai-subtext,
.scroll-section-header .mai-subtext {
  color: rgba(255,255,255,0.95);
  font-size: 1rem;
  max-width:950px !important;
  margin-top: 0.5em;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(15px);
}

.mai-hero.animate .mai-subtext,
.scroll-section-header.animate .mai-subtext {
  animation: subtextIn 1s ease forwards 500ms;
}
@keyframes subtextIn {to{opacity: 1; transform: translateY(0);}}

/* === CTA BUTTON === */
.mai-hero .mai-cta,
.scroll-section-header .mai-cta {
  opacity:0;
  transform:translateY(15px);
  z-index:2;
}

.mai-hero.animate .mai-cta,
.scroll-section-header.animate .mai-cta {
  animation: ctaIn 1s ease forwards 750ms;
}
@keyframes ctaIn {to{opacity:1;transform:translateY(0);}}

.mai-cta .elementor-button {
  background:#F3923C;
  color:#fff;
  border-radius:999px;
  padding:1em 2em;
  font-weight:700;
  letter-spacing:.5px;
  transition:all .3s ease;
}
.mai-cta .elementor-button:hover {
  background:#DC4C00;
  transform:scale(1.05);
}