div,h1,h2,h3,h4,h5,h6,p,label,input,span{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
img{
     width: 100%!important;
     height: 100%!important;
     object-fit: contain!important;
}
body, #content{
     width: 100vw!important;
     overflow-x: hidden!important;
}
a{
     text-decoration: none;
     color: #aeaeae;
}
li{
     list-style: none;
}
.hidden {
     display: none;
}   
.dot{
     width: 5px;
     height: 5px;
     background-color: #2A6DA8;
     border-radius: 50%;
}
/* loader spinner for news */
.spinner {
     border-radius: 50%;
     width: 50px;
     height: 50px;
     animation: spin .5s linear infinite;
     margin-bottom: 10px;
     border: 8px solid #333;
     border-top: 8px solid #3498db;
 }
 .loading-overlay {
     display: none;
     position: relative;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     animation: fadeInOut 3s ease-in-out infinite;
 }
     @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }

/* Styling for the loading display */
.loading {
     display: none;
     position: fixed;
     top: 30vh;
     left: 40%;
}
.loader {
     width: 112px;
     height: 112px;
   }
   
   .box1,
   .box2,
   .box3 {
     border: 16px solid #101C28;
     box-sizing: border-box;
     position: absolute;
     display: block;
   }
   
   .box1 {
     width: 112px;
     height: 48px;
     margin-top: 64px;
     margin-left: 0px;
     animation: abox1 4s 1s forwards ease-in-out infinite;
   }
   
   .box2 {
     width: 48px;
     height: 48px;
     margin-top: 0px;
     margin-left: 0px;
     animation: abox2 4s 1s forwards ease-in-out infinite;
   }
   
   .box3 {
     width: 48px;
     height: 48px;
     margin-top: 0px;
     margin-left: 64px;
     animation: abox3 4s 1s forwards ease-in-out infinite;
   }
   
   @keyframes abox1 {
     0% {
       width: 112px;
       height: 48px;
       margin-top: 64px;
       margin-left: 0px;
     }
   
     12.5% {
       width: 48px;
       height: 48px;
       margin-top: 64px;
       margin-left: 0px;
     }
   
     25% {
       width: 48px;
       height: 48px;
       margin-top: 64px;
       margin-left: 0px;
     }
   
     37.5% {
       width: 48px;
       height: 48px;
       margin-top: 64px;
       margin-left: 0px;
     }
   
     50% {
       width: 48px;
       height: 48px;
       margin-top: 64px;
       margin-left: 0px;
     }
   
     62.5% {
       width: 48px;
       height: 48px;
       margin-top: 64px;
       margin-left: 0px;
     }
   
     75% {
       width: 48px;
       height: 112px;
       margin-top: 0px;
       margin-left: 0px;
     }
   
     87.5% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 0px;
     }
   
     100% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 0px;
     }
   }
   
   @keyframes abox2 {
     0% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 0px;
     }
   
     12.5% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 0px;
     }
   
     25% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 0px;
     }
   
     37.5% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 0px;
     }
   
     50% {
       width: 112px;
       height: 48px;
       margin-top: 0px;
       margin-left: 0px;
     }
   
     62.5% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 64px;
     }
   
     75% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 64px;
     }
   
     87.5% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 64px;
     }
   
     100% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 64px;
     }
   }
   
   @keyframes abox3 {
     0% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 64px;
     }
   
     12.5% {
       width: 48px;
       height: 48px;
       margin-top: 0px;
       margin-left: 64px;
     }
   
     25% {
       width: 48px;
       height: 112px;
       margin-top: 0px;
       margin-left: 64px;
     }
   
     37.5% {
       width: 48px;
       height: 48px;
       margin-top: 64px;
       margin-left: 64px;
     }
   
     50% {
       width: 48px;
       height: 48px;
       margin-top: 64px;
       margin-left: 64px;
     }
   
     62.5% {
       width: 48px;
       height: 48px;
       margin-top: 64px;
       margin-left: 64px;
     }
   
     75% {
       width: 48px;
       height: 48px;
       margin-top: 64px;
       margin-left: 64px;
     }
   
     87.5% {
       width: 48px;
       height: 48px;
       margin-top: 64px;
       margin-left: 64px;
     }
   
     100% {
       width: 112px;
       height: 48px;
       margin-top: 64px;
       margin-left: 0px;
     }
   }
   
   .loader {
     --col1: #101C28;
     --col2: #F26A28;
     font-size: 5em;
     font-weight: 600;
     perspective: 800px;
     position: relative;
   }
   
   .loader::after,
   .loader::before,
   .loader .text::after,
   .loader .text::before {
     perspective: 800px;
     animation: anim 2s ease-in-out infinite, dotMove 10s ease-out alternate infinite, move 10s linear infinite 1s;
     ;
     content: '●';
     color: var(--col1);
     position: absolute;
     translate: -60px 500px;
     width: 5px;
     height: 5px;
   }
   
   .loader::before {
     animation-delay: 3s;
     color: var(--col1);
   }
   
   .loader .text::before {
     color: var(--col2);
     animation-delay: 2s;
   }
   
   .loader .text::after {
     color: var(--col2);
   }
   
   .loader .text {
     animation: anim 20s linear infinite, move 10s linear infinite 1s;
     color: transparent;
     background-image: linear-gradient(90deg, 
     var(--col1) 0%,
     var(--col2) 100%);
     -webkit-background-clip: text;
     background-size: 100%;
     background-repeat: no-repeat;
     transform: skew(5deg, -5deg);
     background-clip: text;
     position: relative;
   }
   
   @keyframes anim {
     0%, 100% {
       text-shadow: 2px 0px 2px #b39e9e80;
     }
   
     50% {
       background-size: 0%;
       background-position-x: left;
     }
   }
   
   @keyframes move {
     50% {
       translate: 0px 0px;
       rotate: x 60deg;
       transform: skew(-5deg, 5deg);
     }
   }
   
   @keyframes dotMove {
     0%, 100% {
       translate: -60px 300px;
     }
   
     50% {
       translate: 160px -250px;
       scale: .5;
       opacity: .85;
     }
   }
.navBar{
    width: 100vw;
    z-index: 2;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
    background-color: #F0F2F2;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
.logo{
     height: 50px;
}
.hamburger{
     display: none;
}
.hamburger-line{
     display: flex;
     background-color: rgb(1, 20, 32);
     width:20px;
     height:2px;
     margin:2.5px;
}
.name-header{
    font-size: 30px;
    color: #2A6DA8;
    font-weight: 900;
}
.name-header > span{
    color: #F0F2F2;
}
.name-header-p{
    font-size: small;
    color: #F0F2F2;
    font-weight: 900;
}
.link-list{
    display: flex;
    margin: 0;
}
.link-list > li{
    list-style: none;
    margin-right: 10px;
}
.link-list >li > a{
    text-decoration: none;
    text-decoration-line: none;
    color: #404041;
    font-weight: 600;
}
.link-list > li > .active{
    color: #101C28;
    font-weight: 900;
}
.link-list > li > a:hover{
    color: #2A6DA8;
}
#nav-links-mobile{
     display: none;
     flex-direction: column;
     position: absolute;
     top: 0;
     left: 0;
     background-color: white;
     border: hidden;
     border-top-right-radius: 20px;
     border-bottom-right-radius: 20px;
     height: 100vh;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
     width: 80vw;
}
.link-list-mobile{
  margin-top: 70px;
}
.link-list-mobile > li{
     width: 100%;
     padding: 10px;
     /* border-top: #101C28 .1px solid; */
     color: #020b15;
     border-bottom: #9b9b9b .1px solid;
}
.link-list-mobile > li > a {
  color: #565656;
  font-weight: bold;
}
.link-list-mobile > li:hover{
     background-color: #081149b4;
     color: white;
}
.nav-logos{
     align-items: center;
     justify-content: space-between;
     width: 90%;
}
.x{
     font-size: xx-large;
}
.wrap-up{
    flex-wrap: wrap;
}
.nav-links-mobile-open{
     animation: slideIn 0.5s ease forwards;
}
.nav-links-mobile-close{
     animation: slideOut 0.5s ease forwards;
}
.button {
    position: relative;
    transition: all 0.3s ease-in-out;
    /* box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); */
    padding-block: 0.5rem;
    padding-inline: 1.25rem;
    background-color: #101C28;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffff;
    gap: 10px;
    font-weight: bold;
    border: 3px solid #ffffff4d;
    outline: none;
    overflow: hidden;
    font-size: 15px;
  }

  .button:hover {
    transform: scale(1.05);
    border-color: #2A6DA8;
  }
  
  .button:hover .icon {
    transform: translate(4px);
  }
  
  .button:hover::before {
    animation: shine 1.5s ease-out infinite;
  }
  
  .button::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0) 70%
    );
    top: 0;
    left: -100px;
    opacity: 0.6;
  }

  .message,.message-head{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
.message{
     background-color: rgb(241, 246, 255);
}
.message-head{
     width: 50%;
}
.message-head>h1,.message-head>p{
     text-align: center;
     width: 90%;
}
.message-head>h1{
     font-size: 3rem;
     font-weight: 700;
}
.container-for-inputs{
     display: flex;
     flex-direction: column;
     box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
     border: hidden;
     border-radius: 5px;
     padding: 20px;
     width: 50%;
     background-color: white;
     margin: 20px;
}
label::before{
     content: '*';
     color: red;
}
input,textarea{
     background-color: #eeeeee;
     margin-bottom: 15px;
     border: hidden;
     border-radius: 10px;
     padding: 10px;
     text-indent: 5px;
     width: 100%!important;
}
input{
     height: 40px;
}
textarea{
     height: 120px;
}
  
  @keyframes shine {
    0% {
      left: -100px;
    }
  
    60% {
      left: 100%;
    }
  
    to {
      left: 100%;
    }
  }
  
footer{
    height: max-content;
    width: 100%; 
    background:  linear-gradient(90deg, #000000c9 100%,#11111100 0%), url(img23f.jpg);
    background-position: bottom;
    background-size: cover;
    color: #F0F2F2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.footer-logoo{
    width: 300px;
    height: 100px;
}
.one{
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
}
.onee{
     display: grid;
     grid-template-columns: 2fr, 1fr;
}
.loogoo{
    width: 100px;
}
hr{
    width: 70%;
}
.linikss-container{
     display: flex;
     gap: 30px;
    width: max-content;
    height: 40vh;
    flex-wrap: wrap;
}
.linikss{
    display: flex;
    flex-direction: column;
}
.linikss h1{
    color: #F0F2F2;
    font-size: 30px;
    font-weight: bold;
}
.linikss a{
    color: #F0F2F2;
    text-align: center;
    font-style: normal;
    font-size: small;
}
.coontacts{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: left;
    justify-content: left;
    margin:20px;
}
.mail{
    display: flex;
    align-items: center;
    gap: 10px;
}
.mail div{
    display: flex;
    flex-direction: column;
}
.mail div h1{
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
}
.mail div h6 {
    color: #c6c6c6b4;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
footer .coppyRight{
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
}
@keyframes slideIn {
    from{
         transform: translate(-95vw);
    }
    to{transform: translate(0);}
}
@keyframes slideOut {
     from{transform: translate(0);}
     to{transform: translate(-95vw);}
 }
@keyframes rollin {
    from{
         transform: translate(150vw);
    }
    to{transform: translate(0);}
}
@keyframes rollOut {
    from{transform: translate(0);}
    to{transform: translate(150vw);}
}

@media screen and (max-width:600px) {
    .nav-links{
         display: none;
    }
    .hamburger{
         display: flex;
         flex-direction: column;
    }
}
.breadcrumb-item, .breadcrumb-item .active{
     color: white!important;
     text-decoration: none;
 }
 .breadcrumb .active{
      color: #020b15!important;
      font-weight: 700;
 }
 .dropdown-item{
     text-transform: capitalize;
 }
 .testimonials{
     width: 100%;
     background-color: white;
     width: 100%;
     padding: 20px;
}
.testimonials > div{
     max-width: 50%;
}
.testimonial-header{
     font-size: 3rem;
     font-weight: bold;
}
swiper-container {
     width: 40%;
     height: 350px;
     margin: 0 auto;
     swiper-slide {
          display: flex;
          align-items: center;
          flex-direction: column;
          gap: 20px;
          padding: 15px;
          color: #fff;
          background: #101C28;
          border-radius: 20px;
          .imagg{
               width: 50px;
               height: 50px;
               }
          .text{
               color: #fff;
               font-size: 15px;
               font-style: normal;
               font-weight: 500;
          }
     }
     .rating{
          height: 10px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
     }
     .rating i{
          color: #ff0;
          font-size: 20px;
     }
}
.alerting{
     position: absolute;
     right: 0;
     top: 30%;
     .alert{        
          width: 300px;
          height: 50px;
          animation-name: rollin;
          animation-duration: 0.5s;
          animation-timing-function: ease;
          animation-fill-mode: forwards;
     }
     svg{
          width: 20px;
     }
     div{
          font-size: 12px;
     }
}
.alert-primary{
     background-color: #2A6DA8;
}
.alert-danger{
     background-color: #ff0000;
}
.alert-success{
     background-color: #019f01;
}
.alert-warning{
     background-color: #ffcc00;
}
.blog{
     height: max-content;
     border: 1px solid #0d2b4158;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
.topps{
     height: 30vh;
     background-position: center;
     background-size: cover !important;
     border-top-right-radius: 9px;
     border-top-left-radius: 9px;
}
.story{
     height: 60%;
     padding: 30px;
     .abouu{
          gap: 20px;
          .authorImg{
               width: 50px;
               height: 50px;
               border-radius: 50%;
          }
     }
}
img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
}
.moree{
     border-top: #0d2b4158 1px solid;
     height: 10%;
     .fa-solid{
          font-size: 30px;
          font-weight: 900;
          cursor: pointer;
          color: #d7d7d7;
     }
     .fa-solid:hover{
          transition: .8s;
          color: #2A6DA8;
          cursor: pointer;
     }
}
}
.blog:hover{
transition: .8s;
transform: scale(1.01);
.topic{
     transition: .8s;
     color: #2A6DA8;
     cursor: pointer;
}
}
@media screen and (max-width:850px) {
     .linikss-container {
          width: 100vw;
          height: max-content;
          justify-content: center;
      }
      .onee{
          display: flex;
          flex-direction: column;
          justify-content: center;
      }
      swiper-container{
        width: 75%;
      }
      .testimonials{
          flex-direction: column;
          justify-content: center;
          align-items: center;
     }
     .testimonials > div{
          max-width: 100%;
     }
     .container-for-inputs{
          width: 80%;
     }
     .pledge-div{
          width: 70%;
     }
     header > hero{
          width: 70vw!important;
     }
     header > .hero > h1 {
          font-size: 25px;
     }
     header > .hero > h4 {
          font-size: 10px;
     }
     .col-6 {
          width: 100%;
      }
      .journey > .h-100 > .row {
          gap: 50px;
      }
      .journey{
          margin: 0;
      }
      .about-content {
          width: 100%;
          margin: 0 auto;
          padding: 10px;
      }
      .onee{
          flex-direction: column!important;
      }
      .linikss-container {
          flex-direction: column!important;
          height: auto;
          margin: 20px;
      }
} 
@media screen and (max-width:500px) {
     .servie{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          margin: 0 auto;
     }
     .services{
          padding: 20px;
     }
     .service{
          width: 100%;
     }
     .message-head{
          width: 100%;
     }
     .pledge-div{
          width: 100%;
          padding: 20px;
     }
     .pledge-div>h1,.pledge-div>p{
          text-align: center;
     }
     .pledge{
          padding: 0;
     } 
}
@media screen and (max-width:1000px) {
     .pledge-div{
          width: 100%;
     }
}