/* CSS RESET */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
header,
hgroup,
menu,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
header,
hgroup,
menu,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

.learning_res_h1, span#twenty-hour, span#header-num-count, span.discounted-price, span.original-price, span.feature-stat {
  font-size: inherit !important;
}

/* CUSTOM CSS */
:root {
  --desktop-h1-font-size: 72px;
  --desktop-h2-font-size: 40px;
  --desktop-h3-font-size: 24px;
  --desktop-h4-font-size: 20px;
  --desktop-p-font-size: 18px;
  --accent-color: #ec8719;
  --contrast-color: #3d3d3d;
}

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

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
}

.learning_res_body {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.6);
  background-blend-mode: lighten;
}

.learning_res_a {
  text-decoration: none !important;
  color: #009eff !important;
}

.learning_res_h1 {
  font-size: var(--desktop-h1-font-size) !important;
}

.learning_res_h2 {
  font-size: var(--desktop-h2-font-size);
}

.learning_res_h3 {
  font-size: var(--desktop-h3-font-size);
}

.learning_res_h4 {
  font-size: var(--desktop-h4-font-size);
}

.learning_res_p {
  font-size: var(--desktop-p-font-size);
  color: var(--contrast-color);
}

.learning_res_nav {
  height: 100px;
  width: 100%;
  background-color: transparent;
}

.learning_res_nav h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.learning_res_button {
  padding: 15px 30px;
  border-radius: 10px;
  border-style: none;
  background-color: #ec8719;
  color: white;
  cursor: pointer;
  text-transform: uppercase;
}

.learning_res_button a {
  color: white !important;
}

.learning_res_button:hover {
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
}

.learning_res_button:active {
  outline: none;
}

.learning_res_button:focus {
  outline: none;
}

/* Header Section */

.learning_res_header {
  display: flex;
  padding: 80px;
  min-height: 80vh;
}

#twenty-hour {
  color: var(--accent-color);
}

/* .header-left {
  width: 50%;
} */

.header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  position: relative;
  padding-bottom: 8rem;
}

.learning_res_body > main > header > div.header-left.aos-init.aos-animate {
  width: 100%;
}

.header-left h3 {
  max-width: 410px;
  font-size: 24px;
  line-height: 158.5%;
}

.header-left h1 {
  font-size: var(--desktop-h1-font-size);
  font-weight: bold;
  line-height: 1.1;
}

body
  > main
  > header
  > div.header-left.aos-init.aos-animate
  > div.header-btns
  > button:nth-child(1):hover {
  opacity: 1;
  transform: scale(1.05);
}

.header-btns > button:nth-child(2) {
  color: var(--contrast-color);
  background-color: transparent;
}

.header-left img {
  width: 140px;
  bottom: 0;
}

.header-right {
  display: flex;
  justify-content: flex-end;
  @media screen and (max-width: 992px) {
    min-height: 868px;
  }
}

.original-price {
  text-decoration: line-through;
  font-size: 20px;
}

.discounted-price {
  font-weight: bold;
  color: var(--accent-color);
}

.price-tag-note {
  color: black;

  @media screen and (min-width: 1440px) {
    width: 80%;
  }
}

.hero-container {
  width: 100%;
  height: 100%;
  border-radius: 27px 27px 27px 170px;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;

  @media screen and (max-width: 1440px) {
    border-radius: 0;
  }
}

.hero-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.learning_res_body
  > main
  > header
  > div.header-left.aos-init.aos-animate
  > div
  > button:nth-child(1)
  > a {
  color: white;
}

/* Section Divider */
.divider {
  width: 100%;
  height: 122px;
  background-color: #ec8719;
}

/* Course Overview Section */
.course-overview-section {
  padding: 80px;
  display: flex;
}

.course-overview-left {
  width: 40%;

  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

.course-overview-left h2 {
  font-size: var(--desktop-h2-font-size);
  font-weight: bold;
  line-height: 1.2;
}

.course-overview-left button {
  align-self: flex-start;
}

.course-overview-left > h3:nth-child(2) {
  min-width: 386px;
  font-size: var(--desktop-h3-font-size);
}

.course-overview-right {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}

.course-overview-left {
  display: flex;
  padding-right: 1rem;
}

.course-overview-right {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  justify-content: center;
  width: 60%;
}

.course-overview-card-top-row,
.course-overview-card-bottom-row {
  display: flex;
  gap: 1rem;
  margin-left: 1rem;
}

.course-overview-card {
  height: 308px;
  border-radius: 27px;
  background-color: white;
  padding: 3.5rem;
}

.course-overview-card ul {
  list-style: circle;
}

.course-overview-card-top-row > div:nth-child(1) {
  background-color: var(--contrast-color);
  color: white;
  transform: rotate(-5deg);
  z-index: 9999;
}

.shake-animation {
  animation: shake 0.8s ease-in-out !important;
}

@keyframes shake {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-5deg);
  }

  40% {
    transform: rotate(5deg);
  }

  60% {
    transform: rotate(-5deg);
  }
  80% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(-5deg);
  }
}

.course-overview-card h4 {
  color: var(--accent-color);
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 22px;
}

.course-overview-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 258px;
}

.course-overview-card ul li {
  line-height: 1.3;
  font-size: 18px;
}

/* Course Feature Section */
.feature-stat {
  font-size: var(--desktop-h1-font-size) !important;
}

.course-feature-section h2 {
  text-align: center;
  font-size: var(--desktop-h2-font-size);
  margin: 2rem auto;
  font-weight: bold;
  line-height: 1.5;
}

.features {
  display: flex;

  justify-content: space-around;
  margin-top: 0;
  margin-bottom: 32px;
}

.feature {
  position: relative;
}

.feature h2 {
  font-size: 36px;
  font-weight: 500;
  margin-block: 0;
  margin-top: 32px;
}

#feature-stat {
  font-size: 96px !important;
  color: black;
}

.orange-line {
  width: 100%;
  background-color: var(--accent-color);
  height: 20px;
  position: absolute;
  bottom: 25px;
  z-index: -1;
}

/* Course Highlights */
#course-highlights {
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#course-highlights > h2 {
  font-weight: bold;
  margin-bottom: 2rem;
}

#carouselExampleIndicators {
  height: 60vh;
  border-radius: 27px;
  overflow: hidden;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

#carouselExampleIndicators > div > div.carousel-item > img {
  height: 100%;
  object-fit: cover;
  object-position: 25% 15%;
}

#carouselExampleIndicators > div > div.carousel-item {
  height: 100%;
}

#carouselExampleIndicators > div {
  height: 100%;
}

.carousel-overlay {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid black;
  background-color: black;
  opacity: 0.5;
  padding: 5rem;
}

.carousel {
  min-height: 70vh;  /* Default for small screens */

  @media screen and (min-width: 768px) {
    min-height: unset;  /* Remove fixed height for medium screens */
  }

  @media screen and (min-width: 1440px) {
    min-height: 60vh;  /* Set to 80vh for x-large screens */
  }
}

.remove-opacity {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.course-highlights-text-content {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 5rem;
  display: flex;
  flex-direction: column;
}

.course-highlights-text-content h2,
.course-highlights-text-content p {
  color: white;
  opacity: 1;
}

.course-highlights-text-content hr {
  border: 1px solid white;
}

.course-highlights-text-content img {
  width: 10rem;
  justify-self: flex-end;
  align-self: flex-end;
  position: absolute;
  bottom: 10rem;
}

/* CTA */
#cta {
  height: 80vh;
  padding: 80px;
}

.cta-content {
  display: flex;
  height: 100%;
}

.cta-left,
.cta-right {
  width: 50%;

  height: 100%;
}

.cta-right h2 {
  font-size: 40px;
  font-weight: bold;
}

.cta-right > p:nth-child(2) {
  line-height: 158.5%;
  font-size: 22.6px;
}

.cta-img-container {
  border-radius: 27px 170px 27px 27px;
  width: 100%;
  height: 100%;

  background-color: var(--accent-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cta-img-container > h2:nth-child(1) {
  color: white;
}

.cta-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin-left: 90px;
}

.cta-buttons {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
}

.cta-buttons a {
  flex: 1;
}

.cta-buttons .learning_res_button {
  width: 100%;
  min-width: 160px;
}

.cta-right > button:nth-child(4) {
  align-self: flex-start;
  margin-top: 1rem;
}

#cta > div > div.cta-right > div.cta-buttons > button:nth-child(2) {
  background-color: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  margin-left: 2rem;
}

#cta > div > div.cta-right > div.cta-buttons > button:nth-child(2):hover {
  color: white;
  background-color: var(--accent-color);
  opacity: 1 !important;
}

.cta-right .download-container a {
  @media screen and (max-width: 1440px) {
    color: blue !important;
  }
}

.course-detail-icon {
  width: 28px;
}

.course-detail {
  display: flex;
  gap: 1rem;
}

.course-detail-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

/* Course Certificate Section */
#course-certificate {
  background-color: var(--contrast-color);
  color: white;
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#IABE-certified {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-block: 2rem;
}

#IABE-certified > h2:nth-child(1) {
  color: var(--accent-color);
  font-size: 48px;
}

#IABE-certified > img {
  width: 468px;
}

#course-certificate > h2 {
  font-weight: bold;
}

#cta > div > div.cta-right > div.cta-buttons > button > a {
  color: var(--contrast-color);
}

#cta > div > div.cta-right > div.cta-buttons > button:nth-child(1) > a {
  color: white;
}

#cta > div > div.cta-right > div.cta-buttons > button:nth-child(2) > button {
  background-color: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  margin-left: 1rem;
}

#cta > div > div.cta-right > div.cta-buttons > button:nth-child(2) > button:hover {
  background-color: var(--accent-color);
  color: white;
  opacity: 1;
}

.cta-buttons a:nth-child(2) .learning_res_button {
  background-color: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.cta-buttons a:nth-child(2) .learning_res_button:hover {
  background-color: var(--accent-color);
  color: white;
  opacity: 1;
}

/* Footer */
.learning_res_footer {
  height: 200px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Tablet Screens */
@media screen and (max-width: 1440px) {
  .learning_res_header {
    padding: 0;
  }

  header h1, header h2, header h3, header h4, header h5, header h6 {
    color: white !important;
  }

  header {
    padding-block: 5rem;
  }
  .header-left {
    position: absolute;
    color: white !important;
    padding: 3.3rem;
    z-index: 9;
    /* top: 22%; */
  }
  .header-left .learning_res_p {
    color: white !important;

    @media screen and (max-width: 768px) {
      font-size: 1rem * 0.8; 
    }
  }

  .header-right {
    width: 100%;
  }

  .hero-container {
    position: relative;
  }

  .header-overlay {
    width: 100%;
    position: absolute;
    top: 0;
    background-color: black;
    height: 100%;
    opacity: 0.5;
  }

  body > main > header > div.header-right > div {
    border-radius: 27px;
  }

  body > main > header > div.header-left > div > button:nth-child(2) {
    color: white !important;
    opacity: 0.7 !important;
  }

  body > main > header > div.header-left > div > button:nth-child(2):hover {
    opacity: 1;
    transition: 0.3s ease-in-out;
  }

  .course-overview-section {
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }

  .course-overview-left,
  .course-overview-right {
    width: 100%;
  }

  .course-overview-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  body
    > main
    > div.course-overview-section
    > div.course-overview-left
    > button {
    align-self: center;
  }

  #cta {
    height: auto;
    background-color: var(--accent-color);
  }

  #cta > div {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .cta-left,
  .cta-right {
    width: 100%;
  }

  .cta-left {
    height: 5rem;
    margin-bottom: 2rem;
  }

  .cta-right {
    margin-left: 0;
    gap: 1.875rem;
    height: auto;
  }

  .cta-img-container {
    background-color: transparent;
  }

  .cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    max-width: 300px;
  }

  .cta-buttons a {
    width: 100%;
  }

  .cta-buttons .learning_res_button {
    width: 100%;
  }

  #cta > div > div.cta-right > button {
    background-color: var(--contrast-color);
    color: white;
  }

  #cta > div > div.cta-right > div,
  #cta > div > div.cta-right > button {
    margin: 0 auto;
  }

  .cta-buttons button {
    background-color: var(--contrast-color);
    color: white !important;
    border: 1px solid var(--contrast-color) !important;

  }

  #cta > div > div.cta-right > div.cta-buttons > button:nth-child(2) {
    margin-left: 0;
    color: var(--contrast-color) !important;
    border: 1px solid var(--contrast-color);
  }

  #cta > div > div.cta-right > div.cta-buttons > a:nth-child(2) > button:hover {
    background-color: var(--contrast-color);
    color: white !important;
  }

  #cta > div > div.cta-right > div.cta-buttons > a:nth-child(2) > button {
    color: var(--contrast-color) !important;
  }

  #cta > div > div.cta-right > div.cta-buttons > button:nth-child(2):hover {
    background-color: var(--contrast-color) !important;
    color: white !important;
  }

  .cta-buttons #cta > div > div.cta-right > p {
    width: 60%;
    align-self: center;
  }

  #IABE-certified {
    flex-direction: column-reverse;
    gap: 2rem;
    align-items: flex-start;
  }

  body > main > header > div.header-left.aos-init.aos-animate > img {
    bottom: -5rem;
  }

  .learning_res_button.learn-more-btn {
    color: white !important;
    background-color: transparent !important;
  }

  .learning_res_button.learn-more-btn:hover {
    background-color: white !important;
    color: var(--accent-color) !important;
  }

  .cta-buttons a:nth-child(2) .learning_res_button {
    background-color: transparent;
    color: var(--contrast-color);
    border: 1px solid var(--contrast-color);
  }

  .cta-buttons a:nth-child(2) .learning_res_button:hover {
    background-color: var(--contrast-color);
    color: white !important;
    opacity: 1;
  }
}

/* Mobile Screens */
@media (width <= 955px) {
  .learning_res_header,
  .course-overview-section {
    padding: 23px;
    padding-block: 0;
    gap: 0rem;
    padding-top: 5rem;
  }

  .learning_res_header {
    padding: 0;
    /* padding-block: 5rem; */
    padding-top: 0;
    justify-content: center;
  }

  .header-left {
    /* top: 15%; */
    width: 100%;
  }

  .learning_res_body > main > .learning_res_header > div.header-right > div {
    border-radius: 0 0 0 0;
  }

  .course-overview-left {
    padding: 0;
  }

  .course-overview-right {
    padding: 3.5rem;
    min-width: none;
    align-items: center;
  }

  .course-overview-card-top-row,
  .course-overview-card-bottom-row {
    flex-direction: column;
    margin-left: 0;
  }

  .course-overview-card {
    height: auto;
    width: auto;
  }

  .learning_res_body > main > div.course-feature-section > h2 {
    font-size: 1.875rem;
  }

  .features {
    flex-direction: column;
    text-align: center;
    min-width: 238.39px;
    margin: 0 auto;
    gap: 5.625rem;
  }

  .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .feature img {
    width: 7.625rem;
  }

  .learning_res_body > main > div.course-feature-section > div > div > h2 {
    margin-top: 0;
  }

  #cta > div > div.cta-right > h2 {
    width: 21.75rem;
    align-self: center;
  }

  #IABE-certified > h2,
  #course-certificate > div > h2 {
    font-size: 22px !important;
  }

  #IABE-certified > h2 {
    font-weight: bold;
    min-width: 322px;
  }

  #IABE-certified > img {
    width: 12.8rem;
  }

  .orange-line {
    width: 17rem;
  }

  #course-highlights {
    padding: 0;
    padding-block: 5rem;
    padding-bottom: 0;
  }

  #carouselExampleIndicators {
    border-radius: 0;
  }

  #IABE-certified > a > img {
    width: 10rem;
  }

  .header-btns > .learn-more-btn {
    color: white !important;
  }
}

@media (width <= 524px) {
  body > main > header > div.header-left.aos-init.aos-animate {
    padding: 2rem;
  }

  #IABE-certified > h2 {
    min-width: 0;
  }

  #cta > div > div.cta-right > div.cta-buttons {
    display: flex;
  }

  body > main > header > div.header-right.aos-init.aos-animate {
    height: 125vh;
  }

  #cta > div > div.cta-right > div.course-detail-container {
    text-align: left;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  #carouselExampleIndicators
    > div
    > div.carousel-item
    > div.course-highlights-text-content
    > img {
    align-self: flex-start;
  }

  #cta > div > div.cta-right > p {
    font-size: 15px;
  }

  /* #cta > div > div.cta-left {
    margin-bottom: 0;
  } */
}