.landing-about {
     padding-top: 5px;
     position: relative;
     background-image: url('../../images/BG.webp');
     background-size: 100% 100%;
     max-height: 520px;
 }

 .landing-about .box-img {
     width: 350px;
     padding: 0px 5px;
     background: var(--main_site);
     border-radius: 25px;
 }

 .landing-about .text-box {
     padding: 20px;
     max-width: 600px;
     border-left: 3px solid #fff;
     border-radius: 3px;
 }

 .landing-about .head-ask {
     color: var(--main_site);
 }

 .landing-about .des {
     color: #fff !important;
 }

 .about_message {
     margin: 150px 0;
     background-color: var(--sec_site);
     position: relative;
     overflow-x: clip;
     z-index: 1;
 }

 .about_message .container {
     background-color: var(--sec_site);
     overflow-x: hidden;
 }

 .about_message .container::after {
     position: absolute;
     width: 110%;
     height: 30%;
     content: "";
     background-color: var(--sec_site);
     transform: rotate(5deg);
     right: -5%;
     bottom: -5%;
 }

 .about_message .container::before {
     position: absolute;
     width: 110%;
     height: 30%;
     background-color: var(--sec_site);
     content: "";
     top: -5%;
     transform: rotate(-5deg);
     right: -5%;
 }

 .about_message_desc {
     background-color: var(--third_site);
     position: relative;
     z-index: 10;
     min-height: 324px;
     border-radius: 8px;
 }

 @media(max-width:567px) {
     .about_message_desc {
         margin-top: 0px !important;
     }

     section.about_message {
         margin-top: 50px !important;
     }

     .landing-about .img_about {
         height: 150px;
     }

     .landing-about .box-img {
         width: fit-content !important;
         margin: 0 auto;
     }

     .about_message .container::after {
         display: none;
     }

     .about_message .container::before {
         display: none;
     }

     .landing-about .text-box {
         padding: 20px;
         max-width: 600px;
         border-right: 3px solid #fff;
         border-radius: 3px;
         margin-bottom: 16px;
         margin-top: 85px;
     }
 }

 @media(max-width:500px) {
     .space {
         height: 536px;
     }
 }

 p.des {
     color: #fff !important;
     -webkit-line-clamp: 7;
     display: -webkit-box;
     overflow-y: clip;
     -webkit-box-orient: vertical;
     text-align: justify;
 }

 .projects .onsale .line {
     height: 4px;
     background-color: var(--sec_site);
 }

 .projects .btn-more {
     width: fit-content;
     background-color: #1A3051;
     color: #fff;
     padding-right: 30px !important;
     padding-left: 30px !important;
 }

 .projects .btn-more i {
     transform: rotate(45deg);
     margin-right: 6px;
 }

 .projects .box-contant .imges img {
     width: 400px;
     height: 400px;
     object-fit: contain;
 }

 .projects .box-contant .title {
     background-color: var(--main_site);
     border-radius: 12px;
     width: fit-content;
     padding: 8px 20px;
     color: #fff;
 }

 .projects .box-contant .head {
     color: #000;
     -webkit-line-clamp: 3;
     display: -webkit-box;
     overflow-y: clip;
     -webkit-box-orient: vertical;
 }

 @media(max-width:567px) {
     .projects .box-contant .imges img {
         width: auto;
         height: auto;
     }
 }

 .breadcrumb-bg-about {
     position: relative;
     background: url(../../images/p2.webp) no-repeat 0 0;
     background-size: cover;
     z-index: 0;
 }

 @media (min-width: 1200px) {
     .container {
         margin-right: auto;
         margin-left: auto;
     }
 }

 @media (min-width: 992px) {
     .container {
         margin-right: auto;
         margin-left: auto;
     }
 }

 h2.title {
     color: #fff;
     font-size: 50px;
     font-weight: 600;
     text-align: right;
 }

 .left-wthree-img .position-relative {
     z-index: 1;
 }

 @media (min-width: 991px) {
     .bg-shape {
         border-radius: 25% 70% 84% 22% / 42% 75% 25% 75%;
         -webkit-box-shadow: 0 15px 38px 0 rgba(0, 0, 0, 0.2);
         width: 475px;
         height: 504px;
         background: var(--main_site);
         opacity: .4;
         position: absolute;
         top: -17px;
         right: 15px;
         z-index: -1;
     }
 }

 @media (min-width: 412px) {
     .imginfo__box {
         padding: 0px;
         min-width: 95px;
         min-height: 95px;
     }
 }

 @media (max-width: 576px) {
     .imginfo__box {
         background-color: var(--main_site);
         color: #fff;
         position: absolute;
         right: 163px;
         bottom: 0px;
         box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.2);
         transform: rotate(45deg);
         text-align: center;
         border-radius: 7px;
     }
 }

 .imginfo__info {
     transform: rotate(-45deg);
 }

 @media (min-width: 412px) {
     .imginfo__box .imginfo__title {
         font-size: 18px;
         margin-right: 34px;
     }
 }

 .imginfo__box .imginfo__title {
     line-height: 3px;
     color: #fff;
     font-weight: 600;
     margin: 0;
     padding: 20px 0 10px 0;
     text-align: center;
 }

 @media (min-width: 412px) {
     .imginfo__box p {
         font-size: 12px;
         line-height: 23px;
         text-align: left;
         font-weight: 500;
         font-family: system-ui;
     }
 }

 .imginfo__box p {
     color: #fff;
 }

 .eng_img {
     justify-content: flex-end;
     display: flex;
 }

 .title-big {
     font-size: 25px;
     line-height: 40px;
     font-weight: 700;
     color: var(--main_site);
 }

 .content-a {
     text-align: left !important;
 }

 .mr-3 {
     margin-right: 8px !important;
 }

 .btn-style {
     padding: 15px 50px;
     font-size: 16px;
     line-height: 18px;
     font-weight: 600;
     transition: 0.3s ease-in;
     border-radius: var(--border-radius);
     text-align: left;
     float: right;
     background-color: var(--main_site);
     border-radius: 15px;
 }

 @media (min-width: 576px) {
     .style-icon {
         left: 225px;
         margin-top: 17px;
     }
 }

 @media (min-width: 576px) {
     .style-icon {
         left: 316px;
         margin-top: 5px;
     }
 }

 .left-wthree-img img {
     -webkit-border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     -webkit-box-shadow: 0 15px 38px 0 rgba(0, 0, 0, 0.2);
 }

 #small-dialog1 {
     max-width: 750px;
     margin: 40px auto;
     position: relative;
 }

 .mfp-hide {
     display: none !important;
 }

 div#small-dialog1 iframe {
     width: 100%;
     height: 420px;
     display: block;
     border-radius: 10px;
 }

 iframe {
     border: none;
 }

 @media (min-width: 576px) {
     .w3l-aboutblock1 .area-box {
         padding: 32px 0px;
     }
 }

 .w3l-aboutblock1 .area-box {
     position: relative;
     z-index: 1;
     border-radius: 8px;
     background-color: var(--bg-lightgrey);
     display: grid;
     grid-auto-flow: column;
     grid-gap: 9px;
     box-shadow: 3px 3px 3px 3px #a9a9a9b8;
     min-height: 189px;
 }

 .w3l-aboutblock1 h4 a.title-head {
     display: block;
     color: var(--heading-color);
     font-weight: 600;
     line-height: 1.2;
     margin-bottom: 15px;
     font-size: 18px;
     letter-spacing: 0;
     text-align: left;
 }

 @media (min-width: 576px) {
     .area-box-info p {
         font-size: 16px;
         text-align: justify;
     }
 }

 .w3l-aboutblock1 .area-box i {
     font-size: 38px;
     color: var(--main_site);
     margin-left: 7px;
 }

 .video-play {
     display: inline-block;
     font-size: 45px;
     position: relative;
     color: var(--main_site);
 }

 .w3l-about2 {
     background: var(--bg-lightgrey);
 }

 @media (min-width: 1200px) {
     .container {
         margin-right: auto;
         margin-left: auto;
     }
 }

 .title-small {
     font-size: 23px;
     font-weight: 600;
     text-transform: uppercase;
     line-height: 30px;
     letter-spacing: 1px;
     color: var(--main_site);
     display: block;
 }

 .header-section {
     text-align: left !important;
 }

 .w3l-about2 .cwp23-text-cols {
     grid-row-gap: 50px;
     grid-column-gap: 22px;
     display: flex;
     justify-content: flex-end;
 }

 @media (max-width: 576px) {
     .w3l-about2 .cwp23-text-cols {
         grid-row-gap: 50px;
         grid-column-gap: 40px;
         display: flex;
         justify-content: flex-end;
         flex-direction: column;
     }
 }

 .w3l-about2 .column span {
     color: var(--main_site);
     font-size: 27px;
     display: block;
     text-align: right;
 }

 .w3l-about2 .cwp23-text-cols h4 {
     font-size: 18px;
     line-height: 28px;
     color: var(--heading-color);
     display: block;
     font-weight: 600;
     transition: 0.3s ease-in;
 }

 .first-paragraph {
     margin: 0;
     font-size: 17px;
     line-height: 27px;
     color: var(--font-color);
     opacity: .8;
     font-family: cairo;
     text-align: right;
     text-align: justify;
     padding: 10px;
 }

 .cwp23-text img {
     height: 421px;
     margin-top: 111px;
     margin-bottom: 68px;
     width: 100%;
     object-fit: cover;
 }

 .radius-image {
     border-radius: 10px;
     height: 400px;
     width: 400px;
 }

 .w3l-about2 {
     background: #d3d3d340;
 }

 .w3l-about4 {
     background-size: cover;
     background-attachment: fixed;
     position: relative;
     z-index: 1;
     display: grid;
     align-items: center;
 }

 .w3l-about4:before {
     content: "";
     background-color: darkgrey;
     position: absolute;
     top: 0;
     min-height: 100%;
     left: 0;
     right: 0;
     z-index: -1;
 }

 .w3l-about4 .heading {
     max-width: 700px;
 }

 .w3l-about4 h3 {
     color: #fff;
     text-align: center;
 }

 .w3l-about4 .heading p {
     color: #eee;
 }

 .play-video {
     display: inline-block;
     width: 70px;
     height: 70px;
     font-size: 73px;
     color: white;
 }

 .w3l-team {
     background: white;
 }

 .team-member {
     position: relative;
     overflow: hidden;
 }

 .team-img {
     position: relative;
     overflow: hidden;
 }

 .overlay {
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     transition: all .2s ease-in-out;
     border-radius: var(--border-radius);
 }

 .team-details {
     opacity: 0;
     position: absolute;
     top: 55%;
     left: 0;
     padding: 10%;
     overflow: hidden;
     width: 100%;
     z-index: 2;
     transition: all .2s ease-in-out;
 }

 .team-details p {
     color: #fff;
     font-size: 20px;
 }

 .socials a {
     display: inline-block;
     width: 37px;
     height: 37px;
     background-color: transparent;
 }

 .team-title {
     margin: 25px 0 5px;
     font-size: 20px;
     font-weight: 600;
     color: black;
     text-align: center;
 }

 .w3l-content-4 {
     background: #d3d3d34a;
 }

 .title-content {
     max-width: 800px;
     margin: auto;
 }

 .w3l-content-4 .content4-icon.icon-clr1 span.fa {
     color: var(--main_site);
     border: 1px solid;
 }

 .w3l-content-4 .content4-icon.icon-clr1 span.fa {
     width: 80px;
     height: 80px;
     line-height: 80px;
     border-radius: 7px;
 }

 .w3l-content-4 .content4-icon span.fa {
     margin-top: 4px;
     vertical-align: super;
 }

 .w3l-content-4 .content-info-in h6 {
     margin: 0px 0 12px 0;
 }

 .w3l-content-4 .content-info-in h6 a {
     text-align: left;
     margin-bottom: 0;
     color: var(--heading-color);
     font-weight: 600;
     font-size: 20px;
 }

 .w3l-content-4 .content4-icon.icon-clr2 span.fa {
     color: #ff4c4c;
     border: 1px solid;
 }

 .w3l-content-4 .content4-icon.icon-clr3 span.fa {
     color: var(--secondary-color);
     border: 1px solid;
 }

 .w3l-content-4 .content4-icon.icon-clr4 span.fa {
     color: #f48924;
     border: 1px solid;
 }

 .w3l-content-4 .content4-icon {
     font-size: 30px;
     text-align: center;
 }

 content-4 .content4-icon.icon-clr2 span.fa,
 .w3l-content-4 .content4-icon.icon-clr3 span.fa,
 .w3l-content-4 .content4-icon.icon-clr4 span.fa {
     width: 80px;
     height: 80px;
     line-height: 80px;
     border-radius: 7px;
 }

 .w3l-content-4 .content4-icon.icon-clr2 span.fa {
     width: 80px;
     height: 80px;
     line-height: 80px;
     border-radius: 7px;
 }

 .bottom-info {
     max-width: 700px;
     margin: 0 auto;
 }

 .btn-style {
     padding: 10px 34px;
     font-size: 14px;
     line-height: 18px;
     font-weight: 600;
     transition: 0.3s ease-in;
     border-radius: 7px;
     text-align: left;
 }

 .button-hover:hover {
     background-color: var(--main_site) !important;
     border-color: var(--main_site) !important;
 }

 .button-hover {
     border-color: var(--main_site);
 }

 .button-hover:active {
     border-color: var(--main_site) !important;
 }

 .first-div {
     box-shadow: 5px 5px 5px 5px darkgray;
     height: 241px;
 }

 .title-first {
     text-align: center !important;
 }

 .designer-p {
     text-align: center;
 }

 .completed {
     padding-left: 19px;
 }

 .p-relative {
     position: relative;
 }

 .perant {
     background-color: var(--main_site);
     color: white;
     padding: 17px;
 }

 .d-flex1 {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     gap: 10px;
 }

 @media (min-width: 576px) {
     .d-flex1 i {
         font-size: 40px;
         text-align: center;
     }
 }

 .integrated {
     text-align: center;
 }

 .cwp23-contentestablish {
     display: flex;
     width: 100%;
 }

 @media (min-width: 576px) {
     .perant2 {
         padding-left: 57px;
         text-align: justify;
     }
 }

 .title3 {
     color: black;
     margin-top: -24px;
     margin-right: 185px;
     font-size: 19px;
     line-height: 1.5;
 }

 .title4 {
     margin: 0;
     font-size: 17px;
     line-height: 27px;
     color: var(--font-color);
     opacity: .8;
     font-family: 'webfont';
     text-align: right;
     text-align: justify;
 }

 .cwp23-textestablish {
     width: 30%;
     position: absolute;
     left: 2%;
     top: 42%;
 }

 @media (max-width: 900px) {
     .cwp23-textestablish {
         width: 30%;
         position: unset;
         left: 2%;
         top: 42%;
     }

     .cwp23-textestablish img {
         height: 421px;
         margin-top: 111px;
         margin-bottom: 68px;
         width: 100%;
     }
 }

 @media (max-width: 900px) {
     .cwp23-textestablish img {
         height: 421px;
         margin-top: 111px;
         margin-bottom: 68px;
         width: 50%;
     }
 }

 .title5 {
     color: var(--main_site);
     margin-right: 175px;
     padding: 3px;
     text-align: right;
     font-weight: 900;
 }

 @media (max-width: 1024px) {
     .nav .navbar-nav {
         min-width: 60%;
         display: flex;
         gap: 0;
     }
 }

 @media (max-width: 768px) {
     .title3 {
         margin-right: 14px;
     }
 }

 @media (max-width: 768px) {
     .title4 {
         margin-right: 20px;
     }
 }

 @media (min-width: 768px) {
     .cwp23-textestablish img {
         height: 421px;
         margin-top: 111px;
         margin-bottom: 68px;
         width: 101%;
     }
 }

 @media (max-width:450px) {
     .first-paragraph {
         margin: 0;
         font-size: 14px;
         line-height: 27px;
         color: var(--font-color);
         opacity: .8;
         font-family: 'webfont';
         text-align: justify;
         padding: 10px;
     }
 }

 @media (max-width: 576px) {
     .w3l-aboutblock1 .area-box {
         padding: 32px 0px;
     }
 }

 @media (max-width: 576px) {
     .video-play {
         display: inline-block;
         width: 70px;
         height: 70px;
         font-size: 50px;
         position: relative;
         left: 12px;
         bottom: 0px;
         color: var(--main_site);
     }
 }

 @media (max-width: 992px) {
     .content-a {
         width: 50%;
     }
 }

 @media (max-width: 576px) {
     .d-flex1 i {
         font-size: 23px;
         text-align: center;
     }
 }

 @media (max-width: 576px) {
     .d-flex1 p {
         font-size: 10px;
     }
 }

 @media (max-width: 576px) {
     .p-relative {
         position: relative;
         margin-bottom: 35px;
     }
 }

 @media (max-width: 576px) {
     .align-self {
         align-self: center;
         margin-bottom: -38px;
     }
 }

 @media (max-width: 1024px) {
     .content-i {
         width: 100.666667% !important;
         margin-bottom: 20px;
     }
 }

 @media (max-width: 1024px) {
     .content-a {
         width: 100%;
     }
 }

 @media (max-width: 1024px) {
     .img-th {
         width: 100%;
     }
 }

 @media (max-width:390px) {
     .breadcrumb-bg-establish {
         background: url(../../images/two-colleagues.webp) no-repeat 0px 0px;
         background-size: cover;
         position: relative;
         z-index: 0;
         height: 500px;
         width: 102%;
     }
 }

 @media (min-width: 576px) {
     .imginfo__box {
         background-color: var(--main_site);
         color: #fff;
         position: absolute;
         right: 222px;
         bottom: 10px;
         box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.2);
         border-radius: 7px;
         transform: rotate(45deg);
         text-align: center;
         border-radius: 7px;
     }
 }

 .first_div .img_first {
     height: 500px;
     position: relative;
     min-height: 500px;
 }

 .hero-overlay {
     background: rgb(50 73 94 / 70%);
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }

 .first_div {
     overflow-x: clip;
     background: url(../../images/two-colleagues.webp) no-repeat 0px 0px;
     background-size: cover;
     position: relative;
 }

 @media (min-width: 900px) {
     .width-sec {
         margin: auto;
         position: absolute;
         bottom: -16%;
         right: 9%;
     }

     .first_div .img_first {
         height: 500px !important;
     }

     p.inner-page-para {
         color: #ffffff !important;
     }

     .title1 {
         color: #ffffff !important;
     }
 }

 .first_div .img_first {
     position: relative;
 }

 .width-sec {
     width: 100%;
 }

 p.inner-page-para {
     color: white;
     font-size: 20px;
     opacity: 1;
     text-align: justify;
     line-height: 27px;
 }

 @media (max-width: 576px) {
     p.inner-page-para {
         color: white;
         opacity: 1;
         line-height: 27px;
         font-size: 16px;
         text-align: right;
     }

     .head-content {
         position: absolute;
         top: 120px;
         padding: 20px;
     }

     .width-sec {
         position: absolute;
         top: 78%;
         width: 69%;
         right: 20%;
     }

     .perant2 {
         margin-top: 356px;
     }
 }

 .title2 {
     color: var(--main_site);
     padding: 3px;
     font-weight: 900;
 }

 .title1 {
     color: white;
     padding: 3px;
     font-weight: 900;
 }

 .sec-hero-overlay {
     background: rgb(50 73 94 / 70%);
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
 }

 .arrowreverse {}

 @media (max-width: 820px) {
     .width-sec {
         width: 50%;
         right: 21px;
         position: absolute;
         top: 445px;
     }
 }

 @media (max-width: 1280px) {
     .title5 {
         color: var(--main_site);
         margin-right: 5px;
         padding: 3px;
         text-align: right;
         font-weight: 900;
     }

     .title3 {
         color: black;
         margin-top: -24px;
         margin-right: 14px;
         font-size: 19px;
     }
 }

 @media (max-width: 576px) {
     p.inner-page-para {
         color: white;
         opacity: 1;
         line-height: 27px;
         font-size: 16px;
         text-align: right;
     }

     .head-content {
         position: absolute;
         top: 120px;
     }

     .perant2 {
         margin-top: 356px;
     }

     .title5 {
         color: var(--main_site);
         margin-right: 13px;
         padding: 3px;
         text-align: right;
         font-weight: 900;
     }
 }

 @media (min-width: 900px) {
     .width-sec {
         width: 86% !important;
         margin: auto;
         position: absolute;
         bottom: -16%;
         right: 9%;
     }
 }

 @media (max-width: 576px) {
     .width-sec {
         position: absolute;
         top: 78%;
         width: 69%;
         right: 20%;
     }
 }

 .team-title {
     color: var(--main_site);
     font-weight: bold;
     font-size: 23px;
     text-align: center;
     margin-top: 24px;
 }

 .team-titlee {
     color: var(--main_site);
     font-weight: bold;
     padding-bottom: 5px;
     margin-bottom: 20px;
     font-size: 23px;
 }

 .team-description {
     margin-bottom: 40px;
     color: #333;
     font-size: 1.2rem;
 }

 .image-team {
     position: relative;
     width: 285px;
     z-index: 0;
     justify-content: center;
     align-items: center;
 }

 .background-shape {
     position: absolute;
     height: 76%;
     border-radius: 85px;
     z-index: -1;
     bottom: 28%;
     right: 17%;
 }

 .team_img {
     height: 280px !important;
 }

 .member-img {
     width: 306px !important;
     height: 287px !important;
 }

 .team-head {
     margin: 25px 0 5px;
     font-size: 20px;
     font-weight: 600;
     color: black;
     text-align: center;
 }

 .designer-p {
     text-align: center;
 }

 @media (max-width:567px) {
     .image-team {
         position: relative;
         width: 285px;
         z-index: 0;
         margin: auto;
     }

     .content-a {
         padding: 23px;
     }

     .content4-right-info {
         text-align: center;
     }

     .first-div {
         box-shadow: 5px 5px 5px 5px darkgray;
         height: 168px;
     }

     .grids-feature {
         padding-left: 24px;
         padding-right: 24px;
     }

     .cwp23-text img {
         height: 421px;
         margin-top: 0;
         margin-bottom: 20px;
         width: 100%;
         object-fit: cover;
         padding-left: 15px;
         padding-right: 15px;
     }
 }

 .team {
     text-align: center;
 }

 @media (max-width:567px) {
     .team {
         display: none;
     }

     .team_img {
         height: 80% !important;
     }

     .history-info {
         padding-right: 26px;
         padding-left: 26px;
     }
 }

 .electrical-section {
     background-color: #f7f9fc;
     border-bottom: 40px solid var(--main_site);
     background: url(../../images/bgwan.webp) no-repeat 0px 0px;
     background-size: cover;
 }

 .content h1 {
     color: var(--main_site);
     font-weight: bold;
     font-size: 36px;
 }

 .content p {
     margin: 20px 0;
     font-size: 16px;
 }

 .social-icons a {
     font-size: 20px;
     margin-right: 10px;
 }

 .social-icons .twitter {
     color: rgb(23 173 220);
 }

 .social-icons .linkedin {
     color: rgb(0 122 185);
 }

 .social-icons .youtube {
     color: #e00a0a;
 }

 .social-icons .facebook {
     color: rgb(24 119 242);
 }

 .social-icons .whatsapp {
     color: #29a71a;
 }

 .image-container {
     position: relative;
     text-align: right;
 }

 .main-image {
     width: 100%;
     border-radius: 10px;
 }

 .small-image {
     position: absolute;
     top: 10px;
     left: -20px;
     border-radius: 50%;
     overflow: hidden;
     border: 5px solid white;
 }

 .small-image img {
     width: 70px;
     height: 70px;
     object-fit: cover;
 }

 .overlay {
     position: absolute;
     bottom: 20px;
     left: 0;
     padding: 5px 15px;
     font-weight: bold;
     font-size: 20px;
     border-radius: 5px;
 }

 .Electrical {
     position: absolute;
     top: 63%;
     left: 38%;
     color: white;
     font-size: 2.5rem;
 }

 .electrical_content {
     border-right: 4px solid var(--main_site);
     padding: 25px;
 }

 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
 }

 .head-content {
     z-index: 1;
 }