:root {
  --ltblue-main:#5c748e;
  --vanilla-cream: #FFF3ED;
  --charcoal:#3A3E42;
  --white:#ffffff;
  --footer:#23252C;
  --footer1:#782E1A;
  --button:#12223d;
  --ltturk:#0ec0d7;
  --tan:#9D7F69;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Make sure default spacing doesn't create gaps */
html, body { height: 100%; }

/* Right side background cover */
.hero-right{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay fills the right column height */
.hero-right-overlay{
  min-height: 100%;
  background: rgba(0,0,0,.25); /* optional */
}

/* Footer styling example (keep your colors) */

.footer{
  background:var(--footer); /* change to your footer color */
  padding: 12px 0;
}
@media (max-width: 768px) {
  .logo {
    height: 40px;
  }

  .logo-text {
    font-size: 1.1rem;
  }
}
h3{
    font-size:1.4rem;
}
h4,li{
    font-size:1rem;
}

.card-title{
    font-size:1.5rem;
}
.card-body{
text-align:center;
margin-top:15px;
line-height:1.8rem;
}
li.title{
    font-size:1.3rem;
}

.logo-bar{
    background-color:var(--tan);
}

.card-header{
    text-align: center;
    margin-bottom:15px;
    text-transform:capitalize;
    font-size:1.3rem;
}


.content-wrapper,h4{
    text-align:center;
    margin-bottom:10px;
}
.btn-shop {
  background: var(--white);
  color: var(--button);
  border: 2px solid var(--footer1);
}
.btn-shop:hover{
background-color:var(--tan);
color:var(--white);
border: 2px solid var(--footer1);
}
.btn-contact {
  background:transparent;
  color: var(--white);
  border: 2px solid var(--white);
}
.btn-contact:hover{
 background-color:var(--footer1);
 color:var(--white);
 border: 2px solid var(--white);
}
.btn-contact,.btn-shop{
  padding: 12px 24px;
  font-size:16px;
  text-transform:uppercase;
  border-radius:25px;
}

.title{
    text-transform:capitalize;
    text-align:center;
    font-weight:400;
    font-size:1.1rem;
}
.card-title{
    font:size 1.4em;
    color:var(--white);
}
.hat-line{
text-align:center;
color:var(--white);
text-transform:capitalize;
font-size:1.1rem;
}

.hat-line a{
    color:#fff;
    text-decoration:none;
}
li{
    list-style:none;
}


.modal-title{
text-transform:uppercase;
color:var(--white);

}

.modal-content.shop {
  background:var(--tan);
  color: #FFF3ED;
}

.modal-content.contact {
  background:var(--footer1);
  color: #FFF3ED;
}


.footer {
  background:var(--footer1);
  color: #FFF3ED;
}

a.brand-logo{
color:var(--white);
text-transform:capitalize;
font-size:1.5rem;
}
a.copy{
    color:var(--white);
}
a{
color:var(--white);
text-decoration:none;
}



/* to make columns align even no matter how much content */


/* Make each column stretch and each card fill the column height */
.product-col { 
  display: flex; 
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Let the body grow so cards match heights */
.product-card .card-body{
  display: flex;
  flex-direction: column;
  flex: 1;              /* fills remaining space */
}

/* Push the button to the bottom of the card */
.product-card .btn-shop{
  margin-top: auto;
}

/* (Optional) keep all images consistent height */
.product-card img{
  width: 100%;
  height: 220px;        /* adjust */
  object-fit: cover;
}












/* ✅ FIX: Make modals responsive (remove the forced 1200px width) */
.modal-dialog{
  min-width: 0 !important;          /* overrides your old rule */
  width: auto;
  max-width: 1200px;                 /* keeps it large on desktop */
  margin: 1rem auto;                 /* nice spacing */
}

/* Make modal content & body behave nicely */
.modal-content{
  width: 100%;
}

.modal-body{
  padding: 1rem;
}

/* ✅ Images inside modals: always scale down on small screens */
.modal-body img,
.card img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: .5rem;
  object-fit: cover;
}

/* ✅ Cards should not force weird widths */
.product-col .card{
  width: 100%;
}

/* ✅ MOBILE: tighten spacing + stop overflow */
@media (max-width: 991.98px){
  .modal-dialog{
    max-width: calc(100% - 1.5rem);  /* modal fits phone screen */
    margin: .75rem auto;
  }

  .modal-body{
    padding: .75rem;
  }

  .hat-line{
    padding-left: 0;
    margin-bottom: 0;
  }
}