/* ************************************************** */
/* Font */
.inter-regular {
    font-family: "Inter", sans-serif;
}

@font-face {
    font-family: 'Graphik Semibold';
    src: url('../fonts/GraphikFamily/Graphik-Semibold-Trial.otf') format('otf'),
         url('../fonts/GraphikFamily/Graphik-Semibold-Trial.otf') format('otf');
    font-weight: bolder;
    font-style: normal;
  }
/* ************************************************** */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Inter", sans-serif;
}
a {
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: 500;
}
.text-white
{
    color: #ffffff !important;
}
.fw-300
{
    font-weight: 300 !important;
}
.index-h
{
    font-size: 34px;
    margin-bottom: 5px;
    margin-top: 48px;
    font-weight: 700;
    text-align: center;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #6487AA;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #6487AA;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #6487AA;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #6487AA;
  }

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}
/* ************************************************** */

/* Support Button */
.chat-window button {
    background-color: #5BC8AF;
    color: #000;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
}

.chat-window button:hover {
    background-color: #00FFC5;
}

.success-message {
    display: none;
    color: white;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
}
.window-message
{
    margin-top: -7px;
    margin-bottom: 16px;
}

.chat-header .arrow {
    transition: transform 0.3s ease;
}

.chat-window.open .arrow {
    transform: rotate(180deg); /* ▼ to ▲ */
}
.chat-form {
    display: none;
    padding: 0px 25px 20px 25px;
}

.chat-window.open .chat-form {
    display: block;
}


/* ************************************************** */

/* Support Window */
.chat-window {
    position: fixed;
    bottom: 18px;
    right: 31px;
    width: 318px;
    background: #142F4A;
    border-radius: 4px;
    border: 1px solid #152D46;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 9;
    overflow: hidden;
}
.chat-header {
    background-color: #152D46;
    color: white;
    padding: 12px 25px 12px 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
}
.chat-header img {
    width: 16px;
    height: 16px;
    margin-right: 0px;
}

.chat-header .chat-title {
    flex: 1;
    margin-left: 8px;
}
.chat-window input,
.chat-window select,
.chat-window textarea {
    width: 100%;
    padding: 10px;
    margin: 7px 0;
    background-color: #214263;
    color: #6487AA;
    font-size: 12px;
    border: 0px solid #ccc;
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
}
.chat-window input[type=text], .chat-window input[type=tel], .chat-window input[type=email],
.chat-window textarea, .chat-window option
{
    color: #6487AA;
}
.chat-window textarea
{
    padding: 10px;
}
.chat-window button {
    background-color: #5BC8AF;
    color: #152D46;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
    border-radius: 3px;
    font-weight: 600;
}
.chat-button img
{
    width: 16px;
    margin-right: 7px;
    margin-bottom: -3px;
    height: 16px;
}
.chat-window button:hover {
    background-color: #5BC8AF;
    opacity: 0.9;
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  
    width: 200px;
    padding: 10px 40px 10px 12px;
    border: 1px solid #6487AA;
    border-radius: 6px;
    font-size: 16px;
    background-color: #333;
    color: white;
  
    /* caret arrow (˅) */
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='lightslategray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 
                no-repeat right 10px center;
    background-size: 16px;
  }
  
@media (max-width:768px)
{
    .chat-button
    {
        bottom: 12px;
        right: 12px;
    }
}
@media (max-width:500px)
{
    .chat-window {
        width: 254px;
    }
    .chat-form {
        padding: 0px 15px 20px 15px;
    }
    .chat-header {
        padding: 15px;
    }
}



/* ************************************************** */
    
/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #142F4A;
    padding: 5px 20px;
    color: white;
    border-radius: 12px;
    margin:auto;
    width: 97%;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    z-index: 10;
}
.header .nav-right
{
    display: flex;
}
.header {
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  
  .header.hide {
    opacity: 0;
    pointer-events: none;
  }
.logo {
    font-size: 18px;
    font-weight: bold;
}
.logo img
{
    width: 60%;
    margin-top: 6px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 50px;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 14px;
}

.menu-icon {
    font-size: 21px;
    cursor: pointer;
    display: block;
    margin-left: 28px;
    margin-top: -5px;
}

/* ************************************************** */

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark transparent background */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9; /* Below sidebar but above other content */
}

/* ************************************************** */

/* Sidebar */
.sidebar {
    position: fixed;
    top: 100px;
    right: -300px;
    width: 300px;
    height: auto;
    background-color: #CECECE;
    color: #142F4A;
    transition: right 0.3s ease-in-out;
    padding-top: 27px;
    z-index: 10;
    border-radius: 15px;
    padding-bottom: 21px;
}

/* Sidebar links */
.sidebar a {
    display: block;
    padding: 15px 30px;
    color: #142F4A;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 0px solid #444;
}
.sidebar a:hover {
    color: #738aa1;
}
.sidebar a.active
{
    color: #738aa1;
}
/* Close button */
.sidebar .close-btn {
    position: absolute;
    top: 3px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #142F4A;
}
/* Show sidebar */
.sidebar.show {
    right: 20px;
}
/* Show overlay */
.overlay.show {
    opacity: 1;
    visibility: visible;
}
/* Menu icon (for opening sidebar) */
.menu-icon {
    font-size: 24px;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 11;
}
/* Responsive Design */
@media (min-width: 1025px) {
    .sidebar-extra {
        display: none;
    }
}

@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }
    .sidebar-extra {
        display: block;
    }
}

 /* ************************************************** */

/* banner */
.carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.carousel-images {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; 
}
.carousel .carousel-images img.hero-images {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.carousel .carousel-images .slide .slide-text .partner-img-box img
{
    margin: 11px 10px 3px 10px;
    vertical-align: middle;
}
.carousel .carousel-images .slide .slide-text.with-logos
{
    bottom: 15%; 
}
.partner-img-box img[alt="GOK"]
{
    width: 11%;
    height: auto;
    margin-left:0 !important;
}
.partner-img-box img[alt="TSDC"]
{
    width: 8%;
    height: auto;
}
.partner-img-box img[alt="KSDC"]
{
    width: 8%;
    height: auto;
}
.partner-img-box img[alt="KKEM"]
{
    margin-left:0 !important;width: 9%;height: auto;
}
.partner-img-box img[alt="ASAP"]
{
    width: 9%;height: auto;
}
.partner-img-box img[alt="ICT"]
{
    width: 7%;height: auto;
}
.partner-img-box img[alt="NMT"]
{
    width: 8%;height: auto;
}
.partner-img-box img[alt="KJK"]
{
    width: 7%;height: auto;
}

.carousel .carousel-images .slide .slide-text h6
{
    font-size: 12px;
    margin-top: 21px;
    margin-bottom: 10px !important;
}
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}    



.slide {
    width: 100%;
    flex: 0 0 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}
   


/* Slide text overlay */
.slide-text {
    position: absolute;
    bottom: 30%;
    z-index: 5;
    padding: 10px 40px;
    font-size: 77px;
    left: 6%;
    text-align: left;
    width: 100%;
    color: #fff;
    font-weight: 700;
    line-height: 1.1;
}
.slide-text.right-1 {
    position: absolute;
    bottom: 60px;
    z-index: 5;
    padding: 70px 40px;
    max-width: 80%;
    background-color: #7D80DA;
    color: #142F4A;
}


.slide-text h2 {
    font-size: 2rem;
    margin: 0 0 10px;
}
.slide-text.align-left 
{
    width: 44%;
}
.slide-text.align-left p {
    color: #fff;
    font-size: 11px;
    font-weight: 200;
    letter-spacing: 5.2px;
    margin-top: 12px;
    border: 1px solid #3774A8;
    padding: 7px 15px;
    border-radius: 4px;
    text-align: center;
    background: #142F4A;
    width: fit-content;
}
.slide-text .slide-sublogos img
{
    width: 33%;
    height: auto;
}
.slide-box
{
    display: flex;
    flex-wrap: wrap;
}
.slide-box .slidebox
{
    margin-right: 17px;
    margin-left: 0px;
    margin-top: 32px;
    padding: 0 2%;
}
.slide-box .slidebox h1
{
    color: #fff;
    font-size: 56px;
    font-weight: 700;
    line-height: 0;
    /* font-family: 'Graphik Semibold', sans-serif; */
}
.slide-box .slidebox h6
{
    color: #fff;
    font-size: 22px !important;
    font-weight: 400;
    padding-top: 10px;

}
.adobe-box img[alt="Adobe"]{
    width: 22%;
    margin-left:0;
}
/* Responsive adjustments */
@media (max-width:1270px){
    .slide-box .slidebox
{
    padding: 0 1%;
}
}
@media (min-width:1300px){
    .slide-text.align-left p {
        width: 78%;
    }
}
@media (max-width:1114px){
    .slide-text.align-left {
        width: 56%;
    }
}
@media (max-width:1200px)
{
    .carousel .carousel-images .slide .slide-text.with-logos
{
    bottom: 12%; 
}
@media (max-width: 877px) {
    .slide-text.align-left {
        width: 64%;
    }
}
.slide-text {
    font-size: 62px;
}
}
@media (max-width:1000px)
{
    .carousel .carousel-images .slide .slide-text.with-logos
{
    bottom: 18%; 
}
.partner-img-box img[alt="GOK"] {
    width: 18%;
    margin-left: 0;
}
.partner-img-box img[alt="TSDC"]
{
    width: 14%;
    height: auto;
}
.partner-img-box img[alt="KSDC"]
{
    width: 15%;
    height: auto;
}
.slide-text {
    font-size: 64px;
}
.carousel .carousel-images img.hero-images {
    height: 700px;
}
}

@media (max-width: 768px) {
    .slide-text {
        bottom: 200px;
        padding: 8px 12px;
    }

    .slide-text h2 {
        font-size: 1.4rem;
    }
    .adobe-box img[alt="Adobe"]{
        width: 30%;
        margin-left:0;
    }
    .carousel .carousel-images .slide .slide-text h6 {
        margin-bottom: -5px;
    }
    .slide-text p {
        font-size: 8px;
    }
    .slide-box .slidebox h1
    {
        font-size: 41px;
    }
    .slide-box .slidebox h6 {
        font-size: 20px !important;
    }
    .partner-img-box img[alt="KKEM"]
{
    margin-left:0;width: 14%;height: auto;
}
.partner-img-box img[alt="ASAP"]
{
    width: 14%;height: auto;
}
.partner-img-box img[alt="ICT"]
{
    width: 11%;height: auto;
}
.partner-img-box img[alt="NMT"]
{
    width: 13%;height: auto;
}
.partner-img-box img[alt="KJK"]
{
    width: 12%;height: auto;
}

}

@media (max-width: 570px) {
    .slide-box .slidebox h1 {
        font-size: 37px;
    }
    .slide-box .slidebox h6 {
        font-size: 12px !important;
    }
}
@media (max-width:634px){
    .slide-text.align-left p {
        color: #fff;
        font-size: 7px;
        font-weight: 200;
        letter-spacing: 2.2px;
        margin-top: 12px;
        border: 1px solid #3774A8;
        padding: 5px 6px;
        border-radius: 4px;
        text-align: center;
        background: #142F4A;
        width: 74%;
}
}
@media (max-width: 458px) {
        .slide-text.align-left {
            width: 84%;
        }
    }
@media (max-width: 480px) {
    .slide-text h2 {
        font-size: 1.1rem;
    }
    .slide-text
    {
        font-size: 38px;
        bottom: 247px;
        padding: 8px 28px;
    }
    .carousel .carousel-images .slide .slide-text h6 {
        margin-bottom: 5px;
    }
    .adobe-box img[alt="Adobe"] {
        width: 60%;
    }
    .slide-text p {
        font-size: 8px;
    }
    .slide-box .slidebox h1 {
        font-size: 30px;
        padding: 0px;
    }
    .carousel .carousel-images .slide .slide-text h6 {
        margin-top: 11px;
    }
    .carousel .carousel-images .slide .slide-text.with-logos {
        bottom: 24%;
    }
    .carousel .carousel-images .slide .slide-text .partner-img-box img {
        margin: 0;
    }
    .partner-img-box img[alt="NFDC"] {
        width: 30px;
    }
    .partner-img-box .mesc2 {
        width: 47px;
    }
    .partner-img-box img[alt="Skill India"] {
        width: 47px;
    }
    .partner-img-box img[alt="NSDC"] {
        width: 85px;
    }
    .partner-img-box img[alt="NCVET"] {
        width: 32px;
    }            
}
@media (max-width:387px){
    .slide-text.align-left
    {
        width: 100%;
    }
}
@media (max-width: 330px) {
    .slide-text
    {
        font-size: 30px;
        bottom: 247px;
        padding: 8px 18px;
    }
    .partner-img-box img[alt="NFDC"] {
        width: 42px;
    }
    .partner-img-box img[alt="NSDC"] {
        width: 91px;
    }
}




/* ************************************************** */

/* training section */
.training {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
}
.training .training-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/banners/training-bg.jpg') no-repeat center center/cover;
    /* filter: brightness(0.7); */
    z-index: -1;
}
.train-cont 
{
    width: 100%;
}
.training .training-content {
    align-items: flex-start;
    justify-content: flex-end;
    padding: 50px 100px 0px 100px;
    color: white;
    position: relative;
    margin-top: -5px;
    min-height: 700px;
    display: flex;
    flex-direction: column;
}
.training .training-content .text-section {
    width: 50%;
}
.training .training-content .text-section h1 {
    font-size: 34px;
    font-weight: 700;
}
.training .training-content .text-section p {
    font-size: 13px;
    background: #FE654F;
    /* padding: 24px 35px; */
}
.training .training-content .partners {
    background: #142F4A;
    padding: 22px 35px;
    width: 50%;
    text-align: center;
}
.training .training-content .partners h6
{
    font-size: 11px;
    font-weight: 300; 
}
.training .training-content .partners .adobe-img {
    width: 52%;
    margin: 18px 0px 20px 0px;
}
.training .training-content .partner-img-box
{
    display: flex; 
    justify-content: space-between; 
    align-items: center;  
}
.training .training-content .partners img {
    /* width: auto;
    height: 100%; */
    margin: 26px 0px 6px 0px;
}
/* .training .training-content .partner-img-box img
{
    width: 550px;
    height: 55px;
    object-fit: cover;
} */

.training .training-content .partners hr
{
    background-color: #FE654F;
    border: 1px solid #fe654f;
    opacity: 0.6;
}
.training .training-content .nsdc-img
{
    width: 135px !important;
}


@media (max-width:900px)
{
    .training .training-content .text-section {
        width: 73%;
    }
    .training .training-content .partners {
        width: 73%;
    }
    .training .training-content
    {
        padding: 90px 25px;
        text-align: left;
    }
}
@media (max-width:600px)
{
    .training .training-content .text-section {
        width: 100%;
    }
    .training .training-content .partners {
        width: 100%;
    }
    .training .training-content
    {
        padding: 90px 25px;
        text-align: left;
    }
}

@media (max-width:500px)
{
    .training .training-content .partners
    {
        padding: 24px 15px;
    }
    .training .training-content .partner-img-box img
    {
        width: 65px;
        height: 65px;
        padding: 10px;
    }
}

@media (max-width: 350px) {
    .training .training-content .partner-img-box img {
        width: 100px;
        height: 100px;
        padding: 14px;
        margin: auto;
    }
    .training .training-content .partner-img-box {
        display: grid;
                align-items: center;
                justify-content: center;
    }
}
@media screen and (min-width:900px) and (max-width:1100px)
{
    .training .training-content .partner-img-box img
    {
        padding: 7px;
    }
}
  


/* course   */
.trending-courses {
    background-color: #1e1e1e;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    position: relative;
    background-image: url('../images/banners/course-bg1.png');
    background-position: center;
    background-size: cover;
    
  }

  .content-wrapper h2 {
    color: #fff;
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .course-overlay
  {
    min-height: 650px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    padding: 50px 100px;
  }
  .content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push boxes to bottom */
    position: relative;
  }

  .courses-container {
    width: 68vw;
    margin-left: auto;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-right: 0;
  }

  .course-desc {
    background-color: #142F4A;
    color: #ffffff;
    padding: 11% 9%;
    grid-row: span 2;
    font-size: 15px;
    line-height: 1.3;
  }

  .course-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.2s ease;
    text-decoration: none;
  }
.course-box a
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.course-box span {
    display: flex;
    align-items: center;
    color: #000;
}
.mr-26 {
    margin-right: 26px;
}
  .course-box:hover {
    transform: scale(1.03);
  }

.course-box span.arrow {
    font-size: 24px;
  }

  .red { background-color: #FE654F; }
  .blue { background-color: #7D80DA; }
  .yellow { background-color: #FFD039; }
  .aqua { background-color: #2CEBFF; }
  .green { background-color: #7BE6C8; }
  .orange { background-color: #FE654F; }
.yellow a, .aqua a, .green a { color: #000;}

.course-box.orange
{
    padding: 9% 12%;
}
  @media (max-width:900px)
  {
      .course-overlay
      {
          padding: 165px 25px;
      }
      .courses-container
      {
        width: 100%;
        display: grid; 
        grid-template-columns: 1fr;
      }
      .course-desc {
        order: -1; 
      }
      .course-box.orange {
        grid-column: span 2;
      }
      .course-box.orange {
        padding: 5% 9%;
    }
  }
  @media (max-width: 900px) {
    .courses-container {
      grid-template-columns: repeat(2, 1fr);
    }

    .course-desc {
      grid-column: span 2;
      grid-row: auto;
    }
  }

  @media (max-width: 600px) {
    .courses-container {
      grid-template-columns: 1fr;
    }

    .trending-courses h2 {
      font-size: 2rem;
    }

    .course-box {
      font-size: 15px;
      padding: 15px;
    }

    .course-desc {
      grid-column: span 1;
    }
    .course-box.orange {
        grid-column: span 1;
      }
      .course-box.yellow2 {
        order: -1;
      }
      .course-box.orange {
            padding: 9% 14%;
      }
  }
    
   
    
    /* portfolio */
    .profile-carousel-container {
        position: relative;
        width: 100%;
        margin: auto;
        background-color: #7BE6C8;
        padding: 50px;
        text-align: center;
        background-image: url('../images/pattern.png');
        background-position: left;
        background-size: cover;
    }
    
    .profile-carousel-container h2
    {
        font-size: 32px;
        margin-top: 0px;
        margin-bottom: 38px;
        text-align: center;
        color: #142F4A;
    }
    
    .profile-carousel {
        position: relative;
        /* overflow: hidden; */
        height: auto;
        width: 60%;
        margin: auto;
        text-align: center;
    }
    
    .profile-slide {
        display: none;
        text-align: center;
        transition: opacity 0.5s ease-in-out;
    }
    
    .profile-slide.active {
        display: block;
    }
    .profile-carousel-container .profile-carousel .info a
    {
        text-decoration: none;
        font-size: 12px;
        background: #142F4A;
        padding: 7px 20px;
        color: #fff;
        border-radius: 1px;
        opacity: 0.8;
        display: inline-block;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .profile-carousel-container .profile-carousel .info a:hover
    {
        transform: scale(1.2); 
    }
    
    .profile-carousel-container .profile-head
    {
        /* width: 30%; */
        padding: 0px 24px 0px 0;
    }
    .profile {
        /* display: flex; */
        align-items: center;
        justify-content: space-around;
        gap: 20px;
        margin-top: 20px;
    }
    
    .profile img {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 25px;
    }
    
    /* .info {
        text-align: left;
        max-width: 500px;
    } */
    
    .info h3 {
        font-size: 18px;
        font-weight: bold;
        color: #000;
        text-transform: uppercase;
    }
    .info span {
        text-transform: capitalize;
    }
    
    .info p {
        font-size: 16px;
        color: #333;
        margin-top: 5px;
        text-align: center;
    }
    
    .prev, .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        font-size: 20px;
        /* border-radius: 50%; */
        /* display: none; */
    }
    
    .prev { left: 10px; }
    .next { right: 10px; }
    
    .prev:hover, .next:hover {
        background-color: #08313a;
    }
    
    .profile-dots {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }
    
    .dot {
        width: 9px;
        height: 9px;
        margin: 0 5px;
        background-color: transparent;
        border-radius: 50%;
        cursor: pointer;
        transition: 0.3s;
    }
    
    .dot.active, .dot:hover {
        background-color: #142F4A;
    }
    /* .profile-flex
    {
        display: flex;
    } */
    
    @media (max-width:1000px) 
    {
        .profile-carousel {
            display: inline;
            margin: auto;
    }
    .profile-flex {
        display: inline;
        text-align: end;
    }
    .profile img {
        width: 200px;
        height: 200px;
    }
    .profile-carousel-container .profile-head
    {
        width: 100%;
    }
    }
    @media(max-width:500px)
    {
        .profile {
        display: inline;
        }
        .profile-slide {
        margin: 36px 0px;
    }
    .info {
        margin-top: 33px;
    }
    .profile-dots {
        justify-content: center;
    }
    }



     .footer {
        background-color: #D4E6F8;
        color: #142F4A;
        padding: 80px 80px 50px 80px;
        text-align: left;
        /* display: flex;
        flex-wrap: wrap;
        justify-content: space-between; */
      }
      .footer-div .social-icons img
      {
        width: 68%;
      }
      .footer-container
      {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 25px;
      }
      .footer-logo {
        width: 132px;
        margin-bottom: 20px;
      }
      
      .footer h3 {
        margin-bottom: 15px;
        font-size: 21px;
        font-weight: 500;
        color: #142F4A;
        text-align: left;
      }
      
      .footer ul {
        list-style: none;
        padding: 0;
      }
      
      .footer ul li a {
        font-weight: 500;
        color: #142F4A;
        text-decoration: none;
        font-size: 13px;
        line-height: 3;
        border-bottom: 1px solid #142F4A;
        padding: 4px 70px 0px 0px;
        width: 100%;
        display: block;
        height: 47px;
        text-align:left;
    }
      
      .footer ul li a:hover {
        text-decoration: none;
      }
      
      details summary {
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
      }
      
      details p {
        margin-left: 15px;
        font-size: 13px;
        margin-bottom: 10px;
        color: #333;
      }
      .social-icons
      {
        display:flex;
        justify-content: space-between;
      }
      .social-icons a {
        font-size: 22px;
        margin-right: 15px;
        color: #142F4A;
      }
      
      .social-icons a:hover {
        color: #000;
      }
      
      .contact-info {
        margin-top: 20px;
        font-size: 14px;
      }
      
      .contact-info h3 {
        font-size: 16px;
        margin-bottom: 10px;
      }
      
      .contact-info p a {
        color: #142F4A;
        text-decoration: none;
      }
      
      .contact-info p a:hover {
        text-decoration: underline;
      }
      
      .copyright-text {
        font-weight: 400;
        font-size: 16px;
        color: #8E8E8E;
        margin-top: 20px;
        line-height: 1.4;
      }



      .footer-div details p a
      {
          color: #142F4A !important;
      }
      .arrow-up {
      display: inline-block;
      transform: rotate(-90deg);
      font-size: 1em;
      padding: 0px 3px;
      
      }
      /* Summary default styling with down arrow */
      .footer-div details
      {
          border-bottom: 1px solid #142F4A;
      }
      .footer-div details summary {
        position: relative;
        padding: 4px 0px 0px 0px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        list-style: none;
        padding-bottom: 0px;
        height: 42px;
        padding-right: 75px;
        margin-bottom: 4px;
      }
      .contact-info2 strong
      {
      font-weight: 600;
      font-size: 15px;
      color: #142F4A;
      }
      .footer-div details summary::after {
        content: "";
        position: absolute;
        right: 9px;
        top: 17px;
        width: 16px;
        height: 16px;
        pointer-events: none;
      
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%23142F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 
                    no-repeat center;
        background-size: contain;
      
        transition: transform 0.3s ease;
      }
      .contact-info2 p
      {
      margin-bottom: 6px;
      }
      .contact-info2 a
      {
        color: #142F4A;
      }
      /* Rotate arrow when <details> is open */
    .footer-div details[open] summary::after {
        transform: rotate(180deg);
    }
      .pb-0
{
    padding-bottom: 0 !important;
}
.pt-0
{
    padding-top: 0 !important;
}
      /* Optional: animate open content */
      .footer-div details p {
      /* margin-left: 10px; */
      padding: 5px 0 15px;
      font-size: 13px;
      color: #142F4A;
      }
      .footer-hr
      {
          border: 1px solid #3A3A3A;
          opacity: 0.6;
      }
.footer-w 
{
    text-align: center !important;
}
.footer-enq
{
    text-align: left;
}
.copyright-text.footer-c 
{
    text-align: left;
}

      /* Responsive */
      @media (max-width: 768px) {
        .footer {
          flex-direction: column;
          padding: 30px 20px;
        }
        .footer .footer-work
        {
            text-align: center;
        }
      
        .social-icons a {
          margin: 0 10px;
        }
      
        details summary {
          text-align: center;
        }
      }
@media (max-width: 962px) {
.footer-div {
    margin: 20px auto;
}
.footer-enq
{
    text-align: center;
}
.footer-enq .enq-h h3
{
    text-align: center;
}
}
@media (max-width: 622px) {
    .fo-logo 
{
    width: 100%;
}
.copyright-text.footer-c
 {
    text-align: center;
}
}
@media (max-width:768px) and (min-width:623px){
    .footer-logo
    {
        float: left;
    }
}
.footer-work
{
    display: flex;
    flex-direction: column;
}      
.spacer {
    flex-grow: 1;
  }
    
    
    /* contact */
    .contact {
        align-items: center;
        border-radius: 0;
        background-image: url('../images/banners/course-bg3.png');
        background-position: bottom;
        background-size: cover;
        height: 700px;
        color: #fff;
        min-height: 700px;
        margin-top: -5px;
    }
    .contact-overlay
    {
        padding: 100px;
    height: 700px;
    /* background: rgba(0, 0, 0, 0.3); */
    }
    .contact-form form select
    {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        color: #757575;
    }
    /* .contact-info2 {
        width: 45%;
    } */
    .info-box {
        margin-bottom: 15px;
    }
    .icon {
        font-size: 20px;
        margin-right: 10px;
    }
    .contact-form {
        width: 43%;
        background: #152D46;
        padding: 40px 56px 40px 56px;
        float: right;
        border-radius: 15px;
    }
    .contact-form input, .contact-form textarea {
        width: 100%;
        padding: 10px 11px;
        margin: 10px 0;
        border: 0px solid #ccc;
        border-radius: 5px;
        color: #6487AA;
        background: #214263;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
    }
    .contact-form input
    {
        font-size: 11px;
        padding: 11px 10px;
        height: 40px;
    }
    .contact-form button {
        width: 100%;
        padding: 10px;
        background: #5BC8AF;
        color: #152D46;
        border: none;
        cursor: pointer;
        border-radius: 3px;
        font-weight: 700;
    }
    .contact-form button:hover {
        background: #5BC8AF;
        opacity: 0.9;
    }
    .contact .contact-form select
    {
        width: 100%;
        padding: 10px 10px;
        margin: 7px 0;
        border: 0px solid #214263;
        background-color: #214263;
        color: #6487AA;
        font-size: 11px;
        height: 40px;
    }
    .contact .contact-form .contact-head-img
    {
        width: 20px;
        margin-right: 7px;
        margin-bottom: -5px;
        height: 20px;
    }


@media (max-width:700px){
    .contact-overlay {
        padding: 82px 2px;
        height: 700px;
        background: rgba(0, 0, 0, 0.3);
    }
    .contact-form
 {
    width: 90%;
    background: #152D46;
    padding: 36px;
    border-radius: 1px;
    margin: auto;
    float: none;
}
}
@media (max-width:1000px){
    .contact-overlay {
        padding: 145px 0px;
        height: 700px;
        background: rgba(0, 0, 0, 0.3);
    }
    .contact-form
 {
    width: 80%;
    background: #152D46;
    padding: 36px;
    border-radius: 15px;
    margin: auto;
    float: none;
}
}


    /* success stories */
    .stories-container {
                width: 100%;
                overflow: hidden;
                background-color: #FE654F;
                padding: 50px 0 80px 0px;
                text-align: center;
                position: relative;
                margin-top: -5px;
                color: #FFF;
                /* background-image: url('../images/pattern.png'); */
            }
            .stories-container h2 {
                font-size: 34px;
                font-weight: 700;
                margin-bottom: 20px;
                color: #fff;
            }
            .stories-container .stories-wrapper {
                display: flex;
                overflow: hidden;
                position: relative;
                width: 100%;
                white-space: nowrap;
            }
            .stories-container .stories {
                display: flex;
                gap: 20px;
                animation: scrollLoop 20s linear infinite;
                z-index: auto;
                z-index: 9;
            }
            
            .stories-container .story {
                width: 250px;
                height: 350px;
                overflow: hidden; /* Ensures the image stays within the box */
                background: none; 
                flex-shrink: 0;
                border-radius: 10px;
                transition: transform 0.5s ease-in-out;
                position: relative;
            }
            .stories-container .story::after {
                content: "\25B6";
                font-size: 36px;
                color:white;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                pointer-events: none;
                transition: background 0.3s ease;
                filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
            }
            .story img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 10px; 
                transition: transform 0.3s ease-in-out;
            }
            
            .story a {
                display: block;
                width: 100%;
                height: 100%;
                pointer-events: auto;
            }
            
            .story img:hover {
                transform: scale(1.05); 
                border-radius: 10px; 

            }
            @keyframes scrollLoop {
                from { transform: translateX(0); }
                to { transform: translateX(-50%); }
            }
            .fade-in {
                opacity: 0;
                transform: translateY(10px);
                animation: fadeIn 1.5s ease-in-out forwards;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            /* @media (max-width: 768px) {
                .story {
                    width: 180px;
                    height: 250px;
                }
            } */
    
    
  


    /* About Page  */

    .about-banner {
        position: relative;
        background: url('../images/banners/training-bg.jpg') no-repeat center center/cover;
        color: white;
        padding: 100px;
        height: 450px;
        display: flex;
        align-items: center;
        filter: brightness(0.7);
    }
    
    .about-banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    }
    
    .container {
        position: relative;
        z-index: 2;
    }
    
    .content-wrapper {
        align-items: flex-end;
    }
    
    /* Breadcrumb Styling */
    .breadcrumb {
        list-style: none;
        padding: 0;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .breadcrumb li {
        font-size: 1rem;
        color: #f8f9fa;
    }
    
    .breadcrumb a {
        color: #f8f9fa;
        text-decoration: none;
    }
    
    .breadcrumb a:hover {
        text-decoration: underline;
    }
    
    /* Title & Text */
    .banner-title {
        font-size: 2.5rem;
        font-weight: bold;
    }
    
    .banner-text {
        font-size: 1.1rem;
    }
    
    /* 📱 Mobile Responsive */
    @media (max-width: 768px) {
        .about-banner {
            height: 250px;
            padding: 60px 0;
        }
        
        /* .content-wrapper {
            max-width: 100%;
        } */
    
        .banner-title {
            font-size: 2rem;
        }
    
        .banner-text {
            font-size: 1rem;
        }
    
        .breadcrumb {
            font-size: 0.9rem;
        }
    }
    

/* About banner */
.about-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.about-carousel .carousel-images {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; 
    background: rgba(0, 0, 0, 0.3);
}
.about-carousel img {
    width: 100%;
    height: 450px; /* Adjust height as needed */
    object-fit: cover;
}
.about 
{
    width: 100%;
    height: 450px;
    background-size: cover;
    background-position: center;
}
.about-banner-text
{
    padding: 195px 115px;
    color: #FFF;
    height: 450px;
    margin: auto;
}
.about-banner-text h1
{
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: #152D46;
}
.breadcrumb {
    list-style: none;
    display: flex;
    padding: 6px 8px;
    background: #7D80DA;
    color: black;
    margin-top: 11px;
    justify-content: center;
    border-radius: 50px;
}
.breadcrumb li {
    margin: 0;
    padding: 0;
}
.breadcrumb li a {
    text-decoration: none;
    color: #000;
    padding: 8px;
}
.breadcrumb li a:hover {
    color: #333;
    text-decoration: none;
}
.breadcrumb li::after {
    content: ">";
    padding: 0 8px;
    color: #000;
}
.breadcrumb li:last-child::after {
    content: "";
}
.breadcrumb li:last-child a {
    color: #fff;
    pointer-events: none;
    font-weight: 400;
}


/* about2 */
.amd-about {
    position: relative;
    background-image: url('../images/banners/about-bg2.png');
    background-size: cover;
    background-position: center;
    height: 650px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 100px;
  }
  
  .amd-about-content-wrapper {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .amd-about-heading {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 44px;
    font-weight: 700;
  }
  
  .amd-about-content {
    width: 100%;
    background-color: #FE654F;
    color: #000;
    padding: 42px 25px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.3;
  }
  
  .amd-about-box p {
    margin: 0;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .amd-about {
      padding: 0 25px;
    }
  
    .amd-about-content-wrapper {
      width: 90%;
    }
  
    .amd-about-heading {
      font-size: 1.5rem;
    }
  }

  .ceo-about {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 5%;
    flex-wrap: wrap;
    position: relative;
    min-height: 700px;
  }
  
  .left-col, .right-col {
    flex: 1 1 50%;
    box-sizing: border-box;
  }
  
  .image-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
  }
  
  .ceo-img {
    width: 100%;
    border-radius: 50%;
    display: block;
    position: relative;
    z-index: 1;
  }
  
  .pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/banners/ceo-pattern-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 3;
  }
  .ceo-about > *:not(.pattern-overlay) {
    position: relative;
    z-index: 2;
  }  
  
  .right-col {
    padding: 20px 40px;
  }
  
  .right-col h2 {
    font-size: 36px;
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
  
  .right-col h4 {
    font-size: 32px;
    margin-bottom: 1.5rem;
    color: #000;
    font-weight: 400;
  }
  
  .right-col p {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .ceo-about {
      flex-direction: column;
      text-align: center;
    }
  
    .left-col, .right-col {
      flex: 1 1 100%;
    }
  
    .pattern {
      left: 0;
      width: 100%;
    }
  
    .right-col {
      padding: 20px;
    }
  }
  @media (min-width:483px) and (max-width:768px){
    .pattern-overlay {
        background-image: url('../images/banners/ceo-pattern-bg-mob.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left;
    }
  }

  
  .section-container {
    background: url('../images/banners/mission-bg.png') no-repeat center center / cover;
    min-height: 700px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .info-box {
    background-color: #FFD039;
    padding: 48px 75px;
    max-width: 630px;
    width: 90%;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .tab-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
  }

  .tab-buttons button {
    padding: 12px 21px;
    border: 1px solid black;
    background: transparent;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 500;
  }

  .tab-buttons button.active,
  .tab-buttons button:hover {
    background: black;
    color: white;
  }

  .tab-content {
    font-size: 13px;
    line-height: 1.3;
    color: #000;
  }

  @media (max-width: 600px) {
    .tab-content {
      font-size: 14px;
    }

    .tab-buttons {
      /* flex-direction: column; */
      gap: 10px;
    }

    .info-box {
      padding: 25px 20px;
    }
  }










  .accreditation-section-index {
    padding: 70px;
    background-color: #D4E6F8;
    text-align: left;
    height: auto;
  }
  
  .accreditation-section-index h2 {
    font-size: 34px;
    margin-bottom: 36px;
    color: #3A3A3A;
    padding-left: 30px;
    font-weight: 700;
  }
  
  .accreditation-logos-index {
    display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 30px;
  align-items: center;
  justify-items: center;
  }
  
  .accreditation-logos-index img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    width: 60%;
  }

/* Responsive for tablets */
@media (max-width: 992px) {
    .accreditation-logos-index {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  /* Responsive for small screens */

  @media (max-width: 576px) {
    .accreditation-logos-index {
      grid-template-columns: repeat(4, 1fr);
      gap: 0px;
    }
  
    .accreditation-logos-index img {
      max-width: 70px;
    }
  }
  @media (max-width: 400px) {
    .accreditation-logos-index {
      grid-template-columns: repeat(4, 1fr);
      gap: 3px;
    }
}
  @media (max-width:768px)
  {
    .accreditation-section-index {
        padding: 65px 25px;
        text-align: center;
      }
      .accreditation-section-index h2 {
        padding-left: 0px;
    }
  }
  @media (max-width:476px)
  {
    .accreditation-section-index h2 {
        font-size: 25px;
    }
  }








  .accreditation-section {
    padding: 70px 100px;
    background-color: #5BC8AF;
    text-align: left;
    height: auto;
  }
  
  .accreditation-section h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #3A3A3A;
  }
  
  .accreditation-logos {
    display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
  align-items: center;
  justify-items: center;
  }
  
  .accreditation-logos img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    width: 60%;
  }

/* Responsive for tablets */
@media (max-width: 992px) {
    .accreditation-logos {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  /* Responsive for small screens */
  @media (max-width: 576px) {
    .accreditation-logos {
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
    }
  
    .accreditation-logos img {
      max-width: 70px;
    }
  }
  @media (max-width:768px)
  {
    .accreditation-section {
        padding: 65px 25px;
        text-align: center;
      }
  }

/* Courses Section */
.course-grid {
    background: #7D80DA;
    padding: 50px;
    height: auto;
    text-align: center;
}
.course-grid .container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.course-grid .course {
    background-color: #5BC8AF;
    padding: 20px;
    transition: transform 0.3s ease;
    width: 300px;
}
/* .course-grid .course:hover {
    transform: translateY(-5px);
} */
.course-grid .course img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
}
.course-grid .course h3 {
    margin: 15px 0;
    font-size: 18px;
    color: #000;
}
.course-grid .course h3 a 
{
    color: #000;
}
.course-grid .course .details {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 10px;
    color: #333;
    font-weight: 600;
}
.course-grid .course p {
    font-size: 14px;
    color: #333;
    text-align: justify;
    line-height: 1.4;
}
.course-grid .course .btn-link {
    display: inline-block;
    margin-top: 13px;
    padding: 8px 15px;
    color: #fff;
    background-color: #142F4A;
    text-decoration: none;
    border-radius: 0px;
    font-weight: 400;
    font-size: 14px;
}
/* .course .btn-link:hover {
    background-color: #222;
} */
.course-grid .heading {
    color: #fff;
    margin-bottom: 30px;
}

/* recognition */

/* training section */
.recognition {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
}
.recognition .training-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/banners/training-bg.jpg') no-repeat center center/cover;
    filter: brightness(0.7);
    z-index: -1;
}
.recognition .training-content {
    align-items: center;
    justify-content: space-between;
    padding: 50px;
    color: white;
    position: relative;
    margin-top: -5px;
}
.recognition .training-content .text-section {
    width: 50%;
}
.recognition .training-content .text-section h1 {
    font-size: 32px;
    font-weight: 500;
}
.recognition .training-content .text-section p {
    font-size: 16px;
    background: #FE654F;
    padding: 24px 35px;
    line-height: 1.5;
}
.recognition .training-content .partners {
    background: #142F4A;
    padding: 24px 35px;
    width: 50%;
    text-align: center;
}
.recognition .training-content .partners h6
{
    font-size: 13px;
    font-weight: 300; 
}
.recognition .training-content .partners .adobe-img {
    width: 45%;
    margin: 26px 0px 28px 0px;
}
.recognition .training-content .partner-img-box
{
    display: flex; 
    justify-content: space-between; 
    align-items: center;  
}
.recognition .training-content .partners img {
    width: auto;
    height: 100%;
    margin: 26px 0px 6px 0px;
}
.recognition .training-content .partner-img-box img
{
    width: 70px;
    height: 70px;
    object-fit: cover;
}
.recognition .training-content .partners hr
{
    background-color: #FE654F;
    border: 1px solid #fe654f;
    opacity: 0.6;
}
.recognition .training-content .nsdc-img
{
    width: 150px !important;
}


      


/* General Section Styling */
.testimonials {
    width: 100%;
    margin: auto;
    padding: 50px;
    text-align: center;
    background: #7D80DA;
}

/* Title Styling */
.testimonials .title {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 40px;
    color: #000;
}

/* Testimonial Box */
.testimonial-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: #142F4A;
    padding: 25px 0px 25px 25px;
    margin-bottom: 10px;
    max-width: 800px;
    margin: auto;
}

/* Image Container */
.image-container {
    flex: 1;
    max-width: 100%;
}

.image-container img {
    width: 90%;
    height: auto;
}

/* Testimonial Content */
.testimonial-content {
    flex: 2;
    text-align: left;
}
.test-head
{
    background: #FE654F;
    padding: 20px;
}
.testimonial-content .quote {
    font-size: 24px;
    font-weight: bold;
    color: #222;
    margin-bottom: 10px;
}

.testimonial-content .desc {
    font-size: 14px;
    color: #d9d9d9;
    line-height: 1.5;
    margin-top: 9px;
    height: 207px;
    overflow-y: scroll;
}

.testimonial-content .author {
    font-weight: bold;
    color: #fff;
}

.testimonial-content .position {
    font-size: 14px;
    color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .testimonial-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .image-container {
        max-width: 100px;
    }

    .testimonial-content {
        text-align: center;
    }
}



/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 0px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: black;
  }





  /* recognition - mission */

.recognition-mission {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
}
.recognition-mission .training-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #7BE6C8;
    z-index: -1;
}
.recognition-mission .training-content {
    max-width: 1000px;  /* Set maximum width */
    margin-left: auto;  /* Align content to the right */
    padding: 50px;
    display: flex;
    align-items: flex-end; /* Align items at the top */
    justify-content: flex-end; /* Push content to the right */
    text-align: justify;
}
.recognition-mission .training-content .text-section {
    width: 100%;
}
.recognition-mission .training-content .text-section h1 {
    font-size: 32px;
    font-weight: 500;
}
.recognition-mission .training-content .text-section p {
    font-size: 14px;
    background: #FE654F;
    padding: 2.65em;
    margin: 5px 5px 5px 0px;
    line-height: 1.5;
}
.recognition-mission .training-content .partners {
    background: #142F4A;
    padding: 24px 35px;
    width: 100%;
    text-align: center;
}
.recognition-mission .training-content .partners h6
{
    font-size: 13px;
    font-weight: 300; 
}
.recognition-mission .training-content .partners .adobe-img {
    width: 45%;
    margin: 26px 0px 28px 0px;
}
.recognition-mission .training-content .partner-img-box
{
    display: flex; 
    justify-content: space-between; 
    align-items: center;  
}
.recognition-mission .training-content .partners img {
    width: auto;
    height: 100%;
    margin: 26px 0px 6px 0px;
}
.recognition-mission .training-content .partner-img-box img
{
    width: 70px;
    height: 70px;
    object-fit: cover;
}
.recognition-mission .training-content .partners hr
{
    background-color: #FE654F;
    border: 1px solid #fe654f;
    opacity: 0.6;
}
.recognition-mission .training-content .nsdc-img
{
    width: 150px !important;
}
.recognition-mission .about-mission
{
    width: 50%;
}
.recognition-mission .about-mission span
{
    color: #000;
    font-weight: 700;
    font-size: 18px;
}
.mission-text {
    opacity: 0;
    transform: translateY(50px);
    animation: slideIn 1s ease-out forwards;
}
@media (max-width: 1024px) {
    .recognition-mission .training-content {
        max-width: 90%; /* Reduce width for smaller screens */
        flex-direction: column; /* Stack items in one column */
        align-items: center;
        text-align: center;
        margin: auto;
    }
    .recognition-mission .about-mission {
        width: 100%;
    }
}
/* Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* industry connections */
.industry-connections {
    text-align: center;
    padding: 50px 20px;
    background-color: #142F4A;
    color: #fff;
}

.industry-connections h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.connections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: auto;
    padding: 20px;
}

.connection-item {
    background: white;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.connection-item img {
    max-width: 100px;
    height: auto;
}

.connection-item:hover {
    transform: scale(1.1);
    /* box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.3); */
}

@media (max-width: 600px) {
    .connections-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


.pattern-container {
    position: relative;
    z-index: 0;
  }
  .pattern-container .carousel-images
  {
    background-image: url('../images/banners/la-banner.jpg');
    background-position: center;
    background-size: cover;
    padding-top: 73px;
  }
  .student-testimonials.section
  {
      padding: 0;
      background-color: transparent;
      height: 500px;
  }
  .pattern-container .about-banner-text {
    padding: 141px 115px;
    height: 407px;
}
.pattern-container .about {
    width: 100%;
    height: 410px;
}
/* Pseudo-element to show background pattern across all child sections */
.pattern-container::before {
    content: '';
    position: absolute;
    top: -130px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/banners/ceo-pattern-bg.png') repeat;
    background-size: cover;
    background-position: top left;
    z-index: 3;
}
@media (max-width: 768px) {
    .pattern-container::before
    {
        background: transparent;
    }
}

/* student testimonials */
.student-testimonials {
    width: 100%;
    max-width: 100%;
    margin: auto;
    text-align: center;
    padding: 50px 20px;
    position: relative;
    background-color: #2CEBFF;
}
.student-testimonials h2
{
    font-size: 34px;
    margin-bottom: 16px;
    font-weight: 700;
}
.testimonial {
    display: none; /* Hide testimonials initially */
    align-items: center;
    justify-content: center;
    background: #142F4A;
    color: white;
    padding: 30px;
    position: relative;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    max-width: 90%;
    margin: auto;
}

.testimonial.active {
    display: flex;
    opacity: 1;
}

.testimonial-video {
    flex: 1;
    padding-right: 20px;
}

.testimonial-video video {
    width: 100%;
    height: 500px;
    border-radius: 10px;
}

.testimonial-content {
    flex: 1;
    text-align: left;
}

.testimonial-content p {
    font-size: 33px;
    margin-bottom: 15px;
    font-style: italic;
}

.testimonial-content h3 {
    font-size: 20px;
    margin-bottom: 5px;
    color: #FFD700;
}

.testimonial-content span {
    font-size: 18px;
    color: #ddd;
}

/* Navigation Dots */
.testimonial-dots {
    text-align: center;
    margin-top: 15px;
}

.dot {
    height: 10px;
    width: 10px;
    background: #bbb;
    display: inline-block;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

/* .dot.active {
    background: #FFD700;
} */

@media (max-width: 768px) {
    .testimonial {
        flex-direction: column;
        text-align: center;
    }

    .testimonial-video {
        padding-right: 0;
        margin-bottom: 15px;
    }
}



/* Gallery Section */
.gallery-section
{
    background: #9196CA;
    padding: 50px 70px;
    max-width: 100%;
    text-align: center;
}
.gallery-section h2
{
    font-size: 34px;
    padding-bottom: 0px;
    color: #152D46;
    font-weight: 700;
}
.events-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .event-card {
    width: 300px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  .event-card img {
    width: 100%;
    border-radius: 6px;
  }
  
  .event-card h3 {
    margin: 10px 0 5px;
  }
  
  .event-card .date {
    font-size: 0.9em;
    color: #777;
  }
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-direction: column;
  }
  .modal-overlay img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
  }
  
/* Gallery Grid Layout */
.gallery-grid {
    display: grid;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* Default: 4 images per row */
@media (min-width: 846px) {
    .gallery-grid {
        grid-template-columns: repeat(4, minmax(200px, 1fr));
        gap: 10px;
    }
}

/* Tablet View: 2 images per row */
@media (max-width: 845px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
    .gallery-section {
        padding: 54px 25px;
    }
}

/* Mobile View: 1 image per row */
@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        gap: 10px;
    }
}

/* Responsive Image Sizing */
.gallery-item {
    width: 100%;
    height: auto;
    margin-top: 40px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    transition: transform 0.3s;
    margin-top: 12px;
}

.gallery-item img:hover {
    transform: scale(1.05);
}



/* Close Button */
.close-btn {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 36px;
    color: white;
    cursor: pointer;
  }

/* Navigation Buttons */
.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10000; /* Keeps buttons above everything */
}

.prev-btn { left: 10%; }
.next-btn { right: 10%; }

/* Ensures buttons appear properly on small screens */
@media (max-width: 768px) {
    .prev-btn, .next-btn {
        font-size: 30px;
        padding: 8px;
    }
}




/* course-detail */

.course-details-hero {
    background: url('../images/banners/course-bg1.png') no-repeat center center/cover;
    padding: 80px 0px;
    color: #fff;
    height: 540px;
}
.course-details-hero .hero-content
{
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-top: 170px;
}
.course-detail-dia
{
    position: relative;
    overflow: hidden; /* Prevents horizontal scrolling */
}
.course-modules a
{
    background: #142F4A;
    padding: 8px 22px;
    color: #fff;
    font-size: 14px;
}
.animated-shape {
    position: absolute;
    top: 50%;
    right: -80px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 22% 24%, #7be6c8, #5bc8af, #7be6c8);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
    animation: moveLeft 12s ease-in-out infinite, fadeEffect 8s ease-in-out infinite, floatUpDown 6s ease-in-out infinite;
}

/* Move shape from right to left */
@keyframes moveLeft {
    0% {
        right: -80px;
    }
    100% {
        right: 100%;
    }
}

/* Fade in and fade out effect */
@keyframes fadeEffect {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Floating effect (up and down) */
@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(-20%);
    }
    50% {
        transform: translateY(-70%); /* Moves slightly up */
    }
}

.course-details-hero .hero-content h1 {
    font-size: 44px;
    font-weight: 700;
}

.course-details-hero .btn {
    background: #FE654F;
    color: white;
    padding: 10px 24px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

.course-details-container.course-overview {
    display: flex;
    justify-content: space-between;
    padding: 50px 100px;
    flex-wrap: wrap;
    max-width: 100%;
    /* margin: auto;
    background: #D4E6F8; */
    background: url('../images/banners/course-overview.png') no-repeat center center/cover;
    height: 800px;

}

.course-details-container .course-details {
    width: 53%;
}

.course-details-container .tabs {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.course-details-container .tablinks {
    background: #142F4A;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
}

.course-details-container .tabcontent {
    display: none;
    text-align: left;
    padding: 20px;
    border: 1px solid #ddd;
    margin-top: 10px;
    background: #FFD039;
}
.course-details-container .tabcontent ul
{
    list-style: circle;
    line-height: 1.5;
    padding: 0px 20px;
}
.course-details-container .tabcontent p
{
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    padding-top: 10px;
}
.course-details-container .tabcontent.active {
    display: block;
}

.course-details-container details {
    margin: 10px 0;
    padding: 10px;
    border-bottom: 1px solid #333;
}

.course-details-container summary {
    font-weight: bold;
    cursor: pointer;
}

.course-details-container .contact-section {
    width: 35%;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 5px;
}

.course-details-container .contact-section input, 
.course-details-container .contact-section textarea {
    width: 100%;
    margin: 10px 0;
    padding: 10px;
}

.course-details-container .contact-section .btn {
    width: 100%;
}

.enroll-btn {
    background: green;
}




/* Responsive Design */
@media (max-width: 768px) {
    .course-details-container {
        flex-direction: column;
    }

    .course-details, .contact-section {
        width: 100%;
    }
}




.course-detail-div
{
    position: relative;
    overflow: hidden; /* Prevents horizontal scrolling */
}





.power-house {
    max-width: 90%;
    margin: 0 auto;
    padding: 130px 20px 70px;
    text-align: center;
  }

  .power-house h1 {
    color: #FE654F;
    margin-bottom: 60px;
    font-size: 44px;
    font-weight: 700;
    margin-top: 45px;
  }

  .member-block.right {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
    text-align: right;
  }
  .member-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
    text-align: left;
  }

  .member-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
  }

  .member-image {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

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

  .member-info {
    max-width: 200px;
    font-size: 13px;
    color: #444;
  }

  .member-info h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #000;
    font-weight: 700;
  }

  /* Alternating layout */
  .left .member-content {
    flex-direction: row;
    align-self: flex-start;
  }

  .right .member-content {
    flex-direction: row-reverse;
    align-self: flex-end;
  }
  .ph-block-left
  {
      margin-top: 108px;
  }
  .ph-block
  {
    display: flex;
        margin: auto;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap; 
  }

.collaborators-section {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 20px 100px ;
  }

  .collaborators-section h2 {
    font-size: 36px;
    color: #5BC8AF;
    margin-bottom: 90px;
    text-align: left;
  }
  .collab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
    gap: 100px;
    flex-wrap: wrap;
  }

  .collab-logo {
    flex: 0 0 280px;
  }

  .collab-logo img {
    max-width: 100%;
    height: auto;
  }

  .collab-description {
    flex: 1;
    font-size: 13px;
    line-height: 1.2;
    color: #000;
  }

  @media (max-width: 768px) {
    .member-content {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center;
    }

    .member-info {
      text-align: center !important;
    }
    .ph-block-left {
        margin-top: 0px;
    }
    .power-house
    {
        padding: 130px 25px 35px;
    }
    .power-house h1
    {
        margin-bottom: 32px;
    }
    .collaborators-section
    {
        padding: 20px 25px;
    }
    .collaborators-section h2
    {
        text-align: center;
        margin-bottom: 43px;
    }
    .collab-row
    {
        gap: 10px;
        margin-bottom: 40px;
    }
    .collab-logo {
        flex: 0 0 70px;
      }
      .collab-logo img {
        max-width: 70%;
    }
  }




  @media (max-width: 768px) {
    .collab-row {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .collab-description {
      text-align: center;
      margin-top: 0px;
    }
  }


  .text-black
  {
    color: #000;
  }
  
  .text-secondary
  {
    color: #7D80DA;
  }


  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 200px);
    gap: 10px;
    padding: 50px 100px;
  }

  .box {
    background-color: #2c3e50;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-align: center;
  }

  .box1 {
     grid-column: 1; 
     grid-row: 1 / span 2; 
     background-image: url('../images/facilities/2.jpg');
     background-position: center;
     background-size: cover;
    }
  .box2 {
     grid-column: 2; 
     grid-row: 1 / span 2; 
     background-image: url('../images/facilities/3.jpg');
     background-position: center;
     background-size: cover;
    }
  .box3 { 
    grid-column: 3 / span 2; 
    grid-row: 1;
    background-image: url('../images/facilities/1.jpg');
    background-position: center;
    background-size: cover;
    }
  .box4 { 
    grid-column: 3; 
    grid-row: 2;
    background-image: url('../images/facilities/4.jpg');
    background-position: center;
    background-size: cover;
    }
  .box5 { 
    grid-column: 4; 
    grid-row: 2 / span 2; 
    background-image: url('../images/facilities/7.jpg');
    background-position: center;
    background-size: cover;
    }
  .box6 { 
    grid-column: 1 / span 2; 
    grid-row: 3; 
    background-image: url('../images/facilities/5.jpg');
    background-position: center;
    background-size: cover;
    }
  .box7 { grid-column: 3; grid-row: 3; 
    background-image: url('../images/facilities/6.jpg');
    background-position: center;
    background-size: cover;
}

  /* Responsive behavior */
  @media (max-width: 768px) {
    .grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      padding: 20px 25px 50px 25px;
    }

    .box {
      grid-column: auto !important;
      grid-row: auto !important;
      height: 150px;
    }
  }

.gallery-section .view-all {
    background: #142F4A;
    color: rgb(255, 255, 255);
    padding: 10px 19px;
    border: 1px solid #142F4A;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
    border-radius: 0px;
    margin-top: 30px;
    opacity: 0.7;
}

.gallery-section .view-all:hover {
    background: #142F4A;
    transform: scale(1.05);
}




.thumbs-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin: auto;
    margin-top: 0;
  }
  
  .scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background-color: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
    color: #333;
    font-weight: bold;
    transition: background-color 0.3s;
  }
  
  .scroll-btn:hover {
    background-color: transparent;
    color: #000;
  }
  
  .scroll-btn.left {
    left: 0;
  }
  
  .scroll-btn.right {
    right: 0;
  }
  
  .thumbs-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 1;
    pointer-events: none;
  }
  
  .left-shadow {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
  }
  
  .right-shadow {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
  }
  



.testim {
    padding: 50px 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
  }

  .testim-text {
    flex: 1 1 250px;
    font-size: 70px;
    font-weight: bold;
    color: #5ac1ab;
    line-height: 1.2;
    margin: auto;
    padding: 0px 100px 0px 0px;
    text-align: left;
  }

  .testim-video-section {
    flex: 1 1 500px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .main-video {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    height: auto;
  }
  .main-video::after {
    content: "\25B6"; /* Unicode for play icon ► */
    font-size: 60px;
    color: white;
    text-shadow: 0px 0px 8px rgba(0,0,0,0.6);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* let clicks pass through */
  }
  .main-video img {
    width: 100%;
    border-radius: 12px;
    height: auto;
    display: block;
  }

  .thumbs {
    display: flex;
    gap: 15px;
    overflow-x: hidden;
  }

  .thumbs img {
    height: auto;
    width: 30%;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
    flex-shrink: 0;
    margin: auto;
  }

  @media (max-width: 768px) {
    .testim {
        flex-direction: row;
        align-items: center;
        text-align: center;
        margin: auto;
        padding: 25px;
    }
    .testim-text
    {
        padding: 0;
        font-size: 2.5rem;
    }

    .thumbs {
      justify-content: center;
    }
  }

  @media (max-width: 1090px) {
    .testim-text
    {
        padding: 0;
        text-align: center;
    }
}

  .placement-cloud {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 860px;
    margin: 0 auto;
    background-color: #fff;
    /* margin-bottom: 245px; */
    margin-bottom: -21px;
    
  }
  .placement-cloud::before {
    content: "";
    position: absolute;
    top: -626px;
    left: calc(50% - 50vw);
    width: 98vw;        
    height: 720px;      
    pointer-events: none;
    z-index: 0;
    background:url("../images/placement_bg.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left top;
    background-size: 351px 436px, 351px 436px;
  }
 
  /* Right-bottom background */
.placement-cloud::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: calc(48% - 47vw);
    width: 98vw;
    height: 500px; /* adjust as needed */
    pointer-events: none;
    z-index: 0;
    background: url("../images/placement_bg2.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 414px 357px;
  }
  .place h2
  {
    color: #F26652;
    font-size: 44px;
    font-weight: 700;
    text-align: center;
    margin-top: 156px;
    margin-bottom: 450px;
  }
  .circle {
    position: absolute;
    width: 140px;
    height: 140px;
    top: var(--top);
    left: var(--left);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
    z-index: 1;
  }
  .circle-1 {
    position: absolute;
    width: 165px;
    height: 165px;
    --top: 0%;
    --left: 12%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-2 {
    position: absolute;
    --top: -38%;
    --left: 34%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-3 {
    position: absolute;
    --top: 1%;
    --left: 26%;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-4 {
    position: absolute;
    width: 140px;
    height: 140px;
    --top: 6%;
    --left: 42%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-5 {
    position: absolute;
    --top: 8%;
    --left: 64%;
    width: 265px;
    height: 265px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-6 {
    position: absolute;
    --top: -16%;
    --left: 37%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-7 {
    position: absolute;
    width: 150px;
    height: 150px;
    --top: -9%;
    --left: 66%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-8 {
    position: absolute;
    width: 215px;
    height: 215px;
    --top: 32%;
    --left: 53%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-9 {
    position: absolute;
    --top: -26%;
    --left: 17%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-10 {
    position: absolute;
    --top: -39%;
    --left: 50%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-11 {
    position: absolute;
    --top: -5%;
    --left: 52%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-12 {
    position: absolute;
    --top: 21%;
    --left: 33%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-13 {
    position: absolute;
    --top: 48%;
    --left: 34%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-14 {
    position: absolute;
    --top: 68%;
    --left: 13%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-15 {
    position: absolute;
    --top: 41%;
    --left: 22%;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-16 {
    position: absolute;
    --top: 15%;
    --left: 52%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-17 {
    position: absolute;
    --top: 19%;
    --left: 17%;
    width: 195px;
    height: 195px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-18 {
    position: absolute;
    width: 140px;
    height: 140px;
    --top: 87%;--left: 40%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-19 {
    position: absolute;
    width: 140px;
    height: 140px;
    --top: 109%;
    --left: 42%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-20 {
    position: absolute;
    --top: 91%;
    --left: 27%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-21 {
    position: absolute;
    width: 140px;
    height: 140px;
    --top: 37%; --left: 56%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-22 {
    position: absolute;
    --top: 50%;
    --left: 64%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-23 {
    position: absolute;
    --top: 48%;
    --left: 22%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-24 {
    position: absolute;
    --top: 65%;
    --left: 29%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-25 {
    position: absolute;
    --top: 70%;
    --left: 42%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-26 {
    position: absolute;
    --top: 58%;
    --left: 50%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  .circle-27 {
    position: absolute;
    --top: 86%;
    --left: 51%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.3s ease;
  }

  .circle img {
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: 50%;
  }
  
@media (max-width:1164px)
{
    .circle-1, .circle-2, .circle-3, .circle-4, .circle-5, .circle-6, .circle-7, .circle-8, .circle-9,
    .circle-10, .circle-11, .circle-12, .circle-13, .circle-14, .circle-15, .circle-16, .circle-17,.circle-18,
    .circle-19, .circle-20, .circle-21, .circle-22, .circle-23, .circle-24, .circle-25, .circle-26, .circle-27
    {
        position: relative;
        width: 100%;
        height: 100%;
        --top: 0;
        --left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: transform 0.3s ease;
        margin: auto;
    }
    .placement-cloud {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        margin-bottom: 28px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 25px;
        gap: 12px;
    }
    .circle img {
        width: 90%;
        height: 97%;
        object-fit: cover;
        border-radius: 50%;
    }
    .place h2 {
        margin-top: 146px;
        margin-bottom: 19px;
    }
    .placement-cloud::before, .placement-cloud::after 
    {
        background-image: none;
    }
}

  .circle:hover {
    transform: scale(1.1);
  }
  





    /* Employers - placement page */
    .employers {
        width: 100%;
        overflow: hidden;
        background-color: #f9f9f9;
        padding: 50px 0 80px 0px;
        text-align: center;
        position: relative;
        margin-top: -5px;
        color: #000;
    }
    .employers h2 {
        font-size: 36px;
        font-weight: 500;
        margin-bottom: 20px;
        text-align: left;
        margin-left: 100px;
    }
    .employers .stories-wrapper {
        display: flex;
        overflow: hidden;
        position: relative;
        width: 100%;
        white-space: nowrap;
    }
    .employers .stories {
        display: flex;
        gap: 20px;
        animation: scrollLoop 10s linear infinite;
        z-index: auto;
        z-index: 9;
    }
    
    .employers .story {
        width: 200px;
        height: 200px;
        overflow: hidden; /* Ensures the image stays within the box */
        flex-shrink: 0;
        border-radius: 12px;
        transition: transform 0.5s ease-in-out;
    }
    .employers .story img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px; /* Keep rounded corners */
        transition: transform 0.3s ease-in-out;
    }
    
    .employers .story a {
        display: block;
        width: 100%;
        height: 100%;
        pointer-events: auto;
    }
    
    .employers .story img:hover {
        transform: scale(1.05); /* Slight zoom effect on hover */
    }
    @keyframes scrollLoop {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }
    /* Smooth Fade-in Effect */
    .fade-in {
        opacity: 0;
        transform: translateY(10px);
        animation: fadeIn 1.5s ease-in-out forwards;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @media (max-width: 768px) {
        .employers .story {
            width: 180px;
            height: 180px;
        }
    }




/* course-overview section */
.course-overview {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
    margin-top: -87px;
}
.course-outline-wrapper {
    position: relative;
    z-index: 4;
    width: 100%;
    margin-top: -80px; /* overlap the bottom of banner */
    display: flex;
    justify-content: center;
}
.course-overview .training-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/banners/course-overview.png') no-repeat center center/cover;
    /* filter: brightness(0.7); */
    z-index: -1;
}
.course-overview .training-content {
    align-items: center;
    justify-content: flex-end;
    padding: 50px 50px 0px 100px;
    color: white;
    position: relative;
    margin-top: -5px;
    min-height: 555px;
    display: flex;
    flex-direction: column;
}
.course-outline-wrapper .course-outline {
    font-size: 16px;
    background: #7D80DA;
    padding: 46px 96px;
    color: #000;
    width: fit-content;
    display: flex;
}
.course-outline-wrapper .course-outline .outline {
    margin-right: 10px;
    padding: 3px;
    margin-left: 10px;
}
.course-outline-wrapper .course-outline a 
{
    padding: 7px 9px;
    border: 1px solid black;
    border-radius: 52px;
    width: 100px;
    display: block;
    text-align: center;
    color: #000;
    font-size: 14px;
}
.course-outline-wrapper .course-outline h6
{
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 17px;
}
.course-overview .training-content .text-section {
    width: 47%;
}
.course-overview .training-content .text-section h1 {
    font-size: 36px;
    font-weight: 600;
}
.course-overview .training-content .text-section p {
    font-size: 13px;
    background: #FFD039;
    padding: 50px 30px;
    color: #000;
}
.course-certif
{
    display: flex;
}

  @media (max-width: 660px) {
    /* .course-outline-wrapper {
      margin-top: -40px;
    } */
    .course-outline-wrapper .course-outline {
        display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 80%;
            padding: 25px;
    }
    .course-overview
    {
        margin-top: -55px;
    }
    .course-certif
{
    display: grid;
}
.course-overview .training-content {
    align-items: end;
    justify-content: flex-end;
    padding: 25px;
}
.course-overview .training-content .text-section {
    width: 100%;
}
.course-outline-wrapper
{
    margin-top: -158px;
}
.course-outline-wrapper .course-outline h6
{
    font-size: 12px;
    padding-bottom:8px;
}
.course-outline-wrapper .course-outline a {
    padding: 4px 4px;
    width: 90px;
    font-size: 10px;
}
  }
  @media (max-width: 352px) {
    .course-overview {
        margin-top: -130px;
    }
    .course-overview .training-content .text-section {
        margin-top: 199px;
    }
    .course-overview .training-content .text-section p {
        font-size: 14px;
        padding: 29px 30px;
    }
  }
@media (max-width:600px)
{
    .course-train .course-certif .text-section {
        width: 100%;
    }
    .training .training-content .text-section p
    {
        font-size: 15px;
    }
    .course-train .course-certif .partners {
        width: 100%;
    }
    .training .training-content
    {
        padding: 90px 25px;
        text-align: left;
    }
    .training .training-content .partners .adobe-img
    {
        width: 70%;
        margin: 20px 0px 20px 0px;
    }
} 

@media (max-width:800px)
{
    .course-overview .training-content
    {
        padding: 50px 25px 0px 25px;
    }
}
  .course-insight {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
}
.course-insight .training-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/banners/course-insight.png') no-repeat center center/cover;
    /* filter: brightness(0.7); */
}
.course-insight .training-content {
    /* align-items: center; */
    justify-content: flex-end;
    padding: 50px 100px 0px 100px;
    color: white;
    position: relative;
    margin-top: -5px;
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

.course-insight .training-content .text-section {
    width: 60%;
}
.course-insight .training-content .text-section h1 {
    font-size: 36px;
    font-weight: 600;
}
.course-insight .training-content .text-section ul {
    font-size: 13px;
    background: #FE654F;
    padding: 50px 30px;
    color: #000;
    line-height: 1.6;
}
.course-insight .training-content .text-section ul hr
{
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #000;
    opacity: 0.6;
}
@media (max-width:800px)
{
    .course-insight .training-content .text-section {
        width: 100%;
    }
    .course-insight .training-content {
        align-items: center;
        justify-content: flex-end;
        padding: 87px 25px;
        margin-top: 0px;
    }

    .course-insight .training-content .text-section ul {
        font-size: 14px;
        padding: 32px;
        text-align: left;
    }
}
@media (max-width:400px)
{
    .course-insight .training-content .text-section {
        width: 100%;
    }
    .course-insight .training-content {
        align-items: center;
        justify-content: flex-end;
        padding: 87px 25px;
        margin-top: 0px;
    }
    .course-insight .training-content .text-section ul {
        font-size: 14px;
        padding: 32px;
        text-align: left;
    }
}

.course-syllabus {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
}
.course-syllabus .training-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/banners/course-bg4.png') no-repeat center center/cover;
    /* filter: brightness(0.7); */
}

.course-syllabus .faqs {
    background: #152D46;
    padding: 40px 57px;
    margin-top: 0px;
    width: 43%;
    border-radius: 8px;
}
.faqs h2
{
    font-size: 24px;
    margin-bottom: 25px;
    font-weight: 500;
}
.faqs details
{
    font-weight: 300;
    margin-bottom: 12px;
    border-bottom: 1px solid #fff;
    padding-bottom: 7px;
}
.course-syllabus .training-content {
    align-items: center;
    justify-content: flex-end;
    padding: 40px 100px 0px 100px;
    color: white;
    position: relative;
    min-height: 670px;
    display: flex;
    flex-direction: row;
}

.course-syllabus .training-content .text-section {
    width: 45%;
}
.course-syllabus .training-content .text-section h1 {
    font-size: 32px;
    font-weight: 500;
}

/* Hide default disclosure triangle */
details summary {
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none;
}

/* Style the summary */
details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 3px 0px;
    font-weight: 200;
    background-color: transparent;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 400;
}

/* Optional: Style paragraph inside details */
details p {
    padding: 10px;
    margin: 0;
    background-color: transparent;
    border-top: none;
    line-height: 1.7;
    font-size: 12px;
    color: #7EAAD4;
}

/* Custom arrow */
.arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
    font-size: 12px;
}

/* Change arrow when open */
details[open] .arrow {
    content: '&and;';
    transform: rotate(180deg);
}
details[open] .arrow::before {
    content: '\2227'; /* &and; (∧) */
    display: none;
}
details:not([open]) .arrow::before {
    content: '\2228'; /* &or; (∨) */
    display: none;
}


.course-syllabus summary .arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: auto;
    transition: transform 0.3s ease;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
                no-repeat center;
    background-size: contain;
  }
  
  /* Rotate arrow when open */
  .course-syllabus details[open] .arrow {
    transform: rotate(180deg);
  }
@media (max-width:800px)
{
    .course-syllabus .faqs {
        padding: 22px 26px;
        width: 55%;
    }
    .course-syllabus .training-content {
        padding: 0 25px;
    }
}
@media (max-width:450px)
{
    .course-syllabus .faqs {
        padding: 22px 26px;
        width: 100%;
    }
    .course-syllabus .training-content {
        padding: 0 25px;
    }
}



.career-scope
{
    background: #5BC8AF;
    padding: 88px 100px;
    max-width: 100%;
}
.career-scope h2
{
    font-size: 36px;
    margin-bottom: 65px;
    text-align: left;
}
.career-scope .scope 
{
    width: 96%;
    display: flex;
    flex-wrap: wrap;
    justify-content: normal;
    justify-content: center;
    margin: auto;
}
.career-scope .scope a 
{
    display: flex;
    border: 1.4px solid #000;
    padding: 10px 10px;
    border-radius: 50px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
}
.career-scope .scope .scope-items
{
    margin-bottom: 11px;
    margin-right: 11px;
}
.course-cert-head
{
    text-align: left;
    font-size: 36px;
    font-weight: 600;
}
@media (max-width:400px)
{
    .career-scope h2 {
        margin-bottom: 26px;
        text-align: center;
    }
    .career-scope {
        padding: 25px;
    }
    .career-scope .scope .scope-items {
        margin-bottom: 15px;
        margin-right: 4px;
        margin-left: 4px;
    }
    .course-train .course-certif .text-section {
        width: 100%;
    }
    .training .training-content .text-section p {
        padding: 25px 25px;
        font-size: 14px;
        text-align: center;
    }
    .course-train .course-certif .partners {
        width: 100%;
    }
    .course-cert-head
{
    text-align: center;
    margin-bottom: 20px;
}
}
@media (max-width:700px)
{
    .career-scope h2
    {
        text-align: center;
    }
}
@media (max-width:600px)
{
    .course-cert-head {
        text-align: center;
        margin-bottom: 25px;
    }
}

















































/* course-overview section */
.clientele-section-1 {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
}
.course-outline-wrapper {
    position: relative;
    z-index: 4;
    width: 100%;
    margin-top: -80px; /* overlap the bottom of banner */
    display: flex;
    justify-content: center;
}
.clientele-section-1 .training-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/banners/clientele-bg-1.png') no-repeat center center/cover;
    /* filter: brightness(0.7); */
    z-index: -1;
}
.clientele-section-1 .training-content {
    align-items: flex-end;
    justify-content: flex-start;
    color: white;
    position: relative;
    min-height: 680px;
    display: flex;
}
.course-outline-wrapper .course-outline {
    font-size: 16px;
    background: #7D80DA;
    padding: 46px 96px;
    color: #000;
    width: fit-content;
    display: flex;
}
.course-outline-wrapper .course-outline .outline {
    margin-right: 10px;
    padding: 3px;
    margin-left: 10px;
}
.course-outline-wrapper .course-outline a 
{
    padding: 7px 9px;
    border: 1px solid black;
    border-radius: 52px;
    width: auto;
    display: block;
    text-align: center;
    color: #000;
    font-size: 14px;
}
.course-outline-wrapper .course-outline h6
{
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 17px;
}
.clientele-section-1 .training-content .text-section {
    width: 50%;
}
.clientele-section-1 .training-content .text-section h1 {
    font-size: 36px;
    font-weight: 600;
}
.clientele-section-1 .training-content .text-section p {
    font-weight: 700;
    font-size: 62px;
    background: #FFD039;
    padding: 40px 80px 40px 100px;
    color: #1C1C1C;
    line-height: 1;
    margin-top: 35px;
}
.clientele-section-1 .training-content .text-section p span
{
    color: #FE654F;
}
.course-certif
{
    display: flex;
}

  @media (max-width: 660px) {
    /* .course-outline-wrapper {
      margin-top: -40px;
    } */
    .course-outline-wrapper .course-outline {
        display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 80%;
            padding: 25px;
    }
    .clientele-section-1
    {
        margin-top: -55px;
    }
    .course-certif
{
    display: grid;
}
.clientele-section-1 .training-content {
    align-items: end;
    justify-content: flex-end;
    padding: 25px;
}
.clientele-section-1 .training-content .text-section {
    width: 100%;
}
.course-outline-wrapper
{
    margin-top: -158px;
}
.course-outline-wrapper .course-outline h6
{
    font-size: 12px;
    padding-bottom:8px;
}
.course-outline-wrapper .course-outline a {
    padding: 4px 4px;
    width: 90px;
    font-size: 10px;
}
  }
  @media (max-width: 352px) {
    .clientele-section-1 {
        margin-top: -130px;
    }
    .clientele-section-1 .training-content .text-section {
        margin-top: 199px;
    }
    .clientele-section-1 .training-content .text-section p {
        font-size: 14px;
        padding: 29px 30px;
    }
  }
@media (max-width:600px)
{
    .course-train .course-certif .text-section {
        width: 100%;
    }
    .training .training-content .text-section p
    {
        font-size: 15px;
    }
    .course-train .course-certif .partners {
        width: 100%;
    }
    .training .training-content
    {
        padding: 90px 25px;
        text-align: left;
    }
    .training .training-content .partners .adobe-img
    {
        width: 70%;
        margin: 20px 0px 20px 0px;
    }
    .clientele-section-1 .training-content .text-section p {
        font-size: 34px;
        padding: 39px 25px 40px 25px;
    }
    .clientele-section-2 .training-content .text-section ul
    {
        font-size: 34px;
        padding: 39px 25px 40px 25px;
    }
} 

@media (max-width:800px)
{
    .course-overview .training-content
    {
        padding: 50px 25px 0px 25px;
    }
    .clientele-section-1 .training-content .text-section p {
        font-size: 38px;
        padding: 40px 40px 40px 60px;
    }
}
  .clientele-section-2 {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
}
.clientele-section-2 .training-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/banners/clientele-bg-2.png') no-repeat center center/cover;
    /* filter: brightness(0.7); */
}
.clientele-section-2 .training-content {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0px 0px 0px 0px;
    color: white;
    position: relative;
    min-height: 680px;
    display: flex;
}

.clientele-section-2 .training-content .text-section {
    width: 50%;
}
.clientele-section-2 .training-content .text-section h1 {
    font-size: 36px;
    font-weight: 600;
}
.clientele-section-2 .training-content .text-section ul {
    font-weight: 700;
    font-size: 62px;
    background: #FE654F;
    padding: 40px 100px 40px 100px;
    color: #1C1C1C;
    line-height: 1.1;
    text-align: right;
}
.clientele-section-2 .training-content .text-section ul span
{
    color: #fff;
}
.clientele-section-2 .training-content .text-section ul hr
{
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #000;
    opacity: 0.6;
}
@media (max-width:1100px){
    .clientele-section-2 .training-content .text-section ul {
        text-align: right;
        font-size: 38px;
        padding: 30px 70px 15px 30px;  
    }
}
@media (max-width:800px)
{
    /* .clientele-section-2 .training-content .text-section {
        width: 100%;
    } */
    .clientele-section-2 .training-content {
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0;
        margin-top: 0px;
    }

    .clientele-section-2 .training-content .text-section ul {
        text-align: right;
        font-size: 38px;
        padding: 40px 30px 40px 30px;  
    }
}
@media (max-width:660px){
    .clientele-section-2 .training-content .text-section {
        width: 100%;
    }
    .clientele-section-2 .training-content
    {
        padding: 25px;
    }
    .clientele-section-2 .training-content .text-section ul {
        padding: 40px 40px 40px 60px;
    }
}
@media (max-width:400px)
{
    .clientele-section-2 .training-content .text-section {
        width: 100%;
    }
    .clientele-section-2 .training-content {
        align-items: flex-end;
        justify-content: flex-end;
        padding: 87px 25px;
        margin-top: 0px;
    }
    .clientele-section-2 .training-content .text-section ul {
        padding: 40px 28px 40px 28px;
        text-align: left;
    }
}

.clientele-section-3 {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
}
.clientele-section-3 .training-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/banners/clientele-bg-3.png') no-repeat center center/cover;
    /* filter: brightness(0.7); */
}

.clientele-section-3 .faqs {
    background: #7D80DA;
    padding: 40px 100px;
    width: 53%;
}
.clientele-section-3 .faqs h2
{
    font-weight: 700;
    font-size: 62px;
    color: #1C1C1C;
    line-height: 1;
    margin-bottom: 0;
}
.clientele-section-3 .faqs h2 span
{
    color: #fff;
}
.clientele-section-3 .faqs details
{
    font-weight: 700;
    font-size: 62px;
    color: #1C1C1C;
}
.clientele-section-3 .training-content {
    align-items: center;
    justify-content: flex-start;
    padding: 45px 80px 45px 0px;
    position: relative;
    min-height: 670px;
    display: flex;
}

.clientele-section-3 .training-content .text-section {
    width: 45%;
}
.clientele-section-3 .training-content .text-section h1 {
    font-size: 32px;
    font-weight: 500;
}



@media (max-width:800px)
{
    .clientele-section-3 .faqs {
        padding: 22px 26px;
        width: 55%;
    }
    .clientele-section-3 .training-content {
        padding: 0 25px;
    }
}
@media (max-width:450px)
{
    .clientele-section-3 .faqs {
        padding: 22px 26px;
        width: 100%;
    }
    .clientele-section-3 .training-content {
        padding: 0 25px;
    }
}



.clientele-section-4
{
    background: #5BC8AF;
    padding: 88px 100px;
    max-width: 100%;
}
.clientele-section-4 h2
{
    font-size: 36px;
    margin-bottom: 65px;
    text-align: left;
}
.clientele-section-4 .scope 
{
    width: 96%;
    display: flex;
    flex-wrap: wrap;
    justify-content: normal;
    justify-content: center;
    margin: auto;
}
.clientele-section-4 .scope a 
{
    display: flex;
    border: 1.4px solid #000;
    padding: 10px 10px;
    border-radius: 50px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
}
.clientele-section-4 .scope .scope-items
{
    margin-bottom: 11px;
    margin-right: 11px;
}
.course-cert-head
{
    text-align: left;
    font-size: 36px;
    font-weight: 600;
}
@media (max-width:400px)
{
    .clientele-section-4 h2 {
        margin-bottom: 26px;
        text-align: center;
    }
    .clientele-section-4 {
        padding: 25px;
    }
    .clientele-section-4 .scope .scope-items {
        margin-bottom: 15px;
        margin-right: 4px;
        margin-left: 4px;
    }
    .course-train .course-certif .text-section {
        width: 100%;
    }
    .training .training-content .text-section p {
        padding: 25px 25px;
        font-size: 14px;
        text-align: center;
    }
    .course-train .course-certif .partners {
        width: 100%;
    }
    .course-cert-head
{
    text-align: center;
    margin-bottom: 20px;
}
}
@media (max-width:700px)
{
    .clientele-section-4 h2
    {
        text-align: center;
    }
}
@media (max-width:600px)
{
    .course-cert-head {
        text-align: center;
        margin-bottom: 25px;
    }
}


   /* Clientele - Home page */
   .clientele-index {
    width: 100%;
    overflow: hidden;
    /* background-color: #D4E6F8; */
    padding: 50px 0 80px 0px;
    text-align: center;
    position: relative;
    margin-top: -5px;
    color: #000;

}
.clientele-index h1 {
    margin-bottom: 43px;
    text-align: center;
    /* margin-left: 100px; */
    font-size: 34px;
    font-weight: 700;
    color: #7D80DA;
    margin-top: 20px;
}

.clientele-index h2 {
    font-size: 34px;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: left;
    margin-left: 100px;
    color: #142F4A;
}

.clientele-index .stories-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    white-space: nowrap;
}
.clientele-index .stories {
    display: flex;
    gap: 20px;
    animation: scrollLoop 30s linear infinite;
    z-index: auto;
    z-index: 9;
}

.clientele-index .story {
    width: 200px;
    height: 200px;
    overflow: hidden; /* Ensures the image stays within the box */
    flex-shrink: 0;
    border-radius: 12px;
    transition: transform 0.5s ease-in-out;
}
.clientele-index .story img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px; /* Keep rounded corners */
    transition: transform 0.3s ease-in-out;
}

.clientele-index .story a {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.clientele-index .story img:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}
@keyframes scrollLoop {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
/* Smooth Fade-in Effect */
.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeIn 1.5s ease-in-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
    .employers .story {
        width: 180px;
        height: 180px;
    }
}


/* Clientele college logos */

.clientele-college {
    padding: 70px 20px;
    background-color: #fff;
    text-align: left;
    height: auto;
  }
  
  .clientele-college h2 {
    font-size: 34px;
    margin-bottom: 20px;
    color: #142F4A;
    margin-left: 80px;
  }
  
  .clientele-college-logos {
    display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0px;
  align-items: center;
  justify-items: center;
  }
  
  .clientele-college-logos img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    width: 80%;
  }



/* Responsive for tablets */
@media (max-width: 992px) {
    .clientele-college-logos {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  /* Responsive for small screens */
  @media (max-width: 576px) {
    .clientele-college-logos {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  
    .clientele-college-logos img {
      max-width: 70px;
    }
  }
  @media (max-width:768px)
  {
    .clientele-college {
        padding: 65px 25px;
        text-align: center;
      }
  }


  @media (max-width:414px)
  {
    .course-details-hero {
        height: 636px;
        padding: 25px 25px;
      }
      .course-details-hero .hero-content h1 {
        font-size: 32px;
      }
      .course-overview .training-content
      {
        min-height: 650px;
      }
  }

  @media (max-width:600px){
    .clientele-index h2
    {
        margin-left: 35px;
        font-size: 25px;
    }
}