/* @import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css"); */
@import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css');
/* @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); */
/* .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: 100%;
  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;
  border-radius: 1rem 5rem 5rem 1rem;
  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); */
  font-size: 30px;
  width: calc(2 * var(--flapWidth) + var(--iconSize));
  padding-block: 1rem;
  border-radius: 0 5rem 5rem 0;
  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;
  font-size: 1.25rem;
  color: var(--accent-color)
}
.ol-cards > li > .descr {
  grid-area: descr;
  font-size:16px;
}
.ol-cards > li::after {
  grid-area: nr;
  /* content: counter(ol-cards-count, decimal-leading-zero); */
  color: var(--accent-color);
  font-size: var(--numberSize);
  font-weight: 700;
}

.mission ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mission .card {
  display: flex;
  flex-direction: column;
  max-width: 29rem;
  height: 330px;
  --iconS: 6rem;
  --iconOffsetX: calc(var(--iconS) / 4);
  --iconOffsetY: calc(var(--iconS) / 2.5);
  margin-top: var(--iconOffsetY);
  margin-inline: var(--iconOffsetX);
  border-radius: 1rem;
  font-family: 'Roboto', sans-serif;
  color: #333;
  background-color: #fff;
  --shadowSurface: 0.5rem 0.5rem 0.5rem rgb(0 0 0 / .25);
  --bgGradient: radial-gradient(circle at bottom right, transparent, rgb(0 0 0 / .1));
  background-image:
    radial-gradient(circle at calc(var(--iconOffsetX) * -1 + var(--iconS) / 2) calc(var(--iconOffsetY) * -1 + var(--iconS) / 2), rgb(0 0 0 / .4) calc(var(--iconS) / 2), transparent calc(var(--iconS) / 1.6)),
    radial-gradient(circle at calc(var(--iconOffsetX) * -1 + var(--iconS) / 2) calc(var(--iconOffsetY) * -1 + var(--iconS) / 2), var(--accent-color) calc(var(--iconS) / 1.4), transparent calc(var(--iconS) / 1.4 + 1px)),
    var(--bgGradient);
  --shadowInsetLight: inset 0.125rem 0.125rem 0.125rem rgb(255 255 255 / .5);
  --shadowInsetDark: inset -0.067rem -0.067rem 0.067rem rgb(0 0 0 / .5);
  box-shadow: var(--shadowInsetLight), var(--shadowInsetDark), var(--shadowSurface);
}

.mission .card .icon {
  width: var(--iconS);
  aspect-ratio: 1;
  margin-top: calc(var(--iconOffsetY) * -1);
  margin-left: calc(var(--iconOffsetX) * -1);
  margin-bottom: calc(var(--iconS) / 4);
  display: grid;
  place-items: center;
  color: var(--accent-color);
  font-size: calc(var(--iconS) / 3);
  background-color: inherit;
  border-radius: 50%;
  box-shadow: var(--shadowInsetLight), var(--shadowInsetDark);
  background-image: var(--bgGradient);
}

.mission .card .title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-color);
  text-align: center;
  text-transform: uppercase;
}

.mission .card .content {
  padding: 1rem;
  padding-bottom: 2rem;
  font-size: 16px;
  text-align: center;
}

   .vandm-padding{
      margin-top: -80px;
   }
   
  /* Stands For */
   /* #infographic{ */
      /* margin-top: -50px; */
   /* } */

  #infographic .circle {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 7px double #800214;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 40px;
    position: absolute;
    /* left: 50%; */
    margin: 40px 0;
    background: #ebecee;
    box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25);
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
 }
 #infographic section:nth-child(odd) .circle {
    transform: translateX(-100%);
 }

 #infographic h4{
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-color);
    text-align: center;
    text-transform: uppercase;
    margin-top: 12px;
    color: #800214;
 }

 
 #infographic p{ 
  color: black ;
  font-size: 16px;
}

 #infographic .bg-danger{
  background-color: #ffffff !important;
  /* border: 1px solid #ce9ea5 !important; */
  box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
  background-image: linear-gradient(to bottom right, #e9eaec, #ffffff);
 }

 #infographic article {
   max-width: 500px;
   margin-bottom: 33px;
   cursor: pointer;
   /* left: 60%; */
   position: relative;
 }
 #infographic article header {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
 }
 #infographic article header i {
    display: flex;
    font-size: 2em;
    border-radius: 50%;
    background-clip: padding-box;
    padding: 14px;
    transition: transform 0.4s;
    color: #fff;
    border: 16px solid var(--bs-dark);
    margin: -16px 0 -16px -20px;
 }
 #infographic article:hover header i {
    transform: scale(1.2);
 }
 #infographic article.active header i {
    transform: none;
 }
 
 #infographic article .body {
    background: var(--bgColor);
    padding: 0 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    max-height: 0;
    transition: max-height 0.5s, padding 0.5s;
    overflow: hidden;
 }
 #infographic article .body .btn {
    padding: 3px 10px;
    text-transform: uppercase;
 }
 #infographic :nth-child(even) article {
    text-align: right;
    /* transform: translateX(-100%); */
 }
 #infographic :nth-child(even) article header {
    flex-flow: unset;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
 }
 #infographic :nth-child(even) article header i {
    margin: -16px -20px -16px 0;
 }
 
 #infographic section:nth-child(odd) article.active header {
    border-bottom-right-radius: 0;
 }
 #infographic section:nth-child(even) article.active header {
    border-bottom-left-radius: 0;
 }
 
 #infographic article.active .body {
    padding: 20px;
    max-height: 300px;
    border: 1px solid;
 }

 #infographic header img {
   width: 14%;
   border: 1px solid #e0e0e0;
   top: 1px;
   position: relative;
   border-radius: 8px;
}

#infographic header h6 {
  font-weight: 600;
  font-size: 16px;
  color: #800214;
}

 #infographic article[data-step="1"] {
    margin-left: 6px;
 }
 #infographic article[data-step="2"] {
    margin-left: 54px;
 }
 #infographic article[data-step="3"] {
    margin-left: 71px;
 }
 #infographic article[data-step="4"] {
    margin-left: 61px;
 }
 #infographic article[data-step="5"] {
    margin-left: 22px;
 }
 #infographic article[data-step="6"] {
    margin-left: -5px;
 }
 #infographic article[data-step="7"] {
    margin-left: -54px;
 }
 #infographic article[data-step="8"] {
    margin-left: -70px;
 }
 #infographic article[data-step="9"] {
    margin-left: -60px;
 }
 #infographic article[data-step="10"] {
    margin-left: -21px;
 }
 #infographic article[data-step="11"] {
    margin-left: 7px;
 }
 #infographic article[data-step="12"] {
    margin-left: 55px;
 }
 #infographic article[data-step="13"] {
    margin-left: 73px;
 }
 #infographic article[data-step="14"] {
    margin-left: 62px;
 }
 #infographic article[data-step="15"] {
    margin-left: 23px;
 }
 #infographic article[data-step="16"] {
    margin-left: -102px;
 }


 /* Stands For */
#infographic {
  padding: 20px;
  display: flex;
  /* flex-direction: column; */
  /* align-items: center; */
}

/* Responsive Design */
@media (max-width: 768px) {
  /* #infographic {
    flex-direction: column; /* Stack items vertically */
  /* } */

  #infographic .circle {
    width: 280px;
    height: 280px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    /* left: 0; */
    transform: none; /* Reset transform for mobile */
  }

  #infographic article {
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
    left: 0;
    position: relative; /* Prevent overlap */
  }

  #infographic section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #infographic header {
    width: 100%; /* Ensure headers are responsive */
    text-align: center;
  }

  #infographic header img {
    width: 20%; /* Adjust the image size for smaller screens */
  }

  #infographic header h6 {
    font-size: 14px;
    padding:unset;
  }

  #infographic article .body {
    /* padding: 10px; */
    text-align: center; /* Center align text */
  }

  #infographic .controls {
    flex-direction: column;
    align-items: center;
  }

  #infographic .controls a {
    margin: 5px 0;
    width: 80%;
    text-align: center;
  }

  .mission ul {
    flex-direction: column;
    align-items: center;
  }
  .mission .card {
      /* max-width: 90%; */
      margin-inline: 0;
      height: 355px;
  }
  .mission .card .content {
      font-size: 14px;
  }
  .mission .card .icon {
      --iconS: 5rem;
  }
  .mission .card .title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-color);
    text-align: center;
    text-transform: uppercase;
    margin-top: 12px;
  }

}

/* Smaller Mobile Devices */
@media (max-width: 480px) {
  #infographic .circle {
    width: 300px;
    height: 300px;
    padding: 15px;
  }

  #infographic h4 {
    font-size: 0.9rem;
  }

  #infographic p {
    font-size: 12px;
  }

  #infographic header img {
    width: 17%; /* Slightly smaller for very small screens */
  }

  #infographic article .body {
    padding: 0px;
  }

  #infographic .controls a {
    width: 90%;
    font-size: 14px;
  }

  .mission ul {
    row-gap: 1.5rem;
  }
  .mission .card {
      max-width: 100%;
  }
  .mission .card .icon {
      --iconS: 4rem;
  }
  .mission .card .title {
      font-size: 1rem;
  }
  .mission .card .content {
      font-size: 12px;
  }
}




.sprits{
   margin-top: 74px;
}

.sprits h4 {
   font-size: 1.2rem;
   font-weight: 700;
   color: var(--accent-color);
   text-align: center;
   text-transform: uppercase;
   margin-top: 12px;
   color: #800214;
}

 .sprits ul {
   --col-gap: 2rem;
   --row-gap: 2rem;
   --line-w: 0.25rem;
   display: grid;
   grid-template-columns: var(--line-w) 1fr;
   grid-auto-columns: max-content;
   column-gap: var(--col-gap);
   list-style: none;
   width: min(80rem, 100%);
   margin-inline: auto;
 }
 
 /* line */
 .sprits ul::before {
   content: "";
   grid-column: 1;
   grid-row: 1 / span 20;
   background: rgb(225, 225, 225);
   border-radius: calc(var(--line-w) / 2);
 }


 /* row gaps */
 .sprits ul li:not(:last-child) {
   margin-bottom: var(--row-gap);
 }
 
 /* card */
 .sprits ul li {
   grid-column: 2;
   --inlineP: 1.5rem;
   margin-inline: var(--inlineP);
   grid-row: span 2;
   display: grid;
   grid-template-rows: min-content min-content min-content;
 }
 
 /* date */
 .sprits ul li .date {
   --dateH: 3rem;
   height: var(--dateH);
   margin-inline: calc(var(--inlineP) * -1);
 
   text-align: center;
   /* background-color: var(--accent-color); */
   background-color: #800214;

 
   color: white;
   font-size: 1.25rem;
   font-weight: 700;
 
   display: grid;
   place-content: center;
   position: relative;
 
   border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
 }
 
 /* date flap */
 .sprits ul li .date::before {
   content: "";
   width: var(--inlineP);
   aspect-ratio: 1;
   /* background: var(--accent-color); */
   background: #800214;

   background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
   position: absolute;
   top: 100%;
 
   clip-path: polygon(0 0, 100% 0, 0 100%);
   right: 0;
 }
 
 /* circle */
 .sprits ul li .date::after {
   content: "";
   position: absolute;
   width: 2rem;
   aspect-ratio: 1;
   background: var(--bgColor);
   /* border: 0.3rem solid var(--accent-color); */
   border: 0.3rem solid #800214;

   border-radius: 50%;
   top: 50%;
 
   transform: translate(50%, -50%);
   right: calc(100% + var(--col-gap) + var(--line-w) / 2);
 }
 
 /* title descr */
 .sprits ul li .title,
 .sprits ul li .descr {
   background: var(--bgColor);
   position: relative;
   padding-inline: 1.5rem;
 }
 .sprits ul li .title {
   overflow: hidden;
   padding-block-start: 1.5rem;
   padding-block-end: 1rem;
   font-weight: 500;
 }
 .sprits ul li .descr {
   padding-block-end: 1.5rem;
   font-weight: 500;
   font-size: 16px;
 }
 
 /* shadows */
 .sprits ul li .title::before,
 .sprits ul li .descr::before {
   content: "";
   position: absolute;
   width: 90%;
   height: 0.5rem;
   background: rgba(0, 0, 0, 0.5);
   left: 50%;
   border-radius: 50%;
   filter: blur(4px);
   transform: translate(-50%, 50%);
 }
 .sprits ul li .title::before {
   bottom: calc(100% + 0.125rem);
 }
 
 .sprits ul li .descr::before {
   z-index: -1;
   bottom: 0.25rem;
 }
 
 @media (min-width: 40rem) {
   .sprits ul {
     grid-template-columns: 1fr var(--line-w) 1fr;
   }
   .sprits ul::before {
     grid-column: 2;
   }
   .sprits ul li:nth-child(odd) {
     grid-column: 1;
   }
   .sprits ul li:nth-child(even) {
     grid-column: 3;
   }
 
   /* start second card */
   .sprits ul li:nth-child(2) {
     grid-row: 2/4;
   }
 
   .sprits ul li:nth-child(odd) .date::before {
     clip-path: polygon(0 0, 100% 0, 100% 100%);
     left: 0;
   }
 
   .sprits ul li:nth-child(odd) .date::after {
     transform: translate(-50%, -50%);
     left: calc(100% + var(--col-gap) + var(--line-w) / 2);
   }
   .sprits ul li:nth-child(odd) .date {
     border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
   }
 }
 
 .sprits .credits {
   margin-top: 1rem;
   text-align: right;
 }
 .sprits .credits a {
   color: var(--color);
 }
 .one {
  box-shadow: unset !important;
}

@media only screen and (max-width: 600px) {
  .ol-cards > li > .title {
    grid-area: title;
    font-weight: 600;
    font-size: 12px;
    color: var(--accent-color);
  }
  .ol-cards > li > .descr {
    grid-area: descr;
    font-size: 10px;
  }
  .ol-cards > li {
    display: grid;
    grid-template-areas:
        "icon title nr"
        "icon descr nr";
    gap: 1rem;
    align-items: center;
    padding: var(--colGapSize) var(--flapWidth) var(--colGapSize) 0;
    border-radius: 1rem 5rem 5rem 1rem;
    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);
  }
  .mission .card {
    display: flex;
    flex-direction: column;
    max-width: 29rem;
    height: 232px;
    --iconS: 6rem;
    --iconOffsetX: calc(var(--iconS) / 4);
    --iconOffsetY: calc(var(--iconS) / 2.5);
    margin-top: var(--iconOffsetY);
    margin-inline: var(--iconOffsetX);
    border-radius: 1rem;
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #fff;
    --shadowSurface: 0.5rem 0.5rem 0.5rem rgb(0 0 0 / .25);
    --bgGradient: radial-gradient(circle at bottom right, transparent, rgb(0 0 0 / .1));
    background-image: radial-gradient(circle at calc(var(--iconOffsetX)* -1 + var(--iconS) / 2) calc(var(--iconOffsetY)* -1 + var(--iconS) / 2), rgb(0 0 0 / .4) calc(var(--iconS) / 2), transparent calc(var(--iconS) / 1.6)), radial-gradient(circle at calc(var(--iconOffsetX)* -1 + var(--iconS) / 2) calc(var(--iconOffsetY)* -1 + var(--iconS) / 2), var(--accent-color) calc(var(--iconS) / 1.4), transparent calc(var(--iconS) / 1.4 + 1px)), var(--bgGradient);
    --shadowInsetLight: inset 0.125rem 0.125rem 0.125rem rgb(255 255 255 / .5);
    --shadowInsetDark: inset -0.067rem -0.067rem 0.067rem rgb(0 0 0 / .5);
    box-shadow: var(--shadowInsetLight), var(--shadowInsetDark), var(--shadowSurface);
  }

}

@media only screen and (min-width: 600px) {
  .ol-cards > li > .title {
    grid-area: title;
    font-weight: 600;
    font-size: 12px;
    color: var(--accent-color);
  }
  .ol-cards > li > .descr {
    grid-area: descr;
    font-size: 10px;
  }
}

@media only screen and (min-width: 768px) {
  .ol-cards > li > .title {
    grid-area: title;
    font-weight: 600;
    font-size: 12px;
    color: var(--accent-color);
  }
  .ol-cards > li > .descr {
    grid-area: descr;
    font-size: 10px;
  }
  #infographic p {
    color: black;
    font-size: 12px;
  }
  .mission .card .content {
    padding: 1rem;
    padding-bottom: 2rem;
    font-size: 12px;
    text-align: center;
  }
  #infographic header h6 {
    font-weight: 600;
    font-size: 8px;
    color: #800214;
  }
  #infographic .circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 7px double #800214;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 40px;
    position: absolute;
    /* left: 50%; */
    margin: 40px 0;
    background: #ebecee;
    box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25);
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
}

}

@media only screen and (min-width: 992px) {
  .ol-cards > li > .title {
    grid-area: title;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--accent-color)
  }
  .ol-cards > li > .descr {
    grid-area: descr;
    font-size: 15px;
  }
  #infographic p {
    color: black;
    font-size: 14px;
  }
  .mission .card .content {
    padding: 1rem;
    padding-bottom: 2rem;
    font-size: 12px;
    text-align: center;
  }
  #infographic header h6 {
    font-weight: 600;
    font-size: 13px;
    color: #800214;
  }
  #infographic .circle {
    width: 375px;
    height: 375px;
    border-radius: 50%;
    border: 7px double #800214;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 40px;
    position: absolute;
    /* left: 50%; */
    margin: 40px 0;
    background: #ebecee;
    box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25);
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
}

}

@media only screen and (min-width: 1200px) {
  .mission .card .content {
    padding: 1rem;
    padding-bottom: 2rem;
    font-size: 15px;
    text-align: center;
  }
  .ol-cards > li > .title {
    grid-area: title;
    font-weight: 600;
    font-size: 1.25rem;
    /* color: var(--accent-color) */
    color: #800214;

  }
  .ol-cards > li > .descr {
    grid-area: descr;
    font-size: 15px;
  }
  #infographic header h6 {
    font-weight: 600;
    font-size: 15px;
    color: #800214;
  }
  #infographic .circle {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 7px double #800214;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 40px;
    position: absolute;
    /* left: 50%; */
    margin: 40px 0;
    background: #ebecee;
    box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25);
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
 }
}
 

@media screen and (min-width: 768px) {
  .circle {
      max-width: 300px;
  }
}

@media screen and (min-width: 992px) {
  .circle {
      max-width: 450px;
  }
}


/* ------------------New------------------------ */

.visionandmission {
  /* background: #f4f4f4; */
  text-align: center;
  padding: 50px 20px;
}
 
.missioncontainer {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.missioncard {
  border-color: #800214;
  border-bottom: 8px solid #800214;
  background: white;
  padding: 30px;
  border-radius: 15px;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  width: 300px;
  /* transition: transform 0.3s, box-shadow 0.3s; */
  text-align: center;
}
 
.visionicon {
  font-size: 60px;
  margin-bottom: 15px;
}

.quality { color: red; }
.satisfaction { color: orange; }
.goal { color: teal; }

.missioncard h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-transform: capitalize;
  color: #800214;
}
.missioncard p {
  font-size: 1rem;
  color: #333;
}


/* --------------------------------- */