:root {
    --light-green: #8cc540;
    --dark-grey: #616161;
}

a.video-background-play {
    height: 60px;
    width: 60px;
    border-radius: 50%;
}

a.video-background-play>i {
    transform: translate(4px, 10px);
}

a.btn.btn-primary.btn-rounded {
  border: none !important;
    text-shadow: none;
}

div.col-md-10.col-lg-6.text-center.text-sm-end.order-2.order-lg-1.pe-lg-0.py-lg-5.my-lg-5, div.col-lg-7.col-xl-6.pb-5.pb-lg-0.mb-lg-5.mb-xl-0 {
  color: var(--dark-grey);  
  text-shadow: white 0 0 10px;
}

div.row.align-items-center.justify-content-center.h-100.pt-5.py-xl-5.my-xl-5{
    padding-top: 0 !important;
    margin-top: 0 !important
}

div.mb-4.mb-lg-0#footer-social-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: right;
}

div.mb-4.mb-lg-0#footer-social-col>h4 {
  margin-right: 16px;
}

footer>div.container>div.row.text-center.text-lg-start.pt-4 {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

#EMT-online {
        background: linear-gradient(to right, white, rgba(0, 0, 0, 0));
        padding-top: 0 !important;
}

#EMT-online::before {
    content: "";
    background-image: url(/img/NAR-assets/ZG1A2796.jpg);
    background-size: cover;
    opacity: 0.3;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

#AEMT-online {
    padding-bottom: 100px !important;
}

#more-courses-sect::before {
    content: "";
    background-image: url(/img/NAR-assets/ZG1A3550.jpg);
    background-size: cover;
    opacity: 0.3;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -2;
}

.font-sz-custom {
  font-size: 36px;
}

.hidden {
  display: none;
  visibility: none;
}

.section.section-with-shape-divider .shape-divider.shape-divider-reverse-y {
    position: relative;
    margin-top: -210px;
    color: transparent;
    transform: rotate(180deg) rotateY(180deg);
}

.txt-color-dark-grey {
  color: var(--dark-grey);
}

/* image cards */
.gallery-container {
    margin: 0 auto;
    display: flex;
    width: 90vw;
  }

  .panel {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    flex: 0.5;
    margin: 10px;
    position: relative;
    transition: flex 0.7s ease-in;
  }

  .panel a.link.img-gal-link {
    font-size: 36px;
    text-shadow: #fff 0 0 10px;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(255, 255, 255, .4);
    color: #000;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 10px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 5px;
    opacity: 0;
    transition: opacity 0.3s ease-in 0.7s;
    display: none;
  }

  .panel.active {
    flex: 5;
  }

  .panel.active a.link.img-gal-link {
    opacity: 1;
    display: inherit;
  }

  @media (max-width: 480px) {
    .gallery-container {
      display: none;
      visibility: none;
    }

    .panel:nth-of-type(4),
    .panel:nth-of-type(5) {
      display: none;
    }
  }

/* modal styling */
.modal-container {
  position: relative;
}

.modal-overlay {
  z-index: 99;
  background-color: rgba(0, 0, 0, .8);
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  animation: fade-in 0.2s;
}

.my-modal {
  z-index: 100;
  background-color: #fff;
  height: auto;
  width: 600px;
  max-width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 5px;
  transform: translate(-50%, -40%);
  animation: fade-in 1s;
}

.modal-content {
  height: 100%;
  width: 100%;
  padding: 20px;
  border: none;
}

.btn.close-btn.modal-close-btn {
  background-color: var(--light-green);
  font-size: 30px;
  font-weight: 400;
  line-height: 20px;
  padding: 0;
  height: 40px;
  width: 40px;
  float: right;
}

@keyframes fade-in {
  from {opacity: 0}
  to {opacity: 1}
}