@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&family=Syne:wght@400..800&display=swap');

 *:not(i) {
     font-family: "Poppins", sans-serif;
 }

 a {
     text-decoration: none;
     color: black;
 }

 .main-head {
     font-size: 1.1vw;
     font-weight: 600;
     background-color: #00357a;
     color: white;
     /* background: rgba(52, 60, 217, 1);
    background: linear-gradient(87.96deg, rgba(52, 60, 217, 0.10) 0.25%, rgba(52, 60, 217, 0) 100.25%); */
     width: fit-content;
     padding: 7px 20px;
     border-radius: 20px;
 }

 .sub-head {
     font-size: 3vw;
     font-weight: 600;
 }


 /* BANNER */
 .common-banner {
     padding-top: 160px;
     position: relative;
     padding-left: 10vw;
 }

 .common-banner .common-banner-img {
     width: 20vw;
     height: auto;
     position: absolute;
     left: 5vw;
     top: 55%;
     z-index: -1;
 }

 .banner-head {
     font-size: 1vw;
     font-weight: 600;
     /* background: #040836; */
     background-color: #00357a;
     /* background-color: #FF6036; */
     color: white;
     width: fit-content;
     padding: 7px 20px;
     height: fit-content;
     border-radius: 20px;
 }

 .banner-sub-head {
     font-size: 4.2vw;
 }


 .common-banner .circle-container {
     height: 13vw;
     width: 13vw;
     position: absolute;
     right: 10vw;
     top: 80%;
     z-index: 3;
 }

 .common-banner .circle-container img {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
 }

 .common-banner .circle-container .circle-img-2 {
     animation: rotateInfinite 10s linear infinite;
 }

 @keyframes rotateInfinite {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /*  */
 .common-banner-text {
     overflow: hidden;
     text-wrap: nowrap;
 }

 .common-banner-text h2 {
     display: inline-block;
     font-size: 14vw;
     background-image: linear-gradient(to bottom, #eaeaea, #efefef, #f7f7f7, #fafafa, #ffffff);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     will-change: transform;
     /* smoother animation */
 }


 /*  */
 .marquee-container {
     width: 100%;
 }

 .marquee-text-left {
     display: inline-block;
     font-size: 4vw;
     padding-block: 10px;
     padding-right: 50px;
     background: #00357a;
     color: white;
     position: relative;
     /* transform: rotate(3deg); */
     text-wrap: nowrap;
 }

 /* .marquee-text-right {
    display: inline-block;
    font-size: 3.2vw;
    padding-block: 10px;
    padding-right: 50px;
    background: #E4E4E4;
    position: relative;
    transform: rotate(-3deg);
    text-wrap: nowrap;
    z-index: -1;
    top: -60px;

} */

 /*  */
 .widning-image-section {
     padding-block: 80px;
 }

 .widning-image-section .img-container {
     background-image: url('https://craftohtml.themezaa.com/images/demo-branding-studio-services-01.jpg');
     background-size: cover;
     background-position: top;
     width: 100%;
     height: 80vh;
 }

 /* NAVBAR */
 .navbar-container {
     width: 100%;
     position: fixed;
     padding: 7px 20px;
     z-index: 9999;
 }

 .navbar-container .nav-item {
     padding-inline: 10px;
 }

 .navbar-container .nav-link {
     color: black !important;
     font-size: 1.3vw;
 }

 .navbar-container .logo {
     width: 120px;
 }

 .navbar-container .dropdown .dropdown-menu {

     display: none;
 }

 .navbar-container .dropdown:hover .dropdown-menu {
     display: block;
 }



 .navbar-container .navbar-collapse {
     flex-grow: 0;
 }

 .navbar-container .dropdown-item:active {
     color: var(--bs-dropdown-link-active-color);
     text-decoration: none;
     background-color: #00357A;
 }

 .navbar-container button.btn {
     border-radius: 7px;
     padding: 7px 30px;
     background-color: #00357a;
     color: white;

 }

 .navbar-container.scrolled {
     background-color: white;
     box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);
 }



 .navbar-container.scrolled .nav-link {
     color: black !important;
 }



 /* // FOOTER */
 footer {
     background-color: #040836;
     background-image: url(https://crafto.themezaa.com/marketing/wp-content/uploads/sites/10/2023/11/demo-marketing-footer-dot.svg);
     color: #fff;
     font-family: 'Segoe UI', sans-serif;
     padding-top: 80px;

 }

 footer .contact-info img {
     flex: 0;
     width: 20px;
 }

 .logo {
     width: 100%;
     max-width: 150px;
     border-radius: 20px;
 }

 .social-icon {
     width: 30px;
 }

 .btn-lime {
     background-color: #d5ff5d;
     color: black;
     font-weight: 500;
     border-radius: 30px;
     padding: 10px 25px;
     text-decoration: none;
     display: inline-block;
 }

 .btn-lime:hover {
     background-color: #c8f048;
     text-decoration: none;
     color: black;
 }

 .bg-lime {
     background-color: #d5ff5d !important;
 }


 /*  */
 @media screen and (max-width : 992px) {
     .widning-image-section .img-container {
         height: 350px;
     }

     .section-4 .cardd .content h6 {
         font-size: 2.5vw !important;
     }


     .section-4 .cardd .content p {
         font-size: 1.6vw !important;
     }

     .navbar-container {
         background: white;
     }

     .navbar-container .nav-link {
         font-size: 2vw;
     }
 }


 @media screen and (max-width : 768px) {
     .common-banner {
         padding-top: 130px;
     }

     .sub-head {
         font-size: 3.5vw;
     }

     /*  */
     .widning-image-section .img-container {
         height: 300px;
     }


     .section-4 .cardd .content h6 {
         font-size: 4vw !important;
     }

     .section-4 .cardd .content p {
         font-size: 3vw !important;
     }

     .navbar-container .nav-link {
         font-size: 3   vw;
     }
 }


 @media screen and (max-width : 576px) {
     .common-banner {
         padding-top: 90px;
         padding-left: 3vw;
     }


     .sub-head {
         font-size: 5vw;
     }


     .widning-image-section .img-container {
         height: 250px;
     }

     .navbar-container .nav-link {
         font-size: 4vw;
     }
 }