header {
  position: relative;
  top: 84px;
  height: 70vh;
  margin-bottom: var(--box-margin);
  overflow: hidden;
}

.bannerBox {
  display: flex;
  justify-content: center;
  height: 100%;
  gap: 50px;
}

.bannerImage img {
  height: 100%;
}

.bannerLeft {
  padding-top: 40px;
}

.bannerLeft p {
  letter-spacing: 1.2px;
  margin-bottom: 40px;
}

.bannerLeft h1 {
  text-wrap: balance;
}

.bannerStart {

  background-color: var(--red);
  padding: 16px 32px;
}

.bannerImage {
  position: relative;
}

.bannerButttons {
  position: absolute;
  background-color: var(--primary);
  padding: 10px 20px;
  z-index: 88;
  box-shadow: -4px 7px 19px 0px var(--background-1);
  border-bottom-left-radius: 30px;
  border-top-right-radius: 30px;
  font-weight: 700;
  animation-name: upDown;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 400ms;
  animation-direction: alternate;
  /* animation: upDown 1s ease-in-out 300ms infinite both forwards; */
}

@keyframes upDown {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

.topButton {
  top: 20%;
  left: 5%;
  background-color: var(--green);
}

.bottomButton {
  bottom: 20%;
  right: 5%;
}

/* request call */

.requestCallBox {
  margin-top: 80px;
  text-align: center;

}

.requestCallBox form {
  background-color: var(--background-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  width: 60%;
  margin: auto;
  border-radius: 20px;
}

.formElement {
  display: flex;
  flex-direction: column;
  width: 80%;
  align-items: center;
}

.formElement label {
  align-self: flex-start;
}

.inputBox {
  width: 100%;
  padding: 10px 30px;
}

.request {
  padding: 10px 20px;
  background-color: var(--green);
  color: white;
  font-size: 18px;

}

/* Courses */
.courses {
  height: 780px;
  background-color: var(--background-1);
}

.coursesBox {
  display: flex;
  gap: 40px;
}

.coursesLeft {
  flex: 35%;
  padding: 20px 0px 20px 20px;
  /* top right bottom left */
  align-self: flex-start;
}

.coursesLeft>p {
  letter-spacing: 1.2px;
  margin: 20px 0px;
  margin-bottom: 40px;
}

.startLearning {
  background-color: var(--white);
  color: var(--background-1);
  padding: 16px 32px;
}

.coursesRight {
  flex: 65%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 0px;

}

.courseBox,
.oddCourse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.course {
  width: 33.3%;
  padding: 20px;
  background-color: var(--background-2);
  border-radius: 20px;
  transition: var(--transition);
  min-width: 218px;
  min-height: 300px;
}

.course:hover {
  box-shadow: 0 14px 15px rgba(0, 0, 0, 0.775);
  z-index: 1;
}

.course h4 {
  padding: 10px 0px;
  margin-top: 10px;
}

.courseIcon {
  background-color: var(--red);
  padding: 16px;
  border-radius: 10px;
}

.courseIcon i {
  padding-top: 20px;
}

.course:nth-child(1) .courseIcon {
  background-color: var(--orange);
}

.course:nth-child(3) .courseIcon {
  background-color: var(--dark-red);
}

.oddIcon {
  background-color: var(--green) !important;
}

/* fileds */

.fields {
  margin-top: 150px;
}

.fieldsBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fieldsBox h1 {
  margin-top: 96px;
  padding: 20px 0px;
}

.fieldsWrapper {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.field {
  flex: 1;
  background-color: var(--background-1);
  text-align: center;
  transition: var(--transition);
}

.field:hover {
  background: transparent;
  border: 2px solid var(--background-1);
  border-bottom-right-radius: 50px;
}

.fieldInfo h4 {
  padding: 10px 0px;
}

.fieldInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fieldInfo p {
  letter-spacing: 1.2px;
  padding: 10px;
}

.fieldsButton {
  padding: 16px 32px;
  background-color: var(--red);
  color: var(--white);
  margin: 10px 0px;


}

/* why us  */
.whyus {
  background-color: var(--background-1);
}

.whyusBox {
  display: flex;
  align-items: center;
  gap: 20px;
}

.whyusLeft {
  padding: 84px 60px;
  border-radius: 50%;
  width: 240px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 32px dashed #c1c6ff;
  /* border: 32px dashed var(--background-2); */
}

.arrow {
  padding: 20px;
  background-color: var(--red);
  margin-bottom: 10px;
  transition: var(--transition);
  animation-name: changeColor;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes changeColor {
  0% {
    background-color: var(--orange);
  }

  100% {
    background-color: var(--red);
  }
}

.arrowTip {
  display: block;
  transform: rotate(45deg);
  margin-left: -40px;
  animation-name: rotate;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes rotate {
  0% {
    transform: rotate(45deg);
    background-color: var(--orange);
  }

  100% {
    transform: rotate(135deg);
    background-color: var(--red);
  }
}

.whyusRight {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.whyusImage {
  text-align: center;
}

.whyusImage img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  background-color: var(--primary);
  border-radius: 50%;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.766) 0px 2px 8px 0px;
}

.whyusReason {
  width: 240px;
  background-color: var(--background-2);
  padding: 10px;
  border-radius: 20px;
  transition: var(--transition);
}

.whyusReason:hover {
  box-shadow: rgba(0, 0, 0, 0.766) 0px 2px 8px 10px;
  z-index: 1;

}

.whyusInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.whyusInfo p {
  text-align: center;
  font-size: 13px;
}

/* why us end */

/* frequently asked question */
.frequentlys {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.549);
  text-align: center;
}

.frequentlys h1 {
  padding: 20px 0px;
}

.frequentlyBox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;

}

.frequently {
  padding: 20px;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 400px;
  gap: 20px;
  height: fit-content;
  background: var(--primary);
  cursor: pointer;
  transition: var(--transition);
}

.questionAnswer h4 {
  font-size: 15px;
  line-height: 2;
}

.frequentlyIcon {
  align-self: flex-start;
  font-size: 16px;
}

.frequently p {
  margin-top: 20px;
  display: none;
  font-size: 14px;
}

.frequently.open p {
  display: block;
}


/* frequently asked question end */

/* testimonial */

.saysBox {
  overflow: hidden;
  position: relative;
  margin-bottom: 40px;
  display:none;
}

.saysBox h1 {
  text-align: center;
}

.says {
  padding-top: 20px;
}

.studentImg {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  border: 1rem dashed var(--background-2);
}

.studentInfo {
  text-align: center;
  margin-bottom: 20px;
}

.said {
  background: var(--primary);
  padding: 20px;
  margin-bottom: 40px;
  position: relative;
  border-radius: 50%;

}

.said p {
  margin: 20px 5%;
  word-break: keep-all;
  text-align: center;
  font-size: 14px;
}

.said::before {
  content: "";
  display: block;
  background: linear-gradient(360deg, transparent, var(--primary), var(--primary));
  width: 36px;
  height: 36px;
  position: absolute;
  left: 48%;
  bottom: -12px;
  transform: rotate(45deg);
}

.pagination {
  margin-top: 20px;
}



.swiper-pagination-clickable .swiper-pagination-bullet {
  background-color: var(--white);
}

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

  .courseBox {
    gap: 10px;
  }

  .startLearning {
    padding: 10px 20px;
  }

  .course h4 {
    font-size: 15px;
  }

  .course p {
    font-size: 13px;
  }

  .course {
    min-height: 280px;
  }

  .whyusLeft {
    margin-top: 40px;
  }

  .whyusBox {
    flex-direction: column;
    gap: 10px;
  }

  .arrowTip {
    margin-left: unset;
    margin-top: -42px;
  }

  .frequentlyBox {
    flex-direction: column;
  }

  .frequently {
    width: 80%;
    min-width: unset;
  }
}

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

  header {
    height: 75vh;
  }

  .bannerBox {
    gap: 20px;
  }

  .requestCallBox form {
    width: 80%;
  }

  .courses {
    height: unset;
  }

  .coursesBox {
    flex-direction: column;
  }

  .courseBox {
    gap: 20px;
  }

  .fields {
    margin-top: unset;
  }

  .fieldsBox h1 {
    margin-top: 10px;
  }
}

@media only screen and (max-width:768px) {
  header {
    height: unset;
  }

  .bannerBox {
    flex-direction: column;
  }

  .bannerLeft {
    justify-self: flex-start;
  }

  .requestCallBox form {
    width: 90%;
  }

  .formElement {
    width: 75%;
  }



  .courseBox {
    flex-wrap: wrap;
  }

  .fieldsWrapper {
    align-items: center;
    justify-content: center;
    gap: 40px;
  }

  .field {
    min-width: 75%;
    max-width: 85%;
  }

  .whyusLeft {
    width: 220px;
    height: 220px;
    padding: 64px 40px;
    border: 24px dashed var(--background-2);
  }

  .whyusLeft h1 {
    font-size: 20px;
  }

  .arrow {
    padding: 12px;
  }

  .arrowTip {
    margin-left: unset;
    margin-top: -32px;
  }

  .whyusImage img {
    width: 75px;
    height: 75px;
  }

  .whyusReason {
    width: 200px;
  }
}

@media only screen and (max-width:520px) {
  h1 {
    font-size: 28px;
  }

  .bannerLeft p {
    font-size: 14px;
  }

  .bannerButttons {
    padding: 6px 12px;
    font-weight: 500;
    font-size: 14px;
  }

  .bannerStart {
    padding: 10px 20px;
  }

  .requestCallBox form {
    width: 95%;
    margin: auto;
  }

  .formElement {
    width: 85%;
  }

  .request {
    padding: 6px 12px;
    font-size: 16px;
  }

  .course {
    width: 80%;
    min-width: unset;
  }

  .course h4 {
    font-size: 18px;
  }

  .course p {
    font-size: 16px;
  }
}