:root {
  --clr-white: hsl(0, 0%, 100%);
  --clr-black: hsl(0, 0%, 0%);
  --clr-gulf-blue: hsl(225, 98%, 19%);
  --clr-allports: hsl(201, 100%, 31%);
  --clr-denim: hsl(211, 85%, 39%);
  --clr-jordy-blue: hsl(214, 77%, 75%);
  --clr-tropical-blue: hsl(215, 76%, 90%);
  --clr-wax-flower: hsl(10, 100%, 83%);
  --clr-periwinkle-gray: hsl(209, 44%, 86%);
  --clr-text: var(--clr-black);
  --clr-link: var(--clar-black);
  --line-height-base: 1.5;
  --line-height-heading: 1.2;
  --font-family-base: 'Lexend', sans-serif;
  --border-radius: 1rem;
  --font-size-small: 0.75em;
}

@font-face {
  font-weight: 100 900;
  font-family: 'Lexend';
  src: url('../fonts/Lexend-VariableFont_wght.woff2') format('woff2-variations');
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  background: var(--clr-allports) url(../images/body_bg.jpg) 50% 0 no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: var(--clr-text);
}

@media (min-width: 900px) {
  body {
    background-size: auto;
    font-size: 1.2rem;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 1.4rem;
  }
}

h1 {
  margin: 0;
  font-weight: 600;
  font-size: 1.7em;
  line-height: var(--line-height-heading);
}

@media (min-width: 1200px) {
  h1 {
    font-size: 1.5em;
  }
}

@media (min-width: 1500px) {
  h1 {
    font-size: 2em;
  }
}

h2 {
  margin: 0;
  font-size: 1.7em;
  font-weight: 400;
  text-align: center;
}

h3 {
  margin: 0;
  font-size: 1.2em;
  font-weight: 400;
  line-height: var(--line-height-heading);
}

h4 {
  margin: 0;
  font-size: 1.2em;
  font-weight: 400;
  line-height: var(--line-height-heading);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--clr-link);
  text-decoration: none;
}

.wrapper {
  margin-inline: 1rem;
}

@media (min-width: 1200px) {
  .wrapper {
    margin-inline: 7%;
  }
}

.header {
  display: flex;
  align-items: center;
  padding: 1rem;
  color: var(--clr-white);
}

@media (min-width: 1200px) {
  .header {
    padding: 3rem 4rem 6rem 4rem;
  }
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-inline-end: auto;
}

@media (min-width: 1500px) {
  .header-logo {
    font-size: 1.5em;
  }
}

@media (min-width: 1800px) {
  .header-logo {
    font-size: 2em;
  }
}

.header-logo svg {
  max-width: auto;
  min-width: 5rem;
  width: 5rem;
}

.header-nav {
  --clr-link: var(--clr-white);
  z-index: 10;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100%;
  padding: 5rem;
  background: linear-gradient(90deg, var(--clr-denim) 0%, var(--clr-gulf-blue) 100%);
  transition: left 400ms;
}

@media (width > 1200px) {
  .header-nav {
    position: static;
    border-radius: 9rem;
    transition: none 0;
    transform: translateX(0);
    background-color: transparent;
    outline: none;
    padding: 0;
  }
}

.header-nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  margin: 0;
  padding: 0;
  list-style-type: none;
  height: 100%;
}

@media (width > 1200px) {
  .header-nav ul {
    margin: 1em 3em;
    flex-direction: row;
    height: auto;
  }
}

.header-nav a {
  display: block;
  white-space: nowrap;
}

.header-nav.visible {
  left: 30%;
}

.hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "a" "b" "c";
  gap: 2rem;
  padding-block: 2rem;
  border-radius: var(--border-radius);
  background: linear-gradient(90deg, var(--clr-gulf-blue) 0%, hsl(from var(--clr-denim) h s l / 0.5) 100%);
  color: var(--clr-white);
}

@media (min-width: 1200px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "b a" "c c";
    padding-block: 7rem;
    row-gap: 6em;
  }
}

.hero p {
  margin: 0;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  grid-area: b;
  padding-inline: 2rem;
}

@media (min-width: 1200px) {
  .hero-text {
    padding-inline: 6rem;
  }
}

.hero-text p {
  color: var(--clr-wax-flower);
}

.hero-text p:first-of-type {
  order: -1;
  color: var(--clr-white);
}

.hero-img {
  padding-inline: 2rem;
  grid-area: a;
}

@media (min-width: 1200px) {
  .hero-img {
    padding-inline: 6rem;
  }
}

.hero-img img {
  width: 100%;
  border-radius: var(--border-radius);
}

.hero-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  color: var(--clr-wax-flower);
  grid-area: c;
  row-gap: 1rem;
  font-size: var(--font-size-small);
}

@media (min-width: 1200px) {
  .hero-table {
    grid-template-columns: repeat(4, 1fr);
    margin-inline: 2rem;
  }
}

.hero-table>div {
  padding-inline: 1em;
}

@media (min-width: 1200px) {
  .hero-table>div {
    padding-inline: 4rem;
  }
}

.hero-table>div:not(:first-of-type) {
  border-left: 1px solid var(--clr-wax-flower);
}

@media (max-width: 1199px) {
  .hero-table>div:nth-child(odd) {
    border-left: none;
  }
}

.hero-table h2 {
  color: var(--clr-white);
  font-weight: 600;
  font-size: 1em;
  text-transform: uppercase;
  text-align: left;
}

.mybutton {
  display: inline-block;
  padding: 1em 5em;
  text-transform: uppercase;
  border-radius: 9rem;
  background: linear-gradient(90deg, var(--clr-tropical-blue) 0%, var(--clr-wax-flower) 100%);
  color: var(--clr-denim);
  font-size: var(--font-size-small);
}

.swiper {
  border-radius: var(--border-radius);
}

.swiper .swiper-pagination-bullets,
.swiper .swiper-pagination-horizontal.swiper-pagination-bullets,
.swiper .swiper-pagination {
  position: absolute;
  top: 6rem;
  bottom: 0;
  text-align: left;
  margin-inline: 2rem;
  height: 0;
}

@media (min-width: 1200px) {

  .swiper .swiper-pagination-bullets,
  .swiper .swiper-pagination-horizontal.swiper-pagination-bullets,
  .swiper .swiper-pagination {
    margin-inline: 7.5rem;
    top: auto;
    bottom: 7.5rem;
  }
}

.swiper .swiper-pagination-bullet {
  width: 24vw;
  border-radius: 9rem;
  background: var(--clr-wax-flower);
  opacity: 1;
}

@media (min-width: 1200px) {
  .swiper .swiper-pagination-bullet {
    width: 10rem;
  }
}

.swiper .swiper-pagination-bullet-active {
  background: var(--clr-tropical-blue);
}

.swiper-button-prev {
  left: 0 !important;
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}


.swiper-button-next {
  right: 0 !important;
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}


.swiper-button-prev,
.swiper-button-next {
  width: 1rem;
  height: 1rem;
  background-color: var(--clr-allports);
  color: var(--clr-white);
  padding: .5rem;
  opacity: .5;
  transition: opacity 200ms;
}

@media (min-width: 900px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 2rem;
    height: 2rem;
  }
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 1;
}


.swiper .swiper-slide {
  aspect-ratio: 1 / 2;
  height: auto;
}

@media (min-width: 600px) {
  .swiper .swiper-slide {
    aspect-ratio: 2 / 3;
  }
}

@media (min-width: 900px) {
  .swiper .swiper-slide {
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 1800px) {
  .swiper .swiper-slide {
    aspect-ratio: 2 / 1;
  }
}

.slide {
  position: absolute;
  inset: -1px;
  border-radius: var(--border-radius);
}

.slide h3 {
  display: inline-block;
  padding: 1rem 3rem;
  border-top-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  background: linear-gradient(90deg, var(--clr-gulf-blue) 0%, hsl(from var(--clr-gulf-blue) h s l / 0.7) 100%);
  color: var(--clr-white);
}

.slide h4 {
  max-width: 60%;
  margin: 7rem 2rem 2rem 2rem;
  color: var(--clr-denim);
  font-size: 1.3em;
}

@media (min-width: 900px) {
  .slide h4 {
    margin: 5rem 7.5rem 3.5rem 7.5rem;
    font-size: 1.8em;
  }
}

.slide p {
  padding: 0;
  margin: 2rem;
  font-weight: 300;
}

.slide p em {
  display: block;
  margin-block-start: 1em;
}

@media (min-width: 900px) {
  .slide p {
    margin: 3.5rem 7.5rem 5rem 7.5rem;
    max-width: 60%;
  }
}

@media (min-width: 1500px) {
  .slide p {
    max-width: 50%;
  }
}

.slide-environmental {
  background-image: linear-gradient(to bottom, var(--clr-white) 0%, var(--clr-white) 25%, transparent), url(../images/environmental.jpg);
  background-position: auto auto, 50% 100%;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
}

@media (min-width: 900px) {
  .slide-environmental {
    background-image: linear-gradient(to right, var(--clr-white) 0%, var(--clr-white) 50%, transparent 85%), url(../images/environmental.jpg);
    background-position: 0 0, 100% 50%;
    background-size: 100%, auto 150%;
  }
}

.slide-social {
  background-image: linear-gradient(to bottom, var(--clr-white) 0%, var(--clr-white) 40%, transparent), url(../images/social.jpg);
  background-position: bottom center;
  background-size: auto, 200%;
  background-repeat: no-repeat, no-repeat;
}

@media (min-width: 900px) {
  .slide-social {
    background-image: linear-gradient(to right, var(--clr-white) 0%, var(--clr-white) 50%, transparent 85%), url(../images/social.jpg);
    background-position: 0 0, 0% 50%;
    background-size: 100%, auto 150%;
  }
}

.slide-governance {
  background-image: linear-gradient(to bottom, var(--clr-white) 0%, var(--clr-white) 50%, transparent), url(../images/governance.jpg);
  background-position: bottom center;
  background-size: auto, 200%;
  background-repeat: no-repeat, no-repeat;
}

@media (min-width: 900px) {
  .slide-governance {
    background-image: linear-gradient(to right, var(--clr-white) 0%, var(--clr-white) 50%, transparent 85%), url(../images/governance.jpg);
    background-position: 0 0, 0% 50%;
    background-size: 100%, auto 150%;
  }
}

.section--slider {
  padding-block: 3.5rem;
}

.section--slider h2 {
  color: var(--clr-white);
  margin-block-end: 3.5rem;
}

.section--lecturers {
  background-color: var(--clr-white);
  padding-block: 3.5rem;
}

@media (min-width: 1200px) {
  .section--lecturers {
    padding-block: 10rem;
  }
}

.section--lecturers h2 {
  color: var(--clr-denim);
  margin-block-end: 2em;
}

.section--lecturers .lecturers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 900px) {
  .section--lecturers .lecturers {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1500px) {
  .section--lecturers .lecturers {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.section--lecturers .lecturer {
  position: relative;
  padding-inline: 3.5rem;
  padding-block: 3.5rem 6rem;
  border-radius: var(--border-radius);
  background: var(--clr-allports) url(../images/body_bg.jpg) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--clr-white);
  text-align: center;
  overflow: hidden;
}

@media (min-width: 1200px) {
  .section--lecturers .lecturer {
    background-size: auto;
  }
}

.section--lecturers .lecturer::after {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  content: "i";
  width: 2em;
  aspect-ratio: 1;
  border: 2px solid var(--clr-white);
  border-radius: 9rem;
  font-weight: 600;
  cursor: pointer;
}

.section--lecturers .lecturer.detail::after {
  content: "\2613";
}

.section--lecturers .lecturer img {
  max-width: 17rem;
  margin: auto;
  clip-path: circle();
}

.section--lecturers .lecturer h3 {
  margin-block: 3.5rem 0;
}

.section--lecturers .lecturer p {
  margin: 0;
  font-size: var(--font-size-small);
}

.lecturer-info {
  position: absolute;
  inset: 0;
  padding: 3.5rem;
  background-color: var(--clr-allports);
  font-size: var(--font-size-small);
  text-align: left;
  transform: translateY(100%);
  transition: all 300ms;
  display: flex;
  align-items: center;
}

.lecturer.detail .lecturer-info {
  transform: translateY(0%);
}

.section--course {
  padding-block: 3.5rem;
}

@media (min-width: 1200px) {
  .section--course {
    padding-block: 10rem;
  }
}

.section--course h2 {
  color: var(--clr-white);
  margin-block-end: 2em;
}

.section--course .listbg {
  padding: 3rem 1rem 20rem 1rem;
  list-style-type: none;
  background-color: var(--clr-white);
  border-radius: var(--border-radius);
  color: var(--clr-denim);
  font-weight: 600;
  /*background-image: linear-gradient(to top, transparent 0%, transparent 40%, var(--clr-white) 60%), url(../images/instructor.jpg);
  background-position: bottom 0% right 100%, -10rem right;
  background-size: auto, 200%;
  background-repeat: no-repeat, no-repeat; */
  background-image: linear-gradient(to bottom, var(--clr-white) 0%, var(--clr-white) 50%, transparent), url(../images/instructor.jpg);
  background-size: auto, 200%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, bottom right;
}

@media (min-width: 900px) {
  .section--course .listbg {
    padding: 5rem 7.5rem;
    background-image: linear-gradient(to right, var(--clr-white) 0%, var(--clr-white) 50%, transparent 85%), url(../images/instructor.jpg);
    background-position: 0 0, center right;
    background-size: 100%, auto 150%;
  }
}

.section--course ul {
  list-style-type: none;
  padding: 0;
}

@media (min-width: 1200px) {
  .section--course ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
    column-gap: 5rem;
    margin-inline-end: 50%;
  }
}

.section--course li {
  position: relative;
  padding-block: 1em;
}

.section--course li::before {
  content: "";
  display: block;
  position: absolute;
  width: 7.5rem;
  height: 1px;
  top: 0;
  background-color: var(--clr-denim);
}

.section--hours {
  padding-block-end: 3.5rem;
  color: var(--clr-white);
}

@media (min-width: 1200px) {
  .section--hours {
    padding-block-end: 10rem;
  }
}

.section--hours h2 {
  color: var(--clr-white);
  margin-block-end: 2em;
}

.section--hours h3 {
  position: relative;
  color: var(--clr-wax-flower);
  line-height: 1;
  padding-block-end: 1em;
}

.section--hours h3::after {
  content: "";
  display: block;
  width: 4em;
  height: 1px;
  background: var(--clr-jordy-blue);
  position: absolute;
  bottom: 0;
}

.section--hours h3 span {
  margin-bottom: 1rem;
  position: relative;
  display: block;
  font-size: 2.5em;
  color: transparent;
}

.section--hours div h3 span::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: url(../images/cislo_78.svg) top left no-repeat;
}

.section--hours div:nth-of-type(2) h3 span::before {
  background: url(../images/cislo_28.svg) top left no-repeat;
}

.section--hours div:nth-of-type(3) h3 span::before {
  background: url(../images/cislo_50.svg) top left no-repeat;
}

.section--hours div:nth-of-type(4) h3 span::before {
  background: url(../images/ikona_plus.svg) top left no-repeat;
}

.hours {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (min-width: 1200px) {
  .hours {
    grid-template-columns: repeat(4, 1fr);
    gap: 5rem;
  }
}

.section--reg {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 3.5rem;
  background-color: var(--clr-white);
  color: var(--clr-denim);
}

@media (min-width: 1200px) {
  .section--reg {
    padding-block: 10rem;
  }
}

.section--reg h2 {
  margin-block-end: 2em;
}

.section--reg p {
  text-align: center;
  font-size: 1.75em;
}

.section--faq {
  padding-block: 3.5rem;
  color: var(--clr-white);
}

@media (min-width: 1200px) {
  .section--faq {
    padding-block: 10rem;
  }
}

.section--faq dl {
  margin: 0;
  padding: 0;
}

.section--faq dt {
  padding-block: 1em;
  border-top: 1px solid var(--clr-jordy-blue);
}

.section--faq dt:first-of-type {
  border-top: none;
}

.section--faq dd {
  margin: 0;
  margin-block-end: 1.4em;
  color: var(--clr-wax-flower);
  font-size: var(--font-size-small);
}

.footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "fa" "fb" "fc" "fd";
  padding-block: 5rem;
  color: var(--clr-white);
}

@media (min-width: 1200px) {
  .footer {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "fa fb" "fc fb" "fd fb";
  }
}

.footer-contact {
  grid-area: fa;
}

.footer-badge {
  display: flex;
  align-items: center;
  gap: 0.5em;
  grid-area: fb;
  justify-self: start;
  align-self: center;
  margin-block: 3rem;
  padding-block: 1em;
  padding-inline: 0.25em 1em;
  border: 1px solid var(--clr-white);
  border-radius: var(--border-radius);
}

@media (max-width: 1199px) {
  .footer-badge {
    font-size: var(--font-size-small);
  }
}

.footer-badge::before {
  content: "";
  background: url(../images/ico_license.svg) 50% 50% no-repeat;
  width: 3em;
  height: 3em;
}

@media (max-width: 1199px) {
  .footer-badge::before {
    width: 5em;
    height: 5em;
  }
}

.footer-social {
  grid-area: fc;
  font-size: var(--font-size-small);
  font-weight: 600;
}

.footer-icons {
  display: flex;
  gap: 1.5rem;
  margin-block: 1em;
}

.footer-icons a {
  max-width: 5.3rem;
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 100vw;
}

.footer-icons svg {
  width: 2rem;
}

.footer-copyright {
  grid-area: fd;
  opacity: 0.5;
}

.underfooter {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding-block-end: 3rem;
}

.underfooter img {
  display: block;
  max-width: 45vw;
  width: 30rem;
}

.hamburger {
  --hamburger-size: 54px;
  --hamburger-color: var(--clr-white);
  --hamburger-background: linear-gradient(90deg, var(--clr-denim) 0%, var(--clr-gulf-blue) 100%);
  --hamburger-line-height: 3px;
  --hamburger-line-spacing: 5px;
  --hamburger-time: 200ms;
  z-index: 20;
  position: fixed;
  right: 1rem;
  top: 1rem;
  width: var(--hamburger-size);
  height: var(--hamburger-size);
  font-size: 0;
  cursor: pointer;
  background: var(--hamburger-background);
  background-size: cover;
  clip-path: circle();
}

@media (width > 1200px) {
  .hamburger {
    display: none;
  }
}

.hamburger span {
  display: block;
  position: absolute;
  width: calc(var(--hamburger-size) * 0.6);
  left: calc(var(--hamburger-size) * 0.2);
  top: 50%;
  height: var(--hamburger-line-height);
  background: transparent;
  transform: translateY(calc(var(--hamburger-line-height) / -2));
  transition: 0ms var(--hamburger-time);
}

.hamburger span::before,
.hamburger span::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--hamburger-size) * 0.6);
  height: var(--hamburger-line-height);
  background-color: var(--hamburger-color);
}

.hamburger span::before {
  top: calc(var(--hamburger-line-spacing) * -1);
  transition: top var(--hamburger-time) var(--hamburger-time), transform var(--hamburger-time) 0ms;
}

.hamburger span::after {
  bottom: calc(var(--hamburger-line-spacing) * -1);
  transition: bottom var(--hamburger-time) var(--hamburger-time), transform var(--hamburger-time) 0ms;
}

.hamburger.active span {
  background-color: transparent;
}

.hamburger.active span::before {
  transform: rotate(45deg);
  top: 0;
  transition: top var(--hamburger-time) 0ms, transform var(--hamburger-time) var(--hamburger-time);
}

.hamburger.active span::after {
  transform: rotate(-45deg);
  bottom: 0;
  transition: bottom var(--hamburger-time) 0ms, transform var(--hamburger-time) var(--hamburger-time);
}