@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
  font-family: 'GE Dinar One';
  src: url('/fonts/GE-Dinar-One-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  /* background-color: #f5f5f5; */
}

h3{
  margin: 0;
  padding: 0;
  color: #1D2130;
  font-size: 24px;
  font-weight: 600;
}

.submit-button {
    display: inline-flex;
    align-items: center; /* vertically center icon + text */
    justify-content: center; /* center content horizontally */
    gap: 8px; /* spacing between icon and text */
    padding: 8px 14px;
    font-size: 16px;
    line-height: 1; /* prevents text from sitting lower */
    cursor: pointer;
}

    .submit-button .button-icon {
        width: 20px;
        height: 20px;
        display: block; /* removes inline baseline alignment issues */
    }
.form-container {
    max-width: 400px; /* keeps it narrow on large screens */
    margin: 0 auto; /* center it */
    padding: 15px;
}

.form-label {
    font-size: 18px;
    margin-bottom: 8px;
    display: block;
    font-weight: bold;
    text-align: right; /* since Arabic */
}

.form-select {
    font-size: 16px;
    font-weight: bold;
    width: 100%; /* full width inside container */
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 12px; /* spacing between dropdowns */
    box-sizing: border-box;
}

.form-button {
    font-size: 16px;
    font-weight: bold;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background-color: #0f4c81; /* CSB blue */
    color: white;
    cursor: pointer;
    width: 100%;
}

    .form-button:hover {
        background-color: #0c3a63;
    }

/* Mobile specific */
@media (max-width: 480px) {
    .form-container {
        max-width: 100%;
        padding: 10px;
    }

    .form-select, .form-button {
        font-size: 15px;
    }
}

.table-container {
    width: 100%;
    overflow-x: auto; /* graceful fallback */
    -webkit-overflow-scrolling: touch;
}

/* Base table look */
.r-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

    .r-table th, .r-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #e5e7eb;
        vertical-align: middle;
        text-align: center; /* Arabic RTL */
    }

    .r-table thead th {
        background: #08A650;
        font-weight: 700;
    }

/* Mobile stacked layout */
@media (max-width: 640px) {
    .r-table thead {
        display: none;
    }

    .r-table, .r-table tbody, .r-table tr, .r-table td {
        display: block;
        width: 100%;
    }

        .r-table tr {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            margin-bottom: 12px;
            box-shadow: 0 1px 2px rgba(0,0,0,.03);
        }

        .r-table td {
            border: none;
            border-bottom: 1px dashed #eef2f7;
            position: relative;
            padding: 10px 12px 10px 120px; /* leave space for label (RTL adjusted below) */
        }
            /* Label shown before each cell value (from data-label) */
            .r-table td::before {
                content: attr(data-label);
                position: absolute;
                top: 10px;
                right: 12px; /* RTL label position */
                font-weight: 700;
                color: #374151;
                min-width: 100px;
                white-space: nowrap;
            }
            /* Last cell line has no bottom border */
            .r-table td:last-child {
                border-bottom: none;
            }
}

/* Optional: nicer link styling */
.r-table a {
    text-decoration: none;
    color: #0f4c81;
    font-weight: 600;
}

    .r-table a:hover {
        text-decoration: underline;
    }

.page-highlight {
    background: #fff59d;
    padding: 0 .05em;
}

.page-highlight-current {
    background: #ffca28;
    outline: 2px solid #ffca28;
}

/* NEW: Header Tabs and Search Section */
.header-tabs-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0;
  border-bottom: 1px solid #DADADA;
  margin: 20px;
  margin-top: 0px;
}

.tabs-container-header {
  display: flex;
  gap: 70px;
}

.tab-header {
  font-size: 24px;
  padding: 10px 0;
  cursor: pointer;
}


.tab-header.active {
  border-bottom: 4px solid #2085CC;
  color:#2085CC;
  font-weight: 700;
}

.search-container-header {
  width: 260px;
  border-radius: 40px;
  height: 46px;
  background-color: #F5F5FA;
  box-shadow: 5px 5px 10px 0px #2085CC33 inset;
  position: relative;
  margin-bottom: 10px;
}

.search-input-header {
  padding: 12px 35px 12px 40px;
  border: none;
  border-radius: 6px;
  font-size: 20px;
  background-color: transparent;
  width: 250px;
  direction: rtl;
  text-align: right;
  outline: none;
  font-family: 'Product Sans' ;
  font-weight: 300;
}

.search-icon-container{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* box-shadow: -5px -5px 10px 0px #FFFFFF; */
box-shadow: 5px 5px 10px 0px #AAAACC80;
border-radius: 32px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;

}

.search-icon-container .search-icon-header {

}

.search-input-header::placeholder {
  color: #999;
}
/* END NEW: Header Tabs and Search Section */

/* Job Section Styles */
.job-section {
  min-height: 100vh;
}
.hero {
  background: url('/images/opinions-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 25px 20px 100px;
  text-align: center;
  color: white;
  position: relative;
}

/*.hadi.job-hero {
  background: linear-gradient(rgba(11, 120, 195, 0.1), rgba(32, 133, 204, 0.1)), 
              url('/images/job-posting-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 20px 120px;
  text-align: center;
  color: white;
  position: relative;
}*/

.job-hero {
    background: linear-gradient(rgba(11, 120, 195, 0), rgba(32, 133, 204, 0)), url('/images/job-posting-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 20px 120px;
    text-align: center;
    color: white;
}

.job-hero3 {
    background: url('/images/FirstCat.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 20px 120px;
    text-align: center;
    color: white;
}

.job-hero4 {
    background: url('/images/Transactions1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 20px 120px;
    text-align: center;
    color: white;
}

.job-hero5 {
    background: url('/images/opinions-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 20px 120px;
    text-align: center;
    color: white;
}

.job-hero6 {
    background: linear-gradient(rgba(20, 77, 121, 0.8), rgba(20, 77, 121, 0.8)), url('/images/DateBg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 20px 120px;
    text-align: center;
    color: white;
}

.job2-hero {
    background:  url('/images/Competitions2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 20px 120px;
    text-align: center;
    color: white;
}
    .job2-hero h1 {
        font-size: clamp(1.5rem, 5vw, 2.5rem); /* scales with screen width */
        margin: 0;
    }
.breadcrumb-container {
    position: absolute;
    top: 215px;
    right: 90px; 
    font-size: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    direction: rtl; 
}


.competition-hero{
  background: linear-gradient(rgba(11, 120, 195, 0.6), rgba(11, 120, 195, 0.6)), url('/images/opinions-bg.jpg');
}
.competition2-hero{
    background: linear-gradient(rgba(11, 120, 195, 0.6), rgba(11, 120, 195, 0.6)), url('/images/Competitions2.jpg');
}

.competition3-hero {
    background: url('/images/opinions-bg.jpg');
}

.hero-tint {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

    .hero-tint::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(23, 98, 152, 0.6);
        z-index: 0;
        pointer-events: none;
    }

.hero-tint > * {
  position: relative;
  z-index: 1;
}

.question-hero {
    background: linear-gradient(rgba(15, 76, 129, 0.6), rgba(15, 76, 129, 0.6)), url('/images/Question.jpg');
    background-size: cover;
    background-position: center;
}
.question-tint {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

    .question-tint::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(18, 74, 114, 0.6);
        z-index: 0;
        pointer-events: none;
    }

    .question-tint > * {
        position: relative;
        z-index: 1;
    }

.breadcrumb {
  font-size: 16px;
  color: #ddd;
  margin-bottom: 20px;
  position: absolute;
  right: 150px;
  top: 50px;
  font-family: 'GE Dinar One';
}

.breadcrumb-link {
    font-size: 16px;
    color: #eeeeee;
    text-decoration: none;
    font-family: 'GE Dinar One';
   
}

    .breadcrumb-link:hover {
        color:#eeeeee;
        text-decoration: underline;
    }
.page-content{
  width: 85%;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 3.45px 3.45px 30.56px 5.17px #0000001A;
  border-radius: 5px;
  padding: 20px;
  
}

.job-title {
  font-size: 36px;
  font-weight: bold;
  margin: 0;
  color: white;
  font-family: 'GE Dinar One';
}

/* Job List Container */
.job-list {
  padding: 0px 0px;
}

/* Job Item Styles */
.job-item {
  background-color: white;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  overflow: initial;
}

.job-item-top{
  background-color: unset;
  margin-bottom: unset;
  border-radius: unset;
  box-shadow: unset
}

.job-item:hover {
  transform: translateY(-2px);
}


.arrow-icon {
  width: 52px;
  height: 52px;
  margin-left: 12px;
  transition: transform 0.3s ease;
}

.job-text {
  font-size: 22px;
  font-weight: 600;
  color: black;
}

.job-header-actions{
  background-color: #F3F6FB;
  padding-top: 10px;
  padding-bottom: 40px;
  padding-right: 50px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}

.job-header-top {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  background-color: #F3F6FB;
  cursor: pointer;
  
}

.job-header-top .arrow-icon{
  width: 20px;
  height: 20px;
}

.job-item-top .job-header-top{
  background-color: unset;
}


.job-item-top .job-header-top:hover{
  background-color: unset;
}

/* Job Content */
.job-content {
  max-height: 0;
  opacity: 0;
  overflow: initial;
  transition: all 0.3s ease;
  
}
.job-content h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #000;
}

.job-content ul {
  padding-right: 20px;
  list-style-type: disc;
}

.transactions-section {
  direction: rtl;
}

.transactions-hero {
  background: url("/images/incoming-bg.svg") center center / cover no-repeat;
  padding: 100px 20px 50px;
  text-align: center;
  color: white;
  font-family: GE Dinar One;
  z-index: 2;
}

.transactions-form-card {
  background-color: white;
  max-width: 700px;
  margin: 50px auto 40px;
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.transactions-form-card .form-group {
  display: flex;
  flex-direction: column;
}

/* .transactions-form-card .form-group label {
  margin-bottom: 8px;
  font-weight: bold;
  color: #444;
  font-size: 14px;
}

.transactions-form-card .form-group input,
.transactions-form-card .form-group select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
} */

.submit-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  float: left;
}

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

.transactions-result {
  margin-top: 30px;
  font-size: 16px;
  margin-right: 23%;
}

.transactions-results-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.transactions-results-title p {
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.transactions-results-title img {
  width: 16px;
  height: 17px;
}

.transactions-update {
  margin-top: 5px;
  font-size: 13px;
}

.opinions-hero {
  background: url("/images/opinions-bg.jpg") center center / cover no-repeat;
  padding: 80px 20px 40px;
  text-align: center;
  color: white;
}

.opinions-title {
  font-size: 28px;
}

.opinions-form-card {
  background: white;
  padding: 30px;
  margin: 40px auto 40px;
  border-radius: 10px;
  max-width: 1000px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.opinions-form .form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.opinions-form .form-group, .transactions-form-card .form-group {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.radio-group label {
  display: block;
  font-weight: normal;
}

.date-range {
  display: flex;
}


.opinions-title {
  font-size: 32px;
  font-weight: bold;
  margin: 0;
  font-family: 'GE Dinar One';
}

.opinions-form-card {
  background: white;
  padding: 25px 30px;
  margin: -75px 8% 40px;
  border-radius: 8px;
  max-width: 1100px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.opinions-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 15px;
}

.form-row-2columns{
  grid-template-columns: 1fr 1fr !important;
}

.form-row-2columns .form-group .radio-choices{
  display: flex;
  gap: 10px;
  label{
    display: flex;
    flex-direction: row-reverse;
  }
}

/* Selected (checked) state */
input[type="radio"]:checked {
  border-color: red; /* blue border */
}

.opinions-form .form-group, .transactions-form-card .form-group {
  display: flex;
  flex-direction: column;
}
.opinions-form .form-group-center, .transactions-form-card .form-group-center {
  align-items: center;
}

.opinions-form .form-group label, .transactions-form-card .form-group label {
  margin-bottom: 5px;
  font-weight: 400;
  color: #333;
  font-size: 13px;
}

.transactions-form-card .form-group label{
  font-size: 15px;
  font-weight: 400;
}

.opinions-form .form-group input,
.opinions-form .form-group select,
.transactions-form-card .form-group input,
.transactions-form-card .form-group select,
.type-dropdown {
  padding: 8px 12px;
  height: unset;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background-color: #f9f9f9;
  transition: border-color 0.3s ease;
  border: none;
  width: 75%;
}

.opinions-form .form-group .small-input, .transactions-form-card .form-group .small-input{
  width: 8.5vw;
  max-width: 8.5vw;
  font-size: 9px !important;
}

.form-group.wrong-input{
  input{
    background-color: #FEF1F2;
    border-bottom: 2px solid #E02D3C;
  }
  .label-icon{
    position: absolute;
    right: 40%;
    bottom: 32.5px;
  }
} 

.opinions-form .form-group input:focus,
.opinions-form .form-group select:focus,
.transactions-form-card .form-group input:focus,
.transactions-form-card .form-group select:focus,
.opinions-form .form-group textarea:focus,
.transactions-form-card .form-group textarea:focus,
.type-dropdown:focus {
  outline: none;
  border-bottom: 2px solid #2085CC;
}

.radio-container {
  margin-top: 20px;
}

.radio-horizontal {
  display: flex;
  gap: 25px;
  margin-bottom: 8px;
}

.radio-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  position: relative;
}

.radio-item input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #E0E0E0;
  border-radius: 50%;
  margin-left: 6px;
  margin-right: 0;
  position: relative;
  cursor: pointer;
  background-color: #E0E0E0;
  padding: 0;
}

.radio-item input[type="radio"]:checked {
  background-color: #2085CC;
  border-color: #2085CC;
}
.radio-item input[type="radio"]:hover{
  border: 1px solid #2085CC;
}

.radio-item input[type="radio"]:checked::after, .radio-item input[type="radio"]:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="white"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.radio-item input[type="radio"]:hover::after{
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="%232085CC"/></svg>');
}
.radio-item input[type="radio"]:checked:hover::after{
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="white"/></svg>');
}

.radio-item span {
  color: #555;
}

.date-range {
  display: flex;
  align-items: center;
}

.date-input-with-icon {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  transition: border-color 0.3s ease;
  width: 8.5vw;
  max-width: 8.5vw;
}

.date-input-with-icon:focus-within {
  background-color: white;
  border-bottom: 2px solid #2085CC;
}

.date-hidden {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  padding-left: 25px !important;
  font-size: 13px !important;
}

.date-picker-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.calendar-icon-clickable, .calendar-non-clickable {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.6;
  cursor: pointer;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.calendar-non-clickable {
  left: 90px;
  top: 70%;
}

.calendar-icon-clickable:hover {
  opacity: 1;
}

.number-range {
  display: flex;
}

.number-range input {
  flex: 1;
}

.type-dropdown {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 13px;
  background-color: #F9F9F9;
  appearance: none;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1L6 6L11 1" stroke="%23666" stroke-width="1.5" fill="none"/></svg>');
  background-repeat: no-repeat;
  background-position: left 10px center;
  padding-left: 30px;
}

.submit-button {
  width: 183px;
  height: 40px;
  background-color: #2085CC;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
  box-shadow: 0px 4px 4px 0px #00000040;
  font-size: 22px;
  font-weight: 500;
}

.submit-button:hover {
  background-color: #1a6ba6;
}

.opinions-results-table {
  padding: 0 10%;
  overflow-x: auto;
  margin-bottom: 30px;
  background-color: white;
  padding-top: 50px;
}

.opinions-results-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  border-radius: 0 !important;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.opinions-results-table th,
.opinions-results-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  vertical-align: middle;
  background-color: #F1F3F9;
}

.opinions-results-table th {
  background-color: #4a90e2;
  color: white;
  font-weight: bold;
  font-size: 12px;
  white-space: nowrap;
  text-align: right;
}
.opinions-results-table th.header-border-left{
  border-left: 2px solid white;
}
.opinions-results-table .body-border-left{
  border-left: 2px solid white;
}

.opinions-results-table tbody td{
  font-family: 'Inter';
  text-align: right;
}

.opinions-results-table tbody tr:hover {
  background-color: #f8f9fa;
}

.opinions-results-table tbody tr{
  border-bottom: 2px solid white;
}

.opinions-results-table tbody tr:last-child td {
  border-bottom: none;
}

.action-icon {
  width: 42px;
  height: 42px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.action-icon:hover {
  opacity: 1;
}

.pagination {
  text-align: left;
  margin: 30px 0 50px;
  margin-left: 10%;
  background-color: white;
}

.pagination ul {
  list-style: none;
  display: inline-flex;
  gap: 5px;
  padding: 0;
  margin: 0;
}

.pagination li {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  min-width: 38px;
  min-height: 38px;
  background-color: white;
  border: 1px solid #f1f1f1;
  border-radius: 100vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination li.pagination-arrow{
  font-size:  24px;
  font-weight: 300;
}

.pagination li:hover:not(.active) {
  background-color: #e9ecef;
}

.pagination .active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

/* Responsive Design */
@media (max-width: 768px) {
  .opinions-form .form-row {
    grid-template-columns: 1fr;
  }
  
  .opinions-form-card {
    margin: -20px 10px 20px;
    padding: 20px;
  }
  
  .opinions-results-table {
    padding: 0 10px;
  }
  
  .opinions-results-table th,
  .opinions-results-table td {
    padding: 8px 4px;
    font-size: 11px;
  }
  
  .pagination ul {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .opinions-title {
    font-size: 24px;
  }
  
  .opinions-hero {
    padding: 30px 10px 50px;
  }
  
  .opinions-form-card {
    margin: -15px 5px 15px;
    padding: 15px;
  }
  
  .radio-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


.job-item.open .job-content {
  max-height: none;
  opacity: 1;
  padding: 0px 0;
  overflow: initial;
  padding-right: 25px;
}

.job-item-top .job-content{
  padding-right: 0;
}

/* Job Cards */
.job-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.job-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.job-card img:first-child {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  display: block;
}

.job-card-image-wrapper {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.job-card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.job-card-tint {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(11, 120, 195, 0.6), rgba(32, 133, 204, 0.6));
  z-index: 2;
  pointer-events: none;
}

.card-content {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.card-text {
  flex: 1;
  text-align: right;
}

.card-text h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.card-text p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Date Cards */
.job-dates {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.date-card {
  flex: 1;
  background-color: #F7F8FA;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 4px solid transparent;
  box-shadow: 0px 8px 8px 0px #00000040;
}

.date-card.green {
  border-bottom-color: #4caf50;
}
.date-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 30px;
}

.date-meta-text{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

}

.date-meta-text > span {
  text-align: right;
  font-weight: 700;
  font-size: 24px;
  color: #1D2130
}



.date-card.red {
  border-bottom-color: #c43c3c;
}

.date-box{
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  background-color: #EBEEF3;
  padding: 20px;
}
.date-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: white;
  border-radius: 8px;
}
.date-container .month{
  background-color: #34A853;
  color: white;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.date-card.red .date-container .month{
  background-color: #D51A3D;
}
.date-container .date{
  font-size: 48px;
  font-weight: 700;
  color: #1D2130;
  margin: 0 15px;
  border-bottom: 1px dotted #1D2130;
}
.date-container .day{
  font-size: 16px;
  font-weight: 300;
  padding: 0 15px;
  padding-bottom: 8px;
  color: #1D2130;
}

.date-meta {
  flex: 1;
  text-align: right;
}

.date-meta > span {
  font-size: 14px;
  color: #333;
  display: block;
  margin-bottom: 10px;
}
.calendar-btn-container{
  position: relative;
}

.calendar-btn {
  padding: 6px 12px;
  font-size: 16px;
  background-color: white;
  border: none;
  cursor: pointer;
  color: #1D2130;
  box-shadow: 0px 4px 4px 0px #00000040;
  width: 130px;
  margin-top: 20px;
  float: left;
  align-self: end;
  margin-left: 50px;
}
.softwares-list{
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 50px;
  width: 130px;
  background-color: white;
  top: 50px;
  box-shadow: 0px 4px 4px 0px #00000040;
  display: none;
}

.calendar-btn.open-calendar{
  background-color: #888B96;
  color: white;
}

.calendar-btn.open-calendar + .softwares-list{
  display: block;
}

.softwares-list .item-list{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  padding: 7px 5px;
  cursor: pointer;
}
.softwares-list .item-list p{
  padding: 0;
  margin: 0;
  font-size: 14px;
}


/* Subscribe Section */
.subscribe-row {
  margin-top: 30px;
  background: #EBEEF366;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 30px;
  position: relative;
}

.subscribe-icon-container{
  background-color: #EBEEF3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.subscribe-icon {
  width: 90px;
  height: 90px;
}

.subscribe-button {
  background-color: #888B96;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

.subscribe-button:hover {
  background-color: #555;
}

.subscribe-note {
  flex: 1;
  font-size: 18px;
  text-align: right;
  line-height: 1.4;
  color: #1D213080;
  max-width: 35%;
}


.job-content{
  background-color: #F3F6FB;
}
.job-item-top .job-content{
  background-color: unset;
}
/* Task Lists */
.job-content h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 20px;
}

.job-content ul {
  padding-right: 20px;
  list-style-type: disc;
  margin: 0;
  font-size: 19px;
}

.job-content li {
  margin-bottom: 8px;
  color: #666;
  line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 768px) {
  .job-cards {
    flex-direction: column;
  }
  
  .job-dates {
    flex-direction: column;
  }
  
  .job-list {
    padding: 20px 10px;
  }
  
  .job-header-top {
    padding: 15px 20px;
  }
  
  .job-item.open .job-content {
    padding: 15px 20px;
  }
  
  .subscribe-row {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .subscribe-note {
    text-align: center;
  }
  
  .header-tabs-section {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .search-input-header {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .job-title {
    font-size: 24px;
  }
  
  .job-hero {
    padding: 30px 10px 60px;
  }
  
  .job-text {
    font-size: 16px;
  }
  
  .card-content {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .card-text {
    text-align: center;
  }
  
  .date-box {
    min-width: 60px;
    padding: 10px;
  }
  
  .date-container .date {
    font-size: 20px;
  }
  
  .tabs-container-header {
    width: 100%;
  }
  
  .tab-header {
    flex: 1;
    text-align: center;
  }
}

/* EXACT MATCH FOR SCREENSHOT - REAL ARCHITECTURAL BACKGROUND */

/* Header with actual architectural photo background like screenshot */
.transactions-hero {
  background: url("/images/information-image.jpg") center center / cover no-repeat;

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 50px 20px 70px !important;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
  border: none !important;
}

/* Remove the fake CSS decorative elements */
.decorative-border-left,
.decorative-border-right {
  display: none !important;
}

.transactions-title {
  font-size: 36px;
  font-weight: bold;
  margin: 0;
  color: white;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.transactions-bg, .opinions-bg {
  position: relative;
}

.transactions-bg::before, .opinions-bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0; /* RTL layout — right side */
  width: 100%;
  height: 60%;
  background-color: #FFFFFF; /* your desired grey */
  z-index: 0;
}

.transactions-form-card, .opinions-form-card {
  position: relative;
  z-index: 2; /* ensures it appears above the background */
}

/* Override form card to match screenshot positioning and styling */
.transactions-form-card{
  background-color: white !important;
  max-width: 700px !important;
  margin: -50px auto 40px !important;
  padding: 50px 40px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  position: relative;
  z-index: 10;
}

/* Results section styling to match screenshot */
.result-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 5px;
}

.bookmark-icon {
  font-size: 18px;
  color: #4caf50;
}

/* Responsive updates for new transactions styles */
@media (max-width: 768px) {
  .pattern-element {
    width: 100px;
    height: 100px;
  }
  
  .pattern-element.left {
    left: 20px;
  }
  
  .pattern-element.right {
    right: 20px;
  }
  
  .transactions-hero {
    padding: 40px 15px 60px !important;
  }
  
  .transactions-title {
    font-size: 28px;
  }
  
  .transactions-form-card {
    margin: -30px 15px 30px !important;
    padding: 25px !important;
  }
}

@media (max-width: 480px) {
  .pattern-element {
    width: 80px;
    height: 80px;
  }
  
  .pattern-element.left {
    left: 10px;
  }
  
  .pattern-element.right {
    right: 10px;
  }
  
  .transactions-hero {
    padding: 30px 10px 50px !important;
  }
  
  .transactions-title {
    font-size: 24px;
  }
  
  .transactions-form-card {
    margin: -20px 10px 20px !important;
    padding: 20px !important;
  }
  /* ADDITIONAL CSS TO BE ADDED TO YOUR EXISTING style.css FILE */
}
/* Transaction Cards Grid Layout - Enhanced */
/* EXACT CSS TO MATCH THE SCREENSHOT CARDS */

/* 1. CARD BACKGROUND - Light blue/purple tint like screenshot */
.transaction-card {
  background-color: #F0F2F8; /* Exact light blue-purple background */
  border-radius: 6px; /* Smaller border radius */
  padding: 16px 20px; /* Reduced padding for compact look */
  box-shadow: none; /* Remove shadow completely */
  transition: transform 0.2s ease;
  cursor: pointer;
  border: none; /* Remove border */
  min-height: 65px; /* Much smaller height */
  display: flex;
  align-items: center;
  margin-bottom: 8px; /* Small gap between cards */
}

.transaction-card:hover {
  transform: translateY(-1px);
  background-color: #E8EBF3; /* Slightly darker on hover */
}

/* 2. GRID LAYOUT - Tighter spacing */
.transactions-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px; /* Very small gap like screenshot */
  max-width: 70%; /* Narrower width */
  margin: 0 auto;
  padding: 20px 30px; /* Much less padding */
  position: relative;
  z-index: 2;
}

/* 3. CARD CONTENT - Proper spacing */
.card-content-transaction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: right;
  direction: rtl;
  gap: 12px;
}

/* 4. TEXT STYLING - Match screenshot exactly */
.transaction-text {
  font-size: 20px; /* Smaller text */
  color: #2D3748; /* Darker text color */
  font-weight: 500;
  line-height: 1.3;
  flex: 1;
  text-align: right;
}

/* 5. ICONS - Much smaller like screenshot */
.action-icons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.action-icon {
  width: 45px !important; /* Very small icons */
  height: 45px !important;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.action-icon:hover {
  opacity: 1;
}

/* 6. BACKGROUND SECTION - Pure white */
.transactions-bg {
  background-color: #FFFFFF;
  min-height: 100vh;
  position: relative;
  padding-top: 0; /* Remove extra padding */
}

/* 7. HERO SECTION - Reduce size */
.transactions-hero {
  background: linear-gradient(rgba(32, 133, 204, 0.5), rgba(32, 133, 204, 0.5)), 
              url("/images/information-image.jpg") center center / cover no-repeat;
  padding: 60px 20px 80px !important; /* Smaller hero */
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

.transactions-title {
  font-size: 32px; /* Smaller title */
  font-weight: bold;
  margin: 0;
  color: white;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'GE Dinar One', sans-serif;
}

/* 8. RESPONSIVE - Maintain proportions */
@media (max-width: 768px) {
  .transactions-cards-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 15px 20px;
    max-width: 400px;
  }
  
  .transaction-card {
    padding: 14px 18px;
    min-height: 44px;
  }
  
  .transaction-text {
    font-size: 13px;
  }
  
  .action-icon {
    width: 18px !important;
    height: 18px !important;
  }
  
  .transactions-title {
    font-size: 28px;
  }
  
  .transactions-hero {
    padding: 50px 20px 70px !important;
    min-height: 150px;
  }
}

@media (max-width: 480px) {
  .transactions-cards-grid {
    padding: 12px 15px;
    gap: 6px;
  }
  
  .transaction-card {
    padding: 12px 16px;
    min-height: 40px;
  }
  
  .transaction-text {
    font-size: 12px;
  }
  
  .action-icons {
    gap: 6px;
  }
  
  .action-icon {
    width: 16px !important;
    height: 16px !important;
  }
}

.page-content-70{
  max-width: 65%;
  padding-right: 80px;
  padding-left: 80px;
}

.page-content-margin-top{
  position: relative;
  z-index: 10;
  margin-top: -100px;
  background-color: white;
}

.page-content-small-margin{
  margin-top: 5px
}

.page-content-margin-bottom{
  margin-bottom: 150px;
}

.top-banner{
  .top-banner-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;

    .top-banner-section-half, .top-banner-section-full{
      width: 43%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #F3F6FB;
      border-radius: 5px;
      padding: 30px 20px;
      .top-banner-section-right{
        display: flex;
        align-items: center;
        gap: 15px;
        img{
          width: 20px;
          height: 27px
        }
        span{
          font-size: 20px;
          font-weight: 600;
        }
      }
      .download-icon{
        width: 45px;
        height: 45px;
      }
    }
    .top-banner-section-full{
      width: 100%;
    }
  }
}

.page-content-with-table{
  .section-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .section-title-right{
      display: flex;
      align-items: center;
      gap: 15px;
      img{
        width: 45px;
      }
      span{
        font-size: 20px;
        font-weight: 600;
      }
    }
  }
}

.table-container {
  background-color: white;
  overflow: hidden;
  margin-top: 20px;
}

.data-table {
  width: 100%;
  font-size: 14px;
  border-radius: 0;
  
  thead {
    tr {
      background-color: #2085CC;
    }
    
    th {
      padding: 16px 12px;
      color: white;
      font-weight: 500;
      text-align: center;
      border-right: 2px solid rgba(255, 255, 255, 0.3);
      
      &:last-child {
        border-right: none;
      }
      
      .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      
      .header-icon img{
      }
      
      .header-text {
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
      }
    }
  }
  
  tbody {
    tr {
      background-color: #F1F3F9;
      border-bottom: 2px solid white;
      transition: background-color 0.2s ease;
      &:nth-child(even){
        background-color: #FFFAFA;
      }

      &:last-child {
        border-bottom: none;
      }
    }
    
    td {
      padding: 14px 12px;
      text-align: center;
      color: black;
      font-weight: 400;
      vertical-align: middle;
      border-right: 3px solid rgba(255, 255, 255, 0.8);
      
      &:last-child {
        border-right: none;
      }
    }
  }
}

.data-table-green{
  thead{
    tr{
      background-color: #08A650;
    }
  }
}


.location-container{
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  background-color: #EBEEF3;
  height: 200px;
  overflow: hidden;
  gap: 40px;
  .maps-container{
    img{
      height: 200px;
    }
  }
  .location-details{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    .location-title{
      font-size: 20px;
      font-weight: 600;
      h3{
        margin: 0;
        padding: 0;
        color: #1D2130;
        font-size: 24px;
      }
    }
    .location-address{
      display: flex;
      flex-direction: column;
      gap: 15px;
      .location-flex{
        display: flex;
        align-items: center;
        gap: 15px;
        img{
          width: 20px;
        }
        span{
          color: #262626
        }
      }
    }
  } 
}

.date-view-container{
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 8px 8px 0px #00000040;
  
  .calendar-icon-container{
    width: 150px;
    min-width: 150px;
    background-color: #EBEEF3;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    .date-container{
      box-shadow: 3px 4px 4px 0px #00000059;
      margin-top: 20px;
      .month{
        background-color: #2085CC;
      }
    }
  }
  .date-view-content{
    background-color: #EBEEF380;
    padding: 30px;
    .date-view-title{
      color: #1D2130;
      font-size: 20px;
      padding-bottom: 20px;
      border-bottom: 2px solid #1D2130;
      width: fit-content;
      h2{
        padding: 0;
        margin: 0;
      }
    }
    .flex-content{
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      gap: 15px;
      .content{
        display: flex;
        gap: 20px;
        align-items: flex-start;
        .content-title{
          display: flex;
          align-items: center;
          gap: 10px;
          img{
            width: 20px;
          }
          span{
            font-size: 15px;
            font-weight: 700;
            color: #2085CC;
          }
        }
        .content-description{
          font-size: 14px;
          font-weight: 400;
          color: #525560;
          width: 80%;
        }
        .content-description-long{
          font-weight: 500;
        }
      }
      .divider{
        width: 90%;
        margin-bottom: 10px;
        border-bottom: 1px solid #2085CC;
      }
    }
    .calendar-btn-container button{
      padding: 15px 30px;
      background-color: #2085CC;
      margin-top: 20px;
      color: white;
      border-radius: 0;
      box-shadow: 0px 4px 4px 0px #00000040;
      width: fit-content;
      float: unset;
      align-self: unset;
      margin-left: unset;
      margin-right: 100px;
    }
    .softwares-list{
      top: 69px;
      width: 157px;
      right: 100px;
      left: unset;
    }
  }
}

.list-content{
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  .list-item{
    display: flex;
    flex-direction: column;
    gap: 13px;
    .title{
      font-size: 18px;
      font-weight: 600;
    }
    .list-item-content{
      display: flex;
      align-items: center;
      gap: 10px;
      .description{
        font-size: 16px;
        font-weight: 300;
      }
      img{
        width: 12px;
        cursor: pointer;
      }
    }
  }
}

.results-header{
  .section-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .arrow-icon{
    width: 20px;
    height: 20px;
  }
  .section-content{
    opacity: 0;
    transition: all 0.3s ease;
    max-height: 0;
  }
  &.open{
    .section-content{
      opacity: 1;
      padding: 20px 0;
    }
  }
}

.results-title{
  font-size: 18px;
  font-weight: 600;
  padding: 20px 0;
}

/* Stage Tabs - Full Width Layout */
.candidate-stage-tabs {
  display: flex;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stage-tab {
  flex: 1;
  padding: 20px;
  text-align: center;
  background: white;
  border-right: 1px solid #D6D9DD;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: #666;
}

.stage-tab:last-child {
  border-right: none;
}

.stage-tab:hover {
  background: #DDE2E7;
  color: #333;
}

.stage-tab.active {
  background: #4A90E2;
  color: white;
  font-weight: 600;
}

.stage-tab.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #4A90E2;
}

/* Stage Content Management */
.stage-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stage-content.active {
  display: block;
  opacity: 1;
}

/* Process Flow - Horizontal Layout */
.candidate-process-flow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 20px;
  background: white;
  border-radius: 8px;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* Individual Process Steps */
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  flex: 1;
  max-width: 150px;
}

.process-step:not(:last-child) {
  margin-left: 40px;
}

/* Step Circles */
.step-circle {
  z-index: 2;
  position: relative;
  width: 100px;   /* or your actual circle size */
  height: 100px;  /* or your actual circle size */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4A90E2;
  border-radius: 50%;
  color: white;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.step-circle:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
  background: #3A7BD5;
}

.step-circle svg {
  width: 40px;
  height: 40px;
}

/* Step Connectors */
.step-connector {
  position: absolute;
  top: 50px;
  left: 77px;
  width: 220px;
  height: 3px;
  background: #3A7BD5;
  z-index: 1;
}


/* Step Labels */
.step-label {
  font-weight: 600;
  color: #2C3E50;
  font-size: 16px;
  line-height: 1.3;
  max-width: 130px;
  margin-top: 10px;
}

.candidate-process-flow-2{
  .step-connector{
    left: 120px;
    width: 150px;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .candidate-process-flow {
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      padding: 30px 15px;
  }
  
  .process-step {
      max-width: none;
      flex: 0 0 calc(50% - 15px);
      margin-left: 0;
  }
  
  .step-connector {
      display: none;
  }
  
  .step-circle {
      width: 80px;
      height: 80px;
  }
  
  .step-circle svg {
      width: 32px;
      height: 32px;
  }
  
  .step-label {
      font-size: 14px;
  }
}

@media (max-width: 768px) {
  .stage-tab {
      padding: 15px 10px;
      font-size: 16px;
  }
  
  .candidate-process-flow {
      flex-direction: column;
      gap: 25px;
      padding: 25px 10px;
  }
  
  .process-step {
      max-width: none;
      flex: none;
  }
  
  .step-circle {
      width: 70px;
      height: 70px;
  }
  
  .step-circle svg {
      width: 28px;
      height: 28px;
  }
  
  .step-label {
      font-size: 13px;
      max-width: 200px;
  }
}

@media (max-width: 480px) {
  .stage-tab {
      padding: 12px 8px;
      font-size: 14px;
  }
  
  .stage-tab.active::after {
      display: none;
  }
  
  .step-circle {
      width: 60px;
      height: 60px;
  }
  
  .step-circle svg {
      width: 24px;
      height: 24px;
  }
  
  .step-label {
      font-size: 12px;
  }
  
  .candidate-process-flow {
      padding: 20px 5px;
      gap: 20px;
  }
}

.process-flow-line {
  position: absolute;
  top: 50px;           /* Half the height of your circles (if circles are 100px) */
  left: 50px;          /* Half the width of your circles */
  right: 50px;         /* Half the width of your circles */
  height: 6px;
  background: #2085CC; /* Blue color */
  z-index: 0;
  border-radius: 3px;
  display: block;
}

.transactions-bg .section-title-search {
  max-width: 70%;
  margin: 0 auto;
  padding: 20px 30px;
  margin-bottom: 0;
  text-align: center;
}

.stage-content{
  .step-subtitle{
    display: flex;
    align-items: center;
    gap: 20px;
    &.step-subtitle-top{
      align-items: flex-start;
      .step-circle{
        margin-top: -25px;
      }
    }
    &.step-subtitle-top-30{
      align-items: flex-start;
      .step-circle{
        margin-top: -35px;
      }
    }
  }
  .step-subtitle-label{
    >span{
      font-size: 18px;
      font-weight: 600;
    }
  }

}

.step-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .step-left{
    display: flex;
    flex-direction: column;
    gap: 10px;
    .step-button{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 183px;
      height: 40px;
      background-color: #2085CC;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      box-shadow: 0px 4px 4px 0px #00000040;
      font-size: 18px;
      font-weight: 500;
    } 
  }
}
.step-content-container{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  .step-content{
    display: flex;
    align-items: center;
    gap: 10px;
    .number{
      font-size: 18px;
      font-weight: 600;
      color:#2085CC
    }
  }
}

.step-flex-greyed{
  .step-circle{
    background: #9FA2AC
  }
  .step-subtitle-label>span{
    color: #8E9098
  }
  .step-left{
    img{
      width: 30px;
      cursor: pointer;
    }
  }
}

.full-page{
  .job-hero{
    height: 200vh;
  }
  .page-content{
    position: relative;
    z-index: 100;
    background-color: white;
    margin-top: -205vh;
    .transactions-cards-grid{
      max-width: 100%;
      padding-right: 0;
      padding-left: 0;
    }
  }
}

.examples-card-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 150px;
  justify-content: space-between;
  margin-top: 40px;
  row-gap: 85px;
  .example-section{
    width: 40%;
    .section-title{
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid black;
      padding-bottom: 10px;
      margin-bottom: 20px;
      .title{
        font-size: 20px;
        font-weight: 700;
      }
      >img{
        width: 20px;
      }
    }
    .section-content{
      display: flex;
      flex-direction: column;
      .section-content-item{
        display: flex;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px dashed #00000080;
        span{
          font-size: 19px;
          font-weight: 400;

        }
      }
    }
  }
}

.header{
  width: 100%;
  .header-top-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 50px;
    border-bottom: 1px solid #0000001A;
    .header-top-bar-right{
      margin-right: 60px;
    }
    .header-top-bar-left{
      .header-top-bar-left-text{
        display: flex;
        gap: 20px;
        span{
          font-size: 14px;
          color: #696868;
          .links{
            cursor: pointer;
          }
        }
        
        .custom-select {
          position: relative;
          display: inline-block;
          
          .select-button {
            background: none;
            border: none;
            font-size: 14px;
            color: #696868;
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
            transition: background-color 0.3s;
            
            &:hover {
              background-color: #f0f0f0;
              color: #2085CC;
            }
            
            &::after {
              content: ' ▼';
              font-size: 10px;
              margin-left: 5px;
            }
          }
          
          .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 150px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1000;
            border-radius: 4px;
            left: -50px;
            top: 35px;
            max-height: 300px;
            overflow-y: auto;
            
            &.show {
              display: block;
            }
            
            a {
              color: #333;
              padding: 8px 12px;
              text-decoration: none;
              display: block;
              font-size: 13px;
              transition: background-color 0.3s;
              
              &:hover {
                background-color: #f1f1f1;
                color: #2085CC;
              }
            }
          }
        }
      }
    }
  }
  .header-main-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 50px;
    .header-main-bar-right{
      img{
        height: 44px;
      }
    }
    .header-main-bar-left{
      display: flex;
      align-items: center;
      gap: 10px;
      img{
        width: 20px;
        cursor: pointer;
      }
    }
  }
  .header-menu{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 10px;
    background-color: #F5F5F5;
    box-shadow: 0px 4px 4px 0px #00000040;
    cursor: pointer;
    .header-menu-item{
      padding: 10px 0;
      position: relative;
      transition: background-color 0.3s;
      
      &:hover {
        span {
          color: #2085CC;
        }
      }
      
      span{
        font-size: 20px;
        transition: color 0.3s;
      }
      &.active{
        border-bottom: 5px solid #2085CC;
        span{
          color: #2085CC;
        }
      }

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #F5F5F5;
    width: auto; /* allow width to adjust */
    white-space: nowrap; /* prevent wrapping */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 4px;
    a {
          color: #333;
          padding: 10px 15px;
          text-decoration: none;
          display: block;
          font-size: 16px;
          transition: background-color 0.3s;
          
          &:hover {
            background-color: #f1f1f1;
            color: #2085CC;
          }
        }
      }
      
      &:hover .submenu {
        display: block;
      }
    }
  }
}
.footer {
    position: relative;
    background-color: #0B65A5;
    padding: 50px;
    padding-bottom: 20px;
    color: white;
    margin: 0 auto;
    .footer-main{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 100px;
    border-bottom: 1px solid white;
    .footer-logo{
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        /* width: 150px; */
      }
    }
    .links-column{
      display: flex;
      flex-direction: column;
      gap: 20px;;
      .links-title{
        span{
          font-size: 20px;
          font-weight: 700;
        }
      }
      .links-content{
        display: flex;
        flex-direction: column;
        gap: 10px;
        a{
          color: white;
          text-decoration: none;
          font-size: 16px;
        }
        &.links-contact{
          a{
            display: flex;
            align-items: center;
            gap: 10px;
            img{
              width: fit-content;
            }
          }
        }
      }
    }
    .left-column{
      display: flex;
      flex-direction: column;
      gap: 50px;
      .subscribe-container{
        display: flex;
        flex-direction: column;
        gap: 20px;
        .subscribe-title{
          font-size: 20px;
          font-weight: 700;
        }
        .subscribe-form{
          display: flex;
          align-items: center;
          gap: 10px;
          position: relative;
          input{
            width: 200px;
            height: 35px;
            border: 1px solid white;;
            padding: 0 10px;
            padding-right: 110px;
            background-color: transparent;
            color: white;
            font-size: 14px;
            font-weight: 400;
            &::placeholder{
              color: white;
            }
          }
          button{
            width: 90px;
            height: 35px;
            position: absolute;
            right: 10px;
            color: #0B65A5;
            font-size: 18px;
            border: none;
            border-radius: 0px;
          }
        }
      }
      .socials-container{
        display: flex;
        align-items: center;
        gap: 15px;
        margin-right: 15px;
        margin-bottom: 15px;
      }
      .socials-text{
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
  .footer-bottom{
    .footer-bottom-left{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20px;
      padding-top: 20px;
      padding-left: 50px;
      
      .policies-links{
        a{
          color: white;
          text-decoration: none;
          font-size: 12px;
          font-weight: 400;
        }
      }
      .copyright{
        display: flex;
        align-items: center;
        gap: 10px;
        span{
          font-size: 12px;
          font-weight: 400;
        }
      }
    }
  }
  .floating-icon{
    position: absolute;
    top: -50px;
    left: 30px;
    img{
      width: 100px;
      height: 100px;
      cursor: pointer;
    }
  }
}


.progress-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  direction: ltr; /* Keep the step numbers in LTR order */
}

.step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #666;
  font-weight: 500;
  font-size: 14px;
  margin: 0 5px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.step:hover {
  background-color: #d0d0d0;
}

.step.active {
  background-color: #0066cc;
  color: white;
}

.step.completed {
  background-color: #0066cc;
  color: white;
}

.step-line {
  height: 2px;
  width: 20px;
  background-color: #e0e0e0;
  transition: all 0.3s ease;
}

.step-line.completed {
  background-color: #0066cc;
}


/* Stage Content Management */
.step-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.step-content.active {
  display: block;
  opacity: 1;
}

.step-title{
  font-size: 22px;
  margin: 30px 0;
  font-weight: 700;
}

.step-buttons{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
  button{
    background: none;
    border: 1px solid #2085CC;
    padding: 10px 20px;
    border-radius: 100vh;
    font-size: 17px;
    color: #2085CC;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    &.next, &.submit-final{
      background-color: #2085CC;
      color: white;
    }
    &:disabled{
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

.phone-input {
  display: flex;
  gap: 0;
  align-items: center;
}

.country-code-dropdown {
  width: 100px !important;
}

.phone-input input[type="tel"] {
  flex-grow: 1;
}

.step-button-add{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 40px 0;
  img{
    width: 20px;
  }
  span{
    font-weight: 700;
    font-size: 18px;
  }
}

.section-subtitle{
  padding: 20px 0;
  font-weight: 700;
  font-size: 18px;
}

.popup-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-box {
  background: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.popup-buttons button {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border: none;
  background-color: #2085CC;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}
.popup-buttons button img {
  vertical-align: middle;
}

.popup-box input {
  padding: 10px 10px 10px 35px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.signup-form{

    .form-group{
      width: 100%;
      input{
        width: 80% !important;
        margin: 0 auto;
        margin-bottom: 20px;
        padding-right: 30px;
        position: relative;
        
      }
      .input-icon{
        position: absolute;
        right: 20px;
        width: 15px;
        height: 15px;
        top: 30%;
        transform: translateY(-50%);
        z-index: 10;
      }
      button{
        width: 85% !important;
        margin: 0 auto;
        margin-bottom: 20px;
        background-color: #2085CC;
        color: white;
        border: none;
        border-radius: 10px;
        padding: 10px 20px;
        font-size: 22px;
        font-weight: 700;
        cursor: pointer;
      } 
     
  }
  .login-links{
    display: flex;
    align-items: center;
    width: 85% !important;
    gap: 10px;
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: 14px;
    color: #00000099 !important;
    a{
      color: #00000099 !important;
      text-decoration: none !important;
    }
    .reset-password{
      color: red !important;
      text-decoration: none;
    }
  }
}

.form-title{
  padding: 20px 50px;
  background-color: #124B73;
  color: white;
  font-size: 22px;
  font-weight: 700;
  width: fit-content;
  margin-right: 11%;
  margin-bottom: -20px;
}

.form-hero{
  background: none !important;
  background-color: #2085CC !important;
}

/*newly added- header- rima*/
/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    &.active

{
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
    .mobile-menu-title

{
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.mobile-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    svg

{
    width: 20px;
    height: 20px;
    transition: fill 0.3s ease;
}

&:hover svg {
    fill: #333;
}

}
}

.mobile-menu-items {
    padding: 20px 0;
    .mobile-menu-item

{
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;
    &:hover

{
    background-color: #f8f9fa;
}

&.active {
    background-color: #e3f2fd;
    border-right: 4px solid #2085CC;
    span

{
    color: #2085CC;
    font-weight: 600;
}

}

span {
    font-size: 16px;
    color: #333;
    display: block;
}

.mobile-submenu {
    display: none;
    padding: 10px 0 0 20px;
    &.show

{
    display: block;
}

a {
    display: block;
    padding: 8px 0;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
    &:hover

{
    color: #2085CC;
}

}
}
}
}
}
}

/* Responsive Design for Header */
@media (max-width: 1024px) {
    .header {
        .header-top-bar

{
    padding: 10px 30px;
    .header-top-bar-left

{
    .header-top-bar-left-text

{
    gap: 15px;
    span

{
    font-size: 13px;
}

}
}
}

.header-main-bar {
    padding: 10px 30px;
}

.header-menu {
    .header-menu-item

{
    span

{
    font-size: 18px;
}

}
}
}
}

@media (max-width: 768px) {
    .header {
        .hamburger-menu

{
    display: block;
}

.header-top-bar {
    padding: 10px 20px;
    .header-top-bar-left

{
    .header-top-bar-left-text

{
    gap: 10px;
    span

{
    font-size: 12px;
}

.custom-select {
    .select-button

{
    font-size: 12px;
}

}
}
}

.header-top-bar-right {
    margin-right: 0;
    margin-left: auto;
}

}

.header-main-bar {
    padding: 10px 20px;
    padding-left: 50px;
    .header-main-bar-left

{
    gap: 8px;
    img

{
    width: 18px;
}

}
}

.header-menu {
    display: none;
}

.mobile-menu-overlay {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    &.active

{
    opacity: 1;
    visibility: visible;
}

}

.mobile-menu {
    display: block;
}

}
}

@media (max-width: 480px) {
    .header {
        .hamburger-menu

{
    left: 10px;
    width: 40px;
    height: 40px;
    top: 71px;
}

.header-top-bar {
    padding: 10px 15px;
    .header-top-bar-left

{
    .header-top-bar-left-text

{
    gap: 8px;
    span

{
    font-size: 11px;
}

.custom-select {
    .select-button

{
    font-size: 11px;
}

}
}
}
}

.header-main-bar {
    padding: 10px 15px;
    padding-left: 60px;
    .header-main-bar-right

{
    img

{
    height: 32px;
}

}

.header-main-bar-left {
    gap: 6px;
    img

{
    width: 16px;
}

}
}

.mobile-menu {
    width: 100%;
}

}
}

/*newly added- footer- rima*/

.footer {
    position: relative;
    background-color: #0B65A5;
    
    color: white;
    
    .footer-main

{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    
    border-bottom: 1px solid white;

    .footer-logo

{
    display: flex;
    align-items: center;
    justify-content: center;
    img

{
    /* width: 150px; */
}

}

.links-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    ;
    .links-title

{
    span

{
    font-size: 20px;
    font-weight: 700;
}

}

.links-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    a

{
    color: white;
    text-decoration: none;
    font-size: 16px;
}

&.links-contact {
    a

{
    display: flex;
    align-items: center;
    gap: 10px;
    img

{
    width: fit-content;
}

}
}
}
}

.left-column {
    display: flex;
    flex-direction: row;
    gap: 50px;
    .subscribe-container

{
    display: flex;
    flex-direction: row;
    gap: 20px;
    .subscribe-title

{
    font-size: 20px;
    font-weight: 700;
}

.subscribe-form {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    input

{
    width: 200px;
    height: 35px;
    border: 1px solid white;
    ;
    padding: 0 10px;
    padding-right: 110px;
    background-color: transparent;
    color: white;
    font-size: 14px;
    font-weight: 400;
    &::placeholder

{
    color: white;
}

}

button {
    width: 90px;
    height: 35px;
    position: absolute;
    right: 10px;
    color: #0B65A5;
    font-size: 18px;
    border: none;
    border-radius: 0px;
}

}
}

.socials-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.socials-text {
    font-size: 20px;
    font-weight: 700;
}

}
}

.footer-bottom {
    .footer-bottom-left

{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding-top: 20px;
    padding-left: 50px;
    .policies-links

{
    a

{
    color: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
}

}

.copyright {
    display: flex;
    align-items: center;
    gap: 10px;
    span

{
    font-size: 12px;
    font-weight: 400;
}

}
}
}

.floating-icon {
    position: absolute;
    top: -50px;
    left: 30px;
    img

{
    width: 100px;
    height: 100px;
    cursor: pointer;
}

}
}

/* Footer Responsive Design */
@media (max-width: 1024px) {
    .footer {
        padding: 40px 30px 20px;
        .footer-main

{
    gap: 30px;
    padding-bottom: 80px;
    .footer-logo

{
    img

{
    width: 120px;
}

}

.links-column {
    gap: 15px;
    .links-title span

{
    font-size: 18px;
}

.links-content {
    gap: 8px;
    a

{
    font-size: 14px;
}

}
}

.left-column {
    gap: 40px;
    .subscribe-container

{
    gap: 15px;
    .subscribe-title

{
    font-size: 18px;
}

.subscribe-form {
    input

{
    width: 180px;
    font-size: 13px;
}

button {
    width: 80px;
    font-size: 16px;
}

}
}

.socials-text {
    font-size: 18px;
}

}
}

.footer-bottom {
    .footer-bottom-left

{
    padding-left: 30px;
    gap: 15px;
}

}

.floating-icon {
    left: 20px;
    img

{
    width: 80px;
    height: 80px;
}

}
}
}

@media (max-width: 768px) {
    .footer {
        padding: 30px 20px 15px;
        .footer-main

{
    flex-direction: column;
    gap: 40px;
    padding-bottom: 60px;
    text-align: center;
    .footer-logo

{
    order: 1;
    margin-bottom: 20px;
    img

{
    width: 100px;
}

}

.links-column {
    order: 2;
    gap: 12px;
    .links-title span

{
    font-size: 16px;
}

.links-content {
    gap: 6px;
    a

{
    font-size: 13px;
}

&.links-contact {
    a

{
    justify-content: center;
    gap: 8px;
    img

{
    width: 16px;
}

}
}
}
}

.left-column {
    order: 3;
    gap: 30px;
    align-items: center;
    .subscribe-container

{
    gap: 12px;
    width: 100%;
    max-width: 300px;
    .subscribe-title

{
    font-size: 16px;
}

.subscribe-form {
    width: 100%;
    input

{
    width: 100%;
    max-width: 250px;
    font-size: 12px;
}

button {
    width: 70px;
    font-size: 14px;
}

}
}

.socials-container {
    justify-content: center;
    margin-right: 0;
    margin-bottom: 10px;
    gap: 12px;
}

.socials-text {
    font-size: 16px;
}

}
}

.footer-bottom {
    .footer-bottom-left

{
    flex-direction: column;
    gap: 10px;
    padding-left: 0;
    text-align: center;
    .policies-links a

{
    font-size: 11px;
}

.copyright {
    span

{
    font-size: 11px;
}

}
}
}

.floating-icon {
    left: 15px;
    top: -40px;
    img

{
    width: 60px;
    height: 60px;
}

}
}
}

@media (max-width: 480px) {
    .footer {
        padding: 25px 15px 10px;
        .footer-main

{
    gap: 30px;
    padding-bottom: 50px;
    .footer-logo

{
    img

{
    width: 80px;
}

}

.links-column {
    gap: 10px;
    .links-title span

{
    font-size: 14px;
}

.links-content {
    gap: 5px;
    a

{
    font-size: 12px;
}

&.links-contact {
    a

{
    gap: 6px;
    img

{
    width: 14px;
}

}
}
}
}

.left-column {
    gap: 25px;
    width: 100%;
    .subscribe-container

{
    gap: 10px;
    .subscribe-title

{
    font-size: 14px;
}

.subscribe-form {
    input

{
    font-size: 11px;
    height: 30px;
}

button {
    width: 60px;
    height: 30px;
    font-size: 12px;
}

}
}

.socials-container {
    gap: 10px;
}

.socials-text {
    font-size: 14px;
}

}
}

.footer-bottom {
    .footer-bottom-left

{
    gap: 8px;
    .policies-links a

{
    font-size: 10px;
}

.copyright {
    span

{
    font-size: 10px;
}

}
}
}

.floating-icon {
    left: 10px;
    top: -35px;
    img

{
    width: 50px;
    height: 50px;
}

}
}
}


.progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    direction: ltr; /* Keep the step numbers in LTR order */
}

.step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #666;
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

    .step:hover {
        background-color: #d0d0d0;
    }

    .step.active {
        background-color: #0066cc;
        color: white;
    }

    .step.completed {
        background-color: #0066cc;
        color: white;
    }

.step-line {
    height: 2px;
    width: 20px;
    background-color: #e0e0e0;
    transition: all 0.3s ease;
}

    .step-line.completed {
        background-color: #0066cc;
    }


/* Stage Content Management */
.step-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .step-content.active {
        display: block;
        opacity: 1;
    }

.step-title {
    font-size: 22px;
    margin: 30px 0;
    font-weight: 700;
}

.step-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
    button

{
    background: none;
    border: 1px solid #2085CC;
    padding: 10px 20px;
    border-radius: 100vh;
    font-size: 17px;
    color: #2085CC;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    &.next, &.submit-final

{
    background-color: #2085CC;
    color: white;
}



&:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

}
}

.phone-input {
    display: flex;
    gap: 0;
    align-items: center;
}

.country-code-dropdown {
    width: 100px !important;
}

.phone-input input[type="tel"] {
    flex-grow: 1;
}

.step-button-add {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 40px 0;
    img

{
    width: 20px;
}

span {
    font-weight: 700;
    font-size: 18px;
}

}

.section-subtitle {
    padding: 20px 0;
    font-weight: 700;
    font-size: 18px;
}

.popup-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-family: 'GE Dinar One';
    .popup-box

{
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    width: 400px;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    .close-popup

{
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer;
}

.popup-icon {
    img

{
    width: 80px;
    height: 80px;
}

}

h3 {
    font-size: 30px;
    margin: 20px 0 10px;
    font-weight: 700;
}

.welcome-text {
    font-size: 25px;
    font-weight: 700;
    margin: 20px 0 10px;
}

.download {
    font-size: 20px;
    margin: 20px 0 10px;
    font-weight: 700;
}

hr {
    margin: 20px 0;
}

.login-inputs {
    margin: 30px 0;
    input

{
    padding: 0 12px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
    border: none;
    width: 70%;
    &:focus

{
    outline: none;
    border-bottom: 2px solid #2085CC;
}

}
}

.login-buttons {
    button

{
    background-color: #2085CC;
    color: white;
    width: 80%;
    border: none;
    height: 44px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
    font-family: 'GE Dinar One';
}

}
}
}



.popup-buttons button {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    border: none;
    background-color: #2085CC;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
}

    .popup-buttons button img {
        vertical-align: middle;
    }

.popup-box input {
    padding: 10px 10px 10px 35px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.signup-form {
    .form-group

{
    width: 100%;
    position: relative;
    input

{
    width: 80% !important;
    margin: 0 auto;
    margin-bottom: 20px;
    padding-right: 30px;
    position: relative;
}

.wrong-input {
    background-color: #FEF1F2;
    svg

{
    fill: #D51A3D;
}

&:focus {
    border-bottom: 2px solid #D51A3D;
}

}

.input-icon {
    position: absolute;
    right: 30px;
    width: 15px;
    height: 15px;
    top: 30%;
    transform: translateY(-50%);
    z-index: 10;
}

&.password-group {
    .password-toggle

{
    position: absolute;
    left: 30px;
    width: 15px;
    height: 15px;
    top: 35%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.password-toggle:hover {
    opacity: 1;
}

}

button {
    width: 85% !important;
    margin: 0 auto;
    margin-bottom: 20px;
    background-color: #2085CC;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
}

}

.login-links {
    display: flex;
    align-items: center;
    width: 85% !important;
    gap: 10px;
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: 14px;
    color: #00000099 !important;
    a

{
    color: #00000099 !important;
    text-decoration: none !important;
}

.reset-password {
    color: red !important;
    text-decoration: none;
}

}
}

.form-title {
    padding: 20px 50px;
    background-color: #124B73;
    color: white;
    font-size: 22px;
    font-weight: 700;
    width: fit-content;
    margin-right: 11%;
    margin-bottom: -20px;
}

.form-hero {
    background: none !important;
    background-color: #2085CC !important;
}

/* Confirmation Popup Styles */
.confirmation-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(32, 133, 204, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.confirmation-popup-box {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
}

.confirmation-popup-close {
    position: absolute;
    top: 15px;
    left: 15px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

    .confirmation-popup-close:hover {
        background-color: #f0f0f0;
    }

.confirmation-popup-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.confirmation-success-circle {
    width: 80px;
    height: 80px;
    background-color: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.confirmation-popup-title {
    font-size: 20px;
    font-weight: 600;
    margin: 20px 0 10px;
    line-height: 1.4;
    color: #333;
}

.confirmation-popup-separator {
    border: none;
    height: 1px;
    background-color: #2085CC;
    margin: 15px 0;
}

.confirmation-popup-welcome {
    margin: 10px 0;
    color: #2085CC;
    font-weight: bold;
    text-align: center;
}

.confirmation-popup-subtitle {
    margin: 10px 0;
    color: #333;
    text-align: center;
    font-size: 14px;
}

/* Responsive Design for Confirmation Popup */
@media (max-width: 480px) {
    .confirmation-popup-box {
        width: 90%;
        padding: 30px 20px;
    }

    .confirmation-success-circle {
        width: 60px;
        height: 60px;
    }

    .confirmation-popup-title {
        font-size: 18px;
    }
}

.user-account-popup {
    .title-with-icon

{
    display: flex;
    align-items: center;
    gap: 10px;
    h2

{
    font-size: 33px;
    font-weight: 700;
}

img {
    width: 45px;
}

}

.title-with-icon-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    .title-with-icon-content-item

{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    img

{
    width: 15px;
}

p {
    font-size: 20px;
    font-weight: 700;
}

border-bottom: 1px solid #0000001A;
}
}
}


/*footer-rima-last*/
/* ---- RTL base & overflow safety (apply always) ---- */
.footer {
    direction: rtl; /* ensure right-to-left flow inside the footer */
    box-sizing: border-box;
}

    .footer * {
        box-sizing: inherit;
    }

    .footer img {
        max-width: 100%;
        height: auto;
    }

/* If you have horizontal overflow on small screens, this prevents right-side cut-off */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
}

/* ===== MOBILE FOOTER (≤768px): final reset ===== */
@media (max-width: 768px) {
    /* RTL + safety */
    .footer {
        direction: rtl;
        box-sizing: border-box;
    }

        .footer * {
            box-sizing: inherit;
        }

    html, body {
        overflow-x: hidden;
    }

    /* Layout: logo on top, two columns, then contact centered */
    .footer .footer-main {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "logo logo"
            "col1 col2"
            "contact contact";
        gap: 20px;
        align-items: start;
        justify-items: center;
        border-bottom: none;
        padding-inline: 16px;
        width: 100%;
    }

    .footer .footer-logo {
        grid-area: logo;
        width: 100%;
        display: flex;
        justify-content: center;
        padding-block: 16px;
        border-bottom: 1px solid #fff;
    }

        .footer .footer-logo img {
            max-width: 180px;
            height: auto;
        }

    /* Map columns by DOM order */
    .footer .footer-main > .links-column:nth-child(2) {
        grid-area: col1;
    }

    .footer .footer-main > .links-column:nth-child(3) {
        grid-area: col2;
    }

    .footer .footer-main > .links-column:nth-child(4) {
        grid-area: contact;
    }

    /* === Global right alignment for all columns’ items === */
    .footer .links-column {
        width: 100%;
        text-align: right !important;
    }

        .footer .links-column .links-title span {
            display: block;
            width: 100%;
            text-align: right !important;
            font-size: 18px;
        }

        .footer .links-column .links-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end !important; /* right edge */
            gap: 10px;
            width: 100%;
        }

            .footer .links-column .links-content a {
                display: block !important;
                width: 100%;
                text-align: right !important;
            }

    /* === Contact section overrides: center the section, keep its rows right-aligned === */
    .footer .footer-main > .links-column:nth-child(4) {
        justify-self: center; /* center the whole contact block */
        max-width: 480px; /* controls width of the centered block */
        text-align: center !important; /* for the title only; links override below */
    }

        /* Center the "اتصل بنا" title and add a thin white line directly under it */
        .footer .footer-main > .links-column:nth-child(4) .links-title {
            position: relative;
            padding-bottom: 8px;
            margin-bottom: 8px; /* small gap, not big */
        }

            .footer .footer-main > .links-column:nth-child(4) .links-title span {
                text-align: center !important;
            }

            .footer .footer-main > .links-column:nth-child(4) .links-title::after {
                content: "";
                display: block;
                height: 1px;
                background: #fff;
                width: 100%;
                opacity: 1;
            }

        /* Center the list as a block; each row still right-aligned inside */
        .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact {
            align-items: center !important; /* center the stack */
            gap: 8px;
        }

            .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact a {
                display: flex !important;
                justify-content: flex-end !important; /* icon+text to right edge */
                align-items: center !important;
                text-align: right !important;
                width: 100%;
                max-width: 340px; /* centered row width */
                gap: 8px;
            }

                .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact a img {
                    height: 20px;
                    width: auto;
                }

    /* Hide empty left column on mobile */
    .footer .left-column {
        display: none !important;
    }

    /* Footer bottom */
    .footer .footer-bottom {
        padding: 16px;
    }

        .footer .footer-bottom .footer-bottom-left {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
            text-align: center;
        }
}
@media (max-width: 768px) {
    /* Contact section block centered */
    .footer .footer-main > .links-column:nth-child(4) {
        grid-area: contact;
        justify-self: center;
        width: 100%;
        max-width: 480px;
        text-align: center; /* affects title only */
        border-bottom: none; /* no line here */
        padding-bottom: 0;
        margin-bottom: 0;
    }

        /* Title: centered, no line */
        .footer .footer-main > .links-column:nth-child(4) .links-title {
            margin-bottom: 12px;
        }

            .footer .footer-main > .links-column:nth-child(4) .links-title span {
                display: block;
                text-align: center;
            }

        /* Links container: block centered, with a bottom border */
        .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important; /* center the whole stack */
            gap: 8px;
            width: 100%;
            margin: 0 auto;
            padding-bottom: 8px;
            border-bottom: 1px solid #fff; /* << single line after all content */
        }

            /* Each link: right-aligned inside the centered block */
            .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact a {
                display: flex !important;
                justify-content: flex-end !important; /* push icon+text to right edge */
                align-items: center !important;
                text-align: right !important;
                width: 100%; /* stretch row to full width of block */
                max-width: 340px; /* block centered but content hugs right */
                gap: 8px;
            }

                .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact a img {
                    height: 20px;
                    width: auto;
                }
}


/****/
/* ===== FOOTER: Mobile (≤768px) layout + alignment ===== */
@media (max-width: 768px) {
    /* Layout: logo on top, two link columns, then contact centered */
    .footer .footer-main {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "logo logo"
            "col1 col2"
            "contact contact";
        gap: 20px;
        align-items: start;
        justify-items: center;
        padding-inline: 16px;
        border-bottom: none;
        width: 100%;
    }

    /* Logo full row with divider */
    .footer .footer-logo {
        grid-area: logo;
        width: 100%;
        display: flex;
        justify-content: center;
        padding-block: 16px;
        border-bottom: 1px solid #fff;
    }

    /* Map columns by DOM order */
    .footer .footer-main > .links-column:nth-child(2) {
        grid-area: col1;
    }

    .footer .footer-main > .links-column:nth-child(3) {
        grid-area: col2;
    }

    .footer .footer-main > .links-column:nth-child(4) {
        grid-area: contact;
        justify-self: center;
        width: 100%;
        max-width: 480px; /* keeps the contact block neat and centered */
        text-align: center !important; /* affects the heading only; links override below */
    }

    /* === First two columns: right-align their items === */
    .footer .footer-main > .links-column:nth-child(2) .links-content,
    .footer .footer-main > .links-column:nth-child(3) .links-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important; /* push items to right edge */
        text-align: right !important;
        gap: 8px;
        width: 100%;
    }

        .footer .footer-main > .links-column:nth-child(2) .links-content > a,
        .footer .footer-main > .links-column:nth-child(3) .links-content > a {
            display: block !important;
            width: 100% !important;
            text-align: right !important;
        }

    /* === Contact column: title centered, links centered as a block, rows right-aligned === */
    .footer .footer-main > .links-column:nth-child(4) .links-title {
        margin-bottom: 8px;
    }

        .footer .footer-main > .links-column:nth-child(4) .links-title span {
            display: block;
            text-align: center !important;
        }

    /* List of contact links: centered stack with ONE white line UNDER the list */
    .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* center the stack itself */
        gap: 8px;
        width: 100%;
        padding-bottom: 8px;
        border-bottom: 1px solid #fff; /* single divider after links */
    }

        /* Each contact link row: content hugs the RIGHT edge of the centered block */
        .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact > a {
            display: flex !important;
            justify-content: flex-end !important; /* icon + text to right edge */
            align-items: center !important;
            text-align: right !important;
            width: 100% !important;
            max-width: 340px; /* centers each row as a block */
            gap: 8px;
        }

    /* Override any inline styles on spans inside contact links (force right alignment) */
    .footer .links-content.links-contact span {
        display: inline-block;
        text-align: right !important;
        width: auto !important; /* cancel inline width:100% if present */
    }

    /* Make the PHONE (1st link) and EMAIL (3rd link) render LTR but stay right-aligned */
    .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact a:nth-child(1) span,
    .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact a:nth-child(3) span {
        direction: ltr !important;
        unicode-bidi: isolate !important;
        text-align: right !important; /* keep them anchored to the right */
    }

    /* Hide empty left column on mobile (if present) */
    .footer .left-column {
        display: none !important;
    }
}

/* ===== Footer contact text (mobile) ===== */
@media (max-width: 768px) {
    /* Center the contact list as a block */
    .footer .links-content.links-contact {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* center the stack */
        gap: 8px;
        padding-bottom: 8px; /* keep if you want the divider below */
        border-bottom: 1px solid #fff; /* remove this line if you don't want the divider */
    }

        /* Each contact row: keep content hugging the RIGHT edge of the centered block */
        .footer .links-content.links-contact a {
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center;
            text-align: right !important;
            width: 100%;
            max-width: 340px; /* centers each row as a block */
            gap: 8px;
        }

        /* >>> The span you asked for: .contact-text <<< */
        .footer .links-content.links-contact .contact-text {
            display: inline-block;
            text-align: right !important; /* force right alignment of the text */
            direction: rtl !important; /* keep Arabic layout RTL by default */
            unicode-bidi: plaintext !important;
            width: auto !important; /* cancel any 100% widths inline */
        }

        /* If the FIRST contact row is the phone number, render digits LTR
     while staying right-aligned within the row */
        .footer .links-content.links-contact a:first-child .contact-text {
            direction: ltr !important;
            unicode-bidi: isolate !important;
            text-align: right !important;
        }
}




/* ==== Mobile ≤768px: make contact list exactly under its title ==== */
@media (max-width: 768px) {

    /* 1) Make the contact column a tiny grid that centers its children */
    .footer .footer-main > #footer-contact,
    .footer .footer-main > .links-column:nth-child(4) {
        grid-area: contact;
        display: grid !important;
        justify-items: center !important; /* center children horizontally */
        align-items: start;
        width: 100%;
    }

        /* 2) Give BOTH the title and the links the same centered width */
        .footer .footer-main > #footer-contact .links-title,
        .footer .footer-main > .links-column:nth-child(4) .links-title,
        .footer .footer-main > #footer-contact .links-content.links-contact,
        .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact {
            width: 100%;
            max-width: 360px; /* << shared width */
            margin: 0 auto; /* centered under the column */
        }

            /* Title centered */
            .footer .footer-main > #footer-contact .links-title span,
            .footer .footer-main > .links-column:nth-child(4) .links-title span {
                display: block;
                text-align: center !important;
                margin-bottom: 8px;
            }

        /* 3) Contact list: one thin line AFTER the list only */
        .footer .footer-main > #footer-contact .links-content.links-contact,
        .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important; /* center the stack itself */
            gap: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid #fff; /* single divider under the list */
        }

            /* 4) EACH row: icon on the far right, text to its left; row centered */
            .footer .footer-main > #footer-contact .links-content.links-contact > a,
            .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact > a {
                display: flex !important;
                direction: rtl !important; /* puts the first child (img) at RIGHT edge */
                flex-direction: row !important;
                justify-content: flex-start !important; /* in RTL, packs to the right */
                align-items: center !important;
                gap: 8px;
                width: 100% !important;
                max-width: 360px !important; /* same width as title/list → perfect alignment */
                margin: 0 auto !important; /* center the row block */
                text-align: right !important;
            }

                /* Icon */
                .footer .footer-main > #footer-contact .links-content.links-contact > a img,
                .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact > a img {
                    flex: 0 0 auto !important;
                    height: 20px;
                    width: auto;
                    margin-left: 8px; /* space between icon and text */
                }

            /* 5) Span must be 100% wide and right-aligned */
            .footer .footer-main > #footer-contact .links-content.links-contact .contact-text,
            .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact .contact-text {
                display: block !important;
                width: 100% !important; /* as requested */
                text-align: right !important; /* text hugs the right edge */
                unicode-bidi: plaintext !important;
            }

            /* Phone/email digits: LTR but still right-anchored */
            .footer .footer-main > #footer-contact .links-content.links-contact > a:first-child .contact-text,
            .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact > a:first-child .contact-text,
            .footer .footer-main > #footer-contact .links-content.links-contact > a[href^="mailto:"] .contact-text,
            .footer .footer-main > .links-column:nth-child(4) .links-content.links-contact > a[href^="mailto:"] .contact-text {
                direction: ltr !important;
                unicode-bidi: isolate !important;
                text-align: right !important;
            }
}

/* ===== Header top bar: mobile (≤768px) ===== */
@media (max-width: 768px) {
    /* Hide the left side (select + date) */
    .header-top-bar-left {
        display: none !important;
    }

    /* Make the bar right-aligned (no centering) */
    .header-top-bar {
        display: block !important; /* kill any flex that might center things */
        text-align: right !important; /* push contents to the right edge */
        padding-inline: 12px;
    }

    /* Keep the right block tidy */
    .header-top-bar-right {
        display: inline-flex; /* stays at the right because of text-align */
        align-items: center;
        gap: 8px;
    }

        .header-top-bar-right img {
            max-height: 32px;
            height: auto;
            width: auto;
        }
}

/* ===== Header top bar: mobile (≤768px) ===== */
@media (max-width: 768px) {
    /* Hide the left side (select + date) */
    .header-top-bar-left {
        display: none !important;
    }

    /* Make the bar right-aligned (no centering) */
    .header-top-bar {
        display: block !important; /* kill any flex that might center things */
        text-align: right !important; /* push contents to the right edge */
        padding-inline: 12px;
    }

    /* Keep the right block tidy */
    .header-top-bar-right {
        display: inline-flex; /* stays at the right because of text-align */
        align-items: center;
        gap: 8px;
    }

        .header-top-bar-right img {
            max-height: 32px;
            height: auto;
            width: auto;
        }
}


/* Base (mobile-first) */
.breadcrumb-container {
    position: static; /* no absolute layout on small screens */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    direction: rtl;
    align-items: center;
    justify-content: flex-start; /* with RTL this still looks right-aligned */
    font-size: 14px;
    padding: 8px 12px;
    margin: 8px 16px 0;
    line-height: 1.4;
    max-width: 100%;
    box-sizing: border-box;
}

.breadcrumb-link {
    font-size: 14px;
    color: #eee;
    text-decoration: none;
    font-family: 'GE Dinar One';
    white-space: nowrap; /* avoids breaking in the middle of words */
    overflow: hidden;
    text-overflow: ellipsis; /* gracefully truncates if too long */
    max-width: 100%;
}

    .breadcrumb-link:hover {
        color: #eee;
        text-decoration: underline;
    }

/* Auto insert separator (remove "/" from HTML) */


/* Medium screens (tablets / small laptops) */
@media (min-width: 600px) {
    .breadcrumb-container {
        font-size: 15px;
        gap: 8px;
    }

    .breadcrumb-link {
        font-size: 15px;
    }
}

/* Large screens (restore your absolute desktop positioning) */
@media (min-width: 992px) {
    .breadcrumb-container {
        position: absolute;
        top: 215px;
        right: 90px;
        font-size: 16px;
        padding: 0;
        margin: 0;
    }

    .breadcrumb-link {
        font-size: 16px;
    }
}

/* Very small devices (≤ 360px) */
@media (max-width: 360px) {
    .breadcrumb-container {
        font-size: 12px;
        gap: 4px;
        padding: 6px 8px;
    }

    .breadcrumb-link {
        font-size: 12px;
        max-width: 80vw; /* prevent overflow, force wrapping */
    }
}


/*Header-hamburgermenu- hadi*/
.header {
    width: 100%;
    position: relative;
    .header-top-bar

{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 50px;
    border-bottom: 1px solid #0000001A;
    .header-top-bar-right

{
    margin-right: 60px;
}

.header-top-bar-left {
    .header-top-bar-left-text

{
    display: flex;
    gap: 20px;
    span

{
    font-size: 14px;
    color: #696868;
    .links

{
    cursor: pointer;
}

}

.custom-select {
    position: relative;
    display: inline-block;
    .select-button

{
    background: none;
    border: none;
    font-size: 14px;
    color: #696868;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.3s;
    &:hover

{
    background-color: #f0f0f0;
    color: #2085CC;
}

&::after {
    content: ' ▼';
    font-size: 10px;
    margin-left: 5px;
}

}

.dropdown-content {
    display: none;
    position: fixed;
    background-color: white;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 4px;
    top: 35px;
    max-height: 300px;
    overflow-y: auto;
    &.show

{
    display: block;
    z-index: 1300;
}

a {
    color: #333;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    font-size: 13px;
    transition: background-color 0.3s;
    &:hover

{
    background-color: #f1f1f1;
    color: #2085CC;
}

}
}
}
}
}
}

.header-main-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 50px;
    .header-main-bar-right

{
    img

{
    height: 44px;
}

}

.header-main-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    img

{
    width: 20px;
    cursor: pointer;
}

}
}

.header-menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 10px;
    background-color: #F5F5F5;
    box-shadow: 0px 4px 4px 0px #00000040;
    cursor: pointer;
    .header-menu-item

{
    padding: 10px 0;
    position: relative;
    transition: background-color 0.3s;
    &:hover

{
    span

{
    color: #2085CC;
}

}

span {
    font-size: 20px;
    transition: color 0.3s;
}

&.active {
    border-bottom: 5px solid #2085CC;
    span

{
    color: #2085CC;
}

}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 4px;
    a

{
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 16px;
    transition: background-color 0.3s;
    &:hover

{
    background-color: #f1f1f1;
    color: #2085CC;
}

}
}

&:hover .submenu {
    display: block;
}

}
}

/* Hamburger Menu Styles */
.hamburger-menu {
    display: none;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    width: 24px;
    height: 24px;
    svg

{
    width: 100%;
    height: 100%;
    fill: #2085CC;
    transition: transform 0.3s ease;
}

&.active svg {
    display: none;
}

}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    &.active

{
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
    .mobile-menu-title

{
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.mobile-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    svg

{
    width: 20px;
    height: 20px;
    transition: fill 0.3s ease;
}

&:hover svg {
    fill: #333;
}

}
}

.mobile-menu-items {
    padding: 20px 0;
    .mobile-menu-item

{
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;
    &:hover

{
    background-color: #f8f9fa;
}

&.active {
    background-color: #e3f2fd;
    border-right: 4px solid #2085CC;
    span

{
    color: #2085CC;
    font-weight: 600;
}

}

span {
    font-size: 16px;
    color: #333;
    display: block;
}

.mobile-submenu {
    display: none;
    padding: 10px 0 0 20px;
    &.show

{
    display: block;
}

a {
    display: block;
    padding: 8px 0;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
    &:hover

{
    color: #2085CC;
}

}
}
}
}
}
}

/* Responsive Design for Header */
@media (max-width: 1024px) {
    .header {
        .header-top-bar

{
    padding: 10px 30px;
    .header-top-bar-left

{
    .header-top-bar-left-text

{
    gap: 15px;
    span

{
    font-size: 13px;
}

}
}
}

.header-main-bar {
    padding: 10px 30px;
}

.header-menu {
    .header-menu-item

{
    span

{
    font-size: 18px;
}

}
}
}
}

@media (max-width: 768px) {
    .header {
        .hamburger-menu

{
    display: block;
}

.header-top-bar {
    padding: 10px 20px;
    .header-top-bar-left

{
    .header-top-bar-left-text

{
    gap: 10px;
    span

{
    font-size: 12px;
}

.custom-select {
    .select-button

{
    font-size: 12px;
}

}
}
}

.header-top-bar-right {
    margin-right: 0;
    margin-left: auto;
}

}

.header-main-bar {
    padding: 10px 20px;
    padding-left: 50px;
    .header-main-bar-left

{
    gap: 8px;
    img

{
    width: 18px;
}

}
}

.header-menu {
    display: none;
}

.mobile-menu-overlay {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    &.active

{
    opacity: 1;
    visibility: visible;
}

}

.mobile-menu {
    display: block;
}

}
}

@media (max-width: 480px) {
    .header {
        .hamburger-menu

{
    left: 10px;
    width: 40px;
    height: 40px;
    top: 71px;
}

.header-top-bar {
    padding: 10px 15px;
    .header-top-bar-left

{
    .header-top-bar-left-text

{
    gap: 8px;
    span

{
    font-size: 11px;
}

.custom-select {
    .select-button

{
    font-size: 11px;
}

}
}
}
}

.header-main-bar {
    padding: 10px 15px;
    padding-left: 60px;
    .header-main-bar-right

{
    img

{
    height: 32px;
}

}

.header-main-bar-left {
    gap: 6px;
    img

{
    width: 16px;
}

}
}

.mobile-menu {
    width: 100%;
}

}
}


/* --- Mobile header fallbacks (flat CSS) --- */

/* Make sure the hamburger shows on mobile */
@media (max-width: 768px) {
    .hamburger-menu {
        display: block;
    }

    .mobile-menu {
        display: block;
    }
    /* keep it off-canvas via transform until active */
}

/* swap the hamburger icon when active (even without nesting) */
.hamburger-menu.active svg {
    display: none;
}

/* Overlay default + active states (flattened) */
@media (max-width: 768px) {
    .mobile-menu-overlay {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 1500; /* above page content */
    }

        .mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }
}

/* Off-canvas menu behavior (flattened) */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1600; /* above overlay */
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0,0,0,.1);
}

    .mobile-menu.active {
        transform: translateX(0);
    }

/* Tiny phones: full width panel */
@media (max-width: 480px) {
    .mobile-menu {
        width: 100%;
    }
}

/* Keep the hamburger always tappable */
.hamburger-menu {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1700; /* above everything */
}

/* Ensure hamburger shows on mobile */
@media (max-width: 768px) {
    .hamburger-menu {
        display: block;
    }

    .mobile-menu {
        display: block;
    }
    /* stays off-canvas via transform until active */
}

/* Off-canvas menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1600;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0,0,0,.1);
}

    .mobile-menu.active {
        transform: translateX(0);
    }

@media (max-width: 480px) {
    .mobile-menu {
        width: 100%;
    }
}

/* Overlay */
.mobile-menu-overlay {
    display: none;
}

@media (max-width: 768px) {
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 1500;
    }

        .mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }
}

/* Keep hamburger tappable on top */
.hamburger-menu {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1700;
}

    .hamburger-menu.active svg {
        display: none;
    }
/* you can replace with an "X" icon if you like */

/* --- Force mobile menu to exist, then slide in/out via transform --- */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: #fff;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0,0,0,.1);
    transform: translateX(100%); /* off-canvas by default */
    transition: transform .3s ease;
    z-index: 1600;
    display: block !important; /* <-- key: never none */
}

    .mobile-menu.active {
        transform: translateX(0);
    }

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1500;
    display: block !important; /* <-- key: never none */
}

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* Keep the hamburger tappable on top */
.hamburger-menu {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1700;
}

    /* Optional: hide the hamburger SVG when active (you can swap to an "X" later) */
    .hamburger-menu.active svg {
        display: none;
    }

/* Tiny phones: full width drawer */
@media (max-width: 480px) {
    .mobile-menu {
        width: 100%;
    }
}

/* ==== Top-drop drawer (header stays visible, drawer overlays page) ==== */
@media (max-width: 992px) {
    /* Header always on top */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5000;
        background: #fff;
    }

    /* Make page content start below the fixed header */
    body {
        padding-top: var(--header-h, 120px);
    }

    /* Drawer: fixed and full width, opens DOWN from just under header */
    #mobileMenu {
        display: block !important; /* never none */
        position: fixed;
        left: 0;
        right: 0;
        top: var(--header-h, 120px); /* sits right under header */
        width: 100%;
        max-height: calc(100vh - var(--header-h, 120px));
        overflow-y: auto;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 10px 24px rgba(0,0,0,.12);
        /* top-down animation (override any translateX) */
        transform-origin: top;
        transform: scaleY(0) !important;
        transition: transform .26s cubic-bezier(.22,.61,.36,1);
        z-index: 4990; /* below header, above overlay */
    }

        #mobileMenu.active {
            transform: scaleY(1) !important;
        }

    /* Overlay: dim only the area BELOW the header */
    #mobileMenuOverlay {
        display: block !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: var(--header-h, 120px); /* starts below header */
        background: rgba(0,0,0,.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s cubic-bezier(.4,0,.2,1), visibility 0s linear .18s;
        z-index: 4980;
    }

        #mobileMenuOverlay.active {
            opacity: 1;
            visibility: visible;
            transition: opacity .22s cubic-bezier(.22,.61,.36,1), visibility 0s;
        }

    /* Keep the hamburger always tappable */
    .hamburger-menu {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5010;
        background: transparent;
        border: 0;
    }
}


.hamburger-menu {
    background: transparent;
    border: 0;
    color: #2085CC;
    padding: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .hamburger-menu svg {
        width: 100%;
        height: 100%;
        fill: currentColor
    }

    .hamburger-menu .icon-close {
        display: none
    }

    .hamburger-menu.active .icon-hamb {
        display: none
    }

    .hamburger-menu.active .icon-close {
        display: block
    }


.hamburger-menu {
    background: transparent;
    border: 0;
    padding: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2085CC; /* <- blue color */
    cursor: pointer;
}

    .hamburger-menu svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
    }

    .hamburger-menu .icon-close {
        display: none;
    }
    /* hidden by default */
    .hamburger-menu.active .icon-hamb {
        display: none;
    }
    /* hide hamburger when open */
    .hamburger-menu.active .icon-close {
        display: block;
    }
/* show X when open */
/* Make the button blue, borderless, backgroundless */
.hamburger-menu {
    position: relative;
    background: transparent;
    border: 0;
    padding-bottom: 8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2085CC; /* blue */
    cursor: pointer;
    z-index: 9999; /* keep tappable */
}

    /* Ensure the SVG inherits the blue */
    .hamburger-menu svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
    }

    /* By default, the pseudo "X" is hidden */
    .hamburger-menu::before,
    .hamburger-menu::after {
        content: "";
        position: absolute;
        width: 24px;
        height: 2px;
        background: currentColor;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease, transform .2s ease;
    }

/* When the mobile drawer is open (#mobileMenu.active), show a blue X */
body:has(#mobileMenu.active) .hamburger-menu svg {
    opacity: 0;
}
/* hide hamburger */
body:has(#mobileMenu.active) .hamburger-menu::before {
    opacity: 1;
    transform: translate(-50%,-50%) rotate(45deg);
}

body:has(#mobileMenu.active) .hamburger-menu::after {
    opacity: 1;
    transform: translate(-50%,-50%) rotate(-45deg);
}
.header-main-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 15px; /* mobile default */
}

/* Desktop spacing */
@media (min-width: 768px) {
    .header-main-bar {
        padding-right: 35px;
    }
}

/* Logo */
.site-logo {
    width: 190px;
    height: auto;
    max-width: 100%;
    padding:0 0 0 0;
}

/* Desktop extra spacing for logo */
@media (min-width: 768px) {
    .site-logo {
        padding-right: 40px;
    }
}


.header-main-bar-left img {
    width: 24px;
    height: auto;
}

@media (min-width: 768px) {
    .header-main-bar-left img {
        width: 28px;
    }
}

/*new footer*/
.footer {
    position: relative;
    margin: 0 auto;
    padding: 50px 50px 20px;
    background-color: #0b65a5;
    color: #fff;
}

.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

.footer-logo {
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .footer-logo a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .footer-logo img {
        display: block;
        width: 100%;
        max-width: 150px;
        height: auto;
        object-fit: contain;
    }

.links-column {
    min-width: 180px;
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.links-title span {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.links-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .links-content .link,
    .links-content a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        line-height: 1.7;
    }

        .links-content .link:hover,
        .links-content a:hover {
            text-decoration: underline;
        }

.links-contact {
    text-align: start;
}

    .links-contact a {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .links-contact img {
        display: block;
        width: auto;
        max-width: 20px;
        height: auto;
        flex-shrink: 0;
    }

.contact-text {
    display: inline-block;
}

.contact-phone {
    direction: ltr;
    unicode-bidi: embed;
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.subscribe-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.subscribe-title {
    font-size: 20px;
    font-weight: 700;
}

.subscribe-form {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 320px;
    width: 100%;
}

    .subscribe-form input {
        width: 100%;
        height: 40px;
        padding-inline: 12px 110px;
        border: 1px solid #fff;
        background-color: transparent;
        color: #fff;
        font-size: 14px;
    }

        .subscribe-form input::placeholder {
            color: #fff;
        }

    .subscribe-form button {
        position: absolute;
        inset-inline-end: 10px;
        width: 90px;
        height: 32px;
        border: 0;
        border-radius: 0;
        background-color: #fff;
        color: #0b65a5;
        font-size: 16px;
        cursor: pointer;
    }

.socials-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-inline-end: 15px;
    margin-bottom: 15px;
}

.socials-text {
    font-size: 20px;
    font-weight: 700;
}

.footer-bottom {
    padding-top: 20px;
}

.footer-bottom-left {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.policies-links a {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
}

.copyright {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .copyright span {
        font-size: 12px;
        font-weight: 400;
    }

.floating-icon {
    position: absolute;
    inset-block-start: -50px;
    inset-inline-start: 30px;
}

    .floating-icon img {
        display: block;
        width: 100px;
        height: 100px;
        cursor: pointer;
    }

@media (max-width: 991px) {
    .footer {
        padding: 40px 30px 20px;
    }

    .footer-main {
        gap: 24px;
        padding-bottom: 40px;
    }

    .footer-logo {
        flex: 0 0 140px;
    }

        .footer-logo img {
            max-width: 130px;
        }

    .links-title span {
        font-size: 18px;
    }

    .links-content .link,
    .links-content a {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 30px 20px 20px;
    }

    .footer-main {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 28px;
    }

    .footer-logo {
        flex: 0 0 auto;
        order: -1;
    }

        .footer-logo img {
            max-width: 120px;
        }

    .links-column {
        width: 100%;
        min-width: 0;
        align-items: center;
    }

    .links-content {
        align-items: center;
    }

    .links-contact {
        text-align: center;
    }

        .links-contact a {
            justify-content: center;
        }

    .left-column {
        align-items: center;
        width: 100%;
    }

    .subscribe-form {
        max-width: 320px;
    }

    .footer-bottom-left {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .floating-icon {
        inset-block-start: -30px;
        inset-inline-start: 15px;
    }

        .floating-icon img {
            width: 70px;
            height: 70px;
        }
}

@media (max-width: 480px) {
    .footer {
        padding: 25px 15px 15px;
    }

    .links-title span {
        font-size: 17px;
    }

    .links-content .link,
    .links-content a {
        font-size: 14px;
    }

    .subscribe-form input {
        padding-inline: 10px 100px;
        font-size: 13px;
    }

    .subscribe-form button {
        width: 82px;
        font-size: 14px;
    }

    .copyright {
        flex-direction: column;
        gap: 6px;
    }
}