/*Theme Name: orsalia
Version: 1.0
*/

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Regular.ttf") format("truetype"), url("fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Light.ttf") format("truetype"), url("fonts/OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Bold.ttf") format("truetype"), url("fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Regular.ttf") format("truetype"), url("fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-ExtraBold.ttf") format("truetype"), url("fonts/OpenSans-ExtraBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("fonts/NotoSerif-Bold.ttf") format("ttf"), url("fonts/NotoSerif-Bold.ttf") format("ttf");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("fonts/NotoSerif-Italic.ttf") format("truetype"), url("fonts/NotoSerif-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("fonts/NotoSerif-BoldItalic.ttf") format("truetype"), url("fonts/NotoSerif-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("fonts/NotoSerif.ttf") format("truetype"), url("fonts/NotoSerif.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@media (min-width: 1921px) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 2000px) {
  html {
    font-size: 140%;
  }
}
@media (max-width: 1440px) {
  html {
    font-size: 85%;
  }
}
@media (max-width: 757px) {
  html {
    font-size: 90%;
  }
}

:root {
  --color-main: rgb(170, 38, 54, 0.1);
  --color-secondary: #F6E9EA;
  --color-nav: #000000;
  --color-secondary-text: #AA2636;
}

body {
  font-family: "Open Sans", sans-serif;
  min-height: 100vh
}

a {
  color: #fff;
  text-decoration: unset !important;
}

a:hover {
  color: var(--color-secondary-text) !important;
}

.navbarColors {
  background-color: var(--color-nav) !important;
  color: white !important; /* Optional, for text color */

}

.nav-link {
  color: white !important;
}

.nav-link:hover {
  color: var(--color-secondary-text) !important;
}

.menu-text {
  opacity: 0.6;
  font-size: medium;
  letter-spacing: 1.3px;
}

/* Add custom styles here if needed */
.banner {
  position: relative;
  text-align: left;
  padding: 0;
  margin: 0;
}

.banner-text {
  position: absolute;
  bottom: 28%;
  left: 3%;
  color: #fff;
  padding: 10px;
  letter-spacing: 0.225rem
}

.full-width {
  width: 100%;
  height: auto;
}


.banner img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.banner-image.container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

.footerBs {
  background-color: #000000; /* Set your desired background color */
  min-height: 10vh !important ; /* Set the minimum height to 10% of the viewport height */
  bottom: 0; /* Position the footer at the bottom of the viewport */
  width: 100%; /* Make the footer span the full width */
  color: #fff;
  font-size: medium;
}

.socialFooter {
  font-size: x-large;
}

.main-bg-color{
  background-color: var(--color-main) !important;
}

.main-bg-color{
  background-color: var(--color-main) !important;
}

.section-2.main-bg-color{
  background: linear-gradient(90deg, #ffffff00 75%, #fff 50%),
  linear-gradient(180deg, #ffffff00 75%, #fff 50%);
}

.section-2{
  font-size: xx-large;
  letter-spacing: 0.2375rem
}

.section-2 a{
  color: #000000;
}

.section-3 {
  border: solid;
  border-color: var(--color-main) !important;
}

.portait{
  box-shadow: 20px 20px 20px var(--color-main);
  border-width: 10px !important;
  border: 10px solid var(--color-main)!important;
  -webkit-box-shadow: 0 0 5px 2px var(--color-main);
  -moz-box-shadow: 0 0 5px 2px var(--color-main);
  box-shadow: 0 0 5px 2px var(--color-main);
  border: 1px solid var(--color-main);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

.padding-38{
  padding: 3.8%;
}