:root {
	--color-black: hsl(0, 0%, 10%);
	--color-white: hsl(0, 0%, 100%);
	--color-darken: hsl(0, 0%, 20%);

	--color-teal-100: hsl(160, 85%, 87%);
	--color-teal-200: hsl(162, 78%, 77%);
	--color-teal-300: hsl(162, 72%, 65%);
	--color-teal-400: hsl(162, 68%, 54%);
	--color-teal-500: hsl(162, 73%, 46%);
	--color-teal-600: hsl(162, 82%, 40%);
	--color-teal-700: hsl(162, 87%, 35%);
	--color-teal-800: hsl(162, 88%, 30%);
	--color-teal-900: hsl(162, 88%, 26%);

	--shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-medium: 0 -4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 100%;
  box-sizing: inherit;
  scroll-behavior: smooth;
}
a,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  text-decoration: none;
}
a{
  color: #025279;
}

/* img, */
video {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.navclass {
  height: auto;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.brand {
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-teal-800);
  text-transform: uppercase;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 100;
}
.navbar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-items: center;
  width: 100%;
  height: 6rem;
  margin: 0 auto;
  background-color: rgb(2, 82, 121);
}
.menu {
  position: fixed;
  left: 0;
  bottom: 0;
  display: grid;
  align-content: center;
  width: 100%;
  height: 3.5rem;
  padding: 0 1rem;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  /* background: var(--color-white); */
  background-color: rgb(2, 82, 121);
  box-shadow: var(--shadow-medium);
  z-index: 2;
}
.menu-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.menu-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  color:#F3FBFE;
}
.menu-link.is-active {
  position: relative;
  color: var(--color-teal-800);
  transition: all 0.35s ease;
}
.menu-icon {
  font-size: 1.35rem;
  line-height: 1;
  color: inherit;
}
.menu-name {
  display: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  visibility: hidden;
  text-transform: capitalize;
}

@media only screen and (min-width: 360px) {
  .menu-name {
    display: block;
    visibility: visible;
  }
  .navbar{
    z-index: 1;
    position: relative;
  }
 
}
@media only screen and (min-width: 576px) {
  .menu-list {
    justify-content: center;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
  .navbar{
    z-index: 1;
    position: relative;
  }
}
@media only screen and (min-width: 768px) {
  .header {
    background: var(--color-white);
    box-shadow: var(--shadow-medium);
    transition: all 0.35s ease-in-out;
  }
  .navbar{
    z-index: 1;
    position: fixed;
  }
  .menu {
    position: relative;
    top: 0;
    right: 0;
    width: auto;
    height: auto;
    /* background: none; */
    background-color: rgb(2, 82, 121);
    box-shadow: none;
  }
  .menu-link.is-active::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 5rem;
    height: 2px;
    border: none;
    outline: none;
    background: var(--color-teal-800);
  }
  .menu-link:hover {
    color: var(--color-teal-800);
    transition: all 0.35s ease;
    text-decoration: none;
  }
  .menu-icon {
    display: none;
    visibility: hidden;
  }
  .menu-name {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0.2rem;
  }
}
/* section Start  */

  body {
    background-color: #F3FBFE;
  }
 
  .bgimage {
    position: relative;
    text-align: center;
    color: white;
  }
  .centered {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:rgb(16, 102, 16);
  }
  .textsize{
  font-size:44px;
  }
  .bottom-right {
    position: absolute;
    bottom: 0px;
    right: 16px;
  }
  .bottom-rights {
    position: absolute;
    bottom: 0px;
    right: 16px;
  }
  .mobilehand{
    height: 40rem;
    width: 100%;
  }
  .home{
    text-align: center;
    color: var(--color-3);
    font-size: 1.4rem;
    font-weight: bold;
    background-color: rgb(218, 250, 229);
    border-radius: 3px;
    box-shadow: 0 1.5rem 1rem -.1% rgba(0, 88, 100, 0.15) ;
    font-size:36px;
  }
/* <------ second card designe ----> */
.compleatevaluchain{
  font-size: 1.3em;
    overflow: hidden;
    border: none;
    border-radius: .28571429rem;
    margin-top:20px;
}
  .card {
    width: 100%;
    height: 360px;
    margin: 50px auto;
    cursor: pointer;
    transition: .5s;
    background-color: rgb(243,251,254);
    border: none;
    z-index: 0;
  }
  .card:hover {
    transform: scale(1.1);
    filter: drop-shadow(-2px 4px 8px rgba(20, 118, 163, 0.233));
  }
  .card_content{
    width: inherit;
    height: inherit;
    position: relative;
    background-color: rgb(243,251,254);
    border-radius: 220px 0;
    z-index: 2;   
  }
  .card_layout{
    width: inherit;
    height: inherit;
    background-color: rgb(32, 150, 61);
    position: absolute;
    top: 0;
    border-radius: 48% 0px;
    z-index: 1;
  }
  .card_icon {
    width: 100%;
    text-align: center;
  }
  .card_content ion-icon {
    font-size: 5em;
    margin-top: 25px;
    color: #00f;
  }
  .card_content .card_title {
    color: rgb(19, 83, 36);
    font-family: monospace ,sans-serif;
    font-weight: bold;
    font-size: 1.8em;
  }
  .card_content .card_body {
    max-width: 100%;
    height: 125px;
    margin: 27px auto 11px;
    text-align: center;
    overflow: hidden;
    font-family: sans-serif;
    line-height: 1.4;
  }
  .card_content .card_body span {
    color: rgb(19, 83, 36);
    font-weight: bold;
  }

  /* section 5 */
.bgsection5{
  position: relative;
  text-align: center;
  color: white;
  width: 100%;
  height: 70%;
}
.bottom-left {
  position: absolute;
  bottom: 8px;
  left:5%;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottomright {
  position: absolute;
  bottom: 0px;
  right: 16px;
}

.centrs {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.mobilehand{
  height: 40rem;
  width: 100%;
}
.mobileimage2{
  height:40rem;
  width: 70%;
}
/* section 5 */

.testimonial-img{
  height: 120px;
  width: 120px;
  margin-top: -70px;
  border-radius: 50%;
}
.cards1{
  box-shadow: 0px 30px 40px -20px var(--grayishBlue);
  border: 3px solid rgb(4, 86, 4);
  border-radius: 10px;
}
.cards2{
  box-shadow: 0px 30px 40px -20px var(--grayishBlue);
  border: 3px solid rgb(192, 104, 45);
  border-radius: 10px;

}
.cards3{
  box-shadow: 0px 30px 40px -20px var(--grayishBlue);
  border: 3px solid rgb(23, 133, 139);
  border-radius: 10px;

}
.cards4{
  box-shadow: 0px 30px 40px -20px var(--grayishBlue);
  border: 3px solid rgb(109, 61, 100);
  border-radius: 10px;

}
.Carsolimage{
  width: 100%;
  height: 700px;
}


  @media only screen and (max-width: 600px) {
    .mobilimage{
      width:60%;height:70%;background-size: auto;
    }
    .centered {
      position: absolute;
      top: 20%;
      left: 50%;
    }
    .bgsize{
      width:100%;height:740px;background-size: auto;
    }
    .mobileimage2{
      height:10rem;
      width: 60%;
    }
    .mobilehand{
      height: 20rem;
      width: 100%;
    }
    .centrs {
      display: none;
    }
    .Carsolimage{
      width: 100%;
      height: 400px;
    }
    
  }
  @media only screen and (max-width: 1024px) {
    .mobilimage{
      width:60%;height:70%;background-size: auto;
    }
    .centered {
      position: absolute;
      top: 20%;
      left: 50%;
    }
    .bgsize{
      width:100%;height:100%;background-size: auto;
    }
    .mobileimage2{
      height:12rem;
      width: 60%;
    }
    .mobilehand{
      height: 30rem;
      width: 100%;
    }
    .centrs {
      top: 25%;
      left: 50%;
    }
    .Carsolimage{
      width: 100%;
      height: 500px;
    }
    
  }