body {
     font-family: "Tajawal", Arial, sans-serif;
     background: #fff;
     color: #333;
 }

 .hero {
     position: relative;
     height: 500px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     text-align: center;
 }

 /* Active state for menu cards */
 .menu-cards .menu-card.active {
     background-color: #f0f0f0;
     border-color: #ee8a18;
     box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
     transform: translateY(-2px);
 }

 /* Optional hover effect */
 .menu-cards .menu-card:hover {
     cursor: pointer;
     background-color: #f8f9fa;
     transition: all 0.3s ease;
 }

 /* header */
 .btn-lang {
     background-color: #B08F64;
     color: #fff;
     border-radius: 40px;
 }

 .hero::before {
     content: "";
     position: absolute;
     inset: 0;
 }

 .hero-content {
     position: relative;
     z-index: 10;
 }

 .hero-logo {
     width: 40%;
     margin-bottom: 20px;
 }

 .hero-text {
     color: var(--light-white);
     font-size: 18px;
     max-width: 700px;
     margin: auto;
 }

 /* ===== MENU CARDS ===== */
 .menu-cards {
     margin-top: -21px;
     padding: 0 15px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 32px;
     position: relative;
 }

 .menu-card {
     background: #fff;
     color: var(--blue-magentan);
     width: 150px;
     padding: 25px 15px;
     text-align: center;
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
     font-size: 16px;
     transition: 0.2s;
     border-color: #301545;
     border-top-left-radius: 10px;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 10px;
     border-bottom-left-radius: 0px;
     border: 1px solid #301545;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
 }

 .menu-card:hover {
     transform: translateY(-5px);
 }

 .menu-card img {
     width: 45px;
     margin-bottom: 10px;
     flex-shrink: 0;
 }

 .menu-card>*:not(img) {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     width: 100%;
 }

 .section {
     padding: 60px 15px;
     max-width: 1200px;
     margin: auto;
 }

 .section h2 {
     font-family: 'PingAR', sans-serif;
     font-weight: 900;
     color: var(--light-brown);
     margin-bottom: 25px;
 }

 .vision-content {
     color: var(--blue-magentan);
     font-size: 18px;
 }

 .decorative-shape-right {
     right: -40px;
     z-index: 1;
     opacity: 0.8;
     width: 150px;
     height: auto;
     margin: -257px -129px 8px 14px;

 }

 /* English (LTR) */
 html[dir="ltr"] .decorative-shape-right {
     margin: -257px -102px 0px -168px;
     transform: scaleX(-1);
 }

 .decorative-shape {
     right: -40px;
     z-index: 1;
     opacity: 0.8;
     width: 150px;
     height: auto;
     margin: -299px 0px 0px 0px;

 }

 html[dir="ltr"] .decorative-shape {
     transform: scaleX(-1);
 }

 .goals-awards {
     background: url("../../img/websiteImages/goals-awards.svg") center/cover;
     color: var(--light);
     height: 205px;
     max-height: 250px;
 }

 .goals-awards-bg {
     background-color: var(--orange);
 }

 @media (max-width: 992px) {
     .menu-cards {
         justify-content: center;
     }
 }

 .awards-goals {
     background: url("../../img/websiteImages/bgSection2.svg") center/cover;
     position: relative;
     overflow: hidden;
 }

 @media (max-width: 768px) {
     .decorative-shape-right {
         display: none;
     }

     .themes-img {
         display: none;
     }
 }

 .goal-card {
     background: #fde9e6;
     border-radius: 16px;
     padding: 30px;
     font-size: 18px;
     line-height: 1.8;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     text-align: center;
 }

 .goal-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
 }

 .goal-pill {
     background: #ffffff;
     border-radius: 14px;
     padding: 14px 18px;
     display: flex;
     height: 100%;
     align-items: center;
     justify-content: flex-start;
     gap: 10px;
     color: var(--blue-magentan);
     transition: transform 0.3s ease, background 0.3s ease;
     cursor: pointer;
 }


 .row-gap-5>[class*='col-'] {
     display: flex;
 }

 .goal-pill:hover {
     transform: scale(1.05);
     background: #fbd3cf;

 }

 .goal-pill img {
     width: 28px;
     height: 28px;
     object-fit: contain;
     transition: transform 0.3s ease;
 }

 .goal-pill:hover img {
     transform: rotate(15deg);
 }

 .award-card {
     width: 200px;
     height: 150px;
     cursor: pointer;
     transition: all 0.3s ease, background 0.3s ease;
     /* smooth bg change */
     border-radius: 12px;
     position: relative;
     color: white;
 }

 .award-card:not(.active):hover {
     transform: translateY(-5px);
     opacity: 0.95;
 }

 .award-card.active {
     transform: none;
     opacity: 1;
     box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.7);
     color: black;
 }

 .award-card.active:hover {
     transform: none;
 }

 .hotel-establishments-card {
     background: url("../../img/websiteImages/hotelEstablishmentsCategory.svg") center/cover;
     color: white;
 }

 .digital-promotional-card {
     background: url("../../img/websiteImages/digitalPlatforms.svg") center/cover;
     color: white;
 }

 .tourist-villages-card {
     background: url("../../img/websiteImages/tourismCompanies.svg") center/cover;
     color: white;
 }

 .tourism-guidance-card {
     background: url("../../img/websiteImages/touristGuidingCategory.svg") center/cover;
     color: white;
 }

 .tourism-companies-card {
     background: url("../../img/websiteImages/tourismCompaniesCategory.svg") center/cover;
     color: white;
 }

 .sub-category-list {
     display: none;
     min-height: 100px;
     background-color: #F9F9F9;
     border-radius: 18px;
     width: 94%;
     padding: 0px 0px 15px 0;
 }

 .sub-category-list.active {
     display: flex;
 }

 .sub-category-item {
     font-size: 1.1rem;
 }

 .sub-category-icon {
     width: 24px;
     height: 24px;
 }

 .sub-categories-wrapper {
     border: 2px solid #35BDB1;
     border-radius: 18px;
 }

 @media (max-width: 575px) {
     .award-card {
         width: 90vw;
     }

     .img-center {
         display: none;
     }
 }

 .grid-item {
     gap: 10px;
     border-radius: 14px;
     transition:
         transform 0.3s ease,
         box-shadow 0.3s ease,
         background-color 0.3s ease;
     cursor: pointer;
 }

 .grid-item:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
     background-color: #f8fdfd;
 }

 /* Optional: click effect */
 .grid-item:active {
     transform: translateY(-2px) scale(0.98);
 }

 /* Icon animation */
 .grid-item img {
     width: 48px;
     height: 48px;
     transition: transform 0.3s ease;
 }

 .grid-item:hover img {
     transform: scale(1.15);
 }

 /* Text subtle effect */
 .grid-item span {
     transition: color 0.3s ease;
 }

 .grid-item:hover span {
     color: var(--light-brown);
 }

 .section-conditions {
     background: #0b2a3c;
 }

 @media (min-width: 992px) {
     .section-conditions {
         background: url('../../img/websiteImages/bg-section4.svg') no-repeat center center;
         background-size: cover;
     }

     /* Forces images to be the same height and 50/50 width of their container */
     .same-size-img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         /* This prevents distortion */
         display: block;
     }
 }

 .conditions-list {
     font-size: small;
     list-style-position: outside;
     padding-inline-start: 1.5rem;
 }

 .img-bg {
     background-color: var(--blue-magentan);
     height: -webkit-fill-available;
 }

 .img-Advantages {
     background-color: var(--light-brown);
 }

 .advantages-title {
     color: #ffffff;
     line-height: 1.4;
     text-align: right;
 }

 [dir="ltr"] .advantages-title {
     text-align: left;
     padding: 0 0 0 20px;
 }

 .name {
     font-size: 0.95rem;
     line-height: 1.4;
 }

 .advantages-name {
     color: #ffffff;
     font-size: 0.95rem;
     line-height: 1.4;
 }

 .img-center {
     position: absolute;
     width: 26%;
     right: 434px;
 }