:root {
    --white: #ffffff;
    --black: #000000;
    --black2: #373737;
    --yellow: #ffdd00;
    --grey: #3D3D3D;
    --grey2: #333333;
    --grey-bg:#D9D9D9;
    --red: #e93e3e;
    --header-space: 80px;
    --radius12: 12px;
    --radius10: 10px;
    --radius6: 6px;
    --radius15: 15px;
    --radius20: 20px;
    /*fonts */
    --text-h1: 64px;
    --text-h2: 48px;
    --text-h3: 32px;
    --text-h4: 28px;
    --text-h5: 24px;
    --text-h6: 20px;
    --text-para: 16px;
    --text-small: 13px;

    --text-15px: 15px;
    --text-18px: 18px;
    --text-36px: 36px;
    --text-40px: 40px;
    --text-32px: 32px;
    --text-20px: 20px;
    --text-25px: 24px;
  
    --space-default: 1rem;
    --space-l1-lg: 4rem;
    --space-l2-lg: 3rem;
    --space-l3-lg: 2.5rem;
    --space-l4-lg: 2rem;
    --space-l5-lg: 1.5rem;
    --space-l6-lg: 1rem;
    --space-l1-sm: calc(var(--space-l1-lg) / 4);
    --space-l2-sm: calc(var(--space-l2-lg) / 4);
    --space-l3-sm: calc(var(--space-l3-lg) / 4);
    --space-l4-sm: calc(var(--space-l4-lg) / 4);
    --space-l5-sm: calc(var(--space-l5-lg) / 4);
    --space-l6-sm: calc(var(--space-l6-lg) / 4);
    --space-list-items: 0.5rem;
  }
  
  @media screen and (max-width: 1536px) {
    :root {
      --text-h1: 56px;
      --text-h2: 44px;
      --text-h3: 30px;
      --text-h4: 24px;
      --text-h5: 22px;
      --text-h6: 17px;
      --text-para: 15px;
      --text-small: 12.5px;
    }
  }
  @media screen and (min-width: 992.5px) and (max-width: 1199.5px) {
    :root {
      --header-space: 80px;
    }
  }
  
  @media screen and (max-width: 991.5px) {
    :root {
      --text-h1: 46px;
      --text-h2: 36px;
      --text-h3: 26px;
      --text-h4: 20px;
      --text-h5: 18px;
      --text-h6: 16px;
      --text-para: 13px;
      --text-small: 11.5px;
      --text-small: 11.5px;
      

      --text-15px: 13px;
      --text-18px: 14px;
      --text-36px: 24px;
      --text-40px: 30px;
      --text-32px: 20px;
      --text-20px: 15px;
      --text-25px: 18px;
    }
  }
  @media screen and (max-width: 767.5px) {
    :root {
      --text-h1: 46px;
      --text-h2: 36px;
      --text-h3: 26px;
      --text-h4: 20px;
      --text-h5: 18px;
      --text-h6: 15px;
      --text-para: 14px;
      --text-small: 11.5px;
      --text-15px: 13px;
      --text-18px: 14px;
      --text-36px: 24px;
      --text-40px: 30px;
      --text-32px: 20px;
      --text-20px: 15px;
      --text-25px: 18px;
    }
  }
  
  body {
    font-size: var(--text-para);
    background: var(--white);
    color: var(--black);
    width: 100%;
    min-height: 100%;
    font-family: "Poppins", sans-serif;
    text-rendering: optimizeSpeed;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    line-height: 1.4;
    overflow-x: hidden;
  }
  body.is-preload *,
  body.is-preload *:before,
  body.is-preload *:after {
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
  body.is-preload .main-wrapper {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
  }
  body.is-preload .main-wrapper .herobanner {
    opacity: 0;
  }
  
  .ul-nopadding {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  p {
    font-size: var(--text-15px);
  }
  .text-grey{
    color: var(--grey);
  }
  .text-grey2{
    color: var(--grey2);
  }
  .errors {
    color: red;
  }
  
  a {
    font-weight: 400;
    font-size: var(--text-15px);
    text-decoration: none;
    color: var(--grey);
    opacity: 1;
  }
  .social-icons li{
    color: var(--grey);
    opacity: .75;
  }
  .btn{
      padding: 12px 1.75rem;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-15px);
      font-family: "Poppins", sans-serif;
      opacity: 1;
    }
    .btn-nav-outline{
      box-shadow: 0px 3px 6px #DB7E6542;
      color: var(--white);
      text-transform: uppercase;
      font-size: var(--text-16);
      background: var(--white);
      font-weight: 700;
      transition: box-shadow .2s, color .2s, background-color .2s;
    }
    .btn-primary{
      color: var(--white);
      background: var(--black);
      border-color: var(--black);
      font-weight: 700;
      transition: box-shadow .2s, color .2s, background-color .2s;
    }
    .btn-primary:is(:focus,:hover,:active){
      color: var(--black);
      background: var(--white);
      border-color:var(--black);
    }
    .btn-nav-outline:is(:focus,:hover,:active){
      color: var(--white);
      background: var(--primary);
    }
    .btn-outline-secondary{
      background-color: var(--grey-bg2);
      border-radius: var(--radius10);
      color: var(--white);
      font-weight: 600;
      font-size: var(--text-18);
    }
    .btn-white{
      color: var(--black);
      background: var(--white);
      border-color: var(--white);
      opacity: 1;
    }
    .btn-white:is(:focus,:hover,:active){
      color: var(--black);
      background: var(--white);
      border-color:var(--white);
    }
    .bg-yellow{
      background: var(--yellow);
    }
    .bg-grey{
      background: var(--grey-bg);
    }
    .bg-black2{
      background: var(--black2) !important;
    }
  .h1,
  h1,
  .head1 {
    font-size: var(--text-h1);
  }
  
  .h2,
  h2,
  .head2 {
    font-size: var(--text-h2);
  }
  
  .h3,
  h3,
  .head3 {
    font-size: var(--text-h3);
    line-height: 1.4;
  }
  
  .h4,
  h4,
  .head4 {
    font-size: var(--text-h4);
  }
  
  .h5,
  h5,
  .head5 {
    font-size: var(--text-h5);
    line-height: 1.4;
  }
  
  .h6,
  h6,
  .head6 {
    font-size: var(--text-h6);
    line-height: 1.5;
  }

  .fw-500 {
    font-weight: 500;
  }
  .fw-100 {
    font-weight: 100;
  }
  .fw-300 {
    font-weight: 300;
  }
  
  .fw-600 {
    font-weight: 600;
  }
  
  .fw-400 {
    font-weight: 400;
  }
  .fs-small{
    font-size: 75%;
  }

  .fs-15w{
    font-size: var(--text-15px);
  }
  .fs-18w{
    font-size: var(--text-18px);
  }
  .fs-20w{
    font-size: var(--text-20px);
  }
  .fs-25w{
    font-size: var(--text-25px);
  }
  .fs-30w{
    font-size: var(--text-30);
  }
  .fs-32w{
    font-size: var(--text-32px);
  }
  .fs-36w{
    font-size: var(--text-36px);
  }
  .fs-40w{
    font-size: var(--text-40px);
  }
  .fs-50w{
    font-size: var(--text-50);
  }
  .fs-65w{
    font-size: var(--text-65);
  }
  .fs-90w{
    font-size: var(--text-90);
  }
  .fs-100w{
    font-size: var(--text-100);
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 1240px;
  }
  .lazyload {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    transition: filter 400ms, -webkit-filter 400ms;
  }
  
  .lazyloaded {
    -webkit-filter: blur(0);
    filter: blur(0);
  }
  .centerposition{
   
    position: absolute;
    top: 50%;
    left: calc(8% - 1.5rem);
    transform: translateY(-50%);
  }
  .btn-yellow{
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
  }
  .btn-danger{
     border-radius: 10px;
     font-size: var(--text-16);
     text-transform: uppercase;
     font-family: "Barlow", sans-serif;
     font-weight: 600;
     border: none;
  }
  .btn-dark{
    text-transform: uppercase;
    font-weight: 400;
    border: none;
    background: var(--black);
  }

  /*header*/
.header-wrap{
    position: sticky;
    top: 0;
    z-index: 1031;
    width: 100%;
    background: var(--white);
    padding: 20px 0;
}
.header-wrap.sticky{
    box-shadow: 0 0.125rem 0.25rem rgba(2, 6, 23, 0.075);
}
.nav-logo img{
    width: 70px;
}

.shadowbottom{
  position: absolute;
  bottom: 0px;
  width: 100%;
  z-index: -1;
}
.banner-textwrap{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.flex-1per{
  flex: 1 1 0%;
}
.ux-som{
  background-color: rgb(232 229 255 / 20%);
}

.courses-inline-boxlist{
  border: 1px solid #E0E0E0;
}
.dottedborder{
  border: 0.5px dashed #000000;
  margin: 1.5rem 0;
}
.make-inner{
  background: #FAFAFF;
  padding: 2.5rem 0;
}
.accordion-item{
  border: none;
}
.accordion-button{
  font-size: var(--text-15px);
  border-radius: 0px !important;
}
.accordion-button::after {
  --bs-accordion-btn-icon-width: 14px;
  --bs-accordion-btn-icon-height: 8px;
}
.accordion-item{
  border-bottom: 0.5px dashed #000000 !important;
}
.accordion-button:not(.collapsed) {
  color: var(--black);
  background-color: transparent;
  box-shadow: none;
}
.accordion-button:focus {
  z-index: 3;
  outline: 0;
  box-shadow: none;
}
.actfacinner-inner {
  background: #5B5B5B;
  position: relative;
  padding: 4rem 1rem;
}
.actfact-section > img{
  position: absolute;
  top: 1rem;
  z-index: 1;
  left: 7%;
}
.builinglegacy{
  background-color: #E8E5FF;
  padding: 2rem;
}
.wrap-balance{
  text-wrap: balance;
}
.youtube{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%);
  pointer-events: none;
}
.items-depthleran .youtube{
  top: 65%;
}
.closbtn{
  background-color: var(--white);
  border-radius: 50%;
  width: var(--text-40px);
  height: var(--text-40px);;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  margin: 0;
  padding: 0;
  z-index: 11;
  right: -10px;
  top: -10px;
  opacity: 1 !important;
  border: 1px solid var(--grey);
  padding: 0px !important;
  margin: 0px !important;
}
.steps-columns{
  display: flex;
      justify-content: center;
    padding-bottom: 2rem;
      gap: 3rem;
}
.steps-columns > *{
  background: var(--grey-bg);
  width: var(--text-h2);
  height: var(--text-h2);
  font-size: var(--text-18px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  font-weight: 600;
  position: relative;
  line-height: 1;
}
.steps-columns > *.active{
  background: #3D3D3D;
  color: var(--white);
}
.steps-columns > *:not(:last-child):after{
  content: "";
  border: 0.5px dashed #000;
  position: absolute;
  width: 75%;
  right: -42px;
}
.infslick2 img{
  margin: 0 auto;
}
.slick-dots li:only-child {
  display: none;
}
.sliderdots .slick-dots {
  position: static;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.slick-dots li {
  margin: 0;
  padding: 0;
  width: 12px;
  height: 12px;
  background-color: #D9D9D9;
  border-radius: 33px;
}
.slick-dots li:not(:last-child) {
  margin-right: 10px;
}
.slick-dots li button {
  display: none;
}
.slick-dots li.slick-active {
  background-color: #535353;
}
.infslick img{
  margin: 0 auto;
}
.popup-lyvs .header-wrap{
  box-shadow: none;
  padding: 0;
  position: static;
}
.form-control, .form-select{
  border: 1px solid #D4D4D4;
  border-radius: 0px;
  color: var(--black);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  font-size: var(--text-15px);
}
.herobanner > .container > .top-banner-image > img{
  display: none;
}
/*19-12-2024*/
.courses-section-bg{
  background: #F6F6F6;
	padding: 3rem;  
}
.content_show{
  text-align: left;
  padding-top: 2rem;
}
.ul_cont li {
  margin-bottom: 1rem;
  color: var(--grey);
}
.mic_img {
  background: #D9D9D9;
  padding: 30px;
  display: flex;
  justify-content: center;
}
.ft_Bold{
font-weight: bold;
}
.pro_details {
  margin-left: 3rem;
}
.pro_details_img {
  display: flex;
  align-items: center;
}
.uxso-content-pro {
  padding-top: 2rem;
  display: flex;
  justify-content: center;
}
.pro_details_ovel{
display: flex;
justify-content: center;
align-items: center;
}
.courses-inline-boxlist{
	position: relative;	
}
.read_more{
	position: absolute;
	bottom: 0;
}
.mb_30{
    margin-bottom: 20%;	
}
.iti{
  display: block;
}
.shadow-form{
      box-shadow: -1px 0px 7px 3px #E0E0E0;
}
#form-journey label {
    display: block;
    text-align: left;
}
@media screen and (min-width: 991.5px){
  .w-md-75 {
    width: 85%;
}
.w-md-70 {
  width: 70%;
}
.ux-som {
  padding-bottom: 2.5rem;
}
.courses-section{
  margin-top: -2rem;
}
.items-depthleran {
  padding: 0 3rem;
  line-height: 1.6;
}
.depthl-learing-row > *:not(:last-child){
  border-right: 0.5px dashed #000000;
}
.herobanner{
  height: 300px;
}
.herobanner > .container{
  position: relative;
  height: 100%;
}
.herobanner > .container > .top-banner-image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.herobanner > .container > .top-banner-image > img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
.annual-sale-logo{
  width: 150px;
  margin-left: auto;
}
.banner-textwrap{
  padding: 0 2rem;
}
.courses-section-bg{
  padding: 0;
}
}

.annual-logo-ipad{
  display: none;
}
@media screen and (max-width: 1199.5px) and (min-width: 991.6px) {

.studywomen{
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.annual-sale-logo{
  display: none;
}
.annual-logo-ipad{
  display: block;
  margin-top: 20px;
}
}
@media screen and (min-width: 767.6px) and (max-width: 1024px){
  .ht_vw{
    height: 10vw;
   }
}
@media screen and (min-width: 767.6px) and (max-width: 991.5px){
 .banner-textwrap{
  margin-top: 0;
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
 }
 .bottom-banner-image{
  width: 50%;
 }
 
}

@media screen and (max-width: 991.5px) {
  .actfacinner-inner {
    padding: 1.5rem;
}
.make-inner{
  padding: 1.5rem;
  text-wrap: balance;
}
.courses-section{
  padding-top: 2rem;
}
.banner-textwrap{
  text-wrap: balance; 
  padding: 20px 1rem;
}
.closbtn{
  right: 5px;
  top: 5px;
}
.nav-logo img {
  width: 60px;
}
}

@media screen and (max-width: 767.5px) {
  .actfact-section > img{
    width: 120px;
  }
  .courses-section-bg {
    padding: 2rem 0rem 2rem 0rem;
}
.mic_img {
  margin-bottom: 1rem;
}
.uxso-content-pro {
  padding-top: 0;
  display: inherit;
}
.pro_details {
  padding: 1rem;
  margin-left: 0;
}
.pro_details_img {
  display: block;
  align-items: center;
  text-align: center;
}
}
.form-control::placeholder {
  color: var(--black);
}
.footer-sec-bottom{
  background: #F4F6F8;
  color: #333333;
  text-align: center;
}

.small_cls {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0 0 20px 0;
  text-align: center;
}
.small_cls p {
  margin: 0;
}
.small_cls span {
  font-size: 0.8rem;
  text-align: right;
  padding-right: 6vw;
}
.courses-inline-boxlist > .btn-wrap {
  text-align: center;
}