/* z-index */
        /* 1 - login title */
        /* 2 - login container */
        /* 3 - faq card  */
        /* 4- faq arrow */
        /* 1000 - header */
    *{
        padding:0;
        margin:0;
        scroll-behavior: smooth;
    }
    :root{
        /* color */
        --dark-grey:#45444E;
        --dark-blue:#193175;
        --light-blue:#2F6FE3;
        --green:#8BE6B9;
        --yellow:#F4B94A;
        --red:#B33032;
        --pink:#DB577A;
    
        /* fonts */
        --default-font-family: 'Poppins', sans-serif;
        /* desktop version */
        --desktop-header-font-size:80px;
        --desktop-subheader-font-size:32px;
        --desktop-paragraph-title-font-size:24px;
        --desktop-normal-font-size:18px;
        --desktop-footnote-font-size:12px;
        /* mobile version */
        --mobile-header-font-size:30px;
        --mobile-subheader-font-size:26px;
        --mobile-paragraph-title-font-size:20px;
        --mobile-normal-font-size:16px;
        --mobile-footnote-font-size:12px;
    }
    ::selection { /* WebKit/Blink Browsers */
      background: #45444E;
      color:#fff;
    }
    ::-moz-selection {/* Gecko Browsers */
      background: #45444E;
      color:#fff;
       
    }
    :target:before {
        content: "";
        display: block;
        height: 100px;
        margin: -80px 0 0;
    }
    
    html, body{
        background-color: #F9FAFC;
        /* overflow-x: hidden; */
        max-width: 100vw;
    }
    .desktop-only{
        display: block;
    }
    .mobile-only{
        display:none;
    }
    
    @media (max-width:765px) {
        .desktop-only{
            display:none !important;
        }
        .mobile-only{
            display: block ;
        }
    }
    a{
        color:#0056b2
    }
    /* general styling */
    /* button */
    .btn{
        padding:14px 25px;
        border:none;
        border-radius:70px;
        margin-top: 10px;
        outline:none;
        transition:all 1s ease-in-out;
        cursor: pointer;
        text-transform: uppercase;
        font-weight: 600;
        text-decoration: none;
    }
    @media (max-width:1024px){
        .btn{
        padding:10px 10px;
        font-size: 11px;
        height: auto;
        width: fit-content;
        }
    }
    .button-arrow{
      transition:all 0.3s linear;
      position:relative;
      left:0;
    }
    .btn:hover{
        box-shadow: 0 5px 20px rgb(0 0 0 / 30%);
    }
    .btn:hover .button-arrow{
        animation: move-arrow 
                0.5s
                ease-in-out
                infinite
                alternate
                both;
    }
    /* text highlight */
    .highlight-text{
        background-color: #45444E;
        color: #fff;
        padding:1px 5px;
    }
    /* slider */
    div.slider-container {
      overflow: scroll;
      white-space: nowrap;
      width:600px;
      max-width:942px;
      height: calc(fit-content +  10px);
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    div.slider-container::-webkit-scrollbar {
      display: none;
    }
    
    /* Hide scrollbar for IE, Edge and Firefox */
    div.slider-container {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
    .slider-container-card {
      display: inline-block;
      color: var(--dark-grey);
      text-decoration: none;
      background:#fff;
      text-align: left;
      padding:20px;
      max-width:600px;
      white-space: break-spaces;
      border-radius:10px;
      box-shadow:0 5px 6px rgb(0 0 0 /30%);
      margin: 20px 10px;
        vertical-align: middle;
    }
    .slider-arrow{
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 50%;
        position: relative;
        z-index: 4;
        border:3px solid #E8E8E8;
        color:#E8E8E8;
        transition: all 0.35s ease-in-out;
        cursor: pointer;
        font-size: 20px;
    }
    .slider-arrow:focus{
        outline: none;
    }
    .slider-arrow-left{
        left:20px;
    }
    .slider-arrow-right{
        right:20px;
    }
    .arrow-active{
        border:3px solid var(--light-blue);
        color:var(--light-blue)
    }
    .arrow-active:hover{
        box-shadow:0 5px 20px rgb(0 0 0 / 30%);
        transform: scale(1.03);
    }
    .arrow-disabled{
        cursor: not-allowed;
    }
    .slider-desc{
        display: block;
        margin: 0;
        position: relative;
        margin-top:-30px;
        font-size:18px;
        font-weight: 400;
    }
    .slider-title{
        display: block;
        margin: 0;
        position: relative;
        font-size: 18px;
        font-weight: 600;
    }
    .slider-fixes{
        justify-content: center;
        align-items: center;
    }
    @media (max-width:765px) {
        .slider-desc{
            font-size: 16px;
        }
        
    }
    
    body::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
        border-radius: 10px;
    }
    body::-webkit-scrollbar
    {
        width: 10px;
        background-color: #F5F5F5;
    }
    body::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        background-image: -webkit-gradient(linear,
                                           left bottom,
                                           left top,
                                           color-stop(0.44, rgb(122,153,217)),
                                           color-stop(0.72, rgb(73,125,189)),
                                           color-stop(0.86, rgb(28,58,148)));
    }
    /* #1.1 NavBar CSS */
    .header{
        height:75px;
        background:white;
        box-shadow:0 3px 10px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        position: -webkit-sticky;
        top:0;
        z-index:1000;
        transform: translate3d(0, 0, 200px);
        -webkit-transform: translate3d(0, 0, 200px);
    }
    .logo img{
        height:50px;
        margin-left:20px;
    }
    .header .sub-header {
        margin-right:20px;
    }
    .mobile-no-hightlight {
      -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome, Edge, Opera and Firefox */
    }
    .header .sub-header .sub-header-link{
        text-decoration: none;
        text-transform: capitalize;
        margin-left:20px;
        color:#3c3c3c;
        font-family:var(--default-font-family);
        font-size:14px;
        padding:22px 0;
        transition: all 0.3s ease-in-out;
        border-bottom:3px solid #fff;
    }
    .header .sub-header .sub-header-link:hover{
        border-bottom:3px solid #193175;
    }
    /* #1.1.1 Login Button CSS */
    .sub-header-btn-login{
        background: var(--dark-blue) 0% 0% no-repeat padding-box;
        border-radius: 40px;
        border: none;
        border-bottom: none !important;
        color: #fff !important;
        padding: 7px 25px !important;
        width: max-content;
    }
    .sub-header-btn-login:hover{
        border-bottom: none !important;
        box-shadow:var(--shadow-lvl2);
    }
    .sub-header-btn-login a{
        color:#fff;
        font-family:var(--default-font-family);
        font-size:14px;
        font-weight: 300;
        text-decoration: none;
        text-transform: capitalize;
        text-align: center !important;
    }
    /* #1.1.2 Logged in Profile Button CSS */
    .sub-header-login-div{
        display: inline;
    }
    .sub-header-logged{
        background: none;
        border: hidden !important;
        cursor: pointer;
        height: 75px;
        margin-left: 20px;
        outline: none !important;
        padding-right: 20px;
    }
    .sub-header-logged svg{
        overflow: visible !important;
    }
    /* #1.1.3 Dropdown CSS */
    .show { /* JS controlled display toggle */
      display: block !important;
    }
    .profile-dropdown-btn {
        display: inline-block;
        transition: all 0.35s ease-in-out;
        position: relative;
    }
    .dropdown-content {
        background-color: #eee;
        border-radius: 20px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        display: none;
        position: absolute;
        min-width: 250px;
        right: 0;
        z-index: 1;
    }
    .dropdown-content *{ /* select all dropdown elements */
        display: block;
        padding: 5px 25px;
        text-decoration: none;
        color: #000;
        text-align: left;
    }
    .dropdown-content-profile{
        background-color: var(--dark-blue);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        text-align: center;
        width: 100%; 
    }
    .dropdown-content-profile svg{
        display: inline-block;
        overflow: visible !important;
    }
    .dropdown-content-name{
        color: var(--dark-blue);
        font-family: var(--default-font-family);
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 5px;
        margin-top: 10px;
        padding-bottom: 0;
        text-align: center;
    }
    .dropdown-content-email{
        color: var(--dark-blue);
        font-family: var(--default-font-family);
        font-size: auto;
        font-weight: 300;
        margin-top: 0;
        padding-top: 0;
        text-align: center;
    }
    .dropdown-content-list{
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 5px;
    }
    .dropdown-content-list:hover{ /* not hovering first 3 dropdown elements  */
        background-color: #bbb;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
    }
    .dropdown-content-list svg{
        display: inline-block;
        overflow: visible;
        padding: 0;
        height: 30px;
        width: 30px;
    }
    .dropdown-content-list span{
        cursor: pointer;
        display: inline-block;
        font-family: var(--default-font-family);
        font-size: 16px;
        margin-left: 10px;
        padding: 0;
    }
    .drop-down-href{
        padding: 0;
        margin: 0;
        background-color: transparent;
        text-decoration-line: none !important;
    }
    /* #1.1.4 Mobile Dropdown CSS */
    .mobile-menu-checkbox{
        display: none;
    }
    .mobile-sub-header{
        position: absolute;
        right:0px;
        height: 60px;
        width: 60px;
        display: none;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
        transition: 0.35s all ease-in-out;
    }
    .mobile-sub-header svg{
        height: 25px;
        fill:#999;
        pointer-events: none;
    }
    .mobile-menu-checkbox:checked ~.mobile-sub-header{
        background: #eee;
    }
    .mobile-menu-checkbox:checked ~.mobile-sub-header svg{
        fill:#444;
    }
    /* #1.1.5 Media Queries */
    @media (max-width:992px) { /* convert to mobile view on max-width 992px */
        /* #1.1.5.1 Media Queries for Header Elements */
        .header .sub-header .sub-header-link{
        margin-left:0;
        }
        .header{
            height: 60px;
        }
        .logo img{
            height: 36px;
        }
        .sub-header{
            display: none;
        }
        /* #1.1.5.2 Media Queries for checkbox Elements */
        .mobile-sub-header{
            display: flex;
        }
        .mobile-menu-checkbox:checked ~.sub-header{
            display: block;
            width: 100%;
            position: absolute;
            top: 60px;
            background: #fff;
            padding: 0 0 20px;
            left: 0;
            box-shadow: 0 5px 6px #00000030;
            border-radius: 0 0 10px 10px;
        }
        .mobile-separating-line{
            border-top:2px solid var(--dark-blue);
            margin: 10px;
        }
        .mobile-menu-checkbox:checked ~ .sub-header {
            /* background: #fff; */
            background: #eee;
        }
        .mobile-menu-checkbox:checked ~ .sub-header .sub-header-link{
            color: #3c3c3c;
            display: block;
            font-family: var(--default-font-family);
            padding: 5px 20px;
            text-decoration: none;
            text-transform: capitalize;
            transition: all 0.3s ease-in-out;
            font-size: 18px;
            margin: 20px 40px 0;
            border-bottom: none;
        }
        .mobile-menu-checkbox:checked ~ .sub-header .sub-header-link:first-child{
            margin-top: 10px;
            width: auto;
        }
        /* #1.1.5.3 Media Queries for dropdown Elements */
        .sub-header-btn-login{
            border-radius: 10px;
            margin-top: 10px;
            padding: 8px;
            width: 100%;
            text-align: center;
        }
        .dropdown-content-name {
            color: var(--dark-grey);
            font-weight: 600;
            text-align: left;
            padding: 0 20px;
        }
        .dropdown-content-email {
            /* color: var(--dark-blue); */
            /* text-align: center; */
            color: var(--dark-grey);
            text-align: left;
            padding: 0 20px;
        }
        .profile-dropdown-btn{
            width: 100%;
        }
        .dropdown-content-profile {
            display: none;
            /* border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            margin-bottom: 10px;
            padding: 10px;
            width: 100%; */
        }
        .dropdown-content-list {
            margin: 20px;
            color: var(--dark-grey);
        }
        .dropdown-content-list p {
            color: #000;
            font-size: 14px;
        }
    }
    /* #1.2 Request Demo CSS */
    .demo-request-bg{
            background: rgb(25,49,117);
        background: linear-gradient(56deg, rgba(25,49,117,1) 0%, rgba(34,74,162,1) 63%, rgba(47,111,227,1) 100%);
        }
        .hide-demo-bar{
            display: none;
        }
        .demo-request-container{
            padding: 20px 0;
            color:#fff;
            font-family: 'Poppins';
        }
        .demo-request-btn,
        .demo-request-btn:hover{
            color:#fff;
            display: flex;
            align-items: center;
            cursor: pointer;
            text-decoration: none;
            
        }
        .demo-request-btn svg {
            height: 20px;
            margin-left: 10px;
            fill: #fff;
        }   
    
    
    .main-banner{
        height: calc( 100vh - 75px );/* minus header height */
        background: rgb(25,49,117);
        background: linear-gradient(143deg, rgba(25,49,117,1) 0%, rgba(34,74,162,1) 50%, rgba(47,111,227,1) 100%);
        clip-path: polygon(
            0 0, /* left top */
            100% 0, /* right top */ 
            100% 100%, /* right bottom */
            0 90% /* left bottom */
        );
        background-image: url("/images/main-banner-desktop.png"),linear-gradient(143deg, rgba(25,49,117,1) 0%, rgba(34,74,162,1) 50%, rgba(47,111,227,1) 100%);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
    }
    .logged-in-user{
        text-align: center;
    }
    .main-banner-alignment{
        position: relative;
        top:50%;
        transform: translateY(-50%);
    }
    .main-banner-text-container{
        font-family: 'Poppins', sans-serif;
        color:#f3f3f3;
        overflow: auto;
    
    }
    .main-banner-title{
        font-size: 30px;
        font-weight: 600;
        transition: all  0.35s ease-in-out;   
    }
    .main-banner-title-logged-in{
        font-size: 40px;
        font-weight: 600;
        margin-bottom: 25px;
    }
    .main-banner-desc{
        transition: all  0.35s ease-in-out;  
        font-size: 20px;
        font-weight:200 ;
        margin-top: 10px;
    }
    .main-banner-desc-logged-in{
        font-size: 24px;
        font-weight: 200;
        margin-top: 10px;
        max-width: 600px;
        margin: auto;
    }
    .main-banner-scroll-down{
        display: none;
    }
    .main-banner-scroll-down-active{
        display: block;
    }
    .main-banner-scroll-down svg{
        height: 20px;
        fill:#fff;
        display: block;
        margin: 40px auto;
        position: relative;
        animation: floating-div 1s ease-in-out infinite alternate both;
    }

    .floating-btn{
        z-index: 10;
        font-size: 18px;
        font-family: var(--default-font-family);
        position: fixed;
        bottom: 0;
        right: 0;
        background: #2C64CF;
        padding: 20px;
        width: 100%;
        color: #fff;
        box-shadow: 0 -5px 6px #00000030;
        text-align: center;
        border-radius: 10px 10px 0 0;
    }

    .header-btn{   
        cursor: pointer;     
        padding: 10px 35px;
        background: #FFF;
        width: max-content;
        margin: 60px auto;
        color: var(--dark-blue);
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 6px #00000030;
        border-radius: 40px;
        font-family: var(--default-font-family);
        font-weight: 600;
    }
    @media (min-width:2560px) {
        .main-banner{
        background-size: contain;
    }
    }
    @media (max-width:765px) {
        /* .main-banner-title{
            font-size: 28px; 
            line-height: 30px;
        }
        .main-banner-desc{  
            font-size: 16px;
            line-height: 20px;
        } */
        .main-banner-alignment {
            position: relative;
            top: unset;
            transform: none;
            padding-top: 20px;
        }
        .main-banner{
            clip-path: polygon(
            0 0, /* left top */
            100% 0, /* right top */ 
            100% 100%, /* right bottom */
            0 96% /* left bottom */
        );
        height: unset;
        }
        .main-banner-title,
        .main-banner-desc{
            text-align: center;
            font-size: 20px;
        }
        .main-banner-desc{
            font-size: 14px;
        }
        .main-banner-title-logged-in{
            font-size: 30px;
        }
        .main-banner-desc-logged-in{
            font-size: 16px;
        }
    }
    
    /* login box */
    .login-container{
        position: relative;
        animation: floating-div 1s ease-in-out infinite alternate both;
        font-family: var(--default-font-family);
        transition: all 0.35s ease-in-out;
        opacity: 1;
    }
    .login-container-hidden{
        animation: none;
        opacity: 0;
        position: relative;
        left: 100%;
        top: 60px;
        transform: translateX(-68%);
        display: none;
    }
    .login-container:hover,
    .login-container:active {
        animation-play-state: paused;
    }
    .login-title-container{
        background: #EAEAEA;
        display: flex;
        justify-content: center;
        width: 100%;
        border-radius: 10px 10px 0 0 ;
        cursor: pointer;
    }
    .login-title{
        background: #EAEAEA;
        padding: 20px 5px;
        width: 40%;
        border-radius: 0 10px 0 0;
        text-align: center;
        font-size: 12px;
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #45444E;
        font-weight: 400;
        justify-content: center;
    }
    a.login-title:hover{
        color: #45444E;
        text-decoration: none;
    }
    
    .login-title-active{
        background: #fff;
        border-radius: 10px 10px 0 0;
        box-shadow: 0px 7px 10px rgb(0 0 0 / 30%);
        position: relative;
        z-index: 1;
        width: 60%;
        font-size: 16px;
        font-weight: 600;
        color:#45444E;
    }
    .login-form-container{
        /* test */
        min-height:350px;
        /* end test */
        width: 100%;
        background: #fff;
        position: relative;
        z-index: 2;
        border-radius: 0 0 10px 10px;
        box-shadow: 0px 7px 10px rgb(0 0 0 / 30%);
        padding:20px;
    }
    .login-form-title{
        font-size: 16px;
        margin: 10px 0 5px 0;
    }
    .login-form-input, .login-form-input:-webkit-autofill{
        padding: 10px 5px;
        background-color: #eaeaea;
        outline: none;
        border: none;
        border-radius: 4px;
        width: 100%;
    }
    .password-container{
        display: flex;
        background-color: #E8F0FE;
        border-radius: 4px;
        margin-top: 5px;
        justify-content: center;
        align-items: center;
    }
    .login-form-input[type="password"]{
        width:80%;
        margin-top: 0;
    }
    .show-password{
        padding: 10px 5px;
        background-color: #E8F0FE;
        outline: none;
        border: none;
        width: 20%;
        border-radius: 0 4px 4px 0;
        font-size: 11px;    
        font-weight: 400;
        color: #252525;
        cursor: pointer;
        text-transform: uppercase;
    }
    .forgot-password{
        font-size: 14px;
        margin-top: 10px;
        display: block;
    }
    
    .login-TnC{
        display: flex;
        margin-top: 10px;
    }
    .login-TnC-desc{
        font-size: 11px;
        width: 90%;
        margin-left:15px;
    }
    
    .login-checkbox{
        position: relative;
        top: 4px;
    }
    .login-button, .login-button:disabled{
        position: relative;
        background-color: #2D6ADA;
        transition: none;
        /* font-weight: 400; */
        font-size: 14px;
        font-family: var(--default-font-family);
        color: #fff;
        /* position: relative;
        bottom:-20px; */
    }
    a.btn.login-button{
        color:#fff;
    }
    .login-button::after {
        content: '';
        display: block;
        width: 1.2em;
        height: 1.2em;
        position: absolute;
        left: calc(50% - 0.75em);
        top: calc(50% - 0.75em);
        border: 0.15em solid transparent;
        border-right-color: white;
        border-radius: 50%;
        animation: button-anim 0.7s linear infinite;
        opacity: 0;
      }
      
      @keyframes button-anim {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotate(360deg);
        }
      }
      
      .login-button.loading {
        color: transparent;
      }
      
      .login-button.loading::after {
        opacity: 1;
      }
    @media (max-width:765px) {
        .login-container{
            animation: none;
            margin-top:10px;
        }
        .login-title{
            padding:10px 5px;
        }
        .login-form-container{
            padding: 10px;
        }
    }
    /* ads banner */
    .promotion-banner-container{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin:40px auto 20px;
    }

    .promo-btn, .promo-btn:hover, .promo-btn:visited, .promo-btn:focus, .promo-btn:active{
        text-align: center;
        display: block;
        width: 200px;
        margin: 60px auto 0;
        padding: 10px 0;
        border: none;
        background: var(--blue);
        color: #fff;
        border-radius: 4px;
        text-decoration: none;
        cursor: pointer;
    }
    
    .corporate-promotion-banner{
        position: absolute;
        border-radius: 10px;
        width: 600px;
    }
    .corporate-promotion-banner-blur{
        height: 275px;
        width: 575px;
        background: rgb(0 0 0 / 50%);
        backdrop-filter: brightness(0.8) blur(10px) drop-shadow(0 5px 20px rgba(0, 0, 0, 0.5));
        box-shadow: 0 5px 20px rgb(0 0 0 / 30%);
        border-radius: 10px;
        text-align: center;
        z-index: 10;
    }
    
    .corporate-promotion-banner-blur-logged-in{
        visibility: hidden;
    }
    .banner-text-container{
        position: relative;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .banner-title{
        font-size: 27px;
        color:#fff;
        text-transform: uppercase;
        font-family: var(--default-font-family);
    
    }
    @media (max-width:765px) {
        .corporate-promotion-banner{
            width: 100%;
        }
        .corporate-promotion-banner-blur{
            height: 160px;
            width: 90%;  
        }
        .banner-title{
            font-size: 16px;
        }
        .btn{
            padding: 14px 20px;
            border: none;
            border-radius: 70px;
            margin-top: 10px;
            outline: none;
            transition: all 1s ease-in-out;
            cursor: pointer;
            text-transform: uppercase;
            font-weight: 600;
            text-decoration: none;
        }
        .login-button{
            background-color: #2D6ADA;
            /* font-weight: 400; */
            font-size: 14px;
            font-family: var(--default-font-family);
            color: #fff;
        }
    }
    
    /* review stars */
    .corporate-reviews{
        margin-top:50px;
    }
    .review-stars{
        height: 80px;
        margin:auto;
    }
    .review-title{
        font-size: 26px;
        font-family: var(--default-font-family);
        font-weight: 600;
        text-align: center;
        margin: 20px auto;
    }
    @media (max-width:765px) {
        .review-stars{
            width: 80%;
            height: auto;
        }
        .review-title{
            font-size: 23px;
        }
        
    }


    /* request Demo */
    .request-bg{
        background: rgb(25,49,117);
    background: linear-gradient(56deg, rgba(25,49,117,1) 0%, rgba(34,74,162,1) 63%, rgba(47,111,227,1) 100%);
    }
    .hide-demo-bar{
        display: none;
    }
    .request-container{
        padding: 20px 0;
        color:#fff;
        font-family: 'Poppins';
    }
    .request-btn,
    .request-btn:hover{
        color:#fff;
        display: flex;
        align-items: center;
        cursor: pointer;
        text-decoration: none;
        
    }
    .request-btn svg {
        height: 20px;
        margin-left: 10px;
        fill: #fff;
    }
    
    
    /* corporate services */
    /* services scroll fix */
    
    .scroll-fix {
        display: block;
        position: relative;
        top: -90px;
        visibility: hidden;
    }
    .corporate-services{
        margin: 70px auto;
        /* border:1px solid green; */
        font-family: var(--default-font-family);
    }
    .row-services{
        margin-top:40px;
    }
    @media (max-width:765px) {
        .row-services{
            margin-top:0px;
        }
        
    }
    .services-text-container:hover .services-button{
        box-shadow: 0 5px 20px rgb(0 0 0 / 30%);
    }
    .services-text-container:hover .button-arrow{
        animation: move-arrow 
                0.5s
                ease-in-out
                infinite
                alternate
                both;
    
    }
    .services-img-container{
        height: 140px;
    }
    .services-img-container2{
        height: auto
    }
    .services-img{    
        width: 80%;
        display: block;
        margin: auto;
    }
    .services-button {
        padding: 5px 20px;
        background-color: #8BE6B9;
        color: #193175;
        cursor: pointer;
        display: block;
        width: intrinsic;
        width: -moz-max-content;
        width: -webkit-max-content;
        align-self: center;
        position: absolute;
        bottom: 25px;
        margin-top: 10px;
        font-size: 14px;
    }
    .corporate-services-title{
        font-size: var(--default-font-family);
        font-size: 18px;
        font-weight: 600;
        text-transform: uppercase;
        margin:40px auto 20px;
        color: var(--dark-blue);
        text-align: center;
    }
    .corporate-services-card{
        box-shadow: 0px 0px 20px 0px #0000001a;
        padding: 15px;
        border-radius: 11px;
        margin-bottom: 40px;
    }
    .corporate-services-desc{
        font-size: 14px;
        min-height: 105px;
        text-align: center;
    }
    .corporate-services-desc2{
        font-size: 14px;
        min-height: 30px;
    }
    @media (max-width:765px) {
        .services-img{
            width: 60%;
            margin: 40px auto 0;
        }
        .services-text-container{
            text-align: center;
        }
        .corporate-services-title{
            margin:20px auto 10px;
        }
        .services-button{
            margin: 10px auto;
        }
        
    }
    /* corporate steps */
    .corporate-steps{
        background: #fff;
        clip-path: polygon(
            0 5%, /* left top */
            100% 0, /* right top */ 
            100% 120%, /* right bottom */
            0 110% /* left bottom */
        );
        height:auto;
        font-family: var(--default-font-family);
    }
    .steps-title, .FAQs-title, .featured-title{
        font-family: var(--default-font-family);
        font-size: var(--desktop-subheader-font-size);
        font-weight: 500;
        text-transform: uppercase;
        display: block;
        margin:40px auto 20px;
        color:var(--dark-grey);
        text-align: center;
    }
    .step-number{
        height: 60px;
        width: 60px;
        font-size: 32px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #EAF3FA;
        color: #fff;
        border-radius: 50%;
        transition: all 1s ease-in-out;
        margin:10px auto;
    }
    .step-container:hover .step-number{
        background-color: var(--green);
        box-shadow: 0 5px 6px rgb(0 0 0 / 30%);
    }
    .step-desc{
        padding:0 2%;
        color:#ccc;
        font-size: 16px;
        margin-top:20px;
        text-align:center;
        transition: all 1s ease-in-out;
    }
    .step-container:hover .step-desc{
        color:var(--dark-grey)
    }
    .step-container .step-desc .step-highlight{
        /* padding: 3px 5px; */
        transition: all 1s ease-in-out;
    }
    .step-container:hover .step-desc .step-highlight{
        background-color: var(--dark-grey);
        color: #fff;
        padding: 3px 5px;
    }
    .step-image img{
        width: 100%;
        /* filter: opacity(50%); */
    }
    .step-image{
        width:20%;
        margin:20px auto;
        transition: all 1s ease-in-out;
        filter: opacity(30%);
    }
    .step-container:hover .step-image{
        width:40%;
        filter: none;
    }
    .button-container{
        display: flex;
        justify-content: center;
    }
    .contact-pcc{
        background-color: #2D6ADA;
        /* font-weight: 400; */
        font-size: 14px;
        font-family: var(--default-font-family);
        color: #fff;
        margin: 20px auto 40px;
    }
    a.btn.contact-pcc:hover,
    a.btn.contact-pcc:visited,
    a.btn.contact-pcc:focus{
        color:#fff;
    }
    
    @media (max-width:765px) {
        .corporate-steps{
            clip-path: polygon( 0 2%, /* left top */ 100% 0, /* right top */ 100% 120%, /* right bottom */ 0 110% /* left bottom */ );
        }
        .step-container .step-image{
            width:40%;
            filter: none;
        }
        .step-container .step-desc{
        color:var(--dark-grey);
        line-height: 30px;
        }
        .step-container .step-desc .step-highlight{
            background-color: var(--dark-grey);
            color: #fff;
            padding: 3px 5px;
        }
        .step-container .step-number{
            background-color: var(--green);
            box-shadow: 0 5px 6px rgb(0 0 0 / 30%);
        }
    }
    
    /* page divider */
    .page-divider{
        height:100px;
        background-color: #ECEDEF;
        clip-path: polygon(
            0 0%, /* left top */
            100% 0%, /* right top */ 
            100% 40%, /* right bottom */
            0 80% /* left bottom */
        )
    }

    @media (max-width:765px) {
        .page-divider{
            display: none;
        }
    }
    
    /* FAQs */
    .faq-main-container{
        display: flex;
        align-items: center;
        margin: 20px auto;
        font-family: var(--default-font-family);
    }
    .corporate-faqs{
        scroll-padding-top: 50px;
        text-align: center;
        font-family: var(--default-font-family);
    }
    /* 
    .faq-arrow{
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 50%;
        position: relative;
        z-index: 4;
        border:3px solid #E8E8E8;
        color:#E8E8E8;
        transition: all 0.35s ease-in-out;
        cursor: pointer;
        font-size: 20px;
    }
    
    
    .faq-arrow-left{
        left:20px;
    }
    .faq-arrow-right{
        right:20px;
    }
    .arrow-active{
        border:3px solid var(--light-blue);
        color:var(--light-blue)
    }
    .arrow-active:hover{
        box-shadow:0 5px 20px rgb(0 0 0 / 30%);
        transform: scale(1.03);
    }
    .arrow-disabled{
        cursor: not-allowed;
    }
    .faqs-card-container{
        background-color:#fff;
        box-shadow:0 5px 20px rgb(0 0 0 / 15%);
        border-radius: 10px;
        padding:40px;
        width: 600px;
        height:300px;
        text-align: left;
        font-size: var(--desktop-normal-font-size);
    }
    
    .faq-question{
        min-height: 30%;
        font-weight: 600;
    }
    .faq-answer{
        min-height: 30%;
        font-weight: 300;
    } */
    
    /* featured */
    .featured-card {
        margin:5px;
        background: #fff;
    }
    .featured-card img{
        /* height:150px;
        width: 230px; */
    
        border-radius: 10px;
        transition: all 0.35s ease-in-out;
        cursor: pointer;
    }
    .featured-card img:hover{
        box-shadow: 0 5px 6px rgb(0 0 0 / 30%);
        transform: scale(1.05);
        background: #fff;
    }
    .feature-card-container{
        display: flex;
        justify-content: center;
    }
    .feature-scroll{
        padding: 20px 10px;
        margin: -20px -10px;
        width: 100%;
        overflow: scroll;
    }
    
    /* footer */
    .footer-main-container{
        background: #F6F6F6;
        margin-top:70px;
        padding: 20px;
        /* font-family: var(--default-font-family); */
    }
    
    .doctoroncall-logo-footer{
        display: block;
        height: 50px;
        margin-bottom: 10px;
    }
    
    .footer-title{
        font-weight: 600;
        color: var(--dark-blue);
        margin: 0 0 10px;
    }
    
    .footer-about-desc{
        width: 80%;
    }
    .footer-about-us{
        font-family: var(--default-font-family);
    }
    
    .footer-nav a{
        display: block;
        cursor: pointer;
        color:var(--dark-grey);
        text-decoration: none;
        text-transform: capitalize;
        margin-top: 5px;
        transition: all 0.35s ease-in-out;
    }
    
    .footer-nav a:first-child{
        margin-top:0;
    }
    .footer-nav a:hover{
        color: var(--light-blue);
        text-decoration: underline;
    }
    
    .footer-copyright{
        text-align: center;
        font-weight: 400;
        color:var(--dark-blue);
        margin:40px auto 70px;
    }
    .footer-link-wa{
        background-color: #075E54;
        color: #fff;
        padding:5px 15px;
        font-size: 10px;
        margin-left: 5px;
        border-radius: 20px;
    }
    .corporate-footer-title{
    font-weight: 600;
    font-family: var(--default-font-family);
    color: var(--dark-blue);
    margin:15px 0 10px;
    }
    .corporate-footer-text .footer-link{
        color:var(--dark-grey);
        margin:0 0 5px;
        transition: var(--transition);
        display: flex;
        align-items: center;
        font-family: var(--default-font-family);
    }
    .corporate-footer-text .footer-link:hover{
        color:var(--light-blue);
        text-decoration: underline;
        
    }
    .footer-link-img img{
        height: 30px;
        border-radius: 4px;
        margin-right:10px;
        transition: var(--transition);
    }
    .footer-link-img img:hover{
        transform: scale(1.2);
        box-shadow: var(--shadow-lvl1);
    }
    .footer-services-wrapper{
        display: flex;
        justify-content: space-around;
    }
    @media (max-width:992px) {
        .footer-services-wrapper{
            justify-content: flex-start;
        }
        .services-list{
            margin-right: 50px;
        }
    }
    @media (max-width:765px) {
        .footer-title{
            margin: 20px 0 10px;
        }
        /* .footer-logo{
            margin: 20px 0 0px;
        } */
        
    }
    /* animation */
    @keyframes move-arrow {
        0%{left:0;}
        100%{left:5px;}
    }
    @keyframes floating-div {
        0%{top:0}
        100%{top:10px}
    }
    
    /* DO NOT COPY */
    /* test scenario */
    .test-case{
        padding:20px;
        height:fit-content;
        width:fit-content;
        position: fixed;
        bottom:20px;
        right:0;
        background: white;
        border-radius:10px;
        box-shadow:0 5px 6px rgb(0 0 0 / 30%);
        transition: all .35s ease-in-out;
        z-index: 999999;
    }
    .button-container{
        margin:auto;
    }
    .button-container button{
        margin:15px;
        padding:5px 10px;
    }
    .chevron{
        display: none;
    }

    .floating-display-btn{
        display: flex;
        align-items: center;
        bottom: 0;
        margin: 0;
        position: fixed;
        width: 100%;
        z-index: 11;
        /* padding: 10px; */
        /* background: #fff; */
        /* border-top: 1px solid #eee; */
    }

    .floating-cont-book-btn, .floating-cont-book-btn:hover, .floating-cont-book-btn:active, .floating-cont-book-btn:focus {
        border: 1px solid #2c63cf;
        background-color: #2c63cf;
        /* border-radius: 4px; */
        color: #fff !important;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        display: inline-flex;
        width: 50%;
        height: 50px;
        align-items: center;
        justify-content: center;
        padding: 10px;
        text-decoration: none;
    }
    .floating-cont-book-btn2, .floating-cont-book-btn2:hover, .floating-cont-book-btn2:active, .floating-cont-book-btn2:focus {
        border: 1px solid #FFAC61;
        background-color: #FFAC61;
        /* border-radius: 4px; */
        color: #fff !important;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        display: inline-flex;
        width: 50%;
        height: 50px;
        align-items: center;
        justify-content: center;
        padding: 10px;
        text-decoration: none;
    }
    @media (max-width:765px) {
        .test-case{
            bottom:0;
            right: 0;
            width:100%;
            padding:10px 0 0;
            font-size:14px;
            box-shadow:0px -5px 5px 0px #00000014;
            text-align:center;
            opacity: 1;
            height: 35px;
    
        }
        .chevron{
            display: block;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 10px;
        }
        .chevron svg{
            height: 20px;
        }
        
        .button-container button{
            margin: 0;
            width: 50%;
        }
    }

    /* .cards-list {
        z-index: 0;
        display: flex;
        justify-content: space-around;
        position: relative;
      } */
      .card {
        width: auto;
        height: 440px;
        border-radius: 4px;
        
        align-self: center;
        border-style: none;
      }

      @media (max-width:992px) {
        .card{
            margin-top: 20px;
            height: 450px;
            padding: 20px;
        }
      }
      .card-services{
        display: flex;
        margin-bottom: 50px;
        background-color: #fff;
        font-family: var(--default-font-family);
      }
      .card_image{
        height: 200px;
        text-align: -webkit-center;
      }

      @media (max-width:1024px) {
        .card_image{
            height: 130px;
        }
    }
        @media (max-width:765px) {
            .card_image{
                height: 200px;
            }
        }