body {
		background: #343540;
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
		font-weight: 300;
    padding-top: 70px;
    overflow-x: hidden;
}


/*---------------------------------------
    Typorgraphy              
-----------------------------------------*/
h9 {
  text-align: center;
  margin: 35px 0 20px 0 !important;
}


h1,h2,h3,h4,h5,h6,
.navbar-default, .btn {
  font-family: 'Unica One', cursive;
  font-weight: 400;
}


h1,h2,h3,h4,h5,h6 {
  font-weight: 400;
  letter-spacing: 1px;
}

h1 {
    color: #ffffff;
    font-size: 52px;
    letter-spacing: 2px;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

h2 {
  color: #f0f0f0;
  font-size: 32px;
}

h3 {
  color: #40e693;
  font-size: 22px;
  line-height: 32px;
  padding-bottom: 4px;
}

h4 {
  font-weight: bold;
}

p {
    color: #999;
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
}

hr {
  border-bottom-color: #999;
  width: 100px;
}

.section-btn {
  background-color: #000;
  border: 2px solid transparent;
  border-radius: 100px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 14px 36px;
  margin-top: 26px;
  transition: all 0.4s ease-in-out;
}

.section-btn:hover {
  background: transparent;
  border-top-color: #ffffff;
  border-right-color: #222;
  border-bottom-color: #ffffff;
  border-left-color: #222;
  color: #ffffff;
}

video {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.video-wrapper {
  border: 2px solid #000;
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*---------------------------------------
    General               
-----------------------------------------*/
@font-face {
  font-family: 'BBFont';
  src: url('fonts/Anurati-Regular.otf');
}

html{
  -webkit-font-smoothing: antialiased;
}

a {
  color: #535bd4;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none !important;
}
a:hover, a:active, a:focus {
  color: #3FF;
  outline: none;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #ffffff;
}

.section-title {
  position: relative;
  padding-bottom: 62px;
  text-align: center;
}

#about,
#screenshot,
#divider,
#pricing,
#newsletter {
  padding-top: 100px;
  padding-bottom: 100px;
}

#divider,
#pricing {
  text-align: center;
}


/*---------------------------------------
    Preloader section              
-----------------------------------------*/

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background: none repeat scroll 0 0 #3f3f4b;
}

.sk-cube-grid {
  width: 120px;
  height: 120px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #40e693;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}
       


/*---------------------------------------
    Navigation section              
-----------------------------------------*/

.navbar-default {
    background: #ffffff;
    border: none;
    box-shadow: none;
    margin: 0 !important;
}
.navbar-default {
  color: #3f3f4b;
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 50px;
  margin: 0;
}

.navbar-brand {
  font-family: 'BBFont';
}

.navbar-default span {
  color: #39e991;
}

.navbar-default .navbar-nav li a {
    color: #3f3f4b;
    font-size: 18px;
    font-weight: 500;
    line-height: 50px;
    letter-spacing: 1px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    padding-right: 20px;
    padding-left: 20px;
}

.navbar-default .navbar-nav > li a:hover {
    color: #40e693;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #3f3f4b;
    background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #40e693;
    background-color: transparent;
}

.navbar-default .navbar-toggle {
     border: none;
     padding-top: 10px;
  }

.navbar-default .navbar-toggle .icon-bar {
    border-color: transparent;
  }

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { 
  background-color: transparent;
}


/*---------------------------------------
    Home section              
-----------------------------------------*/

#home {
    background: #3f3f4b url('../images/main.mp4') no-repeat;
    background-size: cover;
    background-position: center center;
    color: #ffffff;
    display: -webkit-box;
    display: -webkit-flex;
     display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
     align-items: center;
    height: 80vh;
    position: relative;
}

#home .overlay {
    /*background: #40e693; /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #3f3f4b , #39e99198, #39e99114); /* Chrome 10-25, Safari 5.1-6 */ 
    /*background: linear-gradient(to top, #3f3f4b , #39e99198, #39e99114); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: absolute;
  width: 100%;
    /*height: 80vh;*/
  top: 0;
  left: 0;
  right: 0;
}

#home img {
  width: 100%;
  height: auto;
}


#home .home-thumb {
  padding-top: 32px;
  padding-left: 32px;
}

#home p,
#newsletter p {
  color: #f0f0f0;
  letter-spacing: 1px;
}

#home .section-btn {
  background: #40e693;
}

#home .section-btn:hover {
  background: transparent !important;
}


/*---------------------------------------
   Divider section              
-----------------------------------------*/

#divider {
  background-color: #40e693;
}

#divider p {
  color: #666;
  font-size: 26px;
  line-height: 42px;
}

/*---------------------------------------
   Offerings section              
-----------------------------------------*/
h5 {
  color: #3f3f4b;
  font-size: 22px;
  line-height: 32px;
  padding-bottom: 4px;
}
#offering {
  background-color: #40e693;
}
#offering img {
  width: 100%;
}

#offering .offering-thumb {
  margin-bottom: 32px;
  position: relative;
  text-align: center;
}

#offering .offering-overlay h3 {
  padding-bottom: 0px;
}

#offering .offering-overlay {
  background-color: rgba(250,250,250,0.9);
  border-radius: 2px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100px;
  overflow: hidden;
  transition: height 450ms;
}

#offering .offering-thumb:hover .offering-overlay {
  height: 100%;
  background-color: #ffffff;
  color: #3f3f4b;
  padding-top: 30%;
  opacity: 0.9;
}

#offering .offering-thumb:hover h4 {
  color: #3f3f4b;
}
/*---------------------------------------
   About section              
-----------------------------------------*/

#about img {
  width: 100%;
}

#about .about-thumb {
  margin-bottom: 32px;
  position: relative;
  text-align: center;
}

#about .about-overlay h3 {
  padding-bottom: 0px;
}

#about .about-overlay {
  background-color: rgba(250,250,250,0.9);
  border-radius: 2px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100px;
  overflow: hidden;
  transition: height 450ms;
}

#about .about-thumb:hover .about-overlay {
  height: 100%;
  background-color: #ffffff;
  color: #3f3f4b;
  padding-top: 30%;
  opacity: 0.9;
}

#about .about-thumb:hover h4 {
  color: #3f3f4b;
}


/*---------------------------------------
    Screenshot section              
-----------------------------------------*/

#screenshot .col-md-3 {
  display: block;
  width: 100%;
  padding-bottom: 1rem;
}

#screenshot img {
  background-color: #ffffff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  cursor: pointer;
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  top: 0px;
  transition: all 0.4s ease-in-out;
}

#screenshot img:hover {
  box-shadow: 0px 16px 22px 0px rgba(0, 0, 0, 0.3);
  top: -6px;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  --webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}


/*---------------------------------------
   Pricing section         
-----------------------------------------*/

#pricing {
  background: #40e693;
}

#pricing .pricing-plan {
  background-color: #ffffff;
  border-radius: 2px;
  margin-bottom: 32px;
}

#pricing .pricing-plan .pricing-month {
  padding: 14px 10px 6px 10px;
}

#pricing .pricing-plan .pricing-month h2 {
  font-size: 52px;
  color: #585962;
}

#pricing .pricing-plan .section-btn {
  background: #585962;
  position: relative;
  top: 20px;
}

#pricing .pricing-plan .section-btn:hover {
  background-color: #ffffff;
  color: #222;
}


/*---------------------------------------
    Newsletter section              
-----------------------------------------*/

#newsletter {
    background: #343540 url('../images/newsletter-bg.jpg') no-repeat;
    background-size: cover;
    background-position: center center;
    color: #ffffff;
    position: relative;
}

#newsletter .overlay {
  background: #343540;
  opacity: 0.9;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
}

#newsletter .form-control {
  background-color: transparent;
  border: none;
  border-bottom: 3px solid #eee;
  border-radius: 0px;
  box-shadow: none;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  height: 50px;
  transition: all 0.4s ease-in-out;
  margin-bottom: 20px;
}

#newsletter .form-control:focus {
  border-color: #ffffff;
}

#newsletter input[type="submit"] {
  background-color: #ffffff;
  border-radius: 100px;
  border: 3px solid #ffffff;
  color: #1dc9e3;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  height: 55px;
}

#newsletter input[type="submit"]:hover {
  background-color: transparent;
  color: #ffffff;
}

#newsletter .form-control::-moz-placeholder {
  color: #ffffff;
  opacity: 1;
}

#newsletter .form-control:-ms-input-placeholder {
  color: #ffffff;
}

#newsletter .form-control::-webkit-input-placeholder {
  color: #ffffff;
}


/*---------------------------------------
   Footer section              
-----------------------------------------*/

footer {
  padding-top: 60px;
  padding-bottom: 60px;
}

footer span {
  padding-right: 10px;
  padding-left: 10px;
}

footer p {
  padding-top: 16px;
}



/*---------------------------------------
   Modal Contact           
-----------------------------------------*/

.modal-dialog .modal-content {
  background-color: #40e693;
  border: none;
  border-radius: 2px;
  text-align: center;
  padding: 100px 50px 80px 50px;
  position: relative;
  overflow: hidden;
}

.btn:focus {
  outline: none;
}

.modal-header {
  border-bottom: 0px;
}

.modal-dialog .close {
  color: #ffffff;
  font-size: 45px;
  font-weight: 300;
  text-shadow: none;
  opacity: 1;
  position: absolute;
  top: 40px;
  right: 40px;
  border-radius: 100px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.modal-dialog .close:focus {
  outline: none;
}

.modal-dialog .modal-title {
  color: #ffffff;
}

.modal-dialog form {
  padding: 20px;
}

.modal-dialog form input {
  height: 50px;
}

.modal-dialog .form-control {
  background: transparent;
  border: 1px solid #f0f0f0;
  border-radius: 0px;
  box-shadow: none;
  color: #585962;
  font-size: 20px;
  margin-bottom: 20px;
  transition: all 0.4s ease-in-out;
}

.modal-dialog .form-control:focus {
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: #ffffff;
}

.modal-dialog form input[type="submit"] {
  background: #585962;
  border: 3px solid transparent;
  border-radius: 100px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: uppercase;
  margin-top: 30px;
}

.modal-dialog form input[type="submit"]:hover {
  background: transparent;
  border-color: #585962;
  color: #ffffff;
}

.modal-dialog .form-control::-moz-placeholder {
  color: #ffffff;
  opacity: 1;
}
.modal-dialog .form-control:-ms-input-placeholder {
  color: #ffffff;
}
.modal-dialog .form-control::-webkit-input-placeholder {
  color: #ffffff;
}

.modal.fade .modal-dialog{
  -webkit-perspective: 1300px;
     -moz-perspective: 1300px;
          perspective: 1300px;
}

.modal.fade .modal-content{
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(-3000px) rotateY(90deg);
     -moz-transform: translateZ(-3000px) rotateY(90deg);
      -ms-transform: translateZ(-3000px) rotateY(90deg);
          transform: translateZ(-3000px) rotateY(90deg);
  opacity: 0;
}

.modal.fade.in .modal-content{
    -webkit-animation: slit .7s forwards ease-out;
    -moz-animation: slit .7s forwards ease-out;
    animation: slit .7s forwards ease-out;
}

@-webkit-keyframes slit {
  50% { -webkit-transform: translateZ(-250px) rotateY(60deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
  100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@-moz-keyframes slit {
  50% { -moz-transform: translateZ(-250px) rotateY(60deg); opacity: .5; -moz-animation-timing-function: ease-out;}
  100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@keyframes slit {
  50% { transform: translateZ(-250px) rotateY(60deg); opacity: 1; animation-timing-function: ease-in;}
  100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}


/*---------------------------------------
   Social icon             
-----------------------------------------*/

.social-icon {
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
}

.social-icon li {
    display: inline-block;
    list-style: none;
}

.social-icon li a {
    color: #666;
    border-radius: 100px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: 0px;
    margin: 10px 4px 0px 4px;
}

.social-icon li a:hover {
    background: #40e693;
    color: #ffffff;
    top: -5px;
}


/*---------------------------------------
   Back top         
-----------------------------------------*/

.go-top {
  background-color: #ffffff;
  box-shadow: 1px 1.732px 12px 0px rgba( 0, 0, 0, .14 ), 1px 1.732px 3px 0px rgba( 0, 0, 0, .12 );
  border-radius: 100px;
  transition : all 1s ease;
  bottom: 2em;
  right: 2em;
  color: #333;
  font-size: 22px;
  display: none;
  position: fixed;
  text-decoration: none;
  width: 35px;
  height: 35px;
  line-height: 30px;
  text-align: center;
}

.go-top:hover {
    background: #40e693;
    color: #ffffff;
}


/*---------------------------------------
   Mobile Responsive         
-----------------------------------------*/
@media (max-width: 1200px) {
  .container {
	width: 100%;
  }
}

@media (max-width: 980px) {

  h1 {
    font-size: 38px;
  }
  
  .section-btn {
    padding: 10px 34px 12px;
  }

  #home, #home .overlay {
    height: 60vh;
  }

  #home .home-thumb {
    padding-top: 0px;
  }

  #about {
    text-align: center;
  }

  #about .about-thumb {
    margin-top: 62px;
  }

}

@media (max-width: 768px) {

  h1 {
    font-size: 28px;
  }

  .section-title {
    padding-bottom: 32px;
  }

  #about, #divider,
  #screenshot,
  #pricing, #newsletter {
    padding-top: 60px;
    padding-bottom: 60px;
  }

}

@media (max-width: 767px) {

   body {
    padding-top: 0px;
    text-align: center;
  }

  .navbar-default {
    text-align: center;
    padding-top: 0px;
  }

  .navbar-default .navbar-brand {
    max-height: 100%;
  }

  .navbar-default .navbar-nav li a {
    line-height: 25px;
  }

  #home, #home .overlay {
    height: 100vh;
  }

  #home img {
    position: relative;
    display: inline-block;
  }

  #home .home-thumb {
    padding-top: 32px;
    padding-left: 0px;
  }

  #pricing .pricing-plan {
    margin-bottom: 62px;
  }

}

@media (max-width: 650px) {

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 18px;
  }

  p {
    font-size: 16px;
  }

}

.btn-dark {
	color: #fff;
	background-color: #40e693;
	border-color: #343a40;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  max-width: 50%;
  max-height: 50%;
}

/* SERVICES (offering) section cleaned up */
#offering {
  background:#2c2f3a;       /* dark, muted backdrop */
  padding:70px 0;
}
#offering .section-title h1,
#offering .section-title p,
#offering .section-title hr {
  color:#e9e9ee;
}
#offering .section-title hr {
  border-color: rgba(255,255,255,0.15);
}

/* Service cards */
#offering .offering-thumb {
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#1f222b;          /* subtle dark card background */
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  transform:translateZ(0);
}
#offering .offering-thumb::before{
  /* thin green accent bar at top */
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:4px;
  background:#40e693;
  opacity:.9;
  z-index:2;
}

/* Service images */
#offering .offering-thumb img{
  display:block;
  width:100%;
  height:auto;
  filter:brightness(.82) contrast(1.05);
  transition:transform .4s ease, filter .4s ease;
}
#offering .offering-thumb:hover img{
  transform:scale(1.04);
  filter:brightness(.88) contrast(1.08);
}



/* PRICING section refinement */
#pricing .section-title h1,
#pricing .section-title p,
#pricing .section-title hr {
  color:#e9e9ee;
}
#pricing .section-title hr {
  border-color: rgba(255,255,255,0.15);
}

/* Pricing cards */
#pricing .pricing-plan {
  background:#1b1d22a2;
  border-radius:16px;
  padding:40px 28px;
  margin-bottom:30px;
  box-shadow:0 8px 24px #40e693;
  transition:transform .3s ease, box-shadow .3s ease;
}
#pricing .pricing-plan:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.45);
}

/* Plan headings and price */
#pricing .pricing-plan h2 {
  color:#40e693;              /* accent color for headings */
  font-weight:600;
  margin-bottom:20px;
}
#pricing .pricing-plan .pricing-price {
  font-size:32px;
  font-weight:700;
  color:#ffffff;
  margin-bottom:20px;
}
#pricing .pricing-plan p {
  color:#c8c9d0;
  margin-bottom:12px;
  font-size:15px;
}

/* Buttons consistent with brand */
#pricing .pricing-plan .section-btn {
  background:#40e693;
  color:#222;
  border-radius:8px;
  padding:12px 24px;
  transition:background .3s ease, color .3s ease;
}
#pricing .pricing-plan .section-btn:hover {
  background:#fff;
  color:#222;
}

/* PRICING watermark — oversized, rotated */
#pricing {
  position: relative;
  overflow: hidden;
  background:#1b1d22; /* dark backdrop stays */
  padding:70px 0;
}

#pricing::before {
  content: "";
  position: absolute;
  top: -10%;          /* pull up so rotation has room */
  left: -30%;         /* shove left off screen a bit */
  width: 1600px;      /* very large watermark */
  height: 1600px;
  background: url("/images/blackbriarlogoonly.png") no-repeat center/contain;
  opacity: 0.07;      /* subtle */
  filter: grayscale(100%) brightness(220%) contrast(0%);
  transform: rotate(30deg); /* rotate clockwise */
  pointer-events: none;
  z-index: 0;
}

#pricing .container {
  position: relative;
  z-index: 1;
} 

/* PRICING — force same background as Services */
body #pricing {
  position: relative;
  overflow: hidden;
}

/* Watermark: neutral blend so it doesn't change bg color perception */
#pricing::before {
  content:"";
  position:absolute;
  top:-10%;
  left:-30%;
  width:1600px; height:1600px;
  background-image:url("/images/blackbriarlogoonly.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0.06;
  filter:grayscale(100%) brightness(70%) contrast(0%); /* darker watermark */
  mix-blend-mode:normal;   /* no screen/multiply tricks */
  transform:rotate(30deg);
  pointer-events:none;
  z-index:0;
}

#pricing .container { position:relative; z-index:1; }

/* Kill the green glow (it tints the whole section) */
#pricing .pricing-plan {
  background:#252933;              /* a touch lighter than bg for separation */
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
#pricing .pricing-plan:hover {
  box-shadow:0 12px 32px rgba(0,0,0,0.45);
}

/* === PRICING — unified canvas + bottom edge blend to #newsletter === */
#pricing {
  position: relative;
  overflow: hidden;
  padding: 70px 0;

  /* SAME as Services section */
  background: #2c2f3a;
}

/* Watermark (single definition) */
#pricing::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -30%;
  width: 1600px;
  height: 1600px;
  background-image: url("/images/blackbriarlogoonly.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: grayscale(100%) brightness(65%) contrast(0%); /* darker watermark */
  opacity: 0.06;
  transform: rotate(30deg);
  pointer-events: none;
  z-index: 0; /* stays behind content */
}

/* Bottom-edge fade into #newsletter’s overlay color (#343540) */
#pricing::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 72px; /* tweak between 48–96px to taste */
  background: linear-gradient(to bottom, rgba(52,53,64,0) 0%, #343540 100%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure cards/content sit above both pseudo-elements */
#pricing .container { position: relative; z-index: 1; }

/* Optional: lighten cards slightly so they don’t feel bunker-dark on the unified canvas */
#pricing .pricing-plan {
  background: #252933; /* a notch lighter than the section bg */
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
#pricing .pricing-plan:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
/* Move watermark down a bit so it doesn't clip the top edge */
#pricing::before {
  top: 8%;           /* was -10% */
  left: -30%;
  width: 1600px;
  height: 1600px;
  /* rest unchanged */
}

/* Give the section a touch more top breathing room (optional) */
#pricing { padding-top: 96px; }  /* was 70px */

#offering {
  background:#2c2f3a;
  padding:70px 0 30px; /* top 70, bottom reduced */
}
#pricing {
  position: relative;
  overflow: hidden;
  background:#2c2f3a; /* matches Services */
  padding:30px 0 70px; /* top reduced */
}

/* HERO — seamless fade (no clipping, no hard edge) */
#home { 
  position: relative;
  /* match the section below; if your About section is white, keep #fff */
  background: #fff; 
}






/* --- Ensure mobile CTA button stays visible above overlays --- */
@media (max-width: 767px) {
  #home .section-btn {
    position: relative;
    z-index: 5;          /* higher than overlay/veil */
    background: #39e991; /* brighter green for visibility */
    color: #0e0f10;      /* strong contrast text */
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  }
}

/* --- Services overlay text: larger & shadowed on mobile --- */
@media (max-width: 767px) {
  #offering .offering-overlay h3 {
    font-size: 1.6rem !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.55);
  }

  #offering .offering-overlay h4 {
    font-size: 1.3rem !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.55);
  }

  #offering .offering-overlay p {
    font-size: 1.1rem !important;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  }

  #offering .offering-overlay {
    background-color: rgba(250,250,250,0.92);
  }
}

/* --- Larger, high-contrast service text for mobile --- */
@media (max-width: 767px) {
  #offering .offering-overlay h3 {
    font-size: 40px !important;
    text-shadow: 0 3px 6px rgba(0,0,0,0.65);
  }

  #offering .offering-overlay h4 {
    font-size: 35px !important;
    text-shadow: 0 3px 6px rgba(0,0,0,0.65);
  }

  #offering .offering-overlay p {
    font-size: 20px !important;
    line-height: 1.6;
    color: #000000;
    /*text-shadow: 0 2px 5px rgba(0,0,0,0.65);*/
  }

  #offering .offering-overlay {
    background-color: rgba(255,255,255,0.88);
  }
}

/* --- Auto-open service cards on mobile --- */
@media (max-width: 767px) {
  #offering .offering-overlay {
    height: 100% !important;
    background-color: rgba(255,255,255,0.9);
    padding-top: 25%;
    opacity: 1;
  }

  #offering .offering-thumb:hover .offering-overlay {
    height: 100%; /* neutralize hover behavior */
  }

  #offering .offering-thumb img {
    filter: brightness(.85) contrast(1.05);
  }
}
#offering .offering-overlay {
  height: 100% !important;
  background-color: rgba(255, 255, 255, 0.812); /* was 0.9 — about 15% more transparent */
  padding-top: 25%;
  opacity: 1;
}

/* --- Add inner padding for service overlay text --- */
#offering .offering-overlay {
  padding: 20px 24px 24px 24px;  /* top, right, bottom, left */
  box-sizing: border-box;
}

#offering .offering-overlay h3,
#offering .offering-overlay h4,
#offering .offering-overlay p {
  padding-left: 4px;
  padding-right: 4px;
}

/* --- Add space above service titles --- */
#offering .offering-overlay h3 {
  margin-top: 26px;
}

@media (max-width: 767px) {
  #offering .offering-overlay h3 {
    margin-top: 80px; /* a bit more on small screens */
  }
}

/* --- Services always open: no overlay box, no hover behavior --- */
#offering .offering-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0); /* transparent */
  height: 100% !important;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* text sits near the bottom */
  text-align: center;
  opacity: 1 !important;
  transition: none !important;
  box-shadow: none;
}

#offering .offering-thumb:hover .offering-overlay {
  height: 100%;
  background: rgba(255,255,255,0);
  padding-top: 24px;
}

#offering .offering-overlay h3
{
  color: #39e991;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
#offering .offering-overlay h4,
#offering .offering-overlay p {
  color: #ffffff; /* white text over dark background */
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

#offering .offering-thumb img {
  filter: brightness(0.55) contrast(1.15);
  transition: none;
}
#offering .offering-overlay {
  pointer-events: none;  /* makes overlay transparent to clicks */
}

/* Adjust placement of text in services*\

/* --- Services: top-aligned text + sane, responsive sizes --- */
#offering .offering-overlay {
  justify-content: flex-start;      /* put content at the top */
  align-items: center;               /* keep it centered horizontally */
  padding: 20px 24px;                /* inner cushion */
  overflow: hidden;                  /* prevent spill */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

#offering .offering-overlay h3,
#offering .offering-overlay h4,
#offering .offering-overlay p {
  margin: 0 0 8px 0;                 /* tidy vertical rhythm */
  font-weight:400;
}

/* Desktop (≥ 992px): smaller to avoid overflow */
@media (min-width: 992px) {
  #offering .offering-overlay h3 { font-size: 22px !important; text-shadow: 0 2px 5px rgba(0,0,0,0.6); }
  #offering .offering-overlay h4 { font-size: 18px !important; text-shadow: 0 2px 5px rgba(0,0,0,0.6); }
  #offering .offering-overlay p  { font-size: 15px !important; line-height: 1.5; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
}

/* Tablet (768–991px): medium */
@media (min-width: 768px) and (max-width: 991px) {
  #offering .offering-overlay h3 { font-size: 24px !important; }
  #offering .offering-overlay h4 { font-size: 20px !important; }
  #offering .offering-overlay p  { font-size: 16px !important; line-height: 1.55; }
}

/* Mobile (≤ 767px): larger but controlled */
@media (max-width: 767px) {
  #offering .offering-overlay h3 { font-size: 26px !important; }
  #offering .offering-overlay h4 { font-size: 22px !important; }
  #offering .offering-overlay p  { font-size: 18px !important; line-height: 1.6; }
}

/*fix mobile sizing*/

/* Mobile (≤ 767px): restore larger sizes */
@media (max-width: 767px) {
  #offering .offering-overlay h3 {
    font-size: 35px !important;
  }
  #offering .offering-overlay h4 {
    font-size: 30px !important;
  }
  #offering .offering-overlay p {
    font-size: 25px !important;
    line-height: 1.6;
  }
}
/* Add breathing room above titles on mobile */
@media (max-width: 767px) {
  #offering .offering-overlay h3 {
    margin-top: 82px !important; /* or bump to 26px if you want extra space */
  }
}

/* Padding between service subtitle and paragraph */
#offering .offering-overlay h4 {
  margin-bottom: 35px;  /* tweak this number to taste (10–18px works well) */
}

@media (max-width: 767px) {
  #offering .offering-overlay h4 {
    margin-bottom: 45px !important;  /* a bit more breathing room on phones */
  }
}
#home .overlay {
  z-index: 1;
}

#home img {
  position: relative;
  z-index: 2;
}
/* Honeypot field: hidden from normal users */
.bb-honey-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Extra safety: hide the honeypot input by its name, even if wrapper class is wrong */
input[name="_honey"] {
    display: none !important;
}
.captcha-wrapper {
  margin-top: 15px;
  display: flex;
  justify-content: center; /* or center */
}

/* Desktop: center text vertically with the logo */
@media (min-width: 992px) {
  #home .row {
    display: flex;
    align-items: center;   /* centers the text column with the logo column */
  }

  #home .home-thumb {
    padding-top: 0;        /* remove extra top padding on the text */
  }
  #home .container {
  padding-top: 70px; /* adjust this value until it clears the top bar */
}
}

/* Mobile: reduce space above the logo */
@media (max-width: 767px) {
  #home {
    display: block;        /* stop flex centering on small screens */
    height: auto;          /* let height follow content */
    padding-top: 40px;     /* adjust this number to taste */
    padding-bottom: 40px;
  }

  #home .overlay {
    height: 100%;          /* match the content height instead of 100vh */
  }
}
/* Make hero overlay/filters on mobile match desktop */
@media (max-width: 767px) {
  /* Remove extra darkening on the video */
  #home video {
    filter: none !important;
  }

  /* Turn off the extra dark veil */
  #home::before {
    display: none !important;
  }

  /* Use the same gradient overlay as desktop */
  #home .overlay {
    background: -webkit-linear-gradient(
      to top,
      #3f3f4b,
      #39e99198,
      #39e99114
    ) !important;
  }
}
/* Mobile: show text/button ABOVE the logo in the hero */
@media (max-width: 767px) {
  #home .row {
    display: flex;
    flex-direction: column-reverse;  /* swap order: text first, logo second */
    align-items: center;
  }

  /* Remove the left offset Bootstrap adds to the logo column on xs */
  #home .row > .col-xs-offset-1 {
    margin-left: 0;
  }
}
/* Hero CTA: desktop vs mobile positions */
.hero-cta-mobile {
  display: none;  /* hidden by default (desktop/tablet) */
}

/* Mobile: text -> logo -> button */
@media (max-width: 767px) {

  /* Stack text column first, logo column second */
  #home .row {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }

  /* Remove the xs offset on the logo column when stacked */
  #home .row > .col-xs-offset-1 {
    margin-left: 0;
  }

  /* Hide original (right-column) button on mobile */
  .hero-cta-desktop {
    display: none;
  }

  /* Show the logo-under button on mobile, centered */
  .hero-cta-mobile {
    display: block;
    margin: 24px auto 0 auto;  /* top margin + auto left/right to center */
  }
}

/* Mobile hero CTA: force same look as desktop */
@media (max-width: 767px) {
  #home a.hero-cta-mobile {
    background: #40e693 !important;   /* same green as desktop hero */
    color: #ffffff !important;        /* white text */
    border-radius: 100px;
    border: 2px solid transparent;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    position: relative;
    z-index: 6;                       /* above overlays/veils */
    opacity: 1;
    filter: none;
  }
}
#home .section-btn {
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
/* Mobile: enlarge navbar logo only on small screens */
@media (max-width: 767px) {
  .navbar-default .navbar-header .navbar-brand img.navbar-brand {
    transform: scale(1.25);
    transform-origin: left center;
    display: inline-block;
  }
}
/* Mobile: center the navbar logo at the very top */
@media (max-width: 767px) {
  /* Center contents of the navbar header */
  .navbar-default .navbar-header {
    text-align: center;
  }

  /* Center the brand link (and its logo image) */
  .navbar-default .navbar-header .navbar-brand {
    float: none;          /* stop Bootstrap from left-floating it */
    display: inline-block;
  }
}
/* =======================================
   Utilities Hero – green banner w/ image
   ======================================= */
#utilities-hero {
  position: relative;
  /* flat green (image hook kept for later) */
  background: #40e693 url("images/utilities-hero-bg.jpg") center/cover no-repeat;
  padding-top: 60px;    /* smaller */
  padding-bottom: 25px; /* smaller */
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}

/* keep overlay element but make it transparent so there is NO gradient */
.utilities-hero-overlay {
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}
.utility-section-green {
  background: #40e693;
}

/* keep text white to match main site */
.utility-section-green h2,
.utility-section-green p {
  color: #ffffff;
}
.utility-logo {
  max-width: 140px;
  margin-bottom: 20px;
}

/* when logo is on green, force it to grey-ish via filter */
.utility-section-green .utility-logo {
  filter: grayscale(1) brightness(0.7);
}
#utilities-menu {
  background: #343540;   /* site grey */
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.6);
}

.utilities-menu-label {
  margin: 0;
  color: #ffffff;        /* white text */
  font-size: 18px;
}

.utilities-menu-select {
  display: inline-block;
  width: auto;
  min-width: 220px;
  margin-left: 10px;
  background-color: #343540;              /* same grey as bar */
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  color: #ffffff;                         /* white text */
  font-size: 16px;
  height: 44px;
}

.utilities-menu-select:focus {
  border-color: #40e693;
  box-shadow: 0 0 0 1px rgba(64,230,147,0.35);
  outline: none;
}
/* =======================================
   UTILITIES PAGE
   ======================================= */

/* Hero banner */
#utilities-hero {
  position: relative;
  /* flat green; you can later swap in an image:
     background: #40e693 url("images/utilities-hero-bg.jpg") center/cover no-repeat; */
  background: #40e693;
  padding-top: 40px;    /* smaller padding */
  padding-bottom: 24px; /* smaller padding */
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}

.utilities-hero-overlay {
  position: absolute;
  inset: 0;
  background: none;     /* no gradient */
  pointer-events: none;
}

#utilities-hero .container,
#utilities-hero .row,
#utilities-hero .utilities-hero-content {
  position: relative;
  z-index: 1;
}

#utilities-hero h1 {
  font-family: 'BBFont', 'Unica One', sans-serif;
  font-size: 40px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

/* 1) Hero subtitle text should be white */
#utilities-hero p {
  color: #ffffff;
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
}

/* Jump-to bar */
#utilities-menu {
  background: #343540;   /* same grey as main site */
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.6);
}

.utilities-menu-label {
  margin: 0;
  color: #ffffff;        /* white text */
  font-size: 18px;
}

.utilities-menu-select {
  display: inline-block;
  width: auto;
  min-width: 220px;
  margin-left: 10px;
  background-color: #343540;              /* grey background */
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  color: #ffffff;                         /* white text */
  font-size: 16px;
  height: 38px;
}

.utilities-menu-select:focus {
  border-color: #40e693;
  box-shadow: 0 0 0 1px rgba(64,230,147,0.35);
  outline: none;
}

/* 2) Sections need some padding above/below */
.utility-section {
  padding: 40px 0;       /* breathing room */
  background: #343540;   /* default grey */
}

/* Alternate darker grey, if you use it */
.utility-section-alt {
  background: #2c2f3a;
}

/* Green variant for every other block, e.g. Streams */
.utility-section-green {
  background: #40e693;
}

/* Headings & text */
.utility-section h2 {
  font-family: 'BBFont', 'Unica One', sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  color: #ffffff;
  margin-bottom: 14px;
}

/* default body text for all sections: grey */
.utility-section p {
  color: #d0d0d5;
  font-size: 17px;
  line-height: 1.6;
}

/* 3) Streams text (green section) stays same as others:
      white heading, grey body text – so we do NOT override p here */

/* Logos */
.utility-logo {
  max-width: 140px;
  margin-bottom: 20px;
}

/* 4) Force logo to appear grey on the green section */
.utility-section-green .utility-logo {
  filter: grayscale(1) brightness(0.7);
}

/* Streams 1 & 2 buttons spacing */
.streams-second-btn {
  margin-left: 12px;
}

/* Mobile tweaks */
@media (max-width: 767px) {
  .utility-section {
    text-align: center;
  }

  .utility-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .streams-second-btn {
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }
}
/* --- Utilities: Streams override --- */

/* 1) Streams description text back to white on green */
.utility-section-green p {
  color: #ffffff;
}

/* 2) Logo on Streams: darker grey instead of light grey */
.utility-section-green .utility-logo {
  filter: grayscale(1) brightness(2);
}
.navbar-default .navbar-nav > li > a {
  position: relative;
  padding-bottom: 2px;
}

.navbar-default .navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: #40e693;
  transition: width 0.2s ease;
}

.navbar-default .navbar-nav > li > a:hover::after {
  width: 100%;
}
/* Animated underline on main navbar links */
.navbar-default .navbar-nav > li > a {
  position: relative;
  padding-bottom: 4px; /* gives room for the line */
}

.navbar-default .navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  /* raise the line up inside the 50px nav item */
  bottom: 12px;          /* tweak between 10–14px to taste */
  height: 2px;
  width: 0;
  background: #40e693;
  transition: width 0.2s ease;
}

.navbar-default .navbar-nav > li > a:hover::after {
  width: 100%;
}

/* Navbar: dark grey bar */
  .navbar-default {
    background-color: #333333;
    border: none;
    box-shadow: none;
  }

  /* Navbar links: site green */
  .navbar-default .navbar-nav li a {
    color: #39e991;
  }

  .navbar-default .navbar-nav > li a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {
    color: #40e693;
    background-color: transparent;
  }

  /* Mobile menu icon bars also green */
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #39e991;
  }

  /* Navbar logo: keep natural aspect, no stretch, no chip background now that bar is dark */
  .navbar-default .navbar-brand img {
    height: 32px;
    width: auto;
    padding: 0;
    margin-top: -6px;
    background: transparent;
    border-radius: 0;
  }

  /* Coming Soon logo: keep proportions, not stretched */
  #home .coming-logo {
    max-height: 48px;
    width: auto;
    height: auto;
    vertical-align: middle;
    margin-right: 10px;
    display: inline-block;
  }
/* SCHWACK footer overrides */
footer {
  background: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* tighten up the text spacing */
footer p {
  padding-top: 0;
  margin: 0;
  font-size: 12px;
}
/* SCHWACK layout tweaks */

/* Make room for navbar but not too much */
body {
  padding-top: 40px;   /* was 70px near top of file */
}

/* Tighten the Coming Soon section so it doesn't push things off-screen */
#home {
  padding-top: 60px !important;   /* override inline padding:140px 0 */
  padding-bottom: 40px !important;
}

/* Smaller footer + white background */
footer {
  background: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* SCHWACK navbar logo tweaks */

/* Desktop + general */
.navbar {
  min-height: 60px;
}

.navbar-brand {
  padding-top: 10px;
  padding-bottom: 10px;
  height: 60px;              /* controls vertical centering */
}

.navbar-default .navbar-brand img {
  height: 44px;              /* bigger on desktop */
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;             /* remove old negative offset */
}

/* Mobile: bump size a bit and center better */
@media (max-width: 767px) {
  .navbar-brand {
    height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    float: none;             /* let it sit centered */
  }

  .navbar-default .navbar-toggle {
    float: right;
    margin-top: 10px;
  }

  .navbar-default .navbar-brand img {
    height: 48px;            /* a bit larger on mobile */
  }
}
/* SCHWACK mobile navbar: center logo, keep menu on right */
@media (max-width: 767px) {

  .navbar-header {
    float: none;
    text-align: center;
    position: relative;
  }

  .navbar-brand {
    float: none;
    display: inline-block;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0;
  }

  .navbar-default .navbar-brand img {
    height: 48px;
    width: auto;
  }

  .navbar-default .navbar-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}