@font-face {
  font-family: myFirstFont;
  src: url(./font/DIN\ 1451\ Engschrift\ LT.ttf);
}

@media screen and (min-width: 1699px) {
  footer .footer-img {
    max-width: 150px;
    height: 150px;
  }
}

@media screen and (max-width: 1381px) {
  nav .brand .t1 {
    font-size: 18px !important;
  }
  nav .brand .t2 {
    font-size: 16px !important;
  }

  nav ul li a {
    font-size: 14px;
  }
}

@media screen and (max-width: 1217px) {
  .brand2 img {
    width: 20px;
    height: 20px;
  }
  .brand2 img .img {
    width: 10px;
    height: 20px;
  }
  /* hero section */

  /* #hero h1 {
    font-size: 35px;
} */

  #Compendia .pgCard {
    font-size: 14px;
  }

  #annihilation .immerseTxt {
    font-size: 15px;
  }

  /* second page */

  /* firstSection Expore */

  /* -------- */

  /* third */

  /* page four */

  #Scarlett .ScarlettBg {
    background-size: cover;
  }
  #support .supportHeading {
    font-size: 38px;
  }
  #support .supportHeading2 {
    font-size: 18px;
  }

  #benefits .benefitsHeading {
    font-size: 55px;
  }
  #benefits .unList .list,
  #benefits .unList a {
    font-size: 16px;
  }

  /* page 5 */

  #form form label h2 {
    font-size: 28px;
  }

  footer a p {
    font-size: 13px;
  }

  #coFounder .coFounderImg {
    background-image: url("./assets/Profile_Angry_Octopus_Fabricatore2.png");
  }
  #coFounder .coFounderImgHead {
    display: none;
  }
  #form .formLable {
    font-size: 25px;
  }
}

@media screen and (max-width: 1085px) {
  nav .brand .t1 {
    display: none;
  }
  nav .brand .t2 {
    display: none;
  }
  .brand2 {
    display: none;
  }
  nav ul li a {
    font-size: 16px;
  }
  #form .CountryForm {
    font-size: 10px;
    padding: 10px 0px;
  }

  /* thirdpage */
  #benefits .unList .list,
  #benefits .unList a {
    font-size: 20px;
  }

  #form form label p {
    font-size: 16px;
  }

  #form .formtxt input[type="text"],
  #form .formtxt input[type="email"] {
    font-size: 23px;
  }

  ::placeholder {
    font-size: 23px;
  }
  select {
    font-size: 16px;
  }
  #form .form-control {
    padding: 6px 10px;
  }
}

@media screen and (max-width: 993px) {
  /* page four */

  #company .companyText {
    font-size: 1.5rem;
  }

  .navbg {
    background-color: #e52346;
    justify-content: space-around;
  }

  .navbar__logo-img {
    height: 60px;
    width: 350px;
  }

  .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* hero section */

  #hero .secureHeading {
    opacity: 0.8;
  }

  .hero__mob-container {
    position: relative;
  }
  .hero__mob-content {
    position: absolute;
    top: 400px;
    right: 0;
    left: 0;
  }
  .hero__mob-title {
    color: #cc3333;
    font-size: 28px;
    font-family: myFirstFont;
    font-stretch: ultra-condensed;
    text-align: center;
  }
  .hero__mob-title2 {
    color: #cc3333;
    font-size: 21px;
    font-family: myFirstFont;
    font-stretch: ultra-condensed;
    text-align: center;
  }
  .hero__mob-text {
    font-size: 20px;
    font-weight: 400;
    font-family: myFirstFont;
    font-stretch: ultra-condensed;
    text-align: center;
    line-height: 27px;
  }

  #support .supportHeading {
    font-size: 30px !important;
  }

  #coFounder .coFounderImg {
    background-position: center;
    height: 400px;
  }

  #contactUs .contactUsBg {
    background-size: cover;
  }

  #form .formLable {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 768px) {
  /* first-page */

  .navbar__logo-img {
    height: 50px;
    width: 300px;
  }

  #hero .secureTxt,
  .secureTxt2 {
    font-size: 22px;
    font-family: myFirstFont;
    font-weight: 300;
  }

  #hero .pad {
    padding-top: 30px;
    transition: padding-top 0.7s;
  }

  #Compendia .card .card-body a {
    font-size: 16px;
  }

  /* Third section */

  #annihilation .imgHeading h3 {
    font-size: 16px !important;
  }
  #annihilation .imgHeading p {
    font-size: 12px;
  }

  /* -------- */

  /* second-page */
  #BannerBg .bgHero {
    background-position: 20%;
    background-size: cover;
  }

  #BannerBg .bgHero .txtHero {
    display: none;
  }
  #BannerBg .txtHero2 {
    display: block;
  }

  #Scarlett .ScarlettBg .txtScarlett {
    display: none;
  }
  #Scarlett .txtScarlett2 {
    display: block;
  }

  #contactUs .contactUsBg .txtcontactUs {
    display: none;
  }
  #contactUs .txtcontactUs2 {
    display: block;
  }
  /* -------- */

  /* third section */
  #melancholic .melancholicImg {
    height: 200px;
  }

  /* 3third page */

  #support .supportHeading2 {
    font-size: 17px !important;
  }

  #benefits .unList .list,
  #benefits .unList a {
    font-size: 14px !important;
  }

  #benefits .benefitsHeading {
    font-size: 3rem;
  }

  /* fouth page */
  #coFounder .coFounderImgHead {
    left: 20% !important;
    bottom: 0%;
  }

  #operator .card-text {
    font-size: 12px;
    text-align: center;
  }

  #slider .sliderHeading {
    font-size: 17px !important;
  }

  select {
    font-size: 23px !important;
  }

  #coFounder .coFounderImgHead .ImgHead {
    font-size: 40px !important;
  }
  #coFounder .coFounderText {
    font-size: 18px !important;
  }

  

  #coFounder .coFounderImgHead {
    left: 20% !important;
    bottom: 1% !important;
  }
}

@media screen and (min-width: 577px) {
  #Compendia .para {
    font-size: calc(12px + (19 - 12) * (100vw - 320px) / (1440 - 320));
    font-weight: 600;
    text-align: justify;
  }
  #annihilation p {
    font-size: calc(12px + (19 - 12) * (100vw - 320px) / (1440 - 320));
    font-weight: 600;
  }
  #annihilation .immerseHeading {
    font-size: calc(16px + (25 - 16) * (100vw - 320px) / (1440 - 320));
    font-weight: 600;
    letter-spacing: 3px;
  }
  footer .copyRight p {
    font-size: calc(12px + (18 - 12) * (100vw - 320px) / (1440 - 320));
    font-weight: bolder;
  }
}

@media screen and (max-width: 576px) {
  /* first-page */

  .navbg {
    justify-content: space-evenly;
  }

  #Compendia {
    margin-top: 350px;
  }

  .compendia__mob-title {
    color: #cc3333;
    text-align: center;
    font-family: myFirstFont;
    font-size: 30px;
  }
  #Compendia .para {
    font-family: myFirstFont;
    font-weight: 400;
    font-size: 21px;
    text-align: center;
    line-height: 27px;
  }

  .compendia__mob-card-bg1 {
    background-image: url("./assets/index/comendia_card3.webp");
  }
  .compendia__mob-card-bg2 {
    background-image: url("./assets/index/comendia_card2.webp");
  }
  .compendia__mob-card-bg3 {
    background-image: url("./assets/index/comendia_card1\ copy.webp");
  }

  .compendia__mob-card {
    border-radius: 0;
    border: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
    height: 247px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .compendia__mob-card-title {
    font-family: myFirstFont;
    font-weight: 400;
    font-size: 35px;
    text-align: center;
    line-height: 27px;
    letter-spacing: 1px;
    text-decoration: none;
    color: white;
  }
  .compendia__mob-card-title:hover {
    color: white;
    text-decoration: none;
  }

  #annihilation .sm-padding {
    padding: 20px 0px !important;
  }

  .annihilation__mob-text {
    font-family: myFirstFont;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    line-height: 27px;
  }

  #annihilation .immerseHeading {
    font-family: myFirstFont;
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    line-height: 27px;
  }
  #annihilation .exlpore__mob-Heaidng {
    font-family: myFirstFont;
    font-weight: 400;
    font-size: 23px;
    text-align: center;
    line-height: 27px;
  }

  #form .form__lable {
    font-family: myFirstFont;
    font-weight: 400;
    font-size: 22px;
    text-align: center;
    line-height: 27px;
  }

  #form .CountryForm {
    width: 100% !important;
    margin-top: 5px;
  }

  #form .formHeading {
    font-size: 27px !important;
  }
  #form .formTxt {
    font-size: 14px !important;
  }

  footer a p {
    font-size: 20px !important;
  }
  #form .form-control {
    padding: 0px 10px;
  }
  .footer__mob-logo {
    opacity: 0.3;
  }

  footer .copyRight p {
    font-family: myFirstFont;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    line-height: 27px;
  }
  /* -------- */

  /* second-page */

  /* -------- */

  /* third section */
  #exporeMysterious .mysteriousImg {
    height: 350px;
  }
  #exporeMysterious .UnrealImgContainer {
    display: flex;
    justify-content: center;
  }
  /* -------- */
  /* fourth section */

  /* -------- */

  /* 3third page */

  /* slider section */

  #slider .arrowImg {
    display: none;
  }

  #benefits .benefitsHeading {
    font-size: 45px !important;
  }
  #media .mediaTxt {
    font-size: 16px;
  }
  .mediaHead,
  #message .messageHead {
    font-size: 29px !important;
  }
  #form form label h2 {
    font-size: 20px !important;
  }
  #company .companyText {
    font-size: 1rem !important;
  }
  #form .selDiv .btn-transparent {
    padding: 0px 6px;
  }
}

@media screen and (max-width: 443px) {
  #Compendia {
    margin-top: 400px;
  }
  .hero__mob-content {
    position: absolute;
    top: 300px;
  }
  .navbar__logo-img {
    height: 40px;
    width: 224px;
  }

  .compendia__mob-card {
    height: 186px;
  }

  .compendia__mob-card-title {
    font-size: 26px;
  }
}
@media screen and (max-width: 363px) {
  .hero__mob-content {
    position: absolute;
    top: 240px;
  }
  .hero__mob-title2 {
    font-size: 20px;
  }
  .hero__mob-title {
    font-size: 24px;
  }
  .hero__mob-text {
    font-size: 18px;
  }

  .compendia__mob-card {
    height: 154px;
  }

  .compendia__mob-card-title {
    font-size: 20px;
  }
}