/* Theme Variables */
:root {
   --main: #836344;
   --secondary: #C29669;
   --lite-sec: #D3B990;
   --bg: #fff;
   --dark-gray: #6D6E70;
   --txt: #6D6E70;
   --white: #fff;
   --light: #DBDBDB;
   --ultra-lite: #F9F9F9;
   --dark: #191919;
   --black: #000000;
   --gray: #A4A4A4;
   --base: #E4E4E4;
   --active: #D1F717;
   --line: #b4b4b4;

   /* Layout */
   --gutter-x: 8rem;

   /* Opacity channels */
   --mainOp: 131, 99, 68;
   --secOp: 194, 150, 105;
   --whiteOp: 255, 255, 255;
   --blackOp: 0, 0, 0;
}
[dir=rtl] [type=email], [dir=rtl] [type=number], [dir=rtl] [type=tel], [dir=rtl] [type=url] {
    direction: rtl;
}
@font-face {
   font-family: "the-sans";
   src: url("../font/ArbFONTS-TheSans-Bold-alinma.ttf");
   font-weight: bold;
   font-style: normal;
}

@font-face {
   font-family: "the-sans";
   src: url("../font/ArbFONTS-TheSans-Plain.otf");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "the-sans";
   src: url("../font/ArbFONTS-TheSansArabic-Light.otf");
   font-weight: 100;
   font-style: normal;
}

@font-face {
   font-family: "Montserrat";
   src: url("../font/Montserrat-Arabic\ Bold\ 700.otf");
   font-weight: bold;
   font-style: normal;
}

/* -------------------------------------------------- */
/* Global Styles */
* {
   font-family: 'the-sans', sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
}

*::before,
*::after {
   box-sizing: inherit;
}


html {
   overflow-x: hidden;
   scroll-behavior: smooth;
}

body {
   padding: 0 !important;
   overflow-x: hidden;
   background: var(--bg);
   margin: 0 !important;
   color: initial;
   background-color: var(--bg) !important;
}

body {
   background-image: url('../images/pattern.png');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   background-attachment: fixed;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   vertical-align: middle;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
   display: block;
}

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

a {
   text-decoration: none;
   color: inherit;
}

img {
   width: 100%;
}

i,
svg {
   line-height: 0;
}

option {
   color: var(--black);
}


.btn,
.btn:focus {
   outline: none;
   box-shadow: none;
}

::-webkit-scrollbar {
   height: .5rem;
   width: 0.4rem;
}

::-webkit-scrollbar-track {
   background-color: transparent;
}

::-webkit-scrollbar-thumb {
   background-color: var(--main);
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -ms-border-radius: 8px;
   -o-border-radius: 8px;
}

::selection {
   background: rgba(var(--mainOp), .65);
   color: var(--white);
   line-height: auto;
}

.container-fluid {
   --bs-gutter-x: var(--gutter-x) !important;
}

.link {
   position: absolute;
   inset: 0;
   z-index: 1;
}

.form-control,
.form-select {
   background-color: transparent !important;
   box-shadow: unset !important;
   padding-block: .675rem;
   border-radius: 0px;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   -ms-border-radius: 0px;
   -o-border-radius: 0px;
}

.input-group-text {
   border-radius: 70px;
}

.form-control:focus,
.form-select:focus {
   border-color: var(--secondary);
}

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

.form-check-input:checked {
   background-color: var(--main);
   border-color: var(--main);
}

.main {
   color: var(--main) !important;
}

.secondary {
   color: var(--secondary) !important;
}

.lite-sec {
   color: var(--lite-sec);
}

.main-btn {
   color: var(--main) !important;
   background-color: var(--white);
   padding: .625rem 22px;
   border-radius: 0px;
   min-width: 150px;
   width: max-content;
   transition: all 0.3s;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   -ms-border-radius: 0px;
   -o-border-radius: 0px;
   font-weight: bold;
   display: flex !important;
   align-items: center;
   justify-content: center;
   gap: 10px;
   position: relative;
   z-index: 99;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
}

.main-btn {
   background-color: var(--main) !important;
   border: 1px solid var(--main);
   color: var(--white) !important;
}

[dir='ltr'] [class*=-arrow].bi::before {
   transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
}


/* ------------- navbar ------------ */
.navbar {
   position: relative;
   z-index: 9;
   background: var(--white);
}

nav.navbar .container-fluid {
   flex-direction: row-reverse;
}

.navbar-nav {
   justify-content: space-evenly;
   gap: 1rem;
}

.navbar-light .navbar-brand img {
   width: 44px;
   object-fit: contain;
   overflow: initial;
}

.navbar-nav li {
   display: flex;
   align-items: center;
}

.navbar-nav li a {
   position: relative;
   font-size: .85rem;
   color: var(--main) !important;
}

.navbar-nav>li:not(:last-child)>a::before {
   content: '';
   position: absolute;
   inset-inline-end: -10px;
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
   width: 1px;
   height: 18px;
   border-inline-end: 1px solid #6D6E70;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
}

.navbar .nav-link.active {
   font-weight: bold;
}

.navbar .nav-link.lang img {
   width: 30px;
   object-fit: contain;
}

/* breadcrumb */
.breadcrumb-wrapper {
   position: relative;
   --bs-breadcrumb-divider: '>>';
   background-size: cover !important;
   background-position: top !important;
   background: var(--main);
   color: var(--white);
}

.breadcrumb-wrapper .hero-overlay {
   min-height: 33vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-block: 5rem;
   justify-content: center;
}

.secTitle {
   color: var(--main);
   font-weight: bold;
   font-size: 1.65rem;
   padding: .5rem 1.5rem;
   position: relative;
   width: fit-content;
   min-width: 165px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-bottom: 1rem;
}

.secTitle img {
   width: 26px;
}

.secTitle::before {
   content: '';
   background: url('../images/bottom-shape.svg');
   background-repeat: no-repeat;
   position: absolute;
   top: .5rem;
   inset-inline-start: 0;
   width: 100%;
   height: 100%;
   background-size: contain;
   background-position: right;
}

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


/* --------------- .hero-sec --------------------- */
.hero-sec {
   position: relative;
   background-size: cover !important;
   background-repeat: no-repeat !important;
   background-position: 30% 50% !important;
   height: 94vh;
}

/* لما تكون الصفحة بالعربية */
html[dir="ltr"] .hero-sec,
html[dir="ltr"] .breadcrumb-wrapper {
   transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   -moz-transform: scaleX(-1);
   -ms-transform: scaleX(-1);
   -o-transform: scaleX(-1);
}

/* علشان الكلام أو المحتوى جواها مايتقلبش */
html[dir="ltr"] .hero-sec .content,
html[dir="ltr"] .breadcrumb-wrapper .hero-overlay {
   transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   -moz-transform: scaleX(-1);
   -ms-transform: scaleX(-1);
   -o-transform: scaleX(-1);
}

.hero-sec .content {
   padding-block: 4rem 3rem;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.hero-sec .content .sub-logos{
   width: fit-content;
   margin-inline-start: auto;
}
.hero-sec .content img {
   width: 235px;
}
.hero-sec .content *{
    color: var(--white) !important;
}
.hero-sec .content h1 {
   font-size: 2.25rem;
   color: var(--lite-sec) !important;
   font-weight: normal;
}


.hero-sec .content p {
   color: var(--white);
   margin-block: .5rem;
   font-weight: lighter;
}


/* ------------------------ about us ----------------- */
.about p {
   color: var(--txt);
   text-align: justify;
}

.about .about-img {
   overflow: hidden;
   position: relative;
}

.about .about-img img {
   position: relative;
   aspect-ratio: 15 / 9;
   object-fit: cover;
}

.card {
   position: relative;
   background: transparent;
   border: none;
   border-radius: 0px !important;
   -webkit-border-radius: 0px !important;
   -moz-border-radius: 0px !important;
   -ms-border-radius: 0px !important;
   -o-border-radius: 0px !important;
}

.categories .card {
   background-color: transparent;
   overflow: hidden;
   height: 100%;
}

.categories .card .card-img-top {
   aspect-ratio: 5/5;
   object-fit: cover;
   object-position: center;
   margin-bottom: .5rem;
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -ms-border-radius: 0;
   -o-border-radius: 0;
}

.categories .card .card-footer {
   border-radius: 0;
   background: var(--main);
   color: var(--white);
   padding: .75rem .25rem;
   text-align: center;
   flex-grow: 1;
}

.categories .owl-item:nth-child(odd) .card .card-footer {
   background: var(--dark-gray);
}

/* ------------------------ programs ----------------- */
.programs-title {
   font-size: 1.1rem;
   margin-bottom: 3rem;
   padding-bottom: 4rem;
   position: relative;
}

.programs-title::before {
   content: '';
   position: absolute;
   inset-inline-start: 50%;
   bottom: -1rem;
   width: 1px;
   height: 4rem;
   border-inline-start: 2px dashed #CAC2C2;
}

.programs .owl-carousel .owl-stage-outer {
   overflow: visible;
}

.owl-carousel .owl-stage {
   display: flex;
}

.owl-dots {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3px;
   inset-inline-start: 50%;
   margin-top: 3rem;
}

.owl-carousel button.owl-dot {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   border: 1px solid var(--white);
   background: var(--white);
   box-shadow: 0px 3px 6px #00000029;
}

.owl-carousel button.owl-dot.active {
   background: var(--main);
   border-color: var(--main);
   transform: translateY(-10px);
   -webkit-transform: translateY(-10px);
   -moz-transform: translateY(-10px);
   -ms-transform: translateY(-10px);
   -o-transform: translateY(-10px);
}

.program-slider .owl-nav {
   position: absolute;
   top: 50%;
   width: 100%;
   transform: translateY(-50%);
}

.program-slider .owl-nav .owl-prev,
.program-slider .owl-nav .owl-next {
   position: absolute;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

html[dir="ltr"] .program-slider .owl-nav .owl-prev,
html[dir="ltr"] .program-slider .owl-nav .owl-next {
   transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
}

.program-slider .owl-nav .owl-prev i,
.program-slider .owl-nav .owl-next i {
   font-size: 28px;
   color: var(--main);
}

.program-slider .owl-nav .owl-prev.disabled i,
.program-slider .owl-nav .owl-next.disabled i {
   opacity: .5;
   color: var(--txt);
}

.program-slider .owl-nav .owl-prev {
   inset-inline-start: -50px;
}

.program-slider .owl-nav .owl-next {
   inset-inline-end: -50px;
}


.programs .pill-shape {
   background: var(--main);
   border-radius: 50% / 25%;
   -webkit-border-radius: 50% / 25%;
   -moz-border-radius: 50% / 25%;
   -ms-border-radius: 50% / 25%;
   -o-border-radius: 50% / 25%;
   margin-inline: .8rem;
   aspect-ratio: 4/8;
   min-height: 13rem;
   position: relative;
}

.programs .owl-item:nth-child(even) .pill-shape {
   background: var(--secondary);
}

.programs {
   counter-reset: section;
}

.programs .owl-item .card .pill-shape .program-count::before {
   counter-increment: section;
   content: counter(section);
}

.programs .owl-item .program-info {
   margin-block: auto;
   margin-top: 1rem;
   color: var(--main);
   text-align: center;
   font-size: .9rem;
}

.programs .owl-item:nth-child(even) .program-info {
   color: var(--secondary);
}

.program-count {
   height: 120px;
   display: flex;
   padding-block: 4rem 2rem;
   align-items: center;
   justify-content: center;
   color: var(--white);
   font-size: 4.2rem;
   font-weight: bold;
   font-family: 'Montserrat';
}

.programs .circle {
   width: 100%;
   aspect-ratio: 1/1;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   background: #eae6e6;
   filter: drop-shadow(24px 20px 4px #adadad69);
   -webkit-filter: drop-shadow(24px 20px 4px #adadad69);
   position: absolute;
   bottom: 0;
}

.programs .owl-item:not(:last-child) .circle::before {
   content: '';
   position: absolute;
   inset-inline-start: 110%;
   width: 60px;
   height: 1px;
   border-top: 2px dashed #CAC2C2;
}


.programs .circle .inner-circle {
   width: calc(100% - 8px);
   height: calc(100% - 8px);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: transparent linear-gradient(90deg, #C4BBBB 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
}

.programs .circle .inner-circle img {
   width: 3rem !important;
}

.divider {
   padding-block: 7rem;
   background-size: cover !important;
   background-position: center !important;
   text-align: center;
   color: var(--white);
}

.divider p{
    color: var(--white) !important;
}

.external-programs .card>img {
   position: absolute;
   inset-inline-start: 84px;
   width: 265px;
   z-index: -1;
}

.external-programs .card {
   padding-bottom: 2rem;
   margin-inline-start: 2rem;
}

.external-programs .program-icon {
   background: var(--dark-gray);
   width: 140px;
   height: 90px;
   display: flex;
   align-items: center;
   justify-content: center;
   clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

html[dir="ltr"] .external-programs .card>img,
html[dir="ltr"] .external-programs .program-icon{
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
}

.external-programs .program-icon img {
   width: 50px !important;
}

.external-programs {
   counter-reset: item;
}

.external-programs .card .program-count {
   height: unset;
   display: block;
   padding: 0;
   line-height: 1.2;
}

.external-programs .card .program-count::before {
   counter-increment: item;
   content: counter(item, decimal-leading-zero);
   color: var(--main);
}

.external-programs .card .program-info .program-name {
   color: var(--main);
   font-size: 1rem;

}

.external-programs .card .program-info .program-name+small {
   font-size: .6rem;
}

/* --------------------- program details --------------------- */
.sub-category.card {
   text-align: center;
   height: 100%;
}

.sub-category.card .card-header {
   position: relative;
   width: 70%;
   height: 12rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: auto;
   background: var(--secondary);
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -ms-border-radius: 0;
   -o-border-radius: 0;
   color: #6D4D32;
   font-size: 1.2rem;
   font-weight: bold;
   margin-bottom: -8rem;
   padding-block: 1rem;
}

.sub-category.card .card-header::before {
   content: '';
   position: absolute;
   bottom: -20px;
   inset-inline-start: 50%;
   transform: translateX(50%);
   width: 0;
   height: 0;
   border-left: 16px solid transparent;
   border-right: 16px solid transparent;
   border-top: 20px solid var(--secondary);
   -webkit-transform: translateX(50%);
   -moz-transform: translateX(50%);
   -ms-transform: translateX(50%);
   -o-transform: translateX(50%);
}

html[dir="ltr"] .sub-category.card .card-header::before {
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -o-transform: translateX(-50%);
}

.sub-category.card .card-header .sub-category-img {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-bottom: 1rem;
   height: 84px !important;
}

.sub-category.card .card-header .sub-category-img img {
   width: 55px;
}

.sub-category.card .card-body {
   padding-block: 10rem 3rem;
   padding-inline: 1.4rem;
   background: var(--main);
   color: var(--white);
}

.program-slider .card,
.program-slider .card .row {
   height: 100%;
}

.program-slider .card .card-header,
.program-slider .card .card-body {
   background-color: var(--secondary);
   color: var(--white);
   text-align: center;
}

.external.program-slider .card .card-header,
.external.program-slider .card .card-body {
   background-color: var(--dark-gray);
}

.program-slider .card .card-header,
.external.program-slider .card .card-header{
    min-height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.program-slider .card .card-header {
   margin-bottom: .5rem;
   border: unset;
   padding-inline: .4rem;
   border-radius: 20px 20px 0 0;
   -webkit-border-radius: 20px 20px 0 0;
   -moz-border-radius: 20px 20px 0 0;
   -ms-border-radius: 20px 20px 0 0;
   -o-border-radius: 20px 20px 0 0;
}

.program-slider .card .card-header .card-title {
   font-size: .9rem !important;
}

.program-slider .card .card-body {
   border-radius: 0 0 20px 20px;
   -webkit-border-radius: 0 0 20px 20px;
   -moz-border-radius: 0 0 20px 20px;
   -ms-border-radius: 0 0 20px 20px;
   -o-border-radius: 0 0 20px 20px;
}

.program-slider .card .card-body .col {
   position: relative;
}

.program-slider .card .card-body .col:not(:last-child) {
   border-inline-end: 1px solid var(--white);
}

.program-slider .card .program-label-icon img {
   width: 26px !important;
   margin: auto;
}

.program-slider .card .program-label {
   color: #6D4D32;
   font-weight: bold;
   font-size: .85rem;
   margin-block: .5rem .3rem;
}

.external.program-slider .card .program-label {
   color: var(--secondary);
}

.program-slider .card .program-data {
   font-size: .6rem;
}

.program-slider .card .program-data * {
   color: var(--white) !important;
}

.course-box {
   display: flex;
   width: 100%;
   align-items: center;
}

.course-boxs .col:nth-child(odd) .course-box {
   flex-direction: row-reverse;
}

/* البيضاوي البني */
.course-box .oval {
   position: relative;
   width: 120px;
   height: 220px;
   background: var(--secondary);
   /* بني */
   border-radius: 60px;
   /* بيضاوي */
   display: flex;
   justify-content: center;
   align-items: center;
   margin-inline-end: -120px;
}

.course-boxs .col:nth-child(odd) .oval {
   margin-inline-end: unset;
   margin-inline-start: -120px;

}

/* الخط الخارجي */
.course-box .oval::after {
   content: "";
   position: absolute;
   width: calc(100% + 20px);
   height: calc(100% + 20px);
   border: 2px solid var(--secondary);
   border-bottom: none;
   inset-inline-start: -10px;
   border-radius: 70px;
   top: -10px;
   z-index: -1;
   -webkit-border-radius: 70px;
   -moz-border-radius: 70px;
   -ms-border-radius: 70px;
   -o-border-radius: 70px;
}

.course-boxs .col:nth-child(even) .oval::after {
   border-inline-end: none;

}

.course-boxs .col:nth-child(odd) .oval::after {
   border-inline-start: none;

}

.course-box .content {
   color: #fff;
   background: var(--dark-gray);
   height: 125px;
   width: 100%;
   padding: 20px 30px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   justify-content: center;
   text-align: center;
   padding-inline: calc(120px + 2rem) 2rem;
   border-radius: 60px;
   -webkit-border-radius: 60px;
   -moz-border-radius: 60px;
   -ms-border-radius: 60px;
   -o-border-radius: 60px;
}

.course-boxs .col:nth-child(odd) .content {
   padding-inline: 2rem calc(120px + 2rem);
}

.course-box .icon {
   position: relative;
   background: #fff;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: bold;
   color: var(--secondary);
   z-index: 2;
}

.course-box .icon::before {
   content: "";
   position: absolute;
   width: calc(100% + 20px);
   height: calc(100% + 20px);
   background: rgba(var(--whiteOp), .2);
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   z-index: -1;
}

.course-box .icon img {
   width: 50%;
}

.course-box .content h3 {
   margin: 0;
   font-size: 1rem;
   color: var(--secondary);
}

.course-box .content p {
   margin: 0;
   font-size: .8rem;
   color: #ccc;
}


/* --------------------- footer --------------------- */
footer {
   background: var(--main);
   color: var(--white);
}

footer a.nav-link {
   position: relative;
   font-size: .85rem !important;
   padding: 6px 0 !important;
   color: var(--white) !important;
   display: flex;
   align-items: center;
   gap: 6px;
}

footer a.nav-link::before {
   content: '>';
}

#scrollUp {
   position: fixed;
   bottom: 2.8rem;
   inset-inline-end: calc(var(--gutter-x)*.25);
   padding: 8px;
   border-radius: 50%;
   transition: all 0.3s;
   width: 55px;
   height: 55px;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   z-index: 999;
   background: var(--white);
   color: var(--main);
   box-shadow: 0px 3px 6px #00000029;
   display: none;
}

.fixed-contact {
   position: fixed;
   top: 50%;
   inset-inline-end: 0;
   background: var(--main);
   padding: .5rem .75rem;
   color: var(--white);
   width: fit-content;
   z-index: 99;
}

footer .social-icons {
   display: flex;
   justify-content: center;
   gap: .85rem;
   padding-top: .85rem;
   border-top: 1px solid rgba(var(--whiteOp), .65);
}

footer .social-icons i {
   width: 2.2rem;
   height: 2.2rem;
   border-radius: 50%;
   background-color: transparent;
   border: 1px solid var(--white);
   display: flex;
   justify-content: center;
   line-height: 1.8;
   align-items: center;
   color: var(--white) !important;
   transition: .4s;
   -webkit-transition: .4s;
   -moz-transition: .4s;
   -ms-transition: .4s;
   -o-transition: .4s;
}

footer .social-icons i:hover {
   background-color: var(--secondary);
   color: var(--white) !important;
}

.send-email-box {
   display: flex;
   gap: 10px;
   margin: .85rem 0;
}

.send-email-box input {
   padding-block: 6px;
   border-radius: 2px;
   color: var(--white) !important;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   -ms-border-radius: 2px;
   -o-border-radius: 2px;
}

.send-email-box input::placeholder {
   color: rgba(var(--whiteOp), .65);
}

.send-email-box button {
   border-radius: 50%;
   background: var(--secondary);
   color: var(--white);
   height: 100%;
   border-radius: 2px;
   transition: all 0.3s;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   -ms-border-radius: 2px;
   -o-border-radius: 2px;
}

.send-email-box button:hover {
   background-color: var(--lite-sec);
}

footer .copyrights {
   position: relative;
   padding: 1rem 0;
   color: var(--white);
}


footer .copyrights span {
   font-size: .65rem;
}

/*==-------- contact page --------==*/

[dir=rtl] [type=email],
[dir=rtl] [type=number],
[dir=rtl] [type=tel],
[dir=rtl] [type=url] {
   direction: rtl;
}

/*  */
#map {
   margin-block: 2rem;
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
}

#map iframe {
   width: 100%;
   height: 250px
}

.contact-data .contact-info {
   height: 100%;
   text-align: center;
   padding: 1.85rem 1rem;
   border: 1px solid #ddd;
   color: var(--txt);
}

.contact-data .contact-info i {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 80px;
   height: 40px;
   color: var(--main);
   margin: auto;
   margin-bottom: 1rem;
   aspect-ratio: 1/1;
   font-size: 32px;
}

.contact-data .contact-info {
  direction:ltr;
}

.contact-data .contact-form {
   height: 100%;
   background: #FBFBFB;
   padding: 4rem 1.5rem;
}

.modal-backdrop {
   display: none !important;
}



/* --------------------- media ------------------------- */

@media (max-width: 992px) {
   :root {
      --gutter-x: 1.5rem;
   }

   .navbar-collapse {
      position: fixed;
      top: 2.7rem;
      bottom: 0%;
      width: 100%;
      min-height: fit-content;
      overflow: auto;
      inset-inline-start: 0;
      background: var(--white);
      transform: translateY(-100%);
      border-radius: 10px;
      z-index: 9;
      padding: 2rem 2rem;
      box-shadow: 0px 1px 8px #00000054;
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transition: .4s;
      -webkit-transition: .4s;
      -moz-transition: .4s;
      -ms-transition: .4s;
      -o-transition: .4s;
   }

   .navbar-collapse.show {
      transform: translateY(0);
      -webkit-transform: translatey(0);
      -moz-transform: translatey(0);
      -ms-transform: translatey(0);
      -o-transform: translatey(0);
   }

   .navbar-nav li .dropdown a {
      padding-inline: 0;
   }

   .navbar-nav>li:not(:last-child)>.dropdown>a::before,
   .navbar-nav>li:not(:last-child)>a::before {
      content: unset;
   }


   nav .bottom-bar .nav-links {
      gap: 1.4rem;
   }

   button:focus:not(:focus-visible) {
      outline: 0;
      box-shadow: unset;
   }


   .navbar-toggler {
      border: unset !important;
      box-shadow: unset !important;
      width: 2.1rem;
      height: 2.1rem;
      background: var(--main);
      border-radius: 2px;
      padding: 0px !important;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -ms-border-radius: 2px;
      -o-border-radius: 2px;
   }

   .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%232D673F' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E") !important;
      filter: brightness(0) invert(1);
   }

   a.nav-link.custom-link:hover .nav-text {
      opacity: 1;
      pointer-events: auto;
      inset-inline-end: unset;
      inset-inline-start: 110%;
   }

   [dir=rtl] .container-fluid {
      --gutter-x: 1.5rem;
   }

   .navbar-light .navbar-brand img {
      width: 34px;
   }

   .breadcrumb-wrapper .hero-overlay {
      padding-block: 3rem;
   }

   .breadcrumb {
      padding: 2rem 0;
   }

   .hero-sec .overlay {
      padding-block: 10.5rem 4rem;
   }

   .hero-sec .content p {
      font-size: 16px;
      margin: 1.5rem 0;
   }


   .navbar-nav {
      gap: 0;
   }

   .navbar-nav:nth-child(2) {
      flex-direction: row;
      justify-content: flex-start;
      margin-bottom: 1rem !important;
      gap: 0.5rem;
   }

   .about-us,
   .about-wrapper {
      background: unset;
   }

   .program-slider .owl-nav .owl-prev,
   .program-slider .owl-nav .owl-next {
      width: 35px;
      height: 35px;
      background-color: var(--white) !important;
   }

   .program-slider .owl-nav .owl-prev i,
   .program-slider .owl-nav .owl-next i {
      font-size: 20px;
   }

   .program-slider .owl-nav .owl-prev {
      inset-inline-start: -.8rem;
   }

   .program-slider .owl-nav .owl-next {
      inset-inline-end: -.8rem;
   }
}

@media (max-width: 578px) {
   .hero-sec {
      background-position: center center !important;
   }

   .about-content {
      margin-top: 175px !important;
      padding-inline-start: 1rem;
   }

   footer a.nav-link {
      padding: .5rem;
   }

   footer .copyrights {
      font-size: 13px;
   }

   footer .copyrights img {
      width: 95px;
   }

   .external-programs .program-icon {
      background: var(--dark-gray);
      width: 114px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
   }

   .external-programs .program-icon img {
      width: 40px !important;
   }

   .external-programs .card>img {
      position: absolute;
      inset-inline-start: 80px;
      width: 140px;
      z-index: -1;
   }

   .sub-category.card .card-header {
      height: 9rem;
      margin-bottom: -6rem;
   }

}

/* الحجم الأساسي */
html {
   font-size: 16px;
   /* للموبايل والشاشات الصغيرة */
}

/* شاشات التابلت */
@media (min-width: 768px) {
   html {
      font-size: 17px;
   }
}

/* الشاشات الكبيرة (لابتوب وديسكتوب) */
@media (min-width: 1200px) {
   html {
      font-size: 18px;
   }
}

/* الشاشات الأكبر (مثلاً 4K) */
@media (min-width: 1600px) {
   html {
      font-size: 22px;
   }
}