* {
    margin: 0px;
    padding: 0px;
    font-family: Segoe UI;
}

.logo-img{
    height: 200px;
    width: 200px;
    position: relative;
    right: 120px;
    top: 10px;
}
.icon{
    top:30px;
}


.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}
/* Event page */
.background {
  background: url(/img/bim_back.jpg) no-repeat;
  /* object-fit: fill; */
  background-size: contain;
  border: 2px solid black;
  width: 100%;
  height: 800px;
  filter: opacity(90%);

}

.back-trans{
  z-index: 10px;
}

.screen{
  z-index: -10;
  top: 0px;
  height: 100vh;
}

/* timer */
.container {
  color: #333;
  margin: 0 auto;
  text-align: center;
}

/* h1 {
  font-weight: normal;
  letter-spacing: .125rem;
  text-transform: uppercase;
} */


li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

li span {
  display: block;
  font-size: 4.5rem;
}

.emoji {
  display: none;
  padding: 1rem;
}

.emoji span {
  font-size: 4rem;
  padding: 0 .5rem;
}


/* About */
.containerAbout{
  width: 80%;
}

.addcon{
  width: 70%;
  text-align: center;
}

/* Lets Explore */
/* .containerExplore{
  width: 50%;
  margin-left: 25px;
  margin-right: 25px;
} */

.img2{
  width: 500px;
  height: 300px;
}

@media only screen and (max-width: 1290px){
  .logo-img{
      left: -30px;
      position: relative;
      /* top:-70px; */
      top: 0px;
    }

    .dropdown-box{
      font-weight: bold;
      font-size: 0.5ch;
    }

    /* EVent */
    .eventContent1{
      position: absolute;
      left: 450px;
      width: 350px;
    }

    .eventBt{
      left: 580px;
    }
}

/* @media all and (max-width: 768px) {
  h1 {
    font-size: calc(1.5rem * var(--smaller));
  }
  
  li {
    font-size: calc(1.125rem * var(--smaller));
  }
  
  li span {
    font-size: calc(3.375rem * var(--smaller));
  }
} */


@media only screen and (max-width: 481px) {
    .logo-img{
      left: 5px;
      position: relative;
      top:-70px;
    }

    /* .icon{
        position: relative;
        bottom:80px;
  
      } */
      .dropdown-box{
        position: relative;
        bottom: 150px;
        background-color: white;
      }

      .md\:px-6{
        padding-left: 0 rem;
        padding-right: 0 rem;
      }
      .px-4{
        padding-left: 0 rem;
        padding-right: 0 rem;
      }

      .drop-minibox{
       z-index: 100;
      }

      /* EVent */
      /* .background{
        height: 700px;
      }

      .back-trans{
        height: 700px;
      }

      .eventHEad{
        left: 10px;
      }

      .eventContent{
        right: 5px;
      }

      .eventContent1{
        position: absolute;
        left: 90px;
        bottom: 220px;
        font-size: larger;
        width: 250px;
      }

      .eventBt{
        position: relative;
        left: 130px;
        bottom: 110px;
      } */

      /* About */
    /* .containerAbout{
      position: relative;
      right:180px;
      margin-top: 0px;
    }

    .containerAbout2{
      flex-direction: column;
    }

    .aboutpic{
      width: 80%;
      height: 80%;
      margin-left: 50px;
      position: relative;
      right: 1px;
    } */

      /* Bim Technology */
      /* .bimText{
        font-size: large;
      }

      .bimvideo{
        width: 280px;
        height: 200px;
      }

      .addcon{
        text-align: left;
      } */
      /* Explore */
      /* .explore-main{
        margin-left: 10px;
        margin-right: 10px;
        position: relative;
        left: 15px;
      }
      .explore-main1{
        display: flex;
        flex-direction: column;
        gap: 50px;
      } */
      /* enroll Now */
      /* .enroll-main{
        margin-bottom: 0px;
      }
      .enroll{
        position: absolute;
        left: 30px;
        
      } */

      /* footer */
      /* .footer_un{
        padding: 20px;
        font-size: smaller;
        padding-left: 2px;
        padding-right: 5px;
      }

      .foot_title{
        font-size: larger;
        text-align: justify;
        padding-left: 2px;
        padding-right: 2px;
      }

      .social-logo{
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .social-logo-inside{
        position: relative;
        top: 50px;
        right: 32px;
      }

      .social-logo-inside1{
        position: relative;
        left: 35px;
      }

      .footer-end{
        font-size: smaller;
      }

      .footer_un1{
        position: relative;
        left: 5px;
      }*/
  } 

  @media only screen and (max-width: 321px){
    .eventContent{
      font-size: small;
    }

    .eventContent1{
      left:70px
    }
  }