/* Generated production bundle. Edit source files, then rebuild this bundle. */

/* ===== contact.css ===== */
:root {
    --headingfont:'Kreon', serif;
    --textfont:'Raleway',serif;
    --brand-green: #00e65a;
    --sm-bg-dark: #2d2d2d;
    --sm-white: #ffffff;
    --sm-text-gray: #b0b0b0;
    --sm-btn-green: #00e640;
}
body {
    background-color: #f8f9fa;
    
    }
h1, .lead { font-family: var(--headingfont); }

h1 { font-size: 2.8rem; text-shadow: 1px 1px 1px rgba(0,0,0,0.05); }
.lead { font-size: 1.3rem; }
.contact-details p { margin-bottom: 0.5rem; font-size: 1.1rem; }
.mr-2 { margin-right: 0.5rem; }


    /* Navbar Styling */
        .navbar {
            background-color: #212121;
            padding: 1rem;
        }
        .navbar-brand {
            font-weight: 700;
            letter-spacing: 1px;
            font-size: 1.5rem;
        }
        .nav-link {
            color: white !important;
            font-size: 0.9rem;
            margin: 0 10px;
        }
        .nav-link.active-green {
            color: var(--brand-green) !important;
            font-weight: bold;
        }




/* Custom Navbar Styling */
.sm-main-navbar {
    padding: 0.8rem 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Desktop Hover Effects */
@media (min-width: 992px) {
    .sm-main-navbar .nav-link {
        font-weight: 500;
        transition: color 0.3s ease;
        position: relative;
    }

    .sm-main-navbar .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        background-color: #0d6efd; /* Bootstrap Primary */
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .sm-main-navbar .nav-link:hover::after {
        width: 80%;
    }
}

/* Mobile Offcanvas Enhancements */
.sm-mobile-offcanvas {
    width: 280px !important;
}

.sm-mobile-offcanvas .nav-link {
    font-size: 1.1rem;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sm-mobile-offcanvas .nav-link:hover {
    color: #0d6efd !important;
}

/* Fix for background blur when offcanvas is active */
.offcanvas-backdrop.show {
    opacity: 0.7;
    backdrop-filter: blur(4px);
}

/* --- Mobile Sidebar Styles (Matching image_849760.png) --- */
@media (max-width: 991px) {
    .sm-mobile-menu {
        background-color: #0b1426 !important; /* Deep Navy */
        width: 280px !important;
    }

    .custom-search {
        background-color: #1a2436 !important;
        border: 1px solid #2d394d !important;
        color: #fff !important;
        border-radius: 8px;
    }

    .sm-mobile-menu .nav-link {
        color: #ffffff !important;
        font-weight: 600;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .search-container{
        display: block;
    }
    .texthideshow{
        display: block;
    }
}




/* Footer Main Container */
        .sm-footer-wrapper {
            background-color: var(--sm-bg-dark);
            color: var(--sm-white);
            padding: 80px 0;
        }

        /* Typography */
        .sm-footer-brand {
            font-weight: 800;
            font-size: 1.5rem;
            letter-spacing: 1px;
            margin-bottom: 30px;
            text-transform: uppercase;
        }

        .sm-footer-brand span {
            font-weight: 300;
        }

        .sm-footer-desc {
            color: var(--sm-text-gray);
            font-size: 0.95rem;
            line-height: 1.6;
            max-width: 280px;
            margin-bottom: 25px;
        }

        .sm-footer-meta {
            color: var(--sm-text-gray);
            font-size: 0.9rem;
            text-decoration: none;
            display: block;
            margin-top: 5px;
        }

        .sm-footer-link:hover {
            color: var(--sm-white);
        }

    

        /* Right Side Layout */
        .sm-footer-cta-text {
            font-size: 1.1rem;
            margin-right: 20px;
            font-weight: 300;
        }

        /* The Custom Green Button */
        .sm-footer-btn-login {
            background-color: var(--sm-btn-green);
            color: #fff;
            border: none;
            font-weight: 700;
            padding: 12px 20px;
            font-size: 1.1rem;
            box-shadow: 4px 4px 0px #000; /* Recreating that solid shadow look */
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-block;
        }

        .sm-footer-btn-login:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0px #000;
            background-color: #00ff48;
            color: #fff;
        }

        .sm-footer-secondary-link {
            display: block;
            margin-top: 40px;
            color: var(--sm-text-gray);
            text-decoration: none;
            font-size: 1.1rem;
        }

     .search-container{
        display: none;
     }
     .texthideshow{
        display: none;
     }

/* ===== styletraining.css ===== */
:root {
  /*--primary-green: #2f9a57;*/
  --primary-green: #34a853;
  --hover-green: #34a853;
  --dark-text: #111111;
  --muted-text: #373737;
  --light-bg: #e6f4ea;
  --main-padding:35px;
  --main-black:#000;

  --brand-green: #eef9f1;
  --brand-border: #d1e7d6;
  --text-dark: #212529;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --bg-light: #f9f9f9;
  --bg: #f3f3f3;
  --text: #111111;
 --muted: #2f2f2f;
   --green: #34a853;
  --green-dark: #34a853;
  --green-soft: #e8f4ea;
  --green-border: #34a853;
  --btn-shadow: #34a853;
  --radius-xl: 2rem;
  --accent-green: #34a853;
        --text-dark: #000000;
        --text-muted: #4a4a4a;
        --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --setfontsize:20px;
  --month-bar:#E2F8E9;


  --ryc-bg-mint: #e8f5ee;
--ryc-text-dark: #000000;
--ryc-text-muted: #4a4a4a;
--ryc-shadow: 0 10px 30px rgba(0,0,0,0.05);
--p-prog-bg-main: #f4f7f6;
--p-prog-bg-box: #eef9f2;
--p-prog-border-box: #d4ede0;
--p-prog-green-text: #34a853;
--p-prog-btn: #34a853;
--p-prog-btn-hover: #34a853;


--headingfont:'Kreon', serif;
--textfont:'Raleway',serif;
--brand-green: #34a853;
--sm-bg-dark: #2d2d2d;
--sm-white: #ffffff;
--sm-text-gray: #b0b0b0;
--sm-btn-green: #34a853;

--newcolorgreen:#34a853;
--newcolortextgreen:#34a853;
--btnhover:#eaeaea;


}

body {
  margin: 0;
  font-family: "SF Pro Display", sans-serif;
  color: var(--dark-text);
  overflow-x: hidden; /* Prevents horizontal scroll on mobile */
}
*{
    font-family: "SF Pro Display", sans-serif !important;
}




  /*// nav menu css */

:root {
  
}
body {
    background-color: #f8f9fa;
    overflow-x: hidden;  
    margin: 0;
    padding: 0;
    }
h1, .lead { font-family: var(--headingfont); }
.setbgcolor { color: var(--newcolortextgreen); }
h1 { font-size: 2.8rem; text-shadow: 1px 1px 1px rgba(0,0,0,0.05); }
.lead { font-size: 1.3rem; }
.contact-details p { margin-bottom: 0.5rem; font-size: 1.1rem; }
.mr-2 { margin-right: 0.5rem; }


    /* Navbar Styling */
        .navbar {
            background-color: #212121;
            padding: 1rem;
        }
        .navbar-brand {
            font-weight: 700;
            letter-spacing: 1px;
            font-size: 1.5rem;
        }
        .nav-link {
            color: white !important;
            font-size: 0.9rem;
            margin: 0 10px;
        }
        .nav-link.active-green {
            color: var(--brand-green) !important;
            font-weight: bold;
        }




/* Custom Navbar Styling */
.sm-main-navbar {
    padding: 0.8rem 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Desktop Hover Effects */
@media (min-width: 992px) {
    .sm-main-navbar .nav-link {
        font-weight: 500;
        transition: color 0.3s ease;
        position: relative;
    }

    .sm-main-navbar .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        background-color: #0d6efd; /* Bootstrap Primary */
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .sm-main-navbar .nav-link:hover::after {
        width: 80%;
    }
}

/* Mobile Offcanvas Enhancements */
.sm-mobile-offcanvas {
    width: 280px !important;
}

.sm-mobile-offcanvas .nav-link {
    font-size: 1.1rem;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sm-mobile-offcanvas .nav-link:hover {
    color: #0d6efd !important;
}

/* Fix for background blur when offcanvas is active */
.offcanvas-backdrop.show {
    opacity: 0.7;
    backdrop-filter: blur(4px);
}

/* --- Mobile Sidebar Styles (Matching image_849760.png) --- */
@media (max-width: 991px) {
    .sm-mobile-menu {
        background-color: #0b1426 !important; /* Deep Navy */
        width: 280px !important;
    }

    .custom-search {
        background-color: #1a2436 !important;
        border: 1px solid #2d394d !important;
        color: #fff !important;
        border-radius: 8px;
    }

    .sm-mobile-menu .nav-link {
        color: #ffffff !important;
        font-weight: 600;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .search-container{
        display: block;
    }
    .texthideshow{
        display: block;
    }


.step-card:nth-child(odd) {
  margin-right: 0px !important; 
    }
    .step-card:nth-child(even) {
  margin-left: 0px !important; 
    }










}




/* Footer Main Container */
        .sm-footer-wrapper {
            background-color: var(--sm-bg-dark);
            color: var(--sm-white);
            padding: 80px 0;
           
        }

        /* Typography */
        .sm-footer-brand {
            font-weight: 800;
            font-size: 1.5rem;
            letter-spacing: 1px;
            margin-bottom: 30px;
            text-transform: uppercase;
        }

        .sm-footer-brand span {
            font-weight: 300;
        }

        .sm-footer-desc {
            color: var(--sm-text-gray);
            font-size: 0.95rem;
            line-height: 1.6;
            max-width: 280px;
            margin-bottom: 25px;
        }

        .sm-footer-meta {
            color: var(--sm-text-gray);
            font-size: 0.9rem;
            text-decoration: none;
            display: block;
            margin-top: 5px;
        }

        .sm-footer-link:hover {
            color: var(--sm-white);
        }

        .setmargintop{
               margin-top: 30px;
               margin-bottom: 30px;
        }

        /* Right Side Layout */
        .sm-footer-cta-text {
            font-size: 1.1rem;
            margin-right: 20px;
            font-weight: 300;
        }

        /* The Custom Green Button */
        .sm-footer-btn-login {
            background-color: var(--sm-btn-green);
            color: #fff;
            border: none;
            font-weight: 700;
            padding: 12px 20px;
            font-size: 1.1rem;
            box-shadow: 4px 4px 0px #000; /* Recreating that solid shadow look */
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-block;
        }

        .sm-footer-btn-login:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0px #000;
            background-color: #34a853;
            color: #fff;
        }

        .sm-footer-secondary-link {
            display: block;
            margin-top: 40px;
            color: var(--sm-text-gray);
            text-decoration: none;
            font-size: 1.1rem;
        }

     .search-container{
        display: none;
     }
     .texthideshow{
        display: none;
     }




     

















    /* --- Shared Components --- */
    .highlight { color: var(--newcolortextgreen); }
    
    .btn-main {
      background: #34a853;
      color: #fff;
      border-radius: 12px;
      padding: 16px 40px;
      font-weight: 700;
      text-decoration: none;
      display: inline-block;
      border: none;
      box-shadow: 0 4px 0 #1e6b3c;
      transition: all 0.2s;
    }
    .btn-main:hover { transform: translateY(-2px); color: #fff; background: var(--hover-green); }

    /* --- Navbar --- */
  
    .btn-apply-nav {
      background: var(--newcolortextgreen);
      color: #fff;
      border-radius: 10px;
      padding: 8px 20px;
      font-weight: 600;
    }

    /* --- Section 1: Hero --- */

    .hero-section {
  align-items: center;
  padding-top: 60px;
  /* Change 'auto' to 'cover' to make the image fill the area */
  background-size: cover; 
  background-image: url('/asset/image/training/banner.webp');
  /* Anchor the image to the right so the girl stays in view */
  background-position: center right; 
  background-repeat: no-repeat;
  border: none !important;
  background-blend-mode: overlay;
  border-radius: 0;
  opacity: 1;
  position: relative;
  /* Ensure the section has enough height to show the image */
  min-height: 570px; 
}
    .hero-title {
     
      width: 600px;
      line-height: 1.1;
      font-family: "SF Pro Display", sans-serif;
      font-size: 40px;
      font-weight: 700; /* Bold */
      letter-spacing: 0.02em; /* Converted from 2% */
      text-align: left; /* Based on the Alignment icons */
      opacity: 1; /* 100% */
      color: #000000; 
      -webkit-text-stroke: 1px #000000;

    }
    .hero-desc {
      color: var(--muted-text);
      font-weight: 500;
      /* Font Family & Weight */
      font-family: "SF Pro Display", sans-serif;
      
      /* Size & Spacing */
      /* Color & Alignment */
      color: #000000;
      text-align: left;
      
      /* Appearance */
      opacity: 100%;



    }
    .feature-list { list-style: none; padding: 0; margin-bottom: 35px; }
    .feature-list li {
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .feature-list i { color: #000; font-weight: 900; }

    .stats-row { display: flex; gap: 30px; margin-bottom: 20px; flex-wrap: wrap; }
    .stat-box {
     display: flex; 
     align-items: center; 
     gap: 5px; 
     max-width: 215px; 
     padding-right: 20px; /* Space before the line */
  border-right: 1.5px solid #000; /* The vertical line */
   }
   .stat-box:last-child {
  border-right: none;
  padding-right: 0;
}
    .stat-text { font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  max-width: 200px; /* Keeps text wrapped like your image */ }
    .stat-icon { font-size: 1.5rem;
    width: 40px; /* Adjust based on your icons */
  height: auto;
  margin-right: 10px; }

    .hero-person-img { display: none;}

    /* --- Section 2: Introducing --- */
    .intro-section { padding: var(--section-padding); background: #fff; }
    .intro-img { border-radius: 20px; width: 100%; box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
   
   

    /* --- Section 3: Growth --- */
    .growth-section { padding: var(--section-padding); background: #F7F7F7; }


    .growth-section .container {
    max-width: 1200px; /* Adjust this number to control the total width */
    padding-left: 15px;
    padding-right: 15px;
}

 
    .growth-list li { margin-bottom: 12px; font-weight: 500; display: flex; align-items: flex-start; gap: 10px; }
    .growth-list li::before { content: "•"; color: #000; font-weight: bold; }

    /* --- Section 4: Benefits Grid --- */
    .benefits-section { padding: var(--main-padding); background: #fff; }
    .benefit-card {
      background: #f4f4f4;
     
      border-radius: 5px;
      height: 100%;
      transition: transform 0.3s ease;
    }
    .benefit-icon { font-size: 2rem; margin-bottom: 20px; }
    
    .benefit-card p { color: var(--muted-text); font-size: 1rem; margin: 0; }

   

  .problem-box {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  background-color: #d4f9d8; /* Light green background from image */
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}
    .problem-item {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0 15px;
  position: relative;
}

/* Creating the vertical divider line */
.problem-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background-color: #333; /* Dark color for the divider */
}


.problem-item i {
  font-size: 2rem; /* Larger icons as per image */
  margin-right: 15px;
  color: #000;
}
.benefit-icon{
    width: 27px; 
    height: 27px; 
    margin-right: 10px;
}

/* Responsive fix: remove lines on mobile when items stack */
@media (max-width: 768px) {
  .problem-item:not(:last-child)::after {
    display: none;
  }
  .problem-item {
      flex: 0 0 calc(50% - 10px);
      font-size: 11px !important;

    margin-bottom: 15px;
  }
  .benefit-icon{
    width: 20px;
    height: 20px;
  }
}






    /* --- Income Section (Image 2) --- */
    .income-card {
      border-left: 5px solid var(--primary-green);
      background: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      padding: 30px;
      border-radius: 15px;
      margin-bottom: 25px;
    }

    /* --- Curriculum Section (Image 3) --- */
  
    
    .placement-support { background: #e8f5e9; padding: 25px; display: flex; align-items: center; gap: 15px; }
    .month-bar {
      background: var(--light-mint);
      padding: 20px 30px;
      border-radius: 10px;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      cursor: pointer;
    }

    /* --- Theory Section (Image 4) --- */
    .theory-container {
      background: #fff;
      border-radius: 20px;
      padding: 50px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    }
    .theory-box {
      border: 1px solid #eee;
      border-radius: 15px;
      padding: 30px;
      text-align: center;
      height: 100%;
    }
    .theory-box img {  margin-bottom: 20px; }


.stat-icon {
  width: 32px; /* Scaled to match the text height */
  opacity: 1; /* From Appearance panel in image_5a43fa.png */
}





/* Typography based on image_57f27f.jpg */
.intro-label {
  font-size: 28px;
  line-height: normal; /* "Auto" in design tools */
  font-weight: bold;   /* Common for 'HEADING' styles */
  opacity: 1;          /* 100% Opacity */
  border-radius: 0;    /* Corner radius: 0 */
  text-align: left;    /* Based on the active alignment icon */
  vertical-align: top; /* Based on the active vertical alignment icon */

}

.intro-title {
    font-size: 28px;
  line-height: normal; /* "Auto" in design tools */
  font-weight: bold;   /* Common for 'HEADING' styles */
  opacity: 1;          /* 100% Opacity */
  color: var(--newcolortextgreen); /* Target Green Color */
  text-align: left;    /* Based on the active alignment icon */
  vertical-align: top; /* Based on the active vertical alignment icon */
}


.intro-text p {
  line-height: 1.5;
  margin-bottom: 15px;
}
.intro-text{
  text-align: left;
}
/* The Bold Green Sentence */
.highlight-text {
  color: var(--newcolortextgreen); /* Target Green Color */
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02;
  margin-top: 20px;
  text-align: left;
}
.set10p{
  font-size: 20px;
}





/* Section Padding */
.growth-section {
  padding: 60px 0;
  background-color: #f9f9f9; /* Light grey background like the image */
  font-family: 'Inter', sans-serif; /* A clean modern font */
}

/* Title Styling */
.growth-title {
  font-weight: 800;
  font-size: 26px;
  color: #111;
  margin-bottom: 25px;
  line-height: normal; /* "Auto" in design tools */
  font-weight: bold;   /* Common for 'HEADING' styles */
  opacity: 1;          /* 100% Opacity */
}

.growth-title .highlight {
  color: var(--newcolortextgreen); /* The signature green color */
}

/* Paragraphs */
.description, .footer-text {
  color: #000;
  line-height: 1.3;
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.list-heading {
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 15px;
}

/* Custom Bullet Points */
.growth-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 30px;
  line-height: 1;
}

.growth-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 1.1rem;
}

.growth-list li::before {
  content: "•";
  color: #000;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

/* Image Spacing & Responsiveness */
.image-container {
  /*padding: 10px;*/
}

.setimgsizeopp{
    margin-top: 40px;
}




















/* Container for the cards */
.benefits-section {
    padding: 60px 0;
    background-color: #ffffff;
}

/* Base card design */
.benefit-card {
    background-color: #f0f0f0; /* Light gray from your image */
    padding: 18px;
    
   
    
    display: flex;
    flex-direction: column;
    border: none;
}
.benefit-card div{
    display: flex;
}


/* Icon and Heading Alignment */
.benefit-card h4 {
    font-weight: 700;
    font-size: 1.25rem;
}

.benefit-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #333;
}
.seth4line{
  margin-top: 10px;
}

/* Hover Effect: Green background */
.benefit-card:hover {
    background-color: #34a853; 
}



/* Ensure text stays readable on hover if needed */
.benefit-card:hover h4, 
.benefit-card:hover p, 
.benefit-card:hover i {
    color: #fff; 
}



.problem-section{
  background: #E2F8E9;
}


/* toggle section css */

/* Stats Card Styling */
        .curriculum-card {
            align-items: center;
            background: white;
            justify-content: space-between;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            text-align: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .curriculum-stat {
            /*flex: 1;*/
            min-width: 100px;
        }

        .placement-support {
            display: flex;
            align-items: center;
            gap: 15px;
            padding-left: 20px;
            border-left: 1px solid #eee;
            text-align: left;
        }

        /* Accordion / Month Bar Styling */
        .month-bar {
            background-color: var(--month-bar);
            border: 1px solid var(--brand-border);
            border-radius: 12px;
            padding: 18px 25px;
            margin-top: 15px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            text-decoration: none !important;
            color: var(--text-dark) !important;
            font-weight: 500;
        }

        .month-bar:not(.collapsed) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .month-content {
            border: 1px solid #eee;
            border-top: none;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            padding: 25px;
            background: white;
        }

        /* Icon Rotation */
        .month-bar i {
            transition: transform 0.3s ease;
            font-size: 1.2rem;
        }
        
        .month-bar:not(.collapsed) i {
            transform: rotate(180deg);
        }

        .btn-main {
           
            color: #fff;
            padding: 12px 30px;
            border-radius: 8px;
            font-weight: 600;
            transition: 0.3s;
        }

        .btn-main:hover {
            background: var(--btnhover);
            color: #000;
        }
/* Mobile Responsive View (up to 768px) */
@media screen and (max-width: 768px) {
    .setprogram {
        /* Allow items to wrap to the next line */
        flex-wrap: wrap; 
        /* Ensure items stay centered when wrapping */
        justify-content: center !important; 
        gap: 20px !important;
        padding: 15px 10px !important;
    }

    .curriculum-stat {
        /* Set width to slightly less than 50% to fit two per row */
        flex: 0 0 calc(50% - 20px);
        min-width: 140px;
        /* Center content within the item for better mobile look */
        justify-content: flex-start;
    }
}














       


        .feature-card {
    background-color: #ffffff;
    border-color: #e9ecef !important;
  }
  
  .card-highlight-header {
    background-color: transparent; /* Adjust if you want the very top to be different */
  }

  .highlight-box {
    background-color: #e8f5e9; /* Light green background from image */
    border: 1px solid rgba(0,0,0,0.05);
  }

  /* Ensuring icons look consistent */
  .bi-check2 {
    font-weight: 700 !important;
  }



.sizepara{
  font-size: 17px;
}
.sizepara1{
  font-size: 18px;
}
.setleftsize{
  padding-left: 32px;
}
.setcheckbold li i{
  /*font-weight: inherit !important;*/
}
.setfontsize{
  font-size: 20px;
}


.bi-check2::before{
  font-weight: bolder !important;
    font-size: 22px;
    color: black;
}

  .team-section { padding: 60px 0; background-color: #F7F7F7; }
        .member-card {
            background: #fff;
            border: 1px solid #eee;
            border-radius: 20px;
            padding: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            height: 100%;
        }
        .member-img-wrapper {
            width: 100%;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border-radius: 15px;
            margin-bottom: 15px;
        }
        .member-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }

        /* Experience Section Styles (from image_3b533f.jpg) */
        .experience-section { padding: 40px 0 80px; background-color: #fff; }
        
        .partner-link {
            color: var(--newcolortextgreen);
            text-decoration: underline;
            font-size: 0.9rem;
            word-break: break-all;
        }

        .experience-grid-container {
            background-color: #a8e6cf; /* Light green background */
            border-radius: 15px;
            border: 1px solid #95d5bb;
            overflow: hidden;
        }

        .stat-box1 {
            padding: 30px 15px;
            text-align: center;
            border-right: 1px solid #8ecba6;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .stat-box1:last-child { border-right: none; }

        .stat-box1 i { font-size: 2rem; margin-bottom: 15px; color: #000; }
        .stat-text { font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: #000; }

        .btn-apply {
            background-color: var(--newcolortextgreen);
            color: white;
            padding: 12px 40px;
            border-radius: 10px;
            font-weight: 700;
            border: none;
            box-shadow: 0 4px 15px rgba(45, 138, 78, 0.3);
            transition: 0.3s;
        }
        .btn-apply:hover {
            background-color: var(--btnhover);
            color: #000;
            transform: translateY(-2px);
        }

        


        .course-section {
      min-height: 100vh;
      padding: 56px 0 40px;
      display: flex;
      align-items: center;
    }

    .left-panel {
      padding-right: 28px;
      text-align: center;
    }

    .main-title {
      
      font-weight: 600;
      line-height: 1.08;
      max-width: 470px;
      margin-bottom: 40px;
    }

    .brand-wrap {
      max-width: 340px;
      margin: 0 auto 44px;
    }

    .google-ads-logo {
      width: 240px;
      height: 240px;
      margin: 0 auto 10px;
      position: relative;
    }

    .logo-blue,
    .logo-yellow {
      position: absolute;
      border-radius: 999px;
      transform-origin: center;
    }

    .logo-blue {
      width: 80px;
      height: 235px;
      background: #4285f4;
      top: 8px;
      right: 48px;
      transform: rotate(-30deg);
    }

    .logo-yellow {
      width: 72px;
      height: 188px;
      background: #fbbc04;
      left: 56px;
      top: 36px;
      transform: rotate(30deg);
    }

    .logo-green {
      width: 78px;
      height: 78px;
      background: #34a853;
      border-radius: 50%;
      position: absolute;
      left: 30px;
      bottom: 14px;
      z-index: 2;
    }

    .brand-name {
      text-align: center;
      font-size: clamp(2rem, 3vw, 3.7rem);
      line-height: 1;
      font-weight: 400;
      color: #787878;
      letter-spacing: -0.04em;
    }

    .brand-name span {
      color: #7f7f7f;
      font-weight: 300;
    }

    .apply-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 340px;
      min-height: 78px;
      border-radius: 14px;
      background: var(--green);
      color: #fff;
      text-decoration: none;
      font-size: 1.1rem;
      font-weight: 700;
      box-shadow: 0 4px 0 var(--btn-shadow);
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .setfontsize{
      font-size: var(--setfontsize);
      font-weight: 500;
    }

    .apply-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 0 var(--btn-shadow);
      background: #2f8d4d;
      color: #fff;
    }

    .apply-btn:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 var(--btn-shadow);
    }

    .steps-wrapper {
      position: relative;
      padding-left: 12px;
    }

    .step-card {
      position: relative;
      
      border: 2px dashed var(--green-border);
      border-radius: 30px;
      padding: 26px 34px 22px;
      max-width: 780px;
      margin-bottom: -2px;
    }

    .step-card:nth-child(odd) {
      margin-right: 110px;
      /*background: linear-gradient(to right, #f0f9f4, #ffffff);*/
     background: linear-gradient(
        to right, 
        rgba(232, 245, 237, 1) 0%, 
        rgba(232, 245, 237, 0.1) 100%
    );
      border-right: none;
  border-top-right-radius: 0;
  z-index: 999;
  border-bottom-right-radius: 0;
  margin-right: 50px; 
    }

    .step-card:nth-child(even) {
      margin-left: 56px;
      /*background: linear-gradient(to left, #f0f9f4, #ffffff);*/
      background: linear-gradient(
        to left, 
        rgba(232, 245, 237, 1) 0%, 
        rgba(232, 245, 237, 0.1) 100%
    );
      border-left: none;

  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 50px; 
    }

  

    .step-card::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      right: 50%;
      transform: translateX(50%);
      bottom: -14px;
      border-left: 12px solid #111;
      z-index: 9999;
    }

    .step-card:last-child::after {
      display: none;
    }

    .step-top {
      display: flex;
      align-items: flex-start;
      gap: 20px;
    }

    .icon-box {
      width: 56px;
      min-width: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      margin-top: 2px;
    }

    .icon-box svg {
      width: 40px;
      height: 40px;
      fill: currentColor;
    }

    .step-content h3 {
      margin: 0 0 8px;
      line-height: 1.1;
      font-weight: 600;
      color: #000;
    }

    .step-content p {
      margin: 0;
      font-size: clamp(1rem, 1.2vw, 1.25rem);
      line-height: 1.35;
      color: #161616;
      max-width: 580px;
    }

    













   

        .section-title {
            font-weight: 800;
            color: var(--text-dark);
            font-size: 2rem;
        }

        .section-subtitle {
            max-width: 700px;
            margin: 0 auto;
            color: var(--text-dark);
            font-size: 1.05rem;
            line-height: 1.5;
        }

        /* Testimonial Card Styling */
        .story-card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            border: none;
            border-bottom: 4px solid var(--newcolortextgreen); /* The green accent at bottom */
            display: flex;
                height: 350px;
            transition: transform 0.3s ease;
        }

        .story-card:hover {
            transform: translateY(-5px);
        }

        .story-image-wrapper {
            width: 40%;
            min-height: 350px;
            overflow: hidden;
        }

        .setimgsizebox img {
    width: 20%;
    height: 100%;
}
.setimagesize img{
    width: 20%;
    height: 100%;
}

        .story-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .story-text-wrapper {
            width: 60%;
            padding: 35px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .person-name {
            font-weight: 800;
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--text-dark);
        }

        .person-bio {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 0;
        }

       









        .flex-schedule-area {
            background-color: #ffffff;
            padding: 80px 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

      

        .flex-description-top {
            font-size: 17px;
            line-height: 1.5;
            margin-bottom: 30px;
        }

        /* Custom Checklist Styling */
        .flex-checklist {
            list-style: none;
            padding: 0;
            margin-bottom: 30px;
        }

        .flex-checklist-item {
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 12px;
            color: #000;
        }

        .flex-checklist-item i {
            color: #000;
            font-size: 0.9rem;
            margin-right: 15px;
        }

        .flex-description-bottom {
            
            font-size: 1.1rem;
           
        }

        /* Call to Action Button */
        .flex-btn-apply {
            background-color: var(--newcolortextgreen);
            text-decoration: auto;
            color: white;
            border: none;
            padding: 12px 35px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .flex-btn-apply:hover {
            background-color: #34a853;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }

        /* Image Responsiveness */
        .flex-illustration-wrap img {
            max-width: 80%;
            height: auto;
        }

        





.setimgsizeboxdd{
    margin-top: 70px;
}



        .career-section {
      padding: 70px 0 80px;
      background: #F7F7F7;
    }

    .career-title {
     
      font-weight: 700;
      color: #111;
     
    }

    .career-subtitle {
      font-size: 18px;
      color: #222;
      max-width: 760px;
      margin: 18px auto 0;
      line-height: 1.7;
    }

    .concern-row {
      margin-top: 70px;
      row-gap: 35px;
    }

    .concern-item {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      max-width: 100%;
    }

    .question-icon {
      min-width: 48px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--newcolortextgreen);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 700;
      box-shadow: 0 0 0 4px #d8f3df;
      line-height: 1;
      margin-top: 3px;
    }

    .concern-text {
      font-size: 18px;
      color: #111;
      line-height: 1.5;
      margin: 0;
    }

    .valid-concerns {
      text-align: center;
      font-size: 28px;
      font-weight: 500;
      color: #111;
      margin-top: 55px;
      margin-bottom: 45px;
    }

    .info-box {
      background: #E2F8E9;
      padding: 34px 38px;
      border-radius: 2px;
      max-width: 1150px;
      margin: 0 auto;
    }

    .info-box p {
      margin: 0;
      text-align: center;
      font-size: 18px;
      line-height: 1.7;
      color: #111;
    }

    .apply-btn-wrap {
      text-align: center;
      margin-top: 42px;
    }

    .apply-btn {
      background-color: #34a853;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      border: none;
      padding: 18px 42px;
      border-radius: 12px;
      min-width: 300px;
      transition: 0.3s ease;
      box-shadow: 0 4px 0 #34a853;
    }

    .apply-btn:hover {
      background-color: #34a853;
      color: #fff;
      transform: translateY(-2px);
    }

    .apply-btn:active {
      transform: translateY(0);
    }





/*student use skill*/
/* Unique Custom Styles */
        .skill-paths-section {
            padding: 80px 0;
            background-color: #ffffff;
        }

        .path-main-title {
            
            color: #000;
        }

        .path-sub-text {
            font-size: 1.1rem;
            color: #333;
            max-width: 700px;
            margin: 0 auto 50px auto;
        }

        /* The Light Green Cards */
        .skill-path-card {
            background-color: #E2F8E9; /* Light green background from image */
            border-radius: 16px;
            padding: 20px;
            border: none;
            transition: transform 0.3s ease;
            height: -webkit-fill-available;
            border: 1px solid #E6E4E4;
        }

        .skill-path-card:hover {
            transform: translateY(-5px);
        }

        .path-label {
            font-weight: 700;
            font-size: 1.25rem;
            margin-bottom: 12px;
            display: block;
        }

        .path-description {
            font-size: 1.05rem;
            line-height: 1.5;
            color: #222;
            margin-bottom: 0;
        }

        /* Bottom List Section */
        .path-notes-list {
            list-style: none;
            padding-left: 0;
            margin-top: 40px;
        }

        .path-notes-list li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 15px;
            font-weight: 700; /* As seen in image */
            font-size: 1rem;
            line-height: 1.4;
        }

        /* Custom Bullet Points */
        .path-notes-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            font-size: 1.5rem;
            line-height: 1;
            color: #000;
        }

       /* Custom Unique Design Classes */
        .theory-p-section {
          
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border-top: 1px solid #E6E4E4;
            border-bottom: 1px solid #E6E4E4;
        }

        .theory-p-illustration {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
            border-radius: 20px;
        }

        .theory-p-content-box {
            padding-left: 20px;
        }

        .theory-p-feature-title {
           
            color: #000;
            margin-bottom: 25px;
        }

        .theory-p-list {
            list-style: none;
            padding-left: 0;
            margin-bottom: 25px;
        }

        .theory-p-list li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 6px;
            font-size: 1.1rem;
          
            line-height: 1.4;
        }

        /* Custom Bullet Point Styling */
        .theory-p-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            font-weight: bold;
            font-size: 1.5rem;
            line-height: 1;
            color: #000;
        }

        .theory-p-goal-text {
            font-size: 1.15rem;
            color: #000;
            margin-bottom: 30px;
        }

        /* Call To Action Button */
        .theory-p-btn-apply {
            background-color: var(--newcolortextgreen); /* Green color from image */
            color: white;
            padding: 12px 35px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 8px;
            border: 2px solid #2d7a46;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .theory-p-btn-apply:hover {
            background-color: var(--btnhover);
            color: #000;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* Unique Custom Styles */
        .program-target-section {
            padding: 60px 0;
            background-color: #F7F7F7;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        .program-target-title {
            font-size: 2rem;
            color: #000000;
        }

        .program-target-subtitle {
            font-size: 1.1rem;
           
            margin: 0 auto 40px auto;
        }

        /* Card Styling */
        .program-target-card {
            background-color: #f0fbf4; /* Light green tint from image */
            border: 1px solid #e0eee5;
            border-radius: 12px;
            padding: 24px;
            height: 100%;
            display: flex;
            align-items: flex-start;
            transition: transform 0.2s ease;
        }

        .program-target-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        .program-target-icon {
            font-size: 1.4rem;
            color: #000000;
            margin-right: 15px;
            line-height: 1;
        }

        .program-target-text {
            font-size: 1.05rem;
            line-height: 1.4;
            color: #000000;
            margin: 0;
            font-weight: 500;
        }

        /* Footer Elements */
        .program-target-footer-text {
            font-size: 1.1rem;
            font-weight: 500;
            margin-top: 40px;
        }
        .setimgsizebox1{

        }

        .program-target-btn {
            background-color: var(--newcolortextgreen); /* Success green */
            color: white;
            padding: 14px 40px;
            font-size: 1.2rem;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            margin-top: 25px;
            transition: background 0.3s ease;
        }

        .program-target-btn:hover {
            background-color: var(--btnhover);
            color: #000;
        }
/* Main Section & Background */
        .batch-promo-section {
            background-color: #e8f7ee; /* Fallback light green */
            background-image: url('../image/training/Rectangle.png'); /* Your Grid/Square image */
            background-repeat: repeat;
            padding: 80px 0;
            font-family: 'Inter', sans-serif;
            background-size: cover;
    background-blend-mode: overlay;
        }

        /* Left Pricing Card */
        .batch-promo-pricing-card {
            background: #ffffff;
            border: 2px dotted #000000;
            border-radius: 25px;
            padding: 40px;
            height: 100%;
        }

        .batch-promo-regular-price {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 20px;
        }

        .batch-promo-launch-title {
            font-size: 2.2rem;
            font-weight: 800;
            margin-bottom: 5px;
        }

        .batch-promo-launch-price {
            font-size: 2.5rem;
            font-weight: 800;
            color: #000;
        }

        .batch-promo-strike {
            text-decoration: line-through;
            color: #444;
            font-size: 1.8rem;
            margin-left: 10px;
        }

        .batch-promo-btn {
            background-color: var(--newcolortextgreen);
            text-decoration: none;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 15px 30px;
            font-weight: 700;
            width: 100%;
            font-size: 1.2rem;
            margin-top: 25px;
            transition: transform 0.2s ease;
        }

        .batch-promo-btn:hover {
            background-color: var(--btnhover);
            color: #000;
            transform: scale(1.02);
        }

        /* Right Content Column */
        .batch-promo-feature-title {
            font-size: 26px;
    font-weight: 600;
        }

        .batch-promo-item {
            background: #ffffff;
            border-radius: 12px;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            border: 1px solid #e0e0e0;
        }

        .batch-promo-icon-box {
            width: 40px;
            font-size: 1.5rem;
            margin-right: 15px;
            text-align: center;
        }

        /* Countdown Timer */
        .batch-promo-timer-container {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .batch-promo-timer-box {
            background: white;
            border: 1px solid #333;
            border-radius: 10px;
            width: 70px;
            height: 70px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .batch-promo-timer-num {
            font-size: 1.5rem;
            font-weight: 800;
            line-height: 1;
        }

        .batch-promo-timer-label {
            font-size: 0.8rem;
            font-weight: 600;
        }

        /* Footer Text */
        .batch-promo-footer-text {
            font-size: 1.2rem;
            margin-top: 30px;
        }

    .setboxspace{
      justify-content: space-between;
    }

    .font-box-size{
      width: 85%;
    }

/* Unique Custom Styles */
        .step-flow-section {
            padding: 80px 0;
            background-color: #F7F7F7; /* Very light background tint */
        }

        .step-flow-title {
            font-size: 2rem;
            color: #000;
            margin-bottom: 50px;
        }

        /* Connecting Dashed Line */
        .step-flow-container {
            position: relative;
        }

        /* The blue dashed line - only visible on desktop (lg and up) */
        @media (min-width: 992px) {
            .step-flow-line {
                position: absolute;
                top: 50%;
                left: 10%;
                right: 10%;
                border-top: 2px dashed #1a237e; /* Dark blue dashed line */
                z-index: 1;
                transform: translateY(-50%);
            }
        }

        /* Card Styling */
        .step-flow-card {
            background: #ffffff;
            border-radius: 16px;
            padding: 25px 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            position: relative;
            z-index: 2; /* Sits above the dashed line */
            height: 100%;
            transition: transform 0.3s ease;
            border: 1px solid #f0f0f0;
        }

        .step-flow-card:hover {
            transform: translateY(-5px);
        }

        /* Circular Number Styling */
        .step-flow-number {
            background-color: #eaf8ef; /* Light green circle */
            color: #000;
            font-weight: 800;
            font-size: 1.5rem;
            width: 60px;
            height: 60px;
            min-width: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 20px;
        }

        .step-flow-text {
            font-size: 1.1rem;
            font-weight: 500;
            color: #333;
            margin: 0;
            line-height: 1.3;
        }

        /* Bottom Section Styles */
        .step-flow-info-text {
            font-size: 1.1rem;
            color: #111;
            margin-top: 50px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Green CTA Button */
        .step-flow-btn {
             background-color: var(--newcolortextgreen);
            color: #ffffff;
            font-weight: 700;
            padding: 14px 40px;
            border-radius: 10px;
            border: none;
            font-size: 1.1rem;
            margin-top: 30px;
            box-shadow: 0 4px 0 var(--newcolortextgreen); /* Subtle bottom depth */
            transition: all 0.2s ease;
        }

        .step-flow-btn:hover {
            background-color: var(--btnhover);
            color: #000;
            transform: translateY(2px);
            box-shadow: 0 2px 0 var(--newcolortextgreen);
        }

      

        /* Unique Custom Styles */
        .career-restart-section {
            background: linear-gradient(180deg, #FFFFFF 0%, #EEFBF2 100%);
           
            overflow: hidden;
        }

        .career-restart-title {
           font-size: 27px;
    font-weight: 600;
            margin-bottom: 30px;
            color: #000;
        }

        /* The Letter Box Styling */
        .career-restart-letter-box {
            background-color: #ffffff;
            border: 1.5px solid #a8d5ba;
            border-radius: 12px;
           
            position: relative;
            /* Crumpled paper effect simulation */
            background-image:
                url('../image/training/white-crumpled-paper-texture-background 1.webp'); 
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
                background-repeat: no-repeat;
        }

        .career-restart-letter-content {
           /* font-size: 1.05rem;
            line-height: 1.6;
            color: #333;*/
        }
        .textareabox{
          padding: 30px;
        }

        .career-restart-quote {
            font-style: italic;
            font-weight: 700;
            color: #111;
            margin: 15px 0;
        }

        .career-restart-list {
            list-style: none;
            padding-left: 0;
           
        }

        .career-restart-list li {
            position: relative;
            padding-left: 20px;
        }

        .career-restart-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            font-weight: bold;
        }

        /* Image Styling */
        .career-restart-image-wrapper {
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            height: 100%;
        }

        .career-restart-woman-img {
               max-width: 90%;
    height: auto;
    z-index: 2;
    margin-top: 52px;
    border-radius: 10px;
        }

      


/* Unique Custom Styles */
        .restart-cta-section {
            /* Background setup: Solid green fallback + the dotted pattern image */
            background-color: #34a853; 
            background-image: url('../image/training/Rectangle 1485.png'); 
            background-repeat: repeat;
            padding: 30px 0;
            /*color: #ffffff;*/
            /*text-align: center;*/
        }

        .restart-cta-title {
           
            font-weight: 700;
            margin-bottom: 20px;
        }

        .restart-cta-subtitle {
            font-size: 1.1rem;
           
            margin: 0 auto 30px auto;
            opacity: 0.95;
            line-height: 1.6;
        }

        /* Pill Badge Styling */
        .restart-cta-badge {
            background-color: #eaf8ef; /* Light mint green from image */
            color: #000000;
            display: inline-block;
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 30px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        /* Main White Button */
        .restart-cta-btn {
            background-color: #ffffff;
            color: #2d7a46; /* Green text to match theme */
            font-weight: 700;
            padding: 12px 26px;
            border-radius: 12px;
            border: none;
            font-size: 1.2rem;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }

        .restart-cta-btn:hover {
            background-color: #f8f9fa;
            color: #246338;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }

        /* Mobile Optimization */
        @media (max-width: 768px) {
            .restart-cta-section { padding: 60px 20px; }
            .restart-cta-title { font-size: 1.8rem; }
            .restart-cta-subtitle { font-size: 1rem; }
            .restart-cta-btn { width: 100%; padding: 14px 20px; }
        }








        .custom-border-box {
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 30px;
  }
  
  .highlight-green-box {
    background-color: #e8f7ef; /* Light green background */
    border-radius: 15px;
    padding: 20px;
  }

  .text-success-dark {
    color: var(--newcolortextgreen);
    font-weight: 700;
  }



  /* Alignment fix for image and content */
  .align-top-content {
    padding-top: 10px;
  }












        /* The Main Grid Design Banner */
        .experience-grid-banner {
            background-color: #9FE4B7; /* Light mint-green background */
            border-radius: 20px; /* Rounded corners */
            width: 100%;
            display: flex; /* Flex layout for columns */
            justify-content: space-between;
            align-items: stretch; /* Stretch to same height */
            margin: 0 auto 50px;
           
            box-shadow: 0 10px 20px rgba(0,0,0,0.05); /* Subtle shadow */
        }

        /* Individual columns */
        .stat-column {
            flex: 1; /* Equal width for all columns */
            display: flex;
            flex-direction: column;
            align-items: center; /* Center-align items vertically and horizontally */
            justify-content: space-between; /* Space icon and text */
            text-align: center;
            border-right: 1px solid #000; /* Thin black vertical separator */
            padding: 20px 20px; /* Internal column padding */

        }

        .stat-column:last-child {
            border-right: none; /* No separator on the last column */
        }

        /* The icons are detailed vector art, not simple standard icons.
           Below, I describe these detailed icons as SVGs or vector emblems. */
        .stat-icon2 {
            width: 50px;
            height: 70px;
            
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Placeholders for the sophisticated icons. Description for generator. */
        /* [GENERATOR] Recreate the specific vector icons from image_6.png. */
        .stat-icon2.award {
            /* [GENERATOR] Detailed vector award ribbon with a star, two dots above the star, and a decorative ribbon below (image_b28e45.png). */
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('../image/training/expertise 1.webp');
        }

        .stat-icon2.spend {
            /* [GENERATOR] Vector-illustrated emblem containing a framed illustration of money bill symbols and gear mechanism (image_b28b7a.webp). */
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('../image/training/time-is-money_17228705 1.webp');
        }

        .stat-icon2.revenue {
            /* [GENERATOR] Vector-illustrated framed emblem of a bar chart with an upward-trending arrow and a dollar sign. */
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('../image/training/increase 1.webp');
        }

        .stat-icon2.partner {
            /* [GENERATOR] Stylized, modern, sleek vector illustration of a group of three human silhouettes. */
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('../image/training/group 1.webp');
        }

        .stat-icon2.team {
            /* [GENERATOR] A clean, stylized modern vector Google 'G' icon. */
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('../image/training/Vector (4).webp');
        }

        /* The text must be multi-line and centered, and color is black. */
        .stat-text2 {
            color: #000;
            font-size: 15px;
            font-weight: normal;
            word-wrap: break-word;
            line-height: 1.4;
            margin: 0 auto;
        }

        .cta-container {
            margin-top: 50px;
        }

  

        /* Responsive adjustments as per original HTML */
        @media (max-width: 991px) {
            .experience-grid-banner {
                flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
            }
            .stat-column {
                flex: 0 0 33.333%; /* Three columns per row */
                border-right: 1px solid #000;
                padding: 0px 20px;
                /*margin-bottom: 20px;*/
            }
            .stat-column::after {
        content: "";
        display: block;
        width: 150px;          /* Width of the small line */
        height: 1px;          /* Thickness of the line */
        background-color: #333; /* Line color - change as needed */
        margin-top: 15px;     /* Space between text and line */
    }
    .stat-column:last-child::after {
        display: none;
    }
            .experience-grid-banner{
                display: inherit;
            }
            /* Reset borders properly after wrapping */
            .stat-column:nth-child(3n) {
                border-right: none;
            }
            .stat-column:last-child {
                border-right: none;
            }
            .lastsettext{
                margin-bottom: 20px;
            }
        }

        @media (max-width: 767px) {
            .stat-column {
                flex: 0 0 50%; /* Two columns per row */
            }
            /* Reset borders properly after wrapping */
            .stat-column:nth-child(2n) {
                border-right: none;
            }
            .stat-column:last-child {
                border-right: none;
            }
        }





/*restart your career css start */
/* Unique Class Names and Custom Styling */
        .cr-main-wrapper {
            background-color: #fff; /* Light grey background for the full section */
            padding: 60px 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .cr-content-card {
            background-color: #ffffff;
            border-radius: 15px;
            padding: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .cr-header-title {
            font-weight: 400;
            color: #000000;
            margin-bottom: 20px;
            font-size: 30px;
        }

        .cr-description {
            color: #000;
            margin: 0 auto 40px auto;
            line-height: 1.6;
        }

        .cr-feature-box {
            background-color: #E2F8E9; /* Light green box background */
            border-radius: 12px;
            padding: 30px 20px;
            height: 100%;
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: none;
        }

        .cr-feature-box:hover {
            transform: translateY(-5px);
        }

       .cr-icon-wrapper {
    width: 60px; /* Control the size of the image container */
    height: 60px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cr-icon-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures image isn't stretched */
}
.p-prog-feature-box img{
    height: 30px;
    width: 30px;
    display: ruby !important;
}

        .cr-feature-text {
            font-weight: 600;
            font-size: 1.1rem;
            color: #000;
            margin: 0;
        }

        /* Adjusting the bottom row for the 3-2 layout */
        .cr-bottom-row {
            justify-content: center;
        }

        @media (max-width: 768px) {
            .cr-content-card {
                padding: 30px 15px;
            }
        }

        /*the end css*/

        /* Unique Section Wrapper */
        .xp-suitability-wrapper {
            background-color: #ffffff; /* Main background */
            padding: 60px 20px;
            width: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* Typography */
        .xp-title-main {
            font-weight: 600;
            font-size: 2rem;
            color: #000000;
            margin-bottom: 10px;
        }

        .xp-title-main span {
            color: #d93025; /* Red color for 'Not' */
        }

        .xp-description-text {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 20px;
        }

        .xp-criteria-lead {
            font-weight: 700;
            text-decoration: underline;
            margin-bottom: 40px;
            font-size: 1.05rem;
        }

        /* Card Styling */
        

        .xp-exclusion-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }

        /* Icon Styling */
        .xp-status-icon {
            color: #d93025;
            font-size: 1.5rem;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }

        

        /* Spacing for the centered bottom row */
        .xp-bottom-row {
            margin-top: 24px;
        }

        /* Main wrapper to avoid styling the <body> tag directly */
        .xp-main-container-wrapper {
            background-color: #ffffff; 
            width: 100%;
            padding: 80px 0;
            font-family: 'Inter', sans-serif;
        }

        .xp-section-title {
            font-weight: 800;
            font-size: 2.5rem;
            margin-bottom: 40px;
        }

        .xp-text-red {
            color: #d93025;
        }

        /* The Box Styling */
        .xp-exclusion-card {
            background-color: #EEFBF2; /* Light Green Box */
            border: 1px solid #d1e7dd;
            border-radius: 10px;
            padding: 30px 20px;
            height: 100%; /* Ensures all boxes in a row are same height */
            display: flex;
            align-items: flex-start;
            transition: all 0.3s ease;
        }

        .xp-exclusion-card:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .xp-status-icon {
            color: #d93025;
            font-weight: bold;
            font-size: 1.2rem;
            margin-right: 15px;
            margin-top: 2px;
        }
        .setheadsize{
            font-size: 18px;
            font-weight: bold;
        }

        .xp-card-message {
            font-size: 17px;
            color: #212529;
            margin: 0;
            font-weight: 500;
            line-height: 1.5;
        }

        /* Adjusting spacing for the bottom row */
        .xp-row-spacing {
            margin-top: 24px;
        }

        @media (max-width: 768px) {
            .xp-exclusion-card {
                margin-bottom: 15px;
                padding: 20px 20px !important;
                height: inherit !important;
            }
        }

        /*// the end css*/

        .testimonial-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    min-height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
}

.quote-icon {
    font-size: 100px;
    color: #343a40;
    line-height: 1;
    font-family: serif;
    height: 40px;
}

.testimonial-card p {
    font-size: 14px;
    line-height: 1.6;
}

/* Customizing Slick Arrows */
.slick-prev:before, .slick-next:before {
    color: #000 !important;
}


/*Program Application Section*/
.p-prog-wrapper {
            max-width: 1100px;
            margin: 0 auto;
            padding: 20px;
        }

        .p-prog-title {
            font-weight: 700;
            margin-bottom: 40px;
            color: #000;
        }

        .p-prog-main-image {
            width: 100%;
            border-radius: 20px;
            object-fit: cover;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        /* Feature Boxes */
        .p-prog-feature-container {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
        }

        .p-prog-feature-box {
            background-color: var(--p-prog-bg-box);
            border: 1px solid var(--p-prog-border-box);
            border-radius: 12px;
            padding: 20px 10px;
            flex: 1;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .p-prog-feature-box:hover {
            transform: translateY(-5px);
        }

        .p-prog-feature-box i {
            font-size: 24px;
            margin-bottom: 10px;
            display: block;
        }

        .p-prog-feature-box span {
            font-weight: 600;
            font-size: 0.95rem;
            line-height: 1.2;
            display: block;
        }

        /* List Items */
        .p-prog-list {
            list-style: none;
            padding: 0;
            margin-bottom: 30px;
        }

        .p-prog-list-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 1.1rem;
            color: #333;
        }

        .p-prog-check-icon {
            color: var(--p-prog-green-text);
            background-color: var(--newcolortextgreen);
            border: 2px solid var(--newcolortextgreen);
            border-radius: 50%;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            margin-right: 15px;
            flex-shrink: 0;
        }
        .p-prog-check-icon i::before{
            color: #fff !important;
        }

        .p-prog-highlight {
            color: var(--newcolortextgreen);
            font-weight: 600;
        }

        /* CTA Button */
        .p-prog-btn-apply {
            background-color: var(--newcolortextgreen);
            color: white;
            border: none;
            padding: 12px 35px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1.1rem;
            transition: background 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 6px rgba(58, 150, 93, 0.2);
        }

        .p-prog-btn-apply:hover {
            background-color: var(--btnhover);
            color: #000;
            box-shadow: 0 6px 12px rgba(58, 150, 93, 0.3);
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .p-prog-feature-container {
                flex-direction: column;
            }
            .p-prog-title {
                font-size: 1.5rem;
            }
        }

        .setdisplaypoint{
            display: inline-block;
        }

      .imgsetlogosize{
        height: 50px;
        width: auto;
      }
      .common50px{
        height: 50px;
        width: auto;
      }

/* ===== responsivetraning.css ===== */
/* =====================================================
   ALL MOBILE RESPONSIVE CSS IN ONE MEDIA QUERY
=====================================================*/
@media (max-width: 767px) {

  /* --- Hero Section --- */
  .hero-section {
    text-align: center;
    padding-top: inherit !important;
    background-image: inherit !important;
  }

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .setreversebox,
  .setreversewomen,
  .setopportunity,
  .setdesignbusy {
    flex-direction: column-reverse;
  }

  .hero-image-wrap {
    margin-top: 20px !important;
  }

  .hero-title {
    font-size: 20px !important;
    width: inherit !important;
    font-weight: 400 !important;
    margin-top: 28px !important;
  }

  .hero-person-img {
    width: 100% !important;
    border-radius: 10px;
    display: block !important;
  }

  /* --- General Layout --- */
  .growth-content {
    margin-bottom: 40px;
        margin-top: 30px;
  }

  .growth-section {
    padding: inherit !important;
    text-align: left;
  }

  .growth-title {
    font-size: 20px !important;
  }

  .intro-section {
    padding: inherit !important;
  }

  .intro-content {
    text-align: center !important;
    padding: 30px !important;
  }

  .intro-title {
    font-size: 22px !important;
    text-align: center !important;
    margin: 15px 0 !important;
  }

  .intro-label,
  .intro-text,
  .intro-text p {
    text-align: center !important;
  }

  .theory-container {
    padding: inherit !important;
    text-align: center !important;
  }

  .cr-main-wrapper {
    padding: inherit !important;
  }

  .cr-header-title {
    font-size: 27px !important;
  }

  .cr-feature-box {
    padding: 16px 12px !important;
  }

  /* --- Stats --- */
  .stat-box{
    border: inherit !important;
    

  }
  .stat-box1 {
    border-bottom: 1px solid #8ecba6;
  }

  .stat-box:last-child {
    border-bottom: none;
  }

  .stat-text {
    width: 100%;
    margin-top: 4px;
  }

  /* --- Box Sizes --- */
  .boxfitsize,
  .setstartbox,
  .font-box-size {
    width: 100% !important;
    max-width: 100% !important;
  }

  .boxfitsize {
    text-align: left !important;
  }

  /* --- Opportunity Section --- */
  .setimgsizeopp {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
  }

  .setleftsize {
    padding-left: 10px !important;
  }

  .setleftsize h3 {
    font-size: 20px !important;
  }

  /* --- Mobile Alignment --- */
  .setmobilediv {
    gap: 15px !important;
    /*margin-left: 20px;*/
  }

  .card-header-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }

  /* --- Curriculum / Theory --- */
  .curriculum-card {
    flex-direction: column;
  }

  .curriculum-stat {
    border-right: none;
    border-bottom: 1px solid #eee;
  }

  .income-card {
    padding: 12px !important;
  }

  .theory-p-content-box {
    padding-left: 0;
    margin-top: 40px;
    text-align: center;
  }

  .theory-p-list li {
    text-align: left;
    display: inline-block;
    width: 100%;
  }

  .theory-p-feature-title {
    font-size: 1.8rem;
  }

  /* --- Story Section --- */
  .story-card {
    height: 300px !important;
  }

  .story-image-wrapper,
  .story-text-wrapper {
    width: 100%;
  }

  .story-image-wrapper {
    height: 300px;
  }

  .story-image-wrapper img {
    height: 300px !important;
  }

  .person-bio {
    font-size: 9px !important;
  }

  .textareabox {
    font-size: 12px !important;
    padding: 12px !important;
  }

  /* --- Benefit Section --- */
  .benefit-card div {
    text-align: center;
  }

  .benefit-card p {
    text-align: center !important;
  }

  .benefit-icon {
    width: 50px !important;
    height: 50px !important;
  }

  .benefits-section h2 {
    font-size: 24px !important;
  }

  /* --- Headings --- */
  .setheadline {
    font-size: 20px !important;
  }

  .setheadline1 {
    font-size: 16px !important;
  }

  .setfontheading {
    font-size: 20px;
  }

  .step-flow-title {
    font-size: 28px !important;
  }

  .path-main-title {
    font-size: 22px;
  }

  .program-target-title {
    font-size: 1.6rem;
  }

  /* --- Buttons --- */
  .btn-main {
    font-size: 15px;
  }

  .gl-btn-apply,
  .batch-promo-btn {
    font-size: 14px !important;
    padding: 12px !important;
    text-decoration: none !important;
  }

  .apply-btn {
    min-width: 100%;
    min-height: 64px;
    font-size: 18px;
    padding: 16px 24px;
  }

  /* --- Prices --- */
  .gl-current-price {
    font-size: 18px !important;
  }

  .batch-promo-launch-price {
    font-size: 24px !important;
  }

  /* --- Footer --- */
  .setfooterlogo {
    justify-content: center;
    display: flex;
  }

  .footer-text1 {
    font-size: 16px !important;
  }

  /* --- Placement Support --- */
  .placement-support {
    border-left: none;
    width: 100%;
    justify-content: center;
  }

  /* --- Step Cards --- */
  .step-card {
    border-radius: 24px;
    padding: 20px 18px;
    margin-bottom: 20px;
  }

  .step-card:nth-child(odd) {
    border-bottom-left-radius: 15px;
    width: 85%;
    padding: 20px;
  }

  .step-card:nth-child(odd),
  .step-card:nth-child(even) {
    margin-left: 0;
    margin-right: 0;
  }

  .steps-wrapper {
    padding-left: inherit !important;
  }

  .step-top {
    gap: 14px;
  }

  .icon-box {
    width: 42px;
    min-width: 42px;
  }

  .icon-box svg {
    width: 30px;
    height: 30px;
  }

  /* --- Left Panel --- */
  .left-panel {
    text-align: center;
    padding-right: 0;
    margin-bottom: 42px;
  }

  .main-title {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
  }

  /* --- Course Section --- */
  .course-section {
    padding: 28px 0 32px;
  }

  /* --- Google Logo --- */
  .google-ads-logo {
    width: 180px;
    height: 180px;
  }

  .logo-blue {
    width: 60px;
    height: 176px;
    right: 36px;
    top: 4px;
  }

  .logo-yellow {
    width: 54px;
    height: 142px;
    left: 43px;
    top: 27px;
  }

  .logo-green {
    width: 60px;
    height: 60px;
    left: 22px;
    bottom: 10px;
  }

  /* --- Flex Schedule --- */
  .flex-schedule-area {
    text-align: center;
    padding: 50px 0;
  }

  .flex-checklist {
    display: inline-block;
    text-align: left;
  }

  .flex-illustration-wrap {
    margin-top: 40px;
    justify-content: center;
    display: flex;
  }

  /* --- Career Section --- */
  .career-section {
    padding: 50px 0 60px;
  }

  .career-title {
    font-size: 30px;
  }

  .career-subtitle,
  .concern-text,
  .info-box p {
    font-size: 16px;
  }

  .career-subtitle {
    margin-top: 14px;
  }

  .concern-row {
    margin-top: 45px;
  }

  .question-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 24px;
  }

  .valid-concerns {
    font-size: 22px;
    margin-top: 35px;
    margin-bottom: 30px;
  }

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

  /* --- Skill Path --- */
  .skill-path-card {
    padding: 20px;
    text-align: center;
  }

  /* --- Program Target --- */
  .program-target-card {
    padding: 18px;
  }

  /* --- Batch Promo --- */
  .batch-promo-section {
    padding: 40px 0;
  }

  .batch-promo-pricing-card {
    /*margin-bottom: 40px;*/
    padding: 16px !important;
  }

  .batch-promo-timer-container {
    justify-content: center;
    gap: 6px !important;
  }

  .batch-promo-launch-title {
    font-size: 20px !important;
  }

  /* --- XP Section --- */
  .xp-suitability-wrapper {
    /*padding: inherit !important;*/
  }

  .xp-title-main {
    font-size: 25px !important;
  }

  /* --- Problem Items --- */
  .problem-item img {
    width: 27px !important;
    height: 27px !important;
  }

  /* --- Career Restart --- */
  .career-restart-section {
    padding: 40px 0;
  }

  .career-restart-image-wrapper {
    margin-top: 30px;
  }

  .career-restart-woman-img {
    max-width: 80%;
  }

  .career-restart-title {
    text-align: center;
    font-size: 20px !important;
    margin-top: 20px;
  }

  /* --- Misc --- */
  .image-container {
    padding: 10px;
  }



  /* ---- extra added css -----*/

  .p-prog-btn-apply{
    justify-content: center;
    display: flex;
  }
  .batch-promo-btn{
    justify-content: center;
    display: inline-flex;
    font-size: 16px !important;
  }

  .batch-promo-footer-text {
    font-size: 17px !important;
    margin-bottom: 40px;
  }
  .setdisplaypoint{
    display: inherit !important;
  }

}

/* Target iOS devices specifically */
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 767px) {
        .skill-path-card {
            /* Reset any fixed height or large min-height */
            min-height: auto !important; 
            height: auto !important;
            
            /* Add consistent padding to keep the look clean */
            padding-top: 30px !important;
            padding-bottom: 30px !important;
            
            /* Ensure it doesn't stretch to fill the screen vertically */
            display: block; 
            margin-bottom: 20px;
        }
    }
}

/* ===== iconset.css ===== */
/* Container for the floating buttons */
.floating-contact-container {
    position: fixed;
    right: 20px;
    /* Default fallback spacing from bottom */
    bottom: 115px; 
    z-index: 1040; /* Must be higher than the sticky bottom bar */
    display: flex;
    flex-direction: column;
    gap: 12px; /* Spacing between the two icons */
    transition: bottom 0.3s ease;
}

/* Base styles for the round buttons */
.btn-floating {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover & Active Effects */
.btn-floating:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Brand Colors */
.btn-whatsapp {
    background-color: #25D366; /* Official WhatsApp Green */
}

.btn-call {
    background-color: #007bff; /* Clean Phone Blue */
    
}
.setptag{
    font-size: 20px;
}
.seth4size{
        font-size: 20px;
        margin-top: 10px;
}

/* Responsive adjustments for smaller mobile screens */
@media (max-width: 767px) {
    .floating-contact-container {
        right: 15px;
    }
   
    .btn-floating {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}









/*// another add css*/
.newwritetext {
    border-right: 3px solid #34a853; /* The typing cursor */
    white-space: normal; /* Keeps it completely responsive on mobile */
    animation: blink-caret 0.75s step-end infinite;
    display: inline-block;
        -webkit-text-stroke: #34a853 !important;
        font-weight: bold;
  }
  .setbolddata{
        font-weight: bold;
    font-size: 20px;
  }

  /* Blinking cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #34a853; } /* Match your highlight color */
  }
        /* Base Styles & Theme Variables */
        :root {
            --cer-primary-green: #34a853;
            --cer-dark-navy: #182238;
            --cer-text-muted: #000;
            --cer-bg-light: #ffffff;
        }


        /* Hero Section Wrapper */
        .cer-hero-section {
            padding: 80px 0;
            position: relative;
        }

        /* --- Left Column Elements --- */
        .cer-badge-header {
            display: flex;
            align-items: center;
            gap: 8px;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 1px;
            color: var(--cer-text-muted);
            margin-bottom: 24px;
        }

        .cer-html5-icon {
            color: #E34F26;
            font-size: 1.4rem;
        }

        .cer-main-title {
            font-weight: 600;
            font-size: 30px;
            line-height: 1.15;
            color: var(--cer-dark-navy);
            margin-bottom: 30px;
        }

        .cer-text-green {
            color: var(--cer-primary-green);
        }

        .cer-description {
            font-size: 1.05rem;
            line-height: 1.6;
            color: var(--cer-text-muted);
            margin-bottom: 20px;
            max-width: 540px;
        }

        /* Features Grid */
        .cer-features-container {
            margin-top: 35px;
            margin-bottom: 35px;
        }

        .cer-feature-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .cer-feature-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--cer-primary-green);
        }

        .cer-feature-sub {
            font-size: 0.85rem;
            color: var(--cer-text-muted);
            padding-left: 24px;
        }

        /* CTA Button */
        .cer-btn-cta {
            background-color: var(--cer-primary-green);
            color: #ffffff;
            font-weight: 600;
            padding: 14px 32px;
            border-radius: 8px;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .cer-btn-cta:hover {
            background-color: #038f5b;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(4, 170, 109, 0.3);
        }

        /* Social Proof / Rating */
        .cer-rating-box {
            margin-top: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: var(--cer-text-muted);
        }

        .cer-stars {
            color: #04AA6D;
            display: flex;
            gap: 2px;
        }

        /* --- Right Column / Certificate Image Preview --- */
        .cer-preview-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* Decorative Background Circles */
        .cer-bg-circle-1 {
            position: absolute;
            width: 450px;
            height: 450px;
            background: linear-gradient(135deg, rgba(4, 170, 109, 0.12) 0%, rgba(4, 170, 109, 0.03) 100%);
            border-radius: 50%;
            top: 10%;
            right: -5%;
            z-index: 1;
            pointer-events: none;
        }

        .cer-bg-circle-2 {
            position: absolute;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, rgba(4, 170, 109, 0.08) 0%, rgba(4, 170, 109, 0.01) 100%);
            border-radius: 50%;
            bottom: 5%;
            left: 5%;
            z-index: 1;
            pointer-events: none;
        }

        /* Certificate Image Styling */
        .cer-cert-img {
            width: 100%;
            /*max-width: 580px;*/
            height: auto;
            border-radius: 8px;
            box-shadow: 0 20px 40px rgba(24, 34, 56, 0.12);
            position: relative;
            z-index: 2;
        }
         .cer-bg-circle-1 ,.cer-bg-circle-2{
               display: block;
            }

        /* --- Responsive Breaks --- */
       @media (max-width: 767px) {
            .cer-hero-section {
                padding: 40px 0 60px 0;
                text-align: center;
            }
            .cer-badge-header {
                justify-content: center;
            }
            .cer-main-title {
                font-size: 26px;
            }
            .cer-description {
                margin-left: auto;
                margin-right: auto;
            }
            .cer-feature-item {
                align-items: center;
                text-align: center;
                margin-bottom: 15px;
            }
            .cer-feature-sub {
                padding-left: 0;
            }
            .cer-rating-box {
                justify-content: center;
                flex-wrap: wrap;
            }
            .cer-preview-wrapper {
                margin-top: 40px;
            }
            .cer-bg-circle-1 ,.cer-bg-circle-2{
               display: none;
            }
            .cer-btn-cta{
              padding: 16px 29px !important;
            }
            .cer-main-title {
                font-size: 26px;;
            }
            .setformobiliereverse{
                      flex-direction: column-reverse;
            }
        }

       .setullisize{
        font-weight: 600;
    margin-bottom: 30px;
    align-items: center;
    line-height: 2;
    gap: 10px;
       }








          /* Custom properties for consistency */
:root {
    --landmdl-bg-light: #f4f8fb;
    --landmdl-text-teal: #34a853;
    --landmdl-text-dark: #333333;
    --landmdl-icon-teal: #34a853;
    --landmdl-btn-green: ##34a853;
    --landmdl-border-color: #ced4da;
}

/* Section Main Container */
.landmdl-main-section {
    background-color: var(--landmdl-bg-light);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Left Section Typography */
.landmdl-title {
    color: var(--landmdl-text-teal);
    font-weight: 700;
    font-size: calc(1.8rem + 1.2vw);
}

.landmdl-subtitle {
    color: var(--landmdl-text-dark);
    font-size: 1.15rem;
    line-height: 1.6;
}

/* Custom Check Icons Styling */
.landmdl-icon-wrapper {
    background-color: var(--landmdl-icon-teal);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.landmdl-check-icon {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
}

.landmdl-list-text {
    font-size: 1.1rem;
    color: var(--landmdl-text-dark);
    padding-top: 2px;
}

/* Right Section: Form Card Design */
.landmdl-form-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /*max-width: 520px;*/
    position: relative;
    border: 1px solid rgba(0,0,0,0.03);
}

/* Optional Close Cross button */
.landmdl-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.9rem;
}

.landmdl-form-heading {
    font-weight: 700;
    font-size: 1.6rem;
    color: #111111;
}

.landmdl-form-subheading {
    font-size: 0.9rem;
    color: #666666;
}

/* Input Fields Adjustments */
.landmdl-input-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #111111;
    margin-bottom: 6px;
}

.landmdl-input-field {
    border-radius: 8px;
    border: 1px solid var(--landmdl-border-color);
    padding: 10px 14px;
    font-size: 0.95rem;
    color: #444444;
}

.landmdl-input-field:focus {
    border-color: var(--landmdl-icon-teal);
    box-shadow: 0 0 0 0.2rem rgba(15, 180, 157, 0.15);
}

/* Form Action Button */
.landmdl-submit-btn {
    background-color: var(--landmdl-btn-green);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease-in-out;
}

.landmdl-submit-btn:hover, 
.landmdl-submit-btn:focus {
    background-color: #238b47;
    color: #ffffff;
}
.landmdl-info-col{
    padding: 20px;
}
.showtextcenterarea{
     color: #ffffff;
    text-align: center;
}






/* Base cursor styling */
.cursor {
  font-weight: 300;
  margin-left: 3px;
  /* ease-in-out makes the blinking look incredibly smooth */
  animation: smooth-blink 0.9s ease-in-out infinite; 
}

/* Choice 1: Green Cursor */
.cursor.green {
  color: #2ecc71; /* Vibrant, modern green */
}

/* Choice 2: Black Cursor */
.cursor.black {
  color: #000000; /* Solid black */
}

/* Smooth blinking keyframe */
@keyframes smooth-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; } /* Fading to 0.1 instead of 0 prevents jerky transitions */
}






/* Modal wrapper with mdl prefix */
.mdl-modal-box {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.mdl-text-dark {
    color: var(--brand-dark);
}

.mdl-label {
    color: var(--brand-dark);
    font-size: 0.9rem;
}

/* Custom Input styles with mdl prefix (Works on inputs and selects) */
.mdl-input {
    border: 1px solid #cbd5e1;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
}

/* Green Highlight focus effect */
.mdl-input:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 4px rgba(0, 135, 81, 0.15) !important;
    color: var(--brand-dark);
}

/* Validation overrides */
.mdl-input.is-valid {
    border-color: #198754 !important;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.15) !important;
    background-color: #f8fffb;
}

.mdl-input.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15) !important;
    background-color: #fffdfd;
}

/* Custom Submit Button with mdl prefix */
.mdl-submit-btn {
    background-color: var(--brand-green) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    letter-spacing: 0.5px;
    transition: background 0.3s ease;
}

.mdl-submit-btn:hover {
    background-color: #006e41 !important;
    box-shadow: 0 4px 12px rgba(0, 135, 81, 0.2);
}

/* Make Select2 container match your custom input aesthetics */
.mdl-modal-box .select2-container--default .select2-selection--single {
    border: 1px solid #cbd5e1 !important;
    height: calc(2.4rem + 2px) !important;
    border-radius: 8px !important;
    padding: 0.4rem 0.5rem !important;
    transition: all 0.2s ease-in-out;
}

/* Style the text placement inside the selection container */
.mdl-modal-box .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--brand-dark) !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* Align the dropdown arrow */
.mdl-modal-box .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

/* Validation overrides for Select2 elements */
.mdl-modal-box .select2-selection.is-valid {
    border-color: #198754 !important;
    background-color: #f8fffb !important;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.15) !important;
}

.mdl-modal-box .select2-selection.is-invalid {
    border-color: #dc3545 !important;
    background-color: #fffdfd !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15) !important;
}

/* Highlight search focus block */
.select2-container--open .select2-dropdown {
    border-color: var(--brand-green) !important;
    border-radius: 8px;
    z-index: 9999999; /* Keeps select dropdown stacked over modal window layers */
}

/* Success Modal Custom Circle Check */
.success-icon-circle {
    width: 80px;
    height: 80px;
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
}






  /* Mobile View (Default): Both buttons are visible */
.floating-contact-container .btn-call,
.floating-contact-container .btn-whatsapp {
    display: inline-flex; /* Or 'block' / 'inline-block' depending on your layout */
}

/* Desktop View: Hide the call button on screens 768px and wider */
@media (min-width: 768px) {
    .btn-call {
        display: none !important;
    }
}

/* ===== training-extra.css ===== */
/* ==========================================
   Instagram Reels Auto Slider
   Desktop: 3 videos
   Tablet: 2 videos
   Mobile: 1 video with safe play lock
========================================== */

.insta_benefits_section {
    padding: 70px 0 80px;
    background: linear-gradient(135deg, rgba(52, 168, 83, 0.20), rgba(52, 168, 83, 0.08));
    overflow: hidden;
}

.insta_benefits_section * {
    box-sizing: border-box;
}

.insta_container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
}

.insta_section_title {
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 34px;
    line-height: 1.25;
}

.insta_video_slider {
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

.insta_video_slider.slick-initialized {
    opacity: 1;
    visibility: visible;
}

.insta_video_slider .slick-list {
    overflow: hidden;
    padding: 8px 0 22px;
}

.insta_video_slider .slick-track {
    display: flex !important;
    align-items: stretch;
}

.insta_video_slider .slick-slide {
    height: auto;
}

.insta_video_slider .slick-slide > div {
    height: 100%;
}

.insta_slide {
    padding: 0 12px;
    height: 100%;
}

.insta_video_slider .insta_card {
    width: 100%;
    max-width: 360px;
    margin: 0 auto !important;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 12px solid #ffffff;
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.24);
}

.insta_video_box {
    width: 100%;
    height: 405px;
    background: #000000;
    overflow: hidden;
    position: relative;
    border-radius: 12px 12px 0 0;
}

.insta_video_box iframe {
    width: 100%;
    height: 860px;
    border: 0;
    display: block;
    transform: translateY(-82px) scale(1.14);
    transform-origin: top center;
}

.insta_mobile_play_overlay {
    display: none;
}

.insta_custom_footer {
    width: 100%;
    background: #ffffff;
    padding: 14px 14px 6px;
}

.insta_profile_name {
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
    color: #111111;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.insta_profile_name::before {
    content: attr(data-initial);
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #111111, #3d3d3d);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.insta_name_text {
    display: inline-block;
}

.insta_followers_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f0fff5, #e7f7ec);
    color: #16803a;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
    border: 1px solid rgba(52, 168, 83, 0.25);
    white-space: nowrap;
}

.insta_followers_icon {
    width: 15px;
    height: 15px;
    fill: #16803a;
    flex-shrink: 0;
}

.insta_video_slider .slick-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    z-index: 5;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.insta_video_slider .slick-prev {
    left: -6px;
}

.insta_video_slider .slick-next {
    right: -6px;
}

.insta_video_slider .slick-prev:before,
.insta_video_slider .slick-next:before {
    color: #111827;
    font-size: 24px;
    opacity: 1;
}

.insta_video_slider .slick-dots {
    bottom: -20px;
}

.insta_video_slider .slick-dots li {
    width: 14px;
    height: 14px;
    margin: 0 3px;
}

.insta_video_slider .slick-dots li button {
    width: 14px;
    height: 14px;
    padding: 0;
}

.insta_video_slider .slick-dots li button:before {
    font-size: 10px;
    color: #34a853;
    opacity: 0.35;
}

.insta_video_slider .slick-dots li.slick-active button:before {
    color: #34a853;
    opacity: 1;
}

/* Only mobile responsive query */
@media (max-width: 767px) {
    .insta_benefits_section {
        padding: 42px 0 58px;
    }

    .insta_container {
        padding: 0 10px;
    }

    .insta_section_title {
        font-size: 24px;
        margin-bottom: 22px;
        line-height: 1.3;
    }

    .insta_video_slider .slick-list {
        padding: 4px 0 20px;
    }

    .insta_slide {
        padding: 0 6px;
    }

    .insta_video_slider .slick-arrow {
        display: none !important;
    }

    .insta_video_slider .insta_card {
        max-width: 315px;
        border-width: 10px;
        border-radius: 22px;
    }

    .insta_video_box {
        height: 360px;
        border-radius: 10px 10px 0 0;
    }

    .insta_video_box iframe {
        height: 815px;
        transform: translateY(-80px) scale(1.14);
        pointer-events: none;
    }

    .insta_card.is-video-unlocked .insta_video_box iframe {
        pointer-events: auto;
    }

    .insta_mobile_play_overlay {
        position: absolute;
        inset: 0;
        z-index: 4;
        border: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #ffffff;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12),
            rgba(0, 0, 0, 0.48)
        );
        cursor: pointer;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .insta_mobile_play_icon {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        color: #111827;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 38px;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
    }

    .insta_mobile_play_text {
        padding: 7px 14px;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.72);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.2px;
    }

    .insta_card.is-video-unlocked .insta_mobile_play_overlay {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .insta_custom_footer {
        padding: 12px 10px 5px;
    }

    .insta_profile_name {
        font-size: 16px;
        gap: 8px;
    }

    .insta_profile_name::before {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 14px;
    }

    .insta_followers_badge {
        font-size: 11.5px;
        padding: 6px 8px;
    }

    .insta_followers_icon {
        width: 14px;
        height: 14px;
    }

    .insta_video_slider .slick-dots {
        bottom: -20px;
    }

    .insta_video_slider .slick-dots li {
        width: 12px;
        height: 12px;
        margin: 0 2px;
    }

    .insta_video_slider .slick-dots li button {
        width: 12px;
        height: 12px;
    }

    .insta_video_slider .slick-dots li button:before {
        font-size: 9px;
    }
}

.seticonhw{
    height: 50px;
    width: 50px;
}
.newiconbg{
    height: 35px;
    width: 35px;
}

/* ===== Training page extra CSS: block 2 ===== */
/* Mobile View (Default): Both buttons are visible */
.floating-contact-container .btn-call,
.floating-contact-container .btn-whatsapp {
    display: inline-flex; /* Or 'block' / 'inline-block' depending on your layout */
}

/* Desktop View: Hide the call button on screens 768px and wider */
@media (min-width: 768px) {
    .btn-call {
        display: none !important;
    }
}

/* Replaces old inline button height styles */
.btn-h-50{height:50px;}
.gl-sticky-cta-bar{background-color:#34a853;}