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

@font-face {
  font-family: 'OCR A Std';
  src: url('/t/7/font/OCRAStd.otf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

/*--ds_green_color: #22b14c;*/
/*--ds_orange_color: #FF7F27;*/
/*--off_white_bg_color: #f2f2f2;*/

:root {
    --link_color: #272727;
    --off_white_bg_color: #f6f6f6;
    --ds_green_color: #22b14c;
    --ds_blue_color: #003F7D;
    --ds_orange_color: #FF8E00;
}

html {
    
}

body {
    font-family: 'Public Sans', sans-serif;
    font-size: 16px;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Roboto Slab', serif;
}

.decagon_font {
    font-family: 'OCR A Std';
    letter-spacing: 0;
    font-size: 21px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

.decagon_font a {
    text-decoration: none;
}

.decagon_font .deg{
    color: var(--ds_green_color);
}

.decagon_font .sw{
    color: var(--ds_orange_color);
}

#decagon_logo {
    width: 75px;
}

.container-fluid {
    max-width: 1250px !important;
}

.section_padding {
    padding: 70px 0;
}

#features_section {
    background-color: var(--off_white_bg_color); 
    /*background-image: url(/t/2803/img/slide_bg_1.png);*/
    background-size: contain;
}

/* Top Header Section */

#top_header_section {
    box-shadow: 0px 1px 6px 1px #c9c9c9;
    background-color: white;
    /*background-color: #ececec;*/
}


#top_header_section div.ds_header {
    padding: 5px 0;
}

#nav_menu {
    text-align: right;
}

#top_btn_div > a {
    display: inline-block;
}

#top_btn_div button.btn {
    border-radius: 0;
}

#top_btn_div button.btn:hover {
    color: white;
    background-color: var(--ds_green_color);
    border-color: var(--ds_green_color);
}

/* ul#nav_menu li.login a {*/
/*    border: 1px solid var(--ds_blue_color) !important;*/
/*    background-color: var(--ds_blue_color) !important;*/
    /*border-radius: 50% !important;*/
/*    color: white !important;*/
/*    display: block;*/
/*}*/

ul#nav_menu li.has_sub_menu ul.nav_sub_menu li.sub_menu_item:nth-child(1) a {
    /*border-radius: 0 10px 10px 10px !important;*/
}

ul#nav_menu {
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
}

ul#nav_menu li.has_sub_menu > span.sub_menu_text {
    cursor: pointer;
    /*border-radius: 10px 10px 0 0 !important;*/
}

ul#nav_menu li a, ul#nav_menu li.has_sub_menu > span.sub_menu_text {
    padding: 12px 15px;
    text-decoration: none;
    color: var(--link_color);
    font-family: 'Roboto Slab', serif;
    display: block;
    /*border-radius: 10px;*/
}

ul#nav_menu li.nav_item {
    display: inline-block;
    position: relative;
}

ul#nav_menu li.nav_item a:hover, ul#nav_menu li.has_sub_menu > span.sub_menu_text:hover {
    background-color: var(--ds_blue_color);
    color: white;
}

ul#nav_menu li.nav_item.nav_active > a, ul#nav_menu li.nav_item.nav_active > span.sub_menu_text {
    background-color: var(--ds_blue_color);
    color: white;
}

ul#nav_menu li.has_sub_menu ul.nav_sub_menu {
    list-style-type: none;
    display: none;
    position: absolute;
    margin: 0;
    background-color: #fff0;
    min-width: 150px;
    text-align: left;
    left: 0px;
    padding: 0;
    /*top: 32px;*/
    /* box-shadow: 0px 3px 4px -3px #000; */
}

ul#nav_menu li.has_sub_menu ul.nav_sub_menu li.sub_menu_item a:hover {
    background-color: var(--ds_blue_color);
    color: white;
}

ul#nav_menu li.has_sub_menu ul.nav_sub_menu li.sub_menu_item a {
    background-color: white;
    color: black;
    padding: 8px 0 8px 10px;
    display: block;
    font-size: 14px;
    position: relative;
    /*border-radius: 0 0px 10px 10px !important;*/
}

#marquee_fixed_section {
    background-color: var(--ds_blue_color);
    color: white;
}

#features_section div.swiper {
  width: 100%;
  height: auto;
}

.section_heading {
    text-align: center;
}

.heading_green_word {
    color: var(--ds_green_color);
    font-weight: bold;
}

.heading_blue_word {
    color: var(--ds_blue_color);
    font-weight: bold;
}


.heading_orange_word {
    color: var(--ds_orange_color);
    font-weight: bold;
}

.section_heading .border_half_span {
    /*border-bottom: 3px solid var(--ds_blue_color);*/
}

#traits_section {
    background-color: var(--ds_blue_color);
    color: white;
    /*background: linear-gradient(to right, #aed7ff, var(--ds_orange_color));*/
}

#traits_section .trait_card div.card-body {
    color: #636363;
}

#traits_section .trait_card h4 {
    color: var(--ds_blue_color);
}

#traits_section .trait_card {
    border-radius: 15px;
    margin-bottom: 35px;
    transition: all 0.3s linear;
    background-color: #ffffff;
    color: #636363;
    text-align: center;
    padding: 15px;
    border-color: #ffffff;
    height: calc(100% - 28px);
}

#traits_section .trait_card:hover {
    background-color: var(--off_white_bg_color);
    transform: translateY(-20px);
}

#traits_section .trait_card div.icon_div {
    text-align: center;
    margin-bottom: 25px;
}

#traits_section .trait_card div.icon_div svg {
    font-size: 41px;
    color: var(--ds_orange_color);
}

button.move_svg_btn svg {
    transition: transform 0.3s linear;
}

button.move_svg_btn:hover {
    color: white;
}

button.move_svg_btn:hover svg {
    transform: translate(10px, 0);
}

#traits_section button.btn.btn_know_more {
    border-radius: 8px;
    padding: 8px 23px;
}

#traits_section button.btn.btn_know_more svg {
    margin-left: 5px;
}


/* Nav Section */



/* Complete solution to your problems */

.swiper-pagination {
    position: relative;
}

#features_slideshow .swiper-pagination {
    bottom: 0;
}

.swiper-pagination-bullet-active {
    background-color: var(--ds_blue_color);
}

/* Slideshow Section */

button.orange_btn {
    background-color: var(--ds_orange_color);
    color: white;
    border-color: var(--ds_orange_color);
}

button.green_btn {
    background-color: var(--ds_blue_color);
    color: white;
    border-color: var(--ds_blue_color);
}

button.blue_btn {
    background-color: var(--ds_blue_color);
    color: white;
    border-color: var(--ds_blue_color);
}

#simplification_section {
    background-color: var(--off_white_bg_color);
    /*background-image: linear-gradient(to right, #003f7d, #ffffff 50%, #003f7d 100%);*/
    /*background-image: url(/t/2803/img/slide_bg_1.png);*/
    background-size: contain;
}


#simplification_section div.simplification_slide_wrapper {
    background-color: white;
    padding: 60px 40px;
    border: 1px solid #ccc;
    /*border: 1px solid #dedede;*/
    border-radius: 15px;
}

#simplification_section div.simplification_slide_wrapper h4 {
    color: var(--ds_blue_color);
}
    

#simplification_section .swiper-pagination {
    bottom: -2px;
}



#copyright_section {
    background-color: var(--off_white_bg_color);
    font-size: 13px;
    font-weight: bold;
}


#footer_section {
    font-size: 13px;
}

#footer_section b {
    color: var(--ds_blue_color);
}

#footer_section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#footer_section ul.terms_of_use_ul {
    display: flex;
    width: 100%;
    margin: 11px 0;
    text-align: center;
}

#footer_section ul.terms_of_use_ul li {
    flex: 1 1 auto;
}

#footer_section .social_media_icons svg {
    font-size: 30px;
    margin-right: 17px;
}

#footer_section a {
    color: black;
}


#main_slideshow .swiper-pagination {
    bottom: -2px;
}

#request_free_demo_btn_div {
    margin-bottom: 20px;
}



@media only screen and (max-width: 575px) {
    #decagon_logo {
        width: 65px;    
    }
    
    #top_header_section div.ds_header .decagon_font {
        font-size: 16px;
    }
}

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

    #top_btn_div button.btn {
        min-width: 100px;
    }
    
    #sildeshow_section {
        padding: 2rem 0;
    }
    
    #nav_menu {
        position: absolute;
        width: 100%;
        left: 0;
        transform-origin: top;
        transform: perspective(1000px) rotateX(-90deg);
        transition: 0.5s;
        padding: 0 !important;
    }
    
    #nav_menu.menu_open {
        transform: perspective(1000px) rotateX(0deg);
    }
    
    ul#nav_menu li.nav_item {
        display: block;
        text-align: left;
    }
    
    ul#nav_menu li.nav_item > a, ul#nav_menu li.has_sub_menu > span.sub_menu_text {
        border-bottom: 1px solid #acacac;
        background-color: #003f7d;
        color: #d4d4d4;
        position: relative;
    }
    
    ul#nav_menu li.has_sub_menu > span.sub_menu_text::after {
        content: '\f0d7';
        position: absolute;
        right: 10px;
        top: 50%;
        color: white;
        transform: translateY(-50%);
        font-weight: 600;
        font-family: 'Font Awesome 6 Free';
    }
    
    ul#nav_menu li a, ul#nav_menu li.has_sub_menu > span.sub_menu_text {
        /*border-radius: 0 !important;*/
    }
    
    ul#nav_menu li.has_sub_menu ul.nav_sub_menu {
        display: none;
        transition: display 0.4s ease;
        background-color: white !important;
    }
    
    ul#nav_menu li.has_sub_menu.nav_active ul.nav_sub_menu {
        position: static;
        display: block;
        padding: 0 0 0 40px;
    }
    
    ul#nav_menu li.has_sub_menu.nav_active ul.nav_sub_menu li.sub_menu_item a::before {
        position: absolute;
        content: '\f0da';
        left: -13px;
        font-weight: 600;
        font-family: 'Font Awesome 6 Free';
        color: var(--ds_blue_color);
    }
    
    #menu_toggle {
        display: block !important;
        text-align: center;
        padding: 4px 10px;
        margin-top: 2px;
        /*background-color: var(--ds_blue_color);*/
        /*color: white;*/
        text-align: center;
    }
    
    #menu_toggle .icon {
        cursor: pointer;
        font-size: 24px;
        color: #8b8b8b;
    }
}


@media only screen and (min-width: 768px) {
    ul#nav_menu li.has_sub_menu:hover ul.nav_sub_menu {
        display: block;
    }
    
    #sildeshow_section {
        padding: 3rem 0;
    }

    #top_btn_div button.btn {
        min-width: 150px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #top_header_section div.ds_header .decagon_font, #nav_menu {
        text-align: center;
    }
    
    #nav_column {
        background-color: #ececec;
    }
}

    

@media only screen and (max-width: 991px) {
    #request_free_demo_btn_div {
        text-align: center;
    }
    
    #top_btn_div {
        text-align: center;
    }
}

@media only screen and (min-width: 991px)and (max-width: 1110px) {
    .decagon_font {
        font-size: 18px;
    }
    #decagon_logo {
        width: 70px ;
    }
}