/*  cards*/

.container1 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.card-item {
  width: 300px;
  margin: 1rem;
  position: relative;
  border-radius: 8px;
  background: white;
  padding-bottom: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 20px 40px rgba(87, 84, 84, 0.328);
}

.card-item:hover {
  transform: rotate(1deg);
  box-shadow: 0 20px 40px rgba(16, 14, 14, 0.5);
}

.image10 {
  width: 300px;
  height: 200px;
  border-radius: 8px;
  position: relative;
  transition: all 0.5s;
  background-size: cover;
  background-position: center center;
}
/*
.image2 {
  background-image: url("./card-image-2.jpg");
}

.image3 {
  background-image: url("./card-image-3.jpg");
}

.image4 {
  background-image: url("./card-image-4.jpg");
}
*/
.content1 {
  padding: 1rem;
}

.title10 {
  font-family: "bahnschrift";
  margin: 1rem 0;
  color: #ffffff;
  font-size: 2.5rem;
}

.title15 {
  font-family: "bahnschrift";
  margin: 1rem 0;
  color: #00761c;
  font-size: 2.5rem;
}

.title20 {
  margin: 1rem 0;
  color: #06b10f;
  font-size: 2rem;
}

.title30 {
  margin: 1rem 0;
  color: #116df7;
  font-size: 2rem;
}

.title40 {
  margin: 1rem 0;
  color: #e65b00;
  font-size: 2rem;
}

p1 {
  font-size: 14px;
  margin-bottom: 2rem;
  font-family: sans-serif;
  color: rgb(124, 133, 141);
}

.button10 {
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 10px 18px;
  text-decoration: none;
  background-color: #d10ac7;
}

.button20 {
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 10px 18px;
  text-decoration: none;
  background-color: #f1b209;
}

.button21 {
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 10px 18px;
  border-radius: 8px;

  text-decoration: none;
  background-color: #00761c;
}

.button22 {
  color: rgb(6, 136, 39);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  background-color: #fffcd5;
}

.button23 {
  color: #fffcd5;
  font-size: 12px;
  font-weight: bold;
  text-align: Center;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  background-color: #00761c;

}

.button24 {
  background-color: #058b25;
  border: 2px solid ;
  background-color: white;
  color: rgb(2, 145, 49);
  padding: 10px 18px;
  font-size: 12px;
  cursor: pointer;
   border-radius: 8px;
}


.button30 {
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 10px 18px;
  text-decoration: none;
  background-color: #116df7;
}

.button40 {
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 10px 18px;
  text-decoration: none;
  background-color: #e75a22;
}

.center100 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}

.center101 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  text-align: center;
}

/* flex*/
.center102 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  text-align: center;

}

.dov {
  justify-content: space-between;
}

.row.no-gutter {
  margin-left: 0px;
  margin-right: 0px;
}

.no-gutter [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

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

html {
  box-sizing: border-box;
}

body {
  font: 16px Arial, Helvetica, sans-serif;
  color: #333;
  background: #f7f7f7;
  margin: 0;
}

.main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px;
}
*/
h2,
p {
  margin: 0;
}

h2 {
  font-size: 32px;
}

a {
  text-decoration: none;
}

.img100 {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.cards100-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}

.card100 {
  display: flex;
  flex-direction: column;
  perspective: 1000px;
}

.card100:hover .card100-front {
  transform: rotateY(-180deg);
  visibility: hidden;
  opacity: 0;
}

.card100:hover .card100-back {
  transform: rotateY(0deg);
  visibility: visible;
  opacity: 1;
}

.card100:hover .card100-back-content {
  animation: translate 1s ease-in-out;
}

.card100-front {
  transition: all 500ms ease-in-out;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(51, 51, 51, 0.1), 0 0 10px rgba(51, 51, 51, 0.1);
  overflow: hidden;
  height: 100%;
  background-color: #eee;
}

.card100-back {
  position: absolute;
  height: 100%;
  padding: 20px;
  background: #eee;
  transform: rotateY(180deg);
  transition: all 500ms ease-in-out;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(51, 51, 51, 0.1), 0 0 10px rgba(51, 51, 51, 0.1);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
}

.card100-back-content {
  display: flex;
  flex-direction: column;
  height: inherit;
  justify-content: space-between;
  gap: 12px;
}

.button100 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  background: hsl(222, 66%, 50%);
  padding: 16px;
  transition: all 300ms ease-in-out;
  border-radius: 8px;
}

.button100:hover,
.button100:focus {
  background: hsl(222, 66%, 45%);
}

.button100:active {
  background: hsl(222, 66%, 40%);
}

@keyframes translate {
  0% {
    transform: translateX(-12px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  .cards100-wrapper {
    grid-template-columns: auto;
    width: auto;
  }
}

.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  left: 20px;
  background-color: rgba(2, 1, 1, 0.5);
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

.news-section {
  padding: 4em 0 3.5em;
}

.news-column h4 {
  font-size: 1.3em;
  text-transform: uppercase;
  color: #000;
  font-weight: 700;
  padding: 0.8em 0 0.3em;
  margin: 0;
}

.news-column p {
  color: #777;
  line-height: 1.7em;
  padding: 0.1em 0 0em;
  display: block;
  font-size: 1em;
}

.news-column:hover {
  background-color: rgb(66, 85, 173);
}

.text-block2:hover {
  background-color: transparent;
  /*background-color: rgb(18, 134, 230);*/
}

.text-block2:hover {
  background-color: black;
  /*background-color: rgb(18, 134, 230);*/
}
/*--*/

.center2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  left: 20px;
  background-color: rgba(2, 1, 1, 0.5);
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

.bline {
  border-bottom: 5px solid;
  border-bottom-color: #ffbc02ea;
}

.b2line {
  border-bottom: 2px solid;
  border-bottom-color: #ffbc02ea;
}

/*-----gallery
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}
*/
div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.button60 {
  color: white;
  font-size: 12px;
  text-align: right;
  padding: 10px 18px;
  text-decoration: none;
  background-color: #116df7;
}

.text-block1 {
  position: absolute;
  bottom: 0px;
  right: 40px;
  left: 0px;
  background-color: white;
  color: BLACK;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
}

.text-block2 {
  position: absolute;
  bottom: 0px;
  right: 10px;
  left: 10px;
  background-color: rgba(2, 1, 1, 0.5);
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
}

.card-item1 {
  width: 100%;

  position: relative;
  border-radius: 8px;
  background: #fffcd5;
  padding-bottom: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 20px 40px rgba(87, 84, 84, 0.328);
}


.card-item3 {
  width: 100%;

  position: relative;
  border-radius: 8px;
  background: #fffcd5;
  padding-bottom: 2rem;
  padding-top: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 20px 40px rgba(87, 84, 84, 0.328);
}

.card-item2 {
  width: 100%;
  color: white;
  position: relative;
  border-radius: 8px;
  background: rgba(80, 139, 66, 1);
  padding-bottom: 2rem;
  transition: all 0.3s ease;
  box-shadow: 0 20px 40px rgba(87, 84, 84, 0.328);
}

.card-item12:hover {
  background-color: rgba(16, 14, 14, 0.5);
  /*transform: rotate(1deg);*/
  box-shadow: 0 20px 40px rgba(16, 14, 14, 0.5);
}

.img-car {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
}

#adco1 .boxe {
  padding: 10px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: 0 10px 10px 10px;
  background: #f1b209;
  box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
  transition: all 0.3s ease-in-out;
  text-align: center;
  background-image: url(/images/acad.jpg);
}
/* 
.container12 ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
padding:20px;
}

.container12 ul .category {
  list-style: none;
  padding: 8px 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  background: rgba(1, 57, 137, 1);
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.container12 ul .category.active {
  background: #f1b209;
  color: black;
}

.container12 .gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
}

.container12 .gallery .image {
  width: 340px;
  height: 200px;
  overflow: hidden;
  margin: 5px;
  border: 5px solid white;
}

.container12 .gallery .image:hover img {
  transform: scale(1.2);
}

.container12 .gallery .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
} */

.titfon {
  font-family: "Varela Round";
  font-weight: 400;
  color: #089714;
  text-align: center;

  font-weight: 500;
}

.titfonL {
  font-family: "Varela Round";
  font-weight: 400;
  color: #ffffff;
  text-align: left;

  font-weight: 500;
}

.titfonC {
  font-family: "Varela Round";
  font-weight: 400;
  color: #ffffff;
  text-align: center;

  font-weight: 500;
}

.titfon1 {
  font-family: "roboto";
  font-weight: 400;
  color: #089714;
  text-align: center;

  font-weight: 500;
}

.titfon2 {
  font-family: "roboto";
  font-weight: 400;
  color: #089714;

  font-weight: 500;
}

/* Increase font sizes by 1.5x on bigger screens 
@media (min-width: 48rem) {
  .titfon {
    font-size: 3em;
  }
}*/

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px 
@media screen and (min-width: 601px) {
  titfon {
    font-size: 80px;
  }
}*/

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px 
@media screen and (max-width: 600px) {
  titfon {
    font-size: 30px;
  }
}
*/

.container20 {
  position: relative;
}

.image20 {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.middle20 {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container20:hover .image {
  opacity: 0.3;
}

.container20:hover .middle {
  opacity: 1;
}

.text {
  background-color: #04aa6d;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

/* Zoom In #1 */
.hover01 figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover01 figure:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

/* Zoom In #2 */
.hover02 figure img {
  width: 300px;
  height: auto;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover02 figure:hover img {
  width: 350px;
}

/* Zoom Out #1 */
.hover03 figure img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover03 figure:hover img {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* Zoom Out #2 */
.hover04 figure img {
  width: 400px;
  height: auto;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover04 figure:hover img {
  width: 300px;
}

/* Slide */
.hover05 figure img {
  margin-left: 30px;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover05 figure:hover img {
  margin-left: 0;
}

/* Rotate */
.hover06 figure img {
  -webkit-transform: rotate(15deg) scale(1.4);
  transform: rotate(15deg) scale(1.4);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover06 figure:hover img {
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}

/* Blur */
.hover07 figure img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover07 figure:hover img {
  -webkit-filter: blur(0);
  filter: blur(0);
}

/* Gray Scale */
.hover08 figure img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover08 figure:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* Sepia */
.hover09 figure img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover09 figure:hover img {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

/* Blur + Gray Scale */
.hover10 figure img {
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover10 figure:hover img {
  -webkit-filter: grayscale(100%) blur(3px);
  filter: grayscale(100%) blur(3px);
}

/* Opacity #1 */
.hover11 figure img {
  opacity: 1;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover11 figure:hover img {
  opacity: 0.5;
}

/* Opacity #2 */
.hover12 figure {
  background: #1abc9c;
}
.hover12 figure img {
  opacity: 1;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hover12 figure:hover img {
  opacity: 0.5;
}

/* Flashing */
.hover13 figure:hover img {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}
@-webkit-keyframes flash {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

/* Shine */
.hover14 figure {
  position: relative;
}
.hover14 figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.hover14 figure:hover::before {
  -webkit-animation: shine 0.75s;
  animation: shine 0.75s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

/* Circle */
.hover15 figure {
  position: relative;
}
.hover15 figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: "";
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.hover15 figure:hover::before {
  -webkit-animation: circle 0.75s;
  animation: circle 0.75s;
}
@-webkit-keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
@keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

.varela-round-regular {
  font-family: "Varela Round", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/*----*/
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.cabin-<uniquifier > {
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.tangerine-regular {
  font-family: "Tangerine", cursive;
  font-weight: 400;
  font-style: normal;
}

.tangerine-bold {
  font-family: "Tangerine", cursive;
  font-weight: 700;
  font-style: normal;
}

.courgette-regular {
  font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
}

.allura-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
}

.comtext {
  font-family: "assistant, arial, Helvetica, sans-serif";
  font-weight: normal;
  line-height: 1.5em;
}

.comtit {
  font-family: "Merriweather", serif;
  font-size: 2.4rem;
  letter-spacing: 0.5px;
  text-align: center;
  font-weight: bold;
}

.merriweather-light {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-black {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: normal;
}

.merriweather-light-italic {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: italic;
}

.merriweather-regular-italic {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}

.merriweather-black-italic {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: italic;
}

.centerimage {
  display: flex;
  align-items: center;
}

/* -----start--*/

.container12 {
  position: normal;
  padding:15px;
}

.image113 {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.middle1 {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container12:hover .image1 {
  opacity: 0.5;
}

.container12:hover .middle1 {
  opacity: 1;
}

.text {
  background-color: #156f03;
  color: white;
  font-size: 16px;
  padding: 10px 10px;
}

/*--carousal slide --*/
/* hide mobile version by default */
.logov .mobile {
  display: none;
}
/* when screen is less than 600px wide
     show mobile version and hide desktop */
@media (max-width: 991px) {
  .logov .mobile {
    display: inline-block;
  }

  .logov .desktop {
    display: none;
  }
}

.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/*---Gallery New--
body {
  background: #eee;
}*/

.galleryh {
  --size: min(60vmin, 400px);

  top: 50%;
  left: 50%;

  width: 100%;
  height: var(--size);
  background: #fff;
  border: 6px solid #fff;
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 1fr;

  overflow: hidden;
  gap: 6px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

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

@keyframes moveHorizontal {
  to {
    object-position: 100% 0;
  }
}

@keyframes moveVertical {
  to {
    object-position: 0 100%;
  }
}

@keyframes shrinkVertical {
  to {
    height: 0;
  }
}

@keyframes shrinkHorizontal {
  to {
    width: 0;
  }
}

@keyframes growHorizontal {
  to {
    width: 100%;
  }
}
@keyframes growHorizontal2 {
  to {
    width: 70%;
  }
}

@keyframes growVertical {
  to {
    height: 100%;
  }
}

@keyframes growHorizontal2 {
  to {
    width: 70%;
  }
}

@keyframes growAll {
  to {
    width: 100%;
    height: 100%;
  }
}

.galleryh img:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  animation: moveHorizontal 8.5s 0.5s 1, shrinkHorizontal 2s 9s ease-in 1;
  animation-fill-mode: forwards;
}

.galleryh img:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  animation: shrinkHorizontal 2s 11s 1;
  animation-fill-mode: forwards;
}

.galleryh img:nth-child(3) {
  grid-row: 2;
  grid-column: 1 / 3;
  align-self: end;
  object-position: 0 0;
  animation: moveVertical 5s 1s 1, shrinkVertical 3s 5s 1;
  animation-fill-mode: forwards;
}

.galleryh img:nth-child(4) {
  grid-column: 1 / 3;
  grid-row: 1;
  width: 0;
  justify-self: center;
  align-self: start;
  animation: growHorizontal 2.25s 11s 1, moveHorizontal 4s 14s 1,
    shrinkVertical 2s 18s 1;
  animation-fill-mode: forwards;
}

.galleryh img:nth-child(5) {
  grid-column: 1;
  grid-row: 2;
  width: 0;
  justify-self: start;
  align-self: end;
  animation: growHorizontal 2.5s 7.5s 1, moveVertical 4s 12.5s 1,
    shrinkHorizontal 2s 17s 1;
  animation-fill-mode: forwards;
}

.galleryh img:nth-child(6) {
  grid-column: 2;
  grid-row: 2;
  width: 0;
  justify-self: end;
  align-self: end;
  animation: growHorizontal 2s 8s 1, shrinkHorizontal 2s 17s 1;
  animation-fill-mode: forwards;
}

.galleryh img:nth-child(7) {
  grid-column: 1/3;
  grid-row: 1/3;
  width: 0;
  justify-self: end;
  align-self: end;
  object-position: 0 0;
  animation: growHorizontal 2s 20s 1, moveHorizontal 16s 21.5s 1;
  animation-fill-mode: forwards;
}
/*-----*/

/* img tags */

.imagesContainer1 {
  width: 800px;
  height: 400px;

  position: relative;
  overflow: hidden;
  object-fit: cover;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

.imagesContainer {
  width: 500px;
  height: auto;
  position: relative;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

.imagesContainer1 img {
  position: absolute;
}

/*---*/
.containerss {
  position: relative;
  width: 500px;
  max-width: 100%;
  height: 400px;
}

.imagen {
  border-radius: 0.5rem;
  position: absolute;
  width: 100%;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation: change-img-anim 20s infinite;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

.imagen:nth-of-type(1) {
  animation-delay: 0s;
}
.imagen:nth-of-type(2) {
  animation-delay: 10s;
}
.imagen:nth-of-type(3) {
  animation-delay: 20s;
}

.imagen:nth-of-type(4) {
  animation-delay: 20s;
}

@keyframes change-img-anim {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.bg210 {
  background-image:url('assets/images/2024/fou.jpg');
  width:100%;
  height:auto;
}

/* Animation properties */
.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}
.byline span1 {
  animation: spin-letters 10s linear infinite;
}
.byline {
  animation: move-byline 10s linear infinite;
}

/* Keyframes */
@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes wars {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(0.5em);
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes spin-letters {
  0%,
  10% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  30% {
    opacity: 1;
  }
  70%,
  86% {
    transform: rotateY(0);
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

@keyframes move-byline {
  0% {
    transform: translateZ(5em);
  }
  100% {
    transform: translateZ(0);
  }
}

.vertical-center {
  position: absolute;
  top: 50%;
}

.mbr-overlay {
  background-color: #000;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}

.boxm {
  border: 1px solid #12232E;
  background-color: #EEFBFB:

  height: 100%;
  object-fit: cover;

}

/* Green */
.success {
  border-color: #04AA6D;
  color: green;
}


.button24:hover {
  background-color: #04AA6D;
    color: rgb(245, 253, 245);

}

.example1 {
  box-sizing: content-box;  
  width: 100x;
  height: auto;
  padding: 15px;  
  border: 2px solid green;
  border-radius: 10px;
   box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}

.holder { 
  background-color:#ffffff;
 width: 100x;
  height: 350px;;
  overflow:hidden;
  padding:5px;
  font-family:Helvetica;
}

.holder .mask {
  position: relative;
  left: 0px;
  top: 10px;
 
  height:350px;
  overflow: hidden;
}

.holder ul {
  list-style:none;
  margin:0;
  padding:0;
  position: relative;
}
.holder ul li {
  padding:5px 0px;
}
.holder ul li a {
  color:rgb(0, 0, 0);
  text-decoration:none;
}


.bbsha
{box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;}

.texttitle
{
text-transform: uppercase;
 font-family: "Roboto", sans-serif;
font-weight: strong;
}

.textfont{

  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.titfon101{
 font-family: "Roboto", sans-serif;
vertical-align: middle;
color: #e5f5e6;
  text-align: center;
  font-weight: 900;
  font-style: large;
    text-align: center;
}

.roboto-block {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

 .testimonialText {



  
font-family: "Roboto", sans-serif; 
 color: green;


  vertical-align: middle;
  
  transform:translate(0,10%);
    
    font-style: bold;
      font-size: 4vw;
  animation: 4s ease-out scale alternate infinite;

} 

.londrina-outline-regular {
  font-family: "Londrina Outline", sans-serif;
  font-weight: 400;
  font-style: bold;
}

.centerd {
  border: 5px solid;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  padding: 10px;
}

/*-----*/
.whity{
  color: white;
}

.image-red {
 border: 2px solid;
 

border-color: #ffff;
  padding: 0px;
}

/*---cars--*/

    .carouselrs {
      margin: 0 auto;
      padding: 20px 0;
      max-width: 100%;
      overflow: hidden;
      display: flex;
    }
  
    .cardrs {
      width: 100%;
      color: white;
      border-radius: 10px;
      box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
 padding: 10px;
      font-size: xx-large;
      justify-content: center;
      align-items: center;
      min-height: auto; 
  /* 
      &:nth-child(1) {
        background: #7958ff;
      }
  
      &:nth-child(2) {
        background: #5d34f2;
      }
  
      &:nth-child(3) {
        background: #4300da;
      }  */
    }
    .carouselrs {
    /* ... */
    >* {
      flex: 0 0 100%;
    }
  }

  /* Group the cards for better structure. */
  .grouprs {
    display: flex;
    gap: 20px;
    /* Add padding to the right to create a gap between the last and first card. */
    padding-right: 20px;
  }

  .grouprs {
    /* ... */
    will-change: transform; /* We should be nice to the browser - let it know what we're going to animate. */
    animation: scrolling 15s linear infinite;
  }

  @keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  .carouselrs {
    /* ... */
    &:hover .grouprs {
      animation-play-state: paused;
    }
  }

  .pb-50{
    padding-bottom: 50px;
  }

  /* Style all font awesome icons */
.fa {
  padding: 5px;
  font-size: 15px;
 border-radius: 20%;
  text-align: center;
  text-decoration: none;

}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-instagram {

  background: linear-gradient(
    to bottom,
   /*  #833ab4,#fd1d1d,#fcb045 */
     #833ab4,#fd1d1d,#fcb045
  );
    color: white;
}

.fa-youtube {
  background: red;
  color: white;
}

.fa-linkedin {
  background: #0a66c2;
  color: white;
}

#blink_text{	
  animation-name:blink;
  width:280px;
  animation-duration:2s;
  animation-timing-function:ease-in;
  animation-iteration-count:Infinite;
  }

@keyframes blink{
  0%{color:red;}
  50%{color:white;}
  100%{color:red;}