/* Cartoon-themed styling: Blues & Greens Palette */
body {
  font-family: 'Open Sans', sans-serif;
  /* background-color: #a6dbff;    */
  color: #2a3a52; /* deep navy blue */
  overflow-x: hidden;
  background-color: #fff;
  /* background-color: #efffff; */
}

.themed-nav {
  background-color: #2a6f97; /* rich ocean blue */
}

.themed-brand {
  /* font-family: 'DynaPuff', serif; */
  color: #ffffff ;
  font-size: 1.5rem;
}

.themed-nav-list .themed-link {
  color: #e8f5e9 !important; /* light mint for contrast */
  margin-left: 1rem;
  font-weight: 600;
}

.themed-link.active {
  border-bottom: 3px solid #4a7c59; /* forest green accent */
}

.hero {
  position: relative;
  z-index: 1;
  background: url('../images/hero-bg-trans.png') no-repeat top right fixed;
  background-size: 60% ;
  background-position: 100% 20%;
  height: 45vh;
  /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); */
}

.overlay {
  background: linear-gradient(270deg, #FCFFA4, #CF6230);

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: rgba(255, 255, 255, 0.7); semi-transparent ocean blue */
}

.hero-content {
  width: 50%;
  position: relative;
  left: 0;
  z-index: 1;
  color: #2a6f97 !important; /* ocean blue text */
  color: white !important; /* white text for contrast */
  h1 {
    text-shadow: 2px 2px 4px rgba(0, 58, 41, 1); /* subtle shadow for readability */
    font-size: 6rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }
  p {
    font-size: 1.25rem;
    color: black;
    margin-bottom: 1rem;
  }
  .btn {
    background-color: #4a7c59; /* forest green */
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
  }
  
  .btn:hover {
    background-color: #2a6f97; /* ocean blue hover */
  }
  .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.5); /* forest green focus */
  }
  .btn:active {
    background-color: #1f5a7b; /* darker ocean blue active */
  }
}
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 58, 41, .5); /* subtle shadow for readability */
  }
.hero-image {
  position: absolute;
  top: 55%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}
.hero-image img {
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: 12px;
}

.themed-btn {
  background-color: #4a7c59; /* forest green button */
  border-color: #4a7c59;
  color: #ffffff;
}

.themed-btn:hover {
  background-color: #2a6f97; /* ocean blue hover */
  border-color: #2a6f97;
}

.themed-section {
  /* background-color: #e0f2f1; light teal section */
}

/* .feature-card {
  background-color: #ffffff;
  border: 2px solid #4a7c59; 
  border-radius: 12px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
  height: 150px;
  padding: 1.5rem;
} */

.themed-footer {
  background-color: #2a6f97; /* ocean blue footer */
}

.themed-footer p {
  color: #ffffff;
}

.themed-accordion .accordion-button {
  background-color: #ffffff;
  border: 2px solid #4a7c59;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
#what-are {
  padding: 120px 0;
  /* transform: rotate(3deg); */
  /* width: 120vw; */
  /* margin-left: -15vw; */
  position: relative;
  z-index: 15;
  .row {
    /* transform: rotate(-3deg); */
  }
  ul {
    font-size: larger;
  }
}
.themed-card {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.themed-form {
  background-color: #ffffff;
  padding: 2rem;
  border: 2px solid #4a7c59;
  border-radius: 12px;
}

.themed-input {
  border: 2px solid #4a7c59;
  border-radius: 8px;
}
.torah-cards-section {
  height: 80vh;
  background-color: #ffffff; /* white background */
}

.torah-cards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  img {
    width: 100%;
    height: auto;
    max-width: 350px;
    margin: 20px auto;
    display: block;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease-in-out;
  }
  img:hover {
    transform: scale(1.10);
  }
  
}
        
.torah-card {
  /* position: absolute;
  top: 50%;
  left: 50%; */
  cursor: pointer;
  width: 337px;
  height: 197px;
  perspective: 500px;

  .content {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.7);

    transition: transform .8s;
    transform-style: preserve-3d;
  }
  .front, .back {
    position: absolute;
    height: 100%;
    width: 100%;
    background: white;
    line-height: 300px;
    color: #03446A;
    text-align: center;
    font-size: 60px;
    /* border-radius: 5px; */
    backface-visibility: hidden;
  }

  .front {
    background: url('../images/cards-back.png') no-repeat center center;
    background-size: cover;
    color: #03446A;
  }
  
  .back {
    background: url('../images/Pokeach-Ivrim.png') no-repeat center center;
    background-size: 100%;
    color: white;
    transform: rotateY( 180deg );
  }

  .back2 {
    background: url('../images/tzoveah.png') no-repeat center center;
    background-size: cover;
  }
  .back3 {
    background: url('../images/Haetz.png') no-repeat center center;
    background-size: cover;
  }
}
.trading-section {
  background: linear-gradient(133deg, #4a90e2 0%, #50e3c2 100%);
}
.trading-section img {
  width: 100%;
  max-width: 350px;
  height: auto;
  margin: -80px auto;
  display: block;
  /* box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7); */
  border-radius: 50%;
}

@media (max-width: 768px) {
  .trading-section img {
    width: 100%;
    margin: auto;
  }
}


.unflipped:hover .content {
  transform: rotateY( 13deg ) ;
}

.flipped .content {
  transform: rotateY( 180deg ) ;
}

/* About section */
/*=== Base ===*/
    /* body {
      font-family: 'Open Sans', sans-serif;
      line-height: 1.6;
      color: #2a3a52;
    } */
    h1, h2, h3 {
      font-family: 'DynaPuff', serif;
      font-weight: 700;
      position: relative;
      text-align: center;
      margin-bottom: 1rem;

    }
    h2::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background: #50e3c2;
      border-radius: 2px;
      margin: 10px auto;
      /* margin: 0.5rem 0 1.5rem; */

    }
    .emoji {
      font-size: 1.8rem;
      line-height: 1;
      margin-bottom: 10px;
      margin-right: 0.5rem;
    }
    /*=== Hero ===*/
    #about {
      position: relative;
      z-index: 0;
    }
     #about .hero {
      background: linear-gradient(133deg, #4a90e2 0%, #50e3c2 100%);
      color: #fff;
      text-align: center;
      padding: 100px 0;
      clip-path: polygon(0 0,100% 0,100% 95%,0 100%);
    }
    #about .hero h1 {
      font-size: 3rem;
      margin-bottom: 0.5rem;
    }
    #about .hero p {
      font-size: 1.2rem;
      margin-bottom: 1.5rem;
    }
    #about .hero .btn {
      font-size: 1.1rem;
      padding: 0.75rem 2rem;
      border-radius: 50px;
    }
    /*=== Sections ===*/
    section {
      padding: 60px 0;
      p {
        font-size: large;
      }
    }
    .bold {
      font-weight: 700;
    }
    
    .bg-lightest {
      background: #00159c;
      /* background: linear-gradient(90deg, rgb(69, 111, 501) 0%, rgb(235, 253, 255) 25%, rgb(183, 247, 255) 75%, rgba(69, 111, 201) 100%); */
      background: radial-gradient(circle at 50% 50%,
        rgba(235, 253, 255, 0.8) 0%, 
        rgba(235, 253, 255, 0.8) 15%, 
        rgba(183, 247, 255, 0.8) 55%, 
        rgba(69, 111, 201, 0.8) 100%);
    }
    /* .bg-mint    { background: #e8f5e9; }  */
    /* .bg-mint    { background: #efffff }  */
    .bg-mint    { background: #fff } 
    /* .bg-mint    { background: linear-gradient(135deg, #d7ecd8 0%, #459c4d 100%); } */
    .bg-cream   { background: #fffbe6; }  
    .bg-cream   { background: #fffbe6; }
    
    @media (min-width: 1200px) {
      section:not(#home):not(#about):not(.trading-section) {
        /* clip the bottom right corner */
        clip-path: polygon(0 0,100% 0,100% 90%,0 100%);
      /* clip-path: polygon(0 5%,100% 0,100% 100%,0 100%); */

      }
      .rewards-section .container {
        width: 30%;
        margin: auto;
      }
    }
    /*=== Feature Cards ===*/
    
    .feature-card-container {
      position: relative;
    }
    .feature-card {
      background-color: #00159c;
      background: url('../images/square.png') no-repeat center center;
      background-size: 100% 100%;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      /* border-radius: 16px; */
      /* box-shadow: 0 4px 20px rgba(0,0,0,0.05); */
      padding: 30px 50px;
      transition: transform .3s;
      position: relative;
      z-index: 1;
      /* box-shadow: 2px 2px 10px rgba(0,0,0,0.2); */
    }
    /* .feature-cards:hover .feature-card:not(:hover), .feature-cards:hover .feature-card-torah-card {
      opacity: 0.1;
    } */
    .feature-card:hover  {
      transform: translateY(-5px);
      /* box-shadow: 2px 2px 10px rgba(0,0,0,0.4); */
    }
    
    .feature-card-torah-card img {
      width: 420px;
      margin-top: 2px;;
      position: absolute;
      top: 0;
      transition: transform 0.3s ease-in-out;
    }

    .feature-card-container:hover .feature-card-torah-card img {
      transform: translateX(100%) ;
      opacity: 1 !important
      
    }
    .feature-card .feature-card-torah-card {
      opacity: 1;
    }
    
    /*=== CTA ===*/
    .cta {
      background: #50e3c2;
      color: #fff;
      text-align: center;
      padding: 80px 0;
    }
    .cta h2 { color: #2a3a52; }
    .cta .btn {
      background: #336699;
      border: none;
      padding: 0.75rem 2rem;
      font-size: 1.1rem;
      border-radius: 50px;
      color: #fff;
    }

    .torah-cards {
      position: relative;
      right: 80px;
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -70%);
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
      }
      .tc1 {
        transform: rotate(-30deg) translate(-40%, -40%);
      }
      .tc2 {
        transform: rotate(30deg) translate(-80%, -80%);
      }
    }
    .torah-cards-right {
      position: relative;
      left: 50px;
      right: 0;
      img {
        position: absolute;
        left: 50%;
        /* transform: translate(0, 70%); */
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
      }
      .tc1 {
        transform: rotate(30deg) translate(-40%, 40%);
      }
      .tc2 {
        transform: rotate(-30deg) translate(0, -150%);
      }
    }

    #testimonials {
      padding-bottom: 100px;
      background: radial-gradient(circle at 50% 50%, rgba(235, 253, 255, 0.8) 0%, rgba(183, 247, 255, 0.8) 55%, rgba(69, 111, 201, 0.8) 100%);
      h5 {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #001988; /* deep navy blue */
        margin-bottom: 1rem;
      }
      p {
        font-size: .9rem;
      }
    }

    #contact {
    }

   

    @media (max-width: 1400px) {
      .hero-container {
        margin-left: 10px;
      }
      .hero-content h1 {
        font-size: 4rem;
      }
      .hero-content p {
        font-size: 1rem;
      }

     
    }

    @media (max-width: 1200px) {
      .hero-content h1 {
        font-size: 3rem;
      }
      .hero-content p {
        font-size: 0.9rem;
      }
      .hero-image img {
        max-width: 700px;
        text-align: right;
      }
    }

    @media (max-width: 1092px) {
      #home{
        height: 70vh;
        background: url('../images/boys_in_camp.png') no-repeat center center;
        background-size: cover;
        .lead {
          font-size: 1.2rem;
          color: white;
          text-shadow: 2px 2px 4px rgba(0, 58, 41, 0.5);
          background: rgba(0, 0, 0, 0.5);
          border-radius: 25px;
        }
      }
      .overlay {
        background: none;
      }
      .hero-container {
        margin-left: auto
      }
      .hero-content {
        width: 100%;
        text-align: center;
        h1 {
          font-size: 3.5rem;
        }
      }
      .hero-image {
        /* position: relative;
        top: 0;
        right: auto;
        width: 100vw;
        width: 300px;
        margin: auto;
        margin-top: 100px;
        z-index: 0; */
        display: none;
      }
      
       .torah-cards:not(.home-torah-cards) {
        display: none;
      }
      #what-are {
        padding: 30px 0;
      } 
       .feature-cards {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .feature-card {
        width: 90%;
        height: auto;
        max-width: 400px;
        margin: auto;
        margin-bottom: 20px;
      }
    }

    .samples-header {
      font-size: 3rem;
      color: #ffffff;
      text-shadow: 2px 2px 4px rgba(0, 58, 41, 0.5);
      margin-bottom: 20px;
      font-family: 'DynaPuff', serif;
    }