/* Fonts Initialization */
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,600,700,800,300italic,400italic,600italic&display=swap);

@font-face {
  font-family: "Gotham" !important;
  src: url("../Fonts/GothamBook.ttf") format("ttf") !important;
  font-weight: normal !important;
  font-style: normal !important;
}

@font-face {
  font-family: "Gotham" !important;
  src: url("../Fonts/GothamBold.otf") format("otf") !important;
  font-weight: bold !important;
  font-style: normal !important;
}

@font-face {
  font-family: "Gotham" !important;
  src: url("../Fonts/GothamBlack.otf") format("otf") !important;
  font-weight: bolder !important;
  font-style: normal !important;
}
@font-face {
  font-family: "Gotham" !important;
  src: url("../Fonts/GothamLight.otf") format("otf") !important;
  font-weight: lighter !important;
  font-style: normal !important;
}

.swiper .mt-2.px-3{height: 120px}

/* Base styles */
body {overflow-x: hidden;
  font-family: "Roboto";
}
html{scroll-behavior: :smooth;overflow-x: hidden;}
/* Utility classes */
.flow > * + * {
  margin-top: 0.3rem;
}
.navbar-nav > li + li {
  margin-top: 0.3rem;
}

.w-7 {
  width: 7% !important;
}
.w-10 {
  width: 10% !important;
}
.w-20 {
  width: 20% !important;
}
.w-35 {
  width: 35% !important;
}
.w-60 {
  width: 60% !important;
}
.text-primary {
  color: #a71e25 !important;
}
#moreMenuItemsToggler {
  display: none;
  width: 30px !important;
}
.bg-light-grey {
  background-color: #c8c7c7
}
.bg-light-grey-2 {
  background-color: rgba(0, 0, 0, 0.05);
}@media (min-width: 992px){
.navbar-expand-lg .navbar-nav {
    margin-left: auto;margin-right: auto;
}}.navbar-nav > li >a.btn{padding: 0.3rem 1rem;}


.bg-covid-img {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url("./images/COVIDs.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
}
.bg-yellow-img {
  background-image: url("./images/YELLOWBLOCK.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
}
.bg-city-img {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url("./images/CITADEL.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
}

.my-card {
  position: relative;
  width: 60%;
  overflow: hidden;
  width: 18rem;
  height: 15rem;
}
.my-card-tag {
  position: absolute;
  top: 0;
  right: 0;
  color: transparent;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 0;
  z-index: 99;
}
.my-card-tag::before,
.my-card-tag::after {
  position: absolute;
  content: "";
  top: -4px;
  right: -4px;
  width: 5rem;
  height: 5rem;
}
.my-card-tag::before {
  background-image: url("./images/GOLDFOIL.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.my-card-tag::after {
  content: attr(data-tag-text);
  top: 15px;
  right: 1px;
  max-width: 4rem;
  max-height: 2rem;
  color: white;
  word-break: break-all;
  line-height: 1;
  overflow-y: hidden;
  text-align: center;
  transform: rotate(45deg);
}
.my-card-header img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}.bg-city-img .col-4 img{border-radius: 50%;
    border: 5px solid #fff;}
.my-card-body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 2rem 0;
  /* background-image: radial-gradient(
    64.08% 64.08% at 50% 50%,
    #e29f2b 0%,
    #b33826 100%
  );
  clip-path: polygon(0 0, 100% 30%, 100% 100%, 0% 100%); */
}

/* Typography */
.top-pos {
  transform: translateY(0%);
}

.text-1 {
  display: inline-block;
  font-size: 3rem;
  color: transparent;
  font-weight: bolder;
  position: relative;
  letter-spacing: 3px;
}
.text-1::before,
.text-1::after {
  content: "WELCOME TO";
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-text-stroke: 0;
}

.text-1::before {
  top: 4%;
  left: 3%;
  color: black;
  filter: blur(5px);
  pointer-events: none;
}
.text-1::after {
  content: "WELCOME TO";
  position: absolute;
  color: transparent;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, #b33826, #e29f2b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px white;
}
.text-2,
.sub-heading {
  font-family: "Roboto", cursive;
}

.sub-heading2 {
  font-family: "Roboto", cursive;
   font-size: 25px;
}
.text-2 {
  display: inline-block;
  font-size: 1.9rem;color:wheat;
  font-weight: bold;
}
.text-3 {
  display: inline-block;
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 5px black;
}.row:not(.carousel .row){margin-left: auto}
.text-5 {
  text-shadow: 2px 2px 5px black;
}

.sub-heading {
  position: relative;
  font-size: 30px;
  font-weight: bold;
  color: black;
  
}
.underline {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translateX(-50%);
  /* width: 100%; */
}

/* Components related styles*/
.my-input {
  position: relative;
  display: flex;
}
.my-input img {
  position: absolute;
  display: inline-block;
  width: 2rem;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
#loginModal .modal-content {
  background-image: radial-gradient(
    64.08% 64.08% at 50% 50%,
    #e29f2b 0%,
    #b33826 100%
  );
}
#loginModal .modal-body {
  margin: 0 2rem;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: white;
}
#loginModal .modal-footer {
  margin: 0 2rem;
  background-color: white;
}
.btn {
  --bs-btn-font-size: 0.8rem;
  display: inline-block !important;
  min-width: 100px;
  border-radius: 0;
  padding: 0.8rem 1rem;
  font-weight: bold;
}
.btn-primary {
  --bs-btn-bg: #a71e25;
  --bs-btn-border-color: #a71e25;
  --bs-btn-hover-bg: #d5585f;
   --bs-btn-focus-shadow-rgb: #a71e25;
  --bs-btn-active-bg: #821419;

}.btn-primary:focus {
   color: #fff!important;border-color: #a71e25!important
}
.btn-secondary {
  --bs-btn-color: black;
  --bs-btn-bg: #f7bb16;
  --bs-btn-border-color: #f7bb16;
  --bs-btn-hover-bg: #edbd39;
  --bs-btn-hover-color: black;
  --bs-btn-hover-border-color: #edbd39;
  --bs-btn-active-bg: #d7a210;
  --bs-btn-active-border-color: #d7a210;
}

.nav-link {
  --bs-nav-link-font-size: 14px;
  --bs-nav-link-color: black;
  padding-left: 0!important;
}

/* Media queries */
/* sm */
@media (min-width: 576px) {
  
  .w-sm-10 {
    width: 10% !important;
  }
  .w-sm-20 {
    width: 20% !important;
  }
}
/* md */
@media (min-width: 678px) {
  .flow > * + * {
    margin-top: 0.3rem;
    margin-left: 0.3rem;
  }
  .text-1 {
    font-size: 4.5rem;
    letter-spacing: 10px;
  }
  .text-2 {
    font-size: 2rem;
  }
  .text-3 {
    font-size: 3rem;
    text-shadow: 2px 2px 5px black;
  }
  .w-md-10 {
    width: 10% !important;
  }
  .w-md-20 {
    width: 20% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-75 {
    width: 75% !important;
  }
}
/* lg */
@media (min-width: 992px) {.mobilebackground{justify-content: center!important;}
  .flow-lg > * + * {
    margin-top: 0;
    margin-left: 0.3rem;
  }

  .text-1 {
    font-size: 6rem;
  }
  .text-2 {
    font-size: 2.5rem;
  }
  .text-3 {
    font-size: 4rem;
    text-shadow: 2px 2px 5px black;
  }

  .w-lg-10 {
    width: 10% !important;
  }
  .w-lg-20 {
    width: 20% !important;
  }
  .w-lg-50 {
    width: 50% !important;
  }
  .w-lg-75 {
    width: 75% !important;
  }
}