@font-face {
  font-family: hdfont1;
  src: url(../font/Gilroy-Regular.woff);
}

@font-face {
  font-family: hdfont;
  src: url(../font/EDITION_.woff);
}

@font-face {
  font-family: bodyfont;
  src: url(../font/Poppins-Regular.woff);
}


:root {
  --primary-bg-color: #0060a2;
  --Secondary-color: #00bac6;
  --text-color:#797979;
  --body-text-color:#313639;
  --bg-color:#f2f2f2;
  --accent:#e5e5e5;
  
}

body
{
   font-family: bodyfont;
}

a
{
  text-decoration: none;
}

.no-pad
{
  padding-left: 0;
  padding-right: 0;
}

.hdr-top
{
  width: 100%;

 
  color: var(--bg-color);
  font-size: 25px;
  letter-spacing: 1px;
  word-spacing: 3px;
  font-family: hdfont1;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
}


Header
{
  position: relative;
  background: #fff;
  background-size: cover;
  background-position: top center;
  z-index: 1;
  padding-top: 0px;
}

.logo-txt
{
  color: #787777;
  text-align: center;
  font-size: 24px;
  font-family: hdfont1;
  text-align: center;
  line-height: 40px;
  font-weight: bolder;
}
.hero-shap1
{
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.social-icon
{
  padding-left: 1rem;
  padding-top: 1.7rem;
}
.social-icon li
{
  border: 0;
  font-size: 20px;
  padding: 1.5rem .5rem;
  
}

.social-icon li a{

  color: var(--Secondary-color);
}

.hdr-info
{
  padding: 3.5rem 1rem 1.5rem;
  font-size: 15px;
}
.hdr-info i{

  color: var(--Secondary-color);
  padding-right: 10px;
}

.hdr-info a
{
  color: var(--body-text-color);
}

.enq-btn
{
   padding: 2.8rem 0rem 1.5rem 2rem;
}

.logo-div
{
  margin-top: 10px !important;
  margin-bottom: 10px;
}
.logo
{
  height: 100px;
  
}

.nvbar
{
  background: var(--accent);
  border-radius: 10px;
  padding-left: .5rem;
  padding-right: .5rem;
  margin-top: .5rem;
}
.list-group-item
{
  background: none;
}

.parallax-image {
  min-height: 68vh;
  position: relative;
}
.parallax-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.banner-txt
{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.enquery
{
  background: var(--primary-bg-color);
  color: var(--bg-color);
}
.heor-img-sec
{
  position: relative;
  z-index: 3;
}

.hero-bg
{
  position: absolute;
  width: 140%;
  right: -22%;
  top: 4%;
}

.hero-bg img
{
  width: 100%;
}

.hero-img
{
  position: absolute;
  width: 126%;
  right: -21%;
  top: 8%;
}

.hero-img img
{
  width: 100%;
}

.hero-txt
{
  margin-top: 8% !important;
  margin-bottom: 5%;
}
.hero-txt1
{
  font-size: 17px;
  color: var(--bg-color);
  margin-bottom: 1.5rem;
  
}

.hero-hd
{
  font-family: hdfont1;
  font-size: 37px;
  font-weight: 600;
  word-spacing: 0;
  letter-spacing: 0;
  margin-bottom: 1.5rem;
  line-height: 56px;
  color:var(--bg-color);
}


.hero-hd span{
color: #7dc9fb;
  
}
.hero-running-txt
{
  font-size: 17px;
color: #7dc9fb;

}

.hero-btn
{
  padding-top: 1dvh;
  
}
.hero-btn a
{
    padding: 10px 20px;
    background: var(--Secondary-color);
    color: var(--body-text-color);
    font-size: 17px;
    border-radius: 7px;
    transition: all 500ms;
}
.hero-btn a:hover
{
    background: var(--primary-bg-color);
    color: var(--bg-color);
    font-size: 18px;
    border-radius: 10px;
}

.shap-triangle
{
  position: absolute;
  top: 6%;
  right: -22%;
  animation: itrotate 3s ease-in-out 3s infinite alternate forwards;
}
.shap-hat
{
position: absolute;
  top: 37%;
  left: -39%;
}

.about-sec
{
  padding-top: 50px;
  padding-bottom: 50px;
  min-height: 500px;
  position: relative;
  z-index: 1;
  background: #fff;
}
.about-img
{
    width: 40%;
}

.about-img2
{
    width: 50%;
}

.about-img p
{
  margin-right: 1rem;
}

.about-img img, .about-img2 img
{
  border-radius: 10px;
}

.ex-mrgin
{
  margin-top: 10%;
}

.about-shap
{
  position: relative;
  top: 0;
  margin-top: -69%;
  text-align: center;
}

.about-shap img{
  width: 80%;
}



.about-main
{
  margin-top: 10% !important;
  margin-bottom: 5%;
}

.up-heading 
{
  color: var(--body-text-color);
  font-size: 19px;
  border-radius: 3px;
  padding: 4px 30px 4px 0px;
  margin-bottom: 0;
}

.heading {
  font-family: hdfont1;
  font-size: 40px;
  font-weight: 600;
  word-spacing: 2;
  letter-spacing: 1;
  margin-bottom: 2rem;
  margin-top: 5px;
  line-height: 55px;
}

.heading span
{
  color: var(--primary-bg-color);
   
}

.heading-sub
{
  font-size: 22px;
  font-weight: 600;
  word-spacing: 2;
  letter-spacing: 1;
  margin-bottom: 2rem;
  margin-top: 0;
  line-height: 28px;
}

.running-txt
{
  color: var(--text-color);
  font-size: 16px;
  line-height: 27px;
}

.setbg1
{
  background: var(--bg-color);
}

.course-sec
{
  padding-top: 80px;
  padding-bottom: 200px;
}

.heading-sub2 {
  font-size: 18px;
  font-weight: 500;
  word-spacing: 2;
  letter-spacing: 1;
  margin-bottom: 2rem;
  margin-top: 0;
  line-height: 28px;
  color: var(--text-color);
}

.cousse-box
{
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(90deg, #15d5ae 10%, #00bac6 35%, #0c8fe7 100%);
  padding: 2px;
  position: relative;
  
}

.cousse-inner {
  
    width: 100%;
    height: 100%;
    border-radius: 20px; /* !importanté */
    background: #fff;   
    
}
.crs-img
{
  margin-top: 2rem;
}
.crs-img img
{
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #f2f2f2;
  padding: 10px;
}

.cousse-inner h5
{
  color: var(--primary-bg-color);
  font-size: 20px;
  line-height: 26px;
}

.crs-btn
{
  margin-top: 30px;
  margin-bottom: 30px;
}
.crs-btn a
{
  color: var(--text-color);
  padding: 5px 15px;
  border: 1px solid var(--text-color);
  border-radius: 10px;
  transition: all 500ms;
  text-decoration: none;
}

.crs-btn a:hover
{
  border: 1px solid var(--primary-bg-color);
  background: var(--Secondary-color);
  color: #fff;
}

.enquery-sec
{
  background: url(../images/bg-1-1.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100px;
}

.enquery-sec::after
{
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #0E2A46;
  opacity: 85%;
  z-index: 12;
  display: block;
}

.no-mar
{
  margin-bottom: 0;
}
.mqs-item img{
  width: 50%;
}
.company-logo .tab-content
{
  background: #fff;
  border-radius: 10px;
  box-shadow:  0 6px 21px -7px #2f2f2f36;
  padding: 15px ;
}
.company-logo .nav-tabs
{
  padding-bottom: 2rem;
  border-bottom:none;
  justify-content: center;
}
.company-logo .nav-tabs .nav-link
{
  background:  var(--bg-color);
  border: 1px solid var(--primary-bg-color);
  color: var(--primary-bg-color);
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
}

.company-logo .nav-item
{
  margin-left: 2rem;
}
.company-logo .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active
{
  background: var(--primary-bg-color);
  color: var(--bg-color);
}
.hero-section {
      background: linear-gradient(#0E2A46E5, #0E2A46E5)
                   center/cover no-repeat;
      color: #fff;
      padding: 80px 0 150px;
      position: relative;
    }
.parallax-window {
    min-height: 400px;
    background: transparent;
    width: 100%;
}

.hero-section::after
{
  content: "";
  position: absolute;
  background: linear-gradient(#0E2A46E5, #0E2A46E5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
    .hero-text h1 {
      font-size: 2.5rem;
      font-weight: 700;
    }

    .hero-text h4 {
      font-weight: 500;
      margin-bottom: 20px;
    }

    .join-btn {
      background-color: var(--Secondary-color);
      border: none;
      color: #fff;
      padding: 10px 25px;
      border-radius: 6px;
      transition: 0.3s;
	  display:inline-block;	
    }

    .join-btn:hover {
      background-color: var(--primary-bg-color);
		color:#fff;
    }

    /* Form card */
    .callback-form {
      background: #e9e9e9;
      border-radius: 10px;
      padding: 25px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .callback-form h5 {
      color: var(--primary-bg-color);
      margin-bottom: 20px;
      font-weight: 600;
      text-align: center;
      font-size: 30px;
      font-family: hdfont1;
    }

    .callback-form .btn {
      background-color: var(--primary-bg-color);
      color: #fff;
      font-weight: 500;
      width: 50%;
    }

    .callback-form .btn:hover {
      background-color: #00a185;
    }

    @media (max-width: 992px) {
      .hero-text {
        text-align: center;
        margin-bottom: 30px;
      }
    }


.bro
{
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  margin-top: -100px;
  
}

.bro-containt
{
  background:var(--bg-color);
  box-shadow: 10px 11px 7px -7px #2f2f2f7d;
  border-radius: 20px;
  position: relative;
  padding-bottom: 0;
  padding-left: 30px;
  padding-right:0;
}





.bro-img img{
  height: 190px;
}
.bro-hd
{
  font-family: hdfont1;
  font-size: 30px;
  font-weight: 600;
  margin-top: 30px;
  color: var(--primary-bg-color);
  
}

.bro-txt
{
  font-size: 20px;
  font-weight: 500;
  color: var(--body-text-color);
}

.bro-img img
{
border-radius: 0 20px 20px 0;
}

@media (max-width: 767px) {
	.bro-containt {
  
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
	.bro-img img {
  border-radius: 20px;
}
	
}

.clr
{
  background: var(--primary-bg-color) !important;
}

.clr:hover
{
  background: var(--Secondary-color) !important;
}


    .why-section{
      padding: 200px 0 80px 0;
  background: #e5f4ff;
  margin-top: -120px;
    }

    /* badge */
    .why-badge{
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      background:var(--Secondary-color);
      color:var(--bg-color);
      box-shadow:0 6px 14px rgba(0,96,162,0.06);
margin-bottom: 2rem;
  font-size: 16px;
  border-radius: 20px;
  padding: 4px 30px 4px 4px;
    }
    .why-badge i{
      background: var(--bg-color);
  color: var(--primary-bg-color);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center;
  line-height: 25px;
  margin-right: 5px;
    }

    /* title */
    .why-title{
      font-size:40px;
      line-height:52px;
      font-weight:800;
      margin-bottom:1rem;
      margin-top: 2rem;
    }
    

    .lead-desc{
      color:var(--text-color);
      max-width: 700px;
      margin-bottom:2.5rem;
      font-size:1rem;
    }

    /* left image */
    .why-image{
      width:100%;
      border-radius: 28px;
      object-fit:cover;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
      display:block;
    }

    /* feature cards */
    .feature-grid { gap: 1.25rem; }

    .feature-box{
      background: #ffffff;
      border-radius: 20px;
      padding: 22px;
      height:100%;
      box-shadow: 0 12px 30px rgba(1, 18, 30, 0.12);
      transition: transform .25s ease, box-shadow .25s ease;
      display:flex;
      flex-direction:column;
      gap:.8rem;
    }
    .feature-box:hover{
      transform: translateY(-6px);
      box-shadow: 0 18px 40px rgba(0,96,162,0.10);
    }

    .feature-icon{
      width:auto;
      /*height:66px;
      border-radius:16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;*/
      font-size:32px;
      color:var(--primary-bg-color);
      /*background: linear-gradient(135deg, var(--Secondary-color), var(--primary-bg-color));
      box-shadow: 0 6px 18px rgba(0,0,0,0.08), inset 0 -6px 18px rgba(255,255,255,0.03);*/
      flex-shrink:0;
      margin-top: -3px;
    }

    .feature-title{
      color:var(--primary-bg-color);
      font-weight:700;
      font-size:19px;
      margin-bottom:15px;
      line-height: 28px;
      font-family: hdfont1;;
    }

    .feature-text{
      color:var(--text-color);
      font-size:.95rem;
      line-height:1.5;
      margin-top:.2rem;
      flex:1 1 auto;
    }

    /* number badge for items (optional visual) */
    .num-badge{
      background: linear-gradient(90deg, rgba(0,96,162,0.06), rgba(0,186,198,0.04));
      color:var(--primary-bg-color);
      padding:.25rem .6rem;
      border-radius:10px;
      font-weight:700;
      font-size:.86rem;
      display:inline-block;
      margin-left:auto;
    }

    @media (max-width: 991.98px){
      .why-title { font-size:1.9rem; }
      .feature-icon{ width:56px; height:56px; font-size:1.1rem; border-radius:12px; }
    }

    @media (max-width: 575.98px){
      .why-section { padding:48px 0; }
      .why-title { font-size:1.6rem; }
      .lead-desc { margin-bottom:1.5rem; }
    }

@media (max-width: 767px){
	.why-section { margin-top:0; }
}

    

    .customMarquee {
			overflow: hidden;
			white-space: nowrap;
			border-radius: 12px;
			/*border: 1px solid #ddd;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);*/
			background: var(--bg-color);
			padding: 15px;
			margin: 16px 0;
			
			transition: box-shadow 0.3s ease;
			}
			/*.customMarquee:hover {
			box-shadow: 0 6px 16px rgba(0,0,0,0.1);
			}*/
			.marqueeInner {
			display: inline-flex;
			align-items: center;
			will-change: transform;
			}
			.marquee-item {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 10px 16px;
			margin-right: 12px;
			border-radius: 50px;
			background: #e0f7fa;
			border: 1px solid #b2ebf2;
			box-shadow: 0 1px 3px rgba(0,0,0,0.05);
			font-weight: 500;
			color: #00796b;
			white-space: nowrap;
			transition: transform 0.3s, background 0.3s;
			}
			.marquee-item:hover {
			transform: scale(1.05);
			background: #b2ebf2;
			}
			.marquee-img-item {
			display: inline-block;
			border-radius: 8px;
			margin-right: 75px;
			/*border: 1px solid #ddd;
			box-shadow: 0 2px 5px rgba(0,0,0,0.08);*/
			transition: transform 0.3s;
      width: 140px;
			}
			.marquee-img-item:hover {
			transform: scale(1.05);
			}
			/* Paragraph item (for longer text blocks) */
			.marquee-paragraph-item {
				display: inline-block;
				color: #5d4037;
				font-size: 0.95rem;
				line-height: 1.4;
			}

      .company1
    {
      width: 100%;
      position: relative;
      left: 0;
      top: 0;
      margin-top: 0;
      background: var(--bg-color);
      padding-top: 80px;
      padding-bottom: 80px;
    }
    
.company-logo
{
  width: 100%;
  margin-top: 2rem;
}
    .company-txt
    {
      width: 100%;
      text-align: center;
    }

      
        .blog-card{
            background: #fff;
            padding: 15px;
            box-shadow: 0px 8px 30px rgba(0,0,0,0.08);
            transition: .3s;
        }
        .blog-card:hover{ transform: translateY(-4px); }

        .blog-img{
            width: 100%;
            height: 260px;
            border-radius: 0px;
            object-fit: cover;
        }

        .date-badge{
            position: absolute;
            top: 0px;
            right: 30px;
            background:var(--primary-bg-color);
            color:#fff;
            padding:6px 16px;
            border-radius:5px;
            font-size: 14px;
        }

        .blog-title{
            font-size: 20px;
            font-weight: 700;
            margin-top: 15px;
            color:#1b1b1b;
            margin-bottom: 10px;
        }

        .blog-txt
        {
          color: var(--text-color);
          margin-bottom: 30px;
          font-size: 16px;
        }

        .read-btn{
            background:var(--Secondary-color);
            color:#fff;
            padding:10px 25px;
            border-radius:10px;
            text-decoration:none;
            font-weight:500;
        }
        .read-btn:hover{
            background:var(--primary-bg-color);
            color:#fff;
        }

.edu-footer {
    
    color: var(--bg-color);
    padding-bottom: 70px;
    padding-top: 50px;
    background: #02497a;
}

/* Logo */
.footer-logo {
    height: 100px;
}


.newsletter-txt
{
  margin-top: 40px;
}

/* Newsletter */
.newsletter-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    position: relative;
    margin-top: 20px;
}

.hh
{
  width: 40px;
  background: var(--Secondary-color);
  margin-top: 10px;
  margin-bottom: 10px;
  height: 3px !important;
  opacity: 1 !important;
}
.email-icon {
    position: absolute;
    left: 0;
    font-size: 16px;
    color: #e3e3e3
}

.newsletter-input {
    border: none;
    outline: none;
    padding-left: 25px;
    flex: 1;
    background: transparent;
    color: #fff;
    width: 40%;
}

.subscribe-btn {
    background: var(--Secondary-color);
    border: none;
    padding: 6px 14px;
    color: white;
    border-radius: 20px;
}
.blog{
  padding-top: 80px;
  padding-bottom: 80px;
}
/* Lists */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links li i{
  font-size: 13px;
  color: var(--Secondary-color);
  padding-right: 8px;
}

.footer-links a {
    text-decoration: none;
    color: var(--bg-color);
    font-size: 15px;
}

.footer-links a:hover {
    color: var(--Secondary-color);
}

/* Contact Items */
.contact-item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.contact-icon {
    font-size: 18px;
    color: var(--Secondary-color);
    margin-top: 5px;
}

.copy
{
  background: #03385d;
  padding-top: 20px;
  padding-bottom: 20px;
}

.copy-txt
{
  color: var(--bg-color);
}
.social-icon-ftr {
  margin-top: -5px;
}
.social-icon-ftr a{
  padding-left: 10px;
  color: var(--Secondary-color);
  font-size: 22px;
}



 .section-container{
    background: var(--primary-bg-color);
    color: var(--bg-color);
    padding: 64px 0 200px;
  }

  .section-header{
    text-align:center;
    margin-bottom:28px;
  }
  .section-header .badge-top{
    color: #74c6ff;
  }
  .section-header h2{
    margin-top:14px;
    font-weight:800;
    font-size:30px;
    line-height:1.05;
  }

  /* Carousel viewport */
  .cards-viewport{
    max-width:100%;
    margin: 0 auto;
    padding: 12px 18px;
  }

  /* track is the scrolling flex container */
  .cards-track{
    overflow: hidden;
    position: relative;
    width:100%;
    /* optional soft mask edges 
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);*/
  }

  .cards-row{
    display:flex;
    gap:18px;
    transition: transform 450ms cubic-bezier(.22,.9,.37,1);
    will-change: transform;
    align-items:stretch;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  /* card */
  .course-card{
    flex: 0 0 auto; /* width controlled via JS/CSS for 4-up */
    background:var(--bg-color);
    border-radius:14px;
    padding:22px;
    text-align:center;
    
    color:var(--text);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    min-height: 240px;
    transition: all 500ms;
  }




  
  .course-card:hover{ transform: translateY(-6px); background: #d0dff3; }

  .icon-circle{
    width:150px;
    height:150px;
    border-radius:50%;
    margin: auto;
    margin-bottom:14px;
    flex-shrink:0;
    position: relative;
    margin-top: -100px;
  }

  .teacher .cards-track
  {
    padding-top: 80px;
  }
  .icon-circle img{ width: 100%;border-radius:50%;border: 2px solid #fff; }

  .course-card h5{ margin:8px 0 10px; font-weight:600; color:#1b1b1b; font-size:21px !important; }
  .course-card p{ font-size:16px; color: var(--text-color); margin-bottom:12px; text-align: left;}
  .degignation{font-size:19px !important; color: var(--primary-bg-color) !important;text-align: center !important;}
  .Linkedin-logo a{color: var(--primary-bg-color) !important; font-weight: 600;}
  .pill{
    display:inline-flex;
    gap:10px;
    align-items:center;
    margin-bottom: 30px;
    width: 80%;
      }

      .pill a      {
        display: inline-block;
        width: 100%;
        background: var(--Secondary-color);
    padding:12px 30px;
    border-radius:10px;
    font-weight:700;
    font-size:16px;
    color: var(--bg-color);
    transition: all 500ms;
      }

      .pill a:hover
      {
        background: var(--primary-bg-color);
        color: var(--bg-color);
      }


  .pill .arrow{
    width:22px;
    height:22px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: var(--accent);
    color: #000;
    font-weight:800;
    font-size:14px;
  }

  /* controls under cards */
  .carousel-controls{
    margin-top:-13%;
    display:flex;
    justify-content:space-between;
    gap:12px;
    position: relative;
    z-index: 1;
  }


  .carousel-controls button{
    width:auto;
   
    border-radius:50%;
    border:0;
    background:none;/*box-shadow:0 8px 20px rgba(0,0,0,0.15); height:46px;*/
    color:var(--bg-color);
    font-size:22px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    
    line-height: 46px;
    margin-left: -29px;
    margin-right: -29px;
  }
  .carousel-controls button:hover{ background:none; color:#d2cbff; }

  /* Responsive: show 4/3/2/1 cards */
  @media (min-width: 1200px){
    /* desktop: 4 cards */
    .course-card{ width: calc((100% - 18px*3)/4); } /* 4 cards + 3 gaps */
  }
  @media (min-width: 900px) and (max-width:1199px){
    /* medium: 3 cards */
    .course-card{ width: calc((100% - 18px*2)/3); }
  }
  @media (min-width: 600px) and (max-width:899px){
    /* small tablet: 2 cards */
    .course-card{ width: calc((100% - 18px*1)/2); }
  }
  @media (max-width:599px){
    /* phone: 1 card */
    .course-card{ width: 100%; }
    .cards-row{ gap:12px; }
  }

  /* subtle focus outline 
  .carousel-controls button:focus{ outline:3px solid rgba(255,255,255,0.12); outline-offset:2px; }*/


.main-course
{
  background: #fff;
  box-shadow: 0px 15px 20px -10px rgb(109 117 143 / 33%);
  border-radius: 10px;
  padding: 0;
  position: relative;
}
.for-crs
{
  
  font-size: 45px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 5px;
  line-height: 55px;
}
.crs-pic
{
  width: 100%;
  position: relative;
}

.crs-pic img{
  border-radius: 10px 10px 0 0;
}
.main-course:hover
{
  background: #fff;
}
.crs-pic h5
{
  
  
  margin-top:0 ;
  margin-bottom: 0;
  color: var(--body-text-color);
  text-align: left;
  padding: 20px 20px 10px 20px;
  line-height: 30px;
  font-size: 22px !important;
}

.main-course p{
  color:#999999;
  font-size: 16px;
  text-align: left;
  padding: 0 20px 20px;
}

.heading-sub2{
  margin-bottom: 0;
}

/*.course-sec .carousel-controls {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 12px;
  position: absolute;
  right: 0;
  top: -17%;
  z-index: 1;
}*/

.course-sec .carousel-controls button {
  width: auto;
  border-radius: 50%;
  border: 0;
  /*background: var(--primary-bg-color);box-shadow: 0 8px 20px rgba(0,0,0,0.15);*/
  color: #b0b0b0;
  font-size: 22px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  line-height: 46px;
  margin-left: -29px;
  margin-right: -29px;
  margin-top: -25%;
}

.course-sec 
{
  position: relative;
}

.course-sec .book
{
  position: absolute;
  width: 446px;
  right: 0;
  top: -107px;
}

.course-sec .cards-track {
  padding: 0px 0 30px;
}

.cards-track {
  touch-action: pan-y;
}

.vdo
{
  background: var(--bg-color);
  padding-top: 50px;
  padding-bottom: 100px;
}

.video-card {
  background: #fff;
  padding: 0px;
  box-shadow: 0px 8px 30px rgba(0,0,0,0.08);
  transition: .3s;
  padding-bottom: 10px;
  border-radius: 0 0 10px 10px;
}

.video-card img{
  border-radius: 10px 10px 0 0;
}

.vd-nm
{
  font-size: 18px;
  font-weight: 600;
  color: var(--body-text-color);
  margin-bottom: 0;
  margin-top: 20px;
}

.vd{
  position: relative;
  margin-top: -40px;
  margin-bottom: 40px;
}
.vdo-btn{
            background:#0061a281;
            color:#fff;
            padding:6px 15px;
            border-radius:7px;
            text-decoration:none;
            font-weight:500;
            margin-left: 25px;
        }
        .vdo-btn:hover{
            background:var(--primary-bg-color);
            color:#fff;
        }


.hero-txt-img
{
  margin-top: 7%;
  margin-bottom: 5%;
}

.hero-txt-img img
{
  border-radius: 20px;
}
        #topStrip{
    position:fixed;
    left:0; right:0;
    top:0;
    height:45px;
    /*background:#0060a2db;*/
    display:flex;
    align-items:center;
    padding:0 20px;
    /*box-shadow:0 2px 10px rgba(0,0,0,0.1);*/
    z-index:1000;
    line-height: 45px;
  }
  #topStrip .title{ font-weight:700; letter-spacing:0.2px;  }

  /* page content container gives space below top strip */
 

  /* banner common styles */
  .banner {
    width:100%;
    min-height:540px;
    box-sizing:border-box;
    padding:48px;
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-bottom:1px solid rgba(255,255,255,0.03);
  }

  /* Banner 1 is fixed below the top strip */
  .banner.b1 {
    position: fixed;
    left:0;
    right:0;
    top: calc(var(--top-strip-h));
    z-index: 800; /* base */
    height: 420px; /* a fixed height needed to preserve layout (we add a spacer) */
    background: #6e0b0b;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  }



  /* Banner 2 and 3 use position: sticky so they will stick when scrolled to top */
  .banner.b2, .banner.b3 {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--top-strip-h)); /* they will stick below the top strip */
    z-index: 850; /* changed for stacking (b2 < b3) via separate classes below */
  }

  .banner.b2 { z-index: 850; background:#004879 url(../images/ban1-shape.png) no-repeat ; background-size:auto 100%;background-position: center right 20%; }
  .banner.b3 { z-index: 900; background: #4d386f url(../images/ban2-shape.png) no-repeat ; background-size:auto 100%;background-position: center right 20%; }

  /* z-index stacking so newer sections overlap earlier ones */
  
  .banner.b2 { z-index: 850; }
  .banner.b3 { z-index: 900; }

  /* Normal banner styles for banner4 (just scrolls normally) */
  .banner.b4 { background:#005d63 url(../images/ban3-shape.png) no-repeat ; background-size:auto 100%;background-position: center right 20%;  }

 
  /* When 'released' class is applied (when 4th banner touches top),
     make banners ordinary so they scroll together */
  .released .banner.b1 {
    position: relative;
    top:0;
    left:0;
    right:0;
    box-shadow:none;
  }
  .released .b1-spacer { display:none; } /* no need spacer once b1 is in flow */
  .released .banner.b2, .released .banner.b3 {
    position: relative; /* cancel sticky behavior */
    top: auto;
  }

  /* small responsive */
  @media (max-width:900px){
    .banner { flex-direction:column; align-items:flex-start; padding:36px; }
    .card{ width:100%; }
  }


.off-dxt
{
  display: none;
}


@media only screen and (min-device-width : 768px) and (max-device-width : 1199px)
{
  .off-tab
  {
    display: none;
  }
  .on-tab
  {
    display: block;
  }
.social-icon {
  padding-left: .5rem;
}

.hdr-info {
  padding: 2.5rem .25rem 1.5rem;
  font-size: 14px;
}
  .enq-btn {
  padding: 0 0 0 0;
  margin-top: -35px;
    margin-right: 20px;
}
.about-main {
  margin-top: -3% !important;
}
.heading {
  font-size: 30px;
  word-spacing: 1;
  letter-spacing: 1;
  margin-bottom: 1rem;
  line-height: 38px;
}
.heading-sub {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 1rem;
}
.hero-section::after
{
  z-index: 1 !important;
}
.hero-section .container {
  position: relative;
  z-index: 2 !important;
}
.bro
{
  z-index: 3 !important;
}
.teacher .course-card
{
  width: 31% !important;
}

.teacher .carousel-controls {
  margin-top: -33%;
}
.teacher .carousel-controls button
{
  margin-left: -35px !important;
   margin-right: -35px !important;
}

.company-logo .nav-item {
  margin-left: 5px;
  margin-right: 5px;
}

.hero-hd {
  font-size: 24px;
  margin-bottom: 1.5rem;
  line-height: 41px;
}

.banner {
  min-height: 400px;
}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 767px)
{
  .off-mob
  {
    display: none !important;
  }
 
.on-mob
{
  display: block;
}
.logo
{
  height: 60px;
}

.hdr-top
{
  font-size: 20px;
  letter-spacing: 0;
  line-height: 22px;
}

.logo-txt
{
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 700;
}

.enq-btn {
  padding: 10px 0 0 0;
}

.logo-div
{
  margin-top: -20px !important;
}
.bro-mn
{
  flex-wrap: wrap;
  display: flex;
}

.bro-txt, .bro-img
{
  width: 100%;
  text-align: center;
}

.about-img {
  margin-left: 5%;
}
.up-heading
{
  text-align: center;
}
.heading {
  font-size: 33px;
  text-align: center;
  line-height: 45px;
  margin-bottom: 1rem;
}

.heading-sub {
  font-size: 20px;
  text-align: center;
}
.running-txt
{
  font-size: 15px;
}
.hero-btn
{
  text-align: center;
}
.course-card
{
  width: 100% !important;
}
.course-sec .carousel-controls {
  right: 0;
  bottom: -15px;
  z-index: 1;
  left: 0;
  margin: auto;
  position: static;
}
.course-sec .carousel-controls button {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: -8%;
}

.course-sec {
  padding-top: 50px;
  padding-bottom: 50px;
}

.hero-section::after
{
  z-index: 1 !important;
}
.hero-section .container {
  position: relative;
  z-index: 2 !important;
}
.bro
{
  z-index: 3 !important;
}

.why-title
{
  margin-top: 60px;
}

.teacher .carousel-controls {
  margin-top: 0;
}
.teacher .carousel-controls button
{
  margin-left: 7px !important;
   margin-right: 7px !important;
}

.section-container
{
  padding-bottom: 50px;
}

.company-logo .nav-item {
  margin-left: 5px;
  margin-bottom: 10px;
  margin-right: 5px;
}

.newsletter-txt
{
  text-align: center;
}

.copy-txt, .social-icon-ftr
{
  text-align: center;
  width: 100%;
  margin: 10px 0 0;
}

.newsletter-input
{
  width: 40%;
}

.hero-txt
{
  text-align: center;
}
.hero-hd {
  font-size: 25px;
  line-height: 35px;
}
.hero-txt-img {
  margin-top: 0%;
  margin-bottom: 5%;
}
.banner.b2 { z-index: 850; background:#004879 ; }
  .banner.b3 { z-index: 900; background: #4d386f  }

  /* Normal banner styles for banner4 (just scrolls normally) */
  .banner.b4 { background:#005d63   }


}

/* ----- for nav -----*/

@media screen and (max-width: 1199px) {

  .nav-section
  {
    position: absolute;
    left: 0;
    top: 0;
    min-height: 100vh;
    width: 100%;
  }

 .menu-content.close
  {
    background: #001a2cb7;
    height: 100vh;
  }
  .menu-content.open
  {
    position: fixed;
    background: #001a2cb7;
    height: 100vh;
    z-index: 9999;
  }

  .menu__item a
  {
    background: none !important;
    color: #fff !important;
  }
  .menu__sub-menu__item a
  {
    background: var(--Secondary-color) !important;
    font-size: 16px;
  }

 .menu__item a .arrow::before {
  border: solid #fff !important;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
  border-width: 0 2px 2px 0 !important;
  display: inline-block;
  padding: 2px;
  content: '';
}

}