@font-face {
  font-family: 'B Nazanin';
  src: url('BNazanin.ttf') format('truetype');
}

div,p,body,td,tr,div,span,a,table {
  font-family: 'B Nazanin', sans-serif;
  font-size: 20px;
}

     /* Link Style */
        .button {
            background-color: #007bff; /* Blue background */
            color: white; /* White text */
            text-decoration: none; /* Remove underline */
            padding: 10px 20px;
            font-size: 18px;
            font-weight: bold;
            border: none; 
            border-radius: 20px; /* Rounded corners */
            transition: background-color 0.3s, transform 0.3s ease; /* Smooth transition */
        }

        /* Hover Effect */
        .button:hover {
            background-color: #0056b3; /* Darker blue on hover */
            transform: translateY(-3px); /* Slight lift effect */
        }

        /* Active (Clicked) Effect */
        .button:active {
            background-color: #003366; /* Even darker on click */
            transform: translateY(1px); /* Pressed down effect */
        }


     /* Link Style */
        .sub_button {
            background-color: #007bff; /* Blue background */
            color: white; /* White text */
            text-decoration: none; /* Remove underline */
            padding: 10px 20px;
            font-size: 18px;
            font-weight: bold;
            border: none; 
            border-radius: 20px; /* Rounded corners */
            transition: background-color 0.3s, transform 0.3s ease; /* Smooth transition */
        }

        /* Hover Effect */
        .sub_button:hover {
            background-color: #0056b3; /* Darker blue on hover */
            transform: translateY(-3px); /* Slight lift effect */
        }

        /* Active (Clicked) Effect */
        .sub_button:active {
            background-color: #003366; /* Even darker on click */
            transform: translateY(1px); /* Pressed down effect */
        }

/* استایل برای دکمه غیرفعال */
.sub_button:disabled {
  background-color: #cccccc; /* رنگ پس‌زمینه خاکی */
  color: #666666; /* رنگ متن خاکی */
  border: 1px solid #999999; /* حاشیه خاکی */
  cursor: not-allowed; /* نشانگر موس را به حالت "غیرمجاز" تغییر می‌دهد */
  opacity: 0.5; /* کمی شفاف‌تر می‌کند تا نشان دهد دکمه غیرفعال است */
}




#nobat_selected {
  background-color: #9ea1a3; /* Light green background */
  color: #faef16; /* Darker green for text */
  border: 1px solid #141414; /* Light green border */
  padding: 20px;
  margin: 15px 0;
  border-radius: 10px; /* Rounded corners */
 #box-shadow: 0 4px 8px rgba(255, 255, 0, 0.1);
  font-size: 20px; /* Font size for the text */
  font-weight:bold;
}


.step {

font-size:22px;
color:blue;


}



#message {
 # background-color: #d4f4dd; /* Light green background */
 # color: #2e8b57; /* Darker green for text */
  #border: 1px solid #a3d9a5; /* Light green border */
  padding: 20px;
  margin: 15px 0;
  border-radius: 10px; /* Rounded corners */
 # box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  font-size: 20px; /* Font size for the text */
}


#matab_box {
  background-color: #d4f4dd; /* Light green background */
  color: #2e8b57; /* Darker green for text */
  border: 1px solid #a3d9a5; /* Light green border */
  padding: 20px;
  margin: 15px 0;
  border-radius: 10px; /* Rounded corners */
 # box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  font-size: 18px; /* Font size for the text */
}

#matab_box .title {
  font-weight: bold;
  font-size: 22px;
}

#matab_box .content {
  margin-top: 10px;
   font-size: 20px;
}

#matab_box .message {
  margin-top: 10px;
  color:red;
   font-weight: bold;
   font-size: 20px;
}


#dr_box {
  background-color: #faf7a5; /* Light yellow background */
  color: #5414de; /* Darker green for text */
  border: 1px solid #c9c316; /* Light green border */
  padding: 20px;
  margin: 15px 0;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 10px rgba(255, 223, 0, 0.6); /* Yellow shadow */
  font-size: 16px; /* Font size for the text */
}

#dr_box .title {
  font-weight: bold;
  font-size: 18px;
}

#dr_box .content {
  margin-top: 10px;
}


.button-container {
      display: flex; /* نمایش دکمه‌ها در کنار هم */
      gap: 10px; /* فاصله بین دکمه‌ها */
      overflow-x: hidden; 
    }

    .custom-button {
      padding: 10px 20px;
      font-size: 18px;
      border-radius: 5px;
      border: 1px solid #faed37; /* رنگ مرز به زرد کم‌رنگ */
      background-color: #f7f194; /* رنگ پس‌زمینه زرد کم‌رنگ */
      color: #241ed4; /* رنگ متن آبی */
      cursor: pointer;
      transition: background-color 0.3s, opacity 0.3s;
    }

.btn-title {
  display: block; /* Makes the title text take up the full width */
  font-size: 22px; /* Larger font size for the title */
  font-weight: bold; /* Makes the title bold */
}

/* Styling for the subtitle text inside the button */
.btn-subtitle {
  display: block; /* Makes the subtitle text take up the full width */
  font-size: 20px; /* Smaller font size for the subtitle */
  font-weight: normal; /* Lighter weight for the subtitle */
  margin-top: 4px; /* Adds a little space between the title and subtitle */
  opacity: 0.8; /* Slightly faded subtitle */
}


    .custom-button:hover {
      background-color: #faed37; /* تغییر رنگ پس‌زمینه هنگام هاور */
    }

    .custom-button.selected {
      background-color: #faed37; /* رنگ انتخاب شده (زرد پررنگ‌تر) */
      opacity: 1; /* دکمه انتخاب شده پررنگ‌تر است */
    }

    .custom-button.deselected {
      opacity: 0.5; /* دکمه‌های انتخاب نشده کم‌رنگ‌تر هستند */
    }
    
    
    
    
 
    
    
     /* Link Style */
        a.beautiful-link {
            background-color: #007bff; /* Blue background */
            color: white; /* White text */
            text-decoration: none; /* Remove underline */
            padding: 5px 20px;
            margin:5px 10px;
            display: flex;
            justify-content: center;  /* Centers horizontally */
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            border-radius: 20px; /* Rounded corners */
            transition: background-color 0.3s, transform 0.3s ease; /* Smooth transition */
        }

        /* Hover Effect */
        a.beautiful-link:hover {
            background-color: #0056b3; /* Darker blue on hover */
            transform: translateY(-3px); /* Slight lift effect */
        }

        /* Active (Clicked) Effect */
        a.beautiful-link:active {
            background-color: #003366; /* Even darker on click */
            transform: translateY(1px); /* Pressed down effect */
        }
        
     
     
     
        
    
.table-container {
  width: 100%;
  overflow-x: auto; /* اسکرول افقی در صورت لزوم */
  -webkit-overflow-scrolling: touch; /* اسکرول نرم برای دستگاه‌های موبایل */
  box-sizing: border-box; /* برای این که padding و margin در اندازه‌ها لحاظ شوند */
} 
    
    table {
    width: 95%;
  //  min-width: 500px;
   // table-layout: fixed;
    margin: 50px auto;
    border-collapse: collapse;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 500px) {
  th, td {
    font-size: 16px; /* تغییر اندازه فونت برای صفحه‌های کوچک */
    padding: 8px; /* کاهش padding برای صرفه‌جویی در فضا */
  }
}


/* Table Header */
thead {
    background-color: #4CAF50;
    color: white;
}

th {
    padding: 15px;
    text-align: right;
}

/* Table Body */
tbody tr {
    background-color: #f9f9f9;
}

tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

td {
    padding: 12px;
    text-align: right;
}

/* Hover effect */
tbody tr:hover {
    background-color: #e0f7fa;
    cursor: pointer;
}

/* Borders */
th, td {
    border: 1px solid #ddd;
}

/* Rounded corners for the table */
table {
    border-radius: 8px;
    overflow: hidden;
}    
        
        
      
      
      
      
      
      
      
      
      
      
      
      
.radio-group {

    display: flex;
  //  flex-direction: column;
          flex-wrap: wrap;
  gap: 20px; /* space between radio buttons */
}


.radio-group label {
  width: 32%; /* To ensure two columns fit within the container */
}


/* Style for the radio container */
/*.radio-container {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    padding-left: 40px; 
    user-select: none;

}
*/

/* Hide the default radio input */
.radio-input {
  //  display: none;
}

/* Custom radio circle */
.radio-circle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #4CAF50;
    border-radius: 50%;
    background-color: white;
    transition: all 0.3s ease;
}

/* When radio button is checked */
.radio-input:checked + .radio-circle {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

/* Hover effect */
.radio-container:hover .radio-circle {
    border-color: #00796b;
}

/* Adding a checked effect */
.radio-input:checked + .radio-circle::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Optional: Add focus effect for accessibility */
.radio-input:focus + .radio-circle {
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5);
}  
     
     
     
     
     
     
     
     
     
     input[type="text"] {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
}

/* Focus effect when input field is selected */
input[type="text"]:focus {
    border-color: #4c8bf5;
    box-shadow: 0 0 10px rgba(76, 139, 245, 0.3);
    background-color: #f1f7ff;
}

/* Placeholder text styling */
input[type="text"]::placeholder {
    color: #aaa;
    font-style: italic;
}

/* Subtle hover effect */
input[type="text"]:hover {
    border-color: #7c9cc4;
}   
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      /* Styling for the select dropdown */
select {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    appearance: none; /* Remove default dropdown arrow */
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}

/* Styling the select dropdown on focus */
select:focus {
    border-color: #4c8bf5;
    outline: none;
    box-shadow: 0 0 10px rgba(76, 139, 245, 0.3);
    background-color: #f1f7ff;
}

/* Hover effect on the select element */
select:hover {
    border-color: #7c9cc4;
}

/* Custom arrow for the select dropdown */
select::-ms-expand {
    display: none; /* Hide default dropdown arrow in IE */
}

/* Styling the dropdown options */
option {
    padding: 10px;
    font-size: 16px;
}

/* Custom arrow styling for modern browsers using a pseudo-element */
.select-container::after {
    content: '▼';
    font-size: 18px;
    color: #ccc;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    pointer-events: none; /* Ensure the arrow doesn't interfere with select interaction */
}  




   /* افکت Overlay */
    .overlay {
      display: none; /* ابتدا پنهان است */
      position: fixed; /* قرار گرفتن در وسط صفحه */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* رنگ تیره و شفاف برای پوشش */
      z-index: 1000; /* از همه اجزا جلوتر قرار گیرد */
      display: flex;
      justify-content: center;
      align-items: center;
    }


   /* افکت Overlay */
    .overlay2 {
      display: none; /* ابتدا پنهان است */
      position: fixed; /* قرار گرفتن در وسط صفحه */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* رنگ تیره و شفاف برای پوشش */
      z-index: 1000; /* از همه اجزا جلوتر قرار گیرد */
      display: flex;
      justify-content: center;
      align-items: center;
    }


  /* افکت Overlay */
    .overlay3 {
      display: none; /* ابتدا پنهان است */
      position: fixed; /* قرار گرفتن در وسط صفحه */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* رنگ تیره و شفاف برای پوشش */
      z-index: 1000; /* از همه اجزا جلوتر قرار گیرد */
      display: flex;
      justify-content: center;
      align-items: center;
    }
   

   .overlay3   label {
      //display: block;
      //margin-bottom: 6px;
      font-weight: bold;
    }

    .overlay3  input[type="text"],
    .overlay3  input[type="tel"],
   .overlay3   textarea {
      width: 90%;
      padding: 5px;
  //    margin-bottom: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 14px;
    }

    .overlay3  textarea {
   //   resize: vertical;
   //   height: 80px;
    }

   .overlay3   button {
      width: 100%;
      padding: 10px;
      background-color: #007bff;
      border: none;
      color: #fff;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

   .overlay3   button:hover {
      background-color: #0056b3;
    }

 
    
    /* استایل باکس سوال */
    .question-box {
      background-color: #fff;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* سایه برای باکس */
      text-align: center;
      width: 350px;
      box-sizing: border-box;
    }

    .question-box h2 {
      color: #333;
      font-size: 20px;
      margin-bottom: 20px;
    }
    
    
    



    .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 15px;
        }

        .footer a {
            color: #4CAF50;
            text-decoration: none;
            margin: 0 10px;
        }

        .footer a:hover {
            text-decoration: underline;
        }