body {  margin: 0;  font-family: "Inter", sans-serif;  font-optical-sizing: auto; sans-serif; line-height: 1.5; }
main { max-width:1200px; margin: 0 auto; padding: 1rem; }

header {height:45px; padding:10px; background-color:#ef5184; margin-bottom:40px; }
main { background-color:#ffffff; padding:0px; margin:0px; }
footer {font-size:.8em; margin-top:20px; border-top:1px soild silver;}

a:link, a:visited {text-decoration: none}


h1 {font-family: "Abril Fatface", serif; font-size:2.8em; color:#233c6b; margin:5px; text-align:center; line-height: 100%;}
h2 {font-family: "Inter", sans-serif; font-size:1em; font-weight:normal; margin:5px;}


.hero {height:400px;  margin:00px auto; margin-bottom:20px; background-color:#efefef; background-image:url('images/truck.jpg'); background-size:cover; background-position: center bottom;} 

.productTitle {}
.productContainer { padding:0px 10px; margin-bottom:20px;  }
.product {width:calc(100% / 3); float:left;  }
.product_shot { margin-bottom:10px; width:calc(100%);  aspect-ratio: 1 / 1.25; border-radius:5px;  float:left;  background-size: cover; background-position: center center; background-repeat: no-repeat;}
.product_desc { line-height:120%; font-size:1em; font-weight:bold; text-align:left; padding:10px 10px 0px 10px;}
.product_size { text-align: center; font-size:.8em; text-align:left; padding:2px 10px; background-color: #eee; width:50px; margin:5px 8px; border-radius:5px; font-weight:bold;}
/*.product_size {text-align:left; background-color:#eee; border-radius:3px; font-size:.8em; padding:10px; width:40px;}*/
.product_price { text-align:left; padding:0px 10px; color:#EF5283; font-size:1.3em; font-weight: bold;}
.orderButton {background-color:#EF5283; color:#fff; font-weight:normal; font-size:.85em; text-align: center; padding:5px; border-radius:20px;}
.orderButton {background-color:#233c6b; color:#fff; font-weight:normal; font-size:.85em; text-align: center; padding:5px; border-radius:20px;}

.offeringTitle {padding-top:20px; font-family: "Abril Fatface", serif; text-align: center ; color:#233c6b; }
.offeringText  {padding-top:20px;  font-family: "Inter", sans-serif;  }


.ad { background: linear-gradient(45deg, #fe6d82, #fe6d82);}

.insta {width:calc(100%/6); aspect-ratio: 1 / 1; float:left;}

/*Calendar*/
  table {border-collapse: collapse; width: calc(100% - 5%); text-align: center;}
  caption {font-weight: bold; font-size: 1.2em; margin: 10px 0;}
  th, td {border: 1px solid #ccc;padding: 5px;width: 14.2%;height: 70px;vertical-align: top;position: relative;}
  
  .tooltip {visibility: hidden;background: #333;color: #fff;text-align: left;border-radius: 5px;padding: 5px 8px;font-size: 12px;position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);white-space: nowrap;z-index: 10;opacity: 0;transition: opacity 0.2s;}

  .dot_truck {width:20px; height:20px; background-color:#f9c0c7; border-radius: 50%; display: inline-block; margin-top: 4px;cursor: pointer; color:#fff;}
  .dot_truck:hover + .tooltip {visibility: visible;opacity: 1;}

  .dot_cart {width:20px; height:20px; background-color:#243b6b; border-radius: 50%; display: inline-block; margin-top: 4px;cursor: pointer; color:#fff;}
  .dot_cart:hover + .tooltip {visibility: visible;opacity: 1;}


  input, select {  border-radius:5px; background-color: #f5f8fa; font-family: "Inter", sans-serif;  }
  input[type="text"], textarea {outline: none; background-color:#f5f8fa;}
  input[type="phone"], textarea {outline: none; background-color:#f5f8fa;}
  input[type="email"], textarea {outline: none; background-color:#f5f8fa;}
  input[type="date"], textarea {outline: none; background-color:#f5f8fa; }

  input[type="text"]::placeholder {color: #c8c8c8; font-family: arial;}
  input[type="text"] {color: black;}

  .hero_text {margin-left:20px; max-width:1200px;}
  .offerCard { width:calc(100% / 1); text-align:left; margin-bottom:20px;} 
  .countdown {width:calc((100% / 1)); float:left; margin-top:10px; }


/*Gallery*/

.gallery-overlay {
    position: fixed; /* stays on top regardless of scroll */
    top: 0;
    left: 0;
    width: 100vw; /* full viewport width */
    height: 100vh; /* full viewport height */
    background: rgba(0, 0, 0, 0.8); /* darker semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(3px);
  }

  .gallery-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  }

  .gallery-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
  }

  .subBox {cursor:pointer}
  .subBoxInterior {border:1px solid #dbd7d7; border-radius: 10px; margin:10px; padding:10px; background-color:#fafafa; text-align:left;}
  .subBoxInterior:hover {border:2px solid #EF5283; background-color:#fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); padding:5px;}


/*Mobile*/
@media (max-width: 767px) {
  .promoText {float:left; font-size:.9em; text-align:left; width:calc(100% / 1)-20px; text-align:left; margin-left:20px;}
  .heroButton {display:none;}
  .logo {float:left; width:calc(100% / 1); text-align:center; cursor: pointer; box-shadow: 10px 10px 10px black}
  .subBox {width:calc(100% / 1);}
  .truckBox {float:left; width:calc(100% / 1);}
  .left {clear:both}
  .right {clear:both}
  .width50{width:100%;}
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero_text {margin-left:20px;}
  .offerCard {float:left; width:calc(100% / 3); text-align:left;  margin-bottom:20px;} 
  .countdown {width:calc((100% / 3)); float:left; margin-top:10px; }
  .promoText {float:left; font-size:.9em; text-align:left; width:calc(100% / 2); text-align:left;  margin-left:20px;}
  .heroButton {display:block;}
  .logo {float:left; width:calc(100% / 2); margin-left:30px; text-align:left; cursor: pointer;}
  .subBox {float:left; width:calc(100% / 3);}
  .truckBox {float:left; width:calc(100% / 2);}
  .left {float:left}
  .right {float:right}
  .width50{width:calc(100% / 2);}
}

@media (min-width: 1024px) {
  .hero_text {margin-left:20px;}
  .offerCard {float:left; width:calc(100% / 3); text-align:left;  margin-bottom:20px;} 
  .countdown {width:calc((100% / 3)); float:left; margin-top:10px; }
  .promoText {float:left; font-size:.9em; text-align:left; width:calc(100% / 2); text-align:left; margin-left:20px;}
  .heroButton {display:block;}
  .logo {float:left; width:calc(100% / 2); margin-left:30px; text-align:left; cursor: pointer;}
  .subBox {float:left; width:calc(100% / 3);}
  .truckBox {float:left; width:calc(100% / 2);}
  .left {float:left}
  .right {float:right}
  .width50{width:calc(100% / 2);}
}