*{margin: 0;   padding: 0;  box-sizing: border-box}
body {background-color:#131313}
body.dark-mode {background-color:#e5e5e5}
.tinos-regular {
    font-family: "Tinos", serif;
    font-weight: 400;
    font-style: normal;
}
.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}
dl, ol, ul{margin-bottom:0}
.color-fe-sma{color: hsl(0, 0%, 97%)}
.color-13-sma{color: #131313}
body.dark-mode .color-fe-sma { color: #131313; }
body.dark-mode .footer-contact .color-fe-sma { color: #3e3e3e }
.fs-19-sma{font-size: 19px}
.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}
.color-whatsapp{color: #25d366;}
.bg-dark-sma{background-color: #131313}
.bg-dark-sma2{background-color: #131313}
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}
.border-gold-sma{border: 2px solid #d79b4b}
.border-fe-sma{border: 2px solid #f8f8f8}
body.dark-mode .active a{color: #7d7a7a}
body.dark-mode .border-gold-sma {border: 2px solid #898989}
.dark-mode .border-fe-sma { border: 0}
.border-r-10{border-radius: 10px}
.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%}
.overlay-sma{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(19, 19, 19, .65);
}
.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: linear-gradient(358deg, #131313 25%, #131313 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}
@media(max-width: 767px){
    .bgi-main-sma-sm{
        background: #131313 url('../../../public/front/images/main/polysm.webp') repeat center center;
        background-size: cover
    }
    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}
}
/* Start navigation bar */
.gold-one-sma:hover{    /* li */ 
    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
}
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: 99999999 !important}
.offcanvas{height: auto; font-size: 999999}
.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}
.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}
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}
.dir-rtl, .rtl  {direction: rtl}
.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:991px){
    .first-nav-sma{ flex-direction: row}
    .first-nav-sma .color-fe-sma {font-size: 11px}
    .offcanvas.offcanvas-start {  overflow: scroll !important; height: auto}
}
/* End navigation bar */
.article-image-sma{
    padding: 3% 3% 0;
    border-top: 1px solid #d79b4b;
    margin-top: 5%;
    margin-bottom: 3%
}
.article-image-sma::before,
.article-image-sma::after,
.article-image-sma h1::before,
.article-image-sma h1::after,
.content1::before,
.content1::after,
.content2::before,
.content2::after,
.content3::before,
.content3::after{  content: ' ';  position: absolute;   background-color: #d79b4b}
body.dark-mode .article-image-sma::before, body.dark-mode .article-image-sma::after, body.dark-mode .article-image-sma h1::before,
body.dark-mode .article-image-sma h1::after, body.dark-mode .content1::before, body.dark-mode .content1::after, 
body.dark-mode .content2::before, body.dark-mode .content2::after, body.dark-mode .content3::before, body.dark-mode .content3::after,
body.dark-mode .publishers-container::after,
body.dark-mode .publishers-container::before, 
body.dark-mode .borders-sma::after, 
body.dark-mode .borders-sma::before
{    background-color: #898989}
.article-image-sma::before,
.article-image-sma::after{  top: 0;  width: 1px;   height: 100%}
.article-image-sma h1::before,  .article-image-sma h1::after{height: 1px;   width: 20%; bottom: 0}
.article-image-sma h1::before{left: -20%}
.article-image-sma h1::after{right: -20%}
.article-image-sma::before{left: 0}
.article-image-sma::after{right: 0}
.content1::before, .content2::before{     width: 1px; height: 95%; top: 3%}
.content3::before{     width: 1px; height: 98%; top: 2%}
.content1::after, .content2::after{ height: 1px;  width: 2%;  top: 3%}
.content3::after{ height: 1px;  width: 2%;  top: 2%}
.instagram-content{border: 1px solid #d79b4b;   padding: 3% 5%;   margin: 10% 4% 10% 0}
body.dark-mode .instagram-content {border: 1px solid #898989}
@media(min-width: 992px){
    .article-image-sma h1{margin-bottom: 5%}
    .article-main-p{width: 75%;  margin: auto}
 }
@media(min-width: 768px){ h1{width: 76%;   margin-left: 12%}     p{text-align: justify } }
@media(min-width: 530px) and (max-width: 767px){
    .fs-xs-19-px{font-size: 19px}
    .article-image-sma h1::before, .article-image-sma h1::after {width: 5%}
    .article-image-sma h1::before{  left: -3%}
    .article-image-sma h1::after {  right: -3%}
}
@media(max-width : 529px){
    .fs-xs-19-px{font-size: 17px}
    .article-image-sma h1::before, .article-image-sma h1::after { width: 6%}
    .article-image-sma h1::before {left: -3%}
    .article-image-sma h1::after {right: -3%}
    .article-main-p{padding-top:40px !important}    
}
@media(max-width: 991px){    h1{text-align: justify;    word-break: break-all } }
.article-sma h2,
.article-sma h3,
.article-sma h4,
.article-sma h5,
.article-sma h6{color: #d79b4b}

body.dark-mode .article-sma h2,
body.dark-mode .article-sma h3,
body.dark-mode .article-sma h4,
body.dark-mode .article-sma h5,
body.dark-mode .article-sma h6 { color: #131313}
p,
.article-sma p{
    color: #f8f8f8;
    text-transform: capitalize;
    letter-spacing: .5px;
    line-height: 1.7
}
.fustat{letter-spacing: 0}
body.dark-mode p, body.dark-mode .article-sma p{color: #3e3e3e}
@media(max-width: 360px){
    .article-sma .article-img2{padding: 15px}
    h1{padding: 20px 15px 10px}
    .article-sma h2,  .article-sma h3,  .article-sma h4,  .article-sma h5,  .article-sma h6{padding: 0 15px 5px}
    p{padding: 0 15px !important}
    .instagram-content{padding: 25px 15px; margin: 15% auto}
}
@media(min-width: 360px) and (max-width: 767px){
    h1, .article-sma .article-img2{padding: 15px 30px}
    h1{padding-top: 40px;  padding-bottom: 0}
    .article-sma h2,  .article-sma h3,  .article-sma h4,  .article-sma h5,  .article-sma h6{padding: 5px 30px}
    p{padding: 10px 30px !important}
    .instagram-content{padding: 25px 30px;  margin: 15% auto}
}
@media(max-width: 767px){
    h1{line-height: 1.3;  text-align: justify;   word-break: break-all}
    .article-sma h2,  .article-sma h3,  .article-sma h4,  .article-sma h5,  .article-sma h6{
     font-size: 16px}
}
@media(min-width: 768px) and (max-width: 991px){
    .article-sma .article-img2{padding: 15px 30px}
     h1{padding: 30px 30px 0}
    .article-sma h2,  .article-sma h3,  .article-sma h4,  .article-sma h5,  .article-sma h6{ font-size: 19px; padding: 10px 30px}
    p{padding:  5px 30px}
    .instagram-content{margin: 10px 30px}
    .fs-xs-19-px{font-size: 23px}
}
@media(min-width: 992px) and (max-width: 1199px){
    .article-sma .article-img2{padding:30px}
     h1{padding: 50px 30px 0; font-size: 33px; text-align: center}
    .article-sma h2,  .article-sma h3,  .article-sma h4,  .article-sma h5,  .article-sma h6{ font-size: 23px; padding: 10px 30px}
    p{padding:  5px 30px}
    .content1{margin-top: 35px;}
    .content{width: 95%}
    .instagram-content{width: 92%}
    .fs-xs-19-px{font-size: 28px}
}
@media(min-width: 1400px){
    .article-sma .article-img2{padding:30px}
     h1{padding: 50px 30px 0; font-size: 48px; text-align: center}
    .article-sma h2,  .article-sma h3,  .article-sma h4,  .article-sma h5,  .article-sma h6{ font-size: 23px; padding: 10px 30px}
    p{padding:  5px 30px; font-size: 19px}
    .content1{margin-top: 35px;}
    .instagram-content{width: 88%; margin: 10% auto}
    .fs-xs-19-px{font-size: 28px}
}
@media(min-width: 1200px) and (max-width: 1399px){
    .article-sma .article-img2{padding:30px}
     h1{padding: 50px 30px 0; font-size: 33px; text-align: center}
    .article-sma h2,  .article-sma h3,  .article-sma h4,  .article-sma h5,  .article-sma h6{ font-size: 23px; padding: 10px 30px}
    p{padding:  5px 30px}
    .content1{margin-top: 35px;}
    .instagram-content{width: 82%;  margin: 10% auto}
    .fs-xs-19-px{font-size: 28px}
}
.articles-content .btn-sma {width: 85%;  margin: auto}
.articles-content .borders-sma::after,
.articles-content .borders-sma::before {width: 9%;  height: 1px;  bottom: 18%}
.articles-content .publishers-container::after,
.articles-content .publishers-container::before{ width: 1px; height: 82%;  top:0}
.publishers-container{padding: 10%; border-top: 1px solid #d79b4b}
body.dark-mode .article-image-sma,
body.dark-mode .publishers-container {
    border-top: 1px solid #898989
}
.publishers-container::after,
.publishers-container::before,
.borders-sma::after,
.borders-sma::before {content: ' ';  position: absolute; background-color: #d79b4b;  z-index: 9999}
.publishers-sma .publishers-container::after,
.publishers-sma .publishers-container::before{ width: 1px;  top:0}
@media(max-width: 767px){
    .publishers-sma .publishers-container::after,
    .publishers-sma .publishers-container::before{ height: 90%;}
    .publishers-sma .borders-sma::after, .publishers-sma .borders-sma::before{bottom: 10%}
}

@media(min-width: 768px){
    .publishers-sma .publishers-container2{height: 590px}
    .publishers-sma .publishers-container::after,
    .publishers-sma .publishers-container::before{height: 100%}
    .publishers-sma .borders-sma::after, .publishers-sma .borders-sma::before{bottom: 0}
}
.publishers-sma .borders-sma::after,
.publishers-sma .borders-sma::before{width: 5%;  height: 1px}
.publishers-sma .publishers-container::after,
.publishers-sma .publishers-container::before,
.borders-sma::after{right:0}
.borders-sma::before {left: 0}
.publishers-sma .publishers-container::after {  right: 100%}
.content-container h3{  padding: 8% 5% }
.publishers-container h3, .publishers-container a{ transition: all .4s ease-in-out}
.publishers-container:hover h3{color: #faba66}
.publishers-container:hover a{font-weight: bold; color: #f8f8f8}
.content-container{
    position: absolute;
    bottom: 20%;
    background-color: rgba(19, 19, 19, .7);
    left: 0;
    height: 20%;
    width: 100%;
    border-top: 1px solid #d79b4b
}
@media(min-width: 520px) and (max-width: 767px){ .content-container h3{padding: 8% 10%}}
@media(min-width: 450px) and (max-width: 576px){ .borders-sma{ width: 75%;  margin: auto}}
@media(max-width: 1400px){.content-container h3{ font-size: 16px}}
@media(max-width: 991px){.publishers-sma{padding-top: 50px}}
@media(min-width: 992px){
    .publishers-sma{    padding-top: 100px;     padding-bottom: 100px}
}
@media(max-width: 576px){
    .articles-content{margin-top: 12%}
    .articles-content .special-design-sm{width: 80%; margin: auto;}
    .articles-content h2,
    .whatsapp-article,
    .publishers-sma h2{font-size: 19px}
}
@media(min-width: 575px) and (max-width: 767px){
    .articles-content{margin-top: 10%}
    .articles-content .special-design-sm{width: 60%; margin: auto;}
    .articles-content h2,
    .whatsapp-article,
    .publishers-sma h2{font-size: 23px}
}
@media(min-width: 768px) and (max-width: 991px){
    .articles-content{margin-top: 15%}
}
@media(min-width:992px) and (max-width: 1199px){
    .articles-content{    margin-top: 13%}
}
@media(min-width: 1200px) and (max-width: 1399px){
    .articles-content{margin-top: 13%}
}
@media(min-width: 1400px){
    .articles-content{margin-top: 13%}
    .content-container h3,  .btn-sma a { font-size: 19px}
}
.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 !important;
        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}
    .Background-img-designed{font: 9px}
}
@media(max-width: 340px){
    .footer-links ul li a{font-size: 11px}
    .mail-phone-sma li a,
    .rights-sma{font-size: 10px}
    .fs-13-sm{font-size: 11px;}
}