*{margin: 0;   padding: 0;  box-sizing: border-box}
:root { --angle: 0deg; /* Ensure a default value is set */}
body {background-color:#131313}
body.dark-mode {  background-color: #f8f8f8;  color: #131313}
.tinos-regular {font-family: "Tinos", serif; font-weight: 400;  font-style: normal; letter-spacing: 1px;}
.tinos-bold {font-family: "Tinos", serif;  font-weight: 700;  font-style: normal; letter-spacing: 1px;}
.alegreya{font-family: "Alegreya", serif; font-optical-sizing: auto;  font-style: normal; font-weight: 400; letter-spacing: .5px}
dl, ol, ul{margin-bottom:0}
.color-fe-sma{color: #F8F8F8}
.color-13-sma{color: #131313}
body.dark-mode .color-fe-sma { color: #131313; }
body.dark-mode .footer-contact .color-fe-sma { color: #3e3e3e }
.gold-sma{color: #d79b4b}
.jomhuria-regular {font-family: "Jomhuria", serif;  font-weight: 400;  font-style: normal}
.fustat {  font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-style: normal}
.bg-dark-sma2{background-color: #131313}
.bg-dark-sma { background-color: rgba(19, 19, 19, .95)}
body.dark-mode .bg-dark-sma, body.dark-mode .bg-dark-sma2 {  background-color: #e5e5e5}
.bgc-f8-sma{background-color: #f8f8f8}
.bgc-gold-sma{background-color: #d79b4b}
.bgc-lggold-sma{
    background: rgb(214,155,75);
    background: linear-gradient(90deg, rgba(248,248,248,1) 10%,  rgba(214,155,75,1) 50%);
    font-weight:bold
}
.active a{color: #d79b4b}
body.dark-mode .active a{color: #7d7a7a}
.border-gold-sma{border: 2px solid #d79b4b}
.border-fe-sma{border: 2px solid #f8f8f8}
.dark-mode .border-fe-sma { border: 0}
.border-r-10{border-radius: 5px}
.p-li-md-sma{padding: 3px 10px} 
.position-relative-sma{position: relative}
.position-relative-hidden-sma{position: relative;     overflow: hidden}
.fit-content-sma {  max-width: fit-content;   margin-inline: auto}
.first-img-sma{position: fixed;   top: 0;   left: 0;   width: 100%}
.text-justfy{text-align: justify}
.overlay-md-sma{position: absolute;   top: 0;    left: 0;   width: 100%;    height: 100%}
.extra-text {
    display: none;
}
.extra-text p{text-align: justify}
.show-more {cursor: pointer;  color: blue;   text-decoration: underline}
.dir-rtl, .rtl  {direction: rtl}
.read-more{cursor: pointer}
.first-img-sma-r,
.second-img-sma,
.the-main-logo2,
body.dark-mode .first-img-sma-r, 
body.dark-mode .the-main-logo2,
.the-black-logo{display: none}
.the-black-logo2{width: 100px}
body:not(.dark-mode)  .the-main-logo2,
body.dark-mode .the-black-logo {display: inline-block}
@media(min-width: 768px){
    body:not(.dark-mode) .first-img-sma-r{ display: block}
    body:not(.dark-mode) .second-img-sma  {display: none}
    body.dark-mode .second-img-sma  { display: block}
    .the-main-logo { width: 100px }
}
@media(max-width: 767px){
    .bgi-main-sma-sm{
        background: url(../../../public/front/images/main/polysm.webp) repeat center center;
        background-size: auto
    }
    body.dark-mode .bgi-main-sma-sm {
        background: url(../../../public/front/images/main/O9FG5Q0sm.webp) repeat center center;
        background-size: cover;
    }
    .fs-13-sm{font-size: 13px}
    .p-md-sma{padding: 5px 10px}
    .border-gold-sm-sma{border: 2px solid #d79b4b}
    .fs-19-md-sma{font-size: 19px;}
    .border-bottom-gold-sma{border-bottom: 1px  solid #d79b4b}
}
@media(min-width: 768px){
    .p-md-sma{padding: 5px 25px}
    .fs-59-md-sma{font-size: 59px}
    .border-right-gold-sma{border-right:1px  solid #d79b4b}
}
.gold-one-sma:hover{  border-top: 2px solid #d79b4b;  color: #d79b4b;   font-weight: bold}
.gold-one-sma:hover a{color: #d79b4b}
body.dark-mode .gold-one-sma:hover { border-top: 2px solid #131313;   color: #131313}
body.dark-mode .gold-one-sma:hover a { color: #131313}
.border-all-sma::before, 
.border-top-sma::before{ 
    content: "";
    display: block;
    position: absolute;
    width: 90%;
    left: 5%;
    background-color: #d79b4b;
    height: 1px;
    z-index: 9999
}
body.dark-mode .border-all-sma::before, body.dark-mode .border-top-sma::before{    background-color: #3e3e3e}
.border-all-sma::before{ bottom: 0}
.border-top-sma::before{ top: 0}
.navbar .btn-hover-sma:hover{color: #d79b4b}
body.dark-mode .gold-sma,
body.dark-mode .navbar .btn-hover-sma:hover{color: #131313}
div.openMenu {z-index: 99999 !important;}
.offcanvas{height: auto}
.offcanvas { z-index: 9999999}
.offcanvas.offcanvas-start{width:100%;}
.offcanvas .offcanvas-header .btn-close-sma{font-size: 33px; color: grey }
.offcanvas .offcanvas-header .btn-close-sma:hover{border-bottom: 2px solid #d79b4b;  color: #d79b4b}
body.dark-mode .offcanvas .offcanvas-header .btn-close-sma:hover{color: #898989;     border-bottom: 2px solid #898989}
.footer-links ul { border-top: 1px solid #d79b4b;  border-bottom: 1px solid #d79b4b}
body.dark-mode .footer-links ul {  border-top: 1px solid #131313;  border-bottom: 1px solid #131313}
@media(max-width:991px){
    .first-nav-sma{ flex-direction: row}
    .first-nav-sma .color-fe-sma {font-size: 11px}
    body.dark-mode .whapts-app-sma.color-fe-sma{color: #f8f8f8 }
    .offcanvas.offcanvas-start {  overflow: scroll !important; height: auto}

}
.gold-gradient-sma{
    background: linear-gradient(358deg, rgba(248,248,248,1) 25%,  rgba(214,155,75,1) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}
body.dark-mode .gold-gradient-sma {
    background: #131313;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #131313
}






















.blog-sma .title-sma::before, .blog-sma .title-sma::after {
    content: " ";
    position: absolute;
    bottom: -10px;
    width: 0;
    height: 2px;
    transition: all .08s ease-in-out
}
.blog-sma .title-sma::before {left: 50%;   animation: animate_one .8s linear forwards}
.blog-sma .title-sma::after {right: 50%;   animation: animate_two .8s linear forwards}
body.dark-mode .blog-sma .title-sma::before, body.dark-mode .blog-sma .title-sma::after{background:#3e3e3e; animation:none; opacity:1; width: 7%}

@keyframes animate_two {
    0% {opacity: 0}
    50%{opacity: .5;  width: 5%; }
    100%{opacity: 1;   width: 7%;  background: linear-gradient(15deg, rgb(177, 177, 177)10%,  rgba(214,155,75,1) 50%)}
}
@keyframes animate_one {
    0% {opacity: 0}
    50%{opacity: .5;    width: 5%; }
    100%{opacity: 1;    width: 7%;   background: linear-gradient(15deg,  rgba(214,155,75,1) 50%, rgba(177, 177, 177) 10%)}
}
@property --angle {
    syntax: "<angle>";
    initial-value: 360deg;
    inherits: false
}
@media(max-width: 767px){ 
    .img-container {
        display: inline-block;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}
.img-container::after,
.img-container::before{
    content: ' ';
    position: absolute;
    top: 50%;
    left: 50.4%;
    width: 99.4%;
    height: 98%;
    translate: -50% -50%;
    z-index: 8888;
    padding: 0px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background-image: conic-gradient(from var(--angle), #fdbd84, #d79b4b, #f8f8f8, #d79b4b, #fdbd84, #d79b4b, #f8f8f8, #d79b4b, #fdbd84, #d79b4b, #f8f8f8, #d79b4b);
    animation: 3.5s spin linear infinite;
}
body.dark-mode .img-container::after, body.dark-mode .img-container::before {
    background-image: conic-gradient(from var(--angle), #898989, #898989, #898989, #898989, #898989, #3e3e3e, #f8f8f8, #898989, #898989, #898989, #f8f8f8, #898989);
}
@keyframes spin {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}
.img-container img{position:  relative; z-index: 99999}
.about-info-sma .second-content::after{
    content: ' ';
    position: absolute;
    bottom: -5%;
    width: 50%;
    height: 2px;
    left: 25%;
    background: linear-gradient(15deg, rgb(177, 177, 177) 10%, rgba(214, 155, 75, 1) 50%);
}
body.dark-mode .about-info-sma .second-content::after { background: #3e3e3e}
.publishers-sma .publishers-container{padding: 10%; border-top: 1px solid #d79b4b}
body.dark-mode .publishers-sma .publishers-container{    border-top: 1px solid #898989}
.publishers-sma .publishers-container::after,
.publishers-sma .publishers-container::before,
.publishers-sma .borders-sma::after,
.publishers-sma .borders-sma::before{content: ' ';  position: absolute; background-color: #d79b4b;  z-index: 9999}
body.dark-mode .publishers-sma .publishers-container::before, body.dark-mode .publishers-sma .borders-sma::before,
body.dark-mode .publishers-sma .publishers-container::after, body.dark-mode .publishers-sma .borders-sma::after{background-color: #898989}
.publishers-sma .publishers-container::after,
.publishers-sma .publishers-container::before{ width: 1px; height: 90%;  top:0}
.publishers-sma .borders-sma::after,
.publishers-sma .borders-sma::before{width: 25%;  height: 1px;  bottom:10%}
.publishers-sma .publishers-container::after,
.publishers-sma .borders-sma::after{right:0}
.publishers-sma .publishers-container::before,
.publishers-sma .borders-sma::before{left: 0}
body.dark-mode .content-container{border-top: 1px solid #898989}
.content-container h3{  padding: 8% 5% }
.publishers-container h3, .publishers-container a{ transition: all .2s ease-in-out}
.publishers-container:hover h3{color: #faba66}
.publishers-container:hover a{font-weight: bold; color: #f8f8f8}
body.dark-mode .publishers-container:hover a{color: #131313}
body.dark-mode .publishers-container:hover h3,
body.dark-mode .publishers-sma{color: #f8f8f8 !important}
.content-container{
    position: absolute;
    bottom: 20%;
    background-color: rgba(19, 19, 19, .7);
    left: 0;
    height: 20%;
    width: 100%;
    border-top: 1px solid #d79b4b
}
.publishers-sma .btn-pub-sma a{
    border-bottom: 1px solid #d79b4b;
    padding-bottom: 1%
}


@media(max-width: 767px){
    .overlay-md-sma{background-color:rgba(19, 19, 19, .3)}
    .mission-sma h4::before, .vision-sma h4::before{display: none}
}
@media(min-width: 768px){ .overlay-md-sma{background-color:rgba(19, 19, 19, .4)}}
body.dark-mode .overlay-md-sma, body.dark-mode .overlay-sma { background-color: transparent}
@media(max-width: 991px){
    .publishers-sma{padding-top: 100px !important}
    .text-justfy{word-break: break-all}   
    .mission-sma .info-conent-sma {   padding-top: 15px !important}
}
@media(min-width: 992px){
    .main-p-sma{width: 75%; margin:auto}
    .keep-in-touch h3{font-size: 33px}
    .keep-in-touch a{font-size: 23px}
    .content-container h3{font-size: 19px}
    .mission-sma h4::before,
    .vision-sma h4::before {
        content: ' ';
        bottom: -65%;
        left: 0;
        width: 30%;
        height: 3px;
        background: linear-gradient(358deg, rgba(248, 248, 248, 1) 25%, rgba(214, 155, 75, 1) 50%);
        position: absolute;
        animation: animate_four 2.5s linear infinite;
        animation-delay: 1.5s;
    }
    body.dark-mode     .mission-sma h4::before, body.dark-mode .vision-sma h4::before {  background: #3e3e3e;   animation: none}
    .mission-sma h4::before{width: 17.5%}
    .vision-sma h4::before{width:14.5%}
    @keyframes animate_four{
        0% {
            opacity: .8;
            background: linear-gradient(15deg, rgb(177, 177, 177) 10%, rgba(214, 155, 75, 1) 50%);
        }
        20% {
            background: linear-gradient(358deg, rgba(248, 248, 248, 1) 25%, rgba(214, 155, 75, 1) 50%);
        }
        100% {
            background: linear-gradient(15deg, rgb(177, 177, 177) 10%, rgba(214, 155, 75, 1) 50%);
            opacity: 1;
        }
    }
    .mission-sma:hover img, .vision-sma:hover img{
        transform: scale(1.1);
    }
    .mission-sma .info-conent-sma, .vision-sma .info-conent-sma{padding-right: 35px}
    .mission-sma .img-container2, .vision-sma .img-container2{overflow: hidden}
    .mission-sma img,
    .vision-sma img{
        border-top: 1px solid #d79b4b;
        border-right: 1px solid #d79b4b;
        padding: 2% 2% 2% 0;
        transition: all .5s ease-in-out
    }
    body.dark-mode .mission-sma img, body.dark-mode .vision-sma img {border-top: 1px solid #898989;   border-right: 1px solid #898989}
}
@media(min-width: 992px) and (max-width: 1199px){
    p{font-size: 14px}
    h6{font-size: 15px}
    .mission-sma p, .vision-sma p{font-size: 16px}
    .mission-sma h4::before { width: 24.5%}
    .vision-sma h4::before {width: 19.5%}
    .vision-sma .info-conent-sma{margin-top: 12%}
}
@media(min-width: 768px) and (max-width:991px){ .vision-sma .info-conent-sma{margin-top: 8%}}
@media(min-width: 1200px){
    .w-lg-75{width: 85%}
    .vision-sma h4{ font-size: 19px}
    .vision-sma p:first-of-type{  padding-top: 60px}
    .publishers-sma{padding-bottom: 6% !important}
}
@media(min-width: 1200px) and (max-width: 1399px){.publishers-sma .btn-pub-sma a{font-size: 28px} .content-container h3{ font-size: 16px}}
@media(min-width: 1400px){
    p{font-size: 19px}
    .keep-in-touch h3{font-size: 48px}
    .keep-in-touch a{font-size: 23px}
    .content-container h3,  .btn-sma a { font-size: 19px} .publishers-sma .btn-pub-sma a{font-size: 33px}
}
@media(min-width: 576px) and (max-width: 768px){ .keep-in-touch h3{margin-top: 4%}}
@media(max-width: 575px){
    .about-info-sma .second-content::after{bottom: -3%}
    .about-info-sma .img-container{width: 96%; margin: auto}
    .about-info-sma p .read-more{    border-bottom: 1px solid;  width: 83px;   margin: 5% auto}
    .mission-sma h2,
    .mission-sma h4,
    .vision-sma h2,
    .vision-sma h4{text-align: center}
    .mission-sma h4,
    .vision-sma h4{font-size: 16px; padding-bottom: 2%}
    .Background-img-designed{font-size: 10px}
}
@media(min-width: 520px) and (max-width: 767px){ .content-container h3{padding: 8% 10%}}
@media(min-width: 450px) and (max-width: 575px){ .borders-sma{ width: 75%;  margin: auto}}
.footer .call-sma {position: fixed;  bottom: 80px; cursor: pointer}
.footer .call-sma i{color: #25d366; border-radius: 5%}
.footer .fa-brands{line-height: .7}
@media(min-width: 768px) {
    .footer .call-sma{right: 3%}
    .footer .call-sma i{font-size: 59px}
    .footer .call-sma .content{
        display: inline-block;
        margin: 0 10px 15px;
        font-size: 13px;
        border: 1px solid #d79b4b
    }
    body.dark-mode .footer .call-sma .content{border: 1px solid #131313}
    .Background-img-designed { font-size: 11px}
}
@media(max-width: 767px){
    .first-img-sma{display: none}
    .footer-logo img{width: 60%}
    .menu-smaimg{width: 20%}
    .footer-links ul li a{font-size: 12px}
    .footer-contact ul li a{font-size: 11px}
    .footer .call-sma{left: 2%}
    .footer .call-sma i{font-size: 40px}
    .bgidd{text-align: center}
    .Background-img-designed { font-size: 8px}
}
@media(max-width: 575px){
    .footer-links ul li a{font-size: 13px}
    .mail-phone-sma li a,
    .rights-sma{font-size: 11px}
}
@media(max-width: 340px){
    .footer-links ul li a{font-size: 11px}
    .mail-phone-sma li a,
    .rights-sma{font-size: 10px}
}