*{margin: 0;   padding: 0;  box-sizing: border-box}
body {background-color:#131313}
body.dark-mode {  background-color: #f8f8f8;  color: #131313}
.rtl, .dir-rtl {direction: rtl}
.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
}
.pagination{--bs-pagination-bg: transparent; border: 0;}
.page-link {
    color: #f8f8f8;
    border: 1px solid #d79b4b;
}
.page-link:hover {color: #d79b4b}
.page-item:first-child .page-link {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.page-item:last-child .page-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.page-item:not(:first-child) .page-link,
.disabled>.page-link, .page-link.disabled {
    color: #f8f8f8;
    background-color: #131313;
    border-color: goldenrod;
}
.active>.page-link,
.page-link.active{background-color: #d79b4b !important}
.active a{color: #d79b4b}
.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%}
.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: 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(max-width: 400px){
    .fs-11-sm{font-size: 11px}
    .fs-10-sm{font-size: 10px}
  }
  @media(max-width: 310px){
    .fs-11-sm{font-size: 9px}
    .fs-10-sm{font-size: 8px}
  }
@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){
    .offcanvas.offcanvas-start {  overflow: scroll !important; height: auto}
    .first-nav-sma{ flex-direction: row}
    .first-nav-sma .color-fe-sma {font-size: 11px}
}

.portfolio-sma .wrapper-sma{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  translate(-50%, -50%);
}
.protfolio-sma .wrapper-sma h1{
    overflow: hidden;
    font-size: 100px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .2rem;
    color: #d69b4b
}
.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
}
.protfolio-sma .protfolio-header-sma h1{
    transition: 5s all ease-in-out;
    color: #E7E6F7; 
    background-image: -webkit-linear-gradient(0deg, #F4CBC6 22%, #f8f8f8 33%, #F4CBC6 1%, #d79b4b 50%); background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent
}
.protfolio-sma .protfolio-header-sma h1:hover{
    color: #E7E6F7; background-image: -webkit-linear-gradient(150deg, #d79b4b 22%, #f8f8f8 13%, #800020 11%, #d79b4b 60%); background-clip: text; -webkit-background-clip: text;
}

@media(max-width: 991px){
    .protfolio-sma .wrapper-sma h1 span{position: relative; animation: animate .41s  backwards}
    .protfolio-sma .wrapper-sma h1 span:nth-child(2){animation-delay: .04s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(3){animation-delay: .08s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(4){animation-delay:  .12s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(5){animation-delay: .16s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(6){animation-delay: .20s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(7){animation-delay: .24s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(8){animation-delay: .28s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(9){animation-delay: .34s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(10){animation-delay: .39s}
    @keyframes animate{
        0%{bottom: -300px}
        100%{bottom: 0}
    }

}
  @media(min-width: 992px){
    .protfolio-sma .wrapper-sma h1 span{position: relative; animation: animate .81s  backwards}
    .protfolio-sma .wrapper-sma h1 span:nth-child(2){animation-delay: .11s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(3){animation-delay: .18s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(4){animation-delay:  .275s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(5){animation-delay: .36s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(6){animation-delay: .45s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(7){animation-delay: .54s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(8){animation-delay: .635s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(9){animation-delay: .72s}
    .protfolio-sma .wrapper-sma h1 span:nth-child(10){animation-delay: .81s}
    @keyframes animate{
        0%{right: -300px}
        100%{right: 0}
    }
}
.protfolio-sma .protfolio-header-sma .links{display: flex;  justify-content: center;  align-items: center}
.protfolio-sma .protfolio-header-sma ul li{transition: 1s all ease-in-out}
.protfolio-sma .protfolio-header-sma ul li a{color: #EDEDED; padding-bottom: 10px}
.protfolio-sma .protfolio-header-sma ul li.active a{color: #d79b4b}
.protfolio-sma .protfolio-header-sma ul li i.fa-solid.fa-sort {color: #d79b4b;  text-align: center; margin: 5px;     font-size: 19px}
.dropdown-toggle::after{display: none}
.special-dd{z-index: 999999}
.special-dd li a{font-size: 23px}
.dropdown-item.active, .dropdown-item:active{background-color: #f8f8f8}
.border-gold:hover{border-bottom: 2px solid #d79b4b}

.container-project .overlay-project{
    position: absolute;
    top: 0;
    left: 0;
    width: 85%;
    height: 100%;
    background-color: #131313;
    z-index: 88888;
    border: 1px solid #d79b4b
}
.container-project .project-content{z-index: 99999}
.container-project .project-content h2{
    transform: rotate(-90deg);
    font-size: 23px;
    position: absolute;
    top: 50%;
    left: -67%;
    width: 200px;
    transition: 1s all ease-in-out
}
.container-project:hover .project-content h2{color: #d79b4b}
.container-project img{border: 1px solid #d79b4b;   transition: 1s all ease-in-out}
.container-project:hover img{    transform: translateX(3%)}
.container-project span{
    position: absolute;
    bottom: -4%;
    left: 0;
    z-index: 99999;
    font-weight: 500;
    border-radius: 0 3px 3px 0;
    transition: 1s all ease-in-out;
}
.container-project:hover span{
    font-weight: 700;
    background: #d79b4b;
    color: #f8f8f8; 
}
body.dark-mode .container-project:hover span{background-color: #3e3e3e; color: #f8f8f8}
.contact-form-sma::before{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 90%;
    left: 5%;
    background-color: #d79b4b;
    height: 1px
}
body.dark-mode .contact-form-sma::before{    background-color: #3e3e3e}
.contact-form-sma h2,
.contact-form-sma h4{color:#d79b4b; font-weight: 400}
body.dark-mode .contact-form-sma h2{color: #131313}
body.dark-mode .project-content .color-fe-sma,
body.dark-mode .container-project:hover h2,
body.dark-mode .contact-form-sma h4{color: #f8f8f8}
.contact-form-sma .title-sma h2{
    text-transform: uppercase;
    line-height: 1;
    color: transparent;
    background-image: linear-gradient(to left, #fafafa, #666565, #d79b4b, rgb(102, 2, 2));
    background-size: 500%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    animation: animatetwo 6s linear infinite
}

body.dark-mode .contact-form-sma .title-sma h2{
    color: transparent;
background-image: linear-gradient(to left, #fafafa, #666565, #f8f8f8);
background-clip: text;
animation: none;
}
@keyframes animatetwo{
    0%{background-position: 0 100%}
    50%{background-position: 100% 0}
    100%{background-position: 0 100%}
}
.contact-form-sma h4{font-size: 33px}
.contact-form-sma p{color: #EDEDED; font-size: 28px}
.contact-form-sma p .whapts-app-sma{
    border: 1px solid #d79b4b;
    display: inline-block;
    font-size: 16px;
    padding: 5px 10px;
    margin-top: 10px;
    border-radius: 10px;
    transition: 1s all ease-in-out
}
body.dark-mode .whapts-app-sma.color-fe-sma{color: #f8f8f8 }

body.dark-mode .container-project img,
body.dark-mode .border-gold:hover,
body.dark-mode .contact-form-sma p .whapts-app-sma{border: 1px solid #3e3e3e}
.contact-form-sma p .whapts-app-sma:hover{background-color: #25d366; color: #F8F8F8}
.contact-form-sma form{width: 60%;   margin: auto}
.contact-form-sma form input,
.contact-form-sma form textarea{padding:5px 30px}
.contact-form-sma form input,
.contact-form-sma form textarea{border: 1px solid #d79b4b}
body.dark-mode .contact-form-sma form input,
body.dark-mode .contact-form-sma form textarea,
body.dark-mode .container-project .overlay-project{
    border: 1px solid #898989;
}
.contact-form-sma form input::placeholder,
.contact-form-sma form textarea{color: #12121280}
.contact-form-sma form .fa-user,
.contact-form-sma form .fa-envelope,
.contact-form-sma form .fa-message{
    position: absolute;
    top: 13px;
    left: 10px;
    font-size: 13px;
    color: #d79b4b
}
body.dark-mode .contact-form-sma form .fa-user,
body.dark-mode .contact-form-sma form .fa-envelope,
body.dark-mode .contact-form-sma form .fa-message{color: #3e3e3e}
.contact-form-sma form .fa-paper-plane {color: #f8f8f8}
.contact-form-sma .btn-gold{
    background: rgb(214, 155, 75);
    background: linear-gradient(90deg, rgba(19, 19, 19, 1) 10%, rgba(214, 155, 75, 1) 50%);
    font-weight: bold;
    padding-top: 1%;
    padding-bottom: 1%;
    color: #f8f8f8;
    font-weight: bold;
    border: 1px solid #d79b4b
}
body.dark-mode .contact-form-sma .btn-gold { background: linear-gradient(90deg, rgba(19, 19, 19, 1) 10%, rgb(89 86 83) 50%);    border: 1px solid #47433d}
@media(max-width: 1199px){
    .contact-form-sma .content2 h2{font-size: 33px}
}
@media(max-width:767px){
    .protfolio-sma .protfolio-header-sma h1{font-size: 33px} 
    .protfolio-header-sma ul a{font-size: 13px}
    .container-project .project-content h2{left: -143%;  font-size: 16px}
    .container-project .project-content img { margin-top: 11%; margin-bottom: 10%}
    .container-project span{height: 25px; line-height: 25px; min-width: 100px; font-size: 13px}
    .container-project:hover span{min-width: 150px}
    .contact-form-sma h2{font-size: 33px}
    .contact-form-sma {
        padding: 17% 0;
        position: relative;
        background: url('../../../../public/front/images/main/imagecontactsm.webp');
        background-size: cover;
    }
    body.dark-mode .contact-form-sma{margin-top: -5%}

}
@media (min-width: 575px) and (max-width:767px){
    .bgi-main-sma-sm4{background: none}
    .protfolio-sma .wrapper-sma h1 {
        margin-top: 10%;
        font-size: 48px;
    }
}
@media(max-width: 575px){
    .protfolio-sma .wrapper-sma h1 { margin-top: 10%; font-size: 48px}
    .container-project{ margin-bottom: 50px}
    .project-con{margin-left: auto; margin-right: auto}
    .container-project span {height: 35px;  line-height: 35px;  min-width: 120px;  font-size: 13px;   bottom: -3%}
    .contact-form-sma .title-sma h2 {font-size: 28px;  line-height: 2;  padding: 0 10px}
}
@media(max-width: 350px) {.container-project .project-content h2 {left: -130%}}
@media (min-width: 320px) and(max-width: 350px) {.container-project .project-content h2 {left: -120%}}
@media (min-width: 350px) and (max-width: 375px) {.container-project .project-content h2 {left: -110%}}
@media (min-width: 375px) and (max-width: 400px) {.container-project .project-content h2 {left: -100%}}
@media (min-width: 400px) and (max-width: 425px) {.container-project .project-content h2 {left: -88%}}
@media (min-width: 425px) and (max-width: 450px) {.container-project .project-content h2 {left: -80%}}
@media (min-width: 450px) and (max-width: 500px) {.container-project .project-content h2 {left: -70%}}
@media (min-width: 500px) and (max-width: 544px) {.container-project .project-content h2 {left: -58%}}
@media (min-width: 545px) and (max-width: 767px) {.container-project .project-content h2 {left: -53%}}
@media(max-width: 500px){.protfolio-sma .wrapper-sma h1 {font-size: 28px}}
@media(min-width:451px) and (max-width: 767px){
    .contact-form-sma h2,
    .contact-form-sma h4{font-size: 33px}
    .contact-form-sma p{font-size: 19px}
    .contact-form-sma form input::placeholder,
    .contact-form-sma form textarea,
    .contact-form-sma .btn-gold{font-size: 13px} 
    
}
@media(max-width: 450px){
    .contact-form-sma h2,
    .contact-form-sma h4{font-size: 23px}
    .contact-form-sma p{font-size: 16px}
    .contact-form-sma form{ width: 90%;   margin: auto}
    .contact-form-sma form input::placeholder,
    .contact-form-sma form textarea{font-size: 11px}
    .contact-form-sma .btn-gold{font-size: 11px}
}
@media(min-width: 576px){
    .contact-form-sma .content2{
        background-color: rgb(19 19 19 / 60%);
        border-radius: 10px 10px 0 0;
        border-top: 1px solid #d69b4b;
        border-left: 1px solid #d69b4b;
        border-right: 1px solid #d69b4b
    }
    body.dark-mode  .contact-form-sma .content2 {
        margin-bottom: 10%;
        border-top: 1px solid #898989;
        border-left: 1px solid #898989;
        border-right: 1px solid #898989
    }
    .contact-form-sma .content2 h2{margin: 0 1%;   line-height: 60px}
}
@media (min-width: 768px) {
    body:not(.dark-mode)  .contact-form-sma {
    padding: 10% 0;
    position: relative;
    background: url('../../../public/front/images/main/imagecontact.webp');
    background-size: cover} 
}
@media(min-width: 768px) and (max-width: 1024px){
    .protfolio-sma .protfolio-header-sma h1{font-size: 59px; position: relative}
}
@media(min-width: 992px){
    .protfolio-sma .protfolio-header-sma:hover h1::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        width: 5%;
        width: 10%;
        bottom: 0;
        left: 39%;
        background-image: -webkit-linear-gradient(0deg, #F4CBC6 22%, #f8f8f8 33%, #F4CBC6 1%, #d79b4b 50%);
        height: 1px;
    }
}
@media(min-width: 768px){
    .protfolio-sma .wrapper-sma h1 {font-size: 59px}
    .container-project .project-content h2{left: -96%}
    .container-project .project-content img { margin-top: 11%;  margin-bottom: 2%}
    .container-project span{height: 28px; line-height: 28px; min-width: 125px}
    .container-project:hover span{min-width: 150px}


}
@media (min-width: 576) and (max-width: 767px) {
    .container-project .project-content h2 {  left: -143%}
}
@media(min-width: 992px){ 
    .container-project .project-content h2{left: -111%}
    .container-project .project-content img {margin-top: 11%;  margin-bottom: 2%}

}
@media(min-width: 1025px){
    .protfolio-sma {padding-top: 7%}
    .protfolio-sma .protfolio-header-sma h1{font-size: 83px; position: relative}
    .projects-pb{padding-bottom: 5%}
    .project-content{margin-bottom: 35px}
    .content2 {padding-top: 7%; padding-bottom: 7%}
    .content2 .title-sma{padding-top: 7%}    
}
@media(min-width: 1200px){
    .protfolio-sma .wrapper-sma h1 {font-size: 84px}
    .protfolio-sma .protfolio-header-sma ul li{font-size: 33px}
    .container-project .project-content h2{left: -87%}
    .container-project .project-content img {margin-top: 6%; margin-bottom: 6%}
    .contact-form-sma h2{font-size: 48px}
    .contact-form-sma p .whapts-app-sma{font-size: 19px}
}
@media(min-width: 1400px){
    .container-project .project-content h2{left: -70%; font-size: 28px}
    .container-project .project-content img { width: 95%;  margin-top: 6.5%}
    .container-project span{height: 37px; line-height: 37px; min-width: 150px}
    .container-project:hover span{min-width: 175px}

}

body.dark-mode .protfolio-sma .wrapper-sma h1,
body.dark-mode .protfolio-sma .protfolio-header-sma ul li.active a,
body.dark-mode .protfolio-sma .protfolio-header-sma ul li i.fa-solid.fa-sort{color: #131313}
body.dark-mode .protfolio-sma .protfolio-header-sma ul li a, 
body.dark-mode .container-project span{color: #3e3e3e}
body.dark-mode .active a{color: #7d7a7a}

.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 #3e3e3e}
    .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-size: 10px}
}
@media(max-width: 340px){
    .footer-links ul li a{font-size: 11px}
    .mail-phone-sma li a,
    .rights-sma{font-size: 10px}
    .Background-img-designed{font-size: 8px}
}