@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Condensed:wght@300;400;700&family=Yanone+Kaffeesatz:wght@200;300;400;500;600;700&display=swap');

* {
    padding: 0;
    margin: 0;
    line-height: 1.6;
    box-sizing: border-box;
}

:root {
    --nav-padding: 30px;
    --card-width: 40ch;
    --image-conainer-height: calc(100vh - 4*var(--nav-padding)); 
}

body {
    width: 100vw;
    font-family: 'Yanone Kaffeesatz', 'Ysabeau Office', Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

.header {
    width: 100vw;
    height: max-content;
    overflow: hidden;
    background-color: rgb(22, 162, 226);
}

.navigation {
    display: flex;
    justify-content: center;
    padding: var(--nav-padding) 15%;
}

.navigation a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    display: grid;
    padding: 2px 10px;
    position: relative;
    justify-content: center;
    align-items: center;
}

.navigation .nav_links a::after {
    content: '';
    position: absolute;
    display: block;
    height: 2px;
    border-radius: 1000px;
    width: 0%;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
    background: rgb(255, 255, 255);
    transition: .3s ease-in-out;
}

.navigation .nav_links a:hover::after {
    width: 100%;
}

.navigation .nav_links {
    display: flex;
    list-style-type: none;
    gap: 1.5rem;
}

.slide_image_container {
  position: relative;
}

.text {
    position: absolute;
    z-index: 3250892345;
    left: 50%;
    top: 50%;
    display: grid;
    justify-items: center;
    transform: translate(-50%, -50%); 
    text-align: center;
    color: rgb(255, 255, 255);
}

.text h2 {
  font-size: 3rem;
  background: linear-gradient(132deg, rgb(30, 12, 128) 0.00%, rgb(63, 184, 221) 50.00%, rgb(255, 149, 213) 100.00%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  width: fit-content;
}

.text h4 {
  font-weight: 300;
  font-size: .9rem;
  width: min(45ch, 90%)
}

.carousel {
    width: 100vw;
    display: grid;
    grid-auto-flow: column;
    height: 80vh;
    overflow: hidden;
    position: relative;
}

.slide_container {
    transition: .3s ease;
}

.slide {
    display: grid;
    place-items: center;
    height: 100%;
    width: 100%;
    color: white;
    font-size: 3rem;
    font-weight: 1000;
    position: absolute;
}

.carousel_btn {
    --width: 30px;
    width: var(--width);
    height: var(--width);
    position: absolute;
    border: none;
    border-radius: 1000px;
    transform: translate(0, -50%);
    top: 50%;
    overflow: hidden;
    z-index: 10000;
    background: rgb(8, 103, 116);
    color: white;
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide_container div::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.596);
}

.carousel_btn:nth-of-type(1) {
    left: 15px;
}

.carousel_btn:nth-of-type(2) {
    right: 15px;
}

.carousel_btn::after {
    content: '';
    transition: .4s ease-in-out;
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background:rgb(22, 144, 165);
    z-index: -1;
    border-radius: 1000px;
}

.carousel_btn:hover::after {
    height: 100%;
    width: 100%;
}

main {
    margin: 0 0 5rem;
}

#about {
    display: grid;
    align-items: center;
    justify-content: center;
}

#about .content, .content_card ul {
    width: min(55ch, 95%);
    font-size: .9rem;
    margin: 0 auto;
}

#about .heading {
    height: 17rem;
    width: 100vw;
    display: grid;
    place-items: center;
    color: rgb(7, 114, 133);
    font-size: 30PX;
    font-weight: 400;
}

#about p {
    font-weight: 300;
}

.content_card {
    background: rgb(4, 75, 75);
    display: grid;
    color: white;
    place-items: center;
    padding: 0;
    margin: 80px 0 0;
}

.content_card .heading {
    height: 10rem;
    background: linear-gradient(132deg, rgb(59, 55, 106) 0.00%, rgb(0, 143, 186) 50.00%, rgb(255, 149, 213) 100.00%);
    display: grid;
    place-items: center;
    width: 100vw;
    color: white;
    padding: 0 10%;
}

.content_card ul {
    display: grid;
    gap: 1rem;
    margin: 160px 20px;
    font-weight: 300;
}

#team {
  --height: 15rem;
  --percent: 20%;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }

  #team::after {
    content: '';
    display: block;
    position: absolute;
    background: rgba(14, 153, 172, 0.103);
    width: 1000vw;
    height: 400px;
    rotate: 45deg;
    z-index: -1;
  }

  #team::before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(14, 153, 172, 0.103);
    width: 1000vw;
    height: 400px;
    align-self: center;
    z-index: -1;
  }

#team .heading {
    width: fit-content;
    display: grid;
    justify-content: center;
    font-size: 3rem;
    height: var(--height);
    place-items: center;
    background: linear-gradient(132deg, rgb(30, 12, 128) 0.00%, rgb(63, 184, 221) 50.00%, rgb(255, 149, 213) 100.00%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#contact {
    margin: 80px 0 0;
}

#contact h2 {
    height: 10rem;
    color:rgba(184, 35, 117, 0.911);
    width: 100vw;
    display: grid;
    place-items: center;
    margin: 60px 0 0;
}

.content {
    margin: 5rem 0 0;
    grid-auto-flow: column;
    width: 100%;
}

.card {
    --border-radius: 7px;
    border-radius: var(--border-radius);
    width: min(var(--card-width), 100%);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
    display: grid;
    position: relative;
    text-align: center;
    transition: 200ms ease-in-out;
    opacity: 1;
    min-height: 400px;
    overflow: hidden;
    background: transparent;
  }

  .card::after, .card::before {
    --height: 100px;
    content: '';
    width: 1000000vw;
    height: var(--height);
    position: absolute;
    z-index: -1;
    place-self: center;
    
  }
  
  .card_content {
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    display: grid;
    background: rgb(255, 255, 255);
  }
  
  .card:hover {
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .25);
  }

  .card_header {
    display: grid;
    margin: 30px 0 0;
    background-image: linear-gradient(rgba(22, 171, 197, 0.432) 50%, white 50%);
  }

  .image_container {
    width: min(60%, 180px);
    position: relative;
    height: 210px;
    margin: 10% 10% 0 0;
    justify-self: end;
  }

  .image_container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  .card_heading {
    font-size: 1.4rem;
    position: absolute;
    font-weight: 300;
    rotate: -90deg;
    font-family: 'asap condensed';
    color: rgb(59, 59, 59);
    z-index: 10000;
    align-self: center;
    transform-origin: top left;
    left: 10px;
    padding: 0 5px;
  }

  .card_heading::after, .card_heading::before {
    content: '';
    display: block;
    position: absolute;
    width: 30px;
    height: 1px;
    background: black;
    top: 50%;
    transform: translate(0, -50%);
  }

  .card_heading::after {
    left: 100%;
  }

  .card_heading::before {
    right: 100%;
  }
  
  .card_body {
    padding: 30px 10px 30px;
    font-size: .9rem;
    font-weight: 300;
    width: min(100%, 40ch);
    justify-self: end;
    position: relative;
    display: grid;
    place-items: center;
  }

  .watermark {
    font-size: 10rem;
    position: absolute;
    color: rgba(73, 73, 73, 0.13);
  }
  
  .card_container {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-width) + 3ch), 55ch));
    padding: 30px;
    width: 100vw;
    gap: 2rem;
    align-items: center;
    justify-content: center;
  }

  .card_footer {
    background: rgba(0, 0, 0, 0.555);
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    z-index: 124980;
    opacity: 0;
    pointer-events: none;
    transition: .3s ease-in-out;
  }

  .card_footer.active {
    pointer-events: all;
    opacity: 1;
  }

  .card_footer ul {
    display: flex;
    list-style: none;
    gap: 9rem;
    position: relative;
    transition: .8s ease-in-out;
    transform: translate(50%);
  }

  .card_footer ul.active {
    gap: .6rem;
    left: 50%;
    transform: translate(-50%);
  }

  .card_footer ul li {
    background: rgb(19, 129, 133);
    border-radius: 200px;
  }

  .card_footer ul li a {
    --font-size: 1.2rem;
    --width: calc(var(--font-size) + 1rem);
    display: grid;
    place-items: center;
    font-size: var(--font-size);
    width: var(--width);
    height: var(--width);
    position: relative;
    text-decoration: none;
    z-index: 2;
    border-radius: 208123px;
    color: rgb(255, 255, 255);
  }

.card_footer ul li a::after {
    content: '';
    position: absolute;
    display: block;
    height: 0;
    z-index: -1;
    transition: .5s ease-in-out;
    width: 0;
    border-radius: 20000px;
    background: rgba(5, 66, 58, 0.596);
}

.card_footer ul li a:hover::after {
    width: 100%;
    height: 100%;
}