* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    margin: 0;
    font-family: Segoe UI;
  /* direction: rtl; */ 
  }
.home {
    overflow-x: hidden;
    width: 100%;
}
  /* Top Header */
.top-header {
    padding: 0 15px;
        background: #131921;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
   }
/* Logo */
.nav-left {
  display: flex;
  align-items: center;
  gap: 5px;   
}
.logo img {
  height: 35px;
  width: 120px;
  padding-top: 10px;
  padding-inline-start: 5px;
}
.logo:hover {
  border: 1px solid white;
  border-radius: 2px;
}
/* location*/
.location {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.location:hover {
  border: 1px solid white;
  border-radius: 2px;
}
.fa-location-dot {
  font-size: 18px;
  margin-top: 8px; 
}
.loc-text {
  display: flex;
  flex-direction: column; 
}
.loc-text p {
  font-size: 12px;
  color: #ccc;
  margin: 0;
}
.loc-text h3 {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  color: white;
}
/* Search */
.nav-fill {
  flex: 1;
  display: flex;
  margin: auto 20px;
}
.nav-search {
  display: flex;
  width: 100%;
  height: 40px;
  background-color: white;
  border-radius: 4px;
  overflow: hidden; 
  /* direction: rtl; */
}
.nav-search-facets {
  position: relative;
  background-color: #f3f3f3;
  color: #555;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-inline-end: 1px solid #ccc;
  cursor: pointer;
  flex-shrink: 0;
}
.custom-arrow{
  margin-inline-start: 3px;
}
.nav-search-facets select {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 100%;
  height: 100%;
  opacity: 0; 
  cursor: pointer;
  z-index: 2;
}
.nav-search input {
  flex: 1;
  border: none;
  padding: 0 10px;
  font-size: 15px;
  outline: none;
  min-width: 0;
}
.nav-search-submit {
  width: 45px;
  height: 100%;
  background-color: #febd69;
  border: none;
  cursor: pointer;
  flex-shrink: 0; 
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s;
  font-size: 12px;
  padding: 9px 12px;
  font-weight: bold;
  cursor: pointer;
  width: fit-content;   
  position: static;  
}
.nav-search-submit:hover {
  background-color: #f3a847;
}
.nav-search-submit i {
  color: #333;
  font-size: 18px;
}
.nav-search:focus-within {
  box-shadow: 0 0 0 2px #f3a847, 0 0 0 3px rgba(243, 168, 71, 0.5);
}
/* Right */
.nav-right {
  margin-inline-start: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}
/* Dropdown language */
.dropdown {
  position: relative;
  display: inline-block;
  /* direction: rtl; */
  font-family: sans-serif;
  cursor: pointer;
}
.par1-dropbtn{
  padding: 12px 0;
}
.par1-dropbtn:hover,
.account-show:hover,
.purchases:hover,
.cart:hover{
  border: 1px solid white;
  border-radius: 2px;
}
.par1-dropbtn b{
  color: white;
}
.par1-dropbtn img{
  padding-top: 5px;
}
.dropbtn {
  margin: 5px 0 ;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.dropdown p,
.dropdown label,
.dropdown span{
  color: #565959;
  font-size: 13px;
  font-weight: 500;
}
.dropdown-content .container{
  padding: 10px 0;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 60px;
  inset-inline-start: 0;
  background-color: white;
  min-width: 220px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  padding: 15px;
  z-index: 1;
  border-radius: 3px;
}
.arrow-up {
  width: 0; 
  height: 0; 
  border-inline-end: 8px solid transparent;
  border-inline-start: 8px solid transparent;
  border-bottom: 8px solid white;
  position: absolute;
  top: -8px;
  inset-inline-start: 50px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.lang-right {
  padding-inline-start: 5px;
  padding-top: 20px;
  font-size: 12px;
  color: #8c8b8b;
}
.change-country{
  margin: 10px 0;
  color: #0066c0;
  font-size: 12px;
  font-weight: bold;
}
.cloud {
    position: fixed;
    top: 60px;
    inset-inline-end: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.515);
    backdrop-filter: blur(1px);
    z-index: 9000;
    display: none;
}
.dropdown-content {
    z-index: 10000;
}
.cloud.show {
    display: block;
}
/* account dropdown */
.account {
  display: flex;
  align-items: center;
  position: relative;
}
.home .account-a h3, .cart-a h3, .purchases-a h3 , .cart-a i{
  text-decoration: none;
  color: white;
}
.home .account-a, .cart-a, .purchases-a{
  text-decoration: none;
}
.account-dropdown{
  display: flex;
  align-items: flex-end;
  gap: 2px;
  cursor: pointer;
}
.account-show{
  padding: 9px 0;
}
.account-right{
  padding-bottom: 10px;
  font-size: 12px;
  color: #8c8b8b;
}
.account p{
  font-size: 12px;
  color: white;
  margin: 0;
}
.account h3{
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  color: white;
}
 .account-content {
  width: 450px;
  display: none;
  position: absolute;
  top: 60px;
  inset-inline-end: -75px;
  background-color: white;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  padding: 30px;
  z-index: 10000;
  border-radius: 3px;
}
.arrow-up-account {
  width: 0; 
  height: 0; 
  border-inline-end: 8px solid transparent;
  border-inline-start: 8px solid transparent;
  border-bottom: 8px solid white;
  position: absolute;
  top: -8px;
  inset-inline-start: 310px;
}
.cont1-accout{
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
}
.cont1-accout p{
  color: #555;
  font-size: 13px;
}
.cont1-accout button{
  font-size: 12px;
  background-color: #ffd814;
  border: none;
  padding: 5px 50px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  width: fit-content;   
  position: static; 
}
.cont2-accout {
  display: flex;
  gap: 130px;
  margin-top: 20px;
}
.account-cont2{
  border-inline-start: 1px solid #ddd;
  padding-inline-start: 20px;
}
.cont2-accout a {
  font-size: 13px;
  display: block;
  text-decoration: none;
  color: #555;
}
.cont2-accout a:hover{
  color: orange;
  text-decoration: underline;
}
.account-content h3{
  color: black;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 7px;
}
.account:hover .account-content {
  display: block;
}
/* purchases */
.purchases{
  padding: 19px 3px 15px;
  font-size: 12px;
}
/* cart */
.cart {
    display: flex;
  align-items: center;
  padding: 15px 3px 13px;
}
.cart-icon {
    position: relative;
    font-size: 18px;
    color: var(--primary-color);
    cursor: pointer;
}
.cart-count {
    position: absolute;
    top: -8px;
    inset-inline-start: -8px;
    background-color: var(--primary-color);
    color: #f3a847;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}
.cart-text h3{
    font-size: 14px;
}
/* Bottom Header */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1500;
}
.sidebarall {
    height: 100%;
    width: 365px; /* عرض القائمة */
    position: fixed;
    z-index: 2000;
    top: 0;
    inset-inline-start: -380px;
    background-color: white;
    transition: 0.3s ease;
    overflow-y: auto; 
}
.sidebarall.open {
    inset-inline-start: 0;
}
.sidebar-headerall {
    background-color: #232f3e;
    color: white;
    padding: 15px 30px;
    font-size: 19px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px;
}
.close-btn {
    position: absolute;
    inset-inline-end: -45px;
    top: 10px;
    font-size: 40px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}
.sidebar-contentall h3 {
    padding: 15px 30px 5px;
    font-size: 18px;
    color: #111;
}
.sidebar-contentall ul { list-style: none; padding: 0; }
.sidebar-contentall ul li a {
    padding: 13px 30px;
    color: #444;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
.sidebar-contentall ul li a:hover {
    background-color: #eaeded;
}
.sidebar-contentall hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 10px 0;
}
.bottom-header {
  background-color: #232f3e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 40px;
  /* direction: rtl; */
}
.navbar {
  /* padding-inline-end: 20px; */
  display: flex;
  align-items: center;
  gap: 9px;
}
.navbar a {
  display: inline-block;
  color: white;
  font-style: normal;
  font-family: 'Segoe UI';
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 5px;
  border: 1px solid transparent; 
  text-wrap: nowrap;
  transition: border 0.1s ease-in-out;
  cursor: pointer;
}
.navbar a:hover {
  border: 1px solid white;
  border-radius: 2px;
}
.navbar .menu-dropdown {
  font-weight: bold;
}
.navbar .menu-dropdown i {
  font-weight: bold;
  font-size: 16px;
  margin-inline-end: 5px;
}
.e3lan{
    margin-inline-start: 66px;
    padding: 0 10px;
}
.e3lan img {
  width: 370px;
  display: block;
}
.e3lan:hover {
  border: 1px solid white;
  cursor: pointer;
}
/* home */
.main{
  background-color: #eee;
  padding: 0 10px;
}
/* slider */
   .slider {
    position: relative;
    width: 100%;
    height: 300px;
}
.slide {
    position: absolute;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    opacity: 0;
    object-position: center;
}
.slides img{
  width: 1500px;
  height: 600px;
}
.fog-overlay {
  position: absolute;
  bottom: -300px; 
  inset-inline-end: 0;
  width: 100%;
  height: 100%;  
  background: linear-gradient(to bottom, 
              rgba(255, 255, 255, 0) 0%, 
              #f3f3f3 100%); 
}
.slides {
    width: 100%;
    height: 100%;
    position: relative;
}
.slide.active {
    display: block;
    opacity: 1;
}
.btns  button {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    font-size: 50px;
    background:none;
    border: none;
    cursor: pointer;
    padding: 10px;
}
  button i{
    font-size: 40px;
    font-weight: 100;
    text-shadow: white;
    color: #282a2e;
    text-shadow: 1px 1px 3px white;
}
.btns  .prev {
    inset-inline-end: 35px;
}
.btns  .next {
    inset-inline-start: 25px;
}
/* حاوية الكروت الـ 8 */
.box-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 20px;
    margin-top: -50px;
    position: relative;
    z-index: 2;
}
.box-card {
    background: white;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}
.box-card h3 {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 15px;
}
.offer-card {
    background-color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.box-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px;
}
.large-item {
    grid-column: span 3; 
    margin-bottom: 15px; 
}
.large-item img {
    width: 100%;
    height: 200px;
    /* object-fit: cover;  */
}
.small-item img {
    width: 100%;
    height: 80px;
    object-fit: contain; 
    background-color: #f3f3f3; 
}
/* تنسيق الـ 4 صور داخل الكارت */
.box-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    flex-grow: 1;
}
.box-grid .item img {
    width: 100%;
    height: 100px;
    object-fit: contain;
}
.box-grid .item p {
    font-size: 12px;
    margin-top: 5px;
}
/* تنسيق الصورة الواحدة الكبيرة */
.single-img {
    flex-grow: 1;
}
.single-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box-card a {
    color: #007185;
    text-decoration: none;
    font-size: 13px;
    margin-top: 15px;
}
/* lineslide */
.product-slider{
  display: flex;
  align-items: center;
  margin: 10px 20px;
  
}
.product-slider-container {
    position: relative;
    width: 100%;
    background: white;
    width: 100%;
    padding: 20px 25px 10px 25px;
    margin: 15px 0;
}
.product-slider-container h2{
  font-weight: bold;
  font-size: 23px;
  font-family: 'Segoe UI';
  margin-bottom: 5px;
}
.product-slider-container a{
  color: #007185;
    text-decoration: none;
    font-size: 13px;
    margin-top: 15px;
}
.product-wrapper {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 15px;
    overflow-x: auto; /* ده اللي بيعمل السكرول اللي تحت */
    scroll-behavior: smooth; /* عشان لما تدوسي على السهم يتحرك بنعومة */
}
.product-wrapper::-webkit-scrollbar {
    height: 6px;
}
.product-wrapper::-webkit-scrollbar-thumb {
    background: #b8b8b8;
    border-radius: 10px;
}
.product-card {
  padding: 5px 0;
    min-width: 200px; 
    background: white;
    text-align: center;
}
.product-card img {
    max-width: 100%;
    height: auto;
}
/* تنسيق الزراير */
.slider-btn {
    position: absolute;
    top: 38%;
    background: white;
    width: 47px;
    height: 100px;
    border-radius: 4px ;
    cursor: pointer;
    z-index: 10;
    border: none;
}
.slider-btn i{
  position: absolute;
  top: 40px;
  color: #8c8b8b;
  font-size: 25px;
  font-weight: bold;
}
.main .prev-btn { 
  inset-inline-end: 18px;
}
.main .prev-btn i{
  inset-inline-end: 17px;
}
.main .next-btn { 
  inset-inline-start: 18px; 
}
.main .next-btn i{ 
  inset-inline-start: 18px; 
}
.box-containerr {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 كروت في كل صف */
    gap: 20px;
    padding: 0 20px;
}
/* footer */
footer {
    position: relative;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #232f3e;
    width: 100%;
    color: white;
}
footer button, 
footer .part1, 
footer .part2 {
  position: static !important;
  float: none !important;
}
.footer-signin .signin{
  width: 200px;
}
.footer-signin{
  background-color: white; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding: 20px 0;
    width: 100%;
    /* height: auto; */
}
.footer-signin P{
  color: black; /* عشان يبان على الخلفية البيضاء */
    font-size: 30px;
    font-weight: bold;
    /* margin-bottom: 40px; */
}
.footer-signin button{
  margin: 5px 0;
  border: none;
  font-size: 15px;
  background-color: rgb(252, 219, 30);
  border-radius: 25px;
  width: 200px;
  height: 28px;
  width: 250px;
  position: static;
}
.footer-signin span{
  color: black;
    font-size: 12px;
}
.footer-signin span a{
  color: #0066c0;
}
/* زرار الرجوع للأعلى */
.back-to-top {
    width: 100%;
    background-color: #37475a;
    color: white;
    padding: 13px;
    border: none;
    cursor: pointer;
    font-size: 13px;
}
.back-to-top:hover {
    background-color: #485769;
}
/* توزيع الأعمدة */
.footer-links {
    display: flex;
    justify-content: space-evenly;
    width: 80%;
    padding: 40px 0;
    border-bottom: 1px solid #3a4553;
}
.link-column {
    display: flex;
    flex-direction: column;
}
.link-column h3 {
    color: white;
    font-size: 16px;
    margin-bottom: 15px;
}
.link-column a {
    color: #e2e2e2; /* رمادي فاتح جداً */
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 10px;
}
.link-column a:hover {
    text-decoration: underline;
}
/* جزء اللوجو والإعدادات */
.footer-settings {
    background-color: #232f3e; /* نفس لون الفوتر */
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 30px 0;
    border-top: 1px solid #3a4553; /* خط فاصل بسيط */
    gap: 50px;
}
.footer-logo {
    width: 120px;
}
.settings-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.setting-item {
  display: flex;
  justify-content: center;
  align-items: center;
    color: rgb(234, 232, 232);
    font-size: 13px;
    border: 1px solid #848688;
    padding: 5px 10px;
    border-radius: 3px;
}
.settings-buttons p {
  padding: 0 5px
}
.settings-buttons .bar1 img{
  width: 18px;
  /* padding-inline-start: 15px; */
}
.settings-buttons .bar2 img{
  width: 20px;
  /* padding-inline-start: 5px; */
}
/* الجزء الأسود السفلي */
.footer-services {
    /* height: 85px; */
    background-color: #131a22;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 200px);
    padding: 20px 268px 0;
}
.service-item {
    width: 140px;
    padding-top:10px ;
    font-size: 12px;
    color: #999;
    font-weight: bold;
}
.service-itemm {
    width: 140px;
    padding-top:10px ;
    font-size: 12px;
    color: #999;
    font-weight: bold;
}
.service-item span, .service-itemm span {
    display: block;
    color: white;
}
/* الحقوق */
.footer-copy {
    background-color: #131a22;
    width: 100%;
    text-align: center;
    padding: 30px 0;
    font-size: 12px;
    /* font-weight: bold; */
}
.policy-links a {
    color: #ccc;
    text-decoration: none;
    margin: 0 10px;
}
.footer-copy p{
  color: #ccc;
}
.footer-settings a{
  text-decoration: none;
}


/* aside */
aside {
  border-inline-end: 1px solid #b8b8b8;
  padding-inline-end: 10px;
  line-height: 25px;
  font-family: 'Times New Roman', Times, serif;
  width: 400px;
}
aside h3{
  font-family: 'Segoe UI';
  padding-top: 5px;
  font-weight: 900;
  font-size: 17px;
}
aside ul {
  list-style-type: none; 
}
aside ul li a,
.aside-part3 a,
.fa-solid fa-chevron-left {
  font-size: 13.5px;
  text-decoration: none;
  font-weight: 490;
  color: black;
}
aside ul li a:hover,
.aside-part3 a:hover{
  color: rgb(245, 160, 3);
}
.aside-part2{
  padding-inline-start: 17px;
}
.aside-part2 .p1{
  padding-inline-start: 20px;
}
.aside-part3 .square{
  margin-top: 5px;
  display: inline-block;
  margin-inline-end: 4px;
  width: 16px;
  height: 17px;
  border: 2px solid #b8b8b8;
  border-radius: 3px;
}
.aside-part3 .square:hover{
  border: 4px solid #049eb9;
}
.fa-solid fa-star,
.fa-star{
  color: rgb(245, 160, 3);
}





.home-for-mobile{
  display: none;
}



@media (max-width: 768px) {
  .sidebar-overlay{
    display: none;
  }
    .header, .footer, .aside{
        display: none;
    }
    .header-for-phone, .footer-mobile {
        display: block;
    }
    .header-for-phone {
    background-color: #232f3e;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* direction: rtl; */
    width: 100%;
    box-sizing: border-box;
  }
  .header-top-for-phone {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 12px 5px 12px;
  }
  .header-top-for-phone a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
  }
  .menu-icon i {
    margin-inline-end: 40px;
    font-size: 22px;
    color: #fff;
  }
  .logo-for-phone img {
    margin-inline-end: 60px;
    height: 30px;
    object-fit: contain;
  }
  .user-cart-for-phone a > div {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .user-cart-for-phone p {
    font-size: 15px;
    color: #ffffff;
    white-space: nowrap;
  }
  .user-cart-for-phone .user-icon i {
    font-size: 20px;
  }
  .cart-for-phone .cart {
    position: relative;
    padding: 0 20px;
  }
  .cart-for-phone .cart-icon i {
    font-size: 22px;
  }
  .cart-for-phone .cart-count {
    position: absolute;
    top: -12px;
    inset-inline-start: -5px;
    background-color: transparent;
    color: #f08804;
    font-weight: bold;
    font-size: 14px;
  }
  .search-bar-for-phone {
    display: flex;
    padding: 5px 12px 10px 12px;
  }
  .search-bar-for-phone input {
    flex: 1;
    height: 44px;
    border: none;
    padding: 0 12px;
    font-size: 15px;
    border-start-start-radius: 6px;
    border-end-start-radius: 6px;
    outline: none;
    background-color: #ffffff;
  }
  .search-bar-for-phone button {
    width: 50px;
    height: 44px;
    background-color: #ffb74d;
    border: none;
    border-start-end-radius: 6px;
    border-end-end-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search-bar-for-phone button i {
    font-size: 18px;
    color: #111;
  }
  .navbar-for-phone {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 12px;
    background-color: #37475a;
    scroll-behavior: smooth;
  }
  .navbar-for-phone::-webkit-scrollbar {
    display: none;
  }
  .navbar-for-phone a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .navbar-for-phone a i {
    font-size: 10px;
    color: #ccc;
  }
  .location-bar-for-phone {
    display: flex;
    align-items: center;
    background-color: #293847;
    padding: 8px 12px;
    gap: 8px;
  }
  .location-bar-for-phone i.fa-location-dot {
    color: #ffffff;
    font-size: 15px;
  }
  .location-bar-for-phone p {
    color: #ffffff;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
  }
  .location-bar-for-phone i.fa-chevron-down {
    font-size: 10px;
    color: #ffffff;
  }
    .footer-mobile {
    background-color: #232f3e;
    color: #ffffff;
    /* direction: rtl; */
    font-family: sans-serif;
    width: 100%;
    box-sizing: border-box;
 }
 .back-to-top {
    background-color: #37475a;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
 }
 .back-to-top button {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    
 }
 .footer-links-mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 25px 15px;
    gap: 20px;
    background-color: #232f3e;
    border-bottom: 1px solid #3a4b5d;
 }
 .links-column-mobile {
    display: flex;
    flex-direction: column;
    gap: 14px;
 }
 .links-column-mobile a {
    color: #dddddd;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
 }
 .footer-settings-mobile {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px 15px;
    background-color: #232f3e;
    border-bottom: 1px solid #3a4b5d;
 }
 .setting-item-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #ffffff;
 }
 .footer-bottom-mobile {
    background-color: #131a22;
    padding: 25px 15px;
    text-align: center;
 }
 .login-prompt {
    font-size: 14px;
    margin: 0 0 20px 0;
    color: #ffffff;
 }
 .login-prompt a {
    color: #ffffff;
    text-decoration: underline;
 }
 .legal-links-mobile {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
 }
 .legal-links-mobile a {
    color: #b1b3b6;
    text-decoration: none;
    font-size: 12px;
 }
 .copyright-text {
    font-size: 11px;
    color: #b1b3b6;
    margin: 0;
    line-height: 1.5;
 }
 .footer-settings-mobile a{
  text-decoration: none;
  display:flex;
  flex-direction:row;
  gap: 15px;
 }
}




.educational-notice{
  background-color: #f3f3f3;
  padding: 10px 20px;
  text-align: center;
}
.educational-notice h3{
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}
.educational-notice p{
  font-size: 13px;
  color: #555;
}