html {
    scroll-behavior: smooth;
}
body {
      font-family: 
      Arial; margin:0; 
      background:#6a809c;
       position:relative;
    min-height:100%;
    margin:0;
    font-feature-settings:"kern";
    }
    header {
      background: linear-gradient(135deg, #237094, #041c50);
      color:rgb(71, 250, 0); 
      padding:15px; 
      text-align:center;
    }
    header p{
      color: rgb(255, 255, 255);
    }
   .cta button{
    background-color: #25D366;
       color:white;
        padding:12px 25px;
         border:none; 
         cursor:pointer; 
         margin:10px; 
         border-radius:5px;

   }
    .cta button:hover{
      background-color: #084a8c;
      color: white;
      transition: 0.3s;
    }
     .cta button:focus{
      background-color: #084a8c;
      color: white;
      transition: 0.3s;
    }
    .row{
      display: flex;
      justify-content: center;
      gap: 20px;
    }
   .container{
    display: inline-block;
    justify-content: center;
    gap: 20px;
   }
   .foot button{
    padding: 5px;
    background-color: #25D366;
    border-radius: 5px;
    margin: auto;
   }
   .foot button:hover{
    background-color: #043361;
    color: white;
    transition: 0.3s;
   }
    nav {
      display:flex; 
      justify-content:center; 
      gap:20px; 
      color: #25D366;
      background:#084a8c; 
      padding:10px; 
      position:sticky; 
      top:0;
    }  
    nav a {
      color:white; 
      text-decoration:none; 
      font-weight:bold;
    }
    section {
      padding:50px 20px; 
      text-align:center;
    }
    .btn {
      background:#25D366;
       color:white;
        padding:12px 25px;
         border:none; 
         cursor:pointer; 
         margin:10px; 
         border-radius:5px;
    }
    form input, form select, form textarea {
      width:80%;
      padding:12px;
       margin:10px;
        border-radius:5px;
         border:1px solid #ccc;
    }
    footer {
      background:#0c0029;
       color:white;
        text-align:center;
         padding:20px;
    }
    .footer :hover, .footer :focus {
      color:#0c0029;
       background:white;
        transition:0.3s;
    }
    .footer-link colour-white:hover {
      color:#0c0029;
       background:white;
        transition:0.3s;
    }
     .footer-link color-white:focus {
      color:#0c0029;
       background:white;
        transition:0.3s;
    }
   
   div a{

    font-family: 'Times New Roman', Times, serif;
    color: white;
   }
    nav {
      display:flex; 
      justify-content:center; 
      gap:20px; 
      color: #25D366;
      background:#084a8c; 
      padding:10px; 
      position:sticky; 
      top:0;
    }  
    .testimonials {
      background: #c2dfdf;
      padding: 40px;
      text-align: center;
    }
    nav a {
      color:white; 
      text-decoration:none; 
      font-weight:bold;
    }
    section {
      padding:50px 20px; 
      text-align:center;
    }
    .btn {
      background:#25D366;
       color:white;
        padding:12px 25px;
         border:none; 
         cursor:pointer; 
         margin:10px; 
         border-radius:5px;
    }
    form input, form select, form textarea {
      width:80%;
      padding:12px;
       margin:10px;
        border-radius:5px;
         border:1px solid #ccc;
    }
    footer {
      background:#0c0029;
       color:white;
        text-align:center;
         padding:20px;
    }
    .footer :hover, .footer :focus {
      color:#0c0029;
       background:white;
        transition:0.3s;
    }
    .footer-link colour-white:hover {
      color:#0c0029;
       background:white;
        transition:0.3s;
    }
     .footer-link color-white:focus {
      color:#0c0029;
       background:white;
        transition:0.3s;
    }
    .TAB {
      background-color: #25D366;
       color:white;
        padding:12px 25px;
         border:none; 
         cursor:pointer; 
         margin:10px; 
         border-radius:5px;
    }
     .TAB:hover {
      background-color: #084a8c;
      color: white;
      transition: 0.3s;
    }
     .TAB:focus {
      background-color: #084a8c;
      color: white;
      transition: 0.3s;
    }

    /* Hero Section */
.hero {
  background-image: url(img\ 4.png);
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  color: rgb(255, 255, 255);
  padding: 100px 20px;
}
.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
  
}
.hero p {
  color: rgb(255, 247, 247);
  font-size: 15px;
  margin-bottom: 30px;
  font-style: oblique;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.logo{
  padding: -40px;
  margin: -40px;
}

/* Cards */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 2opx;
}
.cardss{
   background: linear-gradient(135deg, #237094, #041c50);
  width: 250px;
  color: aliceblue;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.822);
  margin: 20px;
   display: inline-block;
  justify-content: center;
  gap: 20px;
}

.card {
  background: linear-gradient(135deg, #237094, #041c50);
  width: 250px;
  color: aliceblue;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.76);
}
.home{
  background: linear-gradient(135deg, #237094, #041c50);;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  margin: 20px;
   display: inline-block;
  justify-content: center;
  color:aliceblue;

}
.home h1{
  
}
.founder{
  border-radius: 75px ;
}
.home p{
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 30px;
  font-style: oblique;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.about{
  background: linear-gradient(135deg, #237094, #041c50);;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  margin: 20px;
   display: inline-block;
  justify-content: center;
  color:aliceblue;

}
.about h1{
  color: white;
}
.about p{
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 30px;
  font-style: oblique;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.card img {
  width: 100%;
  border-radius: 10px;
}

.image-box {
      text-align: center;
      margin-right: 20px;
      padding: 20px;
    }
    .image-box img {
      margin-right: 20px;
      margin: 15px;
      max-width: 100%;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    }
/* Image Slider */
.slider {
  width: 100%;
  overflow: hidden;
  margin: 20px;
  padding: 20px;
}

.slides {
  display: flex;
  animation: slide 12s infinite;
}
.slides img{
  width: 100px;
}
@keyframes slide {
  0% {transform: translateX(0);} 
  33% {transform: translateX(-100%);} 
  66% {transform: translateX(-200%);} 
  100% {transform: translateX(0);} 
}