@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Edu+TAS+Beginner&family=Josefin+Sans&family=Jost:wght@300;400&family=Montserrat:wght@500&family=Nunito&family=Open+Sans&family=Poppins:ital,wght@0,100;0,400;0,500;0,600;0,700;0,900;1,400&family=Roboto&display=swap');

 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: 'Comfortaa', sans-serif;
     font-family: 'Edu TAS Beginner', cursive;
     font-family: 'Josefin Sans', sans-serif;
     font-family: 'Jost', sans-serif;
     font-family: 'Montserrat', sans-serif;
     font-family: 'Nunito', sans-serif;
     font-family: 'Open Sans', sans-serif;
     font-family: 'Poppins', sans-serif !important;
     font-family: 'Roboto', sans-serif;
 }
::-webkit-scrollbar-thumb {
    background-color: #CFFF03;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: #02326A;
}

::-webkit-scrollbar {
    width: 4px !important;
}
.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 12px;
    height: 12px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #1d3558;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transition: opacity .6s ease;
}
.carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000; /* You can customize the background color */
    border: 1px solid #fff; /* You can customize the border color */
  }

 p {
     font-size: 20px;
     font-weight: 400;
     line-height: 30px;
     color: white;
 }

 .navbar-toggler-icon {
     background-image: url(./assets/menu.png);
     background-size: cover;
     background-repeat: no-repeat;
 }

 .navbar-nav li a {
     color: white !important;
     border-bottom: 2px solid transparent;
 }

 .navbar-nav li a:hover {
     color: #cfff03 !important;
     border-bottom: 2px solid #cfff03;
 }

 .main-heading {
     font-size: 48px;
     line-height: 62px;
     font-weight: 600;
     color: white;
 }

 .navbar-toggler {
     box-shadow: none !important;
 }
.project-img{
    height:70px;
    width:330px;
}
 .absolute-item-1 {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .absolute-item-2 {
     position: absolute;
     bottom: 20px;
     left: 20px;
 }

 .absolute-item-3 {
     position: absolute;
     top: 100%;
     right: 10px;
     transform: translate(-0%, -50%);

 }
.absolute-item-4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.absolute-item-5 {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
}
.footer-img{
    width:160px;
    }
 .button-type-1 {
     border-radius: 30px;
     border: 1px solid transparent;
     padding: 8px 15px;
     background: #cfff03;
     transition: 0.2s ease-in;
 }

 .button-type-1:hover {
     border: 1px solid #cfff03;
     background: transparent;
     color: #cfff03;
     transition: 0.2s ease-in;
 }
  .button-type-5 {
     border-radius: 30px;
     border: 1px solid transparent;
     padding: 8px 15px;
     background: #cfff03;
     transition: 0.2s ease-in;
 }

 .button-type-5:hover {
     border: 1px solid #05418a;
     background: transparent;
     color: #05418a;
     transition: 0.2s ease-in;
 }

 .button-type-2 {
     border-radius: 30px;
     border: 1px solid transparent;
     padding: 8px 15px;
     background: #cfff03;
     transition: 0.2s ease-in;
 }

 .button-type-2:hover {
     border: 1px solid black;
     background: transparent;
     color: black;
     transition: 0.2s ease-in;
 }

 .button-type-3 {
     border-radius: 30px;
     border: 1px solid black;
     padding: 8px 15px;
     background: transparent;
     transition: 0.2s ease-in;
 }

 .button-type-3:hover {
     border: 1px solid transparent;
     background: #cfff03;
     color: black;
     transition: 0.2s ease-in;
 }

 .button-type-4 {
     color: white;
     border-radius: 10px;
     border: 2px solid transparent;
     padding: 8px 15px;
     background: #053d85;
     transition: 0.2s ease-in;
 }

 .button-type-4:hover {
     border: 2px solid #053d85;
     background: transparent;
     color: #053d85;
     transition: 0.2s ease-in;
 }

 .form-control {
     box-shadow: none !important;
 }

 .circular {
     height: 100px;
     width: 100px;
     position: relative;
 }

 .circular .inner,
 .circular .outer,
 .circular .circle {
     position: absolute;
     z-index: 6;
     height: 100%;
     width: 100%;
     border-radius: 100%;
     box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
 }

 .circular .inner {
     top: 50%;
     left: 50%;
     height: 80px;
     width: 80px;
     margin: -40px 0 0 -40px;
     background-color: #dde6f0;
     border-radius: 100%;
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
 }

 .circular .circle {
     z-index: 1;
     box-shadow: none;
 }

 .circular .numb {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10;
     font-size: 18px;
     font-weight: 500;
     color: #4158d0;
 }

 .circular .bar {
     position: absolute;
     height: 100%;
     width: 100%;
     background: #fff;
     -webkit-border-radius: 100%;
     clip: rect(0px, 100px, 100px, 50px);
 }

 .circle .bar .progress {
     position: absolute;
     height: 100%;
     width: 100%;
     -webkit-border-radius: 100%;
     clip: rect(0px, 50px, 100px, 0px);
 }

 .circle .bar .progress,
 .dot span {
     background: #4158d0;
 }

 .circle .left .progress {
     z-index: 1;
     animation: left 4s linear both;
 }

 @keyframes left {
     100% {
         transform: rotate(180deg);
     }
 }

 .circle .right {
     z-index: 3;
     transform: rotate(180deg);
 }

 .circle .right .progress {
     animation: right 4s linear both;
     animation-delay: 4s;
 }

 @keyframes right {
     100% {
         transform: rotate(180deg);
     }
 }

 .circle .dot {
     z-index: 2;
     position: absolute;
     left: 50%;
     top: 50%;
     width: 50%;
     height: 10px;
     margin-top: -5px;
     animation: dot 8s linear both;
     transform-origin: 0% 50%;
 }

 .circle .dot span {
     position: absolute;
     right: 0;
     width: 10px;
     height: 10px;
     border-radius: 100%;
 }

 @keyframes dot {
     0% {
         transform: rotate(-90deg);
     }

     50% {
         transform: rotate(90deg);
         z-index: 4;
     }

     100% {
         transform: rotate(270deg);
         z-index: 4;
     }
 }

 .list-items li a {
     color: white;
     border-bottom: 2px solid transparent;
 }

 .list-items li a:hover {
     color: #cfff03;
     border-bottom: 2px solid #cfff03;
 }

 footer svg {
     fill: white;
 }

 footer svg:hover {
     fill: #cfff03;
 }
 .nav-bg{
    background: rgba(0, 0, 0, 0.311);
    backdrop-filter: blur(5px);
    transition: 0.5s ease-in-out;
 }
 .zoomed {
     transform: scale(0.9);
     transition: 0.3s;
 }

 .zoomed:hover {
     transform: scale(1.1);
     transition: 0.3s;
 }
 
.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }    
}
  .absolute-set-heading{
        width:55px;
        position:absolute;
        top:0;
        right:0;
    }
      .absolute-set-heading-2{
        width:65px;
        position:absolute;
        top:0;
        right:0;
        transform:translate(50%,-50%);
    }
    .heading-img-width{
        width:60px;
    }
    
.pt-top{
    padding-top:40px;
} 
.logo-img{
    width:118px;
}
.hovered-icons{
    
}