*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}

/* ---------------------------------------home ------------------------------*/
.container-fluid{
    width:60%;
    padding: 10px;
    margin-left: 5%;
}
.navbar-brand {
  font-size: 30px;
}
.navbar-collapse{
  padding-right: 30%;
}
.nav-item a  {
    color: blue;
    font-size: 20px;
}
.nav-item a:hover{
    color: rgb(78, 54, 187);
    text-decoration:underline;
}
.navbar-nav{
  margin-left: -20px;
}

.sec-home{
    /* background-color: red; */
    min-height: 90vh;
    clip-path: polygon(100% 0%, 0% 0% , 0.00% 97.10%, 1.00% 96.56%, 2.00% 95.95%, 3.00% 95.28%,
     4.00% 94.56%, 5.00% 93.79%, 6.00% 92.99%, 7.00% 92.15%, 8.00% 91.29%, 9.00% 90.40%, 10.00% 89.51%, 
     11.00% 88.62%, 12.00% 87.74%, 13.00% 86.87%, 14.00% 86.02%, 15.00% 85.20%, 16.00% 84.42%, 17.00% 83.68%,
      18.00% 82.99%, 19.00% 82.36%, 20.00% 81.79%, 21.00% 81.29%, 22.00% 80.85%, 23.00% 80.50%, 24.00% 80.22%, 
      25.00% 80.03%, 26.00% 79.91%, 27.00% 79.88%, 28.00% 79.94%, 29.00% 80.08%, 30.00% 80.30%, 31.00% 80.60%,
       32.00% 80.97%, 33.00% 81.43%, 34.00% 81.95%, 35.00% 82.54%, 36.00% 83.19%, 37.00% 83.89%, 38.00% 84.64%,
        39.00% 85.44%, 40.00% 86.27%, 41.00% 87.12%, 42.00% 88.00%, 43.00% 88.89%, 44.00% 89.78%, 45.00% 90.67%, 
        46.00% 91.54%, 47.00% 92.40%, 48.00% 93.23%, 49.00% 94.03%,
     50.00% 94.78%, 51.00% 95.49%, 52.00% 96.14%, 53.00% 96.73%, 54.00% 97.25%, 55.00% 97.71%, 56.00% 98.09%, 
     57.00% 98.39%, 58.00% 98.62%, 59.00% 98.76%, 60.00% 98.82%, 61.00% 98.79%, 62.00% 98.68%, 63.00% 98.49%, 
     64.00% 98.21%, 65.00% 97.86%, 66.00% 97.43%, 67.00% 96.93%, 68.00% 96.36%, 69.00% 95.73%, 70.00% 95.05%, 
     71.00% 94.31%, 72.00% 93.53%, 73.00% 92.71%, 74.00% 91.86%, 75.00% 90.99%, 76.00% 90.11%, 77.00% 89.22%,
      78.00% 88.33%, 79.00% 87.45%, 80.00% 86.58%, 81.00% 85.74%, 82.00% 84.93%, 83.00% 84.17%, 84.00% 83.44%, 
      85.00% 82.77%, 86.00% 82.16%, 87.00% 81.61%, 88.00% 81.13%, 89.00% 80.73%, 90.00% 80.40%, 91.00% 80.15%,
       92.00% 79.98%, 93.00% 79.89%, 94.00% 79.89%, 95.00% 79.97%, 96.00% 80.14%, 97.00% 80.39%, 98.00% 80.71%,
        99.00% 81.12%, 100.00% 81.59%);
    }
    .sec-home .container{
        height: 80vh;
    }
     .col-md-7 img{
        height: 100vh;
        /* width:auto; */
        object-fit: cover;
        position: relative;
        overflow: hidden;
    }
    .col-md-5 .div-color{
        inset: 0;
        z-index: 1;
        position: absolute;
        height: 110vh;
        width: 80%;
        background:linear-gradient(to right, rgb(23, 35, 321), rgb(123, 206, -37, 0));
    }
    .col-md-5 .text{
        margin: 10%;
        color: white;
        transition: all 1s ease;
        animation: fadeInup 1s ease-in-out backwards;
    }
    @keyframes fadeInup {
        from {
          opacity: 0;
          transform: translateY(50px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
 /* ---------------home button-------------------- */
button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    animation: fadeIn 1s ease-in-out forwards;
   }
   @keyframes fadeIn{
    from{
        opacity: 0;
        transform: translateX(70);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
   }
   
   button.learn-more {
    width: 12rem;
    height: auto;
   }
   
   button.learn-more .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: white;
    border-radius: 1.625rem;
   }
   
   button.learn-more .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
   }
   
   button.learn-more .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
   }
   
   button.learn-more .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid blue;
    border-right: 0.125rem solid blue;
    transform: rotate(45deg);
   }
   button.learn-more .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 0;
    margin: 0 0 0 1.85rem;
    color: white;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
   }
   
   button:hover .circle {
    width: 100%;
   }
   
   button:hover .circle .icon.arrow {
    background: #fff;
    transform: translate(1rem, 0);
   }
   
   button:hover .button-text {
    color: blue;
   }

   /* ----------------------------section services--------------------- */
   .sec-service{    
    /* margin-top: 30px; */
    min-height: 85vh;
    display: flex;
    margin: auto;
    padding: 20px;
    gap: 20px;
    text-align: center;
    justify-content: center;
    align-items: center;
   }    
   
   .heading {
    padding: 30px;
   }
  
   .card-text{
    font-size: 18px;
    font-weight: bold;
   }

  .card {
    position: relative;
    width: 280px;
    height: 344px;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 12px;
    gap: 12px;
    border-radius: 8px;
    cursor: pointer;
  }
  
  .card::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -5px;
    margin: auto;
    width: 290px;
    height: 354px;
    border-radius: 10px;
    background: linear-gradient(-45deg, #591cff 0%, #40c9ff 100% );
    z-index: -10;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .card::after {
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    background: linear-gradient(-45deg, #e81cff 0%, #4340ff 100% );
    transform: translate3d(0, 0, 0) scale(0.95);
    filter: blur(20px);
  }
 
  .card p:not(.heading) {
    font-size: 14px;
  }
  
  .card p:last-child {
    color: #ffff;
    font-weight: 600;
  }
  
  .card:hover::after {
    filter: blur(30px);
  }
  
  .card:hover::before {
    transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
  }
  

/* -----------------------section about------------------------------ */
   .sec-about{
    min-width: 50vh;
   
   }   
   .sec-about .container{
   margin: 10%  5%;

   }
   .sec-about .col-md-6 video  {
    border-radius:50px;
    width: 90%;
    height:80%;
    margin:40px 0;
    display: block;
   }
   .left-line{
    display: flex;
    border-left: 2px solid blue;
    width:0;
   }
   .col-md-6 .para-about{
    color: black;
    font-size: 20px;
   }
   .col-md-6 .para-about i{
    color: blue;
   }
   .sec-about .img-about{
    display: flex;
    height: 200px;
    width: 300px;
    border-radius: 20px;
    margin-top: 10px;
   }
/* --------------------------say people section--------------------- */
.sec-people {
  display: flex;
  min-height: 80vh;
  background: linear-gradient(-45deg, #591cff 0%, #40c9ff 100% );
  margin: 40px 0;
}
.sec-people .container{
  align-items: center;
  justify-content: center;
  min-height:70vh;
  text-align: center;
}
.sec-people .row{
  border-style:dashed;
  color: white;
  margin-top: 7%;
  background-color: rgb(37, 94, 218);
  padding: 50px;
  border: 1 px solid green;
  border-radius: 20px;
  font-size: 20px;
}
.sec-people .row button{
  background-color: blue;
}
.sec-people .row img{
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  width: 100px;
}
.sec-people .page-link{
  text-transform: none;
  color: rgb(50, 50, 241);
  font-size: 20px;
}
/* ----------------------section contact------------------------ */
.sec-contact{
  min-height: 90vh;
  text-align: center;
}

.form-container {
  max-width: 700px;
  height: 700px;
  margin: auto;
  background-color: #001925;
  padding: 30px;
  border-left: 8px solid #2d7ce4;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.heading1 {
  display: block;
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 20px;
}
.form-container .form{
 margin-top: 15%;
}
.form-container .form .input {
  color: #87a4b6;
  width: 100%;
  background: linear-gradient(-45deg, #591cff 0%, #40c9ff 100% );
  border: none;
  outline: none;
  padding: 10px;
  margin-bottom: 20px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  border-left: 1px solid transparent;
}
.form-container .form .input:focus {
  border-left: 12px solid white;
}
.form-container .form .textarea {
  width: 100%;
  padding: 10px;
  border: none;
  outline: none;
  background: linear-gradient(-45deg, #591cff 0%, #40c9ff 100% ); 
  color: #ff7a01;
  font-weight: bold;
  resize: none;
  max-height: 150px;
  margin-bottom: 20px;
  border-left: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}
.form-container .form .textarea:focus {
  border-left: 12px solid white;
}
.form-container .form .button-container {
  display: flex;
  gap: 10px;
}
.form-container .form .button-container .send-button {
  flex-basis: 70%;
  background: linear-gradient(-45deg, #591cff 0%, #40c9ff 100% );  
  padding: 10px;
  margin-left: 60px;
  color: white;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}
.form-container .form .button-container .send-button:hover {
  background: transparent;
  border: 1px solid white;
  color: white;
}

/* -------------------------------------footer----------------------------- */
footer{
  margin-top: 10%;
  height: 60vh; 
  color: white;
}
footer .container{
  margin: 0 40px 40px -10px ;
}
footer h1{
  color: black;
}
footer {
  font-size: 16px;
  background: linear-gradient(-45deg, #591cff 0%, #40c9ff 100% );  
  padding: 50px;
}
footer input{
  padding: 10px;
  border-radius: 20px;
  border: none;
}
footer  a{
  text-decoration: none;
 color: white;
 font-size: 20px;
}
footer a:hover{
  color: blue;
  text-decoration: dashed;
}

footer .container i{
  color: black;
  font-size: 20px;
  list-style-type: none;
}
 .logo-img{
height: 50px;
width: 60px;
color: white;
}
footer  .call{
  background-color: whit;
  border: 2px solid white;
  color: white;
  border-radius: 20px;
  padding: 15px;
  margin-top: 30px;
}
@media (max-width:576px) {
  footer {
    height: 150vh;
  }
  
}