main.css

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

:root {
  --light_green: #d8f3dc;
  --mid_green: #2d6a4f;
  --dark_green: #081c15;
}

.displays {
  display: none;
}

.blocks {
  display: block;
}

.white-background {
  background-image: url(./images/Digital_Nigeria_2022.jpg);
  background-size: cover;
}

.dark-background {
  background-image: url(./images/Digital_Nigeria_Banner11.jpg);
  background-size: cover;
}

body {
  font-family: 'Roboto Slab', serif;
  padding-top: 95px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

#header-form i {
  color: white;
  width: 25px;
}

#header-form button {
  background-color: black;
  border-radius: 50%;
  width: 30px;
  right: 0;
  margin: 0.3em 1em 0 0;
}

nav ul {
  width: 60%;
  padding-right: 10px;
  margin-right: 10vw;
}

#naver .hambuger,
#naver .hambugers {
  display: none;
  background-color: transparent;
  border: none;
}

#naver .inner-nav,
#naver .inner-navs {
  display: flex;
  justify-content: space-between;
}

#naver .inner-nav ul li a {
  color: var(--dark_green);
  font-weight: bolder;
  padding-right: 2vw;
}

#naver .inner-navs ul li a {
  color: var(--light_green);
}

#naver .inner-nav ul li a:hover,
#naver .inner-navs ul li a:hover {
  color: var(--mid_green);
  border-bottom: 2px solid var(--mid_green);
}

#naver {
  padding-top: 0;
  padding-bottom: 0;
}

#naver .container-fluid {
  justify-content: space-around;
}

#naver .inner-nav form,
#naver .inner-navs form {
  display: flex;
}

#mobile {
  background-image: url(./images/Digital_Nigeria_2022.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2100;
  height: 100vh;
  width: 100%;
  overflow: auto;
}

#mobile .container .heads button {
  background-color: transparent;
  border: none;
}

#mobile .container .mobile-menu {
  margin: 40px 40px;
}

#mobile .container .mobile-menu li a {
  font-size: 1.5em;
  color: #081c15;
  font-weight: 600;
  margin-top: 2em;
  border-bottom: 2px solid #2d6a4f;
}

#mobile .container .mobile-menu .reg-button a {
  background-color: var(--mid_green);
  border-bottom: none;
  font-size: 2em;
  padding: 1em 1.5em;
  border-radius: 10px;
  color: var(--light_green);
}

#objectives .card {
  width: 100%;
  height: 100%;
  border-radius: 4.5%;
  border: none;
}

#objectives .underline,
#call-to-paper .underline,
#dignitaries .underline,
#speakers .underline,
#agenda .underline,
#patners .underline,
#start-ups .underline,
#lives .underline {
  width: 20%;
  border-top: 2px solid green;
  padding: 1em 0;
  margin: 1em 0;
}

#register .underline {
  width: 20%;
  border-top: 2px solid green;
  padding: 0.7em 0 0.7em;
}

#contact {
  background-image: url(./images/Digital_Nigeria_Banner11.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

#contact .socials a {
  width: 20%;
  border: 2px solid white;
  padding: 0.5em;
  border-radius: 50%;
}

#contact .socials a:hover {
  border: 3px solid var(--dark_green);
}

#contact .socials {
  width: 60%;
}

#contact .underline {
  width: 20%;
  border-top: 2px solid green;
  padding: 0.5em 0;
}

#contact .footer-logo img {
  width: 85%;
}

body #carouselFade img {
  height: 105vh;
}

#dignitaries .row img {
  width: 45%;
}

#dignitaries .row .col-md-4 img {
  width: 65%;
}

#dignitaries img {
  width: 25%;
}

body h2 {
  font-size: 2.5em;
}

#speakers .inner-card {
  background: white;
}

#speakers .row {
  background-color: #d4e2dc;
}

#speakers .card {
  border: none;
}

#speakers .row .inner-card h4 {
  font-size: 1.2em;
}

#agenda ul li button {
  color: black;
  font-size: 1.5em;
  background-color: transparent;
  border: none;
}

#agenda ul li button:hover {
  color: blue;
}

#agenda ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 0.7em;
  height: 13vh;
  justify-content: center;
}

#agenda .inner-agenda {
  border: 2px solid var(--light_green);
  height: auto;
}

#agenda .inner-agenda .sections {
  background-color: var(--light_green);
}

#agenda .inner-agenda .sections li {
  width: 100%;
  text-align: center;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}

#agenda .inner-agenda .sections .first-section {
  border-bottom: 2px solid #081c15;
}

#agenda p,
#agenda h4 {
  font-weight: 600;
}

#patners .carousel-control-prev,
#patners .carousel-control-next,
#carouselInterval .carousel-control-next,
#carouselInterval .carousel-control-prev,
#carouselFade .carousel-control-prev,
#carouselFade .carousel-control-next,
#start-ups .carousel-control-prev,
#start-ups .carousel-control-next {
  background-color: #333629;
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

#patners .carousel-control-next-icon,
#patners .carousel-control-prev-icon,
#carouselInterval .carousel-control-next-icon,
#carouselInterval .carousel-control-prev-icon,
#carouselFade .carousel-control-prev-icon,
#carouselFade .carousel-control-next-icon,
#start-ups .carousel-control-next-icon,
#start-ups .carousel-control-prev-icon {
  color: white;
}

#map {
  height: 400px;
  width: 100%;
}

#map iframe {
  width: 100%;
  height: 100%;
}

#register {
  background-image: url(./images/digital-Nigeriahome-page-down-slide-1024x435-1.jpg);
  background-size: cover;
}

#register p,
#register h4 {
  color: white;
  font-weight: 600;
}

#register .inner-reg {
  border-radius: 7%;
  background-color: rgba(8, 28, 21, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 30vh;
}

#register .inner-reg h4 {
  padding: 0.5em 1em;
}

#register .inner-reg a {
  text-decoration: none;
  color: white;
  background-color: var(--mid_green);
  padding: 1em 2em;
  margin-top: 1em;
}

#register .inner-reg a:hover {
  background-color: var(--dark_green);
}

#schedule a {
  pointer-events: none;
}

#schedule .time-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

#schedule .title-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

#schedule .speaker-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#schedule .row {
  padding: 0 1.5em;
  height: 25vh;
  border-bottom: 2px solid var(--light_green);
}

#schedule .row .sides {
  border-left: 2px solid var(--light_green);
  height: 70%;
  padding-right: 0.7em;
}

#schedule .row div span {
  font-size: 0.8em;
}

#schedule .row .time-section {
  justify-content: flex-start;
}

#reg {
  background-color: var(--light_green);
  color: var(--dark_green);
  padding: 0.7em 1.3em;
}

#reg:hover {
  background-color: var(--mid_green);
}

video {
  width: 100%;
}

#carouselInterval .slide-title {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(8, 28, 21, 0.3);
}

#carouselInterval .slide-title h2,
#carouselInterval .slide-title h5 {
  background-color: rgba(8, 28, 21, 0.8);
  font-weight: bolder;
}

#carouselInterval .slide-title h2 {
  font-size: 3em;
}

#carouselInterval .carousel-item {
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
}

#carouselInterval #first-video {
  z-index: 1000;
  width: 100%;
  height: 100%;
  position: absolute;
}

#lives iframe {
  width: 100%;
  height: 100vh;
}

.fade-in {
  -webkit-animation: fade-in 2.2s ease-in-out 0.2s both;
  animation: fade-in 2.2s ease-in-out 0.2s both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.text-focus-in {
  -webkit-animation: text-focus-in 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation: text-focus-in 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

#under-the-video .images-icon {
  width: 15%;
}

#under-the-video {
  background-color: var(--light_green);
}

#up-button a svg:hover {
  fill: var(--light_green);
}

@media screen and (max-width: 900px) {
  body #carouselFade img {
    height: 75vh;
  }

  #dignitaries #president {
    width: 75%;
  }

  #register .inner-reg {
    width: 70%;
  }

  #schedule .row .sides {
    display: none;
  }

  #naver .inner-nav form,
  #naver .inner-navs form {
    display: none;
  }

  #lives iframe {
    height: 65vh;
  }
}

@media screen and (max-width: 825px) {
  #carouselInterval .slide-title h2 {
    font-size: 1.5em;
  }

  #carouselInterval .slide-title h5,
  #carouselInterval .slide-title a {
    font-size: 1em;
  }
}

@media screen and (max-width: 585px) {
  #carouselInterval .slide-title h5 {
    display: none;
  }

  #carouselInterval .slide-title h2 {
    font-size: 1.2em;
  }

  #carouselInterval .slide-title a {
    font-size: 0.7em;
  }

  nav #header-form {
    display: none;
  }

  #lives iframe {
    height: 45vh;
  }
}

@media screen and (max-width: 768px) {
  #under-the-video .inner-under {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #naver .inner-nav,
  #naver .inner-navs {
    display: none;
  }

  #naver .hambuger,
  #naver .hambugers {
    display: block;
  }

  #naver .hambugers svg {
    fill: var(--light_green);
  }

  #dignitaries .row img {
    width: 75%;
  }
}

@media screen and (max-width: 450px) {
  #schedule .row .sides {
    display: none;
  }

  #register .inner-reg {
    width: 100%;
  }

  #agenda #schedule .row {
    height: auto;
  }

  #dignitaries .row img {
    width: 65%;
  }

  #lives iframe {
    height: 35vh;
  }
}