/* CSS Boilerplate */

/* 1. Import Fonts */
@font-face {
    font-family: 'Primary';
    src: url('../fonts/BMSHumanity-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bold';
    src: url('../fonts/BMSHumanity-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Semi-bold';
    src: url('../fonts/BMSHumanity-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Italic';
    src: url('../fonts/BMSHumanity-Italic.woff') format('woff2');
    font-weight: normal;
    font-style: italic;
}

/* Reusable Classes */
.font-primary {
    font-family: 'Primary', Arial, sans-serif;
}

.font-bold {
    font-family: 'Bold', Arial, sans-serif;
    
}

.font-semi-bold {
    font-family: 'Semi-bold', Arial, sans-serif;
   
}

.font-italic {
    font-family: 'Italic', Arial, sans-serif;
}

/* 2. Reset Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hidden {
    display: none;
}


html {

    /* none */
}

body {

    background-color: #ffffff;
   
}

h1 {
    font-size: 32px!important;
}

h2 {
    font-size: 2rem!important;
}

h3 {
    font-size: 24px!important;
}

p {
    font-size: 18px;
    margin-bottom: 0px!important;
}

p.sub-title {
    font-size: 24px!important;
    
}

p.small-font {
    font-size: 16px!important;
    margin-bottom: 0px!important;
}

a {
    font-family: 'Primary', Arial, sans-serif;
    text-decoration: none;
    color: #5F259F; /* Default link color */
    transition: color 0.3s ease;
    font-size: 18px;
}

a:hover {
    font-family: 'Primary', Arial, sans-serif;
    text-decoration: none;
    color: #E10098!important;
    transition: color 0.3s ease;

}


nav a.active {
    font-family: 'font-bold', Arial, sans-serif;
    font-weight: bolder;
}


a.topbar-link {
    font-family: 'Primary', Arial, sans-serif;
    text-decoration: none;
    color: #000000; /* Default link color */
    transition: color 0.3s ease;
    font-size: 13px;
}

a.nav-main {
    font-family: 'Primary', Arial, sans-serif;
    text-decoration: none;
    color: #5F259F; /* Default link color */
    transition: color 0.3s ease;
    font-size: 18px;
}

/* End reusable classes */


/* Responsive Media Queries */
@media (max-width: 768px) {
    html {
        font-size: 14px; /* Scale down font size on smaller screens */
    }
}

/* 6. Custom Utility Classes */
.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: 1rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

/* 7. Animations (Optional) */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 8. Additional Global Styles */
img {
    /* max-width: 100%;
    height: auto;
    display: block; */
}

ul {
    /* list-style: none; */
    font-size: 16px;
}


/* Starting css from source */

.placeholder-image {
    background-color: #ddd;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 1.5rem;
}

.st0 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #FFFFFF;
}

.st1 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #0066FF;
}

.st2 {
    fill: #FFFFFF;
}

.st3 {
    fill: #0066FF;
}

/* Ends css from source */

/* Start layout */


.hero-img {
    width: 100%; /* Image spans the full width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Removes unwanted gaps under the image */
}

.bg-hero-1 {
    background: url('../img/hero.png') no-repeat;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    width: 100%; /* Makes the element span the full width */
    height: 50vh;
}

.bg-hero-2 {
    background: url('../img/hero-2.png') no-repeat;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    width: 100%; /* Makes the element span the full width */
    /* height: 100vh;  Sets the height to the full viewport height */
}

.bg-hero-3 {
    background: url('../img/hero-3.png') no-repeat;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    width: 100%; /* Makes the element span the full width */
    /* height: 100vh;  Sets the height to the full viewport height */
}

.bg-hero-4 {
    background: url('../img/hero-4.png') no-repeat;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    width: 100%; /* Makes the element span the full width */
    /* height: 100vh;  Sets the height to the full viewport height */
}

.content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.content-wrapper--large {
    max-width: 1050px;
    margin: 0 auto;
    padding: 20px;
}

.content-wrapper--extra-large {
    max-width: 1280px;
    margin: 0 auto;
}


.border-box.blue {
    background-color: #ffffff;
    border-color: #6E519C;
    border-style: solid;
    border-width: 1.5px;
    padding: 20px;
}


.topbar {
    background: url('../img/topbar.png') no-repeat right top;
    height: 40px;
}

.topbar-mobile {
    background: url('../img/topbar-mobile.png') no-repeat right top;

}

.bg-purple-grad {
    background: linear-gradient(to bottom, #f3e6ff 0%, #f8f0ff 80%, #ffffff 100%);
}

.bg-blue-grad {
    background: linear-gradient(to bottom, #e6f7ff 0%, #f0f8ff 80%, #ffffff 100%);
 
}

.header-ribbon-container {
    position: relative; /* Establish a positioning context for the text */
    width: 100%; /* Ensure the container spans full width */
}

.responsive-img-ribbon {
    width: 100%; /* Make the image responsive */
    display: block; /* Remove unwanted inline space below the image */
}

.ribbon-text {
    position: absolute; /* Position the text over the image */
    top: 5%; /* Adjust as needed to move the text vertically */
    left: 5%; /* Adjust as needed to move the text horizontally */
    color: white; /* Ensure text is visible on the image */
    padding: 10px; /* Add padding for readability */
    font-size: 23px!important;
    line-height: 1.5; /* Improve readability */
    max-width: 39%; /* Limit text width for better layout */
    box-sizing: border-box; /* Include padding in width calculation */
}

.ribbon-text-2 {
    position: absolute;
    top: 8%;
    right: 80px;
    color: white;
    padding: 10px;
    font-size: 40px!important;
    line-height: 1.5;
    max-width: 50%;
    box-sizing: border-box;
    text-align: right!important;
}

.ribbon-text-3 {
    position: absolute; /* Position the text over the image */
    top: 100%; /* Adjust as needed to move the text vertically */
    left: 6%; /* Adjust as needed to move the text horizontally */
    color: white; /* Ensure text is visible on the image */
    padding: 10px; /* Add padding for readability */
    font-size: 37px; /* Adjust font size for responsiveness */
    line-height: 1.5; /* Improve readability */
    max-width: 39%; /* Limit text width for better layout */
    box-sizing: border-box; /* Include padding in width calculation */
}

.bg-ribbon {
    background: url('../img/ribbon.png') no-repeat;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.pos-relative {
    position: relative;
    width: 100%;
}

.pos-absolute {
    position: absolute;

}
  
.header-img {
    width: 100%;
    height: auto; 
}

.header-floating-text {
    position: absolute;
    bottom: 10%;
    right: 260px;
    color: #524A97;
    margin: 0;
    padding: 10px;
    max-width: 535px;
    text-align: left;
    font-weight: bold;
    line-height: 1.5;
    top: 325px;

}

.header-floating-text-box {
    position: absolute;
    bottom: 10%;
    right: 225px;
    color: #524A97;
    margin: 0;
    padding: 10px;
    max-width: 415px;
    text-align: left;
    font-weight: bold;
    line-height: 1.5;
    top: 15px;

}

.header-floating-logo {
    margin: 0;
    padding: 10px;

}
  
.header-floating-text a {
    color: #524A97;
    text-decoration: none;
    font-weight: bold;
    font-size: 32px!important;
}


.container-logo-inheader {
    position: absolute !important;
    top: 50px !important;
    bottom: 0px !important;
    left: auto !important;
    right: 105px !important;
    max-width: 420px !important;
    
}

.container-text-inheader {
    position: absolute !important;
    top: 250px !important;
    bottom: 0px !important;
    left: auto !important;
    right: 16px !important;
    max-width: 585px !important;
    
}

.container-logo-inheader-2 {
    position: absolute !important;
    top: 160px !important;
    bottom: 0px !important;
    left: auto !important;
    right: 181px !important;
    max-width: 420px !important;
    
}

.container-text-inheader-2 {
    position: absolute !important;
    top: 33px !important;
    bottom: 0px !important;
    left: auto !important;
    right: 16px !important;
    max-width: 585px !important;
    z-index: 1!important;
    
}

.bg-cloud-img {
    background: rgba(255, 255, 255, 0.5);
    /* backdrop-filter: blur(20px); */
    border-radius: 5px;
    /* filter: blur(2px); */
    box-shadow: 0px 0px 14px rgba(255, 255, 255, 0.8), 0px 0px 50px rgba(255, 255, 255, 0.5);
}

  
.header-floating-text a:hover {
    text-decoration: underline; /* Adds underline on hover */
}

.rounded-img-responsive {
    margin-top: -229px;
    z-index: 0;
}

.rounded-img-floating {
    position: absolute;
    top: 20px;
    left: 70px;
    width: 410px;
}

.rounded-img-floating-mob {
    position: absolute;
    top: 20px;
    left: 70px;
    width: 410px;
}

.rounded-img-floating-2 {
    position: absolute;
    top: 60px;
    right: 130px;
    width: 410px;
}

.rounded-img-floating-2-mob {
    position: absolute;
}

.rounded-img-floating-3 {
    position: absolute;
    top: 36px;
    left: 100px;
    width: 410px;
}

.rounded-img-2 {
    margin-left: 460px;
    margin-top: -196px;
}



.logo-bg-white {
    background: rgba(255, 255, 255, 0.5)!important;
    /* backdrop-filter: blur(20px)!important; */
    border-radius: 22px!important;
    /* filter: blur(2px); */
    box-shadow: 0px 0px 101px rgba(255, 255, 255, 0.8), 0px 0px 50px rgba(255, 255, 255, 0.5)!important;
}


  /* Generics styles */


.m-l-1 {
    margin-left: 10px;
 }

 .m-l-2 {
    margin-left: 20px;
 }

 .m-l-3 {
    margin-left: 30px;
 }

 .m-l-4 {
    margin-left: 40px;
 }


.m-r-1 {
   margin-right: 10px;
}

.m-r-2 {
    margin-right: 20px!important;
 }

 .m-r-3 {
    margin-right: 30px;
 }

 .m-r-4 {
    margin-right: 40px;
 }

.m-t-1 {
   margin-top: 20px;
}

.m-b-2 {
  margin-bottom: 10px!important;
}

.m-b-4 {
    margin-bottom: 40px!important;
}

.m-b-1 {
    margin-bottom: 20px;
  }

.p-l-1 {
   padding-left: 10px;
}

.p-r-1 {
  padding-right: 10px;
}

.p-t-1 {
  padding-top: 10px;
}

.p-b-1 {
 padding-bottom: 10px;
}

.p-l-r-1 {
    padding: 0px 10px 0px 10px!important;
   }

.m-t-2 {
    margin-top: 20px;
 }

.m-b-2 {
   margin-bottom: 20px!important;
}

.p-l-2 {
    padding-left: 20px;
 }

.p-r-2 {
   padding-right: 20px;
}

.p-t-2 {
   padding-top: 20px;
}

.p-b-2 {
  padding-bottom: 20px;
}

.m-r-3 {
   margin-right: 30px;
}

.m-t-3 {
   margin-top: 30px;
}

.m-b-3 {
  margin-bottom: 30px;
}

.p-l-3 {
   padding-left: 30px;
}

.p-r-3 {
  padding-right: 30px;
}

.p-t-3 {
  padding-top: 30px;
}

.p-b-3 {
 padding-bottom: 30px;
}


.m-r-4 {
   margin-right: 40px;
}

.m-t-4 {
   margin-top: 40px;
}

.m-b-3 {
    margin-bottom: 30px!important;
}

.m-b-4 {
  margin-bottom: 40px;
}

.p-l-4 {
   padding-left: 40px;
}

.p-r-4 {
  padding-right: 40px;
}

.p-t-4 {
  padding-top: 40px;
}

.p-b-4 {
 padding-bottom: 40px;
}

.m-l-r-1 {
    margin: 0 10px;
}

.m-l-r-2 {
    margin: 0 20px;
}

.m-t-b-1 {
    margin: 10px 0!important;
}

.m-t-b-2 {
    margin: 20px 0!important;
}

.m-t-b-3 {
    margin: 30px 0!important;
}

.m-t-b-4 {
    margin: 40px 0!important;
}

.m-0-auto {
    margin: 0 auto;
}

.p1 {
    padding: 10px;
}

.p2 {
    padding: 20px;
}

.p3 {
    padding: 30px;
}

.m1 {
    margin: 10px;
}

.m2 {
    margin: 20px;
}

.p-15 {
    padding: 15px;
}

.brand-color--purple {
    color: #5f259f;
}

.brand-color--pink {
   color: #E10098;
}

.brand-color--dark-grey {
    color: #414141;
}

.brand-color--grey {
    color: #707070;
}

.divider-grey {
    border: solid 1px #707070;
    margin-top: 40px;
    margin-bottom: 40px;
}

.marging-top-100-mob-50 {
    margin-top: 100px;
}

.mobile-only-780 {
    display: none;
 }




/* Responsive Queries */

.mobile-only {
    display: none!important;
 }

 .desktop-only {
    display: block;
 }


 .wrap-991--center {
    flex-wrap: nowrap;
 }

 .m-t-0-mob-4--991 {
    margin-top: 0px;
 }

 .m-l-4--mob-991 {
    margin-left: 40px;
 }

 .d-flex-column--mobile-only {
    display: flex;
    justify-content: flex-start;
 }

 .d-flex-center--mobile-only {
    display: flex;
    flex-direction: column;
 }

 .margin-t-4--desktop-only {
     margin-top: 40px;

 }


@media (max-width: 1580px) {

    /* .header-floating-logo {
        right: 190px!important;
        top: 70px!important;
        
    } */

    .header-floating-text {
        right: 90px!important;
        top: 285px!important;
        
     }
}

@media (max-width: 1330px) {
    .ribbon-text {
        font-size: 23px!important;
        top: 5%; /* Adjust text position for smaller screens */
        left: 3%; /* Adjust text position for smaller screens */
    }
}

@media (max-width: 1280px) {
    /* .header-floating-logo {
        right: 190px!important;
        top: 70px!important;
        
    } */

    .header-floating-text {
        right: 90px!important;
        top: 285px!important;
        
     }
}

@media (max-width: 1250px) {
    /* .header-floating-logo {
        right: 190px!important;
        top: 20px!important; 
    } */

    .header-floating-text {
        right: 90px!important;
        top: 215px!important;  
    }
}

@media (max-width: 1200px) {
    .ribbon-text {
        font-size: 23px!important;
        top: 5%; /* Adjust text position for smaller screens */
        left: 3%; /* Adjust text position for smaller screens */
    }
}

@media (max-width: 1180px) {
    /* .header-floating-logo {
        max-width: 300px;
        right: 310px!important;
        top: 50px!important;
    } */

    .header-floating-text {
        right: 90px!important;
        top: 215px!important;
        font-size: 26px!important;
    }

    .header-floating-text a {
        font-size: 26px!important;
    }

}

@media (max-width: 1130px) {
    /* .header-floating-logo {
        max-width: 300px;
        right: 235px!important;
        top: 50px!important;
    } */

    .header-floating-text {
        right: 0px!important;
        top: 215px!important;
        font-size: 26px!important;
    }

    .header-floating-text a {
        font-size: 26px!important;
    }
}

@media (max-width: 1100px) {
    .ribbon-text {
        font-size: 23px!important;
        top: 5%; /* Adjust text position for smaller screens */
        left: 3%; /* Adjust text position for smaller screens */
    }
}

@media (max-width: 1030px) {
    .ribbon-text {
        font-size: 21px!important;
        top: 5%; /* Adjust text position for smaller screens */
        left: 3%; /* Adjust text position for smaller screens */
    }

    .container-logo-inheader {
        top: 25px!important;
        
    }
    
    .container-text-inheader {
         top: 233px!important;
        /* left: auto!important;
        right: 20px!important;
        max-width: 500px!important; */
        /* background: url('../img/cloud-text-bg.png') no-repeat; */
    }
}

@media (max-width: 991px) {

    .d-flex-center--mobile-only {
        justify-content: center;
        align-items: center;
     }

    .margin-t-4-desktop--mob-2 {
        margin-top: 30px!important;
   
    }

    .d-flex-column--mobile-only {
        display: flex;
        flex-direction: column!important;
     }

    .m-t-0-mob-4--991 {
        margin-top: 40px!important;
     }
    
     .m-l-4--mob-991 {
        margin-left: 20px!important;
     }

    .rounded-img-responsive {
        margin-top: -132px;

    }

    .wrap-991--center {
        flex-wrap: wrap!important;
        justify-content: center!important;
     }


    .marging-top-100-mob-50 {
        margin-top: 50px!important;
    }

    .justify-content-start-mobile {
        justify-content: start!important;
    }

    h1 {
        font-size: 30px !important;
    }

    p {
        font-size: 16px!important;
    }

    .topbar-img {
        background: url('../img/topbar.png') no-repeat right!important;
    }

    .mobile-only {
        display: block!important;
    }

    .desktop-only {
        display: none!important;
    }

    .d-flex-center-mobile {
        flex-wrap: wrap!important;
        justify-content: center!important;
    }

    .d-flex-center-mobile--column {
        flex-wrap: wrap!important;
        justify-content: center!important;
        flex-direction: column!important;
        align-items: center!important;
    }

    .d-flex-center-mobile.subtracker {
        flex-wrap: wrap!important;
        justify-content: center!important;
        align-items: unset !important;
        flex-direction: unset !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .ribbon-text {
        font-size: 40px!important;
        top: 7%; /* Adjust text position for smaller screens */
        left: 3%; /* Adjust text position for smaller screens */
        max-width: 89%!important;
    }

    .ribbon-text-2 {
        position: absolute;
        top: 10%;
        right: 139px!important;
        max-width: 100%;
        text-align: left!important;
        font-size: 40px !important;
        left: 20px!important;
    }

    .rounded-img-floating-mob {
        top: 330px;
        left: 245px;
    }

    .ribbon-text-3 {
        top: 516px !important;
        left: 320px !important;
    }

    .rounded-img-floating-2-mob {
        top: 70px !important;
        right: 240px !important;
    }

    .rounded-img-floating-3-mob {
        position: absolute;
        top: -26px;
        left: 323px;
        width: 410px;
    }

}

@media (max-width: 780px) {

    .mobile-only-780 {
        display: block!important;
     }
    
    .ribbon-text {
        font-size: 23px;
        left: 1%; /* Adjust text position for smaller screens */
    }

    .ribbon-text-2 {
        position: absolute;
        top: 4%;
        right: 60px!important;
        max-width: 100%;
        text-align: left!important;
        font-size: 40px!important;
    }

    .rounded-img-floating-mob {
        top: 330px;
        left: 195px;
    }

    .ribbon-text-3 {
        left: 240px!important;
    }

    .rounded-img-floating-2-mob {
        top: 60px;
        right: 150px!important;
    }

    .rounded-img-floating-3-mob {
        position: absolute;
        top: -26px;
        left: 213px;
        width: 410px;
    }
}

@media (max-width: 720px) {
    .ribbon-text {
        font-size: 34px;
        left: 5%;
    }
}

@media (max-width: 620px) {
    .ribbon-text {
        font-size: 34px;
        left: 5%;
        top: 5%;
        font-size: 32px !important;
    }
}

@media (max-width: 480px) {

    .ribbon-text {
        font-size: 29px;
        left: 5%;
        max-width: 100%;
    }

    .ribbon-text-2 {
        right: 0px!important;
        text-align: center!important;
    }

    .rounded-img-floating-mob {
        top: 150px;
        left: 25px;
    }

    .ribbon-text-3 {
        top: 509px !important;
        left: 78px !important;
        max-width: 320px!important;
    }

    .rounded-img-floating-2-mob {
        top: 60px!important;
        right: 10px!important;
    }

    .rounded-img-floating-3-mob {
        position: absolute;
        top: -26px;
        left: 50px;
        width: 410px;
    }
}