/*
my original breakpoints 


$screen-xxs-min: 320px;
$screen-xxxs-max: ($screen-xxs-min - 1);

$screen-xs-min: 480px;
$screen-xxs-max: ($screen-xs-min - 1);

$screen-ms-min: 640px;
$screen-xs-max: ($screen-ms-min - 1);

$screen-sm-min: 768px;
$screen-ms-max: ($screen-sm-min - 1);

$screen-md-min: 992px;
$screen-sm-max: ($screen-md-min - 1);

$screen-lg-min: 1200px;
$screen-md-max: ($screen-lg-min - 1);

$screen-xlg-min: 1400px;
$screen-lg-max: ($screen-xlg-min - 1);

//mixins for breakpoints 
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }


// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }  


///single breakpoint
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }


*/
/*
my original breakpoints 


$screen-xxs-min: 320px;
$screen-xxxs-max: ($screen-xxs-min - 1);

$screen-xs-min: 480px;
$screen-xxs-max: ($screen-xs-min - 1);

$screen-ms-min: 640px;
$screen-xs-max: ($screen-ms-min - 1);

$screen-sm-min: 768px;
$screen-ms-max: ($screen-sm-min - 1);

$screen-md-min: 992px;
$screen-sm-max: ($screen-md-min - 1);

$screen-lg-min: 1200px;
$screen-md-max: ($screen-lg-min - 1);

$screen-xlg-min: 1400px;
$screen-lg-max: ($screen-xlg-min - 1);

//mixins for breakpoints 
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }


// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }  


///single breakpoint
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }


*/
html,
body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 75rem !important;
  height: 100%;
  padding-top: 125px !important;
}

.navbar-dark {
  background: rgba(0, 65, 117, 0.8) !important;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.navbar {
  /* Large padding for the initial header */
  /* Initial height */
  /* Add transition for animation */
  /* Ensure navbar stays on top */
}
.navbar .nav_info {
  color: #fff;
}
.navbar .nav_info a {
  color: #ff8629;
  text-decoration: none;
}
.navbar .nav_info a:hover {
  color: #f56a00;
}
.navbar .nav_info .copy {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  visibility: none;
  -webkit-transition: visibility 0.4s ease;
  transition: visibility 0.4s ease;
  display: none;
  -webkit-transition: display 0.4s ease;
  transition: display 0.4s ease;
  /* Optional responsive styling */
}
.navbar .nav_info .copy.active {
  opacity: 1;
  position: relative;
  visibility: visible;
  display: block;
}
.navbar .nav_info .copy.expanded {
  font-size: 27px;
}
@media (max-width: 575.98px) {
  .navbar .nav_info .copy.expanded {
    font-size: 20px;
  }
}
.navbar .nav_info .copy.shrunk {
  font-size: 14px;
}

main {
  padding-bottom: 15px;
}
main .welcome {
  background-image: url("https://placehold.co/1200x600?text=For Position Only");
  background-color: #cccccc;
  /* Used if the image is unavailable */
  height: 600px;
  /* You must set a specified height */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  background-size: cover;
  /* Resize the background image to cover the entire container */
}

.marketing .dcenter {
  text-align: center;
}

.blur-background {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding-top: 8%;
}

.parrallax {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  opacity: 0.85;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
}
.parrallax .text_bg.dark {
  color: #000;
  text-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
}
.parrallax .text_bg.light {
  color: #fff;
  text-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
}

.sec_1 {
  background-image: url("../media/AdobeStock_1272769540_Preview.jpeg");
  min-height: 70%;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
.sec_1 H1 {
  font-size: 50px;
  font-weight: 400;
  padding-bottom: 2%;
  font-size: 32px;
  padding-bottom: 0%;
}
@media (max-width: 575.98px) {
  .sec_1 H1 {
    font-size: 24px;
    padding-bottom: 0%;
  }
}
@media (max-width: 575.98px) {
  .sec_1 {
    min-height: 95%;
  }
}

.sec_2 {
  background-image: url("../media/AdobeStock_333601176_Preview.jpeg");
  min-height: 400px;
}

.sec_3 {
  background-image: url("../media/AdobeStock_947595922_Preview.jpeg");
  min-height: 400px;
}

.featurette h2 {
  font-size: 30px;
}
.featurette p.lead {
  font-size: 18px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1,
  .bgimg-2,
  .bgimg-3 {
    background-attachment: scroll;
  }
}
.offcanvas.show {
  background: rgb(10, 10, 10) !important;
}
.offcanvas.show .offcanvas-body {
  overflow: visible !important;
  background: rgb(10, 10, 10) !important;
}
.offcanvas.show.text-bg-dark {
  background: rgb(10, 10, 10) !important;
}
.offcanvas.show .offcanvas-header {
  background: rgb(10, 10, 10) !important;
}

.bd-mode-toggle .btn-bd-primary {
  background: rgba(242, 116, 5, 0.7) !important;
}

footer {
  min-height: 150px;
  padding-top: 2.5rem;
  background: rgba(0, 65, 117, 0.8) !important;
  border-top: solid 1px rgba(0, 0, 0, 0.1) !important;
  color: #e6e6e6;
}
footer a {
  color: #c2e4ff;
}
footer a:hover {
  color: #8fcdff;
}