* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



p {

    margin: 0 !important;

}



:root {

    --theme-color: #FFA500;

    --black-color:#000;

    --white-color:#fff;

    --blue-color: #0083E1;

    --grayish-color: #7b7b7b;

    --btn-background: #F7F7F7;

    --green-color: #58b40b;

}



.text-lg {

    font-size: 22px;

    font-weight: 600;

}



.text-md {

    font-size: 16px;

    font-weight: 500;

}



.txt-blue {

    color: var(--blue-color);

}



.txt-green {

    color: var(--green-color);

}



.txt-gray {

    color: #353535;

}



.mg-2 {

    margin: 5px 0px;

}



.main-container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 15px;

    width: 100%;

}



.bottom-fullst-container {

    width: 100%;

    max-width: 450px;

}



.full-sentc-table {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.translat {

    display: flex;

    flex-direction: column;

    text-align: left;

    width: 100%;

}



.bottom-container {

    margin-bottom: 20px;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    /* padding:0px 10px; */

}



.body-content {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    gap: 10px;

    width: 100%;

}



.outer-container {

	background-image: url(https://freehebrewclass.com/wp-content/uploads/2025/11/FreeHebrewClass-AboutUs-scaled.png);

    background-position: top center;

    background-repeat: no-repeat;

    background-size: cover;

	width: 100%;

    height: 300px;

	display: flex;

	justify-content: center;

    align-items: center;

    position: relative; 

    overflow: hidden;

    padding: 10px;

}
.outer-container::before {
    content: "";
    position: absolute;
    inset: 0;              
    background: #000;
    opacity: 0.5;
    z-index: 1;
}
.outer-container > * {
    position: relative;
    z-index: 2;
}



.banner-search {
    width: 700px;

    min-width: 300px;

    position: relative;

    background: #fff;

    padding: 10px;

    border-radius: 30px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 4px 6px 0 rgba(0, 0, 0, .1), 0 8px 24px 0 rgba(0, 0, 0, .2) !important;

}
.translator_container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.translator_container, .outer-container {
    .banner-search{
    border: 1px solid #a6a6a6 ;
    }
}


.banner-search {
    
    & label {

        img {

            width: 30px;

        }

    }

}

.banner-search {

    label {

        position: absolute;

        left: 10px;

        top: 50%;

        transform: translateY(-50%);

    }

}



.banner-search {

    input {

        border: 0px;

        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05);

        padding-left: 40px;

        font-size: 16px;

        font-weight: 600;

        height: 40px;

    }

}



.search-anim {

    border: 2px solid var(--blue-color);

    border-radius: 12px;

    animation: borderWave 1.5s infinite;

}



@keyframes borderWave {

    0% {

        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);

    }

    70% {

        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);

    }

    100% {

        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

    }

}



/* General Styling */

body {

    font-family: Arial, sans-serif;

    background-color: #fff;

    margin: 0;

    padding: 0;

    text-align: center;

}



.active-flex {

    display: flex !important;

}



.active-block {

    display: inline-block !important;

}



.fallbackContainer {

    display: flex;

    flex-direction: column;

    gap: 10px;

    justify-content: center;

    align-items: center;

    padding: 10px 0;

}



/* dictionary content  */

#dictionary {

    text-align: left;

}



.dictTitle {

    font-size: 20px;

    font-weight: 600;

    color: var(--black-color);

}



.dictLabel {

    font-size: 18px;

    font-weight: 500;

    color: var(--green-color);

}



.dictTword {

    font-size: 15px;

    font-weight: 600;

    color: var(--blue-color);

}



.dictTrans {

    font-size: 16px;

    font-weight: 500;

    color: var(--black-color);

}



/* Translation Box */

.translation-box {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #fef8ef;

    padding: 15px;

    margin: 20px auto;

    width: 700px;

    border-radius: 8px;

    border-left: 5px solid orange;

    box-shadow: 2px 4px 10px 0 rgba(4, 92, 180, 0.2);

}



.translated-text {

    display:none;

}



.translation-content {

    display: flex;

    flex-direction: column;

    align-items: start;

    width: 100%;

    padding: 0 10px;

}



.txt-outer-container {

    display: flex;

    gap: 20px;

}



.text-container {

    display: flex;

    gap: 10px;

}



.text-cover {

    display: flex;

    gap: 10px;

}



.icon-cover {

    margin-top:6px;

    cursor: pointer;

}



.hyphen {

    padding-top: 0px;

    font-size: 21px;

    color: var(--black-color);

}



.txt-heading {

    font-weight: 500;

    color: var(--black-color);

    font-size: 18px;

}



.txt {

    font-size: 22px;

    color: #0056b3;

    font-weight: 700;

}



.display-text {

    color: var(--black-color);

}



.hebrew {

    direction: rtl;

}



.transliterated-text {

    display: none;

}



/* Speaker Icons */

.audio-icons {

    display: none;

    gap: 10px;

    height: 24px;

    width: 24px;

    svg {

        height: 25px;

    }

}



.audio-icons i {

    cursor: pointer;

    color: #444;

    font-size: 18px;

}



.playIcon, .pauseIcon {

    display: none; 

}



/* Related Articles Section */

.related-articles {

    background: #f5f5f5;

    padding: 10px;

    text-transform: uppercase;

    font-weight: bold;

    color: #333;

    margin: 10px auto;

    width: 60%;

    border-radius: 5px;

}



/* Examples Section */

.examples {

    background: #f5f5f5;

    padding: 15px;

    margin: 10px auto;

    width: 60%;

    border-radius: 5px;

}



.examples h2 {

    color: var(--blue-color);

    font-size: 20px;

}



/* Search Bar */

.search-bar {

    display: block;

    margin: 15px auto;

    width: 60%;

    padding: 10px;

    font-size: 16px;

    border: 1px solid #ccc;

    border-radius: 5px;

    outline: none;

}



.wordsContainer {

    display: flex;

    gap: 10px;

    justify-content: center;

    max-width: 300px;

    flex-wrap: wrap;

}



.pauseIcon {

    display: none;

}



@media (max-width: 768px) {

    .translation-box {

        width: 90%;

    }



    .related-articles,

    .examples {

        width: 80%;

    }

}



/* Table css */

table, td, th {

    border: none;

}



.example-table, .wbw-table {

    margin: 0;

}



#examplesContainer tr, .wbw-table tr {

    text-align:left;

}



#examplesContainer tr:not(:last-child) td, .wbw-table tr:not(:last-child) td {

    border-bottom: 1px solid #ccc; 

}



.w-b-w {

    text-align: left;

}



.swap-examples {

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

}



.tabs {

    display: flex;

    gap: 10px;

    overflow-x: auto;

}



.tab-btn {

    display: flex;

    gap: 5px;

    align-items: center;

    background-color: var(--btn-background) !important;

    border-top: 3px solid var(--blue-color);

    border-radius: 0;

    padding: 10px 58px;

    cursor: pointer;

    font-size: 16px;

    font-weight: 700;

    color: var(--grayish-color) !important;

    transition: 0.3s;

}



.tab-btn:hover {

    color: var(--blue-color) !important;

}



.tab-btn.active {

    font-weight: 700;

    border-top: 3px solid var(--blue-color);

    color: var(--blue-color) !important;

}



/* Tab Content */

.examplesWrapper {

    box-shadow: 2px 4px 10px 0 rgba(4, 92, 180, 0.2);

    border-radius: 10px;

    margin-top: 15px;

    padding: 20px;

}



.examplesActive {

    display: flex !important;

    margin-bottom: 20px;

    height: auto;

    align-items: center;

    gap: 15px;

    flex-direction: column;

    justify-content: center !important;

}



.tab-n-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    width: 100%;

}



.tab-content {

    display: none;

}



.contentBox {

    box-shadow: 2px 4px 10px 0 rgba(4, 92, 180, 0.2);

    border-radius: 10px;

    padding: 20px;

}



.tab-content.active {

    display: block;

    min-width: 350px;

    max-width: 700px;

    border-radius: 10px;

    margin-top: 15px;

    padding: 20px;

    box-shadow: 2px 4px 10px 0 rgba(4, 92, 180, 0.2);

}



.example-discl {

    width: 100%;

    display: flex;

    gap: 10px;

    align-items: center;

}



.fallback-img {

    height: 130px;

}



.fallback-txt {

    color: var(--blue-color);

    font-size: 18px;

    font-weight: 500;

}



/* loader styles  */

.loader-box {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 300px;

    width: 100%;

}

.loader {

  color: var(--blue-color);

  font-size: 45px;

  text-indent: -9999em;

  overflow: hidden;

  width: 1em;

  height: 1em;

  z-index: 999;

  margin-top: 20px;

  border-radius: 50%;

  position: relative;

  transform: translateZ(0);

  animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;

}



@keyframes mltShdSpin {

  0% {

    box-shadow: 0 -0.83em 0 -0.4em,

    0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,

    0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;

  }

  5%,

  95% {

    box-shadow: 0 -0.83em 0 -0.4em, 

    0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 

    0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;

  }

  10%,

  59% {

    box-shadow: 0 -0.83em 0 -0.4em, 

    -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, 

    -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;

  }

  20% {

    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,

     -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, 

     -0.749em -0.34em 0 -0.477em;

  }

  38% {

    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,

     -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, 

     -0.82em -0.09em 0 -0.477em;

  }

  100% {

    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 

    0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;

  }

}



@keyframes round {

  0% { transform: rotate(0deg) }

  100% { transform: rotate(360deg) }

}

/* Transition fade-in effect */

.fade-in {

    opacity: 0;

    transition: opacity 0.4s ease, transform 0.4s ease;

}



.fade-in.show {

    opacity: 1;

}



.translateContainer {

    display: flex;

    flex-direction: column;

    align-items: start;

    .t-txt {

        color: var(--blue-color);

        font-size: 18px;

        font-weight: 600;

    }

}







/* forminator form  */

.form-btn {

    padding: 12px 20px;

    font-size: 16px;

    background-color: #0073aa;

    color: white;

    border: none;

    border-radius: 4px;

    cursor: pointer;

  }



  #closeFormBtn {

	padding: 5px 10px;

    border-radius: 6px;

  }



  .form-btn:hover {

    background-color: #005d8f;

  }



  #formContainer form {

	padding: 30px !important;

  }



  #openFormBtn {

	padding: 10px 0;

    border-radius: 6px;

  } 



  #openFormBtn:hover {

	color: #fff;

    background: #000000;

  }



  .form-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.6);

    z-index: 1000;

  }



  .form-modal {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 95%;

    max-width: 600px;

    background: #fff;

    border-radius: 8px;

    box-shadow: 0 8px 20px rgba(0,0,0,0.2);

    z-index: 1001;

    overflow: auto;

    max-height: 90vh;

  }



  .form-modal-content {

    padding: 20px;

    position: relative;

  }



  .form-close-btn {

    position: absolute;

    top: 10px;

    right: 14px;

    font-size: 24px;

    background: transparent;

    border: none;

    color: #666;

    cursor: pointer;

  }



  .form-close-btn:hover {

    color: #000;

  }



@media (max-width: 500px) {

    .form-modal-content {

        padding: 15px;

    }

    .form-btn {

        width: 100%;

        font-size: 18px;

    }

    .tabs {

        width: 90%;

    }
     
}

@media (max-width: 660px) {
    .tab-content.active{
        margin: 0px 20px;
    }

    .tab-btn{
         padding: 10px 15px;
    }
}



@media (min-width: 567px) {

    .tab-content.active {

        min-width: 440px;
        gap: 10px;

    }

    .translation-box {

        min-width: 440px;

    }

}