*,
::before,
::after {
  padding: 0; margin: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body{
cursor: default; overflow-x: hidden;
}

li {list-style: none;} input, button, textarea, select { font: inherit; border: none;}
a { text-decoration: none; color: var(--white-color); } a:hover{ color: var(--golddim-color);
cursor: pointer;
}

.f1{ flex: 1;}
.f3{ flex: 3;}
.hide-item{ display: none;}
body.hide {overflow: hidden;}
.flex{ display: flex;}
.center{ text-align: center; }
.margin-auto{ margin: 0 auto; }
.active-ass{ color: var(--primary-color);}
.j-a{ justify-content: center; align-items: center;}
.color--a{ color: black;}

.color--a:hover { 
  transition: 100ms ease-in-out;
}



.flip{
  flex-direction: row-reverse;
}

.more-padding-bottom{
  padding-bottom: 2em;
}





/* buttons */
.cta-button-styles{
 /* font-weight: 300;
 padding: 1em 1.5em; 
 font-size: var(--fs-100);
 color: white;
 transition: 300ms ease-in;
 letter-spacing: var(--ls-00);
 border-radius: .5em; border: none;
 background-color: var(--primary-color); */

 background: goldenrod;
 color: white;
 padding: 12px 24px;
 font-size: 18px;
 border: none;
 border-radius: 8px;
 cursor: pointer;
 transition: 0.3s ease-in-out;
 box-shadow: 0 0 0px #ffcc00;
}
.cta-button-styles:hover{
 /* cursor: pointer; */
 box-shadow: 0 0 10px #ffcc00, 0 0 20px #ffcc00, 0 0 35px #ffcc00;
 color: white;
}

/* Learn more about us button hp */
.more-about-us-btn{
  margin: 4em 0 0;
  padding: 1.5em 2em;
  display: inline-block;
  font-weight: 400;
}



/* img and video */
.img--style{
  left: 0;
  bottom: 0;
  z-index:-99;
  width: 100%;
  display: block;
  min-height: 100%;
  object-fit: cover;
  position: absolute;
  background-position: center;
}


/* text effects */
.clip{
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

/* section backgrounds */
 .bk-pd-black{
  padding: 4em 0em 6em;
  background-color: transparent;
 }

 .bk-pd-white{
  padding: 5em 0em;
  background-color: white;
  
 }

 .bk-pd-black-real{
  padding: 4em 0em 6em;
  background-color: rgb(247, 247, 247);
 }

 /* footer */
 .bk-pd-black-less{
  padding: 2em 0;
  
}

.bk-pd-sustain-top{
  padding: 5em 0;
  background-color: var();
}

.bk-pd-sustain-bottom{
  padding: 0 0 5em;
  background-color: var();
}

.bk-pd-career{
  padding: 5em 0;
  background-color: var();
}

.bk-pd-career-white{
  padding: 5em 0;
  background-color: var(--cream-color);
}
 .bk-pd-transparent{
  padding: 4em 0em 6em;
  background-color: var();
  backdrop-filter: blur(5px);
 }

.bk-pd-silver-faq{
  padding: 3.5em 0;
  background-color: rgb(247, 247, 247);
}
.bk-pd-white-faq{
  padding: 3.5em 0;
  background-color: rgb(255, 255, 255);
}



:root{
  --black-color: black;
  --white-color: white;
  --cream-color: rgb(247 247 247);
  --primary-color: goldenrod;
  --peach-color: rgba(218, 165, 32, .2);
  --golddim-color: rgba(218, 165, 32, .7);

  --fs-600: 3.2rem;
  --fs-500: 2.5rem;
  --fs-400: 2rem;
  --fs-300: 1.65rem;
  --fs-200: 1.2rem;
  --fs-100: 1rem;
  --fs-00: .9rem;

  --ls-300: 4.75px;
  --ls-200: 2.7px;
  --ls-100: 1.8px;
  --ls-00: 1.4px;

  --lh-100: 1.1;
  --lh-200: 1.6;
  --lh-300: 1.8;
 }



@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-scroll {
    opacity: 1;
  }
  .scrolled {
    animation: none !important;
  }
}





.container {
  max-width: 2536px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.01rem;
  padding-right: 0.01rem;
 }

  /* 2xl */
/* @media (max-width: 1536px) {
 .container {max-width: auto}
 body{background-color: green;}
} */
  /* xl */
  /* @media (max-width: 1280px) {
  .container {max-width: auto;}
  body{background-color: yellow}
} */
  /* lg */
  /* @media (max-width: 1024px) {
  .container {max-width: auto;}
  body{background-color: pink;}
} */
  /* md */
  /* @media (max-width: 768px) {
  .container {max-width: auto;}
  body{background-color:orange;}
  } */
  /* sm */
  /* @media (max-width: 640px) {
  .container { max-width: auto;}
  body{background-color:lightblue;}
} */


/* xs */
  @media (max-width: 475px) {
    .bk-pd-black{
      padding: 3em 0em 4em;
     }
     .bk-pd-black-real{
      padding: 2em 0em 4em;
     }
     .bk-pd-transparent{
      padding: 2em 0em 4em;
     }
     .bk-pd-career{
      padding: 2em 0 2.5em;
      background-color: var();
    }
    .bk-pd-career-white{
      padding: 0em 0 2em;
    }

    .cta-button-styles{
      font-weight: 400;
      padding: 1em 1.5em; 
      font-size: var(--fs-00);
      letter-spacing: var(--ls-00);
     }
}

/*Styling scrollable elements*/
.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}
.js-scroll.scrolled {opacity: 1;}
.scrolled.fade-in {animation: fade-in 1s ease-in-out both;}
.scrolled.fade-in-bottom {animation: fade-in-bottom 1s ease-in-out both;}
.scrolled.slide-left {animation: slide-in-left 1s ease-in-out both;}
.scrolled.slide-right {animation: slide-in-right 1s ease-in-out both;}
.scrolled.scale {animation: scale 1s ease-in-out both;}


@keyframes slide-in-left {0% {-webkit-transform: translateX(-100px);transform: translateX(-100px);opacity: 0;}100% {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;}}
@keyframes slide-in-right {0% {-webkit-transform: translateX(100px);transform: translateX(100px);opacity: 0;}100% {-webkit-transform: translateX(0);transform: translateX(0);opacity: 1;}}
@keyframes fade-in-bottom {0% {-webkit-transform: translateY(50px);transform: translateY(50px);opacity: 0;}100% {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;}}
@keyframes fade-in {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes scale {0% {-webkit-transform: scale(1.1);transform: scale(1.1);opacity: 0;}100% {-webkit-transform: scale(1);transform: scale(1);opacity: 1;}}
 /* Staggered floats */
.w3-animate-top-1st{position:relative;animation:animatetop 1.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-top-2nd{position:relative;animation:animatetop 2s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-top-3rd{position:relative;animation:animatetop 2.6s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
/* staggered boxes needs */
.scrolled.animate-left-1{position:relative;animation:animateleft 2.5s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.scrolled.animate-left-2{position:relative;animation:animateleft 2s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.scrolled.animate-left-3{position:relative;animation:animateleft 1.5s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.scrolled.animate-left-4{position:relative;animation:animateleft 1s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.scrolled.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.scrolled.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.scrolled.w3-animate-opacity{animation:opac 8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.scrolled.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.scrolled.w3-animate-left{position:relative;animation:animateleft 15s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.scrolled.w3-animate-right{position:relative;animation:animateright 1.8s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.scrolled.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.scrolled.w3-animate-zoom {animation:animatezoom 2s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.scrolled.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
.w3-animate-left{position:relative;animation:animateleft 1.8s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-left-1{position:relative;animation:animateleft 2.5s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-left-2{position:relative;animation:animateleft 2s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-left-3{position:relative;animation:animateleft 1.5s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-left-4{position:relative;animation:animateleft 1s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 1s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-opacity{animation:opac 1s}@keyframes opac{from{opacity:0} to{opacity:1}}

.throttle-container {
  bottom: 0;
  width: 100%;
  position: fixed;
  padding: 0.5em 1em;
  background: rgba(0,0,0,0.5);
}



/* Services Floats */
.left--skip{
  left: 2%;
  top:  50%;
  font-size: 3rem;
  position: absolute;
  background-image: linear-gradient( goldenrod, rgb(255, 255, 255), goldenrod);
}
.right--skip{
  right: 2%;
  top:   50%;
  font-size: 3rem;
  position: absolute;
  background-image: linear-gradient( goldenrod, rgb(255, 255, 255), goldenrod);
}

.slider img{
 width: 100%;
 display: none; 
}
img.displaySlide{
  display: block;
}
 /* 2xl */
 @media (max-width: 1536px) {
    .left--skip{
      left: .2%;}
    .right--skip{
      right: .2%; }
}

    /* md */
    @media (max-width: 768px) {
      .left--skip{
        left: -1%;}
      .right--skip{
        right: -1%; }
    }
     
    
    /* xs */
      @media (max-width: 475px) {    
      .left--skip{
        left: -1%;}
      .right--skip{
        right: -1%; }
      
      }
    




 
 /* Default background color */
 .parallax-section {
   background-color: white; 
   background-attachment: fixed;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
 
 /* For tablets (1024px) and smaller screens */
 @media (max-width: 1024px) {
  .parallax-section {
    background-attachment: scroll; /* Remove parallax effect */
    background-image: none; /* Option 1: Remove the background image */
    
    /* Option 2: Replace with a different image */
    /* background-image: url('/Images/alternative.png'); */
  }
 }


 .pro-crowns-bck-img{
  background-image: url(/Images/crowns.webp--);
 }

 .our-mission-back-img{
  background-image: url(/Images/monument.webp);
}
 
 .our-vision-back-img{
   background-image: url(/Images/monument.webp--);
 }

 .locations-back-img{
  background-image: url(/Images/All3.webp--);
}

 .sustain-vision-back-image{
  background-image: url(/Images/green-monument.webp);
 }

 .career-bck-img{
  background-image: url(/Images/istockphoto-685773914-612x612.jpg);
 }
 
.about-us-front{
  background-image: url(/Images/istockphoto-685773914-612x612.jpg);
 }

 
 .sustainability-front{
  background-image: url(/Images/istockphoto-685773914-612x612.jpg);
 }
 
 .state-of-virginia{
  background-image: url(/Images/Virginia.jp);
 }
 
 .state-of-washington{
  background-image: url(/Images/Washington.jp);
 }
 
 .state-of-maryland{
  background-image: url(/Images/Maryland.jp);
 }
 
 .health-care-front{
  background-image: url(/Images/ffhospital.jpe);
 }
 
 .education-front{
  background-image: url(/Images/Univeristy.jpe);
 }
 
 .commercial-front{
  background-image: url(/Images/commercial.jpe);
 }




 .paragraph--styles{
  font-weight: 200;
  font-size: var(--fs-200); 
  line-height: var(--lh-200);
  letter-spacing: var(--ls-00);
 }
 h2{font-weight: 200;}