*{margin: 0;   padding: 0;  box-sizing: border-box}
body {background-color:#131313}
body.dark-mode {  background-color: #f8f8f8;  color: #131313}
.tinos-regular {font-family: "Tinos", serif;  font-weight: 400;  font-style: normal}
.tinos-bold {font-family: "Tinos", serif;   font-weight: 700;  font-style: normal}
.alegreya{font-family: "Alegreya", serif;   font-optical-sizing: auto;   font-style: normal}
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 .contact-us-form-sma h3.color-fe-sma { color: #f8f8f8 }
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(19, 19, 19, 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}
body.dark-mode .border-gold-sma {border: 2px solid #898989}
.border-fe-sma{border: 2px solid #f8f8f8}
.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%}
.alert-success {
    font-size: 28px;
    text-transform: capitalize;
    --bs-alert-color: #32c34b;
    --bs-alert-bg: transparent;
    --bs-alert-border-color: transparent;
    --bs-alert-link-color: #f8f8f8
}
.fs-ar-23{font-size: 25px}
.dir-rtl{direction: rtl}
.overlay-sma{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(19, 19, 19, .65)
}
body.dark-mode .overlay-sma{display: none}
body.dark-mode .contact-second-sma .overlay-sma{display: block}
@media(max-width: 767px){
    .bgi-main-sma-sm,
    .bgi-main-sma-sm2,
    .bgi-main-sma-sm3{
        background: url(../../../public/front/images/main/polysm.webp) repeat center center;
        background-repeat:repeat;
        background-position:center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        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;}
    .social{padding: 5% 5% 10% 5%;}
    .social i{font-size: 59px}
}

@media(min-width: 768px){
    .p-md-sma{padding: 5px 25px}
    .fs-59-md-sma{font-size: 59px}
    .social{padding: 10%}
}
.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
}
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: 999999999 !important}
.offcanvas{height: auto; z-index: 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}
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}
.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:990px){
    .first-nav-sma{ flex-direction: row}
    .first-nav-sma .color-fe-sma {font-size: 11px}
    .offcanvas.offcanvas-start {  overflow: scroll !important; height: auto}
}
.contact-second-sma{padding: 50px 0}
.card-sma h3{position:relative}
.animation-line-bottom-sma {
    position: absolute;
    bottom: 0;
    left: 40%;
    width: 1%;
    height: 2px;
    animation: animate_one .3s linear forwards
}
body.dark-mode .animation-line-bottom-sma{background:linear-gradient(90deg, #898989 10%, #131313 50%); animation:none; width: 15%}
body.dark-mode .button-sma button{border:0}
@keyframes animate_one{
    100% {
        opacity: 1;
        background: linear-gradient(90deg, rgba(248, 248, 248, 1) 10%, rgba(214, 155, 75, 1) 50%);
        width: 15%
    }
}

.card-sma img {animation: animate_three .5s linear backwards}
.w-e-c{font-size: 23px;  font-weight: 600;  letter-spacing: 4px}
input[type=text],
input[type=email],
textarea.form-control{padding: 5px 30px}
.fa-icon-sma{position: absolute;  top: 10px;  left: 10px;   color: #d79b4b}
body.dark-mode .fa-icon-sma{color: #3e3e3e}
@keyframes animate_three {
    0% {opacity: 0}
    100% {opacity: 1}
}
.social i{animation: animate_two 2.5s linear backwards;    animation-delay: 1s}
@keyframes animate_two { 0% {opacity: 0}   100% {opacity: 1}}
@media(min-width: 768px){
    .animation-line-bottom-sma {left: 42%}
    .contact-second-sma .contact-us-form-sma h3 .title{font-size: 48px}
    .contact-second-sma{
        background: #131313 url('../../../public/front/images/main/imagecontact.jpg') repeat center center;
        background-size: cover
    }
    .contact-second-sma .contact-us-form-sma .contact-img-sma {
        background: #131313 url(../../../public/front/images/main/imagecontactlg.webp) repeat center center;
        background-size: cover;
        border: 2px solid #d79b4b; 
    }
    body.dark-mode .contact-second-sma {background: none    }

}
body.dark-mode .contact-second-sma { background-color: transparent}
body.dark-mode .bgc-lggold-sma { background: rgb(214, 155, 75);  background: linear-gradient(90deg, #131313 10%, #898989 50%)}
body.dark-mode .bgc-lggold-sma .color-fe-sma{color: #f8f8f8}
@media (min-width: 991px) {
    .border-right-gold-sma {border-right: 2px solid #d79b4b}
    body.dark-mode .border-right-gold-sma{border-right: 2px solid #898989}
body.dark-mode .contact-second-sma .contact-us-form-sma .contact-img-sma {border: 1px solid #898989}

}
@media(max-width: 767px){
    a.bgc-lggold-sma.color-fe-sma.border-fe-sma.text-decoration-none.py-3.px-5.border-r-10 {   padding: 8px 15px !important}
    body.dark-mode .whapts-app-sma.color-fe-sma{color: #f8f8f8 }
    .social-icon{width: 80%;   margin: auto}
    .fs-33-sm-sma{font-size: 33px}
    .fs-23-sm-sma{font-size: 23px}
    .fs-19-sm-sma{font-size: 19px}
    .form-control{font-size: 13px}
    h1.h1-animation-sma.fs-23-sm-sma,
    h3 .title{font-size: 28px}
}
@media(max-width: 991px){
    .border-bottom-gold-sma { border-bottom: 2px solid #d79b4b}
    body.dark-mode .border-bottom-gold-sma {  border-bottom: 2px solid #898989;   border-right: 0 !important}
}
@media(min-width: 768px) and (max-width: 991){
    .footer-logo img {  width: 40%}
}
.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(max-width: 767px){
    .footer-logo img{width: 60%}
    .footer .call-sma{left: 2%}
    .footer .call-sma i{font-size: 40px}
}
@media(min-width: 431px) and (max-width: 767px){
    .footer-logo img {  width: 30%}
}

.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}
    .menu-smaimg{width: 20%}
    .footer-logo img{width: 60%}
    .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}
}