*{margin: 0;   padding: 0;  box-sizing: border-box}
body{background-color: #131313}
body.dark-mode {background-color: #ffff;  color: #131313}
.rtl, .dir-rtl {direction: rtl}
.dir-ltr {direction: ltr}
.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;
  letter-spacing: .5px !important;
  text-transform:capitalize
}
.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;
  letter-spacing: 0
}
dl, ol, ul{margin-bottom:0}
.color-fe-sma{color: #F8F8F8}
.color-13-sma{color: #131313}
.gold-sma{color: #d79b4b}
body.dark-mode .gold-sma,
body.dark-mode .color-fe-sma
{color: #131313}
button.gold-sma:hover{color: #f8f8f8}
.bg-dark-sma{background-color:  rgba(19, 19, 19, .95)}
.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}
.pagination{--bs-pagination-bg: transparent; border: 0;}
.z-index-nine{z-index: 99999}
.fs-33-sm-sma {font-size: 33px}
.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: #d79b4b}
.active>.page-link,
.page-link.active{background-color: #d79b4b !important}
.active a{color: #d79b4b}
.border-r-10{border-radius: 10px}
.p-li-md-sma{padding: 3px 10px} 
.position-relative-sma{position: relative}
.fit-content-sma { 
   width: -webkit-min-content;
   width: -moz-fit-content;
   width: fit-content;
   height: fit-content; 
   margin-inline: auto
}
.first-img-sma{position: fixed;   top: 0;   left: 0;   width: 100%}
.articles-sma .article-container-sma .article-content-sma p{color: #f8f8f8}
.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}
body.dark-mode .overlay-md-sma, body.dark-mode .overlay-sma, body.dark-mode .contact-second-sma { background-color: transparent}
@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;
    }
    body.dark-mode .new-line-sma{width: 100%}
    .bgi-main-sma-sm2{background-size: auto}
    .fs-13-sm{font-size: 13px}
    .p-md-sma{padding: 5px 10px}
    .letter-spacing-one{ letter-spacing: 1px}
    .navbar .logo1{width: 25%}
}
@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}
    .letter-spacing-one{ letter-spacing: 1px !important}
    .navbar .logo1{width: 10%}
}
.dark-mode .border-fe-sma { border: 0; }
.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 #3e3e3e;   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}
@media(min-width: 576px){
.navbar{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999999;
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, .2);
}
}
.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; z-index: 99999;}
.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}
body.dark-mode .footer-contact .color-fe-sma { color: #3e3e3e }

@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} 
}
.gold-gradient-sma{
    background: linear-gradient(358deg, rgba(248,248,248,1) 25%,  rgb(109, 100, 89) 50%);
    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, #3e3e3e 25%, rgb(13 13 13) 25%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media(min-width: 1200px){
  .w-lg-75{width: 75%; margin-right: auto; margin-left: auto}
}
.hero{background-color: #131313}
body.dark-mode .hero{background-color: #e5e5e5}
.carousel-caption {
  position: absolute; 
  top: 48%;
  left: 50%; 
  transform: translate(-50%, -50%); 
  z-index: 2; 
  text-align: center; 
  color: #fff; 
  max-width: 80%
 }
@media(max-width: 575px){
  .hero{height: 100vh}
  .carousel-item{max-width: 100%;  background-size: contain}
   .carousel-caption {top: 45%;  width: 60%}
  .carousel-item{max-width: 100%;  background-size: contain}
  .carousel-caption {top: 55%;  width: 60%}
  .hero .carousel-item {
    position: relative;
    height: 85vh;    
    max-width: 100%
  }
    .scroll-btn {
    border-radius: 0;
    width: 100%;
    height: 10vh;
    bottom: 50px;
    background-color: #131313;}
}
@media(min-width: 576px){
  .carousel-item{width: 100%;  max-width: 100%;  height:  100%; background-size: auto}
  .hero .carousel-item {
    position: relative;
    height: 100vh; 
    max-width: 100%; 
}
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}
body.dark-mode .overlay{background-color: transparent}
.first-slider .carousel-item1 .carousel-caption{
    opacity: 0;
    transition: opacity 1s ease-in;
    transition-delay: .5s; 
}
.first-slider .carousel-item1.active .carousel-caption {  opacity: 1;}
@media(min-width: 576px){
.first-slider .carousel-item.active,
.first-slider .carousel-item{
animation: zoomAnimation 7s infinite alternate ease-in;
}
@keyframes zoomAnimation {
  0% {
    background-size: 100%; 
  }
  50% {
    background-size: 107%; 
  }
  100% {
    background-size: 100%; 
  }
}
}
.smooth-scrolling{ z-index: 9999999}
.scroll-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
body.dark-mode .scroll-btn{color: #131313}
.scroll-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.design-contact .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, #3e3e3e 25%, rgb(13 13 13) 25%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}
.design-contact h1::before {
  content: ' ';
  bottom: -20%;
  left: 21%;
  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 5s linear infinite;
  animation-delay: 3s;
  width: 57%
}
body.dark-mode .design-contact h1::before {
  content: ' ';
  bottom: -20%;
  left: 21%;
  width: 50%;
  height: 3px;
  background: linear-gradient(358deg, #3e3e3e 25%, #898989 50%);
  position: absolute;
  animation: none;
}
@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;
  }
}
.design-contact p{text-align: justify}
.design-contact .image{padding: 3% 3%;  border-left: 1px solid #d79b4b}
.design-contact .image::before,
.design-contact .image::after,
.design-contact .img::after{content: ' ';   position: absolute;  background: #d79b4b}
.design-contact .image::before,
.design-contact .image::after{left: 0;  height: 1px;  width: 90%}
.design-contact .img img{z-index: 3}
.design-contact .img::after{
  top: -4.5%;
  right: 7.4%;
  width: 1px;
  z-index: 1;
  height: 109%
}
.design-contact .image::after{bottom: 0%}
.design-contact .image::before{top: 0%}
body.dark-mode .design-contact .image {border-left: 1px solid #131313}
body.dark-mode .design-contact .image::before,
body.dark-mode .design-contact .image::after,
body.dark-mode .design-contact .img::after{background-color: #131313}
@media(max-width: 575px){
  .design-contact h1{width: 271px; font-size: 28px}
}
@media(min-width: 576px) and (max-width: 767px){
  .design-contact h1{width: 61%; font-size: 33px}
  .md-phases{font-size: 59px; display:block !important}
}
@media(min-width: 768px){
  .design-contact-content{padding-right: 5%}
}
@media(min-width: 768px) and (max-width: 991px){
  .design-contact h1{width: 313px; font-size: 33px}
}
@media(min-width: 992px) and (max-width: 1199px){
  .design-contact h1{width: 34%; font-size: 33px}
  .design-contact p{font-size: 14px}
}
@media(min-width: 992px){
  .design-contact h1{margin-left: 10%}
  .design-contact .image img {
    animation: animate_five 2s linear infinite;
    transition: .1s all ease-in-out;
  }
  @keyframes animate_five{
    0% {
      transform: translate(1%)}
    20% {
      transform: translate(2%)}
    100% {
      transform: translate(1%);
    }
  }
}
@media(min-width: 1200px){.design-contact h1{width:34%}}
@media(min-width: 1400px){.design-contact h1{width:29%; margin-left: 12%} p{font-size: 19px} }
@media(max-width: 767px){
   body.dark-mode .design-contact h1::before {width: 0}
  .design-contact p{word-break: break-all}
}
.styles .style::before,
.styles .style::after{
  content: ' ';
  bottom: 0;
  width: 1px;
  height: 3px;
  background: #d79b4b;
  position: absolute;
  height: 95%
}
.styles .style-double::before,
.styles .style-double::after{top: 0;  height: 92%}
.styles .style::before{left: 0}
.styles .style::after{right: 0}
.styles h6::before,
.styles h6::after{
  content: ' ';
  background: #d79b4b;
  position: absolute;
  width: 7%;
  height: 1px;
  top: 18%
}
.styles .style::before,
.styles .style::after{ height: 94%}
.styles .industrial::before, .styles .industrial::after{top: 81%}
.styles h6::before{left: 0}
.styles h6::after{right: 0}
.styles .style-double{border-top: 1px solid #d79b4b}
body.dark-mode .styles .style-double{border-top: 1px solid #131313}
.style-double h5::before,
.style-double h5::after{    top: 3%}
body.dark-mode .styles .style::before, body.dark-mode .styles .style::after,
body.dark-mode .styles h6::before, body.dark-mode .styles h6::after{background-color: #131313}
@media(max-width: 991px){
  .styles{padding-top: 20%; padding-bottom: 20%}
  .styles h2{font-size: 40px}
  .styles p{
    text-align: justify !important;
    word-break: break-all;
  }
  .second-slider{padding-bottom: 25%}
  .second-slider p{
    width: 100%;
    text-align: justify;
    word-break: break-all }
  .second-slider .num-sma {font-size: 75px}
  .second-slider .content-sma {
    font-size: 23px;
    width: 200px;
    display: inline-block;
    margin-left: 5%
  }
  .second-slider .content-sma2{width: 100px}
  .second-slider .content-sma7{width: 250px}
  .styles .style{margin-bottom: 50px}
  .styles .style-single {border-top: 1px solid #d79b4b}
  body.dark-mode .styles .style-single {border-bottom:  0; border-top: 1px solid #131313}
  .styles .style-single::before, .styles .style-single::after{bottom: 6%}
  .styles .style img{padding: 15px 15px 25px}
  .styles .industrial{display: none}
  .styles .industrialh6{display: block}
  .styles .industrialh6::before, .styles .industrialh6::after{top: -61%}
  .styles .notindustrial::before, .styles .notindustrial::after{top: -54%}
  .styles .industrial::before, .styles .industrial::after {top: 123%}
}
@media(max-width: 767px){
  .styles p{margin-left: 2%; margin-right:2%}
}
@media(max-width: 575px){
  .second-slider .idv2{
    background: url(../../../public/front/images/main/idv-1.webp) no-repeat center center; 
      background-size: 100%; 
      height:450px;
    animation: imgAnimation 2.5s infinite alternate ease-in; /* Infinite animation */
  }
  
  /* Keyframes for zooming */
  @keyframes imgAnimation {
    0% {
      background: url('../../../public/front/images/main/idv-1.webp') no-repeat center center; 
      background-size: 100%; /* Zoom out */

    }
    50% {
      background: url('../../../public/front/images/main/idv-2.webp') no-repeat center center; 
      background-size: 100%; /* Zoom out */

    }
    100% {
      background: url('../../../public/front/images/main/idv-1.webp') no-repeat center center;
      background-size: 100%; /* Zoom out */
    }
    
  }
  .dark-mode .second-slider .idv2 {
    background: url(../../../public/front/images/main/idv3.png) no-repeat center center;
    animation: none;
    background-size: contain;
}
.dark-mode .content2 i,
.dark-mode .content2 p,
.dark-mode .content2 h4{color: #f8f8f8 !important}
  .second-slider .f5-animate{
      animation: hAnimation 2s infinite alternate ease-in; /* Infinite animation */
  }
  /* Keyframes for zooming */
  @keyframes hAnimation {
    0% {
      color: #d79b4b;

    }
    50% {
      color: #fcd6a4;

    }
    100% {
      color: #d79b4b;
    }
  }
  body.dark-mode .second-slider .f5-animate{color: #131313; animation:none}

  .second-slider p,
  .second-slider .h5-special{font-size: 19px}
  }
@media (max-width: 400px) {
    .idv2 {height:350px}
}
@media (max-width: 360px) {
  .second-slider .num-sma {  font-size: 60px}
  .second-slider .content-sma7{width: 215px}          
}
@media(max-width: 1199px){.styles  h6{font-size: 14px}}

@media(max-width: 767px){
    .styles .style::before, .styles .style::after {height: 96%}
    .styles .style-single::before, .styles .style-single::after {bottom: 4%}
    .styles .style img {padding: 25px 25px 30px}
    .styles h6{font-size: 28px}
    .styles .industrialh6::before, .styles .industrialh6::after {top: -55%}
}
@media(min-width: 576px) and (max-width: 767px) {
  .styles .notindustrial::before, .styles .notindustrial::after {top: 30%}
  .styles .industrialh6::before, .styles .industrialh6::after {
      top: 29%;
  }
}
@media(max-width: 575px){
  .container-sma{  max-width: 400}
  .styles .industrialh6::before, .styles .industrialh6::after {top: 33%}   
  .styles .notindustrial::before, .styles .notindustrial::after {top: 34%}

}
@media(max-width: 400px){
  .container-sma{  max-width: 300}
  .styles .industrialh6::before, .styles .industrialh6::after {top: 46%}   
  .styles .notindustrial::before, .styles .notindustrial::after {top: 44%}

}
@media (max-width: 340px) {
  .styles .industrialh6::before, .styles .industrialh6::after {
      top: 51%;
  }
}
@media (min-width: 992px) {
  .styles{padding-top: 5%; padding-bottom: 5%}
  .styles h2{font-size: 59px}
  .styles .style-single {border-bottom: 1px solid #d79b4b}
  body.dark-mode .styles .style-single { border-bottom: 1px solid #131313}
  .styles .style-double{margin-top: 18px}
  .styles .style img{padding: 15px 15px 25px}
  .styles .style-single img{padding: 15px}
  .styles .col-lg-2 {width: 20% }
  .styles .industrial::before, .styles .industrial::after {top: 73%}
  .styles .notindustrial::before, .styles .notindustrial::after{top: 21%}
  .styles .industrialh6{display: none}
  .portfolio-main {padding-top: 10%;  padding-bottom: 10%}
 }
 @media(min-width: 1200px){
  .styles .industrial::before, .styles .industrial::after {top: 78%}
  .styles .notindustrial::before, .styles .notindustrial::after{top: 17%}
 }
 @media(min-width: 1400px){
  .styles .notindustrial::before, .styles .notindustrial::after{top: 3%}
  .styles .industrial::before, .styles .industrial::after {top: 94%}
 }
.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: .5s all ease-in-out
}
.container-project:hover .project-content h2{color: #d79b4b}
.container-project img{border: 1px solid #d79b4b;   transition: .5s 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: .5s all ease-in-out;
}
.container-project:hover span{
    font-weight: 700;
    background: #d79b4b;
    color: #f8f8f8; 
}
.btn-pub-sma a{
  font-size: 23px;
  border-bottom: 1px solid goldenrod;
  padding-bottom: 10px;
}
body.dark-mode .container-project span{color: #3e3e3e}
body.dark-mode .container-project img,
 body.dark-mode .border-gold:hover{border: 1px solid #3e3e3e}
 body.dark-mode .project-content .color-fe-sma,
 body.dark-mode .container-project:hover h2{color: #f8f8f8}
body.dark-mode .container-project:hover span{background-color: #3e3e3e; color: #f8f8f8}
@media(max-width:767px){
  .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}
}
@media(max-width: 575px){
  .container-project{ margin-bottom: 50px}
  .project-con{margin-left: auto; margin-right: auto; margin-bottom: 4%}
  .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(min-width: 576px){ .project-con{margin-bottom: 5%}}
@media(min-width: 768px){
  .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: 992px){ 
  .container-project .project-content h2{left: -111%}
  .container-project .project-content img {margin-top: 11%;  margin-bottom: 2%}
}
@media(min-width: 1200px){
  .container-project .project-content h2{left: -87%}
  .container-project .project-content img {margin-top: 6%; margin-bottom: 6%}
  .contact-form-sma h2,
  .blog-sma h2{font-size: 48px}
}
@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}
}
.phases-img{
  border-top: 2px solid #d79b4b;
  border-left: 14px solid #d79b4b;
  border-bottom: 2px solid #d79b4b;
}
@media(max-width: 767px){
  .slider2-content{    padding-top: 10% !important}
  .slider2-content h3{
    margin-bottom: 8%;
    font-size: 48px;
    text-align:center;   
    background: linear-gradient(358deg, rgba(248, 248, 248, 1) 25%, rgba(214, 155, 75, 1) 50%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .slider2-content h5{margin-bottom: 3%; font-size: 28px; color: #d79b4b}
}
@media(min-width: 991px){
  .phases-img::before{
    content: ' ';
    right: 0;
    top: 0;
    height: 16%;
    background: #d79b4b;
    position: absolute;
    width: 2px
  }
  .phases-img2::before{top: 9.5%;   height: 81%}
  .phases h3,
  .phases h5,
  .phases p{padding-left: 10%}
  .phases h3::before{
    content: ' ';
    left: -2%;
    top: 51%;
    height: 2px;
    background: #d79b4b;
    position: absolute;
    width: 5%
  }
  .phases h3::after{
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    left: 1%;
    top: 3%;
    position: absolute
  }
  .phases h5{padding-top: 3%}
  .phases p{padding-right: 20%; padding-top: 1%}
  .phases ul li{list-style-type: none}
  .phases .fa-minus{font-size: 33px}

}
@media(min-width: 992px) and (max-width: 1199px){
  .phases-img::before{height: 17%}
  .phases h3::before{width: 5.5%; left: -2.5%}
}
@media(min-width: 1400px){
  .phases-img::before{height: 14%}
  .phases-img2::before{ top: 8%;   height: 84%}
  .phases h3::before{left: -1.8%; width: 4.3%}
}

@media(min-width: 768px) and (max-width: 1199px){
  .contact-form-sma h2{font-size: 48px;  margin-bottom: 5%}
  .contact-form-sma h4{font-size:33px}
  .contact-form-sma p{font-size: 28px}
}
@media(max-width:767px){
  .contact-form-sma { padding: 15% 0}
  .contact-form-sma .content{ padding: 15% 0}

  .contact-form-sma h2{font-size: 33px; margin-bottom: 40px}

  .contact-form-sma h4{font-size:23px}
  .contact-form-sma .content-whatsapp,
  .contact-form-sma h4{margin-bottom: 30px}
  .contact-form-sma p{font-size: 19px}
  .contact-form-sma {
    padding: 10% 0;
    position: relative;
    background: url('../../../public/front/images/main/imagecontact.webp') !important;
    background-size: cover;
  }
  body.dark-mode .contact-form-sma{margin-top: -5%}
}
@media(max-width: 575px){
  body.dark-mode .contact-form-sma .gold-gradient-sma {
    background: linear-gradient(358deg, #f8f8f8 25%, #f8f8f8 25%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
   .contact-form-sma .title-sma h2 {font-size: 28px;  line-height: 2;  padding: 0 10px}
}
@media(min-width:451px) and (max-width: 767px){
  .contact-form-sma h2{margin-bottom: 5%; font-size: 33px}
}
@media(max-width: 450px){
  .contact-form-sma h2{margin-bottom: 9%; font-size: 28px}
  .contact-form-sma p{font-size: 16px}
}
@media(min-width: 1200px){
  .content{padding-top: 3%;  padding-bottom: 3%}
  .contact-form-sma h2{font-size: 48px;   margin-bottom: 5%}
  .contact-form-sma h4{font-size: 48px}
  .contact-form-sma p{font-size: 28px}
}
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;
}
.hidden-div {
  opacity: 0;
  transition: opacity 1s ease, transform 10s ease;

}
.hidden-div.show {
  opacity: 1;
}
.btn-pub-sma a{
  border-top: 1px solid #d79b4b;
  border-bottom: 1px solid #d79b4b;
  padding: 1%
}
body.dark-mode .btn-pub-sma a {
  border-top: 1px solid #131313;
  border-bottom: 1px solid #131313;
  padding: 1%;
}
@media(min-width: 1200px) and (max-width: 1399px){.btn-pub-sma a{font-size: 28px}}
@media(min-width: 1400px){.btn-pub-sma a{font-size: 33px}}
.flexibilty h2,
.blog-sma h2{
  animation: htwoAnimation 5s infinite alternate ease-in; /* Infinite animation */
}
.carousel .nav-item a.nav-link{color: #f8f8f8; animation:none !important}
.carousel .nav-item a.nav-link.active{color: #d79b4b}
body.dark-mode .flexibilty h2,
 body.dark-mode .blog-sma h2,
  body.dark-mode .carousel .nav-item .nav-link.active{animation:none}
@media(max-width: 767px){
  .blog-sma h2{font-size: 33px}
}
/* Keyframes for zooming */
@keyframes htwoAnimation {
  0% {
    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
  }
  50% {
    background: linear-gradient(358deg,  rgba(214,155,75,1) 25%, rgba(248,248,248,1) 50%);
    -webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent

  }
  100% {
    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

  }
}
.articles-sma{ word-break: break-all}
.articles-sma .article-container-sma{background-color: rgba(19,19,19, .55); border-radius: 4px}
.articles-sma .article-container-sma .image-container-sma{
    padding: 25px 25px 0 25px;
    border-top: 1px solid #d79b4b;
    border-right: 1px solid #d79b4b;
    border-left: 1px solid #d79b4b;
    overflow: hidden
}
body.dark-mode .articles-sma .article-container-sma .image-container-sma {
  border-top: 1px solid #898989;
  border-right: 1px solid #898989;
  border-left: 1px solid #898989
}
body.dark-mode .articles-sma .article-container-sma {background-color: rgba(19, 19, 19, .05)}

.articles-sma .article-container-sma .image-container-sma img{border-radius: 3px; transition: all 1s ease-in-out}
.articles-sma .article-container-sma:hover .image-container-sma img{transform: scale(1.05)}    
.articles-sma .article-container-sma:hover .image-container-sma{border-top: 1px solid #EAB543;   border-right: 1px solid #EAB543;   border-left: 1px solid #EAB543}
.articles-sma .article-container-sma .article-content-sma{padding: 25px;   text-align: justify}
.articles-sma .article-container-sma .article-content-sma h5{height: 65px}
.articles-sma .article-container-sma .article-content-sma::before{
    content: " ";
    position: absolute;
    top: -2px;
    left: 0;
    width: 1px;
    height: 90%;
    background-color: #cd9448
}
.link-sma{text-align: right}
.articles-sma .article-container-sma .article-content-sma::after{
    content: " ";
    position: absolute;
    bottom: 38px;
    left: 0;
    width: 65%;
    height: 1px;
    background-color: #cd9448
}
.articles-sma .article-container-sma:hover .article-content-sma::before,
.articles-sma .article-container-sma:hover .article-content-sma::after{background-color: #EAB543}
body.dark-mode .articles-sma .article-container-sma:hover .article-content-sma::before,
body.dark-mode .articles-sma .article-container-sma:hover .article-content-sma::after,
body.dark-mode .articles-sma .article-container-sma .article-content-sma::after,
body.dark-mode .articles-sma .article-container-sma .article-content-sma::before{
background-color: #898989}
.articles-sma .article-container-sma .article-content-sma:hover h5{color: #EAB543}
body.dark-mode .articles-sma .article-container-sma .article-content-sma h5,
body.dark-mode .articles-sma .article-container-sma .article-content-sma:hover h5{color: #131313}
body.dark-mode .article-content-sma .color-fe-sma{color: #3e3e3e}
.articles-sma .article-container-sma .article-content-sma:hover .link-sma{padding-right: 3px; font-weight: bold}
.articles-sma .article-container-sma .article-content-sma .link-sma i{font-size: 13px;   position: absolute;  right: 31%;   bottom: 28%}
@media(max-width: 360px){
    .articles-sma .article-container-sma .article-content-sma::before{height: 90%} 
    .articles-sma .article-container-sma .article-content-sma h5{font-size:16px; height: 67px}
    .articles-sma .article-container-sma .article-content-sma p{height: 200px}
    .articles-sma .article-container-sma .article-content-sma .link-sma i{right: 40%}
    .articles-sma .article-container-sma .article-content-sma::after{width: 57%} 
}
@media(min-width: 361px) and (max-width: 425px){
    .articles-sma .article-container-sma .article-content-sma::before{height: 88%} 
    .articles-sma .article-container-sma .article-content-sma h5{font-size:16px; height: 50px}
    .articles-sma .article-container-sma .article-content-sma p{height: 155px}
    .articles-sma .article-container-sma .article-content-sma .link-sma i{right: 33%}
    .articles-sma .article-container-sma .article-content-sma::after{width: 64%}
}
@media(min-width: 426px) and (max-width: 500px){
    .articles-sma .article-container-sma .article-content-sma::before{height: 86%} 
    .articles-sma .article-container-sma .article-content-sma p{height: 125px}
}
@media(min-width: 501px) and (max-width: 575px){
    .articles-sma .article-container-sma .article-content-sma::before{height: 85%} 
    .articles-sma .article-container-sma .article-content-sma p{height: 110px}
}
@media(min-width: 426px) and (max-width: 575px){
    .articles-sma .article-container-sma .article-content-sma h5{font-size:16px; height: 30px}
    .articles-sma .article-container-sma .article-content-sma .link-sma i{right: 33%}
}
@media(min-width: 576px) and (max-width: 767px){
    .articles-sma .article-container-sma .article-content-sma h5{height: 40px}
    .articles-sma .article-container-sma .article-content-sma::before{height: 85%} 
    .articles-sma .article-container-sma .article-content-sma .link-sma i{right: 33%}
}
@media(max-width: 767px){.xs-mt-0 {margin-top: 0 !important}}
@media(min-width: 768px) and (max-width: 991px){
    .articles-sma .article-container-sma .article-content-sma h5{font-size: 17px}
    .articles-sma .article-container-sma .article-content-sma p{font-size: 15px; height: 190px}
    .content-sma .footer-links a{font-size: 14px}
}
@media(min-width: 992px) and (max-width: 1199px){
    .articles-sma .article-container-sma .article-content-sma::before{height: 89%}
    .articles-sma .article-container-sma .article-content-sma h5{font-size: 19px}
    .articles-sma .article-container-sma .article-content-sma p{height: 150px}
    .articles-sma .article-container-sma .article-content-sma .link-sma i{right: 32%}
}
@media(min-width: 1200px) and (max-width: 1399px){
    .articles-sma .article-container-sma .article-content-sma h5 {font-size: 18px}
    .articles-sma .article-container-sma .article-content-sma p{height: 200px}
}
@media(min-width: 1400px){
    .articles-sma .article-container-sma .article-content-sma h5{height: 77px; font-size: 22px}
    .articles-sma .article-container-sma .article-content-sma p{height: 220px; font-size: 19px}
    .articles-sma .article-container-sma .article-content-sma::before {top: -1px;   height: 90% }
}
@media(min-width: 991px){  .w-md-75{width:75%; font-size:  19px}}
@media(max-width: 550px){  .w-75-xs{font-size: 13px;   width: 75%}}
@media(min-width: 768px){h5{font-size: 19px}}
@media(max-width: 767px){h5{font-size: 16px}  .article-content-sma{font-size: 15px}}
.second-design h2::before {
    content: ' ';
    height: 3px;
    background: linear-gradient(358deg, rgba(248, 248, 248, 1) 25%, rgba(214, 155, 75, 1) 50%);
    position: absolute;
    animation: animate_four 5s linear infinite;
    animation-delay: 3s;
    bottom: -12%;
     left: 0;
     width: 0%;
}
  
body.dark-mode .second-design .carousel .nav-item a.nav-link{color: #3e3e3e}
.container-slider-sma{
    margin: 0 5%;    
    border-right: 1px solid #d79b4b;
    border-bottom: 1px solid #d79b4b;
    padding-bottom: 5%;
    padding-right: 10%
}
body.dark-mode .container-slider-sma{border-right: 1px solid #3e3e3e; border-bottom: 1px solid #3e3e3e;}
.container-slider-sma img{ border-top: 1px solid #d79b4b;  border-left: 1px solid #d79b4b;}
body.dark-mode .container-slider-sma img{border-top: 1px solid #3e3e3e; border-left: 1px solid #3e3e3e;}

.container-slider-sma h5{    padding-left: 0; padding-top: 7%}
.second-design .nav-link{transition: all .3s ease-in}
.second-design .nav-link:focus, .second-design .nav-link:hover {
  color: #d79b4b;     padding-left: 30px !important
}
body.dark-mode .second-design .nav-link:focus,
body.dark-mode .second-design .nav-link:hover 
body.dark-mode .links-second-desgin .nav-link{color: #3e3e3e}
.second-design .carousel-control-next{opacity: .8 !important}

@media (min-width: 992px) {
  .second-design-overlay{background: rgb(19,19,19);
background: linear-gradient(90deg, rgba(19,19,19,0.8183648459383753) 0%, rgba(19,19,19,0.4458158263305322) 25%, rgba(19,19,19,0) 50%);}
body.dark-mode .second-design-overlay{background: transparent}

  .container-slider-sma p {padding-left: 0; text-align: justify; padding-right: 0}
  .second-design .carousel-control-next{        left: 15% ;
    bottom: auto;     height: auto; top: auto}
    .second-design .carousel-control-next span{font-size: 28px }
    
}
@media(min-width: 1400px){
  .links-second-desgin a.nav-link,
  .content-second-slider p{
   font-size: 19px !important
}
}
.footer .call-sma {position: fixed;  bottom: 80px; cursor: pointer; z-index: 9999999999;}
.footer .call-sma i{color: #25d366; border-radius: 5%}
.footer .fa-brands{line-height: .7}
@media(min-width: 576px){
  .Background-img-designed { font-size: 11px}
}
@media(min-width: 768px) {
  .footer-logo img { width: 30%}
    .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 #3e3e3e}
}
@media(max-width: 767px){
    .content-sma .footer-links a{font-size: 13px}
    .footer-logo img{width: 60%}
    .footer .call-sma{left: 2%}
    .footer .call-sma i{font-size: 40px}
}
@media(max-width: 575px){
    .bgidd{text-align: center}
    .Background-img-designed { font-size: 8px}
}
@media(max-width: 370px){
  .fs-11-sm{font-size: 8px}
  .fs-13-sm,
  .content-sma .footer-links a{font-size: 11px}
}