/* 

TemplateMo 586 Scholar

https://templatemo.com/tm-586-scholar

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}
















html,
body {
  font-family: 'Cairo', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Cairo', sans-serif;

}

::selection {
  background: #008080;
  color: #fff;
}

::-moz-selection {
  background: #008080;
  color: #fff;
}

.section {
  padding-top: 30px;
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 60px;
}

.section-heading h2 {
  font-size: 36px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 20px 0;
  line-height: 44px;
}

.section-heading h2 em {
  color: #008080;
  font-style: normal;
}

.section-heading h6 {
  color: #008080;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

.main-button a {
  display: inline-block;
  background-color: #fff;
  color: #008080;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 25px;
  border-radius: 20px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #008080;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #008080;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #008080;
  border-radius: 50%;
}



/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: #008080 !important;
  border-radius: 0px 0px 25px 25px;
  height: 80px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  position: absolute;
  background-color: transparent;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  font-size: 20px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-right: 20px;
  padding-right: 20px;

  border-right: 1px solid rgba(250, 250, 250, 0.3);
}

.background-header .main-nav .logo,
.background-header .main-nav #search {
  margin-top: 18px;
}

.header-area .main-nav #search {
  position: relative;
}

.header-area .main-nav #search input {
  background-color: rgba(255, 255, 255, 0.10);
  height: 44px;
  width: 250px;
  border-radius: 23px;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  padding: 0px 20px 0px;
}

.header-area .main-nav #search input::placeholder {
  color: rgba(250, 250, 250, 0.75);
}

.header-area .main-nav #search i {
  position: absolute;
  color: #fff;
  right: 20px;
  top: 15px;
  font-size: 16px;
}

.header-area .main-nav ul.nav {
  border-radius: 0px 0px 25px 25px;
  flex-basis: 100%;
  margin-right: 0px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 5px;
  padding-right: 5px;
  height: 40px;
  line-height: 40px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  font-weight: 300;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;

  /* تطبيق تأثير الزجاجية على الهيدر الشفاف */
  background: rgba(92, 107, 115, 0.1);
  /* لون الرمادي المزرق الداكن (10%) */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #000000;
  /* لون النص هو الرمادي المزرق الداكن لضمان التباين */
  border: transparent;
  /* تأكد من عدم وجود حدود */
  outline: none !important;
  /* إزالة الإطار الأزرق */

  letter-spacing: .25px;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

/* لتأثير التحويم (Hover) في الهيدر الشفاف */
.header-area .main-nav .nav li:hover a {
  color: #fff !important;
  /* النص أبيض */
  background-color: #8ED0CC;
  /* خلفية مرجانية عند التحويم */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.background-header .main-nav .nav {
  margin-top: 20px;
}

.background-header .main-nav .nav li {
  height: 80px;
  line-height: 80px;
}

.header-area .main-nav .nav li:hover a {
  opacity: 0.8;
}

.header-area .main-nav .nav li a.active {
  color: #fff;
  background-color: #008080; /* A clear, solid background color */
  opacity: 1;
}

.background-header .main-nav .nav li:hover a {
  opacity: 0.8;
}

/* التحكم بالروابط في الهيدر الثابت (عند الهبوط) */
.background-header .main-nav .nav li a {
  /* تأثير الزجاجية على الخلفية المرجانية */
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #fff !important;
  /* لون النص أبيض ليبرز على الخلفية المرجانية */
  border: none;
  opacity: 1;
}

/* حالة الرابط النشط عند الثبات */
.background-header .main-nav .nav li a.active,
.background-header .main-nav .nav li:hover a {
  color: #fff !important;
  background-color: #8ED0CC;
  /* استخدام النعناعي كلون تمييز واضح */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

.visible {
  display: inline !important;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 2px;
    padding-right: 2px;
  }

  .header-area .main-nav .nav li a {
    padding-left: 10px;
    padding-right: 10px;
  }

}

@media (max-width: 767px) {

  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #F4FDFD;
  }

  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 400;
    color: #1e1e1e;
    background-color: #F4FDFD;
    border-radius: 0px 0px 25px 25px;
  }

  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #F4FDFD;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }

  .background-header .main-nav .nav li:last-child,
  .header-area .main-nav .nav li:last-child {
    border-radius: 0px 0px 25px 25px;
  }

  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }

  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }

  .background-header .main-nav .logo {
    top: 0px;
  }

  .background-header .main-nav .border-button {
    top: 0px !important;
  }

  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #008080 !important;
    opacity: 1;
  }

  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }

  .header-area {
    background-color: transparent;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 0px;
    margin-top: 30px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }

  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

/* تنسيقات للكمبيوتر */
.video-container {
  position: absolute;
  width: 260px;
  height: 220px;
  top: -70px;
  left: 0;
  overflow: hidden;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-style: none;
  border-bottom-width: 0;
  border-right-style: none;
  border-right-width: 0;
  border-left-style: none;
  border-left-width: 0;
  border-top-style: none;
  border-top-width: 0;
  box-sizing: border-box;
  color: rgb(33, 37, 41);
  display: block;
  font-family: Cairo, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  max-width: 260px;
  outline-style: none;
  outline-width: 0;
  padding: 0;
  position: absolute;
  text-align: right;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* تنسيقات للهواتف */
@media screen and (max-width: 860px) {

  /* الخطوة 1: ضمان أن خلفية القائمة المنسدلة نفسها فاتحة (بيضاء مثلاً) */
  .header-area .main-nav .nav {
    background-color: #f7f7f7 !important;
    /* خلفية بيضاء خفيفة للقائمة بالكامل */
  }

  /* الخطوة 2: استهداف الروابط بقوة لضمان لون داكن وواضح */
  .header-area .main-nav .nav li a,
  .header-area .main-nav .nav li a:link,
  .header-area .main-nav .nav li a:visited {
    /* جعل لون النص داكناً (الأخضر البحري) لضمان التباين على الخلفية الفاتحة */
    color: #008080 !important;
    /* إزالة أي خلفيات أو ظلال متبقية من تأثير الزجاجية */
    background: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 10px 15px !important;
    /* لزيادة وضوح مساحة الضغط */
  }

  /* التأكد من أن النص النشط أو عند التمرير يظل واضحاً */
  .header-area .main-nav .nav li a.active,
  .header-area .main-nav .nav li:hover a {
    color: #fff !important;
    /* لون النص أبيض عند التحديد */
    background-color: #008080 !important;
    /* خلفية داكنة عند التحديد */
  }

  /* الأكواد الأصلية */
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }

  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
}

.main-banner {
  /* تدرج مُحسَّن: يبدأ بالنعناعي و يجبر اللون الأبيض النقي على الظهور من 75% وحتى 100% لإزالة الخط الفاصل */
  background-image: linear-gradient(145deg, #8ED0CC 0%, #FFFFFF 75%, #FFFFFF 100%);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 170px 0px 120px 0px;
}

.main-banner .item-1 {
  background-image: url(../images/banner-item-01.avif);
}

.main-banner .item-2 {
  background-image: url(../images/banner-item-02.avif);
}

.main-banner .item-3 {
  background-image: url(../images/banner-item-03.avif);
}

.main-banner .item {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 25px;
  padding: 100px 100px;
  margin-left: 130px;
  background-attachment: fixed;
}

.main-banner .item span.category {
  background-color: #008080;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 50px;
}

.main-banner .item h2 {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 70px;
  width: 60%;
  margin-bottom: 40px;
}

.main-banner .item p {
  color: #fff;
  width: 65%;
}

.main-banner .item .buttons {
  display: flex;
  margin-top: 50px;
}

.main-banner .item .buttons .main-button {
  margin-right: 30px;
}

.main-banner .item .buttons .main-button a {
  font-size: 14px;
  color: #008080;
  background-color: #fff;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0px 25px;
  border-radius: 25px;
  font-weight: 500;
}

.main-banner .item .buttons .icon-button i {
  color: #008080;
  background-color: #fff;
  display: inline-block;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 16px;
}

.main-banner .item .buttons .icon-button a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.main-banner .owl-nav {
  position: absolute;
  max-width: 1320px;
  bottom: 23px;
  left: 0;
  text-align: right;
}

.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-nav .owl-prev i {
  position: absolute;
  bottom: 65px;
}

.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}


/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services .service-item:hover .icon img {
  margin-top: -10px;
}

.services .service-item {
  position: relative;
  margin-top: 95px;
}

.services .service-item .icon {
  width: 190px;
  height: 190px;
  display: inline-block;
  text-align: center;
  line-height: 190px;
  background-color: #008080;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: -95px;
}

.services .service-item .icon img {
  max-width: 86px;
  transition: all .2s;
}

.services .service-item .main-content {
  border-radius: 25px;
  padding: 80px 30px 50px 30px;
  background-color: #F4FDFD;
  margin-bottom: 30px;
  margin-right: 80px;
  transition: all .4s;
}

.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 30px;
  transition: all .4s;
  text-align: center;
  /* إضافة هذا السطر لتوسيط النص */
}


.services .service-item p {
  color: #4a4a4a;
  margin-bottom: 25px;
}

/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/

.about-us {
  position: relative;
  padding: 0px;
  margin-top: 130px;
}

.about-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 84%;
  height: 100%;
  background-color: #F4FDFD;
  content: '';
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
}

.accordion {
  margin-top: -40px;
  margin-bottom: -40px;
  background-color: #008080;
  border-radius: 40px;
  padding: 80px 50px 50px 50px;
}

.accordion-item {
  background-color: #fff;
  border-radius: 40px !important;
  margin-bottom: 30px;
  border: none;
}

.accordion-item .accordion-button {
  outline: none;
  box-shadow: none;
  border-radius: 40px !important;
}

.accordion-button:not(.collapsed) {
  color: #008080;
  background-color: #fff;
}

h2.accordion-header button {
  padding: 15px 25px;
  font-family: 'Poppins';
  font-size: 16px;
  font-weight: 600;
}

.accordion-button::after {
  font-size: 18px;
  font-weight: 500;
  background-image: none;
  content: '+';
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background-color: #008080;
  color: #fff;
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
  line-height: 32px;
  content: '-';
}

.accordion-body {
  padding: 0px 25px 30px 25px;
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
  direction: rtl;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
span,
div {
  text-align: right;
}





.about-us .section-heading {
  margin-left: 60px;
  margin-bottom: 0px;
}

.about-us .section-heading .main-button {
  margin-top: 50px;
}


/* 
---------------------------------------------
Courses Style
--------------------------------------------- 
*/

.courses {
  margin-top: 160px;
}

.event_filter {
  text-align: center;
}

.event_filter {
  background-color: #F4FDFD;
  border-radius: 50px;
  padding: 15px 40px;
  list-style: none;
  margin: 0 auto 70px;
  max-width: max-content;
}

.event_filter li {
  display: inline-block;
  margin: 0px 20px;
}

.event_filter li a {
  font-size: 14px;
  font-weight: 500;
  color: #1e1e1e;
  transition: all .3s;
}

.event_filter li .event_filter li a.is_active,
.event_filter li a:hover {
  color: #008080;
}

.events_item .thumb {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
}

.events_item .thumb img {
  margin-bottom: -5px;
}

.events_item .thumb span.category {
  position: absolute;
  left: 30px;
  top: 30px;
  font-size: 14px;
  text-transform: uppercase;
  color: #008080;
  background-color: rgba(250, 250, 250, 0.95);
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: inline-block;
}

.events_item .thumb span.price {
  position: absolute;
  right: -30px;
  top: -50px;
  background-color: #008080f2;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: inline-block;
  transition: all .3s;
}

.events_item .thumb span.price h6 {
  margin-top: 72px;
  margin-left: 22px;
  font-size: 28px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  text-align: left;
  /* تحديد النص إلى اليسار */

}

.events_item .thumb span.price em {
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  vertical-align: top;
}

.events_item {
  background-color: #F4FDFD;
  border-radius: 25px;
  margin-bottom: 30px;
  position: relative;
  justify-content: center;
  align-items: center;
}

.events_item .down-content {
  padding: 20px 30px 25px 30px;
}

.events_item .down-content span.author {
  color: #008080;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 6px;
}

.events_item .down-content h4 {
  font-size: 22px;
  font-weight: 600;
  transition: all .3s;
}

.events_item:hover .down-content h4 {
  color: #008080;
}

.events_item:hover .thumb span.price {
  transform: scale(1.2);
}


/* 
---------------------------------------------
Facts Style
--------------------------------------------- 
*/

.fun-facts {
  position: relative;
  padding: 120px 0px 80px 0px;
  overflow: hidden;
}

.fun-facts:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 95%;
  height: 100%;
  background-color: #008080;
  content: '';
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}

.fun-facts:after {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 15%;
  opacity: 0.5;
  top: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.fun-facts .counter {
  text-align: center;
  margin-bottom: 40px;
}

.fun-facts h2 {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
}

.fun-facts h2::after {
  content: '+';
  margin-left: 5px;
}

.fun-facts p {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-top: 15px;
}


/* 
---------------------------------------------
Team Style
--------------------------------------------- 
*/

.team {
  margin-top: 100px;
  padding-top: 140px;
}

.team-member {
  position: relative;
}

.team-member:hover img {
  top: -120px;
}

.team-member img {
  max-width: 220px;
  border-radius: 50%;
  position: absolute;
  top: -110px;
  left: 50%;
  transform: translateX(-110px);
  transition: all .3s;
}

.team-member .main-content {
  border-radius: 25px;
  padding: 140px 30px 40px 30px;
  background-color: #F4FDFD;
  text-align: center;
}

.team-member .main-content span.category {
  color: #008080;
  font-size: 15px;
}

.team-member .main-content h4 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 15px;
}

.team-member .main-content ul li {
  display: inline-block;
  margin: 0px 2px;
}

.team-member .main-content ul li a {
  background-color: #fff;
  color: #008080;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all .3s;
}

.team-member .main-content ul li a:hover {
  background-color: #008080;
  color: #fff;
}


/* 
---------------------------------------------
Testimonials Style
--------------------------------------------- 
*/

.testimonials {
  position: relative;
  padding: 80px 0px;
  margin-top: 150px;
}

.testimonials:before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: #F4FDFD;
  content: '';
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
}

.testimonials .section-heading {
  margin-bottom: 0px;
  margin-left: 60px;
  vertical-align: middle;
}

.testimonials .section-heading p {
  margin-top: 50px;
}

.testimonials .item {
  background-color: #008080;
  border-radius: 25px;
  padding: 80px;
}

.testimonials .item p {
  font-size: 18px;
  line-height: 40px;
  color: #fff;
  font-style: italic;
  font-weight: 300;
  margin-bottom: 40px;
}

.testimonials .item img {
  border-radius: 50%;
  max-width: 100px;
  float: left;
  margin-right: 25px;
}

.testimonials .item span {
  display: inline-block;
  margin-top: 20px;
  font-size: 15px;
  color: #fff;
}

.testimonials .item h4 {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  margin-top: 8px;
}

.testimonials .owl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-5px);
  right: -25px;
  text-align: right;
}

.testimonials .owl-nav .owl-prev i,
.testimonials .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #008080;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.10);
  opacity: 1;
  transition: all .3s;
}

.testimonials .owl-nav .owl-prev i {
  position: absolute;
  bottom: 65px;
}

.testimonials .owl-nav .owl-prev i:hover,
.testimonials .owl-nav .owl-next i:hover {
  opacity: 1;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}


/* 
---------------------------------------------
Events Style
--------------------------------------------- 
*/

.events .section-heading {
  margin-bottom: 100px;
}

.events .item {
  background-color: #F4FDFD;
  border-radius: 25px;
  position: relative;
  padding: 40px;
  margin-bottom: 96px;
}

.events .item .image {
  position: relative;
}

.events .item .image img {
  position: absolute;
  border-radius: 25px;
  max-width: 260px;
  left: 0;
  top: -70px;
}

.events .item ul li {
  display: inline-block;
  width: 17.5%;
  vertical-align: middle;
}

.events .item ul li:first-child {
  width: 35%;
}

.events .item ul li:nth-of-type(2) {
  width: 28%;
}

.events .item ul li span.category {
  font-size: 14px;
  text-transform: uppercase;
  color: #008080;
  background-color: #fff;
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 20px;
}

.events .item ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.events .item ul li span {
  display: inline-block;
  font-size: 14px;
  color: #4a4a4a;
  margin-bottom: 10px;
}

.events .item ul li h6 {
  font-size: 16px;
  color: #008080;
  font-weight: 600;
}

.events .item a {
  position: absolute;
  right: 0;
  top: 22px;
  background-color: #008080;
  width: 60px;
  height: 120px;
  display: inline-block;
  text-align: center;
  line-height: 120px;
  font-size: 18px;
  z-index: 1;
  color: #fff;
  border-radius: 60px 0px 0px 60px;
}


/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact-us {
  margin-top: 80px;
  position: relative;
  padding: 50px 0px;
}

.contact-us:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 65%;
  height: 100%;
  background-color: #F4FDFD;
  content: '';
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
}


.contact-us .section-heading {
  margin-right: 110px;
  margin-bottom: 0px;
}

.contact-us .section-heading p {
  margin-top: 50px;
}

.contact-us .special-offer {
  margin-top: 50px;
  background-color: #fff;
  border-radius: 25px;
  padding: 30px 120px;
  display: inline-block;
  position: relative;
}

.contact-us .special-offer span.offer {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #008080;
  width: 80px;
  padding: 30px 8px;
  line-height: 25px;
  height: 120px;
  border-radius: 15px 60px 60px 15px;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  text-align: right;
}

.contact-us .special-offer span.offer em {
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
}

.contact-us .special-offer h6 {
  font-size: 15px;
  color: #4a4a4a;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 15px;
}

.contact-us .special-offer h6 em {
  font-style: normal;
  color: #008080;
  font-weight: 600;
}

.contact-us .special-offer h4 {
  font-size: 22px;
  font-weight: 600;
}

.contact-us .special-offer h4 em {
  font-style: normal;
  color: #008080;
}

.contact-us .special-offer a {
  position: absolute;
  right: 30px;
  top: 35px;
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  background-color: #008080;
  color: #fff;
  border-radius: 50%;
}

.contact-us .contact-us-content {
  border-radius: 25px;
  padding: 80px;
  background-color: #008080;
  position: relative;
  z-index: 1;
}

.contact-us .contact-us-content::before {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 50%;
  transform: translateX(-149px);
  opacity: 0.5;
  top: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

.contact-us .contact-us-content::after {
  background: url(../images/contact-dec-02.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 183px;
  height: 149px;
  content: '';
  z-index: 2;
}

#contact-form input {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 0px 20px;
  font-size: 14px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
  /* الخصائص الجديدة لجعله يكتب من اليمين لليسار */
  direction: rtl;
  text-align: right;
}

#contact-form input::placeholder {
  color: #fff;
}




/* أنماط الزر الافتراضية */
#add-to-home {
  display: none;
  /* يتم إخفاء الزر افتراضيًا */
  margin: 10px 0;
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  /* لون خلفية الزر */
  color: white;
  /* لون النص */
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  /* تدوير الزر */
  transition: background-color 0.3s ease;
  /* تأثير التحويل عند التحريك */
}

/* أنماط الزر عند التفعيل */
#add-to-home.active {
  display: block;
  /* عندما يكون الزر نشطًا يتم عرضه */
}

/* أنماط الزر عند التعطيل */
#add-to-home.disabled {
  background-color: #6c757d;
  /* لون خلفية الزر عند التعطيل */
  cursor: not-allowed;
}

/* أنماط الزر عند التعطيل والتخطيط */
#add-to-home.disabled::before {
  content: "لا يمكن التثبيت";
  /* نص عند التعطيل */
  color: white;
  /* لون النص */
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  /* تحويل النص إلى حروف كبيرة */
  position: absolute;
  /* الموضع المطلق */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* التحويل لتوسيط النص */
}

/* تغيير أنماط الزر عند تحديد المؤشر */
#add-to-home:hover {
  background-color: #0056b3;
  /* لون خلفية الزر عند تحديد المؤشر */
}



/* التحكم بلون التمييز الداخلي (شريط التظليل) داخل القائمة المنسدلة */
#select1,
#select2 {
  /* تطبيق لون التمييز المرجاني (#FFB6A0) بدلاً من الأزرق الافتراضي */
  -webkit-appearance: none;
  /* قد يساعد في فرض الألوان */
  accent-color: #FFB6A0;
  /* خاصية قياسية جديدة */
}

/* خاصة بمتصفحات الويب كيت لضبط لون تظليل النص */
#select1 option:checked,
#select2 option:checked {
  background-color: #8ED0CC;
  /* الخلفية النعناعية عند الاختيار */
  color: #fff;
}

/* تنسيق عنصر select داخل الفورم */
#select1,
#select2 {
  width: 100%;
  height: 50px;
  border-radius: 25px;

  /* الخلفية الجديدة: اللون النعناعي الأساسي (#8ED0CC) مع شفافية 15% */
  background-color: rgba(142, 208, 204, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 0px 20px;
  font-size: 14px;
  color: #fff;
  /* يمكن الاحتفاظ به أبيض لقراءة أفضل على الخلفية الداكنة للقسم */
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
}

/* تنسيق عنصر label داخل الفورم */
#label-select1,
#label-select2 {
  font-size: 16px;
  color: #fff;
  margin-bottom: 5px;
  display: block;
}

/* تنسيق عنصر select داخل الفورم عند فتح القائمة المنسدلة */
#select1:focus,
#select2:focus {
  background-color: #8ED0CC;
  /* تم التغيير إلى اللون الأساسي النعناعي */
}

#contact-form textarea {
  width: 100%;
  height: 120px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  padding: 20px;
  font-size: 14px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
  /* الخصائص الجديدة لجعله يكتب من اليمين لليسار */
  direction: rtl;
  text-align: right;
}

#contact-form textarea::placeholder {
  color: #fff;
}

#contact-form button {
  border: none;
  height: 50px;
  font-size: 14px;
  font-weight: 600;
  background-color: #fff;
  padding: 0px 25px;
  border-radius: 25px;
  color: #008080;
  transition: all .4s;
  position: relative;
  z-index: 3;
}

#contact-form button:hover {
  opacity: 0.8;
}

.contact-us-content .more-info {
  text-align: center;
  /* التدرج اللوني الجديد: يبدأ بالأخضر النعناعي وينتهي بالمرجاني الهادئ */
  background: linear-gradient(90deg, #8ED0CC 0%, #FFB6A0 100%);
  border-radius: 0px 0px 23px 23px;
  padding: 45px 30px 15px 30px;
}

.contact-us-content .more-info .info-item {
  text-align: center;
  margin-bottom: 30px;
}

.contact-us-content .more-info i {
  font-size: 32px;
  color: #fff;
  margin-bottom: 15px;
}

.contact-us-content .more-info h4 a {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.col-lg-12 fieldset label {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.col-lg-12 fieldset p {
  color: #fff;
  /* لون النص */
  font-size: 14px;
  /* حجم الخط */
  font-weight: 300;
  /* سماكة الخط */
  line-height: 1.5;
  /* ارتفاع السطر */
  margin-top: 10px;
  /* هامش علوي */
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  margin-top: 150px;
  position: relative;
  background-color: #008080;
  vertical-align: middle;
  min-height: 150px;
  border-radius: 150px 150px 0px 0px;
}

footer p {
  text-align: center;
  line-height: 150px;
  color: #fff;
  font-weight: 400;
}

footer p a {
  color: #fff;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}

footer::before {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 30px;
  transform: rotate(180deg);
  opacity: 1;
  bottom: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
}

/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area {
    top: 0px;
  }

  .header-area .main-nav .logo h1 {
    border-right: none;
  }

  .main-banner .item {
    padding: 80px 30px 120px 30px !important;
  }

  .main-banner .owl-nav {
    left: 30px !important;
  }

  .event_filter {
    padding: 15px 20px;
  }

  .event_filter li {
    display: inline-block;
    margin: 0px 10px;
  }
}

@media (max-width: 992px) {

  .header-area .main-nav #search input,
  .header-area .main-nav #search i {
    display: none;
  }

  .header-area .main-nav .logo h1 {
    font-size: 25px;
  }

  .header-area .main-nav .logo {
    border-right: none;
  }

  .main-banner {
    padding-top: 100px;
  }

  .main-banner .item {
    padding: 100px 60px 140px 60px;
    margin-left: 0px;
    text-align: center;
  }

  .main-banner .item h2,
  .main-banner .item p {
    width: 100%;
  }

  .main-banner .item h2 {
    font-size: 36px;
    line-height: 50px;
  }

  .main-banner .item .buttons {
    display: inline-block;
    text-align: center;
  }

  .main-banner .item .buttons .main-button {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .main-banner .owl-nav {
    left: 50% !important;
    transform: translateX(-60px) !important;
    bottom: 60px;
  }

  .main-banner .owl-nav .owl-prev i {
    bottom: 0px;
  }

  .main-banner .owl-nav .owl-next i {
    bottom: 0px;
    position: absolute;
    left: 65px;
  }

  .services {
    margin-top: 80px;
  }

  .about-us {
    margin-top: 100px;
  }

  .accordion {
    padding: 40px 25px 10px 25px;
  }

  .services .service-item .icon {
    width: 170px;
    height: 170px;
    line-height: 170px;
  }

  .about-us .section-heading {
    margin-left: 0px;
    margin-top: 120px;
  }

  .about-us::before,
  .testimonials::before,
  .contact-us::before {
    display: none;
  }

  .about-us .section-heading p,
  .testimonials .section-heading p,
  .contact-us .section-heading p {
    margin-top: 30px;
  }

  .about-us .section-heading .main-button {
    margin-top: 30px;
  }

  .about-us .main-button a {
    background-color: #008080;
    color: #fff;
  }

  .courses {
    margin-top: 100px;
  }

  .event_filter ul li {
    display: block;
    margin: 12px 5px;
  }

  .fun-facts {
    margin-top: 70px;
  }

  .fun-facts::before {
    width: 95%;
  }

  .team {
    margin-top: 160px;
  }

  .team-member {
    margin-bottom: 140px;
  }

  .testimonials {
    margin-top: -50px;
    padding: 0px;
  }

  .testimonials .section-heading {
    margin-left: 0px;
    margin-top: 40px;
  }

  .testimonials .item {
    padding: 40px 40px 60px 40px;
  }

  .testimonials .item h4 {
    font-size: 17px;
  }

  .testimonials .item img {
    margin-right: 15px;
  }

  .testimonials .owl-nav {
    display: none;
  }

  .events {
    margin-top: 80px;
  }

  .events .item {
    margin-bottom: 66px;
  }

  .events .item .image img {
    position: relative;
    max-width: 100%;
  }

  .events .item ul {
    margin-top: -40px;
  }

  .events .item ul li:first-child {
    width: 100% !important;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
  }

  .events .item ul li:nth-child(2) {
    width: 40% !important;
  }

  .events .item ul li {
    display: inline-block;
    width: 28% !important;
  }

  .events .item ul li:last-child {
    text-align: right;
  }

  .events .item a {
    bottom: 150px;
    top: auto;
  }

  .events .item ul li h6 {
    font-size: 14px;
  }

  .contact-us {
    padding-top: 20px;
  }

  .contact-us .section-heading {
    margin-right: 0px;
  }

  .contact-us .special-offer {
    background-color: #F4FDFD;
    margin-bottom: 60px;
    padding: 34px 30px 34px 100px;
    width: 100%;
  }

  .contact-us .special-offer h4 {
    font-size: 17px;
  }

  .contact-us .special-offer a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 15px;
    right: 15px;
  }

  .contact-us .contact-us-content {
    padding: 30px;
  }

  footer {
    margin-top: 30px;
  }
}

@media (max-width: 1200px) {
  .header-area .main-nav #search input {
    width: 200px;
  }

  .header-area .main-nav .nav li.has-sub:after {
    right: 15px;
  }

  .fun-facts:before {
    width: 95%;
  }
}


/* تنسيق الحاوية لدمج المدونة (تأثير Glassmorphism مع ظلال جمالية) */
.blog-integration-section {
  width: 95%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  direction: rtl;

  /* 🧊 تأثير الزجاج الناعم بلون #8ED0CC 🧊 */
  /* اللون: rgba(142, 208, 204, 0.15) */
  background: rgba(142, 208, 204, 0.25);
  /* رفع الشفافية قليلاً لبروز اللون الفاتح */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(142, 208, 204, 0.7);
  /* حدود بلون #8ED0CC أكثر وضوحاً */
  border-radius: 20px;

  /* 🌟 ظلال جمالية 🌟 */
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.2),
    inset 0 0 10px rgba(142, 208, 204, 0.15);
  /* ظل داخلي خفيف بلون الإطار */

  will-change: transform, box-shadow;
}

/* تنسيق رأس القسم لترتيب العنوان والزر */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  /* خط فاصل بلون #8ED0CC شفاف */
  border-bottom: 1px solid rgba(142, 208, 204, 0.9);
  padding-bottom: 10px;

  /* ظل خفيف لرأس القسم */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  padding-left: 10px;
}

/* تنسيق عنوان المدونة */
.section-title {
  text-align: right;
  color: #007070;
  /* ⬅️ لون داكن (Teal أغمق) لتباين واضح على الخلفية الفاتحة */
  margin: 0;
  padding: 0 10px 0 0;
  font-size: 26px;
  font-weight: 600;
  /* ظل نص خفيف */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* تنسيق زر الطي */
.toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.3s ease;
}

.arrow-icon {
  font-size: 24px;
  color: #007070;
  /* ⬅️ لون السهم داكن للتباين */
  display: block;
  transition: transform 0.3s ease;
}

.toggle-button.collapsed .arrow-icon {
  transform: rotate(-90deg);
}

/* تنسيق المحتوى القابل للطي - لا تغيير في الحركة */
.collapsible-content {
  max-height: 1500px;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.collapsible-content.collapsed {
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* تنسيق الإطار المُضمَّن نفسه (Iframe) */
#integrated-blog-iframe {
  width: 100%;
  height: 1200px;
  border: none;
  display: block;
  border-radius: 15px;
  /* ظل الإطار الداخلي */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 🌙 تعديلات الوضع المظلم (Dark Mode) 🌙 */
body.dark-theme .blog-integration-section {
  background: rgba(0, 0, 0, 0.2);
  /* الحدود في الدارك مود تستخدم لون #8ED0CC لتباين جميل */
  border: 1px solid #8ed0cc99;
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 10px rgba(142, 208, 204, 0.2);
}

body.dark-theme .section-title {
  color: #8ED0CC;
  /* ⬅️ استخدام اللون الفاتح #8ED0CC كأفضل تباين */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
}

body.dark-theme .toggle-button .arrow-icon {
  color: #8ED0CC;
  /* ⬅️ لون السهم فاتح */
}

body.dark-theme .section-header {
  border-bottom-color: rgba(142, 208, 204, 0.6);
}


/* 📱 التنسيقات الخاصة بالهواتف المحمولة (Media Query) 📱 */
@media (max-width: 600px) {
  .blog-integration-section {
    width: 98%;
    margin: 20px auto;
    padding: 10px;
    border-radius: 15px;
  }

  .section-title {
    font-size: 22px;
  }

  #integrated-blog-iframe {
    height: 700px;
    border-radius: 10px;
  }
}