@import url('https://fonts.googleapis.com/css2?family=Inder&display=swap');

.mainStartText {
  color: #ffffff;
  font: 400 2rem "Inder", sans-serif;
}

.textTransparent44{
  color: #ffffff44;
}

.alignTextRight{
  text-align: right;
}

.p1 {
  text-align: center;
  font-size: var(--h6);
}

.p2 {
  text-align: center;
  font-size: var(--h5);
}

.sail-into-your-brand-new-career {
  
  text-align: right;
  position: relative;
  width: 40vw;
  /* height: 91px; */
  
  align-self: end;
  margin-right: 3vw;
}

.tech-has-never-been-that-simple {
  text-align: left;
  position: relative;
  width: 27vw;
  font-family: Inder , sans-serif;
  /* height: 69px; */
}

.p-still-not-sure-let {
  color: #ffffff;
  text-align: center;
  font-family: Inder , sans-serif;
  position: relative;
}



.oval-0 {
  mask: url("../images/oval1.svg") 0 / 100% 100%;
  -webkit-mask: url("../images/oval1.svg") 0 / 100% 100%;
  width: 65vw;
  height: 65vw;
  opacity: 0.6;
  left: 30vw;
  top: -35vw;
  margin: auto 0;
  position: absolute;
  background-color: var(--color-circle1);
}

.oval-1 {
  /* 
  mask: url("../images/oval2.svg") 0 / 100% 100%;

  -webkit-mask:  url("../images/oval2.svg") 0 / 100% 100%;
  */
  width: 50vw;
  height: 50vw;
  border-radius: 50vw;
  top: 10rem;
  left: -20vw;
  bottom: 0;
  opacity: 0.1;
  position: absolute;
  overflow: visible;
  
  background: linear-gradient(-26deg, #646786 0%, #646786 30%, var(--color-grey) 100%);
  box-shadow: 4rem -4rem 4rem 0 var(--color-black);
  z-index: -3;
}


.oval-2 {
  /* 
  mask: url("../images/oval2.svg") 0 / 100% 100%;

  -webkit-mask:  url("../images/oval2.svg") 0 / 100% 100%;
  */
  width: 50vw;
  height: 50vw;
  border-radius: 50vw;
  top: 10rem;
  left: 5vw;
  bottom: 0;
  opacity: 0.3;
  position: absolute;
  overflow: hidden;
  
  transform: skewX(-10deg);
  background: url("../pics/medium-shot-man-working-on-computer.jpg") center no-repeat;
  background-size: cover;
  /* 
  background: linear-gradient(26deg, #646786 0%, #646786 30%, var(--color-grey) 100%); 
  */
  box-shadow: 4rem 2rem 4rem 0 var(--color-black);
  z-index: -3;
}

.oval-2r {
  /* 
  mask: url("../images/oval2.svg") 0 / 100% 100%;

  -webkit-mask:  url("../images/oval2.svg") 0 / 100% 100%;
  */
  width: 40vw;
  height: 40vw;
  border-radius: 50vw;
/* 
  top: 30rem;
   */
  bottom: -10rem;
  right: -10vw;
  opacity: 0.4;
  position: absolute;
  overflow: hidden;
  
  transform: skewX(2deg);
  background: url("../pics/html-and-css-collage-concept-with-person.jpg") center no-repeat;
  background-size: cover;
  /* 
  background: linear-gradient(26deg, #646786 0%, #646786 30%, var(--color-grey) 100%); 
  */
  box-shadow: 4rem 2rem 4rem 0 var(--color-black);
  z-index: -3;
}


.oval-4 {
  /* 
  mask: url("../images/oval2.svg") 0 / 100% 100%;

  -webkit-mask:  url("../images/oval2.svg") 0 / 100% 100%;
  */
  width: 50vw;
  height: 50vw;
  border-radius: 50vw;
  top: 10rem;
  right: 5vw;
  bottom: 0;
  opacity: 0.1;
  position: absolute;
  overflow: visible;
  
  transform: skewX(40deg);
  background: linear-gradient(100deg, #2c2d4cff 0%, #2c2d4c99 30%, #35376488 100%);
  box-shadow: 4rem 2rem 4rem 0 var(--color-black);
  z-index: -3;
}


.oval-image-0 {
  background: url("../images/rear-view-of-programmer-working-all-night-long.jpg")
    center no-repeat;
  background-size: 120%;
  mask: url("../images/gpt.svg") 0 / 100% 100%;
  -webkit-mask: url("../images/gpt.svg") 0 / 100% 100%;
  width: 50vw;
  height: auto;
  left: 1vw;
  top: -100px;
  bottom: 0;
  position: absolute;
  z-index: -2;
}

.bcTrMain{
  width: 100%;
  height: 100%;
  background-color: var(--mainColorHalfTransparent);
}

.oval-3 {
  mask: url("../images/oval0.svg") 0 / 100% 100%;
  -webkit-mask: url("../images/oval0.svg") 0 / 100% 100%;
  width: 50vw;
  height: 50vw;
  right: -5vw;
  top: -200px;
  position: absolute;
  /* 
  opacity: 0.8;
  background-color: var(--color-a2); 
  */
  background: linear-gradient(-26deg, #2c2d4cff 0%, #2c2d4c99 30%, #35376488 100%);
  box-shadow: 4rem -4rem 4rem 0 var(--color-black);
}

.flexText{
  flex: 3;
  min-width: 240px;
  max-width: 900px;
}

.bgBlockWhatWillYouGet {
  position: relative;
  background: url("../pics/programming-background-with-html-text.jpg") bottom no-repeat;
  background-color: var(--mainBGColor);
}

.gradientBlockWhatWillYouGet{
  position: absolute;
  bottom: 0px;
  height: 100%;
  max-height: 1335px;
  background: linear-gradient(180deg, var(--mainBGColor) 0%, var(--mainBGColor) 10%, transparent 50% , var(--mainBGColor) 90%, var(--mainBGColor) 100%);
}

.bgApply {
  position: relative;
  background: url("../pics/programming-background-with-person-working-with-codes-on-computer.jpg") bottom no-repeat;
  background-color: var(--color-mainBGColor);
}

.gradientApply{
  position: absolute;
  bottom: 0px;
  height: 100%;
  max-height: 1333px;
  background: linear-gradient(180deg, var(--mainBGColor), var(--mainColorHalfTransparent));
}

.tf-01 {
  width: 100%;
  height: 160px;
  object-fit: cover;
  position: relative;
}

.animation-blok, .head-animation, .text-animation {
  transition: 1s;
}

@media only screen and (min-width: 1920px) {
}
@media only screen and (max-width: 1919px) {
  .oval-image-0 {
    /* top: 40px; */
    /* background-size: 110%; */
  }
}
@media only screen and (max-width: 1239px) {
  .oval-image-0 {
    background-size: 128%;
  }
  .oval-2 {
    width: 60vw;
    height: 60vw;
    left: -10vw;
    top: 20rem;
  }
  .oval-2r {
    width: 56vw;
    height: 56vw;
    bottom: -8rem;
  }
}
@media only screen and (max-width: 1023px) {
  .oval-3 {
    width: 50vw;
    height: 50vw;
    right: -10vw;
    bottom: -5rem;
  }
  .oval-image-0 {
    top: 0;
  }
}
@media only screen and (max-width: 719px) {
  .flexText{
    width: 90%;
  }

  .gradientBlockWhatWillYouGet{
    height: 1335px;
  }
  .gradientApply{
    height: 1333px;
    max-height: 100%;
  }
  .oval-2 {
    width: 100%;
    height: 100vw;
    left: -10vw;
    top: 30rem;
  }
  .oval-2r {
    width: 100vw;
    height: 100vw;
    bottom: 1rem;
  }
}
@media only screen and (max-width: 639px) {
  .head-1 {
    align-self: center !important;
    text-align: center !important;
    font-size: var(--h6);
  }

  .oval-image-0 {
    margin: auto 0;
    position: relative;
  }

  .main-1 {
    flex-flow: column !important;
  }
  .text-1 {
    width: 100% !important;
  }
  .p-1 {
    text-align: center;
    font-size: var(--h7);
  }

  .btn-1 {
    font-size: var(--h6);
    margin-top: 1rem !important;
  }
}
@media only screen and (max-width: 479px) {
}
@media only screen and (max-width: 359px) {

}
@media only screen and (max-width: 319px) {

}

/* learn_more */
.my-card {
  width: 20rem;
  height: 30rem;
  color: var(--color-black);
}
.card-body {
  z-index: 4;
}

.shadow {
  box-shadow: inset 1rem 1rem var(--color-a2);
}

.oval-01 {
  mask: url("../images/oval1.svg") 0 / 100% 100%;
  -webkit-mask: url("../images/oval1.svg") 0 / 100% 100%;
  width: 75vw;
  height: 75vw;
  opacity: 0.2;
  left: 20vw;
  position: absolute; 
  background: radial-gradient(circle,  var(--color-grey) 0%, #646786 30%, #646786  100%);
}

.oval-image-01 {
  background: url("../pics/programming-background-collage.jpg") center no-repeat;
  background-size: 110%;
  mask: url("../images/gpt_rev.svg") 0 / 100% 100%;
  -webkit-mask: url("../images/gpt_rev.svg") 0 / 100% 100%;
  width: 27vw;
  max-width: 400px;
  height: 27vw;
}

.skewed-block {
  width: 220px;
  height: 200px;
  background-color: var(--color-a2);
  opacity: 0.4;
  transform: skewX(-20deg);
  border-radius: 4rem;
  margin: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  box-shadow: 0 0 2rem 0 var(--color-a2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 1s;
  overflow: hidden;
  cursor: pointer;
}

.skewed-block .h5{
  transition: 1s;
}

.skewed-block .h6{
  transition: 1s;
}

.vertical-block {
  width: 256px;
/*   
  height: 300px;
 */
  background-color: #ffffff11;
  border-radius: 1rem;
  margin: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  box-shadow: 0 0 2rem 0 #334;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  transition: 1s;
  overflow: hidden;
  cursor: pointer;
}

.light-block {
  background-color: #ffffff11;
}
.dark-block {
  background-color: #1117;
}

/* courses */
.oval-image-02,
.oval-image-02-mobile {
  mask: url("../images/gpt.svg") 0 / 100% 100%;
  -webkit-mask: url("../images/gpt.svg") 0 / 100% 100%;
  background: url("../pics/woman-touching-a-smart-technology-holographic-interface.jpg") center no-repeat;
  background-size: 130%;
}

.oval-image-02 {
  width: 40vw;
  height: 15rem;
}

.oval-image-02-mobile {
  width: 90%;
  height: 20rem;
}

.my-accordion-button,
/* .my-accordion-header, */
.my-accordion-item {
  background-color: var(--color-a4);
  color: var(--color-a2);
  /* border-radius: 2rem; */
}

.my-accordion-collapse {
  background-color: var(--color-a3);
  color: var(--color-grey);
}

.accordion-item {
  border: none;
}

.block-header-text {
  text-align: left !important;
}

@media only screen and (min-width: 641px) {
  .oval-image-02-mobile {
    display: none;
  }
}

@media only screen and (max-width: 640px) {
  .oval-image-02 {
    display: none;
  }
  .block-header-text {
    text-align: center !important;
  }
}

/* apply */
input,
textarea,
select {
  background-color: var(--color-a4) !important;
  color: var(--color-grey) !important;
}

.form-label,
.form-check-label {
  color: var(--color-white) !important;
}

::placeholder {
  color: var(--color-a4) !important;
  opacity: 1 !important;
}

.form-field {
  margin: 0.5rem;
  font-weight: bold;
  width: 47%;
  flex-grow: 1;
  z-index: 4;
}
@media only screen and (min-width: 1920px) {
}
@media only screen and (max-width: 1919px) {
}
@media only screen and (max-width: 1239px) {
}
@media only screen and (max-width: 1023px) {
  .h3 {
    font-size: var(--h4);
  }
  
  .tech-has-never-been-that-simple { 
    width: 50vw;
  }
}

@media only screen and (min-width: 720px) {
  .oval-image-01 {
    flex: 2
  }
}
@media only screen and (max-width: 719px) {
  .sail-into-your-brand-new-career{
    width: 70vw;
  }
  
  .tech-has-never-been-that-simple { 
    width: 70vw;
  }

  .oval-image-01 {
    width: 80vw;
    max-width: 600px;
    height: 60vw;
  }
  .note {
    width: 100% !important;
  }
  .form-style {
    flex-direction: column;
    padding: 0.25rem !important;
  }
  .form-field {
    width: 100%;
  }
  .margin-h1 {
    margin-bottom: 0rem !important;
    margin-top: 0rem !important;
  }
  .margin-button {
    margin-top: 0rem !important;
  }
}
@media only screen and (max-width: 639px) {
}
@media only screen and (max-width: 479px) {
  .sail-into-your-brand-new-career{
    width: 90vw;
  }
  .tech-has-never-been-that-simple { 
    width: 90vw;
  }
  .form-field {
    margin: 0.25rem;
  }
  .h4 {
    font-size: var(--h6);
  }
  .h3 {
    font-size: var(--h6);
  }
}
@media only screen and (max-width: 359px) {
}
@media only screen and (max-width: 319px) {
  .sail-into-your-brand-new-career{
    width: 100vw;
  }
}