* {
  margin: 0;
  padding: 0;
}
body {
    /* background: #282931; */
    /* -webkit-font-smoothing: antialiased; */
    font-family: 'Varela Round', sans-serif;
    height: 100%;
    background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
}

/* Header */
header {
	background-color: white;
	color: rgb(0, 0, 0);
	padding: 10px 0;
	position: fixed;
	width: 100%;
	z-index: 100;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 5px auto;
	padding: 0 20px;
}

.logo {
	font-size: 1.5rem;
	font-weight: bold;
	color: #40b736;
}

.nav-links {
	list-style: none;
	display: flex;
}

.nav-links li {
	margin-right: 20px;
}

.nav-links a {
	color: rgb(0, 0, 0);
	padding: 10px;
	font-weight: bold;
	text-decoration: none;
}

.nav-links a:hover {
	background-color: #40b736;
	border-radius: 4px;
	color: white;
}

/* the end of the header */


/* THE FOOTER SECTION  */
footer {
	background-color: #555;
	color: white;
	margin-top: 5%;
	text-decoration: none;
	background-image: url("../images/footer-gif.gif");
	background-size: cover;
}

footer form {
	display: flex;
	flex-direction: column;
}

footer h1, h2 {
	text-align: right;
}

footer form input {
	width: 500px;
	height: 30px;
	border-radius: 10%;
	background: white;
	color: blue;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin-bottom: 5%;
	padding-left: 5%;
}

.up-footer {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	margin-top: 0;
	padding-top: 0;
}

@media (max-width: 950px){
	.up-footer{
	  display:flex;
	  flex-direction: column-reverse;
	}
  
	.footer-right {
		display:flex;
		flex-direction: column-reverse;
	}

	.footer-left {
		display:flex;
		flex-direction: column-reverse;
	}
  
}


.footer-right {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 20px;
	flex-direction: column;
}

.footer-right ul{
  display: flex;
  flex-direction: column;
  padding: 10px;
  text-decoration: none;
}

.footer-right ul li{
	display: flex;
	flex-direction: column;
	padding: 10px;
	text-decoration: none;
}



.footer-right h1 {
	border-bottom: 7px solid blue;
}

.footer-right a {
	border: 1px solid aqua;
	border-radius: 50%;
	background-color: #40b736;
	color: white;
	width: 400px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 12.6%;
	padding-right: 0;
	text-decoration: none;
}

.footer-left {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	margin-top: 0;
	padding-top: 0;
	padding-left: 5px;
}

.footer-left h1 {
	border-bottom: 7px solid blue;
}

.footer-left img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin-bottom: 5%;
	background-size: cover;
}

.footer-left h1{
	padding-top: 5%;
}

.footer-left ul{
	display: flex;
	flex-direction: column;
	padding: 10px;
	text-decoration: none;
}

.footer-left ul li{
	display: flex;
	flex-direction: column;
	padding: 10px;
	text-decoration: none;
}

.footer-left ul li a{
	color: white;
}

.footer-left ul li a:hover{
	text-decoration: none;
	color: rgb(16, 246, 16);
}

.footer-below {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.footer-below ul {
	/* margin-bottom: 20px; */
	padding-bottom: 20px;
	text-decoration: none;
	display: flex;
    flex-direction: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: white;
	gap: 10px;
}

.footer-below ul li {
	text-decoration: none;
	display: flex;
    flex-direction: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: white;
	gap: 10px;
}

.footer-below ul li a{
	text-decoration: none;
	color: rgb(12, 252, 68);
}

.footer-below ul li a:hover{
	text-decoration: none;
	color: rgb(230, 17, 230);
}

.footer-below img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding: 2%;
}

.footer-below img:hover {
	transition: ease-in-out 5s;
}

/* the end of footer */


.social-icon,
.menu {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}

.social-icon__item,
.menu__item {
  list-style: none;
}

.social-icon__link {
  font-size: 2rem;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
}

.social-icon__link:hover {
  transform: translateY(-10px);
}

.menu__link {
  font-size: 1.2rem;
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
  font-weight: 300;
}

.menu__link:hover {
  opacity: 1;
}

.footer p {
  color: #fff;
  margin: 15px 0 10px 0;
  font-size: 1rem;
  font-weight: 300;
}


footer {
  margin-top: 20%;
  margin-left: 0%;
  margin-right: 0%;
}


.footer {
  z-index: 1;
  --footer-background: #3586ff;
  display: grid;
  position: relative;
  grid-area: footer;
  min-height: 12rem;
  margin-left: 0%;
}


.footer .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1rem;
  background: var(--footer-background);
  filter: url("#blob");
}

.footer .bubbles .bubble {
  position: absolute;
  left: var(--position, 10%);
  background: var(--footer-background);
  border-radius: 100%;
  -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
          animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  transform: translate(-50%, 100%);
  margin-left: 0%;
}

.footer .content {
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 4rem;
  padding: 2rem;
  background: var(--footer-background);
}

.footer .content a, body .footer .content p {
  color: #F5F7FA;
  text-decoration: none;
}

.footer .content b {
  color: white;
}

.footer .content p {
  margin: 0;
  font-size: 0.75rem;
}

.footer .content > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer .content > div > div {
  margin: 0.25rem 0;
}

.footer .content > div > div > * {
  margin-right: 0.5rem;
}

.footer .content > div .image {
  align-self: center;
  width: 4rem;
  height: 4rem;
  margin: 0.25rem 0;
  background-size: cover;
  background-position: center;
}

@-webkit-keyframes bubble-size {
  0%, 75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }

  100% {
    width: 0rem;
    height: 0rem;
  }
}

@keyframes bubble-size {
  0%, 75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }

  100% {
    width: 0rem;
    height: 0rem;
  }
}

@-webkit-keyframes bubble-move {
  0% {
    bottom: -4rem;
  }

  100% {
    bottom: var(--distance, 10rem);
  }
}

@keyframes bubble-move {
  0% {
    bottom: -4rem;
  }

  100% {
    bottom: var(--distance, 10rem);
  }
}

/* THE END OF FOOTER */

/* BELOW SECTION */

h1 {
line-height: 72px;
margin: 24px 0;
line-height: 1.0;
color:white;

}
 

.boxed1 h1 {
    line-height: 1.0;
    color: white;
    max-width: 100%;
    max-height: 100%;
}

.boxed1 p {
    max-width: 100%;
    max-height: 100%;
}

p {
line-height: 24px;
margin: 24px 0;
color: white;
}

.blogpost-page-p p{
    font-size: 25px;
    color: white;
    margin-top: 5%; 
    margin-bottom: 5%; 
    margin-left: 10%; 
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
}

/* a {
color: #bbbbc4;
text-decoration: none;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
cursor:pointer;
border-bottom:1px groove #fc3565;
}

a:hover {
color: #fc3565;
}
   */

.containers {
    margin-top: 1%;
	margin-bottom: 10%;
    width: 100%;
    height: auto;
    background: none;
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    flex-flow: wrap;
}

/* Styling for the button */
.cool-button {
    width: 200px;
    display: inline-block;
    padding: 10px;
    align-items: center;
    justify-content: center;
    background-color: #d30e4c;
    color: white;
    font-size: 12px;
    border: none;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Hover effect */
.cool-button:hover {
    background-color: lightgreen;
    margin-bottom: 10%;
}

/* Hover effect */
/* .cool-button button:on-click {
    background-color: #10cd0c;
} */



.boxed1{
    width: 500px;
    height: 500px;
    background: linear-gradient(50deg,  #ff007f,  #cc00aa);
    margin: 20px;
    box-sizing: border-box;
    color: white;
    flex-flow: wrap;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
	animation-name: content-anime1;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}

.boxed2{
    width: 500px;
    height: 500px;
    background: linear-gradient(50deg,  #ff007f,  #cc00aa);
    margin: 20px;
    box-sizing: border-box;
    color: white;
    flex-flow: wrap;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
	animation-name: content-anime2;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}

.boxed3{
    width: 500px;
    height: 500px;
    background: linear-gradient(50deg,  #ff007f,  #cc00aa);
    margin: 20px;
    box-sizing: border-box;
    color: white;
    flex-flow: wrap;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
	animation-name: content-anime1;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}

.boxed4{
    width: 500px;
    height: 500px;
    background: linear-gradient(50deg,  #ff007f,  #cc00aa);
    margin: 20px;
    box-sizing: border-box;
    color: white;
    flex-flow: wrap;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
	animation-name: content-anime1;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}

.boxed5{
    width: 500px;
    height: 500px;
    background: linear-gradient(50deg,  #ff007f,  #cc00aa);
    margin: 20px;
    box-sizing: border-box;
    color: white;
    flex-flow: wrap;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
	animation-name: content-anime2;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}

.boxed6{
    width: 500px;
    height: 500px;
    background: linear-gradient(50deg,  #ff007f,  #cc00aa);
    margin: 20px;
    box-sizing: border-box;
    color: white;
    flex-flow: wrap;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    align-items: center;
	animation-name: content-anime1;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}



@keyframes content-anime1 {
     0%{left: -1000px;}
	 100%{left: 0;}
}

@keyframes content-anime2 {
     0%{right: -1000px;}
	 100%{right: 0;}
}




.boxed1:hover {
    transform: translateY(-20px) scale(1.1);
	background-image: none;
    box-shadow: 20px 20px 10px #ff007f;
	padding: 0.5%;
    margin-bottom: 5%;
	border: 0.1cm solid aqua;
    border-radius: 4cm;
    border-right: 4cm;
    border-top-left-radius: 0.8cm;
    border-top-right-radius: 0.8cm;
    border-bottom-left-radius: 0.8cm;
    border-bottom-right-radius: 0.8cm;
}

.boxed2:hover {
    transform: translateY(-20px) scale(1.1);
	background-image: none;
    box-shadow: 20px 20px 10px #ff007f; /*rgba(0, 0, 0, 1);*/
    padding: 0.5%;
    margin-bottom: 5%;
	border: 0.1cm solid aqua;
    border-radius: 4cm;
    border-right: 4cm;
    border-top-left-radius: 0.8cm;
    border-top-right-radius: 0.8cm;
    border-bottom-left-radius: 0.8cm;
    border-bottom-right-radius: 0.8cm;
}

.boxed3:hover {
    transform: translateY(-20px) scale(1.1);
	background-image: none;
    box-shadow: 20px 20px 10px #ff007f;
    padding: 0.5%;
    margin-bottom: 5%;
	border: 0.1cm solid aqua;
    border-radius: 4cm;
    border-right: 4cm;
    border-top-left-radius: 0.8cm;
    border-top-right-radius: 0.8cm;
    border-bottom-left-radius: 0.8cm;
    border-bottom-right-radius: 0.8cm;
}


.boxed4:hover {
    transform: translateY(-20px) scale(1.1);
	background-image: none;
    box-shadow: 20px 20px 10px #ff007f;
	padding: 0.5%;
    margin-bottom: 5%;
	border: 0.1cm solid aqua;
    border-radius: 4cm;
    border-right: 4cm;
    border-top-left-radius: 0.8cm;
    border-top-right-radius: 0.8cm;
    border-bottom-left-radius: 0.8cm;
    border-bottom-right-radius: 0.8cm;
}

.boxed5:hover {
    transform: translateY(-20px) scale(1.1);
	background-image: none;
    box-shadow: 20px 20px 10px #ff007f; /*rgba(0, 0, 0, 1);*/
    padding: 0.5%;
    margin-bottom: 5%;
	border: 0.1cm solid aqua;
    border-radius: 4cm;
    border-right: 4cm;
    border-top-left-radius: 0.8cm;
    border-top-right-radius: 0.8cm;
    border-bottom-left-radius: 0.8cm;
    border-bottom-right-radius: 0.8cm;
}

.boxed6:hover {
    transform: translateY(-20px) scale(1.1);
	background-image: none;
    box-shadow: 20px 20px 10px #ff007f;
    padding: 0.5%;
    margin-bottom: 5%;
	border: 0.1cm solid aqua;
    border-radius: 4cm;
    border-right: 4cm;
    border-top-left-radius: 0.8cm;
    border-top-right-radius: 0.8cm;
    border-bottom-left-radius: 0.8cm;
    border-bottom-right-radius: 0.8cm;
}

  #s1:checked ~ #slide4, #s2:checked ~ #slide5,
  #s3:checked ~ #slide1, #s4:checked ~ #slide2,
  #s5:checked ~ #slide3 {
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
    transform: translate3d(-30%,0,-200px);
  }
  
  #s1:checked ~ #slide5, #s2:checked ~ #slide1,
  #s3:checked ~ #slide2, #s4:checked ~ #slide3,
  #s5:checked ~ #slide4 {
    box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
    transform: translate3d(-15%,0,-100px);
  }
  
  #s1:checked ~ #slide1, #s2:checked ~ #slide2,
  #s3:checked ~ #slide3, #s4:checked ~ #slide4,
  #s5:checked ~ #slide5 {
    box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
    transform: translate3d(0,0,0);
  }
  
  #s1:checked ~ #slide2, #s2:checked ~ #slide3,
  #s3:checked ~ #slide4, #s4:checked ~ #slide5,
  #s5:checked ~ #slide1 {
    box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
    transform: translate3d(15%,0,-100px);
  }
  
  #s1:checked ~ #slide3, #s2:checked ~ #slide4,
  #s3:checked ~ #slide5, #s4:checked ~ #slide1,
  #s5:checked ~ #slide2 {
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
    transform: translate3d(30%,0,-200px);
  }
  
  #slide1 { background-image: url("IMAGES/SLIDES/image1.jpg");
            background-size: cover;}
  #slide2 { background-image: url("IMAGES/SLIDES/image2.png");
            background-size: cover;}
  #slide3 { background-image: url("IMAGES/SLIDES/image3.jpg");
            background-size: cover;}
  #slide4 { background-image: url("IMAGES/SLIDES/fb1.png");
            background-size: cover; }
  #slide5 { background-image: url("IMAGES/SLIDES/fb3.png");
            background-size: cover; }
  
  .services-p::before,
  .services-p::after {
      content: "";
      position:absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  
  .services-p::before {
      text-transform: lowercase;
      background: aqua;
      animation: typewriter 3s steps(23) forwards;
  }
  
  @keyframes typewriter {
      to{
          left: 100%;
          height: 100%;
      }
  }
  
  .box {
      margin-top: 10%;
      margin-left: 40%;
      margin-right: 30%;
      position: relative;
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
      animation: animate 20s linear infinite;
  }
  
  @keyframes animate {
      0% {
          transform: perspective(1000px) rotateY(0deg);
      }
      100% {
          transform: perspective(1000px) rotateY(360deg);
      }
  }
  
  .box span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: center;
      transform-style: preserve-3d;
      transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
      -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0004);
  }
  
  .box span img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      padding:0%;
  }
  


/* THE SUBSCRIBE SECTION */
.subscribe-form {
    border-radius: 1px solid grey;
    border-radius: 10%;
    background: rgb(17, 248, 9);
    width: 80%;
    height: auto;
    margin: 10%;
    padding: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.subscribe-form h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 1px;
}

.subscribe-form p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.subscribe-form input {
    width: 200px;
}


/* THE CONTACT SECTION  */
#top-contact {
    text-align: center;
    justify-content: center;
    align-items: center;
}

#top-contact h1 {
    font-family: Arial Black;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#top-contact p {
    font-family: Arial;
    font-size: 15px;
}

.cont-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* THE CONTACT SECTION  */
#contact {
    display: flex;
    flex-wrap: wrap;
}


.contact {
    display: flex;
}

.contact-card {
 width: 20px;
 height: 30px;
 z-index: -2;
}

.contact-card {
    display: flex;
    width: auto;
    border: 1px solid blue;
    border-radius: 30px;
    padding: 20px;
    backdrop-filter: blur(50px); /* Adjust the blur strength as needed */
    z-index: 2;
}


/* THE TABLET SIZING */
@media (max-width: 800px) {
    .contact-card {
      display: flex;
      flex-direction: column;
   }

   .contact-contaner{
       width: 200px;
   }
}


.timer {
    font-size: 1.5rem;
    color: red;
    font-size: 40px;
}

.contact-left p{
font-size: 15px;
}

cursor {
color: white;
}


.contact-container input {
color: white;
}

.contact-form {
    border-radius: 1px solid grey;
    border-radius: 10%;
    background: rgb(17, 248, 9);
    width: 80%;
    height: auto;
    margin: 10%;
    padding: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Styling for the button */
.cool-button {
    width: 300px;
    display: inline-block;
    padding: 10px;
    align-items: center;
    justify-content: center;
    background-color: #d30e4c;
    color: white;
    font-size: 12px;
    border: none;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

input, select {
    width: 100%;
    margin-top: 1.5%;
    background: transparent;
    border: none;
    border-bottom: 2px solid blue;
    font-size: 1.2em;
    color: blue;
    background-color: whitesmoke;
}

#dropdown {
border: 2px solid blue;
}

[type="checkbox"],
    [type="radio"] {
            width: auto;
    }

fieldset {
border-color: blue;
border-style: solid;
}

.contact-container {
    border-radius: 30px;
    margin: 2% 5% 2% 5%;
    padding: 1% 2% 1% 2%;
    background-color: lightgray;
    border-color: blue;
    border-style: dashed;
    width: fit-content;
    color: white;
}

/*
#contact {
    align-items: center;
    display: flex;
} */

/* THE SUBSCRIBE SECTION */
.subscribe-form {
    border-radius: 1px solid grey;
    border-radius: 10%;
    background: rgb(17, 248, 9);
    width: 80%;
    height: auto;
    margin: 10%;
    padding: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.subscribe-form h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 1px;
}

.subscribe-form p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.contact-info {
    text-align: center;
    margin-top: auto;
}

.subscribe-form input {
    width: 200px;
}

/* THE TABLET AND MOBILE SIZING SETTINGS  */

/* THE TABLET SIZING */
@media (max-width: 952px) {
    .bxes{
        width: 40%;}
    .boxed1 {margin-bottom: 10%;}
    .boxed2 {margin-bottom: 10%;}
    .boxed3 {margin-bottom: 10%;}
    .boxed4 {margin-bottom: 10%;}
    .boxed5 {margin-bottom: 10%;}
    .boxed6 {margin-bottom: 10%;}
}

/* THE MOBILE SIZING */
@media (max-width: 800px) {
    .bxes{
        width: 90%;}

    .boxed1 {margin-bottom: 10%;}
    .boxed2 {margin-bottom: 10%;}
    .boxed3 {margin-bottom: 10%;}
    .boxed4 {margin-bottom: 10%;}
    .boxed5 {margin-bottom: 10%;}
    .boxed6 {margin-bottom: 10%;}

}



.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1200px;
  margin-block: 2rem;
  gap: 2rem;
}

img {
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.card {
  display: flex;
  flex-direction: column;
  width: clamp(20rem, calc(20rem + 2vw), 22rem);
  overflow: hidden;
  box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
  border-radius: 1em;
  background: #ECE9E6;
background: linear-gradient(to right, #FFFFFF, #ECE9E6);

}



.card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}


.tag {
  align-self: flex-start;
  padding: .25em .75em;
  border-radius: 1em;
  font-size: .75rem;
}

.tag + .tag {
  margin-left: .5em;
}

.tag-blue {
  background: #56CCF2;
background: linear-gradient(to bottom, #2F80ED, #56CCF2);
  color: #fafafa;
}

.tag-brown {
  background: #D1913C;
background: linear-gradient(to bottom, #FFD194, #D1913C);
  color: #fafafa;
}

.tag-red {
  background: #cb2d3e;
background: linear-gradient(to bottom, #ef473a, #cb2d3e);
  color: #fafafa;
}

.card__body h4 {
  font-size: 1.5rem;
  text-transform: capitalize;
}

.card__footer {
  display: flex;
  padding: 1rem;
  margin-top: auto;
}

.user {
  display: flex;
  gap: .5rem;
}

.user__image {
  border-radius: 50%;
}

.user__info > small {
  color: #666;
}