﻿
body {
    font-family: sans-serif;
}

.navbar.main-nav {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0;
    background: linear-gradient(130deg, white 50%, #ecc319 calc(50% + 1px));
    /*  background-color: white;*/
}

.navbar ul li a:hover {
    /* color: #395297;*/
 /*   color: #537be9;*/

    transition: 0.2s ease-in-out;
    /* color: RGB(0,100,236);*/
}

.navbar .btn {
    font-size: 0.85rem;
    color: #3350a0;
}

.btn-outline-primary {
    color: #3350a0 !important;
    border-color: #3350a0 !important;
}

    .btn-outline-primary:hover {
        color: #fff !important;
        background-color: #3350a0 !important;
    }

#nav-bar {
    position: sticky;
    top: 0;
    z-index: 10;
}

.navbar-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.navbar ul li a {
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    color: #3350a0;
   /* color: black !important;*/
    /* color: RGB(0,100,236);*/
}

.text-center a {
    text-decoration: none;
}

#footer {
     background: linear-gradient(130deg, #3350a0 50%, #ecc319 calc(50% + 1px));
    /*background: #344a9c;*/
    padding-top: 10px;
    border-bottom: 1px solid #e8e8e8;
    border-top: 1px solid white;
    color: white;
}

.footer-section ul li a {
    text-decoration: none !important;
    color: white;
}

.footer-info {
    list-style-type: none;
}

.carousel-caption {
    top: 0;
    font-family: Verdana;
    font-size: 100px !important;
    font-weight: 900;
}

@keyframes slideLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}

@keyframes slideRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0%);
    }
}

.mob-container {
    background: linear-gradient(-130deg, #3350a0 50%, #ecc319 calc(50% + 1px));
    /* background-color: #3350a0;*/
}

/*#rcorners1 {
    border-radius: 25px;
    background: #ecc319;
    padding: 30px;
    width: 500px;
    height: 700px;*/
/* border: 1px solid #3350a0;*/
/*}*/

/*#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;*/
}

.container-benefits {
    /*  background: linear-gradient(-100deg, #3350a0 50%, #ecc319 calc(50% + 1px));*/
    /*  background-color: #3350a0;*/
    /*color: white;*/
}

/*.benefits-row{
    padding:50px;
}*/

.card-p {
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    transition: 0.5s;
    border: none !important;
    /*box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    transition: all 0.2s ease-in-out;*/
    box-sizing: border-box;
    border-radius: 5px;

    /*  color: white;*/
    transition: 0.5s;
    background-color: white !important;
    height: 400px !important;
}

    .card-p:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
        transition: transform .3s ease-out 0s;
        background: rgba(255, 255, 255, 0.1);
    }

   

.round-card-img {
    width: 13em;
    height:13em;
    /* width: 65%; */
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    /*   background-color:white;*/
}


.container-merchants {
    background: linear-gradient(-130deg, #3350a0 50%,#ecc319 calc(50% + 1px));
    color: white;
}

.merchants-row {
    padding: 10px;
}

.merchants {
    /* border-left: 4px solid white;*/
    /*  margin-top: 50px;
    margin-bottom: 50px;*/
}

    .merchants h5 {
        font-weight: 600 !important;
    }

/* .merchants p {
        color:#460303;
    }*/

.mer-img {
    border-radius: 50%;
    /*  margin-top:300px;*/
}

#testimonials {
    margin: 100px 0;
}

.testimonials {
    border-left: 4px solid white;
    margin-top: 50px;
    margin-bottom: 50px;
    color: white;
}

/*

    .testimonials img {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        margin: 0 10px;
    }
*/
#about {
    padding: 10px;
    /* background-color: #344a9c;*/
    background-color: red;
    background: #f5f6f8;
    color: white;
}

.users-card, .influ-card, .brand-card, .users-card1, .influ-card1, .brand-card1 {
    height: 150px;
    border-radius: 10px;
    border: none !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    transition: 0.5s;
    box-sizing: border-box;
    transition: 0.5s;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    /*    display: flex;
    align-items: center;
    justify-content: center;*/
}

.users-card {
    /* background-color: #b5c8fb;*/
    background:white;
    color:black;
    
}

.influ-card {
    /* background-image: linear-gradient(to right,#344a9c, #ec922d);*/
    background: white;
    color: black;
}

.brand-card {
    background: white;
    color: black;
}

.users-card1 {
    background: white;
    color: black;
}

.influ-card1 {
    background: white;
    color: black;
}

.brand-card1 {
    background: white;
    color: black;
}

.sidenav {
    /*    height: 400px;*/
    width: 230px;
    /*position: fixed;*/
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    /* padding-top: 100px;*/
}

    .sidenav a, .dropdown-btn {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 20px;
        color: black;
        display: block;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
        outline: none;
        font-size: 1.063rem;
        font-weight: 600;
    }


        .sidenav a:hover, .dropdown-btn:hover {
            /*  color:green;*/
        }

/* Main content */
/*.main {
    margin-left: 200px;*/ /* Same as the width of the sidenav */
/*font-size: 20px;*/ /* Increased text to enable scrolling */
/*padding: 0px 10px;
}*/

/* Add an active class to the active dropdown button */
/*.active {
    background-color: green;
    color: white;
}*/

.dropdown-container {
    display: none;
    /*    background-color: #262626;*/
    /*    padding-left: 8px;*/
}

    .dropdown-container a {
        color: #676666;
        font-size: 0.938rem;
    }

        .dropdown-container a:hover {
            color: black;
            font-weight: 700;
        }


.fa-caret-right {
    float: right;
    /*   padding-right: 18px;*/
    padding-top: 7px;
}



@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}


.a-card {
    background-color: #4b65ac !important;
}

.a-card1 {
    background-color: #edb225 !important;
}

.a-card2 {
    background-color: #5ca3d4 !important;
}

.a-card3 {
    background-color: #3c80bf !important;
}

.a-card4 {
    background-color:#ed902c !important;
}

.a-card5 {
    background-color: #e58161 !important;
}

.a-card, .a-card1, .a-card2, .a-card3, .a-card4, .a-card5 {
    border: none !important;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    /*margin-top: 10px;
    margin-bottom: 10px;*/
    border-radius: 5px;
    /*  background-color: #20c997;*/
    color: white;
    transition: 0.5s;
    height: 290px !important;
    /*  width:300px !important;*/
    padding: 10px;
    font-size:14px;
    font-family:Arial;
    /* height: 15.5em;*/
}

    .a-card a,.a-card1 a,.a-card2 a,.a-card3 a,.a-card4 a,.a-card5 a {
        text-decoration: none;
        color: white;
    }

        .a-card a:hover, .a-card1 a:hover, .a-card2 a:hover, .a-card3 a:hover, .a-card4 a:hover, .a-card5 a:hover {
            color: #2c3756;
        }

    .a-card:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }

    .a-card1:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }


    .a-card2:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }


    .a-card3:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }

    .a-card4:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }

    .a-card5:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }

.colon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
}

 .mob-card, .mob-card1 {
    border-radius: 25px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 600px;
}

.mob-card {
    background-color: #C9F4FB !important;
    border: 1px solid #C9F4FB !important;
}

.mob-card1 {
    background-color: #f9c6fa !important;
    border: 1px solid #f9c6fa !important;
}

.card-product {
    border: none !important;
}

.card1 {
    border: none !important;
}

.b-card {
    border-radius: 25px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 600px;
}

.p-right {
    font-size: 0.938rem !important;
    color: white;
    font-family: Verdana !important;
    font-weight: 200;
    line-height: 30px;
}

.p-left {
    /*    color: #455468;*/
    font-size: 1.125rem;
    /*  display: inline-block;
    margin: 0 0.5rem;
    animation: bounce; 
    animation-duration: 2s;*/
}

.fade-in {
    opacity: 0;
    transition: opacity 3s ease;
}

    .fade-in.active {
        opacity: 3;
    }

.slide-up {
    opacity: 0;
    transform: translateY(40%);
    transition: opacity 1s ease, transform 1s ease;
}

    .slide-up.active {
        opacity: 1;
        transform: translateY(0);
    }


.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    /*  border: 1px solid #f1f1f1;*/
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #f5f5f5;
    color: black;
}

/* Style the back side */
.flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
}

.right-align {
    text-align: right;
}


/*#admin-nav{
    display:none;
}*/

.ad-nav {
    font-size: 14px;
}

.navbar.admin-nav {
    background-color: black;
}
.admin_bar a {
    color: #fff;
    text-decoration: none;
}

.abt-us {
    text-align: justify;
    font-size: large;
    margin-block: 1.5rem;
    padding-top: 1rem;
    padding-inline: 1.5rem;
    font-family: 'Bookman Old Style';
}

    .abt-us .abt-us-content {
        border-radius: 16px;
        background-color: white;
        /*background: #eaecef;*/
    }


.terms {
    text-align: justify;
    font-size: large;
    margin-block: 1.5rem;
    padding-top: 1rem;
    padding-inline: 1.5rem;
}

    .terms .terms-content {
        border-radius: 16px;
        background: #eaecef;
    }


.privacy {
    text-align: justify;
    font-size: large;
    margin-block: 1.5rem;
    padding-top: 1rem;
    padding-inline: 1.5rem;
}

    .privacy .privacy-content {
        border-radius: 16px;
        background: #eaecef;
    }

.career {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: justify;
    color: #3350a0;
    font-family: 'Yu Gothic UI';
}

.step {
    margin-bottom: 20px;
    justify-content: center;
}

.career h3, .career h5 {
    color: #3350a0;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.career .highlight1 {
    background: #e9f7fe;
    border-left: 4px solid #007bff;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 16px;
}

.career .highlight2 {
    background: #f3e4cb8f;
    border-left: 4px solid #007bff;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 16px;
}

.career .highlight h5 {
    margin-top: 0;
}

.bottom {
    height: 50px;
}


.about-us {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: justify;
    color: #3350a0;
    font-family: 'Yu Gothic UI';
}

    .about-us h3, .about-us h5 {
        color: #3350a0;
        font-weight: 700;
        margin-bottom: 1.5rem;
    }

    .about-us .highlight1 {
        background: #e9f7fe;
        border-left: 4px solid #007bff;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 16px;
    }

    .about-us .highlight2 {
        background: #f3e4cb8f;
        border-left: 4px solid #007bff;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 16px;
    }

    .about-us .highlight h5 {
        margin-top: 0;
    }

.bottom {
    height: 50px;
}

.space{
    height:20px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.share_section {
    text-align: center;
}

.info_section .info_contact a {
    text-decoration: none !important;
    color: white !important;
}

.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

        /*when hovering an item:*/
        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.course-card {
    margin-top: 20px;
    /*  height: 50%;
    width:40%;*/
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    /* padding: 0 25px 25px 25px;
    justify-content: space-around;*/
    margin-bottom: 70px;
}

.contactUs-form select.form-control option {
    font-weight: bold;
}
/*Sajan*/
.videocontainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.videoresponsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}