@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Roboto",  sans-serif;
  --nav-font: "Roboto",  sans-serif;
}
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #3b5353; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #193838; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #0C71B7; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #373C44;  /* The default color of the main navmenu links */
  --nav-hover-color: #0C71B7; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #3b5353; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #0C71B7; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f0f6f5;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #031a1a;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #0f302f;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}



body {
  color: #494F5D;
  background-color: #ffffff;
  font-family: "Roboto", sans-serif;
}

a {
  /*color: #ffffff;*/
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, #0C71B7, transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 	
   font-family: "Roboto", sans-serif;
   font-weight: 700;
}


/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  background-color: rgba(255, 255, 255, 0);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 500;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  padding: 8px 16px;
  margin: 0  0 0 20px;
  border-radius: 4px;
  transition: 0.3s;
  font-family: Poppins;
font-weight: 600; 
font-size: 16px; 
line-height: 24px; 
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.header-bg{
  background: #ffffff !important;
}

@media (max-width: 1200px) {
/*  .header .logo {
    order: 1;
  }*/

  .header .btn-getstarted {
    /*order: 2;*/
    margin: 0  0 0 15px;
    padding: 6px 20px;
  }

  .header .navmenu {
    order: 3;
  }
}

@media (max-width: 991.98px) {
  .header {
     background-color: #0062b4;
     height: 67px;
    }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: #ffffff;
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: #ffffff;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1024px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }

  .btn-courses{
    margin-left: 20px;
  }

  .btn-courses .dropdown ul {
    margin: 0;
    padding: 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 0px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 16px;
    z-index: 99;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.btn-courses .dropdown   ul > li > a:hover{
	background: #E0EFFF;
}
.btn-courses .dropdown   ul > li > a.active{
  background: #E0EFFF;
  color: #0c71b7;
}



}

.mobile-nav-toggle {
display: none;
}

/* Navmenu - Mobile */
@media (max-width: 1023px) {


  .mobile-nav-toggle {
    display: block;
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}
@media (max-width: 767.98px) {
    .mobile-nav-toggle {
        color: #ffffff; 
    }

    .btn-courses{
      display: none;
    }
}


.btn-courses .dropdown .courseBtn{
	background: #EFF6FF;
	border: 1px solid #0C71B7;
	border-radius: 8px;
	padding: 6px 15px;
	margin: 15px 0px;
}

.btn-courses .dropdown li a{
	padding: 18px 25px;
}


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/* Default (Desktop First) */
.hero {
  width: 100%;
  /*min-height: 90vh;*/
   padding: 60px 0;
  position: relative;
  display: flex;
  align-items: center;
  background: url(../images/hero-bg.jpg) center bottom no-repeat;
  background-size: cover;
  margin-top: 100px;
}
 

/* Mobile (for screens up to 768px) */
@media (max-width: 1200px) {
  .hero {
    padding: 60px 0;
    margin-top: 65px;  
  }
}
@media (max-width: 768px) {
  .hero {
    background: url("../images/bg-bottom-mob.svg") center bottom no-repeat;
    background-size: cover;
     padding: 0px 0;
     margin-top: 65px;
  }
}



.hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  font-family: Poppins;
font-weight: 600; 
font-size: 40px; 
line-height: 55px; 
text-transform: capitalize;
color: #fff;
margin-bottom: 24px;
}

.hero p {
  color:  var(--default-color);
  margin: 5px 0 42px 0;
  font-size: 20px;
  font-weight: 400;
  font-family: Poppins;
font-size: 20px;
line-height: 34px;
text-transform: capitalize;

}

 
.heroImgPosition{
  position: absolute;
  bottom: 0px;
  right:10%;
}
.hero .btn-get-started {
  color: var(--accent-color);
  background: var(--contrast-color);
  font-family: var(--heading-font);
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 12px 28px;
  border-radius: 10px;
  transition: 0.5s;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);

  font-family: Roboto;
font-weight: 700;
font-size: 16px;
line-height: 24px;

}

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  color: var(--default-color);
  font-weight: 600;
}

.hero .btn-watch-video i {
  color: var(--accent-color);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover {
  color: var(--accent-color);
}

.hero .btn-watch-video:hover i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}
 

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}


.hero .hero-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 60px;
}

.hero .hero-stats .stat-item {
  text-align: center;
  border-left: 1px solid #fff;
  padding: 0px 30px;
}
.hero .hero-stats .stat-item:first-child {
  border-left: none;
  padding-left: 0px;
}

.hero .hero-stats .stat-item .stat-number {
  display: block;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 4px;
  font-family: Poppins;
font-weight: 700;
font-size: 24px;
line-height: 36px;
}

.hero .hero-stats .stat-item .stat-label {
  color: #ECEEF1;
  text-transform: uppercase;
  font-family: Poppins;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;

}

.symbol-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 30px;
}
.symbol-group.symbol-hover .symbol {
    cursor: pointer;
}
.symbol-group .symbol {
    position: relative;
    z-index: 0;
    margin-left: -15px;
    border: 2px solid #fff;
    transition: all .3s ease;
}
.symbol.symbol-circle, .symbol.symbol-circle .symbol-label, .symbol.symbol-circle>img {
    border-radius: 50%;
}
.symbol {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    border-radius: .95rem;
}

 .symbol.symbol-25px>img {
    width: 30px;
    height: 30px;
}

.symbol.symbol-circle>img {
    border-radius: 50%;
}

.symbol>img {
    width: 100%;
    flex-shrink: 0;
    display: inline-block;
    border-radius: .95rem;
}
.st_us{
    color: #fff;
    margin-left: 30px;
    font-family: Roboto;
font-weight: 400; 
font-size: 16px; 
line-height: 24px; 
text-transform: capitalize;

}

.mb-lbl{
  display: none;
}

@media (max-width: 767.98px) {
   .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 15px;
  }

  .hero {
    padding-top: 20px;
    padding-bottom: 150px;
  }
  .hero-stats{
    display: none !important;
  }
  .mb-lbl{
    display: block;
  }

  .mb-lbl{
    margin-top: 10px;
  }

  .lbl-span{
    margin-top: 8px;
    color: #fff;
    position: relative;
    padding-left: 22px;
  }

  .lbl-span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background: url(../images/check_white.svg) no-repeat center center;
    background-size: contain;
}

 .symbol-group { 
      margin-left: 20px;
  }

 /* .hero .hero-stats {
    display: block; 
    margin-top: 20px;
  }
  .stat-item{
    text-align: left !important;
    display: flex;
    align-items: center;
  }

  .hero .hero-stats .stat-item{
    padding: 0px 0px;
  }*/

}

 

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding-top: 40px;
  padding-bottom: 40px;
}

.clients .clients-slider {
 padding: 10px;
}

.clients .swiper-wrapper {
  height: auto !important;
  align-items: stretch;
  transition-timing-function: linear;
}

.clients .swiper-slide {
  height: auto; 
}

.clients .swiper-slide:last-child {
  border-right: none;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 20px;
  height: 100%;
  box-shadow: 1px 1px 14px 0px #00000014;
  border-radius: 20px;
  background: #ffffff;
}

.clients .client-logo img {
  max-width: 90%;
  transition: 0.3s;
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 767.98px) {
  .clients { 
  padding-bottom: 20px;
}
}

@media (max-width: 640px) {
  .clients .client-logo {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# why choose our training Section
--------------------------------------------------------------*/
.section-title h2{
  font-family: Roboto;
font-weight: 600; 
font-size: 30px;
text-transform: capitalize;
margin-bottom: 40px;
color: #373C44;

}

.why_choose_our_training{
  padding: 60px 0px;
  background: #F8FAFF;
}

.why_choose_our_training .wcotCard{
  box-shadow: 0px 4px 32px 0px #54637A1A;
  padding: 30px;
  border-radius: 16px;
  background: #ffffff;
  height: 100%;
}


 
.imgcircle{
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background: #EAF1FF;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.why_choose_our_training .wcotCard h4{
font-family: Roboto;
font-weight: 500; 
font-size: 20px;
line-height: 20px;
text-transform: capitalize;
color: #373C44;
}

.why_choose_our_training .wcotCard p{
font-family: Roboto;
font-weight: 400;
font-style: Regular;
font-size: 16px; 
vertical-align: middle;
}

@media (max-width: 767.98px) {

  .why_choose_our_training{
    padding: 30px 0px; 
  }

  .why_choose_our_training .wcotCard{
    box-shadow: none;
    padding: 15px;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    border: 1px solid #C1D5EC;
    align-items:start;
  }
 

 .imgcircle{
    padding: 15px;
    border-radius: 8px;
    background: #EAF1FF;
    margin-bottom: 0px;
    margin-right: 10px;
    display: inline-block;
  }

  .why_choose_our_training .wcotCard h4{ 
    font-family: Roboto;
    font-weight: 600; 
    font-size: 14px; 
    line-height: 22px; 
    text-transform: capitalize;
    color: #373C44;
  }



  .why_choose_our_training .wcotCard p{
    font-family: Roboto;
    font-weight: 400; 
    font-size: 14px; 
    line-height: 22px; 
    text-transform: capitalize;
    color: #494F5D;
  }



}


/*--------------------------------------------------------------
# SAP Courses Section
--------------------------------------------------------------*/

.SAPcourses{
 padding: 60px 0px;
  background: #FFFFFF;
  overflow: hidden;
}

.SAPcourses .sapCard{
  border: 1px solid #D8DADD;
  padding: 16px;
  border-radius: 8px;
  background: var(--background-color);
}

.SAPcourses .sapCard img{
  border-radius: 8px;
}

.SAPcourses .cert{
  display: flex;
  justify-content: space-between;
  margin: 15px 0px;
  align-items: center;
}

.SAPcourses .cert .certificate{
 background: #EDF6FF;
border: 1px solid #D5E7FA;
padding:6px 10px;
color: #0277C7;
font-family: Roboto;
font-weight: 600;
font-size: 14px;
text-transform: capitalize;
border-radius: 6px;
display: flex;
align-items: center;
}

.SAPcourses .cert .certificate img{
  margin-right: 4px;
}

.SAPcourses .cert .rating{
 background: #FFFAEA;
border: 1px solid #F7ECCA;
padding:6px 10px;
color: #373C44;
font-family: Roboto;
font-weight: 600;
font-size: 14px;
text-transform: capitalize;
border-radius: 6px;
display: flex;
align-items: center;
}

.SAPcourses .cert .rating img{
  margin-right: 4px;
}
.SAPcourses .sapCard h4{
font-family: Poppins;
font-weight: 600;
font-size: 18px; 
text-transform: capitalize;
color: #373C44;
margin-bottom: 20px;
}

.SAPcourses .sapCard h4 small{
font-family: Poppins;
font-weight: 600;
font-size: 12px; 
text-transform: capitalize;
color: #373C44;
margin-bottom: 20px;
}

.SAPcourses .sapCard .sapDetails{
font-family: Roboto;
font-weight: 500; 
font-size: 14px; 
line-height: 20px; 
text-transform: capitalize;
color: #494F5D;
display: flex;
align-items: center;
margin-bottom: 10px;
}

.SAPcourses .sapCard .sapDetails img{
  margin-right: 4px;
}


.SAPcourses .sapCard .btn-view-program {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--accent-color);
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid var(--accent-color);
}

.SAPcourses .sapCard .btn-view-program span {
  margin-right: 8px;
}

.SAPcourses .sapCard .btn-view-program i {
  transition: transform 0.3s ease;
}

.SAPcourses .sapCard .btn-view-program:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
  color: var(--contrast-color);
}

.SAPcourses .sapCard .btn-view-program:hover i {
  transform: translateX(5px);
}


.SAPcourses .sapCard .btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 12px 24px;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid var(--accent-color);
  font-family: Roboto;
font-weight: 600;
font-size: 16px;
line-height: 24px;
text-transform: capitalize;

}

.SAPcourses .sapCard .btn-download span {
  margin-right: 8px;
}

.SAPcourses .sapCard .btn-download i {
  transition: transform 0.3s ease;
}

.SAPcourses .sapCard .btn-download:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
  color: var(--contrast-color);
}


.SAPCourses_slider {
  overflow: visible; /* Show overflow */
  position: relative;
}

.SAPCourses_slider .swiper-nav {
 
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: end;
    position: relative;
    height: 50px;
    --swiper-navigation-size: 20px;
}

.SAPCourses_slider .swiper-button-prev, 
.SAPCourses_slider .swiper-rtl .swiper-button-next {
    left: auto !important;
    right: 50px !important;
    margin-right: 60px;
}

.SAPCourses_slider .swiper-button-next, 
.SAPCourses_slider .swiper-rtl .swiper-button-prev {
    right: auto !important;
    left: auto !important;
    margin-left: 60px;
}

.SAPCourses_slider .swiper-button-prev,
.SAPCourses_slider .swiper-button-next {
  display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
        width: 45px;
    height: 45px;
    background-color: var(--contrast-color);
    color:#6E6E73 ;
    font-size: 20px;
    transition: all 0.4s;
    margin-right: 10px;
    box-shadow: 0px 1px 4px 0px #0000001F;

}

 
.SAPCourses_mob{
  display: none;
}
@media (max-width: 767.98px) {

  .SAPcourses .courses-swiper-nav{
    display: none;
  }
  .SAPcourses{
 padding: 20px 15px;}
 
 
    /* Reset swiper flexbox */
    .SAPCourses_slider .swiper-wrapper {
        display: block !important;
        transform: none !important;
      height: auto;
    }

    .SAPCourses_slider .swiper-slide {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* Hide arrows & pagination */
    .SAPCourses_slider .swiper-button-next,
    .SAPCourses_slider .swiper-button-prev,
    .SAPCourses_slider .swiper-pagination {
        display: none !important;
    }
}



/*--------------------------------------------------------------
# solution Section
--------------------------------------------------------------*/

.solution-section {
  padding: 60px 0;
  background: #F7F9FC;
}

.solution-section h2 {
  margin-bottom: 20px;
  font-family: Roboto;
  font-weight: 700;
  font-size: 32px;
  line-height: 44px;
  color: #373C44;

}

.solution-section p {
  margin-bottom: 30px;
  color: #494F5D;
  font-family: Roboto;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 25px;
letter-spacing: 0%;

}

.solution-nav {
  display: flex;
  gap: 15px;
  --swiper-navigation-size: 20px;
}

/*.solution-nav .swiper-button-prev,
.solution-nav .swiper-button-next {
  position: relative;  
  width: 48px;
  height: 48px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #333;
}*/

.solution-nav .swiper-button-prev,
.solution-nav .swiper-button-next {
 display: flex;
  align-items: center;
  justify-content: center;
  position: relative; 
  border-radius: 50%;
  width: 45px;
    height: 45px;
    background-color: var(--contrast-color);
    color:#6E6E73 ;
    font-size: 25px;
    transition: all 0.4s;
    margin-right: 15px;
    border: 1px solid #ddd;

}

 
.solution-nav .swiper-button-next:after, 
.solution-nav .swiper-button-prev:after{
  display: none;
}
.solution-slider {
  width: 100%;
  max-width: 500px;
  box-shadow: 0px 0px 12px 0px #0000001F;
  border-radius: 10px;
}

.solution-slider .swiper-slide img{
  border-radius: 10px;
  box-shadow: 0px 0px 12px 0px #0000001F;
}
 
@media (min-width: 768px) {
 
.swiper-pagination-bullet{display: none;}
}


@media (max-width: 767.98px) {
  .solution-nav{
    display: none;
  }
}

/*--------------------------------------------------------------
# image Collage Section
--------------------------------------------------------------*/

.imageCollage {
  padding: 60px 0;
  background: #FFFFFF;
}

.imageCollage h2 {
  margin-bottom: 20px;
  font-family: Roboto;
  font-weight: 700;
  font-size: 32px;
  line-height: 44px;
  color: #373C44;

}

.imageCollage p {
  margin-bottom: 30px;
  color: #494F5D;
  font-family: Roboto;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 25px;
letter-spacing: 0%;

}

/*--------------------------------------------------------------
# solution team Section
--------------------------------------------------------------*/

.solution-team {
  padding: 70px 0; 
  background: #F7F9FC;
  position: relative;
  overflow: hidden;
}

.solution-team h2 {
 
 
  color: #373C44;

  font-family: Roboto;
font-weight: 700; 
font-size: 32px; 
line-height: 48px; 

}

.solution-team p {
  color: #494F5D; 

  font-family: Roboto;
font-weight: 400; 
font-size: 16px; 
line-height: 28px; 
}

.solution-team ul li{ 
font-weight: 700; 
font-size: 24px;  
}

.team-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.team-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.team-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 15px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #fff;
}

.team-info h5 {
  margin: 0;
  font-family: Roboto;
  font-weight: 600; 
  font-size: 16px; ;
  line-height: 24px; 
  color: #ffffff;
}

.team-info p {
  margin: 0;
  color: #CDCDCD;
  line-height: 1.6;
  font-family: Roboto;
  font-weight: 400; ;
  font-size: 14px; 
  line-height: 20px; 
}
 

/* Responsive */
@media (max-width: 991px) {
  /*.solution-team {
    text-align: center;
  }*/
  .solution-team h2 {
    margin-top: 20px;
  }
  .team-info {
    text-align: left;
  }
}
@media (max-width: 767.98px) {

 .team_slider {
    padding: 0px !important; 
    width: 85%;
    overflow: visible;
  }

  .imageCollage {
    padding: 30px 0; 
  }

  .solution-team {
    padding: 30px 0; 
  }

}

/*--------------------------------------------------------------
# testimonials Section
--------------------------------------------------------------*/

.testimonials {
  padding: 60px 0;
  background: #fff;
  overflow: hidden;
}
 
.testimonial-card {
  background: #fff;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0px 4px 8px 0px #0000001F;
  height: 100%;
  position: relative;
}

.testimonials .swiper-slide { 
    height: auto; 
}

.testimonial-slider{
  padding: 10px;
   overflow: visible; /* Show overflow */
  position: relative;
}

.testimonial-card .quote {
  font-size: 40px;
  color: #a3b3ff;
  display: block;
  margin-bottom: 15px;
}

.testimonial-card p {
  color: #494F5D;  
  font-family: Poppins;
font-weight: 400; 
font-size: 14px; 
line-height: 22px; 
}

.testimonial-card hr {
  margin: 20px 0;
  border-top: 1px solid #d2d2d2;
}

.testimonials .author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonials .author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonials .author h5 {
  margin: 0;  
  font-family: Poppins;
font-weight: 600; 
font-size: 16px; 
line-height: 24px; 
color: #373C44;
}

.testimonials .author small {
  color: #494F5D;
  font-family: Poppins;
font-weight: 400; 
font-size: 14px; 
line-height: 20px; 
}



.testimonials .swiper-button-prev {
  right: 70px; /* just left of next button */
  left: auto;
}

.testimonials .swiper-button-next {
  right: 10px; /* align to right edge */
}

.testimonials .swiper-button-next::after,
.testimonials .swiper-button-prev::after {
  font-size: 16px;
  color: #333;
}

@media (max-width: 767.98px) {

  .testimonials {
  padding: 30px 0;}

  .testimonials h2{
    padding-left: 20px;
  }

.testimonial-slider .swiper-nav {
    display: none;
  } 

 .testimonial-slider {
    padding: 0px !important; 
    width: 85%;
  }

  .testimonial-swiper-nav{
    display: none;
  }

}

/*--------------------------------------------------------------
# articles Section
--------------------------------------------------------------*/
.articles-section {
    background-color: #f8fafc;
    padding: 60px 0;
    overflow: hidden;
  }

.articles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
  }

 
 

.articles-section .swiper-button-next::after,
.articles-section .swiper-button-prev::after {
    font-size: 16px;
    font-weight: bold;
  }

.articles-section .article-card {
    border: 1px solid #D8DADD;
    padding: 16px;
    border-radius: 8px;
    background: var(--background-color);
  }

.articles-section .article-card img {
    border-radius: 8px;
}

.articles {
  overflow: visible; /* Show overflow */
  position: relative;
}

.articles-section .article-card .card-img-top {
    height: 200px;
    object-fit: cover;
  }

.articles-section .article-meta {
    color: #64748b;
    margin-bottom: 5px;
    font-family: "Roboto",  sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    padding: 10px 0px;
    text-transform: capitalize;
    color: #6B7280;
  }

.articles-section .card-title {
    font-family: "Roboto",  sans-serif;
    font-weight: 600; 
    font-size: 22px; 
    line-height: 28px; 
    margin-bottom: 15px;
    color: #373C44;
  }

.articles-section .card-text{
  font-family: "Roboto",  sans-serif;
font-weight: 400;
font-style: Regular;
font-size: 16px; 
line-height: 24px; 
color: #494F5D;
}


.articles-section .text-muted{
  font-family:"Roboto",  sans-serif;
font-weight: 600; 
font-size: 14px; 
line-height: 22px; 
color: #6B7280;
}

@media (max-width: 767.98px) {
  .articles-section { 
    padding: 30px 0;}

  .articles-section h2{
    padding-left: 20px;
  }

.articles-section .article-swiper-nav {
    display: none;
  }
 
     .articles  {
        padding: 0px; 
        width: 85%;
    }

}

/*--------------------------------------------------------------
# expert banner Section
--------------------------------------------------------------*/

.expert-banner {
  background: linear-gradient(186.16deg, #459BD8 -5.83%, #063781 98.13%);
  border-radius: 24px;
  color: #fff;
  /*padding: 40px 50px;*/
  overflow: hidden;
  position: relative;
}

.expert-banner h4 {
  margin-bottom: 30px;
  font-family: "Roboto",  sans-serif;
font-weight: 600; 
font-size: 24px; 
line-height: 36px; 
text-transform: capitalize;
color: #ffffff;

}
.expert-banner h4 span{
  color: #D1DFFF;
}
.expert-btn {
  background: #fff;
  color: #0b4dbf;
  border: none;
  border-radius: 30px;
  padding: 15px 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: Roboto;
font-weight: 700; 
font-size: 16px; 
line-height: 20px; 
text-transform: capitalize;

}
.expert-btn i {
  transition: transform 0.3s ease;
  font-size: 20px;
}
.expert-btn:hover {
  background: #f1f5f9;
  color: #0b4dbf;
  text-decoration: none;
}

.expert-btn:hover i {
  transform: translateX(5px);
}

.expert-illustration img {
  max-width: 100%;
  height: auto;
}

.expertImg_D{
  position: absolute;
    right: 0;
    bottom: 0px;
}


@media (max-width: 1199.98px) {
  .expertImg_D{
  position: absolute;
    right: -100px;
    bottom: 0px;
}
}
@media (max-width: 768px) {
  .expert-banner {
    text-align: center;
    padding: 30px 25px;
  }
  .expert-banner h4 {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }
  .expert-banner{
    margin: 0px 10px;
  }
}

@media (max-width: 991.98px) {
    .expert-banner {
        text-align: left;
        padding: 20px 0px 20px 10px;
    }
    .expert-banner { 
    border-radius: 16px;
  }
  .expert-banner h4 {
    margin-bottom: 20px; 
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;}

    .expert-btn { 
  border-radius: 30px;
  padding: 10px 15px; 
  gap: 4px;  ; 
font-size: 14px; 
line-height: 20px;  

}
.expert-btn i { 
  font-size: 15px;
}

.expertImg{    
  position: absolute;
    right: 0;
    bottom: 0px;
  }

}
/*--------------------------------------------------------------
# footer Section
--------------------------------------------------------------*/

footer {
  background-color: #073b5c;
  color: #ffffff;
  padding: 60px 0 20px;
}

.footer-logo {
  /*font-size: 1.8rem;*/
  /*font-weight: 600;*/
/*  display: flex;
  align-items: center;*/
  /*gap: 8px;*/
  margin-bottom: 20px;
}

.footer-logo img{
  margin-bottom: 5px

}

/*.footer-logo img {
  height: 40px;
}*/

.footer-about {
  max-width: 320px; 
  margin-bottom: 25px;
  font-family: Poppins;
  font-weight: 400; 
  font-size: 16px; 
  line-height: 24px; 

}

.footer-social a {
  /*display: inline-flex;*/
  align-items: center;
  /*justify-content: center;*/
  margin-right: 10px; 
  border-radius: 6px;
  color: #ffffff;
  font-size: 16px;
  text-decoration: none;
  transition: 0.3s;
}

.footer-social a:hover {
  color: #073b5c;
  transform: translateY(-5px);
}

.footer-links a {
  display: block;
  color: #E5E7EB;
  text-decoration: none;
  margin-bottom: 8px;
  transition: 0.3s;
  font-family: Poppins;
font-weight: 400; 
font-size: 14px; 
line-height: 22px; 

}

.footer-links a:hover {
  color: #ffffff;
}

.footer-title { 
  margin-bottom: 15px;
  font-family: Poppins;
font-weight: 700; 
font-size: 14px; 
line-height: 22px; 

}
.footer-contact p{
  

}
.footer-contact p,
.footer-contact a {
  margin: 0 0 8px;
  color: #ffffffcc;
  text-decoration: none;
  display: flex;
  font-size: 0.95rem;

  font-family: Poppins;
font-weight: 400; 
font-size: 14px; 
line-height: 22px; 

}

.footer-bottom {
  border-top: 1px solid transparent;
border-image: linear-gradient(90deg, #152548, #FFFFFF, #152548) 1;
  margin-top: 40px;
  padding-top: 25px; 
  text-align: center;
  color: #ffffffaa;
  font-family: Poppins;
  font-weight: 400; 
  font-size: 16px; 
  line-height: 24px;  
}

.fhwys{
  display: none;
}

@media (max-width: 768px) {

footer{
  padding-left: 10px;
  padding-right: 10px;
}

.footer-about{
    display: none;
  }

.linehr{
    height: 2px;
    background: linear-gradient(90deg, #477493 0%, rgba(71, 116, 147, 0) 100%);
    border: none;
    margin-bottom: 15px;
}

.fhwys{
  display: block;
  font-family: Roboto;
  font-weight: 500; 
  font-size: 16px; 
  line-height: 22px; 
  text-transform: capitalize;
  color: #E5E7EB;
  }

}

#whats-chat {
  position: fixed;
  right: 15px;
  bottom: 10%;
  height: auto;
  width: auto;
  border-radius: 6px;
  z-index: 1000;
  transition: 0.3s;
  font-family: Roboto;
font-weight: 600; 
font-size: 14px;  

}
#whats-chat:hover {
  cursor: pointer;
  bottom: 11%;      
  transition: 0.2s all ease-in-out;
 
}
.whatsChat{z-index: 1000;}
/* Customize tooltip background color */
.tooltip-inner {
  background-color: #25d366 !important; /* Change this to your desired color */
  color: #fff; /* Change this to your desired text color */
}
.bs-tooltip-start .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #25d366;
}



.card-box {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  /*padding: 20px;*/
  margin-bottom: 20px;
  background: #fff;
  width: 100%;
}
.card-box h5 {
  font-weight: 600;
  margin-bottom: 20px;
}

.card-box-inner {
  border-bottom: 1px solid #e5e5e5;
  /*border-radius: 12px;*/
  padding: 20px; 
 
}

.card-box-heading {
  border-bottom: 1px solid #e5e5e5;
  /*border-radius: 12px;*/
  padding: 15px 20px; 
 
}

.card-box-heading h5{
    margin-bottom: 0px;
    font-family: Roboto;
    font-weight: 600; 
    font-size: 18px;  
    text-transform: capitalize;
    color: #373C44;

}
.check-list {
    padding-left: 0px;
}
.check-list li {
  margin-bottom: 10px;
  list-style: none;
  position: relative;
  padding-left: 28px;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px; /* align vertically */
  width: 18px;
  height: 18px;
  background: url("../images/check_small.svg") no-repeat center center;
  background-size: contain; /* makes it scale properly */
}
.skills span,
.tools span {
  display: inline-block;
  background: #ffffff;
  border-radius: 6px;
  padding: 6px 14px;
  margin: 5px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 500;
  text-transform: capitalize;
  color:  #494F5D;
  border: 1px solid #E5E7EB
}

.skills span::first-child,
.tools span::first-child{
   margin-left: 0px; 
}
.highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 400;   

}
.highlight-item i {
  color: #0d6efd;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.info-item i {
  font-size: 20px;
  color: #0d6efd;
}

@media (max-width: 1200px) {
  .heroImgPosition{
    width: 360px;
    right:0px;
    /*top: 20%;*/
  }
}

@media (max-width: 1024px) {
.heroImgPosition{
    width: 360px;
    right: 0px;
    /*top: 20%;*/
  }
}

@media (max-width: 991.98px) {
.heroImgPosition{
    width: 300px;
    right: 0px;
    /*top: 40%;*/
  }
}

@media (max-width: 767.98px) {
  .card-box{
    border: none;
  }

  .heroImgPosition{
    width: 200px;
    right: 0px;
    top: auto;
    bottom: 40px !important;
  }
 

  .M_keyHighlights{
    background: #F7F9FC;
  }

  .M_keyHighlights .card-box-inner{
      border:none;
    }
 

  .M_keyHighlights .card-box-heading{
    border:none;
  }

  .mb_borderNone{
    border:none;
  }

  .M_OnCampus{ 
    border: 1px solid #e5e5e5;
    border-radius: 12px; 
    margin-bottom: 20px;
    margin-top: 25px;
  }

  .M_OnCampus .card-box-inner{
      border:none;
    } 


}


/*--------------------------------------------------------------
# courses Section
--------------------------------------------------------------*/

.courses {
    background: #f9fbfd;
    padding: 50px 0px;
    position: relative;
  }
.courses .course-box { 
  box-shadow: 0px 0px 4px 0px #0000001F;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
  }
.courses .locked {
    position: relative;
    overflow: hidden;
  }
.courses .locked::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.7);
    z-index: 2;
  }
.courses .locked-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 20px;
        margin-top: -75px;
  }

.courses .locked-content p{
  font-family: Roboto;
font-weight: 600; 
font-size: 16px; 
line-height: 24px; 
text-transform: capitalize;
color: #373C44;
display: flex;
align-items: center;
justify-content: center;
color: #373C44;
}

.courses .locked-content small{
  font-family: Roboto;
font-weight: 500; 
font-size: 14px; 
line-height: 22px; 
text-align: center;
text-transform: capitalize;
color: #494F5D;
}
.courses .locked-content .btn {
    margin-top: 10px;
  }
.courses .course-header {
    margin-bottom: 20px;
    font-family: Roboto;
  font-weight: 600; 
  font-size: 24px; 
  line-height: 42px; 
  color: #4B444D;
  }
.courses .course-header h4 {
    font-weight: 600;
  }
.courses .course-meta {
    font-size: 14px;
    color: #666;
  }
.courses .course-meta span {
 font-family: Roboto;
font-weight: 500; 
font-size: 14px;   
text-align: center;
vertical-align: middle;
color: #494F5D;
  }
.courses .accordion-button:focus {
    box-shadow: none;
  }

 
 .courses .accordion-item{
    border-top: none;
    border-left: none;
    border-right: none;
  }

.courses .accordion-button:not(.collapsed) { 
    background-color: #ffffff;
    box-shadow:none
   }

.courses .accordion-body{
  padding-top: 0px;
}

.courses .module_no{
  font-family: Roboto;
font-weight: 400; 
font-size: 16px; 
line-height: 24px; 
text-transform: capitalize;
color: #494F5D;
margin-bottom: 4px;
}

.courses .accordion-button strong{
  font-family: Roboto;
font-weight: 500; 
font-size: 18px; 
line-height: 28px; 
text-transform: capitalize;
color: #373C44;
}


.btn-unlock,
.btn-unlock:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  padding: 10px 50px; 
  border-radius: 8px;
  transition: 0.3s;
  font-family: Roboto;
font-weight: 600; 
font-size: 16px; 
line-height: 24px; 
text-transform: capitalize;
border :none;
}

.btn-unlock:hover,
.btn-unlock:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}
 
.img-courses{
  position: absolute;
  bottom: 0;
  right: 10%;
  width: auto;
}
 
@media (max-width: 1200px) {
  .img-courses{ 
    right: 0%; 
  }
}

@media (max-width: 991.98px) {
  .img-courses{
    display: none;
  }
}
 
@media (max-width: 767.98px) {

  .courses { 
    padding: 20px 0px;
  }

  .courses .course-box {
    box-shadow: none; 
    padding: 0px; 
}
 .courses .accordion{
  border-radius: 12px;
  border: 1px solid #D9D9D9;
  overflow: hidden;
    }

}


.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px 10px;
}
.comparison-table th,
.comparison-table td {
  padding: 24px;
  text-align: center;
  background: #F7F9FC;
  border-radius: 16px;
  font-family: Roboto;
font-weight: 500; 
font-size: 18px; 
line-height: 28px; 
color: #373C44;
text-transform: capitalize;
}
.courseType{
font-family: Roboto;
font-weight: 600 !important; 
font-size: 20px !important;   
color:#4B444D !important;
background: #ffffff !important;
line-height: 28px !important;
}
.comparison-table th:first-child,
.comparison-table td:first-child {
  text-align: left;
}
.comparison-table th {
  font-weight: 600;
  background: #f1f4fb;
}
.checkmark {
  color: #0066cc; /* blue check */
  font-size: 18px;
  font-weight: bold;
}
.bg-none{
  background: none !important;
}



.industry-certificate h4{
font-family: Roboto;
font-weight: 700; 
font-size: 32px;   
margin-bottom: 30px;
color: #373C44;
}

.industry-certificate p{
font-family: Roboto;
font-weight: 400; 
font-size: 18px; 
line-height: 28px; 
color: #494F5D;
}

.job-assistance{
  background: #F7F9FC;
  padding: 45px 0px;
}
.job-assistance h4{
font-family: Roboto;
font-weight: 700; 
font-size: 24px;  
color: #373C44;
}

.job-assistance p{
font-family: Roboto;
font-weight: 400; 
font-size: 18px; 
line-height: 28px;
color: #494F5D; 
margin-bottom: 30px;
}


.careers-list{
  list-style: none;
  margin:0px;
  padding-left: 0px;
}

.careers-list li{
font-family: Roboto;
font-weight: 500; 
font-size: 18px; 
line-height: 38px; 
text-transform: capitalize;
color: #373C44;
}

@media (max-width: 767.98px) {
.industry-certificate h4{
font-weight: 600; 
font-size: 26px;  
color: #373C44;
margin-bottom: 20px;
}


}

/*--------------------------------------------------------------
# learners Section
--------------------------------------------------------------*/
.learners {
    background-color: #FFFFFF;
    padding: 60px 0;
    overflow: hidden;
  }

.learners .learner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
  }

.learners .leader-swiper-nav {
    display: flex;
    gap: 10px;
  }

.learners .swiper-button-next,
.learners .swiper-button-prev {
    position: static;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0f172a;
  }

.learners .swiper-button-next::after,
.learners .swiper-button-prev::after {
    font-size: 16px;
    font-weight: bold;
  }

.learner{
  overflow: visible;
}
.sap-education{
  overflow: visible;
}
.learners .learner-card {
    border: 1px solid #D8DADD;
    border-radius: 8px;
    background: var(--background-color);
    border: 1px solid #D9D9D9;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}


.learners .learner-card .card-img-top {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: block;
    width: 100%;
    height: 300px; 
}
.learners .learner-card a{
  font-family: Roboto;
font-weight: 500; 
font-size: 16px; 
line-height: 24px; 
text-transform: capitalize;
color: #0154AB;
text-decoration: none;
margin-top: 20px;
display: flex;
align-items: center;
transition: transform 0.3s ease;
}

.learners .learner-card a:hover{
  color: #004288; 
}
 .learners .learner-card   .arrow-up-right{
  transition: transform 0.3s ease;
}

.learners .learner-card a:hover .arrow-up-right{
  transform: translateY(-4px);
}

.learners .learner-card .card-body{
  padding: 16px;
}
.learners .learner-card h4{
font-family: Roboto;
font-weight: 600; 
font-size: 20px; 
line-height: 28px; 
text-transform: capitalize;
}

.learners .learner-card p{ 
font-family: Roboto;
font-weight: 400; 
font-size: 16px; 
line-height: 24px; 
margin-bottom: 20px;
}


.learners .learner-card .card-img-top {
    height: 200px;
    object-fit: cover;
  }

.learners .learner-meta {
    color: #64748b;
    margin-bottom: 5px;
    font-family: "Roboto",  sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    padding: 10px 0px;
    text-transform: capitalize;
    color: #6B7280;
  }

.learners .card-title {
    font-family: "Roboto",  sans-serif;
    font-weight: 600; 
    font-size: 22px; 
    line-height: 28px; 
    margin-bottom: 5px;
    color: #373C44;
  }

.learners .card-text{
  font-family: "Roboto",  sans-serif;
font-weight: 400;
font-style: Regular;
font-size: 16px; 
line-height: 24px; 
color: #494F5D;
}


.learners .text-muted{
  font-family:"Roboto",  sans-serif;
font-weight: 600; 
font-size: 14px; 
line-height: 22px; 
color: #6B7280;
}

@media (max-width: 767.98px) {

.learners .leader-swiper-nav {
    display: none;
  }
 
  .learner  {
        padding: 0px; 
        width: 85%;
    }

}

.bg-light-blue{
  background: #F7F9FC;
}



/*--------------------------------------------------------------
# FAQ Section
--------------------------------------------------------------*/

.faq {
    background: #f9fbfd;
    padding: 40px 0px;
    position: relative;
  }
.faq .faq-box { 
  box-shadow: 0px 0px 4px 0px #0000001F;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
  }

.faq .faq-header {
    margin-bottom: 20px;
    font-family: Roboto;
  font-weight: 600; 
  font-size: 24px; 
  line-height: 42px; 
  color: #4B444D;
  }
.faq .faq-header h4 {
    font-weight: 600;
  }

.faq .faq-header p {
font-family: Roboto;
font-weight: 400; 
font-size: 14px; 
line-height: 22px; 
color: #494F5D;
  }
 
.faq .accordion-button:focus {
    box-shadow: none;
  }

 
 .faq .accordion-item{
    border-top: none;
    border-left: none;
    border-right: none;
  }

.faq .accordion-button:not(.collapsed) { 
    background-color: #ffffff;
    box-shadow:none
   }

.faq .accordion-body{
  padding-top: 0px;
  font-family: Roboto;
font-weight: 400; 
font-size: 14px; 
line-height: 22px; 
color: #494F5D;
}

.faq .module_no{
  font-family: Roboto;
font-weight: 400; 
font-size: 16px; 
line-height: 24px; 
text-transform: capitalize;
color: #494F5D;
margin-bottom: 4px;
}

.faq .accordion-button strong{
font-family: Roboto;
font-weight: 500; 
font-size: 16px; 
line-height: 24px; 
text-transform: capitalize;
color: #373C44;
}

.img-faq{
  position: absolute;
  bottom: 0;
  right: 15%;
  width: auto;
}
 
@media (max-width: 1200px) {
  .img-faq{ 
    right: 8%; 
  }
}

@media (max-width: 991.98px) {
  .img-faq{
    display: none;
  }
}

@media (max-width: 767.98px) {
  .faq .faq-box {
    box-shadow: none; 
    padding: 0px; 
}
 .faq .accordion{
  border-radius: 12px;
  border: 1px solid #D9D9D9;
  overflow: hidden;
    }


}

.lbl_text{
font-family: Roboto;
font-weight: 400; 
font-size: 16px; ;
line-height: 24px; 
text-transform: capitalize;
color: #ffffff;
margin-bottom: 20px;
}

.lbl_text strong{
  font-family: Roboto;
font-weight: 600; 
font-size: 16px; 
line-height: 24px; 
text-transform: capitalize;
color: #EAF4FF;
}

/*--------------------------------------------------------------
# course Hero Section
--------------------------------------------------------------*/
/* Default (Desktop First) */
.course_hero {
  width: 100%;
  /*min-height: 90vh;*/
   padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  background: url(../images/hero_course.jpg) center bottom no-repeat;
  background-size: cover;
  margin-top: 100px;
}
 

 .offline{display: none;}

 .nmt100{margin-top:-100px;}

/* Mobile (for screens up to 768px) */
@media (max-width: 1200px) {
  .course_hero {
    padding: 60px 0;
    margin-top: 67px;
  }
}
@media (max-width: 767.98px) {
 
  .course_hero{    
    margin-top: 40px;
    padding-bottom: 20px;
  }

  .offline{
    display: block;
    margin-bottom: 15px;
  }
   .offline span{
    border-radius: 6px;
    padding: 4px 6px;
    background: #FFFFFF3D;
    color: #fff;
    margin-right: 6px;
   }
}

.z-index1{
  z-index: 1;
}
.z-index2{
  z-index: 2;
} 

.course_hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  font-family: Poppins;
font-weight: 600; 
font-size: 40px; 
line-height: 55px; 
text-transform: capitalize;
color: #fff;
margin-bottom: 24px;
}

.course_hero p {
  color:  var(--default-color);
  margin: 5px 0 42px 0;
  font-size: 20px;
  font-weight: 400;
  font-family: Poppins;
font-size: 20px;
line-height: 34px;
text-transform: capitalize;

}
 
 
.course_hero .btn-get-started {
  color: var(--accent-color);
  background: var(--contrast-color);
  font-family: var(--heading-font);
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 12px 28px;
  border-radius: 10px;
  transition: 0.5s;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);

  font-family: Roboto;
font-weight: 600;
font-size: 16px;
line-height: 24px;

}

.course_hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
 

  

@media (max-width: 640px) {
  .course_hero h1 {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 15px;
  }

  .course_hero p {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 30px;
  }

  .course_hero .btn-get-started{
    padding: 10px 15px 12px 15px;
  }

  .course_hero .btn-get-started,
  .course_hero .btn-watch-video {
    font-size: 13px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

.lbl-card {
  margin-top: 20px;
}

.lbl-card p{
  font-family: Roboto;
  font-weight: 400; 
  font-size: 16px; 
  line-height: 22px; 
  text-transform: capitalize;
  margin-bottom: 15px;
}

.lbl-card .lbl_text{
  font-family: Roboto;
font-weight: 400; 
font-size: 16px; 
line-height: 20px; 
text-transform: capitalize;
color: #373C44;
margin-bottom: 15px;
}
.lbl-card .lbl_text strong{
font-family: Roboto;
font-weight: 600; 
font-size: 16px; 
line-height: 20px; 
text-transform: capitalize;
color: #373C44;
}


.btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 12px 24px;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid var(--accent-color);
  font-family: Roboto;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-transform: capitalize;

}

.btn-download span {
  margin-right: 8px;
}

.btn-download i {
  transition: transform 0.3s ease;
}

.btn-download:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
  color: var(--contrast-color);
}

.enroll_reviews{
  color: #fff;
  color: #fff;
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: 600;
}

.enroll_reviews span{
font-weight: 400;
font-size: 13px;

}



.navbar-nav .nav-link {
color: #373C44;
padding: 20px 16px !important;
font-size: 18px;
font-family: var(--nav-font);
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: 0.3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #0d6efd; /* Bootstrap primary blue */
}

.dropdown-menu {
  border: none;
  box-shadow: none;
}

.dropdown-menu .dropdown-item {
    font-size: 15px;
    padding: 15px 20px;
    font-size: 15px;
    color: #3b5353;
    font-family: "Roboto",  sans-serif;
    font-weight: 600;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
 background: #E0EFFF;
  color: #007aff;
}


/* Show dropdown on hover (desktop only) */
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    padding: 0px 0px;
    background: var(--nav-dropdown-background-color);
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
}

/* Remove default caret */
.navbar .dropdown-toggle::after {
  display: none !important;
}

/* Add custom chevron icon */
.navbar .dropdown-toggle {
  position: relative;
  padding-right: 20px; /* space for arrow */
}

.navbar .dropdown-toggle::before {
  content: "\f282"; /* Unicode for bi-chevron-down */
  font-family: "bootstrap-icons";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

/* Rotate arrow when dropdown is open */
.navbar .dropdown.show .dropdown-toggle::before {
  transform: translateY(-50%) rotate(180deg);
}

.header .navbar-toggler { color:#ffffff; font-size: 34px}

.header-bg .navbar-toggler{
  color: #000;
}

.header .navbar-nav .nav-item.dropdown{
  display: none;
}

.header .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}





@media (max-width: 991.98px) {
  .header .container{
    padding: 0px;
  }
  .header .navbar-nav{
    margin-top: 6px;
    background: #fff;
  }
  .header .navbar-nav .nav-item.dropdown{
    display: block;
  }
  .header .navbar-toggler{
    color: #fff;
  }
   .btn-getstarted,  .btn-getstarted:focus {
    border-radius: 100px;
  }

  .header .btn-getstarted,  
  .header .btn-getstarted:focus {
    border-radius: 100px;
    background: #FFFFFF;
    color: #0C71B7;
    font-size: 14px;
  }

  .header.header-bg .btn-getstarted,  
  .header.header-bg .btn-getstarted:focus {
    border-radius: 100px;
    background: #0C71B7;
    color: #fff;
  }

  .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
      color: #0d6efd;
      background: #E0EFFF;
  }

}

@media (max-width: 767.98px) {
.navbar-nav .nav-link {
    border-top: 1px solid #E5E7EB;
}


  .navbar-toggler{
    color: #ffffff !important;
  }

  .header-bg .navbar-toggler{
    color: #000 !important;
  }


}

.training_card {
  border: 1px solid #D1D5DB;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.training_card h4{ 
font-weight: 600; 
font-size: 18px; 
line-height: 28px; 
color: #373C44;
}

.training_card p{ 
font-weight: 400; 
font-size: 14px; 
line-height: 20px; 
color: #6B7280;
}
 

.training_card ul{
  padding-left: 0px;
}
.training_card li{
    margin-bottom: 10px;
    list-style: none;
    position: relative;
    padding-left: 28px;
}

.training_card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background: url(../images/check_list.svg) no-repeat center center;
    background-size: contain;
}

.contact_card{
  padding: 20px 30px;
  background: #fff;
  border-radius: 16px;
}

.contact_card .form-control {
    display: block;
    width: 100%;
    padding: .575rem .75rem;
}

.form-control::placeholder {
        color: #9CA3AF;  
        font-weight: 400;
    }

.form-control:focus { 
    box-shadow: 0 0 0 .05rem rgba(13, 110, 253, .25);
}

.contact_card h4{ 
font-weight: 700; 
font-size: 24px; 
line-height: 36px;  
color: #373C44;
margin-bottom: 25px;
}

.contact_card .form-label{
font-weight: 600;
font-size: 16px;
line-height: 24px;
text-transform: capitalize;
color: #373C44;
}

.contact_card .form-label span{
font-weight: 600;
font-size: 16px;
line-height: 24px;
text-transform: capitalize;
color: #D11313;
}

.contact_card .note{ 
  margin-top: 24px;
font-weight: 400; 
font-size: 12px; 
line-height: 18px; 
text-align: center;
color: #494F5D;
}

.contact_card .sentOTP{ 
font-weight: 400; 
font-size: 14px; 
line-height: 22px; 
text-transform: capitalize;
color: #494F5D;
margin-bottom:15px;
}

.contact_card #displayMobile{
font-weight: 600 !important; 
font-size: 14px; 
line-height: 22px; 
text-transform: capitalize;
color: #494F5D;
}

.mobno{
  color:#007bff; 
  cursor:pointer;
}

.otpResend{ 
font-weight: 400; 
font-size: 12px; 
line-height: 18px; 
text-align: center;
text-transform: capitalize;
color: #373C44 !important;
margin-top: 15px;
}

.contact_card .continue{
  margin-bottom: 170px;
}

#resendText{ 
font-weight: 600; }

.error {
  color: #D11313;
  font-size: 14px;
  margin-top: 4px;
}


.counselling{ 
font-weight: 600; 
font-size: 22px; 
line-height: 34px; 
text-align: center;
text-transform: capitalize;
color: #ffffff;
}

.btn-direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 12px 30px;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid var(--accent-color);
  font-family: Roboto;
font-weight: 600;
font-size: 16px;
line-height: 24px;
text-transform: capitalize;

}

.btn-direction:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
  color: var(--contrast-color);
}

.contact_right_side {
  background: #F7F9FC;

}
.contact_right_side h4{ 
font-weight: 700; 
font-size: 24px;  
color: #373C44;
 margin-bottom: 32px; 
}

.contact_right_side p{
  margin: 0 0 8px;
  color: #373C44; 
  display: flex;
  align-items: start;
  font-size: 18px; 
  font-weight: 400; 
  margin-bottom: 15px; 
}

.details-box{
  padding-right: 100px;
}

.lbl_open{ 
font-weight: 600; 
font-size: 18px;  
text-transform: capitalize;
color: #373C44;
}

.lbl_open span{ 
  color: #016EBC;
}


@media (max-width: 767.98px) {
  .hero.contct_hero{
      padding-top: 20px;
      padding-bottom: 50px;
  }

  .contact_card .continue{
    margin-bottom: 100px;
  }

  .btn-direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--contrast-color);
    color: var(--accent-color);
    width: 100%;
  }

  .btn-direction:hover {
    background-color: color-mix(in srgb, var(--accent-color), #000 15%);
    color: var(--contrast-color);
  }

  .btn-direction:hover   path{
    stroke:var(--contrast-color);
  }
  .details-box {
      padding-right: 0px;
  }

  .details-box path{
    stroke:var(--accent-color);
  }

}

/*--------------------------------------------------------------
# TLC Section
--------------------------------------------------------------*/
.tlc{
  padding: 60px 0px;
  background: #F8FAFF;
}

.tlc .tlcCard{ 
  border: 1px solid #D4D2E3;
  padding: 30px;
  border-radius: 16px;
  background: #ffffff;
}
 
.tlc .imgcircle{
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background: #EAEDF3;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tlc .tlcCard h4{
  font-family: Roboto;
  font-weight: 700; 
  font-size: 20px;
  line-height: 20px;
  text-transform: capitalize;
  color: #373C44;
}

.tlc .tlcCard p{
  font-family: Roboto;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px; 
  vertical-align: middle;
}

@media (max-width: 767.98px) {
  .tlc .tlcCard{
    box-shadow: none;
    padding: 15px 30px;
    border-radius: 14px;
    background: #F8FAFF;
    text-align: center;
    border: 1px solid #F8FAFF;
    align-items:start;
}
 
.tlc .imgcircle{
    padding: 15px; 
    background: #ffffff;
    margin-bottom: 0px;
    margin-right: 10px;
    display: inline-block;
  }

.tlc .section-title h2{
  font-size: 24px;
  text-align: center;
}

.tlc .section-title h2 span{
  color: #1E4CA7;
}

.tlc .tlcCard h4{ 
    font-family: Roboto;
    font-weight: 600; 
    font-size: 18px; 
    line-height: 22px; 
    text-transform: capitalize;
    color: #373C44;
    margin-top: 20px;
}

.tlc .tlcCard p{
    font-family: Roboto;
    font-weight: 400; 
    font-size: 16px; 
    line-height: 22px; 
    text-transform: capitalize;
    color: #494F5D;
  }

}


/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.ab_clients {
  padding: 60px 0;
}

.ab_clients-title {
  font-size: 28px;
  font-weight: 700;
  color: #2b2b2b;
  margin-bottom: 20px;
}

.ab_clients-subtext {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

.ab_clients .swiper_box {
  padding: 30px 40px;
  background: #F7F9FC;
  border-radius: 21.73px;
}

.ab_clients .swiper-wrapper {
  height: auto !important;
  overflow: hidden;
}

.ab_clients .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}

.ab_clients .ab_clients-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
  padding: 20px;
  transition: transform 0.3s ease;
  width: 100%;
}

.ab_clients .ab_clients-logo:hover {
  transform: translateY(-5px);
}

.ab_clients .ab_clients-logo img {
  max-width: 100%;
  max-height: 50px;
  object-fit: contain;
}

.ab_clients .swiper-pagination {
  margin-top: 20px;
  text-align: center;
}

.ab_clients .swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}

@media (min-width: 768px) {
 
.ab_clients .swiper-pagination-bullet{display: inline-block;}
}


.ab_clients .swiper-pagination-bullet-active {
  background: #0d6efd;
}

.ab_text{
  padding-right: 100px;
}

@media (max-width: 767.98px) {

  .ab_clients .swiper_box {
    padding: 20px 10px; 
  }
  .ab_text{
    padding-right: 0px;
  }

}


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/* Default (Desktop First) */
.hero_aboutus {
  width: 100%;
  /*min-height: 90vh;*/
   padding: 60px 0;
  position: relative;
  display: flex;
  align-items: center;
  background: #D2E6FF; 
  margin-top: 100px;
}
 

/* Mobile (for screens up to 768px) */
@media (max-width: 1200px) {
  .hero_aboutus {
    padding: 60px 0;
    margin-top: 65px;  
  }
}




.hero_aboutus h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  font-family: Poppins;
font-weight: 600; 
font-size: 40px; 
line-height: 55px; 
text-transform: capitalize;
color: ##373C44;
margin-bottom: 24px;
}

.hero_aboutus p {
  color:  #494F5D;
  margin: 5px 0 42px 0;
  font-size: 20px;
  font-weight: 400;
  font-family: Poppins;
font-size: 20px;
line-height: 34px;
text-transform: capitalize;

}
 
 
.hero_aboutus .btn-get-started {
  color: var(--contrast-color);
  background:  var(--accent-color);
  font-family: var(--heading-font);
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 12px 28px;
  border-radius: 10px;
  transition: 0.5s;
  font-family: Roboto;
font-weight: 700;
font-size: 16px;
line-height: 24px;

}

.hero_aboutus .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}
 
 
@media (max-width: 767.98px) {

.hero_aboutus{
  background-image: linear-gradient(to right top, #ffffff, #fcfcff, #f9faff, #f4f8ff, #eff6ff);
}

   .hero_aboutus h1 { 
    font-weight: 600; 
    font-size: 22px; 
    line-height: 34px; 
    text-transform: capitalize;
    color: #373C44;
  }

  .hero_aboutus p { 
    font-weight: 400; 
    font-size: 14px; 
    line-height: 22px; 
    color: #494F5D;
    margin-bottom: 30px;
  }

  .hero_aboutus {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  

  .hero_aboutus h1 {
    position: relative;
 
  }

  .hero_aboutus h1::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -14px;
    transform: translateY(-50%);
    width: 140px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(270deg, #3522F5 0%, #FF4E02 100%);
  }

 

  .student-life  h2 {
  margin-bottom: 20px; 
  font-weight: 600;
  font-size: 24px; 
  color: #373C44;
  position: relative;
}

.student-life h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    transform: translateY(-50%);
    width: 140px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(270deg, #3522F5 0%, #FF4E02 100%);
  }

.student-life p {
  margin-bottom: 30px;
  color: #494F5D; 
  font-weight: 400; 
  font-size: 16px;   
 color: #494F5D;
  }

  .pt-student-life{
    padding-top: 15px;
  }

 
 

}

.vision-mission{
padding: 20px 0px;
}


.vision-mission h2 {
    margin-bottom: 20px; 
    font-weight: 700;
    font-size: 32px;
    line-height: 44px;
    color: #373C44;
    position: relative;
    text-transform: capitalize;
  }

.vision-mission h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    transform: translateY(-50%);
    width: 140px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(270deg, #3522F5 0%, #FF4E02 100%);
  }

.vision-mission p {
    margin-bottom: 30px;
    color: #494F5D; 
    font-weight: 400; 
    font-size: 16px; 
    line-height: 25px; 
}

.vision-mission img {
  border-radius: 12px;
}

@media (max-width: 767.98px) {
.vision-mission  h2 {
  margin-bottom: 20px; 
  font-weight: 600;
  font-size: 24px; 
  color: #373C44;
  position: relative;
}
 

.vision-mission p {
  margin-bottom: 30px;
  color: #494F5D; 
  font-weight: 400; 
  font-size: 16px;   
 color: #494F5D;
  }

.mob_st{
  padding: 20px;
}


}


/*--------------------------------------------------------------
# Hero Blog Section
--------------------------------------------------------------*/
/* Default (Desktop First) */
.hero_blog {
  width: 100%;
  /*min-height: 90vh;*/
   padding: 60px 0;
  position: relative;
  display: flex;
  align-items: center;
  background: #D2E6FF; 
  margin-top: 100px;
}
 

/* Mobile (for screens up to 768px) */
@media (max-width: 1200px) {
  .hero_blog {
    padding: 60px 0;
    margin-top: 65px;  
  }
}




.hero_blog h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  font-family: Poppins;
font-weight: 600; 
font-size: 40px; 
line-height: 55px; 
text-transform: capitalize;
color: ##373C44;
margin-bottom: 24px;
}

.hero_blog p {
  color:  #494F5D;
  margin: 5px 0 42px 0;
  font-size: 20px;
  font-weight: 400;
  font-family: Poppins;
font-size: 20px;
line-height: 34px;
text-transform: capitalize;

}
 
 
.hero_blog .btn-get-started {
  color: var(--contrast-color);
  background:  var(--accent-color);
  font-family: var(--heading-font);
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 12px 28px;
  border-radius: 10px;
  transition: 0.5s;
  font-family: Roboto;
font-weight: 700;
font-size: 16px;
line-height: 24px;

}

.hero_blog .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}
 

.hero_blog .text-alignment{
  text-align: center;
}
 
@media (max-width: 767.98px) {

.hero_blog{
  background-image: linear-gradient(to right top, #ffffff, #fcfcff, #f9faff, #f4f8ff, #eff6ff);
}

   .hero_blog h1 { 
    font-weight: 600; 
    font-size: 22px; 
    line-height: 34px; 
    text-transform: capitalize;
    color: #373C44;
  }

  .hero_blog p { 
    font-weight: 400; 
    font-size: 14px; 
    line-height: 22px; 
    color: #494F5D;
    margin-bottom: 30px;
  }

  .hero_blog {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  

  .hero_blog h1 {
    position: relative;
 
  }

  .hero_blog h1::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -14px;
    transform: translateY(-50%);
    width: 140px;
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(270deg, #3522F5 0%, #FF4E02 100%);
  }

  .hero_blog .text-alignment{
    text-align: left;
  }
 

}



/*--------------------------------------------------------------
# Menu Section
--------------------------------------------------------------*/
/*.menu  {
  padding: 45px 0px 0px 0px;
}
.menu .menu-filters ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0; 
  border-radius: 50px;
  padding: 8px; 
}

.menu .menu-filters ul li {
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 40px;
  background-color: #ffffff;
  color: #373C44;
  transition: all 0.3s ease;
  position: relative;

font-weight: 400;
font-size: 18px;
line-height: 28px;
text-align: center;

border: 1px solid #D6DBE3

}*/

.menu {
  padding: 45px 0 0 0;
}

.menu .menu-filters ul {
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 8px;  
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.menu .menu-filters ul li {
  flex-shrink: 0;
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 40px;
  background-color: #fff;
  color: #373C44;
  border: 1px solid #D6DBE3;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  transition: all 0.3s ease;
}

/* Hide scrollbar */
.menu .menu-filters ul::-webkit-scrollbar {
  display: none;
}



.menu .menu-filters ul li:hover {
  color: var(--accent-color);
  transform: translateY(-2px);
}

.menu .menu-filters ul li.filter-active {
  background-color:  #EAF4FF;
  color: #0C71B7;
  border: 2px solid #0C71B7
}

@media (max-width: 991.98px) {

  .menu .menu-filters ul {
  display: flex;
  justify-content: start;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 8px;  
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

   .menu .menu-filters ul li {
  flex-shrink: 0;
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 40px;
  background-color: #fff;
  color: #373C44;
  border: 1px solid #D6DBE3;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  transition: all 0.3s ease;
}

}
@media (max-width: 768px) {

  .menu {
    padding: 0px 0 0 0;
  }

  .menu .menu-filters ul {
    background-color: transparent;
    box-shadow: none;
  }

  .menu .menu-filters ul li {
    padding: 8px 16px;
    font-size: 0.85rem;
  
  }
}

.menu .menu-grid .menu-card {
  background-color: var(--surface-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transition: all 0.4s ease;
  height: 100%;
  position: relative;
}

.menu .menu-grid .menu-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.menu .menu-grid .menu-card.featured {
  border: 2px solid var(--accent-color);
}

.menu .menu-grid .menu-card.featured:before {
  content: "Featured";
  position: absolute;
  top: 15px;
  right: -30px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 5px 40px;
  font-size: 0.75rem;
  font-weight: 600;
  transform: rotate(45deg);
  z-index: 5;
}

.menu .menu-grid .menu-card .menu-card-image {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.menu .menu-grid .menu-card .menu-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.menu .menu-grid .menu-card .menu-card-image:hover img {
  transform: scale(1.1);
}

.menu .menu-grid .menu-card .menu-card-image .dietary-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu .menu-grid .menu-card .menu-card-image .dietary-badges span {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.menu .menu-grid .menu-card .menu-card-image .dietary-badges .badge-vegetarian {
  background-color: color-mix(in srgb, green, transparent 20%);
  color: var(--contrast-color);
}

.menu .menu-grid .menu-card .menu-card-image .dietary-badges .badge-vegan {
  background-color: color-mix(in srgb, #228B22, transparent 20%);
  color: var(--contrast-color);
}

.menu .menu-grid .menu-card .menu-card-image .dietary-badges .badge-gluten-free {
  background-color: color-mix(in srgb, #FFA500, transparent 20%);
  color: var(--contrast-color);
}

.menu .menu-grid .menu-card .menu-card-image .dietary-badges .badge-seafood {
  background-color: color-mix(in srgb, #4682B4, transparent 20%);
  color: var(--contrast-color);
}

.menu .menu-grid .menu-card .menu-card-image .dietary-badges .badge-chef {
  background-color: color-mix(in srgb, #FFD700, transparent 20%);
  color: var(--default-color);
}

.menu .menu-grid .menu-card .menu-card-image .dietary-badges .badge-signature {
  background-color: color-mix(in srgb, #8B008B, transparent 20%);
  color: var(--contrast-color);
}

.menu .menu-grid .menu-card .menu-card-image .dietary-badges .badge-alcoholic {
  background-color: color-mix(in srgb, #DC143C, transparent 20%);
  color: var(--contrast-color);
}

.menu .menu-grid .menu-card .menu-card-image .dietary-badges .badge-fresh {
  background-color: color-mix(in srgb, #32CD32, transparent 20%);
  color: var(--contrast-color);
}

.menu .menu-grid .menu-card .menu-card-image .price-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 16px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.menu .menu-grid .menu-card .menu-card-content {
  padding: 24px;
}

.menu .menu-grid .menu-card .menu-card-content h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--heading-color);
}

.menu .menu-grid .menu-card .menu-card-content p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.menu .menu-grid .menu-card .menu-card-content .spice-level {
  display: flex;
  gap: 4px;
  align-items: center;
}

.menu .menu-grid .menu-card .menu-card-content .spice-level .spice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
  transition: background-color 0.3s;
}

.menu .menu-grid .menu-card .menu-card-content .spice-level .spice-dot.active {
  background-color: var(--accent-color);
}

.menu .menu-actions {
  margin-top: 3rem;
  padding: 24px;
  background-color: var(--surface-color);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.menu .menu-actions .seasonal-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.9rem;
}

.menu .menu-actions .seasonal-notice i {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.menu .menu-actions .menu-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.menu .menu-actions .menu-download-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-color), transparent 40%);
}

.menu .menu-actions .menu-download-btn i {
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .menu .menu-actions {
    text-align: center;
  }

  .menu .menu-actions .row>div {
    margin-bottom: 1rem;
  }
}

.menu .chef-recommendations {
  margin-top: 4rem;
}

.menu .chef-recommendations .section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.menu .chef-recommendations .section-header h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.menu .chef-recommendations .section-header h3 i {
  color: var(--accent-color);
}

.menu .chef-recommendations .section-header p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 1.1rem;
}

.menu .chef-recommendations .recommendation-card {
  background-color: var(--surface-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  height: 100%;
}

.menu .chef-recommendations .recommendation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
}

.menu .chef-recommendations .recommendation-card .recommendation-image {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.menu .chef-recommendations .recommendation-card .recommendation-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.menu .chef-recommendations .recommendation-card .recommendation-image:hover img {
  transform: scale(1.08);
}

.menu .chef-recommendations .recommendation-card .recommendation-image .chef-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #FF6B6B 30%));
  color: var(--contrast-color);
  padding: 8px 16px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.menu .chef-recommendations .recommendation-card .recommendation-image .chef-badge i {
  font-size: 1rem;
}

.menu .chef-recommendations .recommendation-card .recommendation-content {
  padding: 30px;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-header h4 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--heading-color);
  flex: 1;
  margin-right: 15px;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-header .recommendation-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-color);
  white-space: nowrap;
}

.menu .chef-recommendations .recommendation-card .recommendation-content p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-details .serving-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 0.85rem;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-details .serving-info i {
  color: var(--accent-color);
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-details .dietary-info {
  display: flex;
  gap: 6px;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-details .dietary-info .mini-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-details .dietary-info .mini-badge.gluten-free {
  background-color: color-mix(in srgb, #FFA500, transparent 85%);
  color: #FFA500;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-details .dietary-info .mini-badge.dairy-free {
  background-color: color-mix(in srgb, #32CD32, transparent 85%);
  color: #32CD32;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-details .dietary-info .mini-badge.seafood {
  background-color: color-mix(in srgb, #4682B4, transparent 85%);
  color: #4682B4;
}

.menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-details .dietary-info .mini-badge.premium {
  background-color: color-mix(in srgb, #FFD700, transparent 85%);
  color: #B8860B;
}

@media (max-width: 1200px) {
  .menu .menu-grid .menu-card .menu-card-content {
    padding: 20px;
  }

  .menu .menu-grid .menu-card .menu-card-content h4 {
    font-size: 1.15rem;
  }
}

@media (max-width: 768px) {
  .menu .chef-recommendations .section-header h3 {
    font-size: 1.6rem;
    flex-direction: column;
    gap: 8px;
  }

  .menu .menu-grid .menu-card .menu-card-image {
    height: 220px;
  }

  .menu .chef-recommendations .recommendation-card .recommendation-content {
    padding: 24px;
  }

  .menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-header h4 {
    margin-right: 0;
    font-size: 1.25rem;
  }

  .menu .chef-recommendations .recommendation-card .recommendation-content .recommendation-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .menu .menu-grid .menu-card .menu-card-image {
    height: 200px;
  }

  .menu .menu-grid .menu-card .menu-card-image .price-overlay {
    font-size: 1rem;
    padding: 6px 12px;
  }
}




/* Shared styles for all swiper navs */
.courses-swiper-nav,
.testimonial-swiper-nav,
.article-swiper-nav, 
.leader-swiper-nav,
.sap-education-swiper-nav {
  display: flex;
  align-items: center;
  gap: 10px; /* space between arrows */
  padding-top: 20px;
}

.courses-swiper-nav .swiper-button-next,
.courses-swiper-nav .swiper-button-prev,
.testimonial-swiper-nav .swiper-button-next,
.testimonial-swiper-nav .swiper-button-prev,
.article-swiper-nav .swiper-button-next,
.article-swiper-nav .swiper-button-prev,
.leader-swiper-nav .swiper-button-next,
.leader-swiper-nav .swiper-button-prev,
.sap-education-swiper-nav .swiper-button-next,
.sap-education-swiper-nav .swiper-button-prev {
  position: static; /* remove absolute positioning */
  width: 44px;
  height: 44px;
  background: #ffffff; /* theme color */
  border-radius: 50%;
  color: #0062b5;
  box-shadow: 0px 1px 4px 0px #0000001F;

}

.courses-swiper-nav .swiper-button-next:hover,
.courses-swiper-nav .swiper-button-prev:hover,
.testimonial-swiper-nav .swiper-button-next:hover,
.testimonial-swiper-nav .swiper-button-prev:hover,
.article-swiper-nav .swiper-button-next:hover,
.article-swiper-nav .swiper-button-prev:hover,
.leader-swiper-nav .swiper-button-next:hover,
.leader-swiper-nav .swiper-button-prev:hover,
.sap-education-swiper-nav .swiper-button-next:hover,
.sap-education-swiper-nav .swiper-button-prev:hover {
  background-color: #f1f1f1;
  border-color: #0062b5;
}

.courses-swiper-nav .swiper-button-next::after,
.courses-swiper-nav .swiper-button-prev::after,
.testimonial-swiper-nav .swiper-button-next::after,
.testimonial-swiper-nav .swiper-button-prev::after,
.article-swiper-nav .swiper-button-next::after,
.article-swiper-nav .swiper-button-prev::after,
.leader-swiper-nav .swiper-button-next::after,
.leader-swiper-nav .swiper-button-prev::after,
.sap-education-swiper-nav .swiper-button-next::after,
.sap-education-swiper-nav .swiper-button-prev::after {
  font-size: 16px; 
  font-weight: bold;
  color: #6E6E73;
}



.blog-card{
  padding: 15px;
  border: 1px solid #E8E8EA;
  border-radius: 12px;
  height: 100%;
}

.blog-card img{
  border-radius: 12px;
}
.blog-card .blog-meta{ 
font-weight: 600;
font-style: SemiBold;
font-size: 14px; 
color: #6B7280;
padding: 12px 0px;
}

.blog-card .blog-title{ 
font-weight: 600;
font-style: SemiBold;
font-size: 20px; 
color: #373C44;
}

.blog-card .card-text{ 
font-weight: 400;
font-style: Regular;
font-size: 16px; 
color: #494F5D;
}

.blog-card .text-muted{ 
font-weight: 600; 
font-size: 14px; 
color: #6B7280;
margin-bottom: 10px;
}

.custom-breadcrumb {
  margin-bottom: 30px;
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");
}
.custom-breadcrumb ol li {
font-weight: 600;
font-size: 14px;
color: #6B7280;
}

.custom-breadcrumb ol li a {
  color: #6B7280;
}

.custom-breadcrumb ol li a:hover {
  color: #333333;
}

.breadcrumb-top{
  margin-top: 130px;
}

.blog-img{
  margin-top: 66px;
}
.blog-heading-mob{
  display: none;
}

@media (max-width: 767.98px) {

  .blog-details{
    box-shadow: 0px 4px 4px 0px #0000001F;
    margin: -50px 10px 0px 10px;
    background: #fff;
    z-index: 2;
    position: relative;
    border-radius: 12px;
  }

  .blog-heading-mob{
    display: block;
  }
  .blog-heading-mob h4{
  font-weight: 600; 
  font-size: 16px; 
  color: #373C44;
  margin-bottom: 10px;
  margin-top: 10px;
  line-height: 1.3;
  }
.blog-heading-mob .blog-meta{
    font-family: Roboto;
    font-weight: 600; 
    font-size: 14px; 
    color: #6B7280;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 20px;
    margin-top: 0px;
    padding-bottom: 15px;

  }

}

/* Base Section */
.article-hero {
  position: relative;
  border-radius: 12px;
  min-height: 420px;
  display: flex;
  align-items: end;
  color: #fff;
  overflow: hidden;
}

/*.article-hero::after {
    width: 100%;
    height: 100%;
    transition-duration: 0.9s;
    content: "";
    border-radius: 15px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 1; 
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}*/

/* Overlay */
.article-overlay {
 
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
}

/* Content Box */
.article-content {
 max-width: 800px;
  padding: 60px;
}

/* Author Line */
.article-author {
  font-size: 1rem;
  font-weight: 400;
  color: #e4e4e4;
  margin-bottom: 12px;
}

.article-author span {
  font-weight: 600;
}

/* Title */
.article-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 24px;
}

/* Meta Info */
.article-meta {
  font-size: 1rem;
  color: #ddd;
  display: flex;
  align-items: center;
  gap: 10px;
  /*border-top: 1px solid rgba(255, 255, 255, 0.3);*/
  padding-top: 15px;
   border-top: 1px solid transparent;
    border-image: linear-gradient(90deg,  #FFFFFF,#152548 ) 1;
}

.article-meta .dot {
  font-size: 1.3rem;
  line-height: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .article-content {
    padding: 30px 20px;
  }

  .article-title {
    font-size: 1.4rem;
  }
}

.blog-content{
  padding: 15px 0px;
}

.blog-content h4{  
font-weight: 600; 
font-size: 18px; 
color: #181A2A;

}

.blog-content p{ 
font-weight: 400;
font-style: Regular;
font-size: 16px;
color: #3B3C4A;
margin-bottom: 25px; 
}

.blog-content .text-helights{ 
border-radius: 12px;
gap: 32px;
padding: 32px;
border-left-width: 4px;
border-left: 4px solid #E8E8EA;
background: #F6F6F7;
font-style: italic;
color: #181A2A;
font-size: 16px;
margin-bottom: 30px}


.lbl-heading{
background: #D2E6FF;
text-align: center;
margin-top: 105px;
padding: 45px 0px;
}

.lbl-heading h2{
  font-family: Poppins;
  font-weight: 700; 
  font-size: 32px; 
  position: relative;
}

.tc-content{
  padding: 70px 0px; 
  font-weight: 400; 
  font-size: 16px; 
  color: #373C44;
}

.tc-content h4{
margin-top: 10px; 
margin-bottom: 15px; 
font-weight: 600; 
font-size: 20px; 
color: #373C44;
}

.tc-content ul li{
  margin-left: 20px;
}

@media (max-width: 991.98px) {

.lbl-heading {
  margin-top: 67px; 
  padding: 30px 0px;  
  text-align: left;
  position: relative;}

  .lbl-heading h2{
    font-size: 22px;
  }

 .lbl-heading h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  transform: translateY(-50%);
  width: 130px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(270deg, #3522F5 0%, #FF4E02 100%);
}

  .tc-content{
    padding: 40px 0px;
  }

  .tc-content h4{
    font-size: 20px;
    margin-top: 5px; 
  margin-bottom: 15px;
    }

}

.advisor-modal .modal-content {
      border-radius: 20px;
      overflow: hidden;
      border: none;
    }

    .advisor-modal .left-panel { 
      background: linear-gradient(186.16deg, #459BD8 -5.83%, #063781 98.13%);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
      position: relative;
    }

    .left-panel-card{padding: 40px 30px 0px 30px;}

    .advisor-modal .left-panel h3 {
      font-weight: 700;
      margin-bottom: 20px;
    }

    .advisor-modal .left-panel ul {
      list-style: none;
      padding: 0;
    }

    .advisor-modal .left-panel li{
      padding: 4px 0;
  
    }

    .advisor-modal .left-panel li::before {
    
      margin-right: 10px;
      color: #fff;
    }

    .advisor-modal .advisor-image {
      width: 100%;  
      display: block;
    }

    .advisor-modal .right-panel {
      padding: 40px 30px;
      background: #fff;
    }

    .advisor-modal .form-control {
      border-radius: 10px;
      height: 45px;
    }

    .advisor-modal .btn-primary {
      background-color: #007bff;
      border: none;
      border-radius: 10px;
      height: 45px;
      width: 100%;
      font-weight: 600;
    }

    .advisor-modal .small-text {
      font-size: 12px;
      color: #555;
      text-align: center;
      margin-top: 10px;
    }

    .advisor-modal .error {
      color: red;
      font-size: 13px;
      margin-top: 4px;
    }

    .advisor-modal .continue{
    margin-bottom: 170px;
  }

  .advisor-modal .note {
    margin-top: 100px;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #494F5D;
    margin-bottom: 0px;
  }

  .advisor-modal .note a{
    color: #494F5D;
    font-weight: 600;
  }
  .advisor-modal .note a:hover{
    color: #000;
  }

  .advisor-modal .btn-close {
  background-color: rgba(55, 60, 68, 0.5); /* semi-transparent circle */
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em auto;
  opacity: 1;
}

.advisor-modal a#editNumber{ 
    font-weight: 600; 
    font-size: 14px; 
    text-transform: capitalize;
    color: #0C71B7;

    }
#resendLink{ 
    font-weight: 600; 
    font-size: 14px; 
    text-transform: capitalize;
    color: #0C71B7;
    }

    .advisor-modal .btn-close-mob{
      display: none !important;
    }

    .advisor-modal .btn-close:focus,
    .advisor-modal .btn-close-mob:focus {
      box-shadow: none;
    }


/* On smaller screens, take full width but same animation */
@media (max-width: 991.98px) {
  .advisor-modal .modal-dialog {
    margin: 0;
    width: 100%;
    max-width: 100%;
  }
  .advisor-modal .modal-content {
    border-radius: 20px 20px 0 0;
  }

  .advisor-modal.modal {
        position: fixed;
        top: auto;   
        left: 0; 
    }

    .advisor-modal .modal-dialog-centered {
    display: flex;
    align-items: end;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
}

    /* When modal is shown */
    .advisor-modal.show .modal-dialog {
      transform: translateY(0); /* settle to normal centered position */
      opacity: 1;
    }

    /* Optional: slight overshoot to make it feel natural */
    @keyframes riseAndSettle {
      0% {
        transform: translateY(100vh);
        opacity: 0;
      }
      70% {
        transform: translateY(-30px);
        opacity: 1;
      }
      100% {
        transform: translateY(0);
      }
    }

    /* Apply animation only when modal becomes visible */
    .advisor-modal.show .modal-dialog {
      animation: riseAndSettle 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .advisor-image-mob{
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .advisor-modal .left-panel h3 {
    font-weight: 700;
    margin-bottom: 10px;
    }

    .advisor-modal .note{
        margin-top: 15px;
        margin-bottom: 25px;
    }

   

}

@media (max-width: 767.98px) {

  /*.left-panel-card{padding: 20px 20px 0px 20px;}*/

  .advisor-modal .right-panel {
      padding: 20px 20px 40px 20px; 
    }

  .cDetails {margin-top: -40px; border-radius: 16px; position: relative; z-index: 2;}
  /*.cDetails .container{
    padding: 0px;
  }*/

  .placement100{ margin-top:20px }

  .hero-img img{
    position: absolute;
    right: 5px;
    bottom: 0;
    width: 150px;
  }

  .advisor-modal .btn-close-mob{
      position: absolute;
      top:10px;
      right: 15px;
      display: inline-block !important;
      z-index: 999;
  }
  /*.advisor-modal .modal-dialog {
        max-width: 95%;
  }*/
  .advisor-modal .left-panel {
    /*text-align: center;*/
  }

}

@media (max-width: 380.98px) {
  .hero-img img{
    position: absolute;
    right: 5px;
    bottom: 0;
    width: 130px;
  }
}



/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  padding: 0;
  list-style: none;
}

.portfolio .portfolio-filters li {
  padding: 8px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.portfolio .portfolio-filters li.filter-active {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.portfolio .portfolio-card {
  background-color: var(--surface-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.portfolio .portfolio-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.portfolio .portfolio-card:hover .portfolio-img .portfolio-overlay {
  opacity: 1;
}

.portfolio .portfolio-card:hover .portfolio-img img {
  transform: scale(1.1);
}

.portfolio .portfolio-card .portfolio-img {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-card .portfolio-img img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.portfolio .portfolio-card .portfolio-img .portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  opacity: 0;
  transition: all 0.3s ease;
}

.portfolio .portfolio-card .portfolio-img .portfolio-overlay a {
  width: 45px;
  height: 45px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.portfolio .portfolio-card .portfolio-img .portfolio-overlay a:hover {
  background-color: color-mix(in srgb, var(--accent-color), #fff 20%);
  transform: translateY(-5px);
}

.portfolio .portfolio-card .portfolio-info {
  padding: 20px;
}

.portfolio .portfolio-card .portfolio-info h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--heading-color);
}

.portfolio .portfolio-card .portfolio-info p {
  font-size: 0.9rem;
  color: var(--default-color);
  margin-bottom: 10px;
}

.portfolio .portfolio-card .portfolio-info .portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio .portfolio-card .portfolio-info .portfolio-tags span {
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
}

.portfolio .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 12px 30px;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.portfolio .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 10%);
  border-color: color-mix(in srgb, var(--accent-color), #000 10%);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}


 
.successMessage {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    max-width: 90%;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.alertMessage {
    background: #373C44;
    color: #fff;
    box-shadow: 0px 16px 20px -8px #0305121A;
    border-radius: 16px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}


#sap_courses {
  scroll-margin-top: 100px; /* recommended */
}

/* Hide Mobile button on Desktop */
.whatsapp-mobile {
    display: none; 
}

/* Hide Desktop button on Mobile screens */
@media (max-width: 767.98px) {
    .successMessage {
        position: fixed;
        bottom: 20px;
        left: 1%;
        transform: translateX(-1%);
        z-index: 9999;
        max-width: 99%;
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .whatsapp-desktop {
        display: none;
    }
    .whatsapp-mobile {
        display: inline-block;
    }
}