/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */



/* ===== LAYOUT ===== */

.hero-split{
  display:flex;
  min-height:80vh;
}

.hero-text{
  width:50%;
  padding:80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-text p{
  font-size:18px;
  line-height:1.7;
  margin-top:20px;
  max-width:520px;
}

/* ===== TITLE ROTATION ===== */

.title-rotate{
  position:relative;
  height:120px;
}

.title-rotate h1{
  position:absolute;
  width:100%;
  opacity:0;
  margin:0;
  animation:titleFade 15s infinite;
}

/* 5 sec each */

.title-rotate h1:nth-child(1){animation-delay:0s;}
.title-rotate h1:nth-child(2){animation-delay:5s;}
.title-rotate h1:nth-child(3){animation-delay:10s;}

@keyframes titleFade{
  0%{opacity:0; transform:translateY(20px);}
  5%,30%{opacity:1; transform:translateY(0);}
  33%,100%{opacity:0; transform:translateY(-20px);}
}

/* ===== IMAGE SIDE ===== */

.hero-image{
  width:50%;
  position:relative;
  overflow:hidden;
}

.slides{
  position:relative;
  width:100%;
  height:100%;
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  animation:imageFade 15s infinite;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* sync images with titles */

.slide:nth-child(1){animation-delay:0s;}
.slide:nth-child(2){animation-delay:5s;}
.slide:nth-child(3){animation-delay:10s;}

@keyframes imageFade{
  0%{opacity:0;}
  5%,30%{opacity:1;}
  33%,100%{opacity:0;}
}

/* ===== MOBILE ===== */

@media(max-width:900px){
  .hero-split{
    flex-direction:column;
  }
  .hero-text,.hero-image{
    width:100%;
  }
  .hero-text{
    padding:40px 20px;
  }
}


@media (max-width: 991px) {
  .inverse {
      display: flex;
      flex-direction: column-reverse;
  }
}

@media (min-width: 1024px) {
  .center-text-image {
      display: flex;
      align-items: center;
  }
}