/* global css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --footer-color: #13183f;
  --background-color: #ffffff;
  --secondary-background-color: #979797;

  --link-color: #f74780;
  /* button colors */
  --first-button-gradient: linear-gradient(180deg, #ff6f48 0%, #f02aa6 100%);
  --first-button-hover: #666ca3;
  --gradient-hover: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    linear-gradient(180deg, #ff6f48 0%, #f02aa6 100%);
  --header-button-color: #13183f;
  --header-button-hover: #83869a;
  --footer-gradient: linear-gradient(180deg, #4851ff 0%, #f02aa6 100%);
  --footer-gradient-hover: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    linear-gradient(180deg, #4851ff -54.32%, #f02aa6 100%);
}
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--secondary-background-color);
  overflow-x: hidden;
}
/* picture{
  margin:auto;
} */
/* picture {
  /* border: 1px solid black; */

img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* border: 1px solid green; */
  /* border-radius: 14px 14px 0 0; */
}
p {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 3rem);
  line-height: 1.625;
}
.btn {
  color: white;
  border: 1px solid white;
  border-radius: 30px;
  padding: 0.8rem 1.8rem;
  font-weight: 700;
}

/* banner */

.site-banner {
  display: flex;
  padding: 3% 6%;
  justify-content: space-between;
  align-items: center;
}
.course:last-child {
  justify-self: end;
}
.company-icon {
  width: clamp(5rem, 5rem + 3vw, 10rem);
}
h2 {
  font-size: clamp(1.5rem, 1.5rem + 1.5vw, 6rem);
  line-height: 1.33;
}

/* hero section */
.hero-section {
  margin: 6%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* the button here will grow because by default, flex elements would grow to fill the div */
  /* vertical margin will not be the sum of the two margins, but the maximum  */
}
.main-header {
  color: #13183f;
  font-size: 2.5rem;
  font-size: clamp(2.5rem, 2.5rem + 0.5vw, 5rem);
}
.pink {
  align-self: flex-start;
  background: var(--first-button-gradient);
  /* to use linear gradient you need to use background image or background */
  color: white;
  border: 1px solid var(--first-button-gradient);
  position: relative;
}

/* courses-section div */
.article-icon {
  width: 3.5rem;
}
.courses-section {
  margin: 6%;
}
.course {
  padding: 1rem 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: stretch;
}
.course .link {
  margin: auto 0 0 0;
}

.link {
  color: var(--link-color);
  font-weight: 700;
  text-decoration: none;
}
.introduction-div {
  background: var(--first-button-gradient);
  border-radius: 14px;
  padding: 2rem;
  justify-content: center;
}
.subsection-header {
  color: var(--background-color);
}
.article-header {
  color: var(--footer-color);
}

/* footer */
.footer {
  display: flex;
  padding: 2rem 6%;
  justify-content: space-between;
  align-items: center;
  background-color: var(--footer-color);
}
.gradient {
  position: relative;
  background: var(--footer-gradient);
  border: 1px solid var(--footer-gradient);
  /* z-index: ; */
}
/* linear-gradient for buttons */
/* transition does not work for gradients */
.dark {
  position: relative;
  background-color: var(--header-button-color);
  border: 1px solid var(--header-button-color);
  transition: all 1s ease;
}
.dark:hover,
.dark:active {
  background-color: var(--first-button-hover);
  border: 1px solid var(--first-button-hover);
  cursor: pointer;
}
.dark::after {
  display: flex;
  align-items: center;
  justify-content: center;
  content: "Get Started";
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 1s ease;
  opacity: 0;
  width: 100%;
  border-radius: 30px;
  height: 100%;
  z-index: 10;
}
.pink::after,
.gradient::after {
  /* centers the text */
  display: flex;
  align-items: center;
  justify-content: center;
  content: "Get Started";
  position: absolute;
  background: var(--footer-gradient-hover);
  left: 0;
  top: 0;
  transition: opacity 1s ease;
  opacity: 0;
  width: 100%;
  border-radius: 30px;
  height: 100%;
}
/* why does .dark suddenly need a z-index?? */

.pink:hover::after,
.gradient:hover::after {
  opacity: 1;
  cursor: pointer;
}
/* {
  opacity: 1;
  cursor: pointer;
  /* display: flex; */

/* .gradient:hover,.gradient:active{
  transition:0.3s;
  cursor: pointer;
} */
/* transition does not work for linear-gradient */