@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700;800;900&display=swap");

:root {
  --primary_color: #eb008c;
  --white: #ffffff;
  --black: #000000;
  --background: #f7f7f7;
  --red: #ec0f0f;
  --light-grey: #bdcfde;
  --input-border: #bce0fd;
  --label-grey: #707070;
  --div-bg: #f1f9ff;
}

.tufj {}

.color-black {
  color: #000000;
}

.color-pink {
  color: var(--primary_color);
}

body {
  font-family: Poppins;
}

#top {
  padding: 1% 4%;
}

#selection {
  padding: 1% 4%;
  background-image: url(images/select-bg.png);
}

#hero {
  padding: 1% 4%;
}

#working-desk {
  padding: 1% 4%;
  background-color: var(--background);
  color: #000000;
}

#working-mob {
  padding: 1% 4%;
  background-color: var(--background);
  color: #000000;
  display: none;
}

#video {
  padding: 3% 4%;
  background-color: var(--background);
}

.p4 {
  padding: 4%;
}

#products {
  padding: 1% 4%;
}

#footer {
  padding: 1% 4%;
  background-image: url(images/footer-bg.png);
}

.pm0 {
  padding: 0;
  margin: 0;
}

.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

.m-1 {
  margin: 3% 1%;
}

.mtb-2 {
  margin: 2% 0;
}

.opacity-0 {
  opacity: 0;
}

.div-circle {
  background: red;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.div1 {
  background-color: #ff0000;
  box-shadow: 0 14px 28px rgba(255, 0, 0, 0.3), 0 10px 10px #ff000038;
}

.div2 {
  background-color: #1575bf;
  box-shadow: 0 14px 28px rgba(21, 117, 191, 0.3),
    0 10px 10px rgba(21, 117, 191, 0.22);
}

.div3 {
  background-color: #166032;
  box-shadow: 0 14px 28px rgba(22, 96, 50, 0.3),
    0 10px 10px rgba(22, 96, 50, 0.22);
}

.div4 {
  background-color: #ffa500;
  box-shadow: 0 14px 28px rgba(255, 165, 0, 0.3),
    0 10px 10px rgba(255, 165, 0, 0.22);
}

.div5 {
  background-color: #f11790;
  box-shadow: 0 14px 28px rgba(241, 23, 144, 0.3),
    0 10px 10px rgba(241, 23, 144, 0.22);
}

.div6 {
  background-color: black;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.div7 {
  background-color: #213e9e;
  box-shadow: 0 14px 28px rgba(33, 62, 158, 0.3),
    0 10px 10px rgba(33, 62, 158, 0.22);
}

.div8 {
  background-color: #fcfc23;
  box-shadow: 0 14px 28px rgba(252, 252, 35, 0.3),
    0 10px 10px rgba(252, 252, 35, 0.22);
}

.div9 {
  background-color: #32cd32;
  box-shadow: 0 14px 28px rgba(50, 205, 50, 0.3),
    0 10px 10px rgba(50, 205, 50, 0.22);
}

.div10 {
  background-color: #4b2d72;
  box-shadow: 0 14px 28px rgba(75, 45, 114, 0.3),
    0 10px 10px rgba(75, 45, 114, 0.22);
}

.div11 {
  background-color: #821762;
  box-shadow: 0 14px 28px rgba(130, 23, 98, 0.3),
    0 10px 10px rgba(130, 23, 98, 0.22);
}

.div12 {
  background-color: #89c4ff;
  box-shadow: 0 14px 28px rgba(137, 196, 255, 0.3),
    0 10px 10px rgba(137, 196, 255, 0.22);
}

.div13 {
  background-color: #a42aaa;
  box-shadow: 0 14px 28px rgba(164, 42, 170, 0.3),
    0 10px 10px rgba(164, 42, 170, 0.22);
}

.div14 {
  background-color: #9a0c29;
  box-shadow: 0 14px 28px rgba(154, 12, 41, 0.3),
    0 10px 10px rgba(154, 12, 41, 0.22);
}

.div15 {
  background-color: #ad0082;
  box-shadow: 0 14px 28px rgba(173, 0, 130, 0.3),
    0 10px 10px rgba(173, 0, 130, 0.22);
}

.div16 {
  background-color: #01447f;
  box-shadow: 0 14px 28px rgba(1, 68, 127, 0.3),
    0 10px 10px rgba(1, 68, 127, 0.22);
}

.div17 {
  background-color: #7c673a;
  box-shadow: 0 14px 28px rgba(124, 103, 58, 0.3),
    0 10px 10px rgba(124, 103, 58, 0.22);
}

.div18 {
  background-color: #843138;
  box-shadow: 0 14px 28px rgba(, , , 0.3), 0 10px 10px rgba(0.22);
}

.div19 {
  background-color: #ffeea3;
  box-shadow: 0 14px 28px rgba(, , , 0.3), 0 10px 10px rgba(0.22);
}

.div20 {
  background-color: #f4869a;
  box-shadow: 0 14px 28px rgba(, , , 0.3), 0 10px 10px rgba(0.22);
}

.div20 {
  background-color: #20b2aa;
  box-shadow: 0 14px 28px rgba(, , , 0.3), 0 10px 10px rgba(0.22);
}

.align-right {
  text-align: right;
}

.heading {
  line-height: 45px;
  font-size: 2rem;
}

.sub-heading {
  line-height: 45px;
  font-size: 1.5rem;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}


.btn-line {
  border: 3px solid var(--primary_color);
  border-radius: 4px;
  color: var(--primary_color);
  padding: 1.5% 4%;
  font-weight: 600;
  box-shadow: 0 14px 28px rgba(235, 0, 140, 0.25),
    0 10px 10px rgba(235, 0, 140, 0.22);
}

.mr-4 {
  margin-right: 4%;
}

.carousel-indicators li {
  background-color: var(--primary_color);
}

.carousel-indicators .active {
  background-color: var(--primary_color);
}

#working {
  padding: 1% 4%;
}

#testimonial {
  padding: 1% 4%;
  background-image: url(images/test.png);
  background-repeat: no-repeat;
}

.carousel-control-prev {
  width: 10%;
}

.carousel-control-next {
  width: 10%;
}

.video-frame {
  width: 500px;
  height: 300px;
}

@media (max-width: 575.98px) {
  .video-frame {
    width: 90%;
    height: 100%;
  }

  #working-desk {
    padding: 1% 4%;
    background-color: var(--background);
    color: #000000;
    display: none;
  }

  #working-mob {
    padding: 1% 4%;
    background-color: var(--background);
    color: #000000;
    display: block;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #working-desk {
    padding: 1% 4%;
    background-color: var(--background);
    color: #000000;
    display: none;
  }

  #working-mob {
    padding: 1% 4%;
    background-color: var(--background);
    color: #000000;
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #working-desk {
    padding: 1% 4%;
    background-color: var(--background);
    color: #000000;
    display: none;
    display: block;
  }

  #working-mob {
    padding: 1% 4%;
    background-color: var(--background);
    color: #000000;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {}


/* Mobile Responsive */
@media (min-width: 320px) and (max-width: 425px) {
  .piot {
    font-size: 13.5px;
  }

  .tufj {
    font-size: 17px;
  }

  .idko {
    margin-left: 67px;
  }

  .butsec {
    padding-top: 0px;
  }
}

/* Tablet Responsive */
@media (min-width: 426px) and (max-width: 768px) {
  .tufj {
    font-size: 20px;
  }

  .nav,
  .tyhj,
  .opll {
    position: fixed;
    visibility: hidden;
  }

  .piot {
    font-size: 14px;
  }
}

/* Laptop Devices */
@media (min-width: 769px) and (max-width: 1024px) {
  .tufj {
    font-size: 28px;
  }
.piot {
  font-size: 20px;
}
}