@font-face {
    font-family: 'Modam';
    src: url('../fonts/Modam-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'GoftehFaNumWeb';
    src: url('../fonts/GoftehFaNumWeb-Heavy.woff') format('woff');
    font-style: normal;
    font-weight: 400; /* Adjust the font-weight if necessary */
}

/* General styling */
body, html {
    height: 100dvh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: 'Modam', sans-serif; 
    direction: rtl; /* Right-to-left text direction */
    background-color: #f4f4f4; /* Background color */
    color: #333; /* Text color */
}


.score_board_container{
    display: none;
}
.score_board_container {
    padding: 15px;
    background: #f8f8f8;
    border-radius: 10px;
}
.user_rank_box, .scoreboard_box {
    background: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.scoreboard_list {
    list-style: none;
    padding: 0;
}
.scoreboard_list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}






.question_container {
    display: none;
    transition: opacity 0.4s ease-in-out;
    width: 100%;
    opacity: 0;
    font-family: 'Tahoma', sans-serif;
    color: #333;
    background-color: #f7f7f7;
    border-radius: 8px;
}
.q_header_div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 25px 25px 10px 25px;
}
.q_logo_div img {
    height: 40px;
}
.center_time_div {
    text-align: center;
}
.timer {
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    line-height: 0px;
    flex-direction: row-reverse;
    height: 30px;
    color: #15354E;
    font-family: 'GoftehFaNumWeb' ,'Modam' ;
}
.timer p{
    width: 32px;
}
.timer_text {
    font-size: 14px;
    color: #312F30;
    font-family: 'Modam', sans-serif;  
    margin: 5px;
}
.question_number_p{
    font-family: 'GoftehFaNumWeb' ,'Modam' ;
}
.question_number_div {
    font-size: 24px;
    font-weight: bold;
    color: #005c7f;
    width: 50px;
    height: 50px;
    border: 1px #E0E0E0 solid;
    display: flex;
    justify-content: center;
    align-items: center;
}
.line_seprator {
    margin: 5px auto;
    border-top: 2px solid #ddd;
    width: 90%;
}
.question_box {
    padding: 15px;
    max-width: 600px;
    margin: auto;
}
.question_text_div {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}
.question_text{
    margin-top: 5px;
    margin-bottom: 30px;
    padding: 5px 15px;
    color: #000000;
    font-family: 'Modam', sans-serif;
    border-right: 4px solid #AF4122;
    display: flex;
    align-items: center;
    height: 45px;
    font-size: 20px;
}
.answers_div {
    display: grid;
    grid-template-columns: 4fr;
    gap: 10px;
}
.answer_box {
    display: flex;
    background-color: white;
    padding: 0px;
    border: 1px solid #ccc;
    border-radius: 0px;
    text-align: center;
    transition: background-color 0.3s ease;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    height: 80px;
}
.ans_number {
    border: 1px solid #D0D1D3;
    margin: 0px;
    height: 100%;
    text-align: center;
    padding: 0px 15px;
    font-family: 'GoftehFaNumWeb', 'Modam';
    font-size: 20px;
    font-weight: bold;
    color: #404040;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
}
.answer_text {
    border: 1px solid #D0D1D3;
    font-size: 18px;
    color: #000000;
    font-family: 'Modam';
    margin: 0px;
    height: 100%;
    text-align: right;
    padding: 0px 15px;
    display: flex;
    align-items: center;
    width: 100%;
}
#loginBtn{
    width: 100%;
}
label{
    margin-right: 5px;
}
label, input {
    display: block;
    margin-bottom: 1px; /* Adjust the space between elements */
}
.bold{
    font-weight: bold;

}
#fullName{
    font-family: 'Modam', sans-serif;  
    width: 92%;    
    margin: auto;

    height: 50px;
    padding: 0px 10px;
    font-size: 20px;
    border: 1px solid #6E8496;

    max-width: 360px;
    margin-bottom: 20px;
}
#phoneNumber{
    margin: auto;

    font-family: 'Modam', sans-serif;  
    padding: 0px 10px;
    width: 92%;
    border: 1px solid #6E8496;
    height: 50px;
    font-size: 20px;
    max-width: 360px;
}
#intro_page2{
    display: none;
}
#intro_page2 p.bold:first-of-type {
    font-size: 14px;
}
#intro_page2 p:not(.bold) {
    font-size: 14px;
}
/* small phone for login page */
@media (max-height: 720px){
    .question_text {
        margin-bottom: 20px;
    }
    .answer_box {
        height: 70px;
    }
    #fullName{
        height: 40px;
        font-size: 18px;
        margin-bottom: 10px;
    }
    #phoneNumber{
        height: 40px;
        font-size: 18px;
    }
    .baner{ top:6vh; }
    #intro_page2 p.bold:first-of-type {
        font-size: 14px;
    }
    #intro_page2 p:not(.bold) {
        font-size: 13px;
    }
    .intro_text_div {
        margin-top: 33vh !important;
            margin-bottom: 5px !important;
    }
    .baner {
        top: 6vh !important;
    }
    .header {
        top: 10px !important;}
    .next_btn_div{
        margin-top: 10px !important;
    }
}

/* Flex container */
.intro_section {
    transition: opacity 1s ease-in-out;
    opacity: 0;
    display: flex;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0px;
    height: 100vh;
    justify-content: space-evenly;
}


/* Header styling */
.header {
    position: fixed; /* Fixed position to keep the header at the top */
    top: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10; /* Ensure header stays above other elements */
    padding: 20px 0; /* Optional: add some spacing for the header */
}

.header img {
    max-width: 72px;  /* Resize logo for mobile */
    height: auto;
}

/* Banner section */
.baner {
    top: 11vh;
    position: fixed;
    z-index: 11; 
    width: 100%;
    margin-top: 20px; /* Ensure space below the fixed header */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Adjust height of the banner as needed */
    overflow: hidden; /* Ensure nothing overflows the container */
}

/* Styling for images in the banner */
.baner img {
    position: absolute; /* Fix the banner image in place */
    top: 50px;
    left: 50%;
    transform: translateX(-50%); /* Center it horizontally */
    z-index: 11; /* Ensure the image stays above the clouds */
    margin: 0;
    max-width: 230px;
    height: auto;
}
/* Cloud styling */
.baner .cloud {
    position: absolute;
    max-width: 200px;
    height: auto;
    animation-duration: 8s; /* Cloud animation duration */
    animation-timing-function: ease-in-out;
}
@media (min-width: 700px) {
    .baner .cloud {
        display: none; /* Hide clouds on larger screens */
    }
}
.baner .cloud.left {
    left: 0%; /* Start from left outside the view */
    animation: cloudAnimationLeft 8s ;
    transform: translateY(-30px) translateX(-70px);
}

.baner .cloud.right {
    right: 0%; /* Start from right outside the view */
    animation: cloudAnimationRight 8s ;
    transform: translateY(40px) translateX(90px);
}

/* Left Cloud Animation */
@keyframes cloudAnimationLeft {
    0% {
        transform: translateY(-30px) translateX(0);
    }
    50% {
        transform: translateY(-30px) translateX(-70px); /* Move left but not off-screen */
    }
    100% {
        transform: translateY(-30px) translateX(-70px); /* Stay at the left side */
    }
}

/* Right Cloud Animation */
@keyframes cloudAnimationRight {
    0% {
        transform: translateY(30px) translateX(0);
    }
    50% {
        transform: translateY(40px) translateX(90px); /* Move right but not off-screen */
    }
    100% {
        transform: translateY(40px) translateX(90px); /* Stay at the right side */
    }
}


/* Intro text section */
.intro_text_div {
    text-align: right;
    margin: 10px;
    margin-bottom: 20px;
    margin-top: 36vh;
    max-width: 370px;
    background-color: #15354E00;
}

.intro_text_div .intro_title {
    font-family: 'Modam', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 10px 0;
}

.intro_text_div .intro_text {
    font-family: 'Modam', sans-serif;
    font-size: 1rem;
    margin-bottom: 20px;
}

/* Anar images */
.anar_div {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 300px;
}

.anar_img {
    width: 60px;
    position: relative;
    transform: rotate(-10deg); /* Slight rotation */
    margin: -10px  10px;
}
.anar_div .left{
    margin-left: -30px !important;
    transform: rotate(24deg);
}
.anar_div .right{
        transform: translateY(-5px) translateX(-13px) rotate(-17deg);
}
/* Next button */
.next_btn_div {
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin-top: 20px;
    margin-bottom: 80px;
    width: 100%; /* Ensure the div takes full width */
}

.next_btn_div .continue_btn {
    font-family: 'Modam', sans-serif;
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #15354E; /* Adjust as per theme */
    color: #FFFFFF;
    border: 1px solid #6E8496;
    cursor: pointer;
    max-width: 360px;
    height: 60px;
    width: 95%; /* You can adjust the width of the button */
}

/* Footer styling */
.footer {
    font-family: 'Modam', sans-serif;
    position: fixed;
    bottom: 0 !important;
    width: 100% !important;
    background-color: #ffffff00 !important;
    color: rgb(0, 0, 0) !important;
    text-align: center !important;
    padding: 0px !important;
}

.footer .text {
    font-size: 12px !important;
}

.footer span {
    font-weight: bold !important;
    font-size: 13px !important;
}


/* ===== Story Section ===== */
.story {
  display: none;
  position: relative;
  width: 100%;
  height: 100vh;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

/* .story .legacy-img {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  width: 100%;
  max-width: 700px;
  margin: auto;
} */
.story .legacy-img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s ease-in-out;
  width: 100%;
  max-width: 700px;
}

/* 
.story .person-img {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1s ease-in-out;
  max-width: 100%;
  max-height: 100%;
  width: 25%;
  min-width: 90px;
  max-width: 170px;

}
.story .p1{
    top: 90px;
    left: 30%;
}
.story .p2{
    top: 234px;
    left: 30%;
}
.story .p3{
    top: 50%;
    right: 15%;
}
.story .p4{
    bottom: 10%;
    left: 30%;
} */
.story_photo_container_top {
  height: 50vh;
  display: flex;
  justify-content: space-between;
  padding: 10vh 5%;  /* Vertical padding of 10vh and horizontal padding of 5% */
  gap: 20px;  /* 10% gap between images */
  flex: 1;  /* Take up half of the page height */
  align-items: flex-end;
  flex-direction: column;
  padding-bottom: 10px;
  padding-top: 90px;
  margin-bottom: -15%;
}
.story_photo_container_top img {
  width: 25%;  /* Makes each image take up 45% of the container width */
  max-width: 150px;  /* Optional: cap image width for better appearance */
  min-width: 90px;   /* Optional: minimum width for small screen sizes */
  height: auto;
  margin-left: 20%;
  opacity: 0;
transition: opacity 1s ease-in-out;
}

/* Bottom container - images stick to left and right */
.story_photo_container_bottom {
  display: flex;
  justify-content: space-between;
  padding: 5% 5%;  /* Horizontal padding of 5% */
  gap: 20px;  /* 5% gap between images */
  align-items: center;
  flex-direction: column;
}

.story_photo_container_bottom img {
  width: 25%;  /* Makes each image take up 45% of the container width */
  max-width: 140px;  /* Optional: cap image width */
  min-width: 90px;   /* Optional: minimum width */
  height: auto;
  margin-bottom: 20px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.story_photo_container_bottom .p3{
    margin-right: -50%;
}

.story_photo_container_bottom .p4{
    margin-left: -50%;
    margin-bottom: 45px;
    margin-top : -30px
}
.animate-wipe {
  animation: wipeEffect 3s forwards;
}
@keyframes wipeEffect {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* For reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .story .legacy-img, .story .person-img {
    transition: none;
  }
}

/* ===== Loader Overlay ===== */
.loader {
  position: fixed;
  inset: 0;                    /* top/right/bottom/left: 0 */
  display: grid;
  place-items: center;         /* centers the image */
  background: #ffffffb2;
  backdrop-filter: blur(10px);
  z-index: 9999;
    
  /* Fade behavior */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 580ms ease, visibility 580ms ease;
}

.loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.loader img {
  width: min(80px, 25vw);
  height: auto;
  transform-origin: center;
  animation: loaderPulse 1000ms ease-in-out infinite;
  will-change: transform, filter;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); /* Simulate inner shadow */
}

/* Animation with scaling effect */
@keyframes loaderPulse {
  0% {
    transform: scale(0.99);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)); /* Slight shadow */
  }
  50% {
    transform: scale(1.01);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.6)); /* Larger shadow at peak scale */
  }
  100% {
    transform: scale(0.99);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)); /* Slight shadow */
  }
}


/* Smooth scale up/down loop */
@keyframes loaderPulse2  {
  0%   { transform: scale(0.95); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(0.95); }
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loader img { animation: none; }
}



/* Toast container (fixed at bottom, centered) */
#toast-root {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none; /* clicks pass through */
}

/* Single toast */
.toast {
  max-width: 90vw;
  background: rgba(255, 255, 255, 0.98);
  color: #222;
  border: 1px solid rgba(0,0,0,0.15); /* gray border */
  border-radius: 9999px;               /* super round */
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 12px 16px;
  font: 500 14px/1.2 'Modam', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* visible state */
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* optional darker theme */
.toast.dark {
  background: rgba(32, 32, 32, 0.98);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}