/*!
 * Franklin Digital HTML5 + Bootstrap5 Boilerplate
 * 
 * Author: Franklin Digital
 * Author URI: https://www.franklindigital.me
 * Email: info@franklindigital.me
 * Version: 1.0.0
 * 
 * Description: A professional and responsive boilerplate built with HTML5 and Bootstrap5. 
 * Perfect for designers, developers, and businesses looking to create modern websites with ease.
 * 
 * License: MIT
 * License URI: https://opensource.org/licenses/MIT
 * 
 * Tags: responsive, html5, bootstrap5, boilerplate, web development, customization, SEO-ready
 * 
 * Created with love and expertise by Franklin Digital.
 */
/*Fonts*/
html{
    font-size: 62.5%;
}
@font-face{font-family: BergenSans-Bold;src: url('assets/fonts/BergenSans-Bold.otf');}
@font-face{font-family:BergenSans-BoldItalic;src: url('assets/fonts/BergenSans-BoldItalic.otf');}
@font-face{font-family:BergenSans-Italic;src: url('assets/fonts/BergenSans-Italic.otf');}
@font-face{font-family:BergenSans-Regular;src: url('assets/fonts/BergenSans-Regular.otf');}
@font-face{font-family:BergenSans-SemiBold;src: url('assets/fonts/BergenSans-SemiBold.otf');}
@font-face{font-family:BergenSans-SemiBoldItalic;src: url('assets/fonts/BergenSans-SemiBoldItalic.otf');}
@font-face{font-family:BalavaScript;src: url('assets/fonts/BalavaScript.otf');}
.balava{font-family: 'BalavaScript';}
.bergen-semibold{
    font-family: 'BergenSans-SemiBold';
}
.bergen-regular{
    font-family: 'BergenSans-Regular';
}
/*Typography*/
h1{
    font-family: 'BergenSans-Bold'; 
    font-size:4.0rem;
}
h2{
    font-family: 'BergenSans-SemiBold'; 
    font-size: 2.0rem;
}
h3{
    font-family: 'BergenSans-SemiBold'; 
    font-size: 1.8rem;
}
h4{
    font-family: 'BergenSans-SemiBold'; 
    font-size: 1.7rem;
}
h5{
    font-family: 'BergenSans-Regular'; 
    font-size: 1.6rem;
}
h6{
    font-family: 'BergenSans-Regular'; 
    font-size: 1.5rem;
}
p{
    font-family: 'BergenSans-Regular'; 
    font-size: 1.4rem;
}
.bg-wedgie{
    background-color: rgba(255,255,255,0.7);
}
.small-buffer{
    min-height: 15vh;
}
.buffer{
    min-height: 9vh;
}
small{
    font-family: 'BergenSans-Italic';
}
body, html{
    overflow-x:hidden; 
}
/*Back to the Top Button*/
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #000;
    color: white;
    font-weight: 700;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}
#myBtn:hover {
    background-color: #f47a94;
}

/*Header*/
img.brand-img{
    width: 125px;
    margin-left:-5vw;
    margin-top: -3vh;
}
nav{
    height: 10vh;
}


nav.navbar{
    background-color: white;
}
#navbar-container{
    backbround-color: white;
}

:root {
  --lightbox: rgb(0 0 0 / 0.75);
  --carousel-text: #fff;
}
@keyframes zoomin {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.gallery-item {
  display: block;
}
.gallery-item img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s;
}
.gallery-item:hover img {
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);
}
.lightbox-modal .modal-content {
  background-color: var(--lightbox);
}
.lightbox-modal .btn-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.25rem;
  z-index: 10;
  filter: invert(1) grayscale(100);
}
.lightbox-modal .modal-body {
  display: flex;
  align-items: center;
  padding: 0;
}
.lightbox-modal .lightbox-content {
  width: 100%;
}
.lightbox-modal .carousel-indicators {
  margin-bottom: 0;
}
.lightbox-modal .carousel-indicators [data-bs-target] {
  background-color: var(--carousel-text) !important;
}
.lightbox-modal .carousel-inner {
  width: 75%;
}
.lightbox-modal .carousel-inner img {
  animation: zoomin 10s linear infinite;
}
.lightbox-modal .carousel-item .carousel-caption {
  right: 0;
  bottom: 0;
  left: 0;
  padding-bottom: 2rem;
  background-color: var(--lightbox);
  color: var(--carousel-text) !important;
}
.lightbox-modal .carousel-control-prev,
.lightbox-modal .carousel-control-next {
  width: auto;
}
.lightbox-modal .carousel-control-prev {
  left: 1.25rem;
}
.lightbox-modal .carousel-control-next {
  right: 1.25rem;
}
@media (min-width: 1400px) {
  .lightbox-modal .carousel-inner {
    max-width: 60%;
  }
}
[data-bs-theme = "dark"] .lightbox-modal .carousel-control-next-icon,
[data-bs-theme = "dark"] .lightbox-modal .carousel-control-prev-icon {
    filter: none;
}
.btn-fullscreen-enlarge,
.btn-fullscreen-exit {
  position: absolute;
  top: 1.25rem;
  right: 3.5rem;
  z-index: 10;
  border: 0;
  background: transparent;
  opacity: .6;
  font-size: 1.25rem;
}
.bi {
color: #212529;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.035em;
  fill: currentcolor;
    
}

.text-arnelia{
    color: #212529;
    
}


/*Home Page*/
div#above-the-fold{
    height: 75vh;
    background-image: url('../img/hero-banner-393x871.jpg');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}


























/* 3x LEADS LANDING PAGE*/  
/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 5 breakpoints
*/
 

@media only screen and (max-width: 393px) {
  
}


@media(min-width: 576px){
   
       /*Typography*/

h1{font-size:5.0rem;}
h2{font-size: 1.8rem;}
h3{font-size: 1.7rem;}
h4{font-size: 1.6rem;}
h5{font-size: 1.5rem;}
h6{font-size: 1.4rem;}
p{font-size: 1.4rem;}
/*Header*/
img.brand-img{
    width: 125px;
    margin-left:-5vw;
    margin-top: -3vh;
}
nav{
    height: 10vh;
}
    
 /*Home Page*/
div#above-the-fold{
    background-image: url('../img/hero-banner-576x871.jpg');
      height: 65vh;

}

}


@media(min-width: 768px){

/*Typography*/
h1{font-size:6.0rem;}
h2{font-size: 1.9rem;}
h3{font-size: 1.8rem;}
h4{font-size: 1.7rem;}
h5{font-size: 1.6rem;}
h6{font-size: 1.5rem;}
p{font-size: 1.4rem;}
/*Header*/
img.brand-img{
    width: 150px;
    margin-left:-5vw;
    margin-top: -4vh;
}
nav{
    height: 10vh;
}
    
 /*Home Page*/
div#above-the-fold{
    background-image: url('../img/hero-banner-768x871.jpg');
      height: 65vh;

}
    

 
}

/*Bootstrap5 Large Breakpoint*/

@media(min-width: 992px){
    
 /*Home Page*/
div#above-the-fold{
    background-image: url('../img/hero-banner-992x871.jpg');
      height: 75vh;

}
    

}


/*Bootstrap5 XL Breakpoint*/
@media(min-width: 1200px){
/*Typography*/
h1{font-size:6.0rem;}
h2{font-size: 1.9rem;}
h3{font-size: 1.8rem;}
h4{font-size: 1.7rem;}
h5{font-size: 1.6rem;}
h6{font-size: 1.5rem;}
p{font-size: 1.4rem;}
/*Header*/
img.brand-img{
    width: 150px;
    margin-left:-5vw;
    margin-top: -4vh;
}
  
 /*Home Page*/
div#above-the-fold{
    background-image: url('../img/hero-banner-1200x879.jpg');
      height: 95vh;

}
    

    
    
}


/*Bootstrap5 XXL Breakpoint*/
@media(min-width: 1400px){
/*Typography*/
h1{font-size:6.0rem;}
h2{font-size: 2.2rem;}
h3{font-size: 2.0rem;}
h4{font-size: 1.9rem;}
h5{font-size: 1.8rem;}
h6{font-size: 1.7rem;}
p{font-size: 1.6rem;}
/*Header*/
img.brand-img{
    width: 200px;
    margin-left:-3vw;
    margin-top: -5vh;
}
  
 /*Home Page*/
div#above-the-fold{
    background-image: url('../img/hero-banner-1200x879.jpg');
      height: 95vh;

}
    
  
}



@media(min-width: 1546px){
     h1{font-size:8.0rem;}
       
}



@media(min-width: 1737px){
   /*Typography*/
h1{font-size:6.0rem;}
h2{font-size: 2.4rem;}
h3{font-size: 2.2rem;}
h4{font-size: 2.0rem;}
h5{font-size: 1.9rem;}
h6{font-size: 1.8rem;}
p{font-size: 2.0rem;}
/*Header*/
img.brand-img{
    width: 250px;
    margin-left:-3vw;
    margin-top: -5vh;
}
 .bg-wedgie{
    background-color: transparent;
} 
}



@media(min-width: 1900px){
    img.brand-img{
    width: 200px;
    margin-left:-3vw;
    margin-top: -6vh;
}

}