@charset "utf-8";
/* CSS Document */

@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");




body {
  --bgColor: rgba(245, 245, 245);
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 2rem;
  color: var(--color);
  font-family: 'Lato', 'Arial', sans-serif;
}

h1 {
  text-align: center;
}

.service {
  width: min(60rem, 90%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  justify-content: center;
  gap: 2rem;
  list-style: none;
}

.service li {
  max-width: 12rem;
  justify-self: center;
  display: grid;
  grid-template:
    "icon"
    "line"
    "dot"
    "title"
    "descr" 1fr;
  justify-items: center;
  align-items: flex-start;
  text-align: center;
}

.service li .icon {
  grid-area: icon;
  width: 6rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: white;
  font-size: 2.5rem;
  border: 0.4rem solid var(--bgColor);
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: -0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.45),
    inset -0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.45);
}

.service li::before {
  content: "";
  grid-area: line;
  height: 2rem;
  border-right: 2px dotted currentColor;
}

.service li::after {
  content: "";
  grid-area: dot;
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent-color);
  justify-self: center;
  margin-bottom: 0.5rem;
}

.service li .title {
  grid-area: title;
  margin-block: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
}


 
  
  

 .icon {
    position: relative;
    transition: all 0.3s;
  }
  
  .icon:hover {
    transform: translateY(25px);
  }
  
  .icon img {
    max-width: 100%;
    border-radius: 50%;
    filter: drop-shadow(-20px 0 10px rgba(0, 0, 0, 0.1));
    cursor: pointer;
  }

  .icon:not(:first-child) img {
    margin-left: -20px;
  }
  
  .icon .name {
    position: absolute;
    background-color: #10996d;
    color: #fff;
    font-family: "Bebas Neue", cursive;
    padding: 15px 30px;
    border-radius: 100px;
    bottom: -80px; left: 50%;
    white-space: nowrap;
    transform: translate(-50%, -50px);
    letter-spacing: 1px;
    font-size: 20px;
    opacity: 0;
    transition: all 0.3s;
  }
  
  .icon .name::before {
    content: "";
    position: absolute;
    width: 15px; height: 15px;
    background-color: #10996d;
    top: 0; left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  .icon img:hover + .name {
    opacity: 1;
    transform: translateX(-50%);
    box-shadow: 0 10px 20px rgba(86, 86, 198, 0.3);
  }


.icon:hover + div + div {
	opacity: 100%;
	height: 230px;
}

.descr-point {
	margin: 4px 0px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--accent-color) 30%, white);
}


/*tooltip Box*/
.descr {

  display:inline-block;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content:flex-start;
  column-gap: 16px;
	
  opacity: 0%;
  height: 10px;
  position: relative;
  
  border-radius: 9px;
  padding: 0 -20px;
  margin: 10px 0px;
  
  transition: all 0.3s ease-in-out;
  cursor: default;
}



/*contact section*/


#contact {
  width: 100%;
  height: 100%;
  background: #deebef;
	padding-bottom: 50px;
}

.section-header {
  text-align: center;
  margin: 0 auto;
  padding: 40px 0;
}

.contact-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  max-width: 840px;
  background-color: #deebef;
  border-style:solid;
  border-radius: 8px;
  border-color: white;	
}

/* Left contact page */
.form-horizontal {
  /*float: left;*/
  max-width: 400px;
  font-family: 'Lato';
  font-weight: 400;
}

.form-control, 
textarea {
  max-width: 400px;
  background-color: #deebef;
  color: #fff;
  letter-spacing: 1px;
}

.send-button {
  margin-top: 15px;
  height: 34px;
  width: 400px;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.alt-send-button {
  width: 400px;
  height: 34px;
  transition: all .2s ease-in-out;
}

.send-text {
  display: block;
  font: 700 12px 'Lato', sans-serif;
  letter-spacing: 2px;
}



/*contact section*/


#contact {
  width: 100%;
  height: 100%;
  background: #deebef;
	padding-bottom: 50px;
}

.section-header {
  text-align: center;
  margin: 0 auto;
  padding: 40px 0;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
}

.contact-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  max-width: 840px;
  background-color: #deebef;
  border-style:solid;
  border-radius: 8px;
  border-color: white;	
}