@charset "UTF-8";
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}
html::-webkit-scrollbar {
  width: 0.5rem;
}
html::-webkit-scrollbar-track {
  background: white !important;
}
html::-webkit-scrollbar-thumb {
  background: #000000;
}

.offcanvas-body {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}
.offcanvas-body::-webkit-scrollbar {
  width: 0.5rem;
}
.offcanvas-body::-webkit-scrollbar-track {
  background: white !important;
}
.offcanvas-body::-webkit-scrollbar-thumb {
  background: #000000;
}

.navbar-toggler-icon {
  border: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body {
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: "CenturyGothic", sans-serif;
}

@font-face {
  font-family: "CenturyGothic";
  src: url("../webfonts/CenturyGothic.ttf");
}
@font-face {
  font-family: "Gothic";
  src: url("../webfonts/gothicb.ttf");
}
p {
  text-align: justify;
}

:root {
  --mainColor2: rgb(0, 0, 0);
  --mainColor3: #31ba44;
  --mainColor4: #ffffff;
  --mainColor5: #f2e7d8;
}

header {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

header nav ul li a::after {
  content: "";
  height: 2px;
  width: 0%;
  background-color: white !important;
  transition: 0.5s;
  margin: auto;
  display: block;
}
header nav ul li a:hover::after {
  width: 100%;
  color: white !important;
}

.navbar-brand {
  transition: display 0.3s ease, opacity 0.3s ease;
}

.letter-1 {
  letter-spacing: 1px !important;
}

.letter-2 {
  letter-spacing: 2px !important;
}

.offcanvas-end {
  min-width: 100% !important;
}

.fs-7-5 {
  font-size: 7.5px !important;
}

.fs-7-6 {
  font-size: 0.75rem !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-11 {
  font-size: 11px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-10 {
  font-size: 10px !important;
}

.fs-9-5 {
  font-size: 9.8px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-8-5 {
  font-size: 8px !important;
}

.fs-22 {
  font-size: 21.44px !important;
}

.fs-12 {
  font-size: 12.12px !important;
}

.fs-9 {
  font-size: 0.55rem !important;
}

.lh-1 {
  line-height: 1.3 !important;
}

.display-1 {
  font-size: 7rem !important;
}

.text-10-pt {
  font-size: 10pt;
}

.text-12-pt {
  font-size: 12pt !important;
}

.text-16-pt {
  font-size: 16pt !important;
}

.text-14-pt {
  font-size: 14pt !important;
}

.text16-pt {
  font-size: 67pt;
}

.text-30-pt {
  font-size: 30pt;
}

.text-47-pt {
  font-size: 47pt;
}

.text-55-pt {
  font-size: 55pt;
}

.lh-80 {
  line-height: 80pt;
}

.para {
  text-align: justify;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
}

.para-three {
  text-align: justify;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.para-four {
  text-align: justify;
  max-width: 500px !important;
  margin: 0 auto;
  line-height: 1.6;
}

.para-resp-one-section {
  line-height: 15pt !important;
  text-align: justify;
  max-width: 499px !important;
  margin: 0 auto;
  font-size: 9.5pt;
}

.para-resp-two-section {
  line-height: 15pt !important;
  text-align: justify;
  max-width: 499px !important;
  margin: 0 0;
  font-size: 9pt;
}

.text-9-pt {
  max-width: 602px;
  font-size: 8.5pt;
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .para-resp-two-section {
    font-size: 8pt;
  }
  .para-resp-one-section {
    font-size: 8pt;
  }
  .text-9-pt {
    font-size: 7.5pt;
  }
}
@media (min-width: 1530px) {
  .text-9-pt {
    max-width: 568px !important;
  }
}
@media (max-width: 1399px) {
  .para-car-section {
    max-width: 468px !important;
    font-size: 11px !important;
  }
}
@media (max-width: 1199px) {
  .para-car-section {
    max-width: 468px !important;
    font-size: 10px !important;
  }
}
@media (max-width: 1150px) {
  .para-car-section {
    max-width: 391px !important;
    font-size: 8.5px !important;
  }
}
@media (min-width: 999px) and (max-width: 1200px) {
  .para-resp-two-section {
    font-size: 6.5pt;
  }
  .para-resp-one-section {
    font-size: 6.5pt;
  }
  .text-9-pt {
    font-size: 6pt;
  }
}
@media (min-width: 1118px) and (max-width: 1297px) {
  .para-resp-two-section {
    font-size: 6.5pt;
  }
  .para-resp-one-section {
    font-size: 6.5pt;
  }
  .text-9-pt {
    font-size: 6.5pt;
    max-width: 424px !important;
  }
}
.background-img {
  background-image: url("../images/home/Rectang.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.background-img-two {
  background-image: url("../images/home/Rectangle-two.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.image-layer-second {
  background-image: url("../images/page2/bg2.png") !important;
}

.layer-car {
  background-color: rgba(255, 255, 255, 0.1019607843);
  height: 250px;
}

.the-install {
  font-size: 13vw !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: 100%;
  text-align: center;
}

.careset {
  font-size: 13vw !important;
  letter-spacing: 2px !important;
}

.text-gray {
  color: #c2c2c2 !important;
}

.slide-img {
  width: 250px !important;
  height: 200px !important;
}

@media (min-width: 2000px) {
  .container-custom {
    max-width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .text-67-pt {
    font-size: 67pt;
  }
  .text-40-pt {
    font-size: 40pt;
  }
  .text-25-pt {
    font-size: 25pt;
  }
  .text-30-pt {
    font-size: 30pt;
  }
}
/* تنسيقات الشاشات الكبيرة - مثل الحواسيب */
@media (min-width: 2000px) and (max-width: 3000px) {
  .text-12-pt {
    font-size: 10pt !important;
  }
  .text-67-pt {
    font-size: 67pt;
  }
  .lh-80 {
    line-height: 80pt;
  }
  .text-25-pt {
    font-size: 25pt;
  }
  .text-30-pt {
    font-size: 30pt;
  }
  .text-16-pt {
    font-size: 16pt;
  }
}
@media (min-width: 1024px) and (max-width: 2000px) {
  .text-12-pt {
    font-size: 10pt !important;
  }
  .text-67-pt {
    font-size: 45pt;
  }
  .text-40-pt {
    font-size: 40pt;
  }
  .lh-80 {
    line-height: 80pt;
  }
  .text-30-pt {
    font-size: 20pt;
  }
  .text-47-pt {
    font-size: 23pt;
  }
  .p-md-44 {
    padding: 1.5rem !important;
  }
  .display-2-rsp {
    font-size: 3.5rem;
  }
}
@media (min-width: 999px) and (max-width: 1023px) {
  .text-12-pt {
    font-size: 10pt !important;
  }
  .text-67-pt {
    font-size: 32pt;
  }
  .text-40-pt {
    font-size: 20pt;
  }
  .text-16-pt {
    font-size: 10pt;
  }
  .text-30-pt {
    font-size: 10pt;
  }
  .text-47-pt {
    font-size: 20pt;
  }
}
@media (min-width: 992px) {
  .custom-position {
    left: -200px !important;
    bottom: -98px !important;
  }
  .text-55-pt {
    font-size: 25pt;
  }
}
@media (max-width: 768px) {
  .position-resp {
    position: static !important;
  }
  .text-55-pt {
    font-size: 25pt;
  }
  .w-div {
    width: 100% !important;
  }
  .w-div-two {
    width: 100% !important;
  }
  .w-div-three {
    width: 100% !important;
  }
  .layer-container {
    max-height: 500px !important;
  }
  .w-45 {
    width: 100% !important;
  }
}
.w-div {
  width: 30%;
  background-color: #1c1c1c !important;
}

.w-div-three {
  width: 35%;
  background-color: #1c1c1c !important;
}

.w-div-two {
  width: 45%;
  background-color: #1c1c1c !important;
}

.w-45 {
  width: 40% !important;
}

.bg-woman img {
  width: 100%;
}
.bg-woman .prev-button,
.bg-woman .next-button {
  display: none !important;
}

/* تنسيقات الشاشات المتوسطة - مثل الأجهزة اللوحية */
@media (min-width: 768px) and (max-width: 1023px) {
  .text-12-pt {
    font-size: 7pt !important;
  }
  .text-67-pt {
    font-size: 35pt;
  }
  .text-40-pt {
    font-size: 20pt;
  }
  .text-16-pt {
    font-size: 10pt;
  }
  .text-47-pt {
    font-size: 20pt;
  }
  .prev-button,
  .next-button {
    display: none !important;
  }
}
@media (min-width: 1320px) and (max-width: 1451px) {
  .w-div-three .para-four {
    font-size: 9pt !important;
  }
}
@media (min-width: 1429px) and (max-width: 1497px) {
  .w-div-three .para-five {
    font-size: 9.5pt !important;
  }
}
@media (min-width: 1362px) and (max-width: 1429px) {
  .w-div-three .para-five {
    font-size: 9pt !important;
  }
}
@media (min-width: 1200px) and (max-width: 1362px) {
  .w-div-three .para-five {
    font-size: 8.5pt !important;
  }
}
@media (min-width: 1100px) and (max-width: 1292px) {
  .w-div-three .para-five {
    font-size: 8pt !important;
  }
}
@media (min-width: 1100px) and (max-width: 1225px) {
  .w-div-three .para-five {
    font-size: 7.5pt !important;
  }
}
@media (min-width: 1000px) and (max-width: 1158px) {
  .w-div-three .para-five {
    font-size: 7pt !important;
  }
}
@media (min-width: 1000px) and (max-width: 1100px) {
  .w-div-three .para-five {
    font-size: 6.5pt !important;
  }
}
@media (min-width: 1000px) and (max-width: 1020px) {
  .w-div-three .para-five {
    font-size: 6pt !important;
  }
}
@media (min-width: 1100px) and (max-width: 1320px) {
  .w-div-three .para-four {
    font-size: 8pt !important;
  }
}
.para-4-w {
  font-size: 10pt !important;
}

.para-4-w {
  font-size: 10pt !important;
}

/* تنسيقات الشاشات الصغيرة - مثل الهواتف */
@media (max-width: 767px) {
  .text-12-pt {
    font-size: 7pt !important;
  }
  .text-67-pt {
    font-size: 35pt;
  }
  .text-40-pt {
    font-size: 20pt;
  }
  .text-16-pt {
    font-size: 10pt;
  }
  .text-47-pt {
    font-size: 10pt;
  }
  .text-black-resp {
    color: black !important;
  }
  .nowrap {
    white-space: normal !important;
  }
  .display-1 {
    font-size: 2rem !important;
  }
  .fs-p-25 {
    font-size: 1rem;
  }
  .prev-button,
  .next-button {
    display: none !important;
  }
}
@media (max-width: 1000px) {
  .text-sm-res {
    font-size: 18px !important;
  }
  .arrows-icon::after, .arrows-icon::before {
    width: 25px !important;
    height: 25px !important;
  }
  .arrows-icon-two::after, .arrows-icon-two::before {
    width: 25px !important;
    height: 25px !important;
  }
}
.mt-10 {
  margin-top: 14rem !important;
}

@media (min-width: 1200px) {
  .mt-n10 {
    margin-top: -24rem !important;
  }
  .custom-img {
    min-height: 480px;
    margin-bottom: 20rem !important;
    width: 100%;
    object-fit: cover;
    z-index: 1000 !important;
    margin-top: -11rem;
  }
}
.arrows-icon {
  position: relative;
}
.arrows-icon::after, .arrows-icon::before {
  content: "";
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2284%22%20height%3D%2274%22%20viewBox%3D%220%200%2084%2074%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.4668%200.242443L21.8571%206.1036C18.4825%2012.8528%2016.2179%2018.1367%2015.0635%2021.9553C13.909%2025.774%2013.0209%2030.7027%2012.3993%2036.7414H24.2548V73.3736H0.14416V50.4619C0.14416%2039.006%200.899005%2030.0366%202.4087%2023.5538C4.00719%2016.9822%207.02657%209.21178%2011.4668%200.242443ZM70.7444%200.242443L81.1346%206.1036C77.76%2012.8528%2075.4955%2018.1367%2074.341%2021.9553C73.1866%2025.774%2072.2985%2030.7027%2071.6769%2036.7414H83.5324V73.3736H59.4217V50.4619C59.4217%2039.006%2060.1766%2030.0366%2061.6863%2023.5538C63.1959%2016.9822%2066.2153%209.21178%2070.7444%200.242443Z%22%20fill%3D%22%23A9A9A9%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  width: 80px;
  height: 80px;
}
.arrows-icon::before {
  right: 103%;
  bottom: 84%;
}
.arrows-icon::after {
  content: "";
  left: 103%;
  top: 93%;
  transform: scale(-1);
}

.switches-container {
  width: 12rem;
  position: relative;
  display: flex;
  padding: 0;
  position: relative;
  background: white !important;
  line-height: 3rem;
}

/* input (radio) for toggling. hidden - use labels for clicking on */
.switches-container input {
  visibility: hidden;
  position: absolute;
  top: 0;
}

/* labels for the input (radio) boxes - something to click on */
.switches-container label {
  width: 50%;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  color: var(--mainColor2) !important;
}

/* switch highlighters wrapper (sliding left / right) 
  - need wrapper to enable the even margins around the highlight box
*/
.switch-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 3;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  /* transition: transform 1s; */
}

/* switch box highlighter */
.switch {
  background: var(--mainColor2);
  height: 100%;
}

/* switch box labels
  - default setup
  - toggle afterwards based on radio:checked status 
*/
.switch div {
  width: 100%;
  text-align: center;
  opacity: 0;
  display: block;
  color: white !important;
  transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.125s;
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
}

/* slide the switch box from right to left */
.switches-container input:nth-of-type(1):checked ~ .switch-wrapper {
  transform: translateX(0%);
}

/* slide the switch box from left to right */
.switches-container input:nth-of-type(2):checked ~ .switch-wrapper {
  transform: translateX(100%);
}

/* toggle the switch box labels - first checkbox:checked - show first switch div */
.switches-container input:nth-of-type(1):checked ~ .switch-wrapper .switch div:nth-of-type(1) {
  opacity: 1;
}

/* toggle the switch box labels - second checkbox:checked - show second switch div */
.switches-container input:nth-of-type(2):checked ~ .switch-wrapper .switch div:nth-of-type(2) {
  opacity: 1;
}

.switch div:nth-of-type(2) {
  font-size: 1.5rem !important; /* أو أي قيمة أخرى حسب الحجم المطلوب */
}

.image-container {
  position: relative !important;
  width: 600px !important;
  height: 600px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-layer {
  background-image: url("../images/home/img-con.jfif") !important;
  position: absolute;
  background-size: cover;
  background-position: center;
  width: 250px;
}

.image-layer.layer-1 {
  height: 500px;
  background-color: #30b7e9;
  left: 0%;
  z-index: 5 !important;
}

.image-layer.layer-2 {
  height: 450px;
  background-color: red;
  left: 15%;
  z-index: 4 !important;
}

.image-layer.layer-3 {
  height: 400px;
  background-color: rgb(255, 0, 212);
  left: 30%;
  z-index: 3;
}

.image-layer.layer-4 {
  height: 350px;
  background-color: rgb(0, 255, 55);
  left: 45%;
  z-index: 2;
}

.image-layer.layer-5 {
  height: 300px;
  background-color: rgb(28, 10, 51);
  left: 60%;
  z-index: 1;
}

.prev-button,
.next-button {
  width: 25px;
  height: 35px;
  border-radius: 0px;
  border: 1px solid white;
  background-color: transparent;
  z-index: 1;
  display: flex;
  top: 120%;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin-top: 15px !important;
}

.prev-button:hover {
  background-color: transparent;
  border-color: white;
  cursor: default;
}

.next-button:hover {
  background-color: transparent;
  border-color: white;
  color: white !important;
  cursor: default;
}

.next-button {
  right: -104px;
  background-color: white;
  color: black !important;
}

.prev-button {
  right: -33px;
}

.img-card.small-img-slider {
  height: 450px !important;
}

.img-card.small-img-slider-two {
  height: 250px !important;
}

.small-img-slider-two {
  max-height: 800px !important;
}
.small-img-slider-two img {
  max-width: 300%;
}

.small-img-slider {
  max-height: 800px !important;
}
.small-img-slider img {
  max-width: 500%;
}

.slick-slider {
  float: right !important;
  direction: ltr !important;
}

@media (min-width: 1200px) {
  .text-28-pt {
    font-size: 28pt !important;
  }
}
@media (min-width: 1100px) {
  .mt-n7 {
    margin-top: -16rem !important;
  }
  .text-28 {
    font-size: 22pt !important;
  }
}
@media (min-width: 1300px) {
  .mt-n7 {
    margin-top: -20rem !important;
  }
  .height-resp {
    height: 450px !important;
  }
  .text-28 {
    font-size: 20pt !important;
  }
}
@media (min-width: 1500px) {
  .mt-n7 {
    margin-top: -25rem !important;
  }
  .para-two {
    text-align: justify;
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.6;
  }
  .most-lg {
    font-size: 55pt !important;
  }
  .warranty-lg {
    font-size: 86pt !important;
  }
  .height-resp {
    height: 450px !important;
  }
  .text-28 {
    font-size: 25pt !important;
  }
}
@media (min-width: 1800px) {
  .mt-n7 {
    margin-top: -25rem !important;
  }
  .para-two {
    text-align: justify;
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 10pt !important;
  }
  .most-lg {
    font-size: 50pt !important;
  }
  .warranty-lg {
    font-size: 80pt !important;
  }
  .height-resp {
    height: 550px !important;
  }
  .text-28 {
    font-size: 28pt !important;
  }
}
@media (min-width: 2000px) {
  .mt-n7 {
    margin-top: -35rem !important;
  }
  .max-width {
    max-width: 1423px;
  }
  .para-two {
    text-align: justify;
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.6;
  }
  .most-lg {
    font-size: 70pt !important;
  }
  .warranty-lg {
    font-size: 90pt !important;
  }
  .fs-12-re {
    font-size: 12pt !important;
  }
  .height-resp {
    height: 650px !important;
  }
}
@media (min-width: 2500px) {
  .mt-n7 {
    margin-top: -55rem !important;
  }
  .max-width {
    max-width: 1423px;
  }
  .height-resp {
    height: 850px !important;
  }
}
@media (min-width: 4000px) {
  .mt-n7 {
    margin-top: -95rem !important;
  }
  .max-width {
    max-width: 1423px;
  }
}
@media (min-width: 5000px) {
  .mt-n7 {
    margin-top: -130rem !important;
  }
  .max-width {
    max-width: 1423px;
  }
}
.vertical-text {
  transform: rotate(90deg);
  transform-origin: left top;
  font-size: 7px;
  color: rgb(0, 0, 0);
  z-index: 111111;
  opacity: 0.7;
  left: 86%;
  bottom: 64%;
  font-weight: 300;
  letter-spacing: 7px;
  /*max-width: 2250 ;*/
  text-wrap: nowrap !important;
}

.arrows-icon-two {
  position: relative;
}
.arrows-icon-two::after, .arrows-icon-two::before {
  content: "";
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2284%22%20height%3D%2274%22%20viewBox%3D%220%200%2084%2074%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11.8174%200.602795L22.2077%206.46395C18.833%2013.2132%2016.5685%2018.4971%2015.414%2022.3157C14.2596%2026.1343%2013.3715%2031.063%2012.7499%2037.1018H24.6054V73.734H0.494746V50.8222C0.494746%2039.3663%201.24959%2030.397%202.75928%2023.9142C4.35778%2017.3426%207.37716%209.57213%2011.8174%200.602795ZM71.095%200.602795L81.4852%206.46395C78.1106%2013.2132%2075.8461%2018.4971%2074.6916%2022.3157C73.5371%2026.1343%2072.6491%2031.063%2072.0274%2037.1018H83.883V73.734H59.7723V50.8222C59.7723%2039.3663%2060.5272%2030.397%2062.0368%2023.9142C63.5465%2017.3426%2066.5659%209.57213%2071.095%200.602795Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px !important;
  height: 70px !important;
}
.arrows-icon-two::before {
  right: 96%;
  bottom: 96%;
}
.arrows-icon-two::after {
  content: "";
  left: 94%;
  top: 93%;
  transform: scale(-1);
}

.image-layer-second {
  background-image: url("../images/page2/bg2.png") !important;
}

.image-container-two {
  position: relative !important;
  width: 500px !important;
  height: 500px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .justify-res p {
    text-align: left !important;
    font-size: 1rem !important;
  }
  .text-20 {
    font-size: 20px !important;
  }
  .vertical-text {
    left: 96%;
  }
  .fs-11 {
    font-size: 8pt;
  }
  .display-1 {
    font-size: 2rem !important;
    white-space: nowrap;
  }
  #the-essense h2 {
    font-size: 1.2rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  #the-essense .arrows-icon::before {
    right: 94%;
    bottom: 92%;
  }
  #the-essense .arrows-icon::after {
    left: 93%;
    top: 98%;
  }
  #the-essense .arrows-icon-two::before {
    right: 94%;
    bottom: 92%;
  }
  #the-essense .arrows-icon-two::after {
    left: 93%;
    top: 98%;
  }
  .text-sm-res {
    font-size: 10px !important;
  }
  .text-67-pt {
    font-size: 26pt;
  }
  .text-40-pt {
    font-size: 20pt;
  }
  .text-30-pt {
    font-size: 12pt;
  }
  .text-res-12 {
    font-size: 9pt !important;
  }
  .fs-30 {
    font-size: 10pt !important;
  }
  .text-27 {
    font-size: 18pt !important;
  }
  .fs-13 {
    font-size: 8pt !important;
  }
  .text-55-pt {
    font-size: 14pt !important;
  }
  .text21 {
    font-size: 13pt !important;
  }
  .text-27 {
    font-size: 16pt !important;
  }
  .fs-9-resp {
    font-size: 7pt !important;
  }
  .display-2-rsp {
    font-size: 16px !important;
  }
}
.text-27 {
  font-size: 27pt;
}

.text21 {
  font-size: 21pt;
}

.text-res-12 {
  font-size: 14pt;
}

.fs-30 {
  font-size: 30pt;
}

.text-27 {
  font-size: 27pt;
}

.fs-13 {
  font-size: 13pt;
}

.text-20 {
  font-size: 20pt;
}

.fs-11 {
  font-size: 11pt;
}


@media (min-width: 900px) {
  .main-btns {
    width: 120px;
    padding: 4px 0px !important;
    font-size: 8px !important;
  }
}

@media (max-width: 900px) {
  .main-btns {
    margin: 4px 0rem;
  }
}

.uppercase {
  text-transform: uppercase;
}
.bottom-30{
    bottom: 30px !important;
}