@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Outfit:wght@400;500;600&family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500&display=swap');

/*------------------- INCLUDE COLOR THEME -------------------*/
/*------------------- INCLUDE SCSS FUNCTION -------------------*/
/*------------------- THEMING WEB COMPONENET -------------------*/
body {
    font-family: 'Merriweather', serif;
    font-family: 'Noto Sans', sans-serif;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Poppins', sans-serif;
    color: #333;
    /**************************************************** manipulate colors ********************************************************/
    /*Color Palatte*/
    --primary--colour: #101e40;
    --accent--colour: #2c4f79;
    --main--theme--colour--purple: #101e40;
    --text--main--theme--colour: #0f1c38;
    --primary--button--colour: #3e6399;
    --primary--button--hover--color: #4b78ad;
    --main--background--color: #f0f4f9;
    --main--text--colour: #333333;
    /***/
    --icon--colour: #2c4f79;
    /***/
    --body--background--navbar--right--col: #101e40;
    --body--background--navbar--left--col: #0f192f;
    --navbar--center--col: #0f192f;
    --body--background--img--col: #05112d;
    --hero--buttons--dark: #0f1c38;
    --hero--buttons--light: #ffffff;
    --hero--buttons--hov: #082978;
    --sidebar--initial--bg--col: #0a132998;
    --sidebar--final--bg--col: #0a142c;
    --sidebar--text--ico--col: #818181;
    --sidebar--text--ico--hover--col: #f1f1f1;
    --topbar--bg--col: #fff;
    --topbar--ico--bg--col: #1c3879;
    --topbar--ico--col: #ffffff;
    --heading--col: #1c3879;
    --greet--section--bg--col: #f1f1f1;
    --about--section--para--col: #525e6e;
    --about--section--bg--col: #e7ecf2;
    --value--section--bg--col: #152a55;
    --value--section--text--col: #e7ecf2;
    /*  --value--section--ico--col: #75a0da;*/
    --service--section--bg--col: #ffffff;
    --service--section--tab--active--bg--col: #e8aa42;
    --service--section--tab--active--text--col: #fff;
    --service--section--tab--no--hover--text--col: #000b1b;
    --service--section--tab--hover--text--col: #e8aa42;
    --service--section--para--col: #242424;
    --service--section--st--line--col: #7b9bbccf;
    --service--section--underline--col: #ede5bd;
    --register--section--bg--col: #f2f2f2;
    --register--section--buttons--dark: #26498e;
    --register--section--buttons--light: #dee8ff;
    --contact--section--bg--col: #e7ecf2;
    --contact--section--para--col: #242424;
    --footer--bg--col: #1C3879;
    --footer--text--col: #DADADA;
    --light--blue--col: #7495df;
    /************************************************************* manipulate size ****************************************************************/

    --sidebar--height: 250px;
    --sidebar--font--size: 1.6rem;
    --sidebar--ico--size: 30px; /*to change sidebar width go to script.js*/

    --body--background--img--height: 480px;
    --navbar--height: 60px;
    --intro--heading--size: 3.5rem;
    --intro--sub--heading--size: 1.5rem;
    --intro--button--size: 1rem;
    --intro--button--click--size: 0.9rem;
    --greet--section--head--size: 1.8rem;
    --greet--section--strong--size: 2.1rem;
    --greet--section--padding: 60px 10px;
    --about--section--heading--size: 2.7rem;
    --about--section--para--size: 1.3rem;
    --value--section--main--head--size: 2.8rem;
    --value--section--head--size: 1.6rem;
    --value--section--para--size: 1.1rem;
    --value--section--ico--size: 60px;
    --benefits--section--ico--size: 100px;
    --service--section--head--size: 2.8rem;
    --service--section--tab--size: 1.2rem;
    --service--section--tab--head--size: 1.5rem;
    --service--section--tab--para--size: 1.1rem;
    --register--button--normal--size: 1.4rem;
    --register--button--clicked--size: 1.3rem;
    --register--button--padding: 25px 60px;
    --register--heading--first--size: 2rem;
    --register--heading--last--size: 30px;
    --contact--section--head--size: 1.5rem;
    --contact--section--para--size: 1.3rem;
    --contact--section--form--label--size: 1.2rem;
}


/* More Custom CSS variables */

.cc-text-main-theme-colour {
    color: var(--text--main--theme--colour);
}

.cc-fontsize-2rem {
    font-size: 2rem !important;
}

.cc-fontsize-1_5rem {
    font-size: 1.5rem !important;
}

.cc-fontsize-1_2rem {
    font-size: 1.2rem !important;
}

.cc-fontsize-1rem {
    font-size: 1rem !important;
}

/* Custom Fonts */

.customfont-natosans {
    font-family: 'Noto Sans', sans-serif !important;
}

.customfont-merriweather {
    font-family: 'Merriweather', serif !important;
}

.customfont-opensans {
    font-family: 'Open Sans', sans-serif !important;
}

.customfont-poppins {
    font-family: 'Poppins', sans-serif !important;
}

.cc-custom-navbar-toggler {
    color: #0f1c38;
}

/* Overwriting bootstraps classes */

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815, 28, 56, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler {
    border: none !important;
}

.nav-link {
    color: var(--text--main--theme--colour) !important;
}

.form-control:focus {
    /* overwriting bs css */
    box-shadow: none !important;
}

.accordion-button:focus {
    /* overwriting bs css */
    box-shadow: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    /* overwriting bs css */
    outline: none !important;
    box-shadow: none !important;
}

/* Body CSS*/
body {
    overflow-x: hidden;
}

nav {
    z-index: 99 !important;
}

/* Navbar CSS */

.navbar-scroll {
    /*background: linear-gradient(45deg, var(--body--background--navbar--left--col), var(--body--background--navbar--right--col));*/
    background: var(--about--section--bg--col);
    box-shadow: 0 0 30px -20px #041220;
    transition: all 0.5s ease;
}

/* Hero banner CSS */

.hero-banner {
    background-image: url('../assets/img/hero-section.webp');
    width: 100%;
    height: 100%;
    /*background-image: radial-gradient(circle at 80% 50%, #26498e, #22407d, #1d376c, #192e5b, #15264b, #132244, #111f3e, #0f1b37, #0f1b37, #101b37, #101c38, #101c38);*/
    background-size: cover;
}

.hero-logo {
    max-width: 200px;
    height: auto;
    margin-top: 20px;
    margin-left: 10px;
}

.vanta-canvas { /* this class is the class of canvas populated by the vantajs library, vantajs doesnt support opacity so the canvas opacity is set explicitly here. */
    opacity: 20% !important;
}

.hero-contents {
    height: auto;
    padding-top: 4.5rem;
}

.hero-content-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.company-name {
    padding-top: 2rem;
    font-size: 3.5rem;
}

.hero-main-text {
    font-size: 2rem;
}

.hero-button-filled {
    border-radius: 25px !important;
    text-decoration: none !important;
    padding: 11px 12px !important;
    color: #f5f5f5 !important;
    background-color: var(--primary--button--colour) !important;
    font-size: var(--intro--button--size) !important;
    /* box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.502);*/
}

    .hero-button-filled:hover {
        color: #e7ecf2 !important;
        /*background-color: #f18642;*/
        background-color: var(--primary--button--hover--color) !important;
        /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.502);*/
    }

.hero-button-skeleton {
    border-radius: 25px !important;
    text-decoration: none !important;
    padding: 11px 12px !important;
    color: var(--primary--button--colour) !important;
    background-color: transparent !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: var(--primary--button--colour) !important;
    font-size: var(--intro--button--size) !important;
    /*box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.502);*/
}

    .hero-button-skeleton:hover {
        color: #e7ecf2 !important;
        /*background-color: #f18642;*/
        background-color: var(--primary--button--hover--color) !important;
        border-color: #f5f5f5 !important;
        /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.502);*/
    }


@media (max-width: 992px) {
    #custom-navbar {
        background: var(--about--section--bg--col);
        box-shadow: 0 0 30px -20px #041220;
        transition: all 0.5s ease;
    }
}


@media (max-width: 992px) {
    .hero-content-img {
        height: auto;
        max-width: 100%;
    }

    .company-name {
        padding-top: inherit;
        font-size: 2.5rem;
    }

    .hero-main-text {
        font-size: 1.2rem;
    }
}

@media (max-width: 820px) {
    hero-main-text {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .hero-description {
        text-align: center;
    }
}

@media (max-width: 320px) {

    body {
        max-width: auto !important;
        margin: auto !important;
        overflow-x: hidden !important;
    }


    .container {
        min-width: auto !important;
        margin: auto;
        overflow-x: hidden;
    }

    .hero-banner {
        min-width: 100%;
        margin: 0;
    }

    .hero-content-img {
        height: auto;
        width: 200px;
        overflow: hidden;
    }

    .company-name {
        padding-top: inherit;
        font-size: 1.5rem;
    }

    hero-main-text {
        font-size: 0.5rem !important;
    }
}



/* Section CSS */

.cc-light-section-bg { /* Light Background of a section */
    /* background-color: var(--about--section--bg--col);*/
    background-color: var(--main--background--color);
}

.cc-section-content-padding { /* Padding of a section */
    padding: 40px 0 40px 0;
}

.cc-section-color-dark { /* Text Color of Section with Light Background */
    color: var(--main--text--colour);
}


.cc-dark-section-bg { /* Dark Background of a section */
    background: linear-gradient(45deg, var(--body--background--navbar--left--col), var(--body--background--navbar--right--col));
}

.cc-section-color-light { /* Text Color of Section with Dark Background */
    color: var(--about--section--bg--col); /* Complmentary to light section bg color, caution while changing variable*/
}

/* Values CSS */

.icons-size {
    color: var(--icon--colour);
    font-size: var(--value--section--ico--size);
}


/* Services & Products */

.cc-knowmore-button {
    border-radius: 5px !important;
    text-decoration: none !important;
    padding: 0.5rem !important;
    color: var(--hero--buttons--light) !important;
    background-color: var(--hero--buttons--dark) !important;
    font-size: var(--intro--button--size) !important;
    border-color: var(--hero--buttons--dark) !important;
    border: none;
}

    .cc-knowmore-button:hover {
        color: var(--navbar--center--col) !important;
        /*background-color: #f18642;*/
        background-color: var(--hero--buttons--hov) !important;
    }


/* Footer CSS */


.footer-bg {
    background: var( --navbar--center--col) !important;
}


.contact-submit {
    background-color: #79a4b7 !important;
}

    .contact-submit:hover {
        background-color: #f08080 !important;
    }

.down-footer {
    background-color: var(--hero--buttons--dark) !important;
}

.footer-font {
    /*font-family: 'Noto Sans', sans-serif !important;*/
    font-family: 'Open Sans', sans-serif !important;
    /*font-family: 'Merriweather', serif !important; */
}

.footer-font-headings {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.2em;
    font-weight: 500;
    color: #eff7ff;
}

.footer-font-subheadings {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 0.9em;
    font-weight: 200;
    /*color: #eff7ff;*/
}

.cc-newsletter-submit-button {
    border-radius: 0 5px 5px 0 !important;
    text-decoration: none !important;
    padding: 0.5rem !important;
    color: var(--main--background--color) !important;
    background-color: var(--accent--colour) !important;
    font-size: var(--intro--button--size) !important;
    border-color: var(--accent--colour) !important;
    border: none;
}

    .cc-newsletter-submit-button:hover {
        color: #e7ecf2;
        /*background-color: #f18642;*/
        background-color: var(--primary--button--hover--color);
        /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.502);*/
    }

/* Adding this footer causes come fonts in rca page to change, so font-fix is used to fix those fonts */
.fix-font {
    font-family: "Poppins", sans-serif !important;
    text-transform: none !important;
}

@media screen and (max-width:760px) {
    .down-footer {
        font-size: 0.7em;
    }
}

/* Back to top button css starts*/
.back-to-top-btn {
    background-color: var(--accent--colour) !important;
    border-radius: 50% !important;
}

#btn-back-to-top {
    position: fixed;
    bottom: 120px;
    right: 20px;
    display: none;
}

/* Back to top button css ends*/


/* contact us div css starts*/

.contact-us-div {
    background-color: #fff;
    box-shadow: 0 10px 34px rgba(95,126,155,.18);
    border-radius: 5px;
}

.form-label {
}
/* contact us div css ends*/


/* Benefits of erca section starts*/

.big-icons-size {
    color: var(--icon--colour);
    font-size: var(--benefits--section--ico--size);
}
/* Benefits of erca section ends */

/* Bottom container of product section */

.custom-register-container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 2);
    padding-left: calc(var(--bs-gutter-x) * 2);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .custom-register-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .custom-register-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .custom-register-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .custom-register-container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .custom-register-container {
        max-width: 1320px;
    }
}
/* Bottom container of product section */


/* Products CSS */

.cc-products-ss {
    height: 10rem;
    object-fit: contain;
    border-radius: 7px;
}

@media (min-width: 700px) {
    .cc-products-ss {
        height: 12rem;
    }
}

/* features card css */

.cc-features-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 30px -20px #041220;
    height: 100%;
}

    .cc-features-card:hover {
        transform: scale(1.01);
    }

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .feature-card {
        width: 240px;
    }

    .card-image {
        height: 320px;
    }
}

.certificate-image {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
    margin-top: 5px;
}

@media (max-width: 576px) {
    .certificate-image {
        max-width: 40px;
    }
}

.hero-description {
    color: white;
}

    .hero-description * {
        color: inherit;
    }