.page-homepage #hero{
  padding: 0px;
  /* background : url('https://www.clodura.ai/wp-content/uploads/2025/11/Frame-35020.webp');*/
  background : url('https://www.clodura.ai/wp-content/uploads/2026/03/Frame-35020-1.webp');
  background-position: top;
  background-size: 100% 65%;
  background-repeat: no-repeat;
  /* background: #fff; */
}

.page-homepage section#hero .grid{
  padding: 70px 0px 70px!important;
}

/* section#hero .grid:last-child{

} */

.page-homepage section#hero .content-container{
  position: relative;
}

.page-homepage section#hero .content-container .hero-icon{
   position: absolute;
   animation: float 4s ease-in-out infinite;
  will-change: transform;
  display: none;
}

.page-homepage section#hero .content-container .hero-icon.one{
  left: -112px;
    top: -45px;
    animation-delay: 0s;
}

.page-homepage section#hero .content-container .hero-icon.two{
  right: -112px;
    top: -45px;
    animation-delay: -1s;
}

.page-homepage section#hero .content-container .hero-icon.three{
  left: 75px;
    bottom: -45px;
    animation-delay: -2s;
}

.page-homepage section#hero .content-container .hero-icon.four{
  right: 75px;
    bottom: -45px;
    animation-delay: -3s;
}

.page-homepage section#hero .arrow .eyebrow-list li:not(:last-child)::after {
    content: "\2192";
    color:#000;
    font-weight: bold;
}

section#hero .arrow .eyebrow-list li{
  font-weight: 500;
}


section#hero.full .image-container {
    border: 2px solid #FF5500;
    padding: 15px;
    border-radius: 30px;
    background: #fff;
}

section#hero.full .image-container > div {
    background: #fff;
    border-radius: 30px;
    position: relative;
    z-index: 2;
    padding: 12px;
    border: 1px solid #FFC37D;
}

section#hero.full .image-container > div .responsive-embed{
  margin-bottom: unset;
  box-shadow: 0px 0px 25px 0px #C6C6C640;
    border: 2px solid #fff;
    border-radius: 30px;
}

section#hero.full .image-container > div .responsive-embed iframe{
  border-radius: 30px;
}

section#copy-image.database.text-center, section#copy-image.database .text-center{
  text-align: start!important;
}

section#copy-image.database.full .eyebrow {
    margin: 0 0 30px;
}

section#copy-image.database .content p{
  margin-bottom: 0px;
}

section#copy-image.database.full .image-container {
    margin-top: 20px;
}
section#copy-image.database div.animation{
    border-radius: 15px;
    background: #FAFAFA;
    padding: 30px;
}

/* Floating animation keyframes */
@keyframes float {
  0%, 100% {
      transform: translateY(0px) rotate(0deg) scale(1);
  }
  25% {
      transform: translateY(-10px) rotate(1deg) scale(1.02);
  }
  50% {
      transform: translateY(-15px) rotate(0deg) scale(1.03);
  }
  75% {
      transform: translateY(-8px) rotate(-1deg) scale(1.02);
  }
}


/* .page-homepage section#hero h1.xl{
  font-size: 60px;
} */

.page-homepage section#hero p{
  margin-bottom: 25px;
}

.page-homepage section#hero.full .grid .image-container.half{
  grid-column: 2 / span 10;
  margin-top: -170px;
}


/*------------home page new section------------------*/

 /* Email Marketing Tabs - Unique CSS with custom- prefix */
 .custom-tabs-section {
    width: 100%;
    max-width: 1280px;
    padding: 20px;
    margin: 0 auto;
  }
  
  .custom-tabs-section .custom-section-header {
    text-align: center;
    margin-bottom: 70px;
  }
  
  
  .custom-tabs-section .custom-tabs-container {
    width: 100%;
    margin: 0 auto;
    border-radius: 12px;
    background: white;
    //box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }
  
  .custom-tabs-section .custom-tabs-header {
    display: flex;
    background: transparent;
    gap: 12%;
    padding: 0;
    border-bottom: 3px solid #ff5500;
  }
  
  .custom-tabs-section .custom-tab-button {
    flex: 1;
    padding: 15px;
    background: #FFEAD1;
    border: 2px solid #ff5500;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    cursor: pointer;
  font-weight: 500;
  font-style: Medium;
  font-size: 30px;
  text-align: center;
  color: #000;
  
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .custom-tabs-section .custom-tab-button span.icon{
    display: none;
  }

  .custom-tabs-section .custom-tab-button.custom-active span.icon{
    display: block;
  }
  
  .custom-tabs-section .custom-tab-button.custom-active {
    background: white;
    font-weight: 700;
    border-color: #ff5500;
    border-top: 5px solid #ff5500;
    border-bottom: 2px solid white;
    margin-bottom: -2px;
    //box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    z-index: 1;
  }
  
  .custom-tabs-section .custom-tab-button:hover:not(.custom-active) {
    background: rgba(255, 255, 255, 0.7);
    color: #2c3e50;
  }
  
  
  .custom-tabs-section .custom-tabs-content {
    padding: 40px;
    min-height: 320px;
    background: white;
    border: 2px solid #ff6b35;
    border-top: none;
    margin-top: -1px;
    border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
  }
  
  .custom-tabs-section .custom-tab-panel {
    display: none;
    animation: customFadeIn 0.5s ease-in-out;
  }
  
  .custom-tabs-section .custom-tab-panel.custom-active {
    display: inline-block;
  }
  
  /* .custom-tab-panel h3 {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
    line-height: 1.3;
  } */

  .custom-tabs-section .custom-tab-panel .inner-panel .left, .custom-tabs-section .custom-tab-panel .inner-panel .right{
    width: 50%;
  }
  
  .custom-tabs-section .custom-tab-panel .inner-panel .flex-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}


  .custom-tabs-section .custom-tab-panel .flex-box ul {
    margin: 0;
    padding: 0;
    margin-left: 30px;
  }
  
  
  .custom-tabs-section .custom-tab-panel .flex-box li {
    margin-bottom: 15px;
    padding-left: 0px;
    position: relative;
    color: #000;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
}


.custom-tabs-section .custom-tab-panel .check-list-icon{
    margin-top: 30px!important;
}

.custom-tabs-section .custom-tab-panel .check-list-icon li{
    font-size: 30px;
    font-weight: 500;
    padding-left: 50px;
}


.custom-tabs-section .custom-tab-panel .check-list-icon li::after {
  width: 30px;
  height: 30px;
  font-size: 20px;
  }


  
  /* .custom-tabs-section .custom-tab-panel li:before {
    content: "✓";
    color: #ff5500;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    width: 28px;
    height: 28px;
    background: #FFEAD1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  } */
  
  @keyframes customFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
@media (min-width: 769px){
.page-homepage section#hero h1.xl{
  font-size: 60px;
}
}

@media (max-width: 480px) {
.page-homepage section#hero{
  padding-top: 0px !important;
}

  .page-homepage section#hero .grid:first-child {
    padding: 40px 0px 70px;
}
  section#hero .eyebrow-list {
    margin: 0px;
  }
  section#hero .eyebrow-list li {
    border-bottom: 1px solid;
    padding: 5px;
    font-size: 14px;
}

section#hero .eyebrow-list li:last-child{
  border-bottom: unset;
}
}

  
  /* Mobile styles */
  @media (max-width: 768px) {
    .custom-tabs-section .custom-tabs-header {
        flex-direction: column;
        gap: 8px;
    }
  
    .custom-tabs-section .custom-tab-button {
        border-radius: 8px;
        border: 2px solid #e0e0e0;
        border-bottom: 2px solid #e0e0e0;
        padding: 20px;
        text-align: left;
        justify-content: flex-start;
        margin-bottom: 0;
    }
  
    .custom-tabs-section .custom-tab-button.custom-active {
        border: 2px solid #ff6b35;
        border-left: 4px solid #ff6b35;
        margin-bottom: 0;
        margin-left: 0;
    }
  
    .custom-tabs-section .custom-tabs-content {
        padding: 0;
        min-height: auto;
        border: none;
        margin-top: 0;
    }
    
    .custom-tabs-section .custom-tab-panel {
        padding: 30px 20px;
        border: 2px solid #ff6b35;
        border-top: none;
        background: white;
        margin-top: -8px;
    }
    
    .custom-tabs-section .custom-tab-panel h3 {
        margin-bottom: 20px;
    }
    
    .custom-tabs-section .custom-tab-panel li {
        padding-left: 28px;
    }
  
  }