/* make visited a blue */
    .footer a:visited {
        color: #1E5EF3;
    }
    div.lg-hide {
        display: none;
    }

    .lg-40 {
        width: 40%;
    }

    .lg-50 {
        width: 50%;
    }

    /* 
    collapse
*/
    .collapsible-btn {
        color: #21283B;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        outline: none;
        font-size: 15px;
        background: linear-gradient(285.75deg, #FFFFFF 0%, #E1E8F8 80.27%);
        border: 1px solid #1E5EF340;
        margin-bottom: 15px;
        border-radius: 14px;
        font-family: "gilroy-semibold";
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .collapsible p {
        font-size: 14px;
    }

    .collapsible-btn .title {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .collapsible-btn .title.padding-expand .number {
        padding: 4px 6px;
    }

    .collapsible-btn .number {
        background: linear-gradient(135deg, #FFFFFF 14.37%, #D6E2FF 85.62%);
        font-size: 22px;
        padding: 4px 12px;
        border-radius: 50%;
        color: #1E5EF3;

    }

    .collapsible-btn.collapsible-active {
        margin: 0;
    }

    .collapsible-active,
    .collapsible-btn:hover {
        background-color: #555;
    }

    .collapsible {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        margin-bottom: 20px;
        background: linear-gradient(285.75deg, #FFFFFF 0%, #E1E8F8 80.27%);
        border-radius: 10px;
    }

    .collapsible p {
        padding: 10px;
    }

    .collapsible-btn:after {
        content: '\2304';
        color: #21283B;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    .collapsible-active:after {
        content: "\2303";
        color: #21283B;
        font-weight: bold;

    }


    /*
end collapse
*/



    .bold {
        font-weight: 500;
    }

    .price-item {
        margin-top: 15px;
    }

    .feature-content {
        width: 100% !important;
    }

    .feature-box {
        overflow: hidden;
    }




    .inline-block {
        display: inline-block;
    }



    .color-white {
        color: #fff;
    }

    .color-blue {
        color: #1E5EF3;
    }

    .text-blue {
        color: #21283B;
    }

    .text-gray {
        color: #4D4D4D;
    }

    .bg-blue {
        background: #1E5EF3;
    }

    .bg-blue-dark {
        background: #000421;
    }

    .bg-white {
        background: #fff;
    }

    .color-purple {
        color: #9CABFF;
    }

    .bg-purple {
        background: #dff1ff;
    }

    nav .btn {
        font-size: 14px !important;
        font-weight: 500 !important;
        padding: 8px 16px;
        cursor: pointer;
    }

    .btn-responsive {
        padding: 16px 32px !important;
        font-size: 17px !important;
    }

    .btn {
        padding: 12px 15px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        background: #1E5EF3;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .btn:hover {
        background: #355AC6;
        color: #ccc;
    }

    .btn.bg-trans {
        background: transparent;
        color: #1E5EF3;
        border: 1px solid #1E5EF3;
    }

    .btn.bg-trans:hover {
        background: #355AC6 !important;
        color: #fff;
    }

    .btn.bg-trans-white {
        background: transparent;
        color: #fff;
        border: 1px solid #fff;
    }

    .btn.bg-trans-white:hover {
        background: #fff !important;
        color: #1E3A8A;
    }

    .cart-btn {
        font-weight: 200;
        font-size: 14px;
        padding: 10px 60px;
        border-radius: 4px;
    }

    .text-center {
        text-align: center;
    }

    .text-left {
        text-align: left;
    }

    .text-11 {
        font-size: 11px;
    }

    .text-12 {
        font-size: 12px;
    }

    .text-14 {
        font-size: 14px;
    }

    .text-18 {
        font-size: 18px;
    }

    .text-16 {
        font-size: 16px;
    }

    .text-24 {
        font-size: 24px;
    }

    .text-36 {
        font-size: 36px;
    }

    .text-26 {
        font-size: 26px;
    }

    .text-45 {
        font-size: 45px;
    }

    .text-72 {
        font-size: 72px;
    }

    .text-56 {
        font-size: 56px;
    }


    .h-full {
        height: 100% !important;
    }

    .flex {
        display: flex;
    }

    .flex-col {
        flex-direction: column;
    }

    .items-center {
        align-items: center;
    }

    .items-start {
        align-items: start !important;
    }

    .justify-end {
        justify-content: flex-end;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-start {
        justify-content: start;
    }

    .justify-between {
        justify-content: space-between;
    }

    .justify-around {
        justify-content: space-around;
    }

    .gap-1 {
        gap: 5px;
    }

    .gap-5 {
        gap: 50px;
    }

    .gap-2 {
        gap: 20px;
    }

    .mb-5 {
        margin-bottom: 5px;
    }

    .mb-10 {
        margin-bottom: 10px;
    }

    .mb-20 {
        margin-bottom: 20px;
    }

    .mt-5 {
        margin-top: 5px;
    }

    .mt-10 {
        margin-top: 10px;
    }

    .mt-20 {
        margin-top: 20px;
    }


    .ml-5 {
        margin-left: 5px;
    }

    .ml-10 {
        margin-left: 10px;
    }

    .ml-20 {
        margin-left: 20px;
    }

    .mr-5 {
        margin-right: 5px;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .mr-15 {
        margin-right: 15px;
    }

    .mr-20 {
        margin-right: 20px;
    }

    .pt-5 {
        padding-top: 5px;
    }

    .pt-10 {
        padding-top: 10px;
    }

    .pt-20 {
        padding-top: 20px;
    }

    .pb-20 {
        padding-bottom: 20px;
    }

    .pb-10 {
        padding-bottom: 10px;
    }

    .pb-5 {
        padding-bottom: 5px;
    }

    .pl-5 {
        padding-left: 5px;
    }

    .pl-10 {
        padding-left: 10px;
    }

    .pl-20 {
        padding-left: 20px;
    }

    .pr-5 {
        padding-right: 5px;
    }

    .pr-10 {
        padding-right: 10px;
    }

    .pr-20 {
        padding-right: 20px;
    }

    .px-5x {
        padding-left: 5%;
        padding-right: 5%;
    }



    .p-5 {
        padding: 5px;
    }

    .p-10 {
        padding: 10px;
    }

    .p-30 {
        padding: 30px;
    }



    nav {
        padding: 0 0px;
        background-color: rgba(255, 255, 255, .5);
        width: auto;
        display: inline-block;
        margin: 30px auto !important;
        left: 50%;
        transform: translate(-50%, 0px);
    }

    nav a,
    nav .dropdown {
        color: #252525;
        padding: 20px 10px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    nav .dropdown a:last-child {
        margin-left: 0;
    }


    nav a:last-child {
        margin-left: 10px;
    }

    /* nav .dropdown:hover {
        display: inline-block;
        margin-top: 3px;
    } */

    .dropdown-content a {
        color: #252525;
        padding: 12px 18px;
        text-decoration: none;
        display: block;
        text-align: left;
        font-size: 12px;
    }

    .dropdown-content a:hover,
    nav a:hover {
        color: #1E3A8A;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        width: 230px;
        top: 40px;
        left: 10px;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 99;
        margin-top: 20px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .hero {
        height: 80vh;
    }

    nav,
    .hero-container {
        position: relative;
    }


    nav {
        z-index: 99;
    }



    .hero-container {
        z-index: 1;
        width: 100%;
        display: flex;
        gap: 15px;
        justify-content: space-between;
        align-items: center;
        /* margin-left: 10%; */
        background-image: url(../images/bgwave.png);
        width: auto;
        height: 80vh;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
    }

    .hero-container .title {
        max-width: 500px;
    }

    .nav-logo {
        width: 150px;
    }

    .bg-main-overlay {
        z-index: 0;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }



    .hero-img {
        background-image: url(../images/hero.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 70%;
        background-position: left;
        height: 100%;
        /* box-shadow: -30px 30px 60px 10px rgba(0, 0, 50, 0.1); */
        /* background-position: right; */
    }



    .hero-bg {
        background-image: url(../images/bgwave.png);
        width: 100%;
        height: 65%;
        background-size: cover;
        background-repeat: no-repeat;
    }




    .relative {
        position: relative;
    }

    .margin-0 {
        margin: 0;
    }

    .flex-col {
        flex-direction: column;
    }

    .jumpstart {
        border-radius: 15px;
        padding: 40px 0px;
        overflow: hidden;
        /* box shadow outer glow */
        box-shadow: 0px 17px 38px 0px #688BDF1A;
    }

    .left-to-right-bg {
        background: linear-gradient(285.75deg, #FFFFFF 0%, #E1E8F8 80.27%);
        border-bottom: 2px solid rgba(30, 94, 243, 0.25);
    }

    .right-to-left-bg {
        background: linear-gradient(285.75deg, #E1E8F8 0%, #FFFFFF 80.27%);
        border-bottom: 2px solid rgba(30, 94, 243, 0.25);
    }


    section.steps .smart-apply {
        background: linear-gradient(285.75deg, #FFFFFF 0%, #E1E8F8 80.27%);
        border-radius: 15px;
        border: 2px solid #1E5EF340;
        padding: 40px 20px;
    }

    section.steps .smart-apply .icon {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #FFFFFF 14.37%, #D6E2FF 85.62%);
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px;
        padding: 0px 10px;
    }




    .topnav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .topnav .nav-sec {
        display: flex;
        justify-content: center;
        align-self: center;
    }

    .topnav .icon {
        display: none;
        cursor: pointer;
    }

    .tags .joblist-tag {
        cursor: pointer;
        padding: 8px 12px;
        margin: 10px;
        border-radius: 5px;
        border: 1px solid white;
        font-size: 16px;
        font-weight: 400;
        width: auto;
        display: inline-block;
        color: #fff;
    }




    .job-strip {
        -webkit-animation: 90s linear infinite scroll;
        animation: 90s linear infinite scroll;
        width: calc(70px * 100)
    }

    .job-strip img {
        width: 50px;
        margin: 0 10px;
        padding: 10px
    }

    .pricing {
        /* box-shadow: 0px 20px 44px 0px #688BDF1A; */
        /* border: 1px solid #F2F6FF; */
        /* background: #E8EFFF; */
        /* border-radius: 18px; */
    }


    .price-header {

        padding: 36px 48px 36px 48px;
        border-radius: 12px;

    }

    .pricing hr {
        border: 1px solid #1E5EF340;
        border-bottom: none;
        border-left: none;
        border-right: none;
        width: 90%;
    }



    .price-footer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .price-footer .btn {
        width: 60%;
    }

    .additional-credit {
        background: white;
        border-radius: 20px;
        padding: 20px 40px;
        margin-left: 30px;
        margin-right: 30px;
    }

    .additional-credit ul,
    .credit-rollover ul {
        padding: 0;
    }

    .additional-credit ul li,
    .credit-rollover ul li {
        padding: 5px;
        color: #4D4D4D;
    }

    section.contact form input,
    section.contact form textarea {
        border: 1px solid #787C83;
        border-radius: 12px;
        height: 30px;
        font-size: 14px;
        font-weight: 300;
        font-family: 'Popins', sans-serif;
        color: black;
        width: 90%;
        padding-left: 12%;
    }

    section.contact form textarea {
        height: 100px;
        width: 100%;
        padding-left: 10px;
        resize: vertical;
        overflow: auto;
    }

    section.contact label {
        display: inline-block;
        width: 100%;
        position: relative;
    }

    section.contact .input-field .lbl {
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        display: inline-block;
        width: 100%;
        margin: 10px 0px;
    }

    .input-icon {
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 15px;
        width: 15px;
        display: inline-block;
        position: absolute;
        margin: 18px 15px
    }

    section.contact .icon-profile {
        background-image: url('../images/profile.svg');
    }

    section.contact .icon-email {
        background-image: url('../images/mail.svg');
    }

    section.contact .icon-phone {
        background-image: url('../images/phone.svg');
    }


    section.companies {
        padding: 10px 0;
        background: #fff;
    }

    section.features .feature-img {
        width: 100%;
        height: 400px;
    }

    section.features .feature-img div {
        background-size: contain;
        background-repeat: no-repeat;
        height: 400px;
        width: 100%;
    }

    .bg-stay-ahead {
        background-image: url('../images/stay-ahead.svg');
    }

    .bg-resume-resonate {
        background-image: url('../images/resume-resonate.svg');
    }

    .bg-application-submission {
        background-image: url('../images/application-submtted.svg');
    }

    .bg-preference-priority {
        background-image: url('../images/prefer-priority.svg');
    }

    .bg-seemless-job {
        background-image: url('../images/seemless-job.svg');
    }

    .bg-handsoff-interview {
        background-image: url('../images/handsoff-interview.svg');
    }

    .bg-automated-assistant {
        background-image: url('../images/automated-assistant.svg');
    }

    section.footer,
    .footer .bg-color {
        background: #E8EFFF;
        ;
        background-color: #E8EFFF;

    }

    section.footer .footer-social-icons div.icon {
        /* make round border */
        border-radius: 50%;
        padding: 10px;
        background-color: #1E5EF3;
        color: white;
        width: 15px;
        height: 15px;
        font-size: 15px;
        line-height: 15px;
        text-align: center;
    }


    section.contact {
        padding: 50px 0;
    }

    section.contact .img {
        background-image: url('../images/contact.png');
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        height: 400px;
        width: 450px;
        background-repeat: no-repeat;
    }

    section {
        padding: 50px 0;
    }

    .w-full {
        width: 100%;
    }

    .footer .footer-menu a {
        margin: 0px 10px;
    }

    .footer .logo img {
        width: 120px;
    }

    .footer .social img {
        width: 25px;
        margin: 0px 5px;
    }

    .hidden {
        display: none;
    }

    .sm-show-logo {
        display: none;
    }




    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0)
        }

        100% {
            transform: translateX(calc(-89px * 50))
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0)
        }

        100% {
            transform: translateX(calc(-89px * 50))
        }
    }

    /* .job-strip img:hover {
            animation: 2s infinite heartBeat
        } */



    @media screen and (max-width: 1600px) {

        .btn-responsive {
            padding: 12px 24px !important;
            font-size: 14px !important;
        }
    }











    /* css for product slider */
    .product-slider {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
    }

    .job-slide-wrapper {
        display: flex;
        overflow: hidden;
        width: 80%;
        margin: 0 auto;
        position: relative;
    }

    .card-slider{
        position: relative;
        width: calc(100% - 80px);
        margin: auto;
    }

     

    .slider-controls .slider-btn {
        cursor: pointer;
    }

    .slider-controls .slider-btn:hover svg {
        fill: #355AC6;
    }

    /* end product slider css */