/* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Cairo', sans-serif;
        }

        :root {
            --primary: #3c3c8a;
            --dark: #333;
            --light: #fff;
        }

        body {
            direction: rtl;
        }
        
        *{
            overflow: hidden !important;
        }
        
        html,
        body{
            overflow-y: auto !important;
        }
        
        

        /* Header styles */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background: var(--light);
        }

        .logo {
            height: 50px;
        }

        .nav {
            display: flex;
            gap: 2rem;
        }

        .nav a {
            color: var(--dark);
            text-decoration: none;
        }

        /* Hero section */
        .hero {
            background-image: url(Images/Banner.png);
            background-size: cover;
            background-position: center;
            color: var(--light);
            padding: 9rem 2rem;
            text-align: right;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* padding-left: 7em; */
            flex-direction: column;
            gap: 6em;
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .contact-btn {
            background: #001f3f;
            color: #fff;
            border: none;
            border-radius: 18px;
            cursor: pointer;
            width: 151px;
            height: 39px;
        }

        /* Stats section */
        .stats {
            display: flex;
            gap: 0;
            padding: 2rem;
            background: var(--light);
            flex-wrap: wrap;
            justify-content: center;
            gap: 5em;
            margin-inline: 1em;
        }

        .stat-item {
            width: 250px;
            height: 176px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            border-radius: 17px;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
        }

        /* Vision section */
        .vision {
            padding: 4rem 2rem;
            text-align: center;
        }

        .vision-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-top: 2rem;
        }

        .vision-image {
            width: 100%;
            border-radius: 8px;
        }

        /* Services section */
        .services {
            padding: 4rem 2rem;
        }

        .services-grid {
            display: flex;
            gap: 2rem;
            margin-top: 2rem;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .service-card {
            background: var(--light);
            padding: 2rem;
            border-radius: 1px;
            text-align: center;
            width: 450px;
            height: 367px;
            box-shadow: -2px 3px 5px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        /* Footer */
        .footer {
            background: var(--dark);
            color: var(--light);
            padding: 2rem;
            text-align: center;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-links a {
            color: var(--light);
            text-decoration: none;
        }

        a{
            text-decoration: none !important;
        }

        a.link{
            color: #000;
        }

        a.this_page{
            text-decoration: dashed;
            border-bottom: solid 1px #000;
        }

        section.description{
            text-align: center;
            margin-top: 2em;
        }

        .title{
            font-size: 33px;
            color: #005cbf;
        }

        .content {
            padding-inline: 16em;
            margin-top: 2em;
            font-size: 17px;
        }

        .contant{
            width: 439px;
        }

        .our-view{
            font-size: 25px;
            color: #000000;
            font-weight: bold;
        }

        section.achevments{
            padding-inline: 12em;
            background: #fff;    
            margin-inline-start: 1em;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .main{
            margin-top: 2em;
            display: flex;
            flex-direction: row;
            gap: 8em;
            justify-content: center;
            padding: 2em;
            align-items: center;
        }

        img.achevment-bg{
            width: 567px;
            height: 339px;
            border-radius: 40px;
        }

        img.img{
            width: 39px;
        }

        .imgs-card{
            background: var(--light);
            border-radius: 1px;
            text-align: center;
            width: 450px;
            height: 367px;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: space-around;
        }

        .left-img-container{
            height: 100%;
        }

        img.left-img{
            height: 100%;
        }

        .right-img-container{
            height: 100%;
            padding-top: 7em;
        }

        .head .text{
            color: #4d5c85;
            font-size: 20px;
        }

        .real-mission .head{
            display: flex;
            gap: 0;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .real-mission .main {
            margin-top: 1em;
        }

        .real-left{
            display: flex;
            flex-direction: column;
            gap: 2em;
        }

        .service-card div{
            font-size: 31px;
            color: #4d5c85;
        }

        .service-card p{
            font-size: 18px;
            width: 210px;
        }

        .service-card .content {
            padding: 0;
            margin-top: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        section.services h2{
            text-align: center;
            font-size: 29px;
            font-weight: 900;
        }


        @media (max-width: 768px) {
            .stats {
                grid-template-columns: repeat(2, 1fr);
            }

            .vision-content {
                grid-template-columns: 1fr;
            }
        }
    
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
} 
body {
font-family: 'Cairo', sans-serif;
direction: rtl;
background: #faf0d9;
} 
footer {
background-color: #2d2d2d;
color: white;
padding: 2rem 0;
} 
.container {
margin: 0 auto;
display: flex;
justify-content: space-around;
} 
.footer-content {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
} 
.logo-section {
display: flex;
justify-content: flex-end;
} 
.logo {
height: 60px;
width: auto;
} 
.main-content {
text-align: right;
} 
h3 {
color: #ffc107;
font-size: 1.5rem;
margin-bottom: 1rem;
} 
p {
color: #cccccc;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
} 
.info-section h4 {
margin-bottom: 0.5rem;
} 
.info-section ul {
list-style-type: none;
} 
.info-section ul li {
margin-bottom: 0.5rem;
} 
.info-section ul li a {
color: white;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
} 
.info-section ul li a:hover {
color: #ffc107;
} 
.search-social {
display: flex;
flex-direction: column;
gap: 1rem;
} 
.social-icons {
display: flex;
gap: 1.5rem;
} 
.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid #555;
border-radius: 50%;
color: white;
text-decoration: none;
transition: background-color 0.3s ease;
} 
.social-icons a:hover {
background-color: #555;
} 
.search-bar {
display: flex;
/* gap: 0.5rem; */
} 
.search-bar input {
flex-grow: 1;
padding: 0.5rem;
border: 1px solid #555;
background-color: #ffffff;
color: white;
border-top-right-radius: 11px;
border-bottom-right-radius: 11px;
} 

.search-bar input::placeholder{
font-family: 'Cairo', sans-serif;
} 

.search-bar input {
color: #000;
}
.search-bar button {
padding: 0.5rem 1rem;
background-color: #4d5c85;
border: none;
color: #2d2d2d;
cursor: pointer;
transition: background-color 0.3s ease;
border-top-left-radius: 11px;
border-bottom-left-radius: 11px;
}
.search-bar button:hover {
background-color: #90c298;
} 

footer{
        background: url('Images/background footer.png') no-repeat !important;
    }

.footer-content{
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}

.row {
margin-top: 1em;
}

.row.call-us{
font-weight: bold;
color: #ffc107;
}

i.fas.fa-chevron-left {
color: #fff;
}

.real-left{
display: flex;
flex-direction: column;
gap: 0;
}

.spicial-container-ov{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 1em;
}




@media (min-width: 768px) {
.footer-content {
grid-template-columns: 1fr 2fr 1fr;
} 
.logo-section {
order: 3;
} 
.main-content {
order: 2;
} 
.search-social {
order: 1;
} 




}

@media (min-width: 1510px){
    footer{
        background: #2d2d2d !important;
    }
}

@media (max-width: 1338px) {
  .stat-item {
      width: 20%;
  }

  .content {
      padding-inline: 2em;
  }

  .contant {
  width: 100%;
}
}

@media (max-width: 1480px){
  /* .main {
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    gap: 8em;
    align-items: center;
    justify-content: center;
} */

section.achevments {
  padding-inline: 4em;
}
}

@media (max-width: 1030px) {
  .stats{
      flex-wrap: wrap;
      gap: 10px;
  }

  .stats div{
      width: 193px;
  }

  .stats div div{
      text-align: center;
  }

  .stat-number{
      text-align: center;
  }

  .container {
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: flex-start;
  }

  footer{
        background: #2d2d2d !important;
        padding-right: 1em;
    }

    footer .real-left{
        display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    }

}

@media (max-width: 694px) {
  img.achevment-bg {
      width: 100%;
      height: auto;
  }
}

@media (max-width: 552px){
  .service-card{
      width: 93%;
  }
}

.right{
    text-align: center;
}

.real-head{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.real-main{
    width: 90%;
    /* margin-right: 5%; */
    display: flex;
    flex-direction: row;
}

.absoluat{
    position: absolute;
    left: 74px;
    z-index: 0;
    width: 400px;
    height: 403px;
    margin-top: 4em;
}

.real-absoluat{
    width: 100%;
    height: 100%;
}

img.absolut-img{
    height: 100%;
    width: 100%;
}

.main > .real-main > .left,
.main > .real-main > .right{
    width: 50%;
}

.right-head{
    font-size: 21px;
    font-weight: bold;
}

.top-content,
.bottom-content{
    width: 550px;
    text-align: center;
}

.real-right{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2em;
    justify-content: center;
}

.real-left{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

img.about-img {
    /* border-radius: 30px; */
    /* box-shadow: -5px 0px 20px 3px rgba(0, 0, 0, 0.3); */
}

.right-container-img{
    width: auto;
    margin-top: 0em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2em;
    margin-top: 4em;
    align-items: flex-end;
}

img.chose-img3.chose-img{
    width: 347px;
    height: 211px;
}

.left-container-img {
    margin-top: 9em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 281px;
    position: relative;
    z-index: 999999999;
    padding-bottom: 28px;
    align-items: flex-end;
}

.mission {
    box-shadow: 2px 9px 20px 0px rgb(0 70 255 / 38%);
    border-radius: 18px;
    padding: 2em;
    width: 400px;
    height: auto;
    background: #fff;
}

.icon {
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4d5c85;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
}

section.about .head{
}


.reson{
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
    width: 191px;
}

.real-resons{
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-right: 8em;
    flex-wrap: wrap;
}

.bottom-resons,
.top-resons {
    display: flex;
    gap: 6em;
}

img.chose-img2.chose-img {
    border-radius: 30px;
    height: 400px;
    width: 300px;
}

.left{
    /* margin-left: 7em; */
    position: relative;
    z-index: 9;
}

.chose-img{
    border-radius: 30px;
    box-shadow: 3px 11px 20px 0px rgb(59 59 59 / 38%);
}

.one-icon{
    width: 35px;
    height: 35px;
    background: #3a6d8c;
    border-radius: 9px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.head-icon{
    width: 35px;
    height: 35px;
    background: #3a6d8c;
    border-radius: 9px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content{
    padding: 0;
    margin: 0;
    /* font-size: 25px; */
    color: #4d5c85;
}

.real-services-head{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.main.ma-main{
    margin: 0 !important;
    margin-bottom: 1em !important;
    padding-block: 0 !important;
}

.comments{
    padding-inline: 1em;
}

button.button-service{
    width: 111px;
    height: 35px;
    background: #001f3f;
    color: #fff;
    border-radius: 8px;
    /* border: solid 1px #ddd; */
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 4px 6px 5px 0px #8e8e8e;
    margin: 10px;
}

button.button-service:hover{
    background: #3c3c8a;
}

.sevice-img{
    border-radius: 12px;
}

img.sevice-img3.sevice-img {
    width: 204px;
    height: 361px;
}

.sevice-img{
    height: 70%;
}

.sevice-img2{
    height: 30%;
}

.quote-icon {
    font-size: 50px;
    color: #d9b570; /* Adjust color as needed */
    font-family: Georgia, serif;
}

img.commenter-img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.data{
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.commenter{
    display: flex;
    width: fit-content;
    gap: 7px;
}

.commenter-name{
    font-weight: bold;
}

.top-comment{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.comment{
    width: 478px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.bottom-comment{
    width: 481px;
}

section.comments{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3em;
    padding-block: 4em;
    background: #fff;
    margin-bottom: 4em;
}

section.achevments{
    gap: 4em;
}

section.achevments > .head{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.main.ma-main {
    margin-bottom: 7em;
}

.service-right-content{
    width: 369px;
    font-size: 18px;
    text-shadow: 2px 3px 2px #cacaca;
}

.real-main.srm-main.dlrf > .left > .real-left{
    justify-content: center;
}

img.sevice-img {
    box-shadow: -5px 0px 20px 3px rgba(0, 0, 0, 0.3);
}

.twitter-icon {
    color: #1DA1F2;
}

.whatsapp-icon {
    color: #25D366;
}

.facebook-icon {
    color: #1877F2;
}

.instagram-icon {
    background: radial-gradient(circle at 30% 30%, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.about{
    margin-top: 2em;
}

section.about .main{
    background: transparent;
    border-radius: 42px;
    padding-block: 0;
    padding-left: 0;
    padding: 3em;
}

section.about .main .real-main{
    width: 100%;
    height: 100%;
}

section.about .main .real-main .left{
    width: 50%;
    margin: 0;
}

img.about-img{
    width: 100%;
    border-radius: 14px;
    box-shadow: 4px 6px 5px 0px #8e8e8e;
    /* margin: 1em; */
}

img.about-img1.about-img{
    width: auto;
}

section.about .main .real-main .right{
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-block: 3em;
    /* align-items: flex-start; */
}

section.about .main .real-main .right .head h3{
    color: #000;
    font-weight: normal;
    font-size: 24px;
}

section.about .main .real-main .right .top .content{
    color: #676767;
    padding-inline: 7em;
}

section.about .main .real-main .right .bottom .content{
    color: #676767;
    padding-inline: 7em;
}

section.about .main .real-main .right .sign .sign-up .sign-up-button{
    background: #001f3f;
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    width: 143px;
    height: 33px;
    box-shadow: 4px 6px 5px 0px #8e8e8e;
    margin: 1em;
}

.sign{
    direction: rtl;
    text-align: start;
}

.have-one{
    font-weight: bold;
    font-size: 15px;
}

a.go-sign-in{
    color: #f00;
    font-weight: normal;
}

.contant.contant-ov{
    padding-inline: 3em;
}

section.achevments .main .right{
    display: flex;
    flex-direction: column;
    gap: 1em;
}

img.chose-img1.chose-img{
    height: 542px;
    width: 250px;
}

.our-view-img1{
    width: auto;
}

.our-view-img{
    width: 100%;
    border-radius: 14px;
    box-shadow: 4px 6px 5px 0px #8e8e8e;
    margin: 1em;
}

.right-container-img-our-view{
    width: 250px;
    margin-top: 0em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2em;
    margin-top: 4em;
}

.left-container-img-our-view{
    margin-top: 9em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 281px;
    position: relative;
    z-index: 999999999;
    padding-inline: 1em;
}

.search-container {
    display: flex;
    align-items: center;
    background-color: #fdf1d4;
    border-radius: 30px;
    padding: 0px 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
}
.search-container input {
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    color: #333;
    width: 70%;
    margin-left: 10px;
}
.search-icon, .menu-icon {
    font-size: 18px;
    cursor: pointer;
    color: #333;
}
.menu-icon {
    margin-left: auto;
}

.mini-search-box{
    direction: ltr;
    text-align: start;
    display: none;
}

nav.social-links{
    display: flex;
    gap: 1em;
}

section.about .main .real-main .right > .contentt{
    display: none;
}

section.about .main .real-main .right > .content{
    display: block;
}

.bottom-header {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f8f9fa;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    z-index: 9999999999999999999;
  }

  .bottom-header ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
  }

  .bottom-header ul li {
    text-align: center;
    font-size: 14px;
    color: #0056b3;
  }

  .bottom-header ul li i {
    font-size: 24px;
    color: black;
    margin-bottom: 5px;
  }

  .head-fiaat .real-head .title{
    display: none;
  }

  .spicial-container-ov .left-container-img{
    width: fit-content;
    margin-right: 1em;
    padding: 0 !important;
  }

  section.achevments.achevments-our-view{
    display: none;
  }

  section.about .main .real-main .right{
    height: fit-content;
  }

  .main.wcu-main{
    display: block;
  }

  .right.right-about{
    font-size: clamp(12px, 2vw, 24px); /* من 12px كحد أدنى إلى 24px كحد أقصى */
    width: 310px;
    height: 360px;
    overflow: hidden; /* لإخفاء النص الزائد */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .service-right-content {
    font-size: clamp(12px, 2vw, 24px); /* من 12px كحد أدنى إلى 24px كحد أقصى */
    width: auto;
    height: fit-content;
    overflow: hidden; /* لإخفاء النص الزائد */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .left.left-about{
    /* padding-right: 1em; */
  }

  .phone-shape.phone-shape1{
    background: #fff;
    width: 100%;
    height: fit-content;
    gap: 1em !important;
    justify-content: center;
    padding: 1em;
    border-radius: 21px;
  }

  .phone-shape.phone-shape1 .left-container-img{
    margin: 0 !important;
    padding: 0em !important;
    width: 50%;
    height: 100%;
  }

  .phone-shape.phone-shape1 .right-container-img{
    margin: 0 !important;
    padding: 0em !important;
    width: 50%;
    height: 100%;
  }

  .phone-shape.phone-shape1 img{
    box-shadow: none !important;
  }

  .phone-shape.phone-shape2{
    background: #fff;
    border-radius: 15px;
    flex-direction: column !important;
  }

  .phone-shape.phone-shape2 .right-container-img{
    flex-direction: row;
    margin-top: 0;
  }

  .phone-shape.phone-shape2 img,
  .phone-shape.phone-shape3 img{
    box-shadow: none !important;
  }

  .phone-shape.phone-shape3{
    flex-direction: column;
    background: #faf0d9;
    padding: 9px;
    border-radius: 6px;
  }

  .phone-shape.phone-shape3 .right-container-img{
    flex-direction: row;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .phone-shape.phone-shape4{
    flex-direction: column;
    background: #faf0d9;
    padding: 0;
    border-radius: 6px;
  }

  .phone-shape.phone-shape4 .left-container-img{
    margin: 0 !important;
    padding: 13px !important;

  }

  .phone-shape.phone-shape4 .right-container-img{
    flex-direction: row;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .phone-shape.phone-shape4 img{
    box-shadow: none;
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
  }

  .phone-shape.phone-shape5{
    width: 100%;
    background: #fff;
    padding: 1em;
    border-radius: 12px;
    flex-direction: column;
  }

  .phone-shape.phone-shape5 .section{
    height: 33%;
    display: flex;
    gap: 12px;
  }

  .phone-shape.phone-shape5 > .section > .img > img{
    width: 100%;
    border-radius: 15px !important;
  }




  /* إظهار الشريط السفلي فقط على الشاشات الصغيرة */
  @media (max-width: 768px) {
    .bottom-header {
      display: block;
    }

    body {
        padding-bottom: 5em;
    }
  }

@media (max-width: 782px) {
    .mini-search-box{
        display: block;
    }

    .left.left-about{
        margin: 9px;
        margin-right: 0;
    }

    .left.left-about img{
        /* width: 94% !important; */
    }

    nav.nav{
        display: none;
    }

    nav.social-links{
        display: none;
    }

    .hero {
        padding: 1rem 2rem;
    }

    .stats{
        padding: 1em;
        margin-bottom: 1em;
        border-radius: 13px;
    }

    .stats div {
        width: 164px;
        height: 137px;
    }

    section.about .main .real-main{
        gap: 0;
        /* flex-wrap: nowrap; */
    }

    section.about .main .real-main .right.right-about{
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0px 5px 7px 0px #8e8e8e;
        margin: 9px;
        margin-left: 0;
    }

    section.about .main .real-main .left.left-about{
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0px 5px 7px 0px #8e8e8e;
        margin: 9px;
        margin-right: 0;
    }

    section.about .main{
        padding-inline: 1em;
    }

    .right .content{
        font-size: 9px;
    }

    section.about .main .real-main .right.right-about .contentt{
        display: block;
    }

    section.about .head .real-head .content{
        display: none;
    }

    section.about .main .real-main .right.right-about .head,
    section.about .main .real-main .right.right-about .top,
    section.about .main .real-main .right.right-about .bottom,
    section.about .main .real-main .right.right-about .sign{
        display: none;
    }

    section.about .head .real-head{
        display: flex;
        align-items: flex-start;
    }

    section.about .head .real-head .title{
        color: #fff;
        background: #00366f;
        position: relative;
        float: right;
        right: 0;
        font-weight: bold;
        padding-inline: 1em;
        border-top-left-radius: 41px;
        border-bottom-left-radius: 41px;
        font-size: 22px;
    }

    .head-fiaat .real-head{
        display: flex;
        align-items: flex-start;
    }

    .head-fiaat .real-head .title{
        color: #fff;
        background: #00366f;
        position: relative;
        float: right;
        right: 0;
        font-weight: bold;
        padding-inline: 1em;
        border-top-left-radius: 41px;
        border-bottom-left-radius: 41px;
        font-size: 22px;
        display: block;
    }

    section.about .main .real-main .right.right-about > .content{
        display: none;
    }

    .right.right-our-view{
        width: 100%;
        background: #00366f;
        padding-block: 1em;
        color: #fff;
    }

    .our-view{
        color: #fff;
    }

    .right.right-our-view .contant.contant-ov{
        display: none;
    }

    .main.main-our-view{
        margin: 0;
        padding: 0;
    }

    section.achevments.achevments-our-view{
        margin: 0;
    }

    section.achevments.achevments-our-view{
        background: transparent;
        margin-top: 2em;
    }

    .spicial-container-ov .left,
.spicial-container-ov .right-our-ov-cont{
    width: 50%;
}

.spicial-container-ov .right-our-ov-cont .content{
    text-align: center;
}

.spicial-container-ov .right-container-img-our-view,
.spicial-container-ov .left-container-img-our-view{
    width: auto;
    padding-inline: 1em;
}

.spicial-container-ov .right-container-img-our-view img.our-view-img2.our-view-img{
    width: 100px;
    border-radius: 47px;
}

.spicial-container-ov .right-container-img-our-view img.our-view-img3.our-view-img{
    border-radius: 47px;
}

.spicial-container-ov .left-container-img-our-view img.our-view-img1.our-view-img{
    width: auto;
    box-shadow: 4px 6px 5px 0px #8e8e8e;
    margin: 1em;
    border-radius: 47px;
}

img.chose-img2.chose-img{
    width: 147px;
    height: 100px;
    border-radius: 47px;
}

img.chose-img3.chose-img{
    width: 122px;
    height: 96px;
    border-radius: 47px;
}

img.chose-img1.chose-img{
    width: 121px;
    height: 258px;
    border-radius: 47px;
}


.mission {
    box-shadow: 2px 9px 20px 0px rgb(0 70 255 / 38%);
    border-radius: 18px;
    padding: 1em;
    width: 240px;
    height: auto;
    background: #fff;
    text-align: center;
}

.mission .head .text{
    font-weight: bold;
}

.main.main-mission{
    flex-wrap: wrap;
}

section.achevments.achevments-our-view{
    display: block;
  }

  .main.wcu-main{
    display: none;
  }

  .right.right-about{
    padding-inline: 10px;
  }

}



@media (max-width: 830px){
    section.about .main .real-main .right.right-about .bottom .content{
        padding-inline: 1em;
    }

    section.about .main .real-main .right.right-about .top .content,
    section.about .main .real-main .right.right-about .bottom .content{
        padding-inline: 0em;
    }

    section.about .main .real-main .left.left-about{
        width: 100%;
    }

    img.about-img{
        width: 100% !important;
    }
}

@media (max-width: 1481px) {
    .absoluat{
        display: none;
    }
}



@media (max-width: 598px) {
    .left-container-img-our-view,
    .right-container-img-our-view{
        width: auto;
    }

    .contant.contant-ov{
        padding-inline: 0;
    }

    section.about .main{
        text-align: center;
    }

    section.achevments {
        padding-inline: 0;
    }
}

@media (max-width: 950px) {
    img.chose-img1.chose-img{
        /* height: 341px;
        width: 224px; */
    }

    img.chose-img2.chose-img{
        /* height: 294px;
        width: 229px; */
    }

    img.chose-img3.chose-img{
        /* width: 259px;
        height: 159px; */
    }
}

@media (max-width: 667px) {
    img.chose-img1.chose-img{
        height: 234px;
        width: 175px;
    }

    img.chose-img2.chose-img{
        height: 181px;
        width: 149px;
    }

    img.chose-img3.chose-img{
        width: 184px;
        height: 133px;
    }

    .left-container-img{
        width: 57%;
    }
}

@media (max-width: 1440px) {
    section.about .main .real-main .left{
        width: 100%;
        display: flex;
    }
}

@media (min-width: 1440px){
    .main{
        padding: 2em;
    }
    
    .right-container-img-our-view{
    padding: 2em;
    }


}

@media (max-width: 464px){
    .mission{
        padding: 0;
        padding-top: 1em;
    }
}

@media (max-width: 1440px){
    img.about-img{
        box-shadow: none;
    }
}

@media (max-width: 1409px) {
    .real-main{
        flex-wrap: wrap;
        gap: 0;
    }

    .absoluat{
        display: none;
    }

    .main > .real-main > .left, .main > .real-main > .right{
        width: auto;
    }

    .wcu-main .real-main .left{
        justify-content: center;
    }

    .srm-main{
        align-items: center;
    justify-content: center;
    }
}

@media (max-width: 667px) {
    .top-content, .bottom-content {
        width: auto;
    }

    .main > .real-main > .left, .main > .real-main > .right {
        width: 100%;
    }

    img.chose-img2.chose-img{
        /* height: auto; */
        /* width: auto; */
    }

    .real-resons{
        padding: 0;
    }

    .reson{
        width: 50%;
    }

    .reaon-content {
        width: 135px;
    }

    .container .left .real-left{
        flex-wrap: wrap;
    }

    img.about-img{
        width: 200px;
    }

    .comment{
        width: 90%;
    }

    .bottom-comment{
        width: auto;
    }
}

@media (max-width: 518px) {
    img.about-img{
        width: 150px;
    }

    .reaon-content {
        width: 100px;
    }

    .content {
        width: auto !important;
    }

    .mission{
        width: 100%;
    }


}

@media (max-width: 400px) {
    .bottom-resons, .top-resons{
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

@media (max-width: 555px) {

    
    img.chose-img2.chose-img {
    /* width: 222px; */
    }
}

@media (max-width: 497px){
    img.chose-img2.chose-img {
    /* width: 147px; */
    }
}

@media (max-width: 400px){
    img.chose-img2.chose-img {
    /* width: 111px; */
    }
    
    img.chose-img1.chose-img{
        width: 100px;
    }
}

@media (max-width: 468px){
    img.sevice-img {
    width: 120px;
    height: auto;
}

img.sevice-img2.sevice-img {
    width: 120px;
    height: auto;
}

img.sevice-img3.sevice-img {
    width: 136px;
    height: 270px;
}

.left {
    margin-left: auto;
}
}

@media (max-width: 1053px) {
    .projects,
    .project-row{
        width: 100%;
    }

    .project.project-shpe1{
        width: 100%;
    }

    .project.project-shpe2{
        width: 30%;
    }

    .project.project-shpe3{
        width: 30%;
    }
}

.desk-shape{
    display: flex !important;
}

.phone-shape{
    display: none !important;
}

footer .main-content{
    width: 100%;
}

      .desk-shape.desk-shape2{
    flex-direction: column;
    background: #faf0d9;
    padding: 9px;
    border-radius: 6px;
  }

  .desk-shape.desk-shape2 .right-container-img{
    flex-direction: row;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }



@media (max-width: 759px) {
    .desk-shape{
        display: none !important;
    }
    


    .phone-shape{
        display: flex !important;
    }

    .left > .real-left > .right-container-img,
    .left > .real-left > .center-container-img,
    .left > .real-left > .left-container-img{
        width: auto !important;
    }

    img.sevice-img1.sevice-img,
    img.sevice-img1.sevice-img,
    img.sevice-img3.sevice-img{
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
    }

    .bottom-resons, .top-resons{
        flex-wrap: wrap;
        gap: 0;
    }

    .right-our-ov-cont .content {
        font-size: clamp(12px, 2vw, 24px); /* من 12px كحد أدنى إلى 24px كحد أقصى */
        width: 200px !important; /* عرض العنصر */
        height: 105px; /* طول العنصر */
        overflow: hidden !important; /* لإخفاء النص الزائد */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .our-ko {
        font-size: clamp(14px, 3vw, 30px);
        width: 100%; /* عرض العنصر */
        height: 90px; /* طول العنصر */
        overflow: hidden; /* لإخفاء النص الزائد */
        /* display: flex; */
        /* justify-content: center; */
        /* align-items: center; */
        /* text-align: center; */
      }
    
      .reaon-content{
        font-size: clamp(12px, 2vw, 24px); /* من 12px كحد أدنى إلى 24px كحد أقصى */
        width: 60px !important; /* عرض العنصر */
        height: 100px; /* طول العنصر */
        overflow: hidden; /* لإخفاء النص الزائد */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        
      }
    
      .reaon-content {
        height: 5em;
    }
    
    .right-our-ov-cont .content{
        /*width: 100% !important;*/
    }
}

.mthjut{
    margin-inline: 1em;
}

@media (min-width: 781px) {
    section.about .hngkabout{
        background: #001f3f;
    }


}

@media (max-width: 468px) {
    img.chose-img1.chose-img{
        height: 205px;
        width: 134px;
    }

    img.chose-img2.chose-img {
        height: 127px;
        width: 137px;
    }

    img.chose-img3.chose-img {
        width: 114px;
        height: 106px;
    }
}

.real-about{
    flex-wrap: nowrap;
}

a.mini-tab{
    text-align: center;
    color: #000;
}

@media (max-width: 782px){
    .real-main.real-about{
        flex-direction: column;
    }
}