* {
  /* Deault CSS on all Elements */
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Euclid Circular A", "Poppins";
  font-size: medium;
}

header {
  text-align: center;
  background-color: black;
}

.banner {
  /* Backgroung banner GIF */
  background-image: url(../assets/logo/logo.png);
  height: 30vw;
  min-height: 100px;
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 50%;
}

/* Style the top navigation bar */
nav {
  display: flex;
  background-color: #333;
  align-items: center;
}

/* Style the navigation bar links */
nav .menu-btn {
  color: white;
  padding: 15px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
nav .menu-btn:hover {
  background-color: #ddd;
  color: black;
}

/* Sizing Logo */
nav .logo {
  width: 100%;
  height: auto;
  max-width: 25px;
  margin: 0px 15px;
}

/* Main column */
main {
  flex: 100%;
  /* Set the width of the main content */
  background-color: white;
  /* White background color */
}

/* every even section with grey color */
section:nth-child(even) {
  background-color: #f7f7f7;
}

section {
  text-align: center;
  height: 100%;
  padding: 75px 0px;
  min-height: 40vh;
}

section h2 {
  margin-bottom: 50px;
}

section h2 span {
  padding: 10px 55px;
  border-radius: 20px;
  color: #fff;
  background: #120f5e;
  /* fallback for old browsers */
  background: linear-gradient(to right, #f5d837, #bbb812);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.carousel-cell {
  width: 66%;
  margin-right: 10px;
  counter-increment: carousel-cell;
}

.carousel-cell video {
  max-width: 100%;
}
.carousel-cell iframe {
  max-width: 100%;
}
.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.profile_img {
  border-radius: 50%;
}
.profile_name {
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 4px;
  word-spacing: 10px;
  text-transform: uppercase;
  margin: 20px 0px 30px 0px;
}

.about_content {
  justify-content: center;
  color: #1c1a3a;
  font-weight: 900;
  padding-bottom: 10px 0px 20px 0px;
}

.about_title {
  font-size: 3em;
  font-weight: 600;
  padding: 0px 10px;
  color: #120f5e;
}
.about_us {
  margin: 50px;
}

.fa-youtube {
  color: #e62117;
}

.our_founder {
  /* background-color: rgba(255, 255, 255, 0.8); */
  background-color: #1c1a3a;
}
/* .founder {
    background-image: url(./assets/image/cool-background.png);
    height: 100%;
    width: 100%;
  } */
.section4 {
  background-image: url("./assets/image/cool-background.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.study_material img {
  margin: 5px;
  /* box-shadow: 8px 8px 12px 2px rgba(0, 0, 0, 0.2); */
  width: 50%;
  height: 50%;
}

.study_material img:hover {
  border: 5px solid grey;
  border-radius: 5px;
}

.sm-handle {
  display: flex;
  justify-content: center;
}

.sm-handle a {
  padding: 10px 15px;
  border-radius: 30px;
  margin: 5px 10px;
  background-color: rgb(125 125 125 / 25%);
  text-decoration: none;
}

.sm-handle a:hover {
  background-color: rgb(30 30 30 / 25%);
}

.sm-handle a i {
  margin: 5px;
}

.yt_handle {
  color: black;
}

.linkdn_handle {
  color: black;
}

.insta_handle {
  color: black;
}

.img-responsive {
  max-width: 100vh;
  height: 100vh;
}

footer {
  display: flex;
  overflow: hidden;
  /* Hide overflow */
  background-color: black;
  /* Dark background color */
}

footer a {
  float: left;
  /* Make sure that the links stay side-by-side */
  display: block;
  /* Change the display to block, for responsive reasons (see below) */
  color: white;
  /* White text color */
  text-align: center;
  /* Center the text */
  padding: 14px 20px;
  /* Add some padding */
  text-decoration: none;
  /* Remove underline */
}

.copyright {
  color: #fff;
  /* to align item to left */
  margin-left: auto;
  padding-right: 15px;
}

.flex-align-left {
  margin-left: auto;
}

@media screen and (max-width: 700px) {
  footer,
  .sm-handle,
  nav {
    flex-direction: column;
    padding: 10px 0px;
  }

  .flex-align-left {
    margin-left: 0;
  }
}

#logo{
  height: 35px;
}