/*
Theme Name: Coastal Aluminum Structures
Theme URI: https://jsmcorp.com/
Author: Jump Start Marketing, Inc.
Author URI: https://jsmcorp.com
Description: This theme was developed for Coastal Aluminum Structures and provides custom functionality and design for their needs. 
Version: 0.1

*/

a {color: #336aad;text-decoration:none;}
li.breadcrube-item a, a:hover {text-decoration: underline !important;}
navbar a {font-style: oblique !important;}

/* Make the entire header stick to top */
#masthead {
  /*position: fixed;*/
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #ffffff; /* or your header background color */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Push page content down so it's not hidden behind header */
.site-content {
 /*  padding-top: 150px; Adjust based on header height */
}

/* Optional: Add smooth transition */
#masthead {
  transition: all 0.3s ease;
}

.news-info {font-size: 1.2rem;}

.notice.notice-success {background-color: green;color: #fff;padding: 15px 20px 5px 20px;text-align:center; font-size: 1.2rem;margin-top:15px;margin-bottom:15px;}
.notice.notice-warning {background-color: red;color: #fff;padding: 15px 20px 5px 20px;text-align:center; font-size: 1.2rem;margin-top:15px;margin-bottom:15px;}
 
.content-box {font-size: 1.2rem;}

.two-col-list {
  columns: 2;               /* modern browsers */
  -webkit-columns: 2;
  -moz-columns: 2;
  column-gap: 2rem;         /* spacing between columns */
  margin: 0;
  padding-left: 1.2em;      /* keeps bullets aligned */
  list-style-position: outside;
}
.two-col-list li { 
  break-inside: avoid;      /* keeps items from splitting between columns */
}
@media (max-width: 768px) {
  .two-col-list { columns: 1; }  /* stack on mobile */
}

h2.h1.fw-bold.mb-4 {
    text-transform: uppercase;
}

/* #jsm-header-13 */ 
#jsm-header-13 div {font-size: 34px;font-family: 'Bebas Neue';}
#jsm-header-13 .jsm-col2 img {max-height: 130px;;}
#jsm-header-13  .jsm-col3 span {font-size: 40px; font-weight:900;line-height: 0;text-shadow: 0 0 1px var(--jsm-bg-primary), 0 0 1px yellow;}
#jsm-header-13 .btn-primary {background-color: #014a6d; font-size: 2rem;}

@media only screen and (max-width: 992px) {
    #jsm-header-13 .jsm-col1, #jsm-header-13 .jsm-col2, #jsm-header-13 .jsm-col3 {width: 100%;}
}

h2.wp-block-heading.has-text-align-center {  
    padding-top: 40px;
 	padding-bottom: 20px;
}

  nav.navbar {background-color: #336aad !important; color: #fff;}
  .navbar-nav > li {
    position: relative;
	padding: 10px;
  }

  .navbar-nav > li:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: 1px;
    background-color: #dee2e6;
  }

  .nav-link {
    font-weight: 500;
    color: #fff;
  }

  .nav-link:hover,
  .nav-link:focus {
    color: #ccc;
    background-color: #38a6ca;
  }

  .dropdown-menu {
    border: 1px solid #dee2e6;
  }
	
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #fff !important
}
	
a.nav-link {
    color: #fff !important;
}

  @media (max-width: 991px) {
    .navbar-nav > li:not(:first-child)::before {
      display: none;
    }
.navbar-nav > li {
    width: 100% !important;
}

    .navbar-collapse {
      text-align: center;
    }
  }

footer a {color: #fff;text-decoration:none;}

#jsm-section-34 h1 {font-size: 3rem;font-weight: 700;text-shadow: 1px 1px #076fce;}
#jsm-section-34 .slider1 { 
background-image:url('/wp-content/uploads/2025/08/6664236102586983005.webp'); 
background-position: center center;
background-repeat: no-repeat;
background-size: cover;   
height:450px;
}
#jsm-section-34 .slider2 { 
background-image:url('https://cassunrooms.com/wp-content/uploads/2025/08/sunrooms-scaled.jpg'); 
background-position: center center;
background-repeat: no-repeat;
background-size: cover;   
height:450px;
}
#jsm-section-34 .slider3 { 
background-image:url('https://cassunrooms.com/wp-content/uploads/2025/08/aluminum-rails.jpg'); 
background-position: center center;
background-repeat: no-repeat;
background-size: cover;   
height:450px;
} 

#jsm-section-34 .carousel-caption p {font-size: 2rem;}    

@media only screen and (max-width: 992px) {
    #jsm-section-34 .carousel-caption h1 {font-size: 2.3rem;text-align: center;} 
    #jsm-section-34 .carousel-caption p {font-size: 1.4rem; text-align: center;} 
}


.fortress-cta {
  background-color: #17375e; /* dark gray like the original */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('https://fortressfloors.com/wp-content/uploads/2023/01/garage-floor-coatings.jpg'); /* optional image */
}
.fortress-cta h2,
.fortress-cta p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* make white text readable on dark background */
}



#jsm-section a {color: #17375e !important;}
#jsm-section .jsm-btn {color: #fff !important;}
 

div#jsm-section-34 {
    /* margin-top: 170px; 
    top: 170px;*/
}

#jsm-header-13 .btn-primary {
    background-color: #3ab4d3;
    font-size: 2rem;
}

div#jsm-footer-7 {
    background-color: #336aad;
	color: #fff;
}

#jsm-lp{margin-top: 30px !important;}
#jsm-lp2{margin-top: 30px !important;}

.wp-block-image {
    float: right;
    margin-left: 50px;
    margin-bottom: 50px;
}
.wp-block-image figure img {
    width: 410px !important;
    height: auto !important;
}
.sidebar-interior-1 .widget {
  margin-bottom: 20px;
  padding: 16px;
  background: #f7f7f7;
  border-radius: 6px;
}
.sidebar-interior-1 .widget-title {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 1.1rem;
}

.jsm-btn {background-color: #39afce !important;color: #fff !important;}
.jsm-btn:hover {background-color: #2b869d !important;}


#jsm-section-34 .fa-star {font-size: 30px !important; color: #FEC004;}
#jsm-section-34 .card-text {font-size: 1.2rem; font-style: oblique;}	
#jsm-section-34 .carousel-item {
    display: none;
    position: relative;
    transition: transform 0.6s ease-in-out;
}

#jsm-section-34 .carousel-item.active {
    display: flex;
    justify-content: center;
}
#jsm-section-34 .review-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}
#jsm-section-34 .carousel-item .review-item {
    margin-left: auto;
    margin-right: auto;
}
/* Carousel controls adjustments */
#jsm-section-34 .carousel-control-prev,
#jsm-section-34 .carousel-control-next {
    z-index: 1;
    width: 5%;
}
#jsm-section-34 .carousel-control-prev-icon,
#jsm-section-34 .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 10px;
}
#jsm-section-34 .row  {
    padding-right: 70px;
    padding-left: 70px;
} 


@media only screen and (max-width: 992px) {
    .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-md-2, .col-md-5 {width: 100% !important;text-align: center !important;}
	button.navbar-toggler {margin-left: auto !important;; margin-right: auto !important;; margin: 5px;background-color: #fff !important;}
}



















/* =========================
   CONFIG / THEME TOKENS
   ========================= */
:root{
  --brand-blue: #0b3a73;       /* right panel background */
  --brand-blue-700: #12325d;   /* hover */
  --brand-red:  #e53b3b;       /* call button */
  --brand-red-700:#c92f2f;     /* call button hover */
  --panel-text: #ffffff;       /* text on blue */
  --overlay-color: rgba(10,20,40,.55);
  --scrim-left-1: rgba(0,0,0,.85);
  --scrim-left-2: rgba(0,0,0,.65);
  --scrim-left-3: rgba(0,0,0,.30);
}

/* Optional: smooth anchor scroll to the form */
html { scroll-behavior: smooth; }

/* =========================
   LAYOUT: LEFT / RIGHT
   ========================= */
.about-form-hero__left{
  position: relative;
  background: url('https://cassunrooms.com/wp-content/uploads/2025/08/PHOTO-2025-08-14-09-35-35-1024x768.webp') no-repeat center center / cover;
  min-height: 520px;
  display: flex;
}
.about-form-hero__form{
  background: var(--brand-blue);
  color: var(--panel-text);
  min-height: 520px;
  display: flex;
}

/* Keep the text readable & a nice measure */
.about-form-hero .content-wrapper{
  position: relative;
  z-index: 2;
  max-width: 760px;
  width: 100%;
}

/* =========================
   READABILITY OVER IMAGE
   ========================= */
/* Adaptive darkener across the whole left image */
.about-overlay-multiply{
  position: absolute; inset: 0; z-index: 0;
  background: var(--overlay-color);
  mix-blend-mode: multiply;
}
/* Stronger on the left, fades to clear on the right */
.about-scrim{
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--scrim-left-1) 0%,
    var(--scrim-left-2) 35%,
    var(--scrim-left-3) 60%,
    rgba(0,0,0,0) 85%
  );
}
/* Gentle text shadow helps across busy images */
.about-form-hero__left h1,
.about-form-hero__left h2,
.about-form-hero__left p{
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* =========================
   CTAS (CALL + FORM LINK)
   ========================= */
.btn-ico{ display:inline-block; vertical-align:middle; }
.btn-call{
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  border-radius: .65rem;
  box-shadow: 0 .25rem .65rem rgba(0,0,0,.18);
  padding-inline: 1.1rem;
}
.btn-call:hover,
.btn-call:focus{
  background: var(--brand-red-700);
  border-color: var(--brand-red-700);
  color: #fff;
}
.btn-quote{
  background: #173d73;
  border-color: #173d73;
  color: #fff;
  border-radius: .65rem;
  box-shadow: 0 .25rem .65rem rgba(0,0,0,.18);
  padding-inline: 1.1rem;
}
.btn-quote:hover,
.btn-quote:focus{
  background: #12325d;
  border-color: #12325d;
  color: #fff;
}

/* Tighten big hero headings a touch */
.about-form-hero__left h1{ line-height: 1.05; }
.about-form-hero__left h2{ line-height: 1.1; }

/* =========================
   FORM STYLING
   ========================= */
.letter-1{ letter-spacing: .02em; }

.about-form-hero__form .form-control,
.about-form-hero__form .form-select{
  border-radius: .6rem;
  border: none;
  padding: .65rem .85rem;
  background: #fff;
  color: #111;
}
.about-form-hero__form .form-control::placeholder{ color: #777; }
.about-form-hero__form .input-group-text{
  border: none;
  background: #e9eef6;
  color: #0d2442;
}
.about-form-hero__form .btn.btn-light{
  border-radius: .7rem;
  font-weight: 600;
}

/* =========================
   RESPONSIVE TWEAKS
   ========================= */
@media (max-width: 991.98px){
  .about-form-hero__left,
  .about-form-hero__form{ min-height: 0; }

  /* On mobile, vertical scrim works better */
  .about-scrim{
    background: linear-gradient(180deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.55) 40%,
      rgba(0,0,0,.15) 80%);
  }

  /* Stack buttons nicely on narrow screens */
  .btn-call, .btn-quote{ width: 100%; }
}