/* ?--------------------------------------------------------- COMMENTED COLORS ------------------------------------------------------

--blue:#007bff;
--indigo:#6610f2;
--purple:#6f42c1;
--pink:#e83e8c;
--red:#dc3545;
--orange:#fd7e14;
--yellow:#ffc107;
--green:#28a745;
--teal:#20c997;
--cyan:#17a2b8;
--gray:#6c757d;
--gray-dark:#343a40;
--primary:#007bff;
--secondary:#6c757d;
--success:#28a745;
--info:#17a2b8;
--warning:#ffc107;
--danger:#dc3545;
--light:#f8f9fa;
--dark:#343a40; 
*/

/* ?------------------------------------------------------- BODY CUSTOMIZATIONS ------------------------------------------------------- */

header {
  background: #252527;
  background-position: center;
  color: #e1e0e4;
  background-size: cover;
  display: flex;
  justify-content: center;
  font-family: 'Asap Condensed', sans-serif;
  height: 100vh !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  font-display: fallback !important;
}

/* ?--------------------------------------------------------- DARK THEME VARIANT --------------------------------------------------------- */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #100e17;
}

::-webkit-scrollbar-thumb {
  background: #504c57;
}

::-webkit-scrollbar-thumb:hover {
  background: #7a7a8c;
}


/* ?--------------------------------------------------------- SEARCH --------------------------------------------------------- */

.wholearea {
  position: relative;
  background: #e1e0e4;
  border-radius: 30px;
  padding: 5px 2px;
 }

.wholearea > .country {
  background-color: #2c2c2c;
  border-radius: 24px;
  position: absolute;
  font-weight: 500;
  font-size: 1.2em;
  padding: 7.5px 13px;
  margin-inline-start: 5px;
  cursor: pointer;
  left: 0px;
  top: 4px;
}

.wholearea > .inputarea {
  padding-left: 4.3rem;
  padding-right: 3.2rem;
}

.inputarea > #searchbar {
  padding-top: 4px;
  padding-left: 6px;
  font-size: 1.2em;
  font-weight: 600;
  background: #e1e0e4;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  transition: all ease 1s;
}

.inputarea > #searchbar:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  font-size: 1.2em;
  color: #1a1a1a;
  transition: all ease 1s;
}

.inputarea > .search-icon {
  background-color: #dc3545;
  outline: none !important;
  border: none !important;
  border-radius: 24px;
  margin-inline-end: 5.5px;
  padding: 10px 12px;
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 4px;
}

.inputarea > .search-icon:hover {
  background-color: #b92635;
}

@media (min-width: 992px) {

  .number {
    font-size: 8vw !important;
  }
}

@media (min-width: 1200px) {

  .number {
    font-size: 7vw !important;
  }
}

@media screen and (min-width:320px) and (max-width: 405px) {

  .brand-heading {
    font-size: 41px !important;
  }

  .icon {
    font-size: 32px !important;
  }
}

@media (max-width: 769px) {

  #biggerdevices {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .wholearea > .inputarea {
    padding-left: 7.6rem;
    padding-right: 4rem;
  }

  #smallerdevices {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .brand-heading {
    font-size: 80px;
  }

  .icon {
    font-size: 60px;
  }
}

@media (max-width: 768px) {
  .brand-heading {
    font-size: 55px;
  }

  .icon {
    font-size: 40px;
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.github {
  border: 2px solid #868686;
  padding: 6px 7px;
  border-radius: 24px;
  color: #afafaf;
}

.github:hover {
  background-color: #7a7a7a6c;
  opacity: 0.8;
  transition: ease all 0.3s;
}

.bedsheet {
  background-color: #e1e0e4;
  border-radius: 20px;
}

.pillows {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4%;
  margin-bottom: 4%;
  overflow: hidden;
}

.number {
  font-size: 10vw;
}

.pillows > .mobicon {
  width: 12%;
  height: 12%;
  margin-right: 3%;
  vertical-align: middle;
}

.pillows > .telicon {
  width: 15%;
  height: 15%;
  margin-right: 3%;
  vertical-align: middle;
}

.bedsheet .ntc-blanket {
  background-color: #0054a5;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  padding-top: 4%;
  padding-bottom: 4%;
}

.bedsheet .smart-blanket {
  background-color: #d9203b;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  padding-top: 4%;
  padding-bottom: 4%;
}

.bedsheet .shada-blanket {
  background-color: #d3d3d3;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  padding-top: 4%;
  padding-bottom: 4%;
}

.bedsheet .sirak-blanket {
  background-color: #ffffff;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  padding-top: 4%;
  padding-bottom: 4%;
}

.companies {
  height: 25vh;
  width: auto;
}

.ncell {
  color: #3d1868;
}

.utl {
  color: midnightblue;
}