/* General Styles */
body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}

.book-karen{ background: #752763; border-radius: 4px; color: #ffffff;}

.navbar.scrolled .navbar-nav .book-karen .nav-link {
  color: #fff !important;
}

.container .mobile { display: none; }

/* Fade-in-out Animation */
@keyframes fade-in-out {
  0%, 33.33% {
    opacity: 0;
  }
  16.66%, 25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

strong, p, h4{
    font-size: clamp(1rem, 2.2vmin, 2rem);
}



h1, h2, h3, h4, h5 {  margin-bottom: 1.5rem; font-weight: 700; line-height: 1; text-transform: uppercase;}
h1.post-title {text-align: left;}

.sub-page h1, .sub-page h2, .sub-page h3, .sub-page h4, .sub-page h5 {text-transform: uppercase;font-weight: 700;color:#752763;}
.light , .light h1, .light h2, .light  h3, .light  h4, .light h5 {color:#fff;}
.light-purple h1, .light-purple h2, .light-purple h3, .light-purple h4, .light-purple h5 {color:#c481c2;}
.dark-purple, .dark-purple h1, .dark-purple h2, .dark-purple h3, .dark-purple h4, .dark-purple h5 {color:#752763;}

.card-text h2{font-weight: normal; font-size: clamp(1rem, 2.7vmin, 2rem);}


ul {
  list-style-type: disc; /* Default bullet style */
  padding-left: 20px; /* Indent the list */
  margin: 10px 0;
}

li {
  font-size: 16px;
  line-height: 1.5;
}

section a:link{ text-decoration: none; color: #81137d;}
section a:visited{color: #81137d}
/* Section Styles */
section {
  padding: 5vh 0 0 0;
}

section footer{ background: none; color:#000000;}
section.bg-white{ background: #fff;}

.btn {
    background-color: #752763 !important;  /* Set background color */
    color: white !important;           /* Set text color */
    border: none;                      /* Remove border */
    padding: 10px 20px;                /* Add padding */
    border-radius: 5px;                /* Optional rounded corners */
}

.spacer{height: 5vh;}

.img-responsive img{ width: 100%; height: auto;}


#home section {min-height: 80vh; display: flex; align-items: center;}
#home #featured {min-height: 0vh;}

#home #hero h1{ font-size: 10vh;}
#home #hero
hr {
  border: none;
  border-top: 5px solid #a03186;
  margin: auto;


  opacity: 1; width: 50%;

}

#home #hero .overlay-content { width: 80%; padding-top: 30vh;}

#home
#sliding-text {
position: relative;
height: 10vh;; /* Match the height of the text */
width: 100%;
overflow: hidden; /* Ensure only the visible text is shown */
}
#home
#sliding-text h2 {
position: absolute; /* Stack all h2 elements */
top: 0;
left: 0;
width: 100%;
text-align: center; /* Center text horizontally */
opacity: 0; /* Initially hidden */
animation: fadeInOut 9s infinite; /* Total cycle for all elements */
}
#home
#sliding-text h2:nth-child(1) {
animation-delay: 0s; /* Start immediately */
}
#home
#sliding-text h2:nth-child(2) {
animation-delay: 3s; /* Start after the first */
}
#home
#sliding-text h2:nth-child(3) {
animation-delay: 6s; /* Start after the second */
}

@keyframes fadeInOut {
  0%, 33.33% {
  opacity: 0; /* Fully invisible */
  }
  16.66%, 25% {
  opacity: 1; /* Fully visible for this portion */
  }
  100% {
  opacity: 0; /* Fully invisible again */
  }
}

#home #media.bg-light{ background-color: #4d1263 !important; color:#ffffff;}


#clients h2{color:#81137d; }


#about-karen hr{ width: 50%;}
#ispl #hero img{width:40%; height: auto;}
#corporate-training .programmes img{ width: 100%; height: auto;}

section#clients {min-height: 50vh; }
section#clients h2 {text-align: center;}

.sub-page {  width: 100%; overflow-x: hidden !important;}

.sub-page #hero {
    height: 40vh;
    background-image: url('../images/karen_home_07.jpg');
    background-size: cover;
    background-position: center center; /* Center image vertically & horizontally */
}
.sub-page #hero {position: relative;}
.sub-page #hero .container {
  position: absolute;
  bottom: 5vh;
  max-width: 1024px;
  left: 0;
  right: 0;
  margin: auto;
}
.sub-page #hero h1{ font-size: 5vh; margin-bottom: 1vh;  }
.sub-page #hero h2{  font-weight: normal; }
.sub-page h3{   font-size: clamp(1rem, 3vmin, 2rem); margin-top: 3vh; margin-bottom: 1vh;font-weight: normal; font-weight: bold;}
.sub-page h4{ font-size: clamp(1rem, 3vmin, 2rem); margin-top: 1vh; margin-bottom: 1vh;font-weight: bold;}
.sub-page h5{ font-size: clamp(1rem, 2vmin, 2rem); margin-top: 1vh; margin-bottom: 1vh;font-weight: normal;}
.sub-page img{ width: 100%; height: auto; display: block; }
.sub-page .lead {
  font-size: 3vh;
  font-weight: 300;
  line-height: 1.2;
}

.sub-page .lead strong{
  font-size: 3vh;
  font-weight: bold;
}

strong{line-height: 1.1;}


.sub-page hr{margin: auto; width: 80%; border: 0; border-bottom: 1px solid #ccc;}
.sub-page .list-item{ padding-bottom: 5vh;}

.sub-page #accolades h3 {font-weight: normal; }
.sub-page #accolades .excerpt {font-weight: bold;}
.sub-page #featured-keynotes h3 {font-weight: normal; }


.list-item { position: relative;}
.list-item .featured { position: absolute;top:30px; left: -5px; color:#fff; background: #b233bd; padding: 10px; }

.video-container-wrapper {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.category{ padding: 5px 10px; border: 1px solid #000; margin-bottom: 10px; display: inline-block; font-size: 1.8vh;}

    #speaking-keynote .container h3{ font-weight: normal; font-size: 3vh;}

.sizewrapper {
    position: relative;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
}


.responsive-iframe-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100) */
  height: 0;
  overflow: hidden;
}

.responsive-iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.close:hover {
    color: red;
}

.bg-dark { background-color: #2e1a33 !important;}

#call-to-action-book-karen{ cursor: pointer;height: 10vh; background: #81137d; display: flex;  align-items: center; /* Centers horizontally in a column */
  justify-content: center; /* Centers vertically */}
#call-to-action-book-karen h2 {margin: 0; color:#fff; }
#call-to-action-book-karen a:link{text-decoration: none;}

        .carousel {
           position: relative;
           width: 70vw;
           height: 60vh;
           margin: auto;
       }
       .carousel-slide {
           position: absolute;
           width: 100%;
           height: 100%;
           display: none;
           padding: 0 5vw;
          background: rgba(255, 255, 255, 0.9); /* White with 95% opacity */
          border-radius: 10px;
       }

        .carousel-slide-inner {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          text-align: center;
        }


       .carousel-slide .customer-name{
         margin: 0;
         font-weight: bold;
       }

       .carousel-slide .text-small{
         font-size: 2vh;
         margin-bottom: 0;

       }

       .carousel-slide img {
           width: 120px;
           height: 120px;
           overflow: hidden;
           object-fit: cover;
           margin-bottom: 3vh;

       }

        .carousel-slide h3{ margin: 1vh; color: #4d275b;}

        .carousel-slide p {
            font-size: clamp(1rem, 2vmin, 2.5rem); line-height: 1.2;
        }

        .carousel-slide p.smaller {
             font-size: clamp(1rem, 2.5vmin, 2rem);line-height: 1.2;
        }


       .carousel-slide.active {
           display: block;
       }
       .carousel-controls {
           position: absolute;
           width: 100%;
           top: 50%;
           transform: translateY(-50%);
           display: flex;
           justify-content: space-between;
       }
       .carousel-controls button {
           background-color: rgba(0, 0, 0, 0.5);
           color: white;
           border: none;
           padding: 10px;
           cursor: pointer;
       }


/* Footer */
footer {
  background-color: #2e1a33;
  color: #fff;
}

footer h4{color:#d56dd1 !important; font-weight: normal; font-size:20px !important;}

footer a:link, footer a:visited{
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  color: #fff;
}

footer ul {
  padding: 0;
  list-style: none;
}

footer ul li {
  display: block;
  margin: 0 10px;
}

footer .list-inline-item{ display: inline-block;}

#footer2 { color: #fff; font-size: 1vh;}

@media (max-width: 1024px) {
    #hero {
        padding: 3rem 1rem; /* Adjust padding */
    }

    #hero .container {
       text-align: left !important;
   }

   .sub-page #hero h1,
   .sub-page #hero h2 {
       text-align: left !important;
   }

   iframe {
     width: 100%;
   }

    section{ padding-left: 2vw; padding-right: 2vw;}

    .navbar{ height: 10vh;}

    .collapse {
      display: none
    }

    .collapse.show {
      display: flex
    }

    #navbarNav{ background: #fff; position: absolute; top:0; left: 0; width: 100%; height: 100vh;}
    #navbarNav .navbar-nav  {
      width: 100%;
      justify-content: center;
      z-index: 9000;

    }

    #navbarNav .navbar-nav .nav-link {
      color: #752763 !important;
    }




    .navbar-collapse {

        justify-content: center;
            transition: none !important;
      }

   .navbar-brand {

             position: absolute;
            left:10px;
             top:10px;

   }

   .nav-close-btn{
     display: none;
      background: none;
      border: none;
      padding: 5px; /* Optional: Adjust padding */
      cursor: pointer;
      position: absolute;
      right: 10px;
      top:10px;
      z-index: 100000;
    }

   body.removeScroll {
    overflow: hidden;
    }


   .navbar-toggler {
      position: absolute;
      right:10px;
      top:10px;
       color:#fff;
       z-index: 10000;
   }

   .navbar-toggler {
    border: none;
}

  .navbar-toggler .navbar-toggler-icon {
      filter: brightness(0) invert(1); /* Makes it white */
  }

  /* When scrolled: purple toggler */
  .scrolled .navbar-toggler .navbar-toggler-icon {
      filter: none; /* Resets the white filter */
      color: #6A1B9A; /* Example purple */
  }

  .podcast-episode{margin-bottom: 30px;}
}

.copyright {opacity: 0.8;}