/* General Setup */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  font-family: var(--font-family);
  font-style: var(--font-style);
  font-size: var(--fs-primary);
}

:root {
  --bgcolor-primary: #272a31;
  --color-primary: #d3d3d3;
  --color-secondary: #ec5242;
  --font-family: "Lato", sans-serif;
  --font-style: normal;
  --fw-primary: 600;
  --fw-secondary: 900;
  --fs-primary: 10px;
  --fs-secondary: 16px;
}

.partner-logo {
  width: 100px;
  height: 30px;
  margin: 1em;
}

/* Header Styling */
.nav,
.menu,
.logo-menuItems,
.menu-item {
  display: none;
}

.logo {
  width: 100px;
  height: 35px;
}

.intro {
  background-image: url(../images/main_big.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Styling Intro Section */
.intro-text {
  border: solid white 4px;
  max-width: 500px;
  background-color: var(--color-primary);
}

.about-intro-text {
  max-width: 75%;
  background-color: white;
}

.title {
  width: 70%;
}

.programs,
.programs-wrap {
  background-color: var(--bgcolor-primary);
  color: var(--color-primary);
  background-image: url(../images/pattern_bg.png);
}

.programs {
  background: rgba(255, 255, 255, 0.1);
}

.prog-wrapp {
  background-color: var(--bgcolor-primary);
  color: var(--color-primary);
}

.line {
  width: 30px;
  height: 1px;
  background-color: var(--color-secondary);
}

.line1 {
  width: 15px;
  height: 1px;
  background-color: rgba(130, 138, 138, 0.164);
}

.prog-images {
  width: 70px;
  height: 50px;
}

.lecture {
  width: 150px;
  color: var(--color-secondary);
  font-size: 12px;
}

h4 {
  font-size: 9px;
}

h3 {
  font-size: 18px;
  font-weight: 600px;
}

h5 {
  font-size: 15px;
  font-weight: 500;
}

.join {
  height: 75px;
  background-color: var(--color-secondary);
}

.greetings,
.main-heading {
  color: var(--color-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--fw-primary);
}

.main-heading {
  font-weight: var(--fw-secondary);
  font-size: var(--fs-secondary);
}

.date,
.intro-text,
.text,
.social-links a {
  font-family: var(--font-family);
  font-size: var(--fs-primary);
  color: var(--bgcolor-primary);
}

.social-links {
  background-color: var(--bgcolor-primary);
}

.social-links a {
  text-decoration: none;
  color: var(--color-primary);
}

nav .navbar-nav li a {
  font-family: var(--font-family);
  font-size: var(--fs-primary);
  color: var(--bgcolor-primary);
}

nav .navbar-nav li .campaign {
  color: var(--color-secondary);
  border: solid var(--color-secondary) 4px;
}

.navbar {
  background-color: white;
}

.heading-small,
.heading-big,
.heading-about {
  color: var(--color-secondary);
}

.heading-big,
.heading-about {
  font-weight: 90;
  font-style: normal;
  font-size: 50px;
  background: -webkit-linear-gradient(#e0680679, #fc2109);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-stretch: expanded;
}

.heading-about {
  font-size: 30px;
}

.contain {
  min-width: 855px;
}

.introduce_main {
  background-color: #f7f7f8;
  background-image: url(../images/about_bg_01.png);
  background-repeat: no-repeat;
  height: auto;
  overflow: auto;
  background-size: 100%;
}

.date {
  font-weight: var(--fw-primary);
}

.speakers {
  width: 110px;
  height: 110px;
}

.see-more {
  height: 50px;
  background-color: white;
  border: solid rgb(179, 173, 173) 2px;
}

.see-all-progs {
  color: var(--color-primary);
  text-decoration: underline var(--color-primary);
}

.join-prog {
  color: var(--color-primary);
}

.text-color {
  background-color: rgba(0, 0, 0, 0.2);
}

.footer-bg {
  background-color: white;
}

/* About page styling */
.my-about-logo {
  min-width: 50%;
  border: solid rgba(0, 0, 0, 0.2);
}

.cc-image {
  max-width: 75%;
}

.my-logo-section {
  border-bottom: solid rgba(0, 0, 0, 0.2);
}

.bgdark {
  color: var(--color-primary);
}

.about-hover {
  background-color: red;
}

.about-hover img {
  mix-blend-mode: darken;
}

.about-hover:hover {
  background-color: white;
}

.btn-close {
  top: 15px;
  left: 25px;
}

@media screen and (max-width: 767px) {
  #navbarSupportedContent {
    height: 100vh;
  }

  nav .navbar-nav li a {
    font-size: 20px;
  }
}

@media screen and (min-width: 768px) {
  #speakersection2 {
    row-gap: 50px;
  }

  .speakers {
    width: 110px;
    height: 110px;
  }
}