@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');

body {
    font-family: 'Amiri', serif;
    direction: rtl;
    background-color: #f9f9f9;
    padding: 20px;
    margin: 0;
}

h2 {
    color: #072c60;
    font-size: 36px;
    text-align: center;
    margin-top: 20px;
}

p {
    font-size: 18px;
    color: #333;
    text-align: justify;
}

.section {
    background-color: #fff;
    /* margin: 20px 0;
    padding: 30px; */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}

.section .content {
    flex: 1;
    margin-left: 20px;
}

.section img {
    /* width: 200px; */
    width: 500px;
    height: 817px;
    object-fit: cover;
    clip-path: circle(65% at 16% 48%);
    box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
}

.section .content strong {
    font-weight: bold;
    color: #072c60;
}

.ol-cards,
.ol-cards * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ol-cards {
    /* --flapWidth: 2rem; */
    --flapHeigth: 1rem;
    --iconSize: 3rem;
    --numberSize: 3rem;
    --colGapSize: 2rem;
    width: min(100%, 48rem);
    margin-inline: auto;
    display: grid;
    gap: 2rem;
    padding-inline-start: var(--flapWidth);
    font-family: sans-serif;
    color: #222;
    counter-reset: ol-cards-count;
    list-style: none;
}

.ol-cards>li {
    display: grid;
    grid-template-areas:
        "icon title nr"
        "icon descr nr";
    gap: 0 var(--colGapSize);
    align-items: center;

    padding: var(--colGapSize) var(--flapWidth) var(--colGapSize) 0;
    padding: 10px;
    border-radius: 40rem 0rem 0rem 40rem;
    background-image: linear-gradient(to bottom right, #e9eaec, #ffffff);
    counter-increment: ol-cards-count;
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
    box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25);
}

.ol-cards>li>.icon {
    grid-area: icon;
    background: var(--accent-color);
    color: white;
    font-size: var(--iconSize);
    width: calc(2 * var(--flapWidth) + var(--iconSize));
    padding-block: 1rem;
    border-radius: 40rem 0rem 0rem 40rem;
    margin-inline-start: calc(-1 * var(--flapWidth));
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    position: relative;
    display: grid;
    place-items: center;
}

.ol-cards>li>.icon::before {
    content: "";
    position: absolute;
    width: var(--flapWidth);

    height: calc(100% + calc(var(--flapHeigth) * 2));
    left: 0;
    top: calc(var(--flapHeigth) * -1);
    clip-path: polygon(0 var(--flapHeigth),
            100% 0,
            100% 100%,
            0 calc(100% - var(--flapHeigth)));
    background-color: var(--accent-color);
    background-image: linear-gradient(90deg,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.2));
    z-index: -1;
}

.ol-cards>li>.title {
    grid-area: title;
    font-weight: 600;
    text-align: right;
    font-size: 1.25rem;
}

.ol-cards>li>.descr {
    grid-area: descr;
    text-align: right;
    direction: rtl;

}

.ol-cards>li::after {
    /* content: counter(ol-cards-count, decimal-leading-zero); */
    color: var(--accent-color);
    font-size: var(--numberSize);
    font-weight: 700;
}

@media (max-width: 40rem) {
    .ol-cards {
        --flapWidth: 1rem;
        --flapHeigth: 0.5rem;
        --iconSize: 2rem;
        --numberSize: 2rem;
        --colGapSize: 1rem;
    }
}



  
.flexbox {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
}

.flex {
    width: 16%;
    display: flex;
    flex-direction: column;
    padding: 4%;
    justify-content: center;
}

.flexbottom {
    border-bottom: 6px solid #646464;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

.flextop {
    border-top: 5px solid #646464;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: relative;
}

.flextop:before {
    content: '';
    width: 1px;
    height: 250px;
    background: #009688;
    position: absolute;
    left: 0;
    /* border-radius: 64px; */
}
.flex1:before{
    height: 355px !important;

}
.flex1:after{
    height: 355px !important;

}
.flextop:after {
    content: '';
    width: 1px;
    height: 250px;
    background: #009688;
    position: absolute;
    right: 0;
}

.flexbottom {
    box-shadow: inset 0px -20px 0px #03a999;
}

.flex.flextop {
    box-shadow: inset 0px 20px 0px #03a999;
}

.stepNumber {
    width: 100%;
    text-align: center;
    border: 1px solid #072c60;
    border-radius: 50px 0px 50px 0px;
    background: #072c60;
    color: white;
}

.stepNumber1{
    font-size: 20px ;
}
body {
    font-family: helvetica;
}

.imgbox img {
    border-radius: 50%;
}

img {
    width: 100%;
}

.flexbox {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
}

.flex {
    width: 18%;
    display: flex;
    flex-direction: column;
    padding: 4%;
    justify-content: center;
}

.flexbottom {
    border-bottom: 6px solid #646464;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

.flextop {
    border-top: 5px solid #646464;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: relative;
}

.flextop:before {
    content: '';
    width: 1px;
    height: 580px;
    background: #009688;
    position: absolute;
    left: 0;
    /* border-radius: 64px; */
}

.flextop:after {
    content: '';
    width: 1px;
    height: 580px;
    background: #009688;
    position: absolute;
    right: 0;
}

.flexbottom {
    box-shadow: inset 0px -20px 0px #b1b1b1;
}

.flex.flextop {
    box-shadow: inset 0px 20px 0px #b1b1b1;
}

.stepNumber {
    width: 100%;
    text-align: center;
    border: 1px solid #072c60;
    border-radius: 50px 0px 50px 0px;
    background: #072c60;
    color: white;
}

p {
    text-align: justify;
}

footer {
    display: flex;
    justify-content: center;
    margin: 50px;
}
   /* Global Variables */
/* //////////////////////////////////////////////////////////////////// */
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");

            :root {
                --color1: #ededed;
                --color2: #64c1cf;
                --color3: #b1c3c1;
                --color4: #bd9ac8;
                --color5: #6d87b5;
                --color6: #00acb5;
                --color7: #dbd3b1;
                --color8: #ffffff;
                --color9: #edf2f2;
                --color10: #4d5972;
            }



            .body {
                font-family: "Roboto", sans-serif;
                /* background: linear-gradient(to right, #8e9eab, #eef2f3); */
                /* height: 100vh; */
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 45px;
            }

            .card-wrapper {
                --color-primary: #00768b;
                --color-secondary: #01a188;
                --box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.5);
                width: 200px;
            }
.twoo{
    width: 270px !important;
}
            .card-header {
                width: 98%;
                height: 70vh;

                background: #fff;
                margin: 15px auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 30px 15px;
                border-top-left-radius: 70px;
                z-index: 2;
                position: relative;
                box-shadow: var(--box-shadow);
            }
.onee{
    height: 80vh
}
            .card-header:after {
                content: "";
                position: absolute;
                bottom: -15px;
                right: 20%;
                width: 30px;
                height: 30px;
                background: #fff;
                box-shadow: var(--box-shadow);
                transform: rotate(45deg);
                z-index: 1;
            }

            .card-header i {
                font-size: 40px;
                color: var(--color-primary);
            }

            .card-header h1,
            .card-header h2 {
                text-transform: uppercase;
                color: var(--color-primary);
            }

            .card-header h1 {
                font-size: 18px;
            }

            .card-header h2 {
                font-size: 14px;
                margin-top: 15px;
            }

            .card-header p {
                font-size: 16px;
                text-align: justify;
                margin-top: 10px;
            }

            .card-footer {
                width: 100%;
                height: 162px;
                background-image: linear-gradient(to right bottom,
                        var(--color-secondary),
                        var(--color-primary));
                display: flex;
                flex-direction: column;
                justify-content: end;
                align-items: start;
                margin-top: -150px;
                border-radius: 5px 5px 70px 0px;
                color: #fff;
                overflow: hidden;
            }

            .card-footer .footer-content-wrap {
                padding: 0 30px 10px 20px;

                display: flex;
                justify-content: space-between;
                width: 100%;
                align-items: center;
            }

            .card-footer .footer-text-wrap {
                text-align: center;
                color: rgba(255, 255, 255, 0.3);
            }

            .card-footer i {
                font-size: 48px;
                color: rgba(255, 255, 255, 0.7);
            }

            .card-footer h1 {
                font-size: 60px;
                line-height: 0.85;
                font-weight: 400;
            }

            .card-footer p {
                font-size: 12px;
                text-transform: uppercase;
            }

            /*set card color ///////*/

            .card-wrapper.one {
                --color-primary: #000046;
                --color-secondary: #1cb5e0;
            }

            .card-wrapper.two {
                --color-primary: #000046;
                --color-secondary: #1cb5e0;
            }

            .card-wrapper.three {
                --color-primary: #000046;
                --color-secondary: #1cb5e0;
            }

            .card-wrapper.four {
                --color-primary: #000046;
                --color-secondary: #1cb5e0;
            }

            .card-wrapper.five {
                --color-primary: #000046;
                --color-secondary: #1cb5e0;
            }

            .card-header img {
                border-radius: 50px;
            }


/* ////////////////////////////////////////////////////////////////////////////////////// */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@800&display=swap");
:root {
  --font-size: 0.8em;
  --bg1: #f5f8f7;
  --blue: #3498db;
  --green: #2ecc71;
  --purple: #9b59b6;
  --gold: #f1c40f;
  --red: #e74c3c;
  --orange: #e67e22;
  --shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f;
  --shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022;
}

main {
  padding: 2vw;
}

ul.infoGraphic {
  font-size: var(--font-size);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  direction: ltr;
  list-style-type: none;


}
.number img{
  border-radius: 20px;
}
ul.infoGraphic li {
  position: relative;
  width: 100%;
  max-width: 30em;
  background: var(--bg1);
  border-radius: 0.5em;
  padding: 0.5em;
  z-index: 1;
  transition: all 0.2s;
  cursor: pointer;
}
ul.infoGraphic li .numberWrap {
  position: absolute;
}
ul.infoGraphic li .number {
  font-family: "maven pro", sans-serif;
  font-size: 12em;
  font-weight: 900;
  width: 0.9em;
  text-align: center;
}
ul.infoGraphic li .number.fontColor1 {
  color: var(--blue);
}
ul.infoGraphic li .number.fontColor2 {
  color: var(--green);
}
ul.infoGraphic li .number.fontColor3 {
  color: var(--purple);
}
ul.infoGraphic li .number.fontColor4 {
  color: var(--gold);
}
ul.infoGraphic li .number.fontColor5 {
  color: var(--red);
}
ul.infoGraphic li .number.fontColor6 {
  color: var(--orange);
}
ul.infoGraphic li .coverWrap {
  transform: rotate(130deg);
  position: absolute;
  width: 18em;
  height: 15em;
  left: -2em;
  top: -1em;
}
ul.infoGraphic li .coverWrap .numberCover {
  position: absolute;
  background: var(--bg1);
  width: 18em;
  height: 6em;
  border-radius: 50% 50% 0 0;
  border-bottom: 3px solid #f5f8f7;
  transition: all 0.4s;
}
ul.infoGraphic li .coverWrap .numberCover::before {
  position: absolute;
  content: "";
  bottom: 5px;
  left: 4em;
  right: 4em;
  top: 5em;
  box-shadow: 0 0 30px 17px #48668577;
  border-radius: 100px/10px;
  z-index: -1;
}
ul.infoGraphic li .coverWrap .numberCover::after {
  position: absolute;
  bottom: 0;
  content: "";
  left: -10%;
  width: 120%;
  height: 150%;
  background: radial-gradient(at bottom, #48668533, transparent, transparent);
  z-index: 1;
}
ul.infoGraphic li .content {
  margin: 4em 1em 1em 7em;
  position: relative;
}
ul.infoGraphic li .content h2 {
  font-size: 1.7em;
  font-weight: 700;
  text-align: right;
  margin-bottom: 10px;
  /* text-transform: uppercase; */
}
ul.infoGraphic li .content p {
  line-height: 1.5em;
  direction: rtl;
}

ul.infoGraphic li:hover .coverWrap .numberCover {
  border-radius: 100%;
}

.icon {
  position: absolute;
  font-size: 2rem;
  text-align: center;
  top: -1.3em;
  left: 50%;
  transform: translatex(-50%);
}
.icon:before {
  color: #666;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

.iconCodepen:before {
  content: "";
}

.iconSocial:before {
  content: "";
}

.iconAirplane:before {
  content: "";
}

.iconMap:before {
  content: "";
}

.iconBulb:before {
  content: "";
}

.iconPeace:before {
  content: "";
}
/* 
html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--bg1);
  min-height: 100vh;
  color: #444;
  display: grid;
  place-items: center;
  padding: 3rem 1rem 10em;
} */

.controls {
  position: fixed;
  z-index: 2;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #d7d7d7a1;
  padding: 0.5rem 2em;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
  border: 1px solid #0000004d;
}

.sliderBox {
  text-align: center;
}
.sliderBox .range-value {
  font-weight: 500;
  font-size: 22px;
}

input[type=range] {
  width: 100%;
  margin: 1em 0;
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  background: #00000066;
  border: 0;
  border-radius: 1.3px;
  width: 100%;
  height: 2px;
  cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background: #eee;
  box-shadow: inset 0px 1px 1px #ffffff66, 0px 1px 3px black;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 50px;
  cursor: pointer;
  -webkit-appearance: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #eee;
}

input[type=range]::-moz-range-track {
  background: #000;
  border: 0;
  border-radius: 1.3px;
  width: 100%;
  height: 1px;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #151728;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 50px;
  cursor: pointer;
}

input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 13px 0;
  color: transparent;
  width: 100%;
  height: 1px;
  cursor: pointer;
}

input[type=range]::-ms-fill-lower {
  background: #151728;
  border: 0;
  border-radius: 2.6px;
}

input[type=range]::-ms-fill-upper {
  background: #151728;
  border: 0;
  border-radius: 2.6px;
}

input[type=range]::-ms-thumb {
  width: 25px;
  height: 25px;
  background: #151728;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 50px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}

input[type=range]:focus::-ms-fill-lower {
  background: #ffffff;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ffffff;
}


/* ////////////////////////////////////////////////////////////////////////////// */
  .bod {
    --_mini: var(--mini, 0);
    --not-mini: calc(1 - var(--_mini));
    --_narr: var(--narr, 0);
    --not-narr: calc(1 - var(--_narr));
    --_wide: var(--wide, 1);
    --not-wide: calc(1 - var(--_wide));
    grid-gap: 1em;
    align-content: center;
    justify-content: var(--mini, center);
    margin: 0;
    padding: calc(var(--_wide)*.5em);
    /* background: #212121; */
    color: #ededed;
    font: clamp(1em, 2.25vw, 1.5em)/1.125 ubuntu, trebuchet ms, verdana, aria, sans-serif;
    display: flex;
    direction: ltr;
    align-items: end;
  }
  @media (max-width: 45rem) {
    .bod {
      --wide: 0 ;
    }
  }
  @media (max-width: 33.75rem) {
    .bod {
      --narr: 1 ;
    }
  }
  @media (max-width: 25rem) {
    .bod {
      --mini: 1 ;
    }
  }
  @media (max-width: 16.25rem) {
    .bod {
      font-size: 0.75em;
    }
  }
  @media (max-width: 12.5rem) {
    .bod {
      font-size: 0.625em;
    }
  }
  
  .h2 {
    grid-row: 1;
    margin: 0;
    text-transform: uppercase;
  }
  
  .h1, .sections {
    justify-self: center;
  }
  
  .h1 {
    font-size: 35px;
    font-weight:600;
    text-align: right;
    color: black;
    filter: none !important;
  }
  
  aside {
    justify-self: center;
    padding: 0.5em;
    box-shadow: 2px 2px 5px #000;
    font: 1.25em indie flower, comic sans ms, cursive;
  }
  
  pre {
    margin: 0.5em 0;
    font: 0.875em ubuntu mono, consolas, monaco, monospace;
  }
  
  .token--tag {
    color: #fbbe74;
  }
  .token--func {
    color: #fc9c9e;
  }
  .token--prop {
    color: #bfd9ab;
  }
  .token--num {
    color: #a6b7c9;
  }
  
  a {
    color: violet;
  }
  
  .sections div{
    padding-bottom: 1.5rem;
    width: min(50.75em, 100%);
    color: #121212;
    filter: drop-shadow(2px 2px 2.5px #000);
  }
  
  .article {
    --_p: var(--p, 0);
    --not-p: calc(1 - var(--_p));
    --sgn-p: calc(2*var(--_p) - 1);
    box-sizing: border-box;
    display: grid;
    grid-gap: 0.5em;
width:100%;
    /* grid-template-columns: var(--narr, 1fr -webkit-max-content 1fr) !important; */
    /* grid-template-columns: var(--narr, 1fr max-content 1fr) !important; */
    margin: 0 50px -0.75rem;
    padding: calc(.5em + .75em) 0 calc(.5em + .75em);
    --shadow:
        conic-gradient(from calc(var(--_p)*-5deg + var(--sgn-p)*-90deg)
                at calc(var(--_p)*100% - var(--sgn-p)*var(--_wide)*6.25rem) -3px,
            hsla(0, 0%, 0%, calc(var(--not-p)*0.5)),
            hsla(0, 0%, 0%, calc(var(--_p)*0.5)) 5deg,
                transparent 0%), ;
    background: var(--shadow) linear-gradient(calc(var(--sgn-p)*90deg), var(--c0) 6.25rem, var(--c1));
    -webkit-clip-path: polygon(calc(var(--_p)*100%) 50%, calc(var(--_p)*100% - var(--sgn-p)*var(--_wide)*3.125rem) 0, calc(var(--not-p)*100% + var(--sgn-p)*var(--_wide)*6.25rem) 0.75rem, calc(var(--not-p)*100% + var(--sgn-p)*var(--_wide)*6.25rem) calc(100% - 0.75rem), calc(var(--_p)*100% - var(--sgn-p)*var(--_wide)*3.125rem) 100%);
            clip-path: polygon(calc(var(--_p)*100%) 50%, calc(var(--_p)*100% - var(--sgn-p)*var(--_wide)*3.125rem) 0, calc(var(--not-p)*100% + var(--sgn-p)*var(--_wide)*6.25rem) 0.75rem, calc(var(--not-p)*100% + var(--sgn-p)*var(--_wide)*6.25rem) calc(100% - 0.75rem), calc(var(--_p)*100% - var(--sgn-p)*var(--_wide)*3.125rem) 100%);
    counter-increment: c;
  }
  .article:first-child {
    --shadow: ;
  }
  /* .article:nth-child(2n) {
    --p: 1 ;
  } */
  .article::before, article::after {
    align-self: center;
  }
  .article:before {
    grid-column: calc(var(--not-mini)*2 + var(--_mini)*(var(--_p) + 1));
    grid-row: calc(1 + var(--_mini))/span calc(2 - var(--_mini));
    padding: 0 0.75rem;
    font-size: calc((1.5*var(--not-mini) + 2.5)*1em);
    text-align: center;
    /* content: counter(c, decimal-leading-zero); */
  }
  /* .article::after {
    grid-row: calc(1 + var(--_mini))/span calc(2 - var(--_mini));
    grid-column: calc((1 + var(--not-mini))*var(--not-p) + 1);
    padding: 0 calc(var(--not-p)*var(--_wide)*6.25rem + 0.75rem) 0 calc(var(--_p)*var(--_wide)*6.25rem + 0.75rem);
    font-size: calc((var(--not-mini)*.75 + 1.75)*1em);
    text-align: var(--p, right);
    filter: brightness(0) invert(0.0625);
    content: attr(data-icon);
  } */
  
  .h2, .p {
    --pad: calc(var(--not-mini)*(var(--_wide)*1.25rem + var(--not-wide)*0.75rem));
    --ini: calc(var(--_mini)*.25rem);
    grid-column-end: span calc(1 + var(--_mini));
    padding: var(--ini) calc(var(--_p)*var(--pad) + var(--ini)) var(--ini) calc(var(--not-p)*var(--pad) + var(--ini));
    direction: rtl;
    width: 80%;
}
  
  .h2 {
    font-size: 0.7em;
    font-weight: 700;
    text-align: right;
  }
  
  .p {
    grid-row: calc(2 + var(--_mini));
    margin: 0;
    font-size:16px;
    line-height:20px;
    font-weight: 900 !important;
  }

  .h1 {
    font-size: 35px;
    font-weight:600;
    text-align: right;
    color: black;
    filter: none !important;
    position: relative;
  }


  /* /////////////////////////////////////////////////////////////////////// */

  [speech-bubble], [speech-bubble] * { box-sizing: border-box }

[speech-bubble]{
  --bbColor: #f3f3f3;
  --bbArrowSize: 1.5rem;
  --bbBorderRadius: 0.25rem;
  --bbPadding: 2rem;
  /* background: var(--bbColor); */
  border-radius: var(--bbBorderRadius);
  padding: var(--bbPadding);
  position: relative;
  background: #f3f3f3;

}

[speech-bubble]::before{
  content: ''; 
  position: absolute;
  background: var(--bbColor);
}

[speech-bubble][pbottom]{ margin-bottom: var(--bbArrowSize) }
[speech-bubble][ptop]   { margin-top: var(--bbArrowSize); }
[speech-bubble][pleft]  { margin-left: var(--bbArrowSize); }
[speech-bubble][pright] { margin-right: var(--bbArrowSize); }


/* bottom and top  */
[speech-bubble][pbottom]::before,
[speech-bubble][ptop]::before{
  --width: calc(var(--bbArrowSize) / 2 * 3);
  height: var(--bbArrowSize);
  width: var(--width);
}

/* bottom */
[speech-bubble][pbottom]::before{
  top: calc(100% - 2px);
}
[speech-bubble][pbottom][aleft]::before{
  left: 1rem;
  clip-path: polygon(25% 0, 100% 0, 0% 100%)
}
[speech-bubble][pbottom][acenter]::before{
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 0, 87.5% 0, 50% 100%)
}
[speech-bubble][pbottom][aright]::before{
  right: 1rem;
  clip-path: polygon(0 0, 75% 0, 100% 100%)
}

/* top */
[speech-bubble][ptop]::before{
  bottom: calc(100% - 2px);
}
[speech-bubble][ptop][aleft]::before{
  left: var(--bbPadding);
  clip-path: polygon(0 0, 100% 100%, 25% 100%)
}
[speech-bubble][ptop][acenter]::before{
  left: calc(50% - var(--width) / 2);
  clip-path: polygon(12.5% 100%, 50% 0, 87.5% 100%)
}
[speech-bubble][ptop][aright]::before{
  right: var(--bbPadding);
  clip-path: polygon(0 100%, 100% 0, 75% 100%)
}

/* left and right  */
[speech-bubble][pleft]::before,
[speech-bubble][pright]::before{
  --height: calc(var(--bbArrowSize) / 2 * 3);
  width: var(--bbArrowSize);
  height: var(--height);
}

/* right */
[speech-bubble][pright]::before{
  left: calc(100% - 2px);
}
[speech-bubble][pright][atop]::before{
  top: var(--bbPadding);
  clip-path: polygon(100% 0, 0 100%, 0 25%)
}
[speech-bubble][pright][acenter]::before{
  top: calc(50% - var(--height) / 2);
  clip-path: polygon(0 12.5%, 100% 50%, 0 87.5%)
}
[speech-bubble][pright][abottom]::before{
  bottom: var(--bbPadding);
  clip-path: polygon(0 0, 100% 100%, 0 75%)
}

/* left */
[speech-bubble][pleft]::before{
  right: calc(100% - 2px);
}
[speech-bubble][pleft][atop]::before{
  top: var(--bbPadding);
  clip-path: polygon(0 0, 100% 25%, 100% 100%)
}
[speech-bubble][pleft][acenter]::before{
  top: calc(50% - var(--height) / 2);
  clip-path: polygon(0 50%, 100% 12.5%, 100% 87.5%);
}
[speech-bubble][pleft][abottom]::before{
  bottom: var(--bbPadding);
  clip-path: polygon(0 100%, 100% 0, 100% 75%)
}

/* flip */
[speech-bubble][pbottom][flip]::before,
[speech-bubble][ptop][flip]::before{
  transform: scaleX(-1)
}
[speech-bubble][pleft][flip]::before,
[speech-bubble][pright][flip]::before{
  transform: scaleY(-1)
}





/* for demo */
.body2{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: default;
}
.body1{
 
  max-width: 70rem;
  margin-inline: auto;
  font-family: sans-serif;
  display:grid;
  grid-template-areas:
    'br bc bl'
    'rb cc lb'
    'rc cc lc'
    'rt cc lt'
    'tr tc tl';
  padding: 2rem;
  gap: 2rem;
  /* background: #141518; */
}

.middle{
  grid-area: cc;
  align-self: center;
  justify-self: center;
  text-align:center;
  color: white;
}

[speech-bubble][pbottom][aleft]   {grid-area: bl}
[speech-bubble][pbottom][acenter] {grid-area: bc}
[speech-bubble][pbottom][aright]  {grid-area: br}

[speech-bubble][pright][atop]     {grid-area: rt}
[speech-bubble][pright][acenter]  {grid-area: rc}
[speech-bubble][pright][abottom]  {grid-area: rb}

[speech-bubble][pleft][atop]      {grid-area: lt}
[speech-bubble][pleft][acenter]   {grid-area: lc}
[speech-bubble][pleft][abottom]   {grid-area: lb}

[speech-bubble][ptop][aleft]      {grid-area: tl}
[speech-bubble][ptop][acenter]    {grid-area: tc}
[speech-bubble][ptop][aright]     {grid-area: tr}

[speech-bubble][pbottom],
[speech-bubble][ptop]{margin: 0}

[speech-bubble]{ 
  filter: drop-shadow(0px 0px 0.2rem black);
  transition: transform 0.25s ease
}
[speech-bubble]:hover{
  transform: scale(1.05);
  filter: 
    drop-shadow(0px 0px 0.2rem black)
    drop-shadow(0px 0px 1rem var(--bbColor));
}

[speech-bubble] .title{
    font-weight: 900;
  color: black; 
  font-size: 1.2em;
  /* text-shadow: 1px 1px 2px black; */
  margin-bottom: 0.5rem
}
[speech-bubble] code {
  background: white;
  margin: 0.125rem;
  box-shadow: 0px 0px 5px rgba(0,0,0,.5);
  white-space: nowrap;
  font-size: .9rem
}

.middle code{
  font-size: 1rem;
}






.npsai{
    width: 300px;
    margin: auto ;
    /* height: 200px; */
}

.question-engineering {
  background-color: #f9f9f9;
  padding: 40px 20px;
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  text-align: right;
}

.question-engineering .container {
  max-width: 1000px;
  margin: 0 auto;
}

.question-engineering h2 {
  color: #072c60;
  font-size: 28px;
  margin-bottom: 20px;
}

.question-engineering .intro {
  font-size: 16px;
  color: #333;
  margin-bottom: 30px;
  line-height: 1.8;
}

.question-engineering .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.question-engineering .card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-right: 5px solid #072c60;
  border-radius: 12px;
  padding: 20px 0px 20px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  flex: 1 1 calc(50% - 20px);
  box-sizing: border-box;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;

}

.question-engineering .card:hover {
  transform: translateY(-5px);
}

.question-engineering .card h3 {
  color: #072c60;
  margin-bottom: 10px;
  font-size: 18px;
}

.question-engineering .card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* ✅ Media query للموبايل */
@media (max-width: 768px) {
  .question-engineering .card {
    flex: 1 1 100%;
  }
 
  .question-engineering h2 {
    font-size: 24px;
    text-align: center;
  }
 
  .question-engineering .intro {
    text-align: center;
    font-size: 15px;
  }

  .question-engineering .card h3 {
    font-size: 17px;
  }

  .question-engineering .card p {
    font-size: 14px;
  }

}

.ai-agents-section {
  background: #f8f9fb;
  /* padding: 50px 20px; */
  font-family: 'Cairo', sans-serif;
  direction: rtl;
  text-align: right;
}

.container {
  max-width: 1100px;
  margin: auto;
}

.section-title {
  color: #072c60;
  font-size: 28px;
  margin-bottom: 10px;
  text-align: center;
}

.intro {
  font-size: 18px;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  background: white;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card h3 {
  color: #072c60;
  font-size: 20px;
  margin-bottom: 15px;
}

.card ul {
  list-style: none;
  padding: 0;
}

.card ul li {
  margin-bottom: 10px;
  color: #444;
  line-height: 1.6;
}

.future {
  margin-top: 40px;
  background-color: #e9f1ff;
  padding: 30px;
  border-radius: 16px;
}

.future h3 {
  font-size: 22px;
  color: #072c60;
  margin-bottom: 15px;
}

.future p {
  color: #333;
  font-size: 17px;
  line-height: 1.8;
}
.ai-agents-section .container {
  max-width: 100%;

}
.ai-agents-section .container p {
  text-align: center;
  line-height: 40px;
  ;
}
.ai-agents-section .section {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 25px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 8%);
  transition: transform 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}
.ai-agents-section .section img{
  width: 50%; 
   
    height: auto;
    /* object-fit: cover; */
    clip-path: none;
    box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
}
.ai-agents-section .section:hover {
  transform: translateY(-5px);
}

.ai-agents-section .section h3 {
  font-size: 24px;
  color: #072c60;
  margin-bottom: 10px;
  position: relative;
  padding-right: 40px;
}

/* .ai-agents-section .section h3::before {
  content: "🤖";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 26px;
} */

.ai-agents-section .section p, .ai-agents-section .section li {
  font-size: 18px;
  color: #333;
  line-height: 2.8;
}

.ai-agents-section .section ul {
  list-style: none;
  padding: 0;
}

.ai-agents-section .section ul li::before {
  content: "✔";
  color: #0a3d62;
  margin-left: 8px;
}

.ai-agents-section .title {
  text-align: center;
  color: #072c60;
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  position: relative;
}

.ai-agents-section .title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  /* background: #072c60; */
  background: #c0202b;

  margin: 10px auto 0;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .ai-agents-section .section h3 {
    font-size: 20px;
  }

  .ai-agents-section .section p, .section li {
    font-size: 16px;
  }

  .ai-agents-section .title {
    font-size: 28px;
  }
}


@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital@1&family=Oswald:wght@500&display=swap');
@import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css');

/* grid layout */
.ai-agents-section ol, .ai-agents-section ol::before,.ai-agents-section ol::after, 
.ai-agents-section ol *,.ai-agents-section ol *::before,.ai-agents-section ol *::after { margin: 0; padding: 0; box-sizing: border-box }
.ai-agents-section ol { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  /* gap: 1rem; */
  
  width: min(80rem, calc(100% - 0rem));
  margin-inline: auto;
  padding-block: 1rem;
  
  list-style: none;
  counter-reset: count;
}

/* card layout/styling */
.ai-agents-section ol > li {
  --card-background-color: #f0f0f0;
  --card-text-color: #0F0F0F;
  --card-border-radius: 0.5rem;
  --card-padding-block: 1.5rem;
  --card-padding-inline: 1rem;
  
  --outset-size: 0.75rem;
  --outset-background-color: #e5e5e5;
  
  --number-font-size: 3rem;
  --number-overlap: 0.5rem;
  --number-font-family: 'Oswald', sans-serif;
  --number-font-weight: 500;
  
  margin: var(--outset-size);
  margin-top: calc(var(--number-font-size) - var(--number-overlap));
  border-radius: var(--card-border-radius);
  padding-block: var(--card-padding-block);
  padding-inline: var(--card-padding-inline);
  
  color: var(--card-text-color);
  background-color: var(--card-background-color);
  box-shadow: 
    inset 1px 1px 0px rgb(255 255 255 / .5),
    inset -1px -1px 0px rgb(0 0 0 / .25),
    calc(var(--outset-size) * .25) calc(var(--outset-size) * .25) calc(var(--outset-size) * .5) rgb(0 0 0 / .25);
  position: relative;
  counter-increment: count;
}

.ai-agents-section ol > li::after{
  content: counter(count, decimal-leading-zero);
  position: absolute;
  
  bottom: calc(100% - var(--number-overlap));
  left: 50%;
  transform: translateX(-50%);
  
  color: var(--accent-color);
  font-family: var(--number-font-family);
  font-weight: var(--number-font-weight);
  font-size: var(--number-font-size);
  line-height: 1;
  z-index: -1;
}
.ai-agents-section ol > li::before{
  content: "";
  position: absolute;
  width: calc(100% + (var(--outset-size) * 2));
  height: 100%;
  bottom: calc(var(--outset-size) * -1);
  left: calc(var(--outset-size) * -1);
  z-index: -1;
  
  border-bottom-left-radius: calc(var(--card-border-radius) + var(--outset-size));
  border-bottom-right-radius: calc(var(--card-border-radius) + var(--outset-size));
  
  background-color: var(--outset-background-color);
  
  background-image: 
    linear-gradient(to left, var(--outset-background-color) calc(var(--outset-size) * 2), transparent 0),
    linear-gradient(135deg, var(--accent-color) 80%, var(--outset-background-color) 0);    
}

/* card content */
.ai-agents-section h1 {
  font-size: 2.5rem;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  font-weight: normal
}
.ai-agents-section .icon{
  font-size: 2rem;
  text-align: center;
  margin-bottom: calc(var(--card-padding-block) * .5);
}
.ai-agents-section .title {
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  /* color: var(--accent-color) */
}
.ai-agents-section .descr {
  color: var(--text-color);
  font-size: 1rem;
  /* font-family: 'tajwel', serif; */
  text-align: center;
}

/*  */
.ai-agents-section .body {
  /* background-color: #f5f5f5; */
  /* min-height: 100vh; */
  /* margin: 0; */
  /* padding: 0; */
  display: flex;
  gap: 1px;
  flex-direction: column;
  
}








@media screen and (max-device-width: 768px)  {
    .section {
      flex-direction: column-reverse !important; /* يجعل الصورة أولاً */
      align-items: center;
      text-align: right;
      padding: 20px;
    }
  
    .section .content {
      margin-left: 0;
      width: 100%;
    }
  
    .section img {
      width: 100%;
      height: auto;
      clip-path: none;
      border-radius: 12px;
      margin-bottom: 20px;
    }
  
    .ol-cards {
      width: 100%;
      padding-inline-start: 0;
      gap: 1.5rem;
    }
  
    .ol-cards > li {
      grid-template-areas:
        "title"
        "descr";
      padding: 1rem;
      border-radius: 1rem;
      text-align: right;
    }
  
    .ol-cards > li::after {
      display: none;
    }
  
    .ol-cards > li .title {
      font-size: 1.1rem;
    }
  
    .ol-cards > li .descr {
      font-size: 0.95rem;
    }
  
    h2 {
      font-size: 24px;
      text-align: center;
    }
  
    p {
      font-size: 16px;
    }

    .body {
        font-family: "Roboto", sans-serif;
        /* background: linear-gradient(to right, #8e9eab, #eef2f3); */
        /* height: 120vh; */
        display: flex;
        flex-direction: column-;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 45px;
    }
    .card-wrapper {
        --color-primary: #00768b;
        --color-secondary: #01a188;
        --box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.5);
        width: 85%;
    }
    .card-header {
        width: 95%;
        height: 70vh;
        background: #fff;
        margin: 15px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 15px;
        border-top-left-radius: 70px;
        z-index: 2;
        position: relative;
        box-shadow: var(--box-shadow);
    }
    .card-header h1 {
    font-size: 18px;
    width: 100%;
    text-align: center;
}
.bod {
    --_mini: var(--mini, 0);
    --not-mini: calc(1 - var(--_mini));
    --_narr: var(--narr, 0);
    --not-narr: calc(1 - var(--_narr));
    --_wide: var(--wide, 1);
    --not-wide: calc(1 - var(--_wide));
    grid-gap: 1em;
    align-content: center;
    justify-content: var(--mini, center);
    margin: 0;
    padding: calc(var(--_wide)*0.5em);
    /* background: #212121; */
    color: #ededed;
    font: clamp(1em, 2.25vw, 1.5em)/1.125 ubuntu, trebuchet ms, verdana, aria, sans-serif;
    display: flex;
    direction: ltr;
    align-items: end;
    flex-direction: column;
    margin-top: 50px;
}
.bod img{
    width: 100%;
    margin: auto;
  }
  ul.infoGraphic {
    font-size: var(--font-size);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    /* width: 90%; */
    justify-content: center;
    direction: ltr;
    list-style-type: none;
}
ul.infoGraphic li {
    position: relative;
    width: 100%;
    max-width: 90%;
    background: var(--bg1);
    border-radius: 0.5em;
    padding: 0.5em;
    z-index: 1;
    transition: all 0.2s;
    cursor: pointer;
}
        
       .img12, .img11, .img8, .img9{
           display: none;
       } 
        .onee {
                height: 60vh;
        }
        .twoo {
    width: 90% !important;
}
.body1 {
    max-width: 70rem;
    margin-inline: auto;
    font-family: sans-serif;
    display: grid;
    display: flex;
    flex-direction: column;
    grid-template-areas:
        'br bc bl'
        'rb cc lb'
        'rc cc lc'
        'rt cc lt'
        'tr tc tl';
    padding: 2rem;
    gap: 2rem;
    /* background: #141518; */
}
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  flex-direction: column !important;
}
.ai-agents-section ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  /* gap: 1rem; */
  width: min(80rem, calc(100% - 0rem));
  margin-inline: auto;
  padding-block: 1rem;
  list-style: none;
  counter-reset: count;
  display: flex;
  flex-direction: column;
}
.ai-agents-section .section {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 25px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 8%);
  transition: transform 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column !important;
  align-items: center;
}

.ai-agent-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  display: flex;
  flex-direction: column;
}
.ai-benefit-list {
  grid-template-columns: 1fr 1fr 1fr;
  display: flex;
  flex-direction: column;

    }
    .ai-glossary-list {
      grid-template-columns: 1fr 1fr 1fr;
      display: flex;
      flex-direction: column;
  }
  }

    
.card-img {
  width: 120px;
  height: 120px;
  min-width: 120px;
  background-color: #072c60;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  margin-left: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.ai-future-section {
  background: #f2f6fa;
  padding: 60px 20px;
  direction: rtl;
  font-family: 'Cairo', sans-serif;
}

.ai-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
}

.ai-text {
  flex: 1 1 500px;
}

.ai-text h2 {
  color: #072c60;
  font-size: 32px;
  margin-bottom: 20px;
}

.ai-text p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 15px;
  color: #333;
}

.ai-image {
  flex: 1 1 400px;
  text-align: center;
}

.ai-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}



.ai-agents {
  background-color: #f5f5f5;
  padding: 40px 0;
  text-align: center;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  font-size: 2.5rem;
  color: #072c60;
  margin-bottom: 40px;
}

.ai-agent-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.ai-agent-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ai-agent-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.ai-agent-item h3 {
  font-size: 1.5rem;
  color: #072c60;
  margin-bottom: 15px;
}

.ai-agent-item p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .ai-agent-list {
    grid-template-columns: 1fr;
  }

  h2 {
    font-size: 2rem;
  }

  .ai-agent-item h3 {
    font-size: 1.3rem;
  }
}
.ai-benefits {
  background-color: #e9f2f8;
  padding: 40px 0;
  text-align: center;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  font-size: 2.5rem;
  color: #072c60;
  margin-bottom: 40px;
}

.ai-benefit-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
}

.ai-benefit-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ai-benefit-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.ai-benefit-item h3 {
  font-size: 1.5rem;
  color: #072c60;
  margin-bottom: 15px;
}

.ai-benefit-item p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .ai-benefit-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .ai-benefit-list {
    grid-template-columns: 1fr;
  }

  h2 {
    font-size: 2rem;
  }

  .ai-benefit-item h3 {
    font-size: 1.3rem;
  }
}
.ai-glossary {
  background-color: #f7f8fa;
  padding: 40px 0;
  text-align: center;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  font-size: 2.5rem;
  color: #072c60;
  margin-bottom: 40px;
}

.ai-glossary-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.ai-glossary-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ai-glossary-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.ai-glossary-item h3 {
  font-size: 1.5rem;
  color: #072c60;
  margin-bottom: 15px;
}

.ai-glossary-item p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .ai-glossary-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .ai-glossary-list {
    grid-template-columns: 1fr;
  }

  h2 {
    font-size: 2rem;
  }

  .ai-glossary-item h3 {
    font-size: 1.3rem;
  }
}