/* @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap'); */
@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&display=swap');

*, body{
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}
body{
  color: #232020;
}
::-webkit-scrollbar-track{
  background:none;
}
#scrollable{
  position: relative;
  background-color: #ffffff;
}

@-moz-document url-prefix(){
  video::-webkit-media-controls{
      display: none !important;
  }
}


.app{
  height: 100%;
  overflow: auto;
}
.content{
  margin: 0 auto;
  max-width: 100%;
  min-height: 100%;
}
.disabled,
input[readonly],
input[disabled]{
  opacity: 0.3 !important;
  background-color: #f4f4f4;
}

/* Hide default controls */
video::-webkit-media-controls {
  display:none !important;
}
video::-webkit-media-controls-enclosure {
  display:none !important;
}
video::-webkit-media-controls-panel {
  display:none !important;
}

.relative{ position: relative !important; }
.absolute{ position: absolute !important; }

.pointer{ cursor: pointer !important; }

.d-grid{ display: grid !important; }
.d-flex{ display: flex !important; }
.d-block{ display: block !important; }
.d-table{ display: table !important; }
.d-iflex{ display: inline-flex !important; }
.d-iblock{ display: inline-block !important; }
.d-itable{ display: inline-table !important; }

.flex-1{ flex: 1 !important; }
.flex-row{ flex-direction: row !important; }
.flex-row-reverse{ flex-direction: row-reverse !important; }
.flex-column{ flex-direction: column !important; }
.flex-column-reverse{ flex-direction: column-reverse !important; }

.w-100{ width: 100% !important; }
.h-100{ height: 100% !important; }

.mb-025{ margin-bottom: 0.25rem !important; }
.mb-05{ margin-bottom: 0.5rem !important; }
.mb-1{ margin-bottom: 1rem !important; }
.mb-2{ margin-bottom: 2rem !important; }
.mb-3{ margin-bottom: 3rem !important; }
.mb-4{ margin-bottom: 4rem !important; }
.mb-5{ margin-bottom: 5rem !important; }

.mr-025{ margin-right: 0.25rem !important; }
.mr-05{ margin-right: 0.5rem !important; }
.mr-1{ margin-right: 1rem !important; }
.mr-2{ margin-right: 2rem !important; }
.mr-3{ margin-right: 3rem !important; }
.mr-4{ margin-right: 4rem !important; }
.mr-5{ margin-right: 5rem !important; }

.ml-025{ margin-left: 0.25rem !important; }
.ml-05{ margin-left: 0.5rem !important; }
.ml-1{ margin-left: 1rem !important; }
.ml-2{ margin-left: 2rem !important; }
.ml-3{ margin-left: 3rem !important; }
.ml-4{ margin-left: 4rem !important; }
.ml-5{ margin-left: 5rem !important; }

.mt-025{ margin-top: 0.25rem !important; }
.mt-05{ margin-top: 0.5rem !important; }
.mt-1{ margin-top: 1rem !important; }
.mt-2{ margin-top: 2rem !important; }
.mt-3{ margin-top: 3rem !important; }
.mt-4{ margin-top: 4rem !important; }
.mt-5{ margin-top: 5rem !important; }

.mtb-025{ margin: 0.25rem 0 !important; }
.mtb-05{ margin: 0.5rem 0 !important; }
.mtb-1{ margin: 1rem 0 !important; }
.mtb-2{ margin: 2rem 0 !important; }
.mtb-3{ margin: 3rem 0 !important; }
.mtb-4{ margin: 4rem 0 !important; }
.mtb-5{ margin: 5rem 0 !important; }

.mlr-025{ margin: 0 0.25rem !important; }
.mlr-05{ margin: 0 0.5rem !important; }
.mlr-1{ margin: 0 1rem !important; }
.mlr-2{ margin: 0 2rem !important; }
.mlr-3{ margin: 0 3rem !important; }
.mlr-4{ margin: 0 4rem !important; }
.mlr-5{ margin: 0 5rem !important; }

.m-025{ margin: 0.25rem !important; }
.m-05{ margin: 0.5rem !important; }
.m-1{ margin: 1rem !important; }
.m-0{ margin: 0 !important; }
.mt-0{ margin-top: 0 !important; }
.ml-0{ margin-left: 0 !important; }
.mr-0{ margin-right: 0 !important; }
.mb-0{ margin-bottom: 0 !important; }

.pb-025{ padding-bottom: 0.25rem !important; }
.pb-05{ padding-bottom: 0.5rem !important; }
.pb-1{ padding-bottom: 1rem !important; }
.pb-2{ padding-bottom: 2rem !important; }
.pb-3{ padding-bottom: 3rem !important; }
.pb-4{ padding-bottom: 4rem !important; }
.pb-5{ padding-bottom: 5rem !important; }

.pr-025{ padding-right: 0.25rem !important; }
.pr-05{ padding-right: 0.5rem !important; }
.pr-1{ padding-right: 1rem !important; }
.pr-2{ padding-right: 2rem !important; }
.pr-3{ padding-right: 3rem !important; }
.pr-4{ padding-right: 4rem !important; }
.pr-5{ padding-right: 5rem !important; }

.pl-025{ padding-left: 0.25rem !important; }
.pl-05{ padding-left: 0.5rem !important; }
.pl-1{ padding-left: 1rem !important; }
.pl-2{ padding-left: 2rem !important; }
.pl-3{ padding-left: 3rem !important; }
.pl-4{ padding-left: 4rem !important; }
.pl-5{ padding-left: 5rem !important; }

.pt-025{ padding-top: 0.25rem !important; }
.pt-05{ padding-top: 0.5rem !important; }
.pt-1{ padding-top: 1rem !important; }
.pt-2{ padding-top: 2rem !important; }
.pt-3{ padding-top: 3rem !important; }
.pt-4{ padding-top: 4rem !important; }
.pt-5{ padding-top: 5rem !important; }

.ptb-025{ padding: 0.25rem 0 !important; }
.ptb-05{ padding: 0.5rem 0 !important; }
.ptb-1{ padding: 1rem 0 !important; }
.ptb-2{ padding: 2rem 0 !important; }
.ptb-3{ padding: 3rem 0 !important; }
.ptb-4{ padding: 4rem 0 !important; }
.ptb-5{ padding: 5rem 0 !important; }

.plr-025{ padding: 0 0.25rem !important; }
.plr-05{ padding: 0 0.5rem !important; }
.plr-1{ padding: 0 1rem !important; }
.plr-2{ padding: 0 2rem !important; }
.plr-3{ padding: 0 3rem !important; }
.plr-4{ padding: 0 4rem !important; }
.plr-5{ padding: 0 5rem !important; }

.p-025{ padding: 0.25rem !important; }
.p-05{ padding: 0.5rem !important; }
.p-1{ padding: 1rem !important; }
.p-0{ padding: 0 !important; }
.pt-0{ padding-top: 0 !important; }
.pl-0{ padding-left: 0 !important; }
.pr-0{ padding-right: 0 !important; }
.pb-0{ padding-bottom: 0 !important; }

.fw-100{ font-weight: 100 !important; }
.fw-200{ font-weight: 200 !important; }
.fw-300{ font-weight: 300 !important; }
.fw-400{ font-weight: 400 !important; }
.fw-500{ font-weight: 500 !important; }
.fw-600{ font-weight: 600 !important; }
.fw-700{ font-weight: 700 !important; }
.fw-800{ font-weight: 800 !important; }
.fw-900{ font-weight: 900 !important; }
.fw-unset{ font-weight: unset !important }
.fw-bold{ font-weight: bold !important; }
.fw-bolder{ font-weight: bolder !important; }
.fw-normal{ font-weight: normal !important; }
.fw-lighter{ font-weight: lighter !important }

.align-start{ align-items:flex-start !important; }
.align-center{ align-items:center !important; }
.align-end{ align-items:flex-end !important; }
.align-self-start{ align-self:flex-start !important; }
.align-self-center{ align-self:center !important; }
.align-self-end{ align-self:flex-end !important; }

.justify-start{ justify-content:flex-start !important; }
.justify-center{ justify-content:center !important; }
.justify-end{ justify-content:flex-end !important; }
.justify-space-between{ justify-content:space-between !important; }
.justify-self-start{ justify-self:flex-start !important; }
.justify-self-center{ justify-self:center !important; }
.justify-self-end{ justify-self:flex-end !important; }

.text-left{ text-align: left !important; }
.text-right{ text-align: right !important; }
.text-center{ text-align: center !important; }
.text-justify{ text-align: justify !important; }

.hover-underline{ text-decoration: none !important; }
.hover-underline:hover{ text-decoration: underline !important; }

.text-underline{ text-decoration: underline !important; }
.cursor-pointer{ cursor: pointer !important }

.o-hidden{ overflow: hidden !important; }

.lighter-purple{ color: #CD6688 !important; }
.light-purple{ color: #7A316F !important; }
.dark-green{ color: #388087 !important; }
.orange{ color: #f06423 !important; }
.purple{ color: #461959 !important; }
.green{ color: #05996f !important; }
.black{ color: #000000 !important; }
.gold{ color: #EFCA00 !important; }
.blue{ color: #0f5fe7 !important; }
.red{ color: #ff4444 !important; }

.black-gradient{ 
  background: -webkit-linear-gradient(45deg, #131313 , #757575 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.no-bg{ background: none !important; }
.transparent{ background-color: transparent !important; }
.overlay{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.44;
  position: absolute;
  background-color: #ffffff;
}

.bold{ font-weight: 600; }

.external-link{
  display: flex;
  color: #0f5fe7;
  align-items: center;
  text-decoration: none;
}
.external-link i{
  margin-left: 0.5rem;
}
.external-link:hover{
  text-decoration: none;
}

input::placeholder,
input::-webkit-input-placeholder,
input::-ms-input-placeholder{
  font-size: 1rem;
  color: #D9D9D9;
  font-style: italic;
  line-height: 1.25rem;
}

.smartjobs-btn{
  color: #7A316F;
  font-size: 0.9rem;
  border-radius: 0.5rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid #7A316F;
  background-color: transparent;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.smartjobs-btn:hover{
  background-color: #eeeaff;
}

/* Buttons */
.smartjobs-round-btn{
  display: flex;
  font-size: 1rem;
  color: #2F2F2F;
  line-height: 1.7;
  align-items: center;
  border-radius: 20rem;
  padding: 0.25rem 1rem;
  border: 1px solid #2F2F2F;
  background-color: transparent;
  justify-content: space-between;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.smartjobs-round-btn:hover{
  text-decoration: none;
}
.smartjobs-round-btn span{
  color: #2F2F2F;
  font-weight: 500;
  line-height: 1.75;
  margin-right: 0.5rem;
}
.smartjobs-round-btn i{
  color: #461959;
  font-weight: 500;
  font-size: 1.15rem;
}
.smartjobs-round-btn:hover{
  background-color: #eeeaff;
}

.smartjobs-round-btn.blue{
  color: #ffffff !important;
  border: 1px solid #7A316F;
  background-color: #7A316F;
}
.smartjobs-round-btn.blue i,
.smartjobs-round-btn.blue span{
  color: #ffffff !important;
}
.smartjobs-round-btn.blue:hover{
  background-color: #775ee9;
}

.smartjobs-round-btn.purple{
  color: #ffffff !important;
  border: 1px solid #461959;
  background-color: #461959;
}
.smartjobs-round-btn.purple i,
.smartjobs-round-btn.purple span{
  color: #ffffff !important;
}
.smartjobs-round-btn.purple:hover{
  background-color: #763d8f;
}

.smartjobs-round-btn.white{
  color: #2F2F2F !important;
  border: 1px solid #2F2F2F;
  background-color: #ffffff;
}
.smartjobs-round-btn.white i,
.smartjobs-round-btn.white span{
  color: #2F2F2F !important;
}
.smartjobs-round-btn.white:hover{
  background-color: #e4e4e4;
}


/* Header */
.navbar-wrapper{
  top: 0;
  z-index: 9;
  height: 80px;
  position: sticky;
  background-color: #ffffff;
}
.navbar-section{
  z-index: 1;
  position: relative;
  background-color: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}
.navbar-menu{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand,
.navbar-menu button{
  width: 15%;
}
.navbar-brand{
  color: #232020;
}
.navbar-nav{
  width: 65%;
  display: flex;
  list-style: none;
  margin-right: 2rem; 
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
}
.nav-item{
  margin-right: 3rem;
}
.nav-item:last-child{
  margin-right: 0;
}
.nav-link{
  cursor: pointer;
  color: #9E9E9E;
  font-weight: 500;
  font-size: 1.05rem;
  transition: color 0.2s ease-in-out;
}
.nav-link:hover,
.nav-link.active{
  color: #461959;
}
.nav-link.blue{
  color: #0f5fe7 !important;
}

.navbar-notice{
  padding: 1rem;
  font-size: 0.9rem;
  text-align: center;
  background-color: #7A316F15;
}
.navbar-notice a{
  margin: 0;
  font-size: 0.9rem;
  text-align: center;
  color: #7A316F !important;
  text-decoration: underline !important;
}

.lang-menu{
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}
.lang-menu:hover{
  opacity: 1;
}
.lang-menu img{
  width: 24px;
  height: 24px;
}


/* Banner Area */
.banner-area{
  display: flex;
  position: relative;
  align-items: flex-start;
  height: calc(100vh - 80px);
  background-image: url("../smartjobs/assets/banner.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.banner-context{
  top: 0;
  left: 0;
  width: 60%;
  opacity: 0;
  position: absolute;
  transition: opacity 0.2s ease-in-out;
}
.banner-context.fade-in{
  opacity: 1;
}
.banner-area > div{
  width: 60%;
}
.banner-area h1{
  font-size: 3rem;
  font-weight: 400;
  line-height: 4rem;
  text-align: center;
  margin-bottom: 5rem;
}
.carousel-container{
  width: 75%;
  display: flex;
  position: relative;
  align-items: center;
  transform: translateX(0);
  transition: all 400ms ease-in-out;
}
.carousel-text{
  opacity: 0;
  min-width: 100%;
  position: relative;
  transition: all 400ms ease-in-out;
}
.carousel-text.active{
  opacity: 1;
}

/* Language Menu */
.language-menu-parent{
  cursor: pointer;
  position: relative;
}
.language-menu-parent .noti-handle{
  margin-right: 0;
}
.language-container{
  width: 6rem;
  display: flex;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.95rem;
  margin-right: 1rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid #434b62;
  background-color: #434b62;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 7%);
}
.language-menu{
  right: 0;
  opacity: 0;
  z-index: -1;
  top: 1.5rem;
  width: 7.75rem;
  list-style: none;
  position: absolute;
  visibility: hidden;
  padding-top: 1.5rem;
  transform: translateY(-1rem);
  transition: all 0.1s ease-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.language-menu:before{
  width: 0;
  height: 0;
  top: 12px;
  content: "";
  bottom: 100%;
  right: 0.25rem;
  position: absolute;
  border-style: solid;
  border-color: #e7e7e7 transparent;
  border-width: 0 0.75rem 0.75rem 0.75rem;
}
.language-menu li{
  position: relative;
  padding: 0 !important;
  background: #FFFFFF;
  border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.07);
}
.language-menu li:first-child{
  border-top: 1px solid #e7e7e7;
  border-radius: 0.25rem 0.25rem 0 0;
}
.language-menu li:last-child{
  border-bottom: 1px solid #e7e7e7;
  border-radius: 0 0 0.25rem 0.25rem;
}
.language-menu li a{
  display: flex;
  font-size: 0.9rem;
  align-items: center;
  padding: 0.5rem 0.75rem; 
  justify-content: flex-start;
}
.language-container i,
.language-menu li a i{
  margin-right: 0.5rem;
}
.language-menu li a.active{
  color: #206bc4;
  font-weight: bold;
  background-color: #f7f7f7;
}
.language-menu.open{
  opacity: 1;
  z-index: 1;
  visibility: visible;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}
.goog-te-banner-frame.skiptranslate{
  display:none!important;
}
body{
  top:0px!important;
}
/* Language Menu */


.banner-control{
  display: flex;
  align-items: center;
  margin-bottom: 5rem;
}
.banner-control a{
  font-size: 0.85rem;
  color: #2F2F2F !important;
}
.carousel-bullets{
  display: flex;
  list-style: none;
  margin-bottom: 5px;
  align-items: center;
  margin-inline: 15px;
}
.carousel-bullets li{
  margin-right: 1rem;
}
.carousel-bullets li:last-child{
  margin-right: 0;
}
.carousel-bullets li span{
  content: '';
  width: 10px;
  height: 10px;
  display: flex;
  cursor: pointer;
  border-radius: 1rem;
  background-color: #D9D9D9;
  transition: background-color 0.2s ease-in-out;
}
.carousel-bullets li.active span{
  background-color: #2F2F2F;
}
.carousel-action{
  display: flex;
  list-style: none;
  align-items: center;
}
.carousel-action li{
  width: 2rem;
  height: 2rem;
  display: flex;
  cursor: pointer;
  color: #ffffff;
  font-size: 0.85rem;
  border-radius: 50%;
  margin-right: 1rem;
  align-items: center;
  justify-content: center;
  background-color: #ffffff25;
}
.carousel-action li:last-child{
  margin-right: 0;
}
.carousel-card{
  opacity: 0;
  z-index: -1;
  display: none;
  transition: all 400ms ease-in-out;
}
.carousel-card.active{
  z-index: 1;
  opacity: 1;
  display: flex;
}
.carousel-card h4{
  font-size: 1.5rem;
  font-weight: 300;
  margin-block: 1.5rem;
  line-height: 2.25rem;
}


/* Learn Area */
.learn-area{
  background-image: url("../assets/learn-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.learn-content{
  display: flex;
  padding: 7rem 0;
  align-items: center;
  flex-direction: column;
}
.learn-content h2{
  width: 70%;
  color: #000000;
  line-height: 1.5;
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 5rem;
}
.learn-content ol{
  display: flex;
  flex-direction: column;
}
.learn-content ol li{
  color: #7A316F;
  font-size: 1.25rem;
  padding-block: 1rem;
}
.learn-card-wrapper{
  display: flex;
  align-items: center;
}
.learn-card{
  width: 25%;
  display: flex;
  box-shadow: none;
  min-height: 15rem;
  margin-right: 1rem;
  border-radius: 1rem;
  box-sizing: border-box;
  flex-direction: column;
  padding: 2.25rem 1.5rem;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid #BBBBBB;
  background-color: #ffffff;
  transition: box-shadow 0.2s ease-in-out;
}
.learn-card:hover{
  box-shadow: 0px -9px 12px 0px rgba(0, 0, 0, 0.2);
}
.learn-card img{
  width: 24px;
  height: 24px;
  margin-bottom: 0.5rem;
}
.learn-card h4{
  color: #000000;
  font-weight: 500;
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.learn-card small{
  color: #4D4D4D;
  font-weight: 400;
}
.learn-card:last-child{
  margin-right: 0;
}
.program-card-wrapper{
  display: flex;
  align-items: flex-start;
}
.program-card{
  display: flex;
  text-align: center;
  margin-right: 2rem;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.program-card img{
  width: 120px;
  border-radius: 1rem;
  margin-bottom: 1rem;
}
.program-card span{
  font-size: 1rem;
  color: #7A316F;
  font-weight: 500;
  line-height: 1.35rem;
}
.program-card:last-child{
  margin-right: 0;
}


/* Platform Area */
.platform-area{
  background-image: url("../assets/platform.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.platform-wrapper{
  display: flex;
  padding: 7rem 0;
  align-items: center;
  flex-direction: column;
}
.platform-wrapper h2{
  width: 70%;
  color: #000000;
  line-height: 1.5;
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 3rem;
}
.platform-items{
  width: 100%;
  display: flex;
  list-style: none;
  align-items: center;
  transform: translateY(2px);
  justify-content: space-around;
  border-bottom: 2px solid #bbbbbb;
  box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.07);
}
.platform-items li{
  cursor: pointer;
  color: #000000;
  font-weight: 500;
  font-size: 1.25rem;
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  border-radius: 0.5rem 0.5rem 0 0;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.platform-items li.active{
  color: #263D8D;
  background-color: #46195915;
}
.platform-content{
  display: flex;
  align-items: center;
  padding: 1rem 1rem 1rem 5rem;
}
.platform-content img{
  margin-left: 1rem;
}
.platform-content ul{
  display: flex;
  flex-direction: column;
}
.platform-content li{
  margin-bottom: 4rem;
}
.platform-content li:last-child{
  margin-bottom: 0;
}
.platform-content li h5{
  color: #292D32;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.platform-content li span{
  color: #292D32;
  font-size: 0.95rem;
}


/* Progam Area */
.program-wrapper{
  display: flex;
  padding: 5rem 0;
  align-items: center;
  flex-direction: column;
}
.program-wrapper h2{
  width: 70%;
  color: #000000;
  line-height: 1.5;
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 3rem;
}
.program-wrapper ul{
  width: 50%;
  padding: 0;
  margin: 1rem 0;
  list-style: none;
  position: relative;
  padding-left: 69px;
}
.program-wrapper ul::before{
  top: 0;
  width: 2px;
  left: 69px;
  content: '';
  height: 100%;
  position: absolute;
  background-color: #BBBBBB;
}
.program-wrapper li{
  cursor: pointer;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 2rem;
}
.program-wrapper li:last-child{
  margin-bottom: 0;
}
.program-wrapper li > small{
  top: 0;
  left: 0;
  width: 2px;
  content: '';
  height: 100%;
  position: absolute;
  background-color: transparent;
}
.program-wrapper li > small::after{
  top: 5px;
  left: -7px;
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  border-radius: 50%;
  border: 2px solid #9E9E9E;
  background-color: #ffffff;
  animation: pulse-green 2s infinite;
}
.program-wrapper li:first-child > small::after{
  top: 0;
}
.program-wrapper li.active > small::after{
  border-color: #461959;
}
.program-wrapper li h4{
  color: #9E9E9E;
  line-height: 1.5;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.program-wrapper li span{
  height: 0;
  color: #494747;
  display: block;
  overflow: hidden;
  font-size: 0.95rem;
  transition: all 0.2s ease-in;
}
.program-wrapper li.active h4{
  line-height: 1;
  color: #2F2F2F;
  font-size: 1.75rem;
}
.program-wrapper li.active span{
  height: auto;
}


/* Supporting Organization */
#supporting{
  background-color: #FDFDFD;
}
.supporting-wrapper{
  width: 100%;
  display: flex;
}
.supporting-icons{
  flex: 1;
  display: flex;
  margin-top: 2rem;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  transition: transform 1s ease-in-out;
}
.supporting-icon{
  height: auto;
  flex: 0 0 calc(100% / 6);
}
.supporting-icon a{
  display: block;
  margin: 0 1rem;
}
.supporting-icon img{
  width: 100%;
  height: 100%;
}



/* Contact Area */
#contact{
  background-color: #FAF3F4;
}
.company-area{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.company-area p{
  color: #4D4D4D;
  font-size: 0.85rem;
}
.smartjobs-social{
  display: flex;
  list-style: none;
  align-items: center;
}
.smartjobs-social li{
  margin-right: 1rem;
}
.smartjobs-social li:last-child{
  margin-right: 0;
}
.contact-wrapper{
  border-left: 1px solid #e4e4e4;
}
.company-contact{
  display: flex;
  margin-top: 1rem;
  flex-direction: column;
  align-items: flex-start;
}
.company-contact h4{
  color: #000000;
  margin-bottom: 1rem;
}
.company-address{
  display: flex;
  margin-bottom: 2rem;
  align-items: flex-start;
}
.company-address img{
  width: 26px;
  margin-right: 0.55rem;
}
.company-address span{
  width: 85%;
  color: #4D4D4D;
  font-size: 0.85rem;
}
.company-whatsapp{
  display: flex;
  margin-bottom: 1rem;
  align-items: center;
}
.company-whatsapp img{
  width: 26px;
  margin-right: 0.55rem;
}
.company-whatsapp span{
  color: #4D4D4D;
  font-size: 0.85rem;
}
.whatsapp-numbers{
  width: 85%;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-left: 2.5rem;
}
.whatsapp-numbers li{
  font-size: 0.85rem;
  margin-right: 2rem;
  margin-bottom: 0.5rem;
}
.whatsapp-numbers li:last-child{
  margin-right: 0;
  margin-bottom: 0;
}
.whatsapp-numbers li a,
.whatsapp-numbers li a:hover{
  text-decoration: none;
}
.whatsapp-numbers label{
  margin: 0;
  width: 7rem;
}
.whatsapp-numbers span{
  color: #4C535F;
}


.support-whatsapp{
  top: 90vh;
  z-index: 1;
  right: 3rem;
  position: fixed;
  border-radius: 50%;
  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25);
}
.support-whatsapp img{
  width: 64px;
}


/* Technology Area */
.technology-area{
  display: flex;
  align-items: center;
  padding: 5rem 0 3rem;
  flex-direction: column;
  overflow: hidden;
  background-image: url("../assets/operation-silver.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.technology-heading{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.technology-heading h2{
  color: #000000;
  line-height: 1.5;
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 5rem;
}
.technology-wrapper{
  margin: 0 auto;
}
.technology-card{
  display: flex;
  cursor: default;
  padding: 1.5rem;
  min-height: 22rem;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  border: 1px solid #BBBBBB;
  background-color: #ffffff;
  transition: box-shadow 0.2s ease-in-out;
}
.technology-card .technology-head{
  display: flex;
  margin-bottom: 2rem;
  align-items: flex-start;
  justify-content: space-between;
}
.technology-card .technology-head{
  width: 100%;
}
.technology-card .technology-head h3{
  width: 60%;
  color: #461959;
  text-align: left;
  line-height: 2rem;
  font-size: 1.35rem;
  transition: color 0.2s ease-in-out;
}
.technology-card .technology-head i{
  color: #CD6688;
  font-size: 1.5rem;
  transition: color 0.2s ease-in-out;
}
.technology-card span{
  color: #4D4D4D;
  font-weight: 400;
  text-align: left;
  font-size: 0.85rem;
  transition: color 0.2s ease-in-out;
}
.technology-card:hover{
  box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0.15);
  background: linear-gradient(45deg, #7A316F 19.66%, #CD6688 76.25%);
}
.technology-card:hover span,
.technology-card:hover .technology-head i,
.technology-card:hover .technology-head h3{
  color: #ffffff;
}


/* Opportunity Area */
.opportunity-area{
  background-image: url("../assets/opportunity-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.opportunity-content{
  display: flex;
  padding: 5rem 0;
  align-items: center;
  flex-direction: column;
}
.opportunity-content h2{
  width: 75%;
  color: #000000;
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 5rem;
}
.opportunity-slider-wrapper{
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
}
.slider-image{
  width: 75%;
  display: flex;
  position: relative;
  align-items: center;
  transform: translateX(0);
  transition: all 400ms ease-in-out;
}
.slider-image .video-wrapper{
  padding: 0;
  opacity: 1;
  min-width: 100%;
  background: none;
  overflow: hidden;
  box-shadow: none;
  filter: blur(2px);
  object-fit: cover;
  position: relative;
  transform: scale(0.9);
  border: 1px solid #bbbbbb;
  border-radius: 2rem !important;
  transition: all 400ms ease-in-out;
}
.slider-image .video-wrapper.active{
  z-index: 1;
  filter: blur(0);
  transform: scale(1.05);
  box-shadow: 0 2.86px 28.56px 7.14px rgba(0,0,0,0.25);
}
.slider-image video{
  display: flex;
  padding: 0 !important;
  background: none !important;
}
.slider-control{
  display: flex;
  list-style: none;
  margin-top: 5rem;
  position: relative;
  align-items: center;
}
.slider-control li{
  cursor: pointer;
  margin-right: 2.5rem;;
}
.slider-control li:first-child{
  margin-right: 5rem;
}
.slider-control li:last-child{
  margin-right: 0;
  margin-left: 5rem;
}
.slider-control li i{
  cursor: pointer;
  color: #7A316F;
  padding: 0.25rem;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #BBBBBB;
  background-color: #ffffff;
}
.slider-control li span{
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  border-radius: 50%;
  background-color: #D9D9D9;
  transition: background-color 0.2s ease-in-out;
}
.slider-control li.active span{
  background-color: #7A316F;
}
.opportunity-slider-mobile-wrapper{
  display: none;
  overflow: hidden;
}
.slider-mobile-image{
  width: 100%;
  display: flex;
  padding: 1rem;
  position: relative;
}
.slider-mobile-image a{
  line-height: 1;
  cursor: pointer;
  color: #7A316F;
  padding: 0.35rem;
  font-size: 1.1rem;
  border-radius: 50%;
  position: absolute;
  text-align: center;
  border: 1px solid #BBBBBB;
  background-color: #ffffff;
}
.slider-mobile-image a:first-child{
  left: 0;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}
.slider-mobile-image a:last-child{
  right: 0;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}
.slider-mobile-image img{
  width: 90%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 1rem;
  border: 4px solid #f7f7f7;
  transition: all 400ms ease-in-out;
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
}
.slider-mobile-control{
  display: none;
  list-style: none;
  margin-top: 2rem;
  position: relative;
  align-items: center;
}
.slider-mobile-control li{
  margin-right: 2rem;
}
.slider-mobile-control li:last-child{
  margin-right: 0;
}
.slider-mobile-control li i{
  cursor: pointer;
  color: #7A316F;
  padding: 0.25rem;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #BBBBBB;
  background-color: #ffffff;
}
.slider-mobile-control li span{
  top: 0;
  width: 1rem;
  height: 1rem;
  position: absolute;
  border-radius: 50%;
  background-color: #D9D9D9;
  transition: background-color 0.2s ease-in-out;
}
.slider-mobile-control li.active span{
  background-color: #7A316F;
}


/* Committee Area */
.committee-area{
  background-color: #EFF3F7;
  position: relative;
  padding: 5rem 0;
  z-index: 1;
}
.committee-container{
  width: 100%;
  display: flex;
  padding: 5rem 0;
  position: relative;
  align-items: center;
  transform: translateX(0);
  transition: all 400ms ease-in-out;
}
.committee-item{
  opacity: 0;
  display: flex;
  min-width: 100%;
  position: relative;
  align-items: center;
  flex-direction: column;
  transition: all 400ms ease-in-out;
}
.committee-item.active{
  opacity: 1;
}
.committee-item h2{
  width: 75%;
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 2rem;
}
.committee-item p{
  width: 75%;
  color: #4d4d4d;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  font-size: 1.25rem;
  margin-block: 1rem 2rem;
}


/* About Area */
.about-area{
  background-image: url("../smartjobs/assets/about-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ffffff;
  position: relative;
  padding: 5rem 0;
  z-index: 1;
}
.practice-content h2{
  text-align: center;
  margin-bottom: 5rem;
}
.practice-items{
  display: flex;
  list-style: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.practice-card{
  display: flex;
  padding: 1rem;
  margin-bottom: 1rem;
  align-items: flex-start;
}
.practice-card .practice-img{
  width: 10rem;
  display: flex;
  max-width: 10rem;
  align-items: center;
  justify-content: center;
}
.practice-card img{
  width: 7rem;
  transition: width 0.2s ease-in-out;
}
.practice-info{
  flex: 1;
  margin-left: 2rem;
}
.practice-info h5{
  font-size: 2rem;
  color: #1e1e1e;
  font-weight: 500;
  margin-bottom: 1rem;
  transition: all 0.2s ease-in-out;
}
.practice-desc p,
.practice-desc a,
.practice-desc span{
  color: #4d4d4d;
  font-weight: 500;
  font-size: 1.25rem;
}
.practice-desc a{
  font-weight: 600;
}
.practice-card.active img{
  width: 10rem;
}
.practice-card.active .practice-info h5{
  color: #8D485F;
  font-size: 2.25rem;
}


/* Team Area */
.team-area{
  background-image: url("../assets/bg-last-illustration.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  background-color: #ffffff;
  position: relative;
  padding: 5rem 0;
  z-index: 1;
}
.team-content{
  display: flex;
  align-items: center;
  padding: 5rem 0 2rem;
  flex-direction: column;
}
.team-content h2{
  width: 75%;
  color: #7A316F;
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 3rem;
}
.team-content h5{
  width: 75%;
  color: #4D4D4D;
  opacity: 0.8;
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 2rem;
  line-height: 1.7;
}
.team-content h4{
  width: 75%;
  color: #000000;
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 5rem;
  line-height: 2.35rem;
}
.team-wrapper{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card{
  width: 100%;
  display: flex;
  padding: 2rem;
  cursor: default;
  max-width: 20rem;
  margin-right: 2rem;
  align-items: center;
  border-radius: 1rem;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #787486;
  background-color: #ffffff;
  transition: box-shadow 0.2s ease-in-out;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
}
.team-card:last-child{
  margin-right: 0;
}
.team-card:hover{
  box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0.15);
}
.team-card img{
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.team-card h4{
  color: #232020;
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.team-card span{
  font-size: 1rem;
  color: #1e1e1e;
  text-align: center;
}
.team-content p{
  width: 75%;
  font-size: 1rem;
  color: #4D4D4D;
  line-height: 1.5;
  margin-top: 3rem;
  text-align: center;
}

.team-about-wrapper{
  display: flex;
  align-items: stretch;
}
.team-about-items{
  margin: 0;
  width: 35%;
  display: flex;
  list-style: none;
  align-items: flex-end;
  flex-direction: column;
}
.team-about-items li{
  cursor: pointer;
  color: #9E9E9E;
  font-weight: 500;
  font-size: 1.35rem;
  padding: 1.5rem 2.5rem;
  border-right: 4px solid #DBDBDB;
  transition: color 0.2s ease-in-out, border-right-color 0.2s ease-in-out;
}
.team-about-items li:hover{
  color: #afc0ff;
  border-right-color: #b9c5fc;
}
.team-about-items li.active{
  color: #263D8D;
  border-right-color: #2C4CF5;
}
.team-about-info{
  flex: 1;
  padding: 2rem;
  color: #4D4D4D;
  font-size: 1.2rem;
  margin-left: 2rem;
  line-height: 1.9rem;
  border-radius: 1rem;
  border: 1px solid #BBBBBB;
  background-color: #ffffff;
}
.team-profile{
  background-color: #ffffff;
  background-image: url("../assets/about-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 60rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9d9d9;
}
.team-profile a{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.financial-content{
  display: flex;
  padding: 5rem 0;
  align-items: center;
  flex-direction: column;
}
.financial-content h2{
  width: 75%;
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 2rem;
}
.financial-content p{
  width: 75%;
  color: #4d4d4d;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  font-size: 1.25rem;
  margin-block: 1rem 2rem;
}


/* Potential Area */
.potential-area{
  padding: 5rem 0;
  background-color: #ffffff;
}
.potential-content{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.potential-content h2{
  width: 75%;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
}
.potential-content h6{
  font-size: 2rem;
}
.potential-content p{
  width: 75%;
  color: #676767;
  margin-top: 2rem;
  line-height: 1.5;
  text-align: center;
  font-size: 1.25rem;
}
.potential-content p a{
  color: #461959 !important;
}


/* Footer Area */
.footer-area{
  background-color: #2F2F2F;
}
.footer-section{
  padding: 2rem 0;
}
.copyright-area{
  color: #ffffff;
  background-color: #1e1e1e;
}
.footer-text{
  width: 51%;
  display: flex;
  margin: 0 auto;
  color: #ffffff;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.footer-text a{
  color: #ffffff !important;
}
.footer-widget{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.footer-section h4{
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0;
  color: #292D32;
}
.footer-section ul{
  display: flex;
  list-style: none;
  flex-direction: column;
}
.footer-section li{
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.footer-section li a{
  color: #000000 !important;
}
.footer-section li:last-child{
  margin-bottom: 0;
}
.footer-logo{
  margin-bottom: 0;
  display: inline-block;
}
.footer-item p{
  color: #000000;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}
.social-logo{
  display: flex;
  align-items: center;
}
.social-logo a{
  display: flex;
  padding: 0.5rem;
  margin-right: 1rem;
  align-items: center;
  border-radius: 0.3rem;
  justify-content: center;
}
.social-logo a:last-child{
  margin-right: 0;
}
.social-logo a.facebook{
  color: #2A87D8;
  border: 1px solid #2A87D8;
  background-color: #ffffff;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.social-logo a.facebook:hover{
  color: #ffffff;
  text-decoration: none;
  background-color: #2A87D8;
}
.social-logo a.twitter{
  color: #6ECFFF;
  border: 1px solid #6ECFFF;
  background-color: #ffffff;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.social-logo a.twitter:hover{
  color: #ffffff;
  text-decoration: none;
  background-color: #6ECFFF;
}
.social-logo a.linkedin{
  color: #0A66C2;
  border: 1px solid #0A66C2;
  background-color: #ffffff;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.social-logo a.linkedin:hover{
  color: #ffffff;
  text-decoration: none;
  background-color: #0A66C2;
}
.footer-item ul li a{
  font-weight: 400;
  color: #000000 !important;
  transition: color 0.2s ease-in-out;
}
.footer-item ul li a:hover{
  text-decoration: none;
  color: #461959 !important;
}

/* Email About-Us */
.team-members{
  background-color: #FFFFFF;
  margin: 5rem;
  overflow: hidden;
}
.team-member-info{
  display: flex;
  align-items: flex-start;
  background-color: #FFFFFF;
  border: 1px solid #BBBBBB;
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2rem;
}
.team-member-info:last-child{
  margin-bottom: 0;
}
.team-member-info img{
  border: 1px solid #BBBBBB;
  border-radius: 10px;
  max-width: 13rem;
  max-height: 14rem;
  margin-right: 2rem;
  object-fit: contain;
}
.team-member-info h5{
  color: #000;
  font-size: 2rem;
  font-weight: 600;
}
.team-member-info p{
  color: #787486;
  font-size: 1.15rem;
  font-weight: 400;
  overflow: hidden;
}


.coutry-list li{
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.coutry-list li:last-child{
  margin-bottom: 0;
}
.coutry-list li img{
  width: 16px;
  height: 12px;
  margin-right: 8px;
}
.coutry-list li small{
  font-weight: 600;
  font-size: 0.725rem;
}


.navbar-mobile{
  display: none;
}
.mobile-navmenu{
  display: none;
  padding: 0.5rem;
  font-size: 1.5rem;
  border-radius: 0.25rem;
  border: 1px solid #afafaf;
  color: #4d4d4d !important;
}
.technology-wrapper-mobile{
  display: none;
}

.tips{
  color: #232020;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.65rem;
}
.desktop-view{
  display: block;
}
.spacing,
.mobile-view,
.mobile-spacing{
  display: none;
}
/* Responsive CSS */
@media(min-width: 576px){
  .content{
    max-width: 540px;
  }
}

@media(min-width: 768px){
  .content{
    max-width: 720px;
  }
}

@media(min-width: 992px){
  .content{
    max-width: 960px;
  }
}

@media(min-width: 1200px){
  .content{
    max-width: 1140px;
  }
}

@media(min-width: 1400px){
  .content{
    max-width: 1320px;
  }
}



@media(min-width: 1441px) and (max-width: 1920px){
  .team-profile{
    height: 65rem
  }
}

@media(min-width: 767px) and (max-width: 900px){
  .team-profile{
    height: 40rem
  }
}


@media(max-width: 767px){
  .desktop-view{
    display: none;
  }
  .mobile-view{
    display: block;
  }
  .spacing{
    height: 10rem;
    display: block;
  }
  .mobile-spacing{
    display: block;
    padding: 2rem 0;
  }

  .video-content .video-wrapper{
    width: 75vw;
    height: 75vh;
  }

  .navbar-nav,
  .navbar-menu .smartjobs-btn{
    display: none;
  }
  .navbar-mobile,
  .mobile-navmenu{
    display: flex;
  }
  .navbar-mobile-menu{
    left: 0;
    right: 0;
    opacity: 0;
    z-index: -1;
    top: 7.25rem;
    display: flex;
    list-style: none;
    position: absolute;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
    background-image: url("../assets/mobile-menu-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    transform: translateY(-150%);
    transition: opacity 0.1s ease-in-out;
  }
  .navbar-mobile-menu.visible{
    opacity: 1;
    z-index: 1;
    transform: translateY(0);
  }
  .navbar-brand{
    width: auto;
  }
  .navbar-mobile-menu li{
    width: 100%;
    padding: 1.5rem;
    text-align: center;
    box-sizing: border-box;
  }
  .navbar-mobile-menu a{
    color: #232020;
    font-weight: 500;
    font-size: 1.2rem;
  }
  .navbar-mobile-menu a.active{
    color: #461959;
    text-decoration: none;
  }
  .lang-menu{
    opacity: 1;
    margin-right: 1rem;
  }
  .lang-menu img{
    width: 20px;
    height: 20px;
  }

  .banner-area{
    height: auto;
    flex-direction: column;
  }
  .banner-area > div{
    width: 90%;
  }
  .banner-area h1{
    text-align: center;
    font-size: 1.35rem;
    margin-bottom: 1rem;
    line-height: 1.75rem;
  }
  .banner-control{
    margin-block: 2rem;
  }
    
  .committee-item h2{
    font-size: 1.65rem;
    line-height: 2.5rem;
    margin-bottom: 1.5rem;
  }

  .video-info{
    padding: 0.75rem;
  }

  .company-area{
    align-items: center;
  }
  .company-area p{
    text-align: center;
  }
  .company-contact h4{
    margin-top: 2rem;
    text-align: center;
    align-self: center;
  }
  .company-address{
    width: 75%;
    align-self: center;
  }
  .company-whatsapp{
    margin-top: 1rem;
    align-self: center;
  }
  .whatsapp-numbers{
    margin-left: 0;
    align-self: center;
    margin-top: 0.5rem;
    justify-content: center;
  }
  .whatsapp-numbers li{
    margin-bottom: 1rem;
    margin-right: 0.5rem;
  }


  #about-doug,
  #technology,
  #methodology,
  .potential-area,
  .learn-content,
  .opportunity-content,
  #benefits .platform-wrapper{
    padding: 4rem 0 2rem !important;
  }
  .team-content h2,
  .program-wrapper h2,
  .learn-content h2,
  .platform-wrapper h2,
  .potential-content h2,
  .technology-heading h2,
  .opportunity-content h2{
    width: 90%;
    font-size: 1.1rem;
    margin-top: 1.5rem;
    line-height: 1.75rem;
  }

  .potential-content h6{
    font-size: 1.5rem;
    text-align: center;
  }
  .potential-content p{
    width: 90%;
    font-size: 1.1rem;
    margin-top: 1.5rem;
    line-height: 1.75rem;
  }

  .learn-content h2{
    width: 95%;
    font-size: 1.35rem;
    text-align: center;
    margin-bottom: 1rem;
  }
  .learn-content ol{
    width: 80%;
    align-items: center;
  }
  .learn-content ol li{
    font-size: 1.15rem;
    margin-left: 0.75rem;
    padding-block: 0.75rem;
  }

  .program-card-wrapper{
    margin-top: 2rem;
    flex-direction: column;
  }
  .program-card{
    width: 50%;
    margin-inline: auto;
    margin-bottom: 2rem;
    justify-content: center;
  }
  .program-card:last-child{
    margin-bottom: 0;
    margin-inline: auto;
  }

  .technology-heading h2{
    width: 95%;
    margin-bottom: 3rem;
  }

  .about-area{
    padding-block: 1rem;
  }
  .practice-content h2{
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 3rem;
  }
  .practice-card{
    text-align: center;
    align-items: center;
    flex-direction: column;
  }
  .practice-card .practice-img{
    width: 7rem;
    max-width: 7rem
  }
  .practice-card img{
    width: 5rem;
  }
  .practice-card.active img{
    width: 7rem;
  }
  .practice-info{
    margin-left: 0;
    margin-top: 1rem;
  }
  .practice-info h5{
    font-size: 1.65rem;
  }
  .practice-card.active .practice-info h5{
    font-size: 2rem;
  }
  .practice-desc p,
  .practice-desc a,
  .practice-desc span{
    font-size: 1rem;
  }
  .video-wrapper video{
    object-fit: contain;
  }
  .slider-mobile-image .video-wrapper{
    box-shadow: none;
  }
  .slider-mobile-image .video-wrapper video{
    padding: 0;
    width: 100%;
    height: 200px;
    background: none;
  }
  .slider-mobile-image .video-wrapper .smartjobs-play-icon{
    right: 100%;
    bottom: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 3px solid #7a316f50;
    transform: translate(-50%, -50%);
  }
  .slider-mobile-image .video-wrapper .smartjobs-play-icon i{
    font-size: 1.5rem;
    color: #7a316f50;
  }
  .video-info h5{
    font-size: 0.95rem;
  }
  .video-info span{
    font-size: 0.75rem;
  }

  .team-area{
    padding-block: 3rem;
  }
  .team-content{
    padding-top: 2rem;
  }
  .team-content h4{
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 3rem;
  }
  .team-wrapper{
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    overflow-y: hidden;
  }
  .team-card{
    min-width: 60%;
  }
  .team-wrapper::-webkit-scrollbar{
    width: 0;
    height: 0;
  }

  .financial-content{
    padding-block: 2rem;
  }
  .financial-content h2{
    width: 90%;
    font-size: 1.35rem;
    line-height: 2rem;
    margin-bottom: 1rem;
  }
  .financial-content p{
    width: 90%;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .learn-card-wrapper{
    flex-direction: column;
  }
  .learn-card{
    width: 80%;
    height: auto;
    padding: 1.5rem;
    margin-right: 0;
    min-height: auto;
    margin-bottom: 1rem;
    text-align: center;
    align-items: center;
  }
  .learn-card:last-child{
    margin: 0;
  }
  .learn-card h4{
    font-size: 1.75rem;
    line-height: 2.5rem;
  }
  .learn-card small{
    font-size: 1rem;
  }
  .platform-items li{
    padding: 1.1rem;
    font-size: 1rem;
    text-align: center;
  }
  .platform-content img{
    margin-left: 0;
    margin-top: 1rem;
  }
  .program-wrapper ul{
    width: 100%;
  }
  .program-wrapper li h4{
    font-size: 1.25rem;
  }
  .program-wrapper li.active h4{
    font-size: 1.45rem;
  }
  .technology-wrapper{
    display: none;
  }
  .technology-content{
    overflow-x: auto;
  }
  .technology-content::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  .technology-wrapper-mobile{
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .technology-wrapper-mobile::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  .technology-card{
    min-width: 90%;
    margin-bottom: 0;
    min-height: 20rem;
    margin-right: 1.5rem;
  }
  .technology-card:last-child{
    margin-right: 0;
  }

  .slider-image{
    width: 85%;
  }
  .slider-image .video-wrapper{
    opacity: 0;
  }
  .slider-image .video-wrapper.active{
    opacity: 1;
  }
  .team-about-wrapper{
    display: none;
  }
  .team-item-wrapper{
    display: flex;
  }

  .footer-text{
    width: 75%;
  }
  .footer-text span{
    font-size: 1rem;
  }
  .footer-section{
    padding: 2rem 0;
    text-align: center;
  }
  .footer-logo{
    margin-bottom: 3rem;
  }
  .footer-desc{
    margin-top: 2rem;
  }
  .footer-section ul.coutry-list{
    list-style: none;
  }

  .modal.center .modal-content{
    margin-left: 2rem !important;
  }
  .modal.vdr-callback-modal .modal-body .submit-request{
    width: 50% !important;
  }
  .opportunity-content h2{
    margin-bottom: 2rem;
  }
  .team-profile{
    height: 30rem
  }
  #about-doug .smartjobs-round-btn{
    padding: 0.5rem 1.25rem;
    font-size: 1.25rem;
  }
  #about-doug .smartjobs-round-btn i{
    font-size: 1.25rem;
  }

  .team-members{
    margin: 2rem;
  }
  .team-member-info{
    flex-direction: column;
    background-color: #f7f7f7;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
  }
  .team-member-info img{
    width: 50%;
    height: 50%;
    align-self: center;
    margin-bottom: 1rem;
    max-width: max-content;
    max-height: fit-content;
  }
  .team-member-info p,
  .team-member-info h5{
    text-align: center;
  }

  /* Webinar */
  .webinar-banner-area h6{
    font-size: 1.1rem;
  }
  .webinar-banner-area h2{
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .webinar-banner-area h5{
    font-size: 1rem;
  }
  .letter-content{
    flex-direction: column-reverse;
  }
  .webinar-letter{
    margin-right: 0;
    margin-top: 2rem;
  }
  .webinar-form-wrapper{
    width: 100%;
    box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.07);
  }
  .countdown-items{
    margin-right: 2rem;
  }
  .webinar-content{
    padding: 1.5rem 1rem;
  }
  /* Webinar */
  .contact-wrapper{
    border: none;
  }
}

@media(max-width: 600px){
  .platform-items li{
    padding: 1rem;
    font-size: 0.95rem;
    text-align: center;
  }
  .team-profile{
    height: 30rem
  }
}

@media(max-width: 480px){
  .banner-action{
    width: 100%;
  }
  .team-profile{
    height: 20rem
  }
}

@media(max-width: 360px){

}
/* Responsive CSS */