* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap");

@font-face {
  font-family: myFirstFont;
  src: url(./font/DIN\ 1451\ Engschrift\ LT.ttf);
}
@font-face {
  font-family: headings;
  src: url(./font/bauhaus-bold/bauhaub.ttf);
}
@font-face {
  font-family: para;
  src: url(./font/Dessau/Dessau-Light-webfont.woff2);
}
@font-face {
  font-family: ganeva;
  src: url(./font/Geneva\ Regular.ttf);
}
/* @font-face {
  font-family: para;
  src: url(./font/tt-lakes-neue-w05-bold.otf);

} */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: white;
  font-family: headings, sans-serif;
}

p {
  color: #fff;
  font-family: para, sans-serif;
}

body {
  position: relative;
  background-color: #000000;
  padding-top: 50px;
}

.dropdown-toggle::after {
  display: none;
}

.navbar-toggler {
  border: none;
}

.navbar__logo-img{
  height: 70px;
  width: 70px;
}
.navbar {
  padding: 0rem 1rem;
}
.navbg{
  background-color: #000000;
}
.navbar-brand p{
  font-size: 26px;
  font-weight: 400;
  font-family: myFirstFont, sans-serif !important;
  color: white !important;
  display: inline;
}
nav .brand {
  display: flex;
  flex-direction: column;
}
nav .brand .t1 {
  font-size: 22px !important;
  font-family: myFirstFont, sans-serif !important;
  color: white !important;
}
nav .brand .t1 span {
  color: #cc3333;
  font-size: 30px !important;
}
nav .brand .t2 {
  font-size: 20px !important;
  font-family: myFirstFont, sans-serif !important;
  color: #cc3333 !important;
}

nav ul li a {
  font-size: 22px;
  font-family: myFirstFont, sans-serif !important;
}

/* first section */
#hero {
  position: relative;
}
#hero::before {
  content: "";
  background-image: url("./assets/Background/1s.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: bottom center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


#hero .hero-img {
  opacity: .3;
}
#hero .pad {
  padding-top: 80px;
  transition: padding-top 0.7s;
}

#hero h1 {
  /* font-size: 52px; */
  font-size: calc(28px + (47 - 28) * (100vw - 320px) / (1440 - 320));
  letter-spacing: 3px;
}
#hero .secureHeading {
  font-size: calc(24px + ( 52 - 24) * (100vw - 320px) / (1440 - 320));
  letter-spacing: 3px;
  opacity: .4;
  color: #cc3333;
}
#hero .secureHeading2 {
  /* font-size: 30px; */
  font-size: calc(22px + (38 - 22) * (100vw - 320px) / (1440 - 320)) !important;
  letter-spacing: 3px;
  color: #cc3333;
}
#hero .secureTxt, .secureTxt2{
  font-size: 19px;
  font-weight: 600;
}

.hero__mob-explore-txt{
  font-family: ganeva;
  font-size: 23px;
  font-weight: 500;
  padding-top: 50px;
  text-align: center;
}

.hero__mob-btn{
  background-color: white;
  border-radius: 50px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.hero__mob-btn img{
  padding: 5px 15px;
}





/* second section */
#Compendia {
  position: relative;
}
#Compendia::before {
  content: "";
  background-image: url("./assets/Background/2s.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#Compendia h1 {
  /* font-size: 33px; */
  font-size: calc(18px + (33 - 18) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
  letter-spacing: 3px;
}



#Compendia .pgCard,
#Compendia p {
  font-size: 16px;
  font-size: calc(14px + (16 - 14) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
}

/* Third section */
#annihilation {
  position: relative;
}
#annihilation::before {
  content: "";
  background-image: url("./assets/Background/3.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#annihilation h1 {
  /* font-size: 36px; */
  font-size: calc(29px + (36 - 29) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
  letter-spacing: 3px;
}

#annihilation .exlporeHeaidng{
  font-size: calc(16px + (25 - 16) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
  letter-spacing: 3px;
}

#annihilation .encounterHeaidng {
  /* font-size: 26px; */
  font-size: calc(16px + (26 - 16) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
  letter-spacing: 3px;
}
#annihilation h3 {
  font-size: 23px;
}

#annihilation .immerseTxt {
  font-size: 19px;
  font-weight: 600;
}

#Compendia .card .card-body a {
  color: #FF424D;
  border-radius: 0%;
  text-decoration: none;
}
#Compendia .card .card-body a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #FF424D;
  transition: transform 300ms ease-in-out;
  transform: scaleX(0);
}
#Compendia .card .card-body a:hover::before,
#Compendia .card .card-body a:focus::before {
  transform: scaleX(1);
}

/* formSection */

#form .formbg {
  background-image: url("./assets/footer/formbg2_small.webp");
  object-fit: cover;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 300px;
}
#form .formHeading {
  font-size: 31px;
  font-weight: 600;
  letter-spacing: 3px;
}
#form .formTxt {
  font-size: 22px;
  font-weight: 600;
}
#form .formLable {
  font-size: 30px;
  /* font-size: calc(23px + (30 - 23) * (100vw - 320px) / (1440 - 320)); */
  font-weight: 600;
  letter-spacing: 3px;
}
#form .formLable span{
  color: #cc3333;
}
#form form label p {
  color: grey !important;
  font-size: 21px;
}
#form .form-control {
  background-color: transparent !important;
  border-radius: 0;
  border: none;
  padding: 10px 10px;
}
#form .selDiv {
  width: 100%;
}
#form .selDiv .btn-transparent {
  background-color: transparent;
  color: grey !important;
  font-family: myFirstFont;
  font-size: 23px;
  transition: color 0.2s ease-in-out;
}
#form .selDiv .btn-transparent:hover {
  color: white !important;
}
.btn:focus {
  box-shadow: none;
}

#form  input[type="email"] {
  color: white;
  font-size: 23px;
}

::placeholder {
  color: grey !important;
  opacity: 1;
  font-size: 23px;
  font-family: myFirstFont;
}
select {
  text-transform: none;
  background: transparent;
  color: white;
  border: none;
  font-size: 23px;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: myFirstFont;
}
select:focus {
  outline: none;
}
select option {
  background-color: black;
  color: white;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: none;
  box-shadow: none;
}

#form .bdr {
  border: 2px solid white;
}

footer .footer-img {
  max-width: 120px;
  height: 120px;
  opacity: 0.3;
}
footer p {
  color: #6f6f6f;
  font-size: 16px;
}
footer a p {
  font-size: 16px;
}
footer a {
  list-style: none;
  text-decoration: none;
}
footer a:hover {
  text-decoration: none;
}


/* second page SCPAnnihilation */
/* firstSection */

#BannerBg {
  position: relative;
}
#BannerBg::before {
  content: "";
  background-image: url("./assets/Background/1s.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#BannerBg .bgHero {
  background-image: url("./assets/annihilation/Banner2_small.webp");
  background-repeat: no-repeat;
  object-fit: cover;
  background-position: left center;
  background-size: contain;
  height: 70vh;
  /* position: relative; */
}
/* #BannerBg .bgHero .txtHero {
  width: calc(100% - 50px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#BannerBg .txtHero2 {
  display: none;
} */
#BannerBg .BanerHeading {
  font-size: calc(29.8px + (78 - 29.8) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
  letter-spacing: 3px;
}
#BannerBg .BanerText {
  font-size: 18px;
  font-size: calc(15px + (19 - 15) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
}

/* ------ */

/* firstSection Expore */

#exporeMysterious {
  position: relative;
}
#exporeMysterious::before {
  content: "";
  background-image: url("./assets/Background/2s.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#exporeMysterious .mysteriousImg {
  background-image: url("./assets/annihilation/Architecture_044.webp");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  width: 100%;
  height: 500px;
}

#exporeMysterious .exporeHeading {
  font-size: calc(32px + (55 - 32) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
  letter-spacing: 3px;
}
#exporeMysterious .exporeText {
  font-size: calc(12px + (19 - 12) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
}

/* third-section */
#melancholic {
  position: relative;
}
#melancholic::before {
  content: "";
  background-image: url("./assets/Background/3.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#melancholic .melancholicText {
  font-size: calc(12px + (22 - 12) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
}
#Escaped {
  position: relative;
}
#Escaped::before {
  content: "";
  background-image: url("./assets/Background/1.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#melancholic .melancholicText2,
#Escaped .escapedText {
  /* font-size: 18px; */
  font-size: calc(17px + (20 - 17) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
}
#melancholic .melancholicHeading,
#Escaped .escapedHeading {
  /* font-size: 58px; */
  font-size: calc(20px + (55 - 20) * (100vw - 320px) / (1440 - 320));
  letter-spacing: 3px;
}
#melancholic .melancholicImg {
  background-image: url("./assets/annihilation/Architecture_06.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  width: 100%;
  height: 400px;
}

/* third page */

#Scarlett {
  position: relative;
}
#Scarlett::before {
  content: "";
  background-image: url("./assets/Background/1s.webp");
  background-repeat: no-repeat;
  opacity: 0.4;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
/* #Scarlett .ScarlettBg {
  position: relative;
}
#Scarlett .ScarlettBg img {
  width: 100%;
  height: auto;
}

#Scarlett .ScarlettBg .txtScarlett {
  width: calc(100% - 50px);
  position: absolute;
  top: 80%;
  transform: translateY(-50%);
}
#Scarlett .txtScarlett2 {
  display: none;
} */
#Scarlett .ScarlettBg {
  background-image: url("./assets/compendiaAnomaliae/SCP_Scarlett_King3_Small.webp");
  object-fit: cover;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 70vh;
}


#Scarlett .ScarlettHeading {
  font-size: calc(24px + (59 - 24) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
  letter-spacing: 3px;
}
#Scarlett .ScarlettText {
  font-size: calc(17px + (21 - 17) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
}

/* slinderSection */

#slider {
  position: relative;
}
#slider::before {
  content: "";
  background-image: url("./assets/Background/2.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.slidr {
  overflow: hidden;
}

#slider .sliderHeading {
  font-family: para, sans-serif;
  font-size: 21px;
  font-weight: 600;
}
#slider .img-thumbnail {
  border: 2px solid #000000 !important;
  background-color: #000000;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: "";
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "";
}
#slider .arrowImg {
  height: 35px;
  width: 35px;
  opacity: 0.4;
}
#support {
  position: relative;
}
#support::before {
  content: "";
  background-image: url("./assets/Background/1.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#support .supportHeading {
  font-size: 45px;
  font-weight: 600;
  letter-spacing: 3px;
}
#support .supportHeading2 {
  font-size: 21px;
  font-family: para, sans-serif;
  font-weight: 600;
}
#support .imgFluid {
  max-width: 100%;
  height: auto;
}

/* benefits */
#benefits {
  position: relative;
}
#benefits::before {
  content: "";
  background-image: url("./assets/Background/1.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#benefits .benefitsHeading {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: 3px;
}
#benefits .pateronImg {
  width: 70%;
  height: auto;
}
#benefits .benfitsImg {
  background-image: url("./assets/mask.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  width: 100%;
  height: 400px;
}

#benefits .unList {
  color: white;
}
#benefits .unList .list,
#benefits .unList a {
  font-size: 20px;
  padding: 3px 0px;
  font-family: para, sans-serif;
}
#benefits .unList .list a,
#benefits .unList a {
  color: white;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}
#benefits .unList .list a:hover,
#benefits .unList a:hover {
  color: gray;
}
#benefits .unList a {
  text-decoration: none;
}

/* fouth page */

#coFounder {
  position: relative;
}
#coFounder::before {
  content: "";
  background-image: url("./assets/Background/1.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#coFounder .coFounderImg {
  background-image: url("./assets/Profile_Angry_Octopus_Fabricatore.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  width: 100%;
  height: 500px;
  position: relative;
}
#coFounder .coFounderImgHead {
  position: absolute;
  left: 24%;
  bottom: 20%;
}
#coFounder .coFounderImgHead .ImgHead {
  font-size: 36px;
  font-stretch: ultra-condensed;
  font-family: myFirstFont;
}
#coFounder .coFounderHeading,
#Whisky .WhiskyHeading,
#operator .operatorHeading {
  font-size: calc(26px + (55 - 26) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
  letter-spacing: 3px;
}
#coFounder .coFounderText {
  font-size: 20px;
  font-weight: 600;
}
#Whisky .Whiskytext {
  font-size: 20px;
  font-weight: 600;
}

/* Whiskytext */
#Whisky {
  position: relative;
}
#Whisky::before {
  content: "";
  background-image: url("./assets/Background/2.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#Whisky .WhiskytextSmall {
  font-size: 19px;
  font-weight: 600;
}
#Whisky .WhiskytextSmall span {
  color: #6d9195;
  font-weight: bold;
}
#operator .card-text {
  font-size: 13px;
  text-align: justify;
  font-weight: 600;
}

/* cards */
#operator {
  position: relative;
}
#operator::before {
  content: "";
  background-image: url("./assets/Background/3.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.card-body .card-title {
  font-size: 22px;
  letter-spacing: 3px;
}

/* contact page */
#contactUs {
  position: relative;
}
#contactUs::before {
  content: "";
  background-image: url("./assets/Background/1.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#contactUs .contactUsBg {
  background-image: url("./assets/contact/24_small.webp");
  object-fit: cover;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 70vh;
  /* position: relative; */
}
/* #contactUs .contactUsBg .txtcontactUs {
  width: calc(100% - 50px);
  position: absolute;
  top: 60%;
}
#contactUs .txtcontactUs2 {
  display: none;
} */

#contactUs .contactUsHeading {
  font-size: calc(40px + (70 - 40) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
  letter-spacing: 3px;
}
#contactUs .contactUsText {
  font-size: calc(14px + (21 - 14) * (100vw - 320px) / (1440 - 320));
  font-weight: 600;
}

/* company */
#company {
  position: relative;
}
#company::before {
  content: "";
  background-image: url("./assets/Background/1.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#company .companyHeading {
  font-size: calc(40px + (70 - 40) * (100vw - 320px) / (1440 - 320));
  letter-spacing: 3px;
}
#company .companyText {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 3px;
}
#company .companyText a {
  font-family: para, sans-serif;
  color: #244344;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease-in;
}
#company .companyText a:hover {
  color: #bcc2c8;
}

#media {
  position: relative;
}
#media::before {
  content: "";
  background-image: url("./assets/Background/1.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#media .mediaHead,
#message .messageHead {
  font-size: 50px;
  letter-spacing: 4px;
}

#media .mediaTxt {
  font-size: 26px;
  font-weight: 600;
  color: #244344;
}

#socialmedia {
  position: relative;
}
#socialmedia::before {
  content: "";
  background-image: url("./assets/Background/1.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#message {
  position: relative;
}
#message::before {
  content: "";
  background-image: url("./assets/Background/1.webp");
  background-repeat: no-repeat;
  opacity: 0.3;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#message .messageBg {
  position: relative;
}
#message .messageBg::before {
  content: "";
  background-image: url("./assets/Background/1.webp");
  background-repeat: no-repeat;
  opacity: 0.5;
  position: absolute;
  background-position: center;
  object-fit: cover;
  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#message .messageBg .form-group label {
  color: #244344;
  font-size: 20px;
  font-stretch: ultra-condensed;
  font-family: myFirstFont;
}
#message .padding {
  padding-top: 2.2rem;
}
#message form .formControl {
  display: block !important;
  background-color: transparent;
  border: none;
  width: 100%;
  color: white;
}
#message form .btn-light {
  font-family: myFirstFont !important;
  padding: 5px 25px;
  font-size: 20px;
  font-stretch: ultra-condensed;
  color: #244344;
}