main img {
  width: 100%;
  object-fit: cover;
}
video {
  width: 100%;
}
body {
  background-color: #c0c9cc !important;
}

.foo-xl {
  display: none;
}
.box {
  background-color: #fff;
  position: relative;
}

.box h2 {
  line-height: 1.1;
  margin: 25px 0px 20px 25px;
  font-family: "Oswald";
  color: #000;
  font-weight: 300;
  font-size: 25px;
  text-transform: uppercase;
}

.hr1 {
  border-bottom: 5px solid #01c5d0;
}

.hr2 {
  border-bottom: 5px solid #eb6d7f;
}

.hr3 {
  border-bottom: 5px solid #ff2153;
}
.hr4 {
  border-bottom: 5px solid #87bf00;
}
.hr5 {
  border-bottom: 5px solid #ca7cd8;
}
.hr6 {
  border-bottom: 5px solid #3968cb;
}
.hr7 {
  border-bottom: 5px solid #ffc000;
}

.box-contant {
  margin: 0px 25px 25px;
}

.box a,
.box a:hover {
  color: #2121ef;
  font-weight: 500;
  text-decoration: none;
  font-size: 14px;
  line-height: 10px;
}

.caption {
  padding: 0px 0px 0px 25px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.caption span:nth-child(1) {
  padding-top: 7px;
  display: inline-block;
}
.caption span:nth-child(2) {
  float: right;
}

.r1 a,
.r1 a:hover {
  color: #01c5d0;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 300;
}

.r2 a,
.r2 a:hover {
  color: #eb6d7f;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 300;
}

.r3 a,
.r3 a:hover {
  color: #ff2153;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 300;
}
.r4 a,
.r4 a:hover {
  color: #87bf00;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 300;
}
.r5 a,
.r5 a:hover {
  color: #ca7cd8;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 300;
}
.r6 a,
.r6 a:hover {
  color: #3968cb;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 300;
}
.r7 a,
.r7 a:hover {
  color: #ffc000;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 300;
}

.box-contant p {
  overflow: hidden;
  color: #000;
}

.box-contant p:nth-child(1) {
  margin-bottom: 0;
}
.fa-angle-right {
  cursor: pointer;
}
main {
  display: grid !important;
  padding: 0 10px;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  padding-top: 55px;
}

/*
main grid box is build with css grid
less than 500px : grid-template-columns: 1fr;
more than 500px : grid-template-columns: repeat(4, 1fr);
more than 768px : grid-template-columns: repeat(4, 1fr);
more than 1024px : grid-template-columns: repeat(4, 1fr);
more than 1500px : grid-template-columns: repeat(6, 1fr);
*/

@media (min-width: 500px) {
  main {
    display: grid !important;
    margin-top: 0px;
    padding-top: 55px;
    padding-left: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  .box2,
  .box4,
  .box8,
  .box14 {
    grid-column: 1/5;
  }
  .box1,
  .box5,
  .box10,
  .box11,
  .box12,
  .box13 {
    grid-column: 1/3;
  }
  .box3,
  .box6,
  .box7,
  .box9,
  .box15 {
    grid-column: 3/5;
  }
  .box3 {
    grid-row: 1/2;
  }
  .box5 {
    grid-row: 5/7;
  }
  .box6 {
    grid-row: 5/6;
  }
  .box7 {
    grid-row: 6/7;
  }
  .box9 {
    grid-row: 7/9;
  }
  .box10 {
    grid-row: 7/8;
  }
  .box11 {
    grid-row: 8/9;
  }
  .box12 {
    grid-row: 10/11;
  }
  .box13 {
    grid-row: 11/12;
  }
  .box15 {
    grid-row: 10/12;
  }
}

@media (min-width: 768px) {
  main {
    display: grid !important;
    margin-top: 0px;
    margin-left: 200px;
    padding-top: 10px;
    padding-left: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
}

@media only screen and (min-width: 1024px) {
  .box1,
  .box12,
  .box13 {
    grid-column: 1/2;
  }
  .box2,
  .box14 {
    grid-column: 2/4;
  }
  .box3,
  .box6,
  .box7,
  .box10,
  .box11,
  .box15 {
    grid-column: 4/5;
  }
  .box4,
  .box8 {
    grid-column: 1/3;
  }
  .box5,
  .box9 {
    grid-column: 3/4;
  }
  .box4,
  .box5 {
    grid-row: 2/4;
  }
  .box6 {
    grid-row: 2/3;
  }
  .box7 {
    grid-row: 3/4;
  }
  .box8,
  .box9 {
    grid-row: 4/6;
  }
  .box10 {
    grid-row: 4/5;
  }
  .box11 {
    grid-row: 5/6;
  }
  .box12 {
    grid-row: 6/7;
  }
  .box13 {
    grid-row: 7/8;
  }
  .box14,
  .box15 {
    grid-row: 6/8;
  }

  .my_fru video {
    width: 100%;
    max-height: 181px;
    object-fit: cover;
  }
}

@media only screen and (min-width: 1500px) {
  /* main {
    display: grid !important;
    margin-left: 200px;
    padding-left: 10px;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
  }
  .box1,
  .box5 {
    grid-column: 1/2;
  }
  .box2 {
    grid-column: 2/4;
  }
  .box3 {
    grid-column: 4/5;
  }
  .box4 {
    grid-column: 5/7;
    grid-row: auto;
  }
  .box6,
  .box7 {
    grid-column: 2/3;
  }
  .box8 {
    grid-column: 3/5;
    grid-row: 2/4;
  }
  .box9 {
    grid-column: 5/6;
    grid-row: 2/4;
  }
  .box10 {
    grid-column: 6/7;
    grid-row: 2/3;
  }
  .box11 {
    grid-column: 6/7;
    grid-row: 3/4;
  } */

  .foo-sm {
    display: none;
  }
  .foo-xl {
    display: block;
  }
  iframe {
    height: 438px;
  }
  .my_fru video {
    width: 100%;
    max-height: 268px;
    object-fit: cover;
  }
}

/* welcome popup */
.popup h3 {
  padding-top: 30px;
  text-align: right;
  color: #000;
}
.popup h6 {
  text-align: center;
  padding-top: 10px;
  color: #000;
}
.lets {
  padding: 5px 20px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
}
.lets:hover {
  padding: 5px 20px;
  background-color: #555;
  color: #fff;
  text-decoration: none;
}
.popup {
  text-align: center;
  color: #000;
  /* box-shadow: 2px 9px 6px #eaeaea; */
  position: fixed;
  bottom: 10px;
  right: 10px;
  height: 170px;
  width: 270px;
  font-family: oswald;
  z-index: 1000;
  display: none;
  background-size: cover;
  background-position: center;
  background-color: #fff;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

#Layer_1 {
  background-color: #000;
  float: right;
  margin: 10px;
  padding: 2px;
}
#hello_baba {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.95);
  position: fixed;
  z-index: 10000;
  animation-duration: 2s;
}

@-webkit-keyframes myfade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes myfade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.hello_baba2 {
  color: white;
  text-align: center;
  width: 350px;
  height: 350px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -175px;
  margin-left: -175px;
}
.hello_baba2 h1 {
  font-size: 35px;
}
.hello_baba2 p {
  font-size: 20px;
  margin-top: 20px;
  font-family: oswald;
}
.hello_baba2 img {
  width: 250px;
}
.Progress {
  position: absolute;
  height: 1px;
  background-color: #222;
  width: 20%;
  margin: 0 40%;
  bottom: 20%;
}
.Progress1 {
  position: absolute;
  height: 1px;
  background: #999;
  -webkit-transition: width 10s;
  transition: width 10s;
  animation-name: pro;
  animation-duration: 10s;
}
@keyframes pro {
  0% {
    width: 0;
  }
  70% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
.blast-icon-new img {
  height: 45px;
  width: 45px;
  padding: 8px;
}

/* dark mode */
.blogo {
  display: none;
}
.day {
  display: none;
}
.tt {
  color: #000;
}
html[data-theme="dark"] .blogo,
html[data-theme="dark"] .day {
  display: block;
}
html[data-theme="dark"] .lblog,
html[data-theme="dark"] .night {
  display: none;
}

html[data-theme="dark"] body {
  background: #1e1e1e !important;
  color: #fff !important;
}
html[data-theme="dark"] .box,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .footer-b,
html[data-theme="dark"] #mySidenav,
html[data-theme="dark"] .custom {
  background-color: #000;
}
html[data-theme="dark"] .box h2,
html[data-theme="dark"] .box-contant p,
html[data-theme="dark"] .footer-b a,
html[data-theme="dark"] .menu li a,
html[data-theme="dark"] .tt,
html[data-theme="dark"] #social-link li a,
html[data-theme="dark"] .footer ul li a,
html[data-theme="dark"] .footer h6,
html[data-theme="red"] .box h2,
html[data-theme="red"] .box-contant p,
html[data-theme="red"] .footer-b a,
html[data-theme="red"] .menu li a,
html[data-theme="red"] .tt,
html[data-theme="red"] #social-link li a,
html[data-theme="red"] .footer ul li a,
html[data-theme="red"] .footer h6,
html[data-theme="red"] .foot1 a i,
html[data-theme="red"] .footer h5 a,
html[data-theme="red"] .footer h6 a,
html[data-theme="blue"] .box h2,
html[data-theme="blue"] .box-contant p,
html[data-theme="blue"] .footer-b a,
html[data-theme="blue"] .menu li a,
html[data-theme="blue"] .tt,
html[data-theme="blue"] #social-link li a,
html[data-theme="blue"] .footer ul li a,
html[data-theme="blue"] .footer h6,
html[data-theme="blue"] .foot1 a i {
  color: #fff;
}
html[data-theme="dark"] .footer-bcov {
  border-top: 1px solid #fff;
}
html[data-theme="dark"] .blast-icon {
  color: #000;
  background-color: #fff;
}
html[data-theme="dark"] .scroll {
  background: #fff;
}
html[data-theme="dark"] .scroll .fa {
  color: #000;
}
html[data-theme="dark"] .tooltip-bottom::after,
html[data-theme="dark"] .tooltip-left::after {
  border-color: #fff transparent transparent transparent;
}

/* red */
html[data-theme="red"] .box,
html[data-theme="red"] .footer,
html[data-theme="red"] .footer-b,
html[data-theme="red"] #mySidenav,
html[data-theme="red"] .custom {
  background-color: #cc0000;
}
html[data-theme="red"] body {
  color: #fff !important;
}
html[data-theme="red"] .r3 a,
html[data-theme="red"] .r3 a:hover {
  color: #ffc107;
}
html[data-theme="red"] .hr3 {
  border-bottom: 5px solid #ffc107;
}
html[data-theme="red"] .info li a {
  color: #666;
}
html[data-theme="red"] .r3 .mo {
  background-color: #ffc107 !important;
}
html[data-theme="red"] .link_15 {
  color: #ffc107 !important;
}
/* red */

/* blue */
html[data-theme="blue"] body {
  color: #fff !important;
}
html[data-theme="blue"] .box,
html[data-theme="blue"] .footer,
html[data-theme="blue"] .footer-b,
html[data-theme="blue"] #mySidenav,
html[data-theme="blue"] .custom {
  background-color: #333399;
}
html[data-theme="blue"] .hr6 {
  border-bottom: 5px solid #a3d4e6;
}
html[data-theme="blue"] .r6 a,
html[data-theme="blue"] .r6 a:hover {
  color: #a3d4e6;
}
html[data-theme="blue"] .info li a {
  color: #666;
}
html[data-theme="blue"] .r6 .mo {
  background-color: #a3d4e6 !important;
}
/* blue */

html[data-theme="dark"] main,
html[data-theme="red"] main,
html[data-theme="blue"] main {
  background-color: #c0c9cc !important;
}