/* Description: Master CSS file */
        /*****************************************
Table Of Contents:
- General Styles
- Navigation
- Header
- Services
- Details 1
- Details Modal
- Details 2
- Projects
- Testimonials
- Pricing
- Invitation
- Contact
- Footer
- Copyright
- Back To Top Button
- Extra Pages
- Media Queries
******************************************/
        /*****************************************
Colors:
- Backgrounds - light gray #f9f9f9
- Buttons - red #ff5574
- Buttons - blue #6168ff
- Headings text - black #222222
- Body text - dark gray #5e6576
******************************************/
        /**************************/
        /*     General Styles     */
        /**************************/
        
        @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400&family=Mitr:wght@200;300;400;500&family=Prompt:wght@100;300;400;500&display=swap');
        body,
        html {
            width: 100%;
            height: 100%;
        }
        /* body {
            background-color: #E5E5E5;
        } */
        
        h1 {
            color: #222222;
            font-weight: 700;
            font-size: 2.5rem;
            /* line-height: 3.25rem; */
            letter-spacing: -0.4px;
        }
        
        h2 {
            color: #222222;
            font-weight: 700;
            font-size: 2rem;
            line-height: 2.625rem;
            letter-spacing: -0.4px;
        }
        
        h3 {
            color: #222222;
            font-weight: 700;
            font-size: 1.75rem;
            line-height: 2.25rem;
            letter-spacing: -0.2px;
        }
        
        h4 {
            color: #222222;
            font-weight: 700;
            font-size: 1.5rem;
            line-height: 2rem;
            letter-spacing: -0.2px;
        }
        
        h5 {
            color: #222222;
            font-weight: 700;
            font-size: 1.25rem;
            line-height: 1.625rem;
        }
        
        h6 {
            color: #222222;
            font-weight: 700;
            font-size: 1rem;
            line-height: 1.375rem;
        }
        
        .p-large {
            font-size: 1.125rem;
            line-height: 1.75rem;
        }
        
        .p-small {
            font-size: 0.875rem;
            line-height: 1.5rem;
        }
        
        .testimonial-text {
            font-style: italic;
        }
        
        .testimonial-author {
            font-weight: 700;
            font-size: 1.25rem;
            line-height: 1.75rem;
        }
        
        .li-space-lg li {
            margin-bottom: 0.5rem;
        }
        
        a {
            color: #163583;
            text-decoration: underline;
            /* font-weight: bold; */
        }
        
        a teacher {
            color: #144ee0;
            text-decoration: underline;
            font-weight: bold;
        }
        
        a:hover {
            color: #5e6576;
            text-decoration: underline;
        }
        
        .no-line {
            text-decoration: none;
        }
        
        .no-line:hover {
            text-decoration: none;
        }
        
        .blue {
            color: #6168ff;
        }
        
        .bg-gray {
            background-color: #f9f9f9;
        }
        
        .section-title {
            display: inline-block;
            margin-bottom: 0.75rem;
            padding: 0.125rem 1.75rem;
            border-radius: 30px;
            background-color: #ffe7eb;
            color: #ff5574;
            font-weight: 600;
            font-size: 0.875rem;
        }
        
        .btn-solid-reg {
            display: inline-block;
            padding: 1.375rem 2.25rem 1.375rem 2.25rem;
            border: 1px solid #ff5574;
            border-radius: 30px;
            background-color: #ff5574;
            color: #ffffff;
            font-weight: 600;
            font-size: 0.875rem;
            line-height: 0;
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .btn-solid-reg:hover {
            background-color: transparent;
            color: #ff5574;
            /* needs to stay here because of the color property of a tag */
            text-decoration: none;
        }
        
        .btn-solid-lg {
            display: inline-block;
            padding: 1.625rem 2.625rem 1.625rem 2.625rem;
            border: 1px solid #ff5574;
            border-radius: 30px;
            background-color: #ff5574;
            color: #ffffff;
            font-weight: 600;
            font-size: 0.875rem;
            line-height: 0;
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .btn-solid-lg:hover {
            background-color: transparent;
            color: #ff5574;
            /* needs to stay here because of the color property of a tag */
            text-decoration: none;
        }
        
        .btn-solid-sm {
            display: inline-block;
            padding: 1rem 1.5rem 1rem 1.5rem;
            border: 1px solid #ff5574;
            border-radius: 30px;
            background-color: #ff5574;
            color: #ffffff;
            font-weight: 600;
            font-size: 0.875rem;
            line-height: 0;
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .btn-solid-sm:hover {
            background-color: transparent;
            color: #ff5574;
            /* needs to stay here because of the color property of a tag */
            text-decoration: none;
        }
        
        .btn-outline-reg {
            display: inline-block;
            padding: 1.375rem 2.25rem 1.375rem 2.25rem;
            border: 1px solid #5e6576;
            border-radius: 30px;
            background-color: transparent;
            color: #5e6576;
            font-weight: 600;
            font-size: 0.875rem;
            line-height: 0;
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .btn-outline-reg:hover {
            background-color: #5e6576;
            color: #ffffff;
            text-decoration: none;
        }
        
        .btn-outline-lg {
            display: inline-block;
            padding: 1.625rem 2.625rem 1.625rem 2.625rem;
            border: 1px solid #5e6576;
            border-radius: 30px;
            background-color: transparent;
            color: #5e6576;
            font-weight: 600;
            font-size: 0.875rem;
            line-height: 0;
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .btn-outline-lg:hover {
            background-color: #5e6576;
            color: #ffffff;
            text-decoration: none;
        }
        
        .btn-outline-sm {
            display: inline-block;
            padding: 1rem 1.5rem 1rem 1.5rem;
            border: 1px solid #5e6576;
            border-radius: 30px;
            background-color: transparent;
            color: #5e6576;
            font-weight: 600;
            font-size: 0.875rem;
            line-height: 0;
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .btn-outline-sm:hover {
            background-color: #5e6576;
            color: #ffffff;
            text-decoration: none;
        }
        
        .form-group {
            position: relative;
            margin-bottom: 1.25rem;
        }
        
        .form-control-input,
        .form-control-select,
        .form-control-textarea {
            width: 100%;
            padding-top: 0.875rem;
            padding-bottom: 0.875rem;
            padding-left: 1.5rem;
            border: 1px solid #5e6576;
            border-radius: 8px;
            background-color: #ffffff;
            color: #5e6576;
            font-size: 0.875rem;
            line-height: 1.5rem;
            -webkit-appearance: none;
            /* removes inner shadow on form inputs on ios safari */
        }
        
        .form-control-select {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            height: 3.5rem;
            color: #5e6576;
        }
        
        select {
            /* you should keep these first rules in place to maintain cross-browser behavior */
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            appearance: none;
            background-image: url('../images/down-arrow.png');
            background-position: 98% 50%;
            background-repeat: no-repeat;
            outline: none;
        }
        
        .form-control-textarea {
            display: block;
            height: 14rem;
            /* used instead of html rows to normalize height between Chrome and IE/FF */
        }
        
        .form-control-input:focus,
        .form-control-textarea:focus {
            border: 1px solid #000000;
            outline: none;
            /* Removes blue border on focus */
        }
        
        .form-control-input:hover,
        .form-control-textarea:hover {
            border: 1px solid #000000;
        }
        
        .form-control-submit-button {
            display: inline-block;
            width: 100%;
            height: 3.25rem;
            border: 1px solid #ff5574;
            border-radius: 30px;
            background-color: #ff5574;
            color: #ffffff;
            font-weight: 600;
            font-size: 0.875rem;
            line-height: 0;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .form-control-submit-button:hover {
            border: 1px solid #ff5574;
            background-color: transparent;
            color: #ff5574;
        }
        /**********************/
        /*     Navigation     */
        /**********************/
        
        .navbar {
            background-color: #ffffff;
            font-family: 'Prompt', sans-serif;
            font-weight: 400;
            font-size: 14px;
            line-height: 0.875rem;
            text-transform: uppercase;
            letter-spacing: normal;
            box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.05);
            border-bottom-style: solid;
            border-bottom-width: 3px;
            border-bottom-color: #959595;
        }
        /* .navbar .navbar-brand {
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
        } */
        
        .navbar .logo-image img {
            max-height: 50px;
        }
        
        .offcanvas-collapse {
            position: fixed;
            top: 3.25rem;
            /* adjusts the height between the top of the page and the offcanvas menu */
            bottom: 0;
            left: 100%;
            width: 100%;
            padding-right: 1rem;
            padding-left: 1rem;
            overflow-y: auto;
            visibility: hidden;
            background-color: #ffffff;
            transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
            transition: transform .3s ease-in-out, visibility .3s ease-in-out;
            transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
        }
        
        .offcanvas-collapse.open {
            visibility: visible;
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
        
        .navbar .navbar-nav .nav-item {
            border-right: 1px solid rgba(18, 66, 106, 0.45);
        }
        
        .navbar .navbar-nav .nav-item .nav-link {
            /* padding-top: 0.325rem;
            padding-bottom: 0.425rem; */
            color: #484848;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        
        .navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item {
            text-transform: none;
            color: #484848;
            font-weight: 400;
            font-size: 14px;
        }
        
        .navbar .nav-item.dropdown.show .nav-link,
        .navbar .navbar-nav .nav-item .nav-link:hover {
            font-weight: 500;
            color: #19568A;
        }
        
        .navbar .navbar-nav .nav-item.active>.nav-link {
            font-weight: 500;
            color: #19568A;
        }
        
        .navbar .navbar-toggler {
            padding: 0;
            border: none;
            font-size: 16px;
        }
        
        .navbar .btn-solid-sm {
            border-color: #89CFEF;
            background-color: #89CFEF;
        }
        
        .navbar .btn-solid-sm:hover {
            background-color: transparent;
            color: #89CFEF;
        }
        /*     Services     */
        
        .cards-1 {
            padding-top: 5rem;
            padding-bottom: 2.5rem;
        }
        
        .cards-1 p {
            margin-bottom: 1.325rem;
            font-family: 'Kanit', sans-serif;
            font-weight: normal;
            text-transform: uppercase;
            font-size: 20px;
            color: #19568A;
            border-bottom: 1px solid #000
        }
        
        .cards-1 .card {
            margin-bottom: 1rem;
            padding: 1.25rem;
            border: 1px solid #BFBFBF;
            border-radius: 4px;
            background-color: transparent;
        }
        
        .cards-1 .card-body {
            padding: 0;
        }
        
        .cards-1 .card-title {
            margin-top: 0.325rem;
            margin-bottom: 0.325rem;
            font-family: 'Kanit', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
        }
        
        .cards-1 .card-body .card-text {
            font-family: 'Kanit', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
        }
        
        .carousel {
            max-width: 960px;
        }
        
        .card-cart .card {
            width: auto;
            border: none;
        }
        
        .card-cart .card .card-body {
            background-color: #fff;
            align-items: center;
            filter: drop-shadow(2px 3px 8px rgba(0, 0, 0, 0.25));
            border-radius: 10px;
        }
        
        #barChart1 {
            background-color: #fff;
            min-height: 250px;
            height: 250px;
            max-height: 400px;
            max-width: 100%;
        }
        /*********************/
        /* Researchers */
        
        .card-2 {
            padding-top: 5rem;
            padding-bottom: 2.5rem;
        }
        
        .card-2 .title {
            margin-bottom: 1.325rem;
            font-family: 'Kanit', sans-serif;
            font-weight: normal;
            font-size: 22px;
            text-transform: uppercase;
            color: #19568A;
            border-bottom: 1px solid #19568A;
        }
        
        .card-2 span {
            font-family: 'Mitr', sans-serif;
            font-weight: normal;
            color: #484848;
            font-size: 24px;
            text-transform: uppercase;
        }
        
        .card-2 span ion-icon {
            color: #484848;
            font-size: 20px;
        }
        
        .card-2 a:link {
            text-decoration: none;
        }
        
        .card-2 .card {
            padding: 0;
            margin: 2rem;
            border-radius: 10px;
            max-width: 520px;
            cursor: pointer;
            border: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2)
        }
        
        .card-2 .card .card-image {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            width: 100%;
            max-height: 260px;
            object-fit: cover;
        }
        /* .card-2 .card .card-content {
            position: absolute;
            bottom: -180px;
            color: #ffffff;
            background: rgba(5, 66, 92, 0.541);
            backdrop-filter: blur(18px);
            min-height: 60px;
            width: 100%;
            transition: bottom .4s ease-in;
            box-shadow: 0 -10px 10px rgba(51, 51, 51, 0.1);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }*/
        
        .card-2 .card .card-body {
            position: absolute;
            margin-left: 8px;
        }
        
        .card-2 .card .card-body .card-title {
            margin-bottom: 0;
            font-family: 'Mitr', sans-serif;
            font-weight: 500;
            font-size: 14px;
            /* letter-spacing: 0.2px; */
            color: #2b2b2b;
        }
        
        .card-2 .card .card-body .card-title-2 {
            font-family: 'Mitr', sans-serif;
            font-size: 14px;
            font-weight: 400;
        }
        
        .card-2 .card .card-body .card-text-1 {
            margin-top: 16px;
            font-family: 'Mitr', sans-serif;
            line-height: 0.7;
            font-weight: 400;
            font-size: 12px;
            color: #2b2b2b;
        }
        
        .card-2 .card .card-body .card-text::before {
            content: ' \25CF';
        }
        
        .card-2 .card .card-body .card-text {
            font-family: 'Kanit', sans-serif;
            line-height: normal;
            font-weight: 300;
            font-size: 11px;
            color: #2b2b2b;
        }
        /* .card-2 .card .card-footer {
            text-align: right;
        }
        
        .card-2 .card .card-footer small {
            font-family: 'Mitr', sans-serif;
            font-weight: 200;
            font-size: 12px;
            color: #555555;
        } */
        /*********************/
        /*       refund      */
        
        .refund {
            padding-top: 5rem;
        }
        
        .refund p {
            font-family: 'Kanit', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            background: #065A7E;
            border: 1px solid #C4C4C4;
            box-sizing: border-box;
            color: #FFFFFF;
        }
        
        .refund .table-refund {
            padding-top: 2rem;
        }
        
        .table {
            width: 100%;
            margin-bottom: 0;
            overflow-x: auto;
        }
        
        .table thead th {
            font-family: 'Kanit', sans-serif;
            border-top: 0;
            border-bottom-width: 1px;
            font-weight: 500;
            font-size: 14px;
        }
        
        .table th,
        .table td {
            vertical-align: middle;
            line-height: normal;
            /* word-wrap: break-word; */
            /* white-space: nowrap; */
            padding: 1.1rem 0.9rem;
        }
        
        .table td {
            font-family: 'Kanit', sans-serif;
            font-weight: 300;
            font-size: 14px;
        }
        /*********************/
        /*     img     */
        
        .img-lg {
            width: 92px;
            height: 92px;
        }
        
        .img-sm {
            width: 43px;
            height: 43px;
        }
        
        .img-xs {
            width: 32px;
            height: 32px;
        }
        /*********************/
        /*     mixpaper     */
        
        .mixpaper {
            padding-top: 3rem;
            padding-bottom: 2.5rem;
        }
        /* .mixpaper .accordion-item .accordion-header{
            background-color: #19568A;
        } */
        
        .mixpaper .accordion .accordion-item .accordion-header .accordion-button {
            font-family: 'Kanit', sans-serif;
            font-size: 20px;
            color: #fff;
            background-color: #19568A;
            border: #fff 0.2 solid;
        }
        
        .mixpaper .accordion-item .accordion-header #headingOne {
            height: 50px;
            font-family: 'Kanit', sans-serif;
            font-style: normal;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
            color: #FFFFFF;
        }
        
        .mixpaper .accordion-item .accordion-body #number {
            text-align: center;
        }
        
        .mixpaper .accordion-item .accordion-body #number h6 {
            font-family: 'Kanit', sans-serif;
            font-weight: 300;
            font-style: normal;
        }
        
        .mixpaper .accordion-item .accordion-body #paper2 .hidden {
            font-family: 'Kanit', sans-serif;
            font-weight: 200;
        }
        
        .mixpaper .accordion-item .accordion-body #paper2 .hidden a {
            color: #19568A;
            text-decoration: none;
            font-weight: 300;
        }
        
        .mixpaper h3 {
            font-family: 'Kanit', sans-serif;
            font-style: normal;
            font-weight: normal;
            color: #19568A;
            font-size: 22px;
        }
        
        .mixpaper .text-container h4 {
            /* padding: 0.5rem 0.5rem 0.5rem 0.5rem; */
            font-family: 'Kanit', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 40px;
            text-align: center;
            color: #000000;
            border-radius: 4px;
            background-color: #BBDBF7;
            background-size: cover;
        }
        /*********************/
        /*     Research Group     */
        
        .card-3 {
            padding-top: 5rem;
            padding-bottom: 5rem;
            /* margin-left: 18%;
            margin-right: 18%; */
        }
        
        .card-3 p {
            margin-bottom: 2rem;
            font-family: 'Kanit', sans-serif;
            font-weight: normal;
            font-size: 22px;
            text-transform: uppercase;
            color: #19568A;
            border-bottom: 1px solid #19568A;
        }
        
        .card-3 .card {
            max-width: auto;
            border: 1px solid #BFBFBF;
            /* margin-left: auto;
            margin-right: auto; */
        }
        
        .card-3 .card img {
            margin-left: 2rem;
            width: auto;
            height: 200px;
            border-radius: 5px;
        }
        
        .card-3 .card .card-text-1 {
            margin-top: 1.5rem;
            margin-left: 2rem;
            font-family: 'Kanit', sans-serif;
            font-weight: 400;
            font-size: 16px;
            color: #19568A;
        }
        
        .card-3 .card .card-text-2 {
            margin-left: 2rem;
            padding-bottom: 2rem;
            font-family: 'Mitr', sans-serif;
            font-weight: 300;
            font-size: 14px;
            line-height: normal;
            color: #000;
        }
        
        .card-3 .card-body {
            padding: 2rem;
        }
        
        .card-3 .card-body h5 {
            font-family: 'Kanit', sans-serif;
            font-weight: 400;
            font-size: 18px;
            color: #19568A;
        }
        
        .card-3 .card-body h3 {
            font-family: 'Mitr', sans-serif;
            font-weight: 300;
            font-size: 14px;
            line-height: normal;
            letter-spacing: normal;
            color: #000000;
        }
        
        .card-3 .card a {
            font-family: 'Mitr', sans-serif;
            font-style: normal;
            font-weight: 300;
            font-size: 14px;
            text-decoration: none;
            position: absolute;
            bottom: 16px;
            right: 32px;
        }
        
        .card-3 .card-body .btn-outline-secondary:hover {
            color: rgb(255, 255, 255);
        }
        /*************************************/
        /*     card-Resrechgroup_detail     */
        /************************************/
        
        .card-4 .card {
            max-width: auto;
            max-height: max-content;
            border: 1px solid #BFBFBF;
            /* margin-left: auto;
            margin-right: auto; */
        }
        
        .card-4 .card img {
            width: auto;
            height: 200px;
            margin-left: 2rem;
            border-radius: 5px;
        }
        
        .card-4 .card .card-text-1 {
            margin-top: 2rem;
            margin-left: 2rem;
            font-family: 'Kanit', sans-serif;
            font-weight: 400;
            font-size: 16px;
            color: #19568A;
        }
        
        .card-4 .card .card-text-2 {
            margin-top: 1px;
            margin-left: 2rem;
            padding-bottom: 2rem;
            font-family: 'Mitr', sans-serif;
            font-weight: 300;
            font-size: 14px;
            line-height: normal;
            color: #000;
        }
        
        .card-4 .card-body {
            padding: 2rem;
        }
        
        .card-4 .card-body h5 {
            font-family: 'Kanit', sans-serif;
            font-weight: 400;
            font-size: 18px;
            color: #19568A;
        }
        
        .card-4 .card-body h3 {
            font-family: 'Mitr', sans-serif;
            font-weight: 300;
            font-size: 14px;
            line-height: normal;
            letter-spacing: normal;
            color: #000000;
        }
        
        .card-4 .card-body-research {
            margin-top: 15rem;
            padding: 2rem;
        }
        
        .card-4 .card-body-research p {
            font-family: 'Kanit', sans-serif;
            font-weight: 400;
            font-size: 18px;
            color: #19568A;
            border-bottom: 1px solid #ACACAC;
        }
        
        .card-4 .card-body-research .table thead th {
            font-family: 'Kanit', sans-serif;
            font-weight: 200;
            color: #000;
            padding: 0.5rem 0.5rem;
        }
        
        .card-4 .card-body-research .table thead th a {
            color: #19568A;
            text-decoration: none;
            font-weight: 300;
        }
        /*********************/
        /*     card-profile     */
        /*********************/
        
        .cardprofile .card {
            padding-top: 10px;
            min-height: 290px;
            height: 350px;
            border: none;
            background-color: #fff;
            /* align-items: center; */
            filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.25));
            border-radius: 4px;
            /* border-radius: 0; */
            /* border-bottom: 0.5px solid #4f4f4f; */
        }
        
        .cardprofile .card .card-image {
            max-height: 220px;  /* กำหนดขนาดสูงสุดของรูปภาพ */
            width: auto;  /* ใช้เต็มความกว้างของคอนเทนเนอร์ (คงขนาดให้เหมาะสมกับการแสดงผล) */
            border-radius: 4px;  /* ขอบมน */
            object-fit: cover;  /* ครอบรูปภาพให้พอดีกับกรอบโดยไม่ผิดเพี้ยน */
            margin: 16px 0 0 5px;  /* ระยะห่างจากด้านบนและด้านซ้าย */
            filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));  /* เงา */
        }
        
        
        .cardprofile .card .card-text {
            font-family: 'Mitr', sans-serif;
            font-style: normal;
            font-weight: 300;
            font-size: 16px;
            /* line-height: 28px; */
            display: flex;
        }
        
        .cardprofile .card .card-text1 {
            font-family: 'Mitr', sans-serif;
            font-style: normal;
            font-weight: 300;
            font-size: 14px;
            /* line-height: 28px; */
            display: flex;
        }
        
        .cardprofile .card .card-title {
            padding-top: 1.6rem;
            font-family: 'Mitr', sans-serif;
            font-style: normal;
            font-weight: 500;
            font-size: 16px;
            /* border-bottom: 1px solid black; */
        }
        
        .cardprofile .card .title-pub {
            margin-top: 16px;
            font-family: 'Kanit', sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            /* color: #19568A; */
        }
        
        .cardprofile .card .card-text2::before {
            content: ' \25CF';
        }
        
        .cardprofile .card .card-text2 {
            font-family: 'Mitr', sans-serif;
            font-style: normal;
            font-weight: 300;
            font-size: 14px;
        }
        /* .cardprofile .nav-tabs .nav-link {
            color: #19568A;
        } */
        
        .cardprofile .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            color: #FFFFFF;
            background-color: #19568A;
            border-color: #fff;
        }
        
        .cardprofile #barChart {
            font-size: 8px;
            margin: 10px;
            background-color: #ffffff;
            max-height: 160px;
            max-width: 90%;
            border-radius: 5px;
            border: 0.5px solid #ccc;
            padding: 12px;
        }
        
        .cardprofile .modal-content {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 60%;
            pointer-events: auto;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 0.3rem;
            outline: 0;
        }
        /*********************/
        /*     Details 1     */
        /*********************/
        
        .basic-1 {
            padding-top: 2.5rem;
            padding-bottom: 5rem;
        }
        
        .basic-1 .image-container {
            margin-bottom: 4rem;
        }
        
        .basic-1 h2 {
            margin-bottom: 1.875rem;
        }
        
        .basic-1 h2 span {
            font-weight: 400;
        }
        
        .basic-1 p:last-of-type {
            margin-bottom: 2rem;
        }
        
        .basic-1 .btn-solid-reg {
            cursor: pointer;
        }
        /*************************/
        /*     Details Modal     */
        /*************************/
        
        .modal-dialog {
            max-width: 1150px;
            margin-right: 1rem;
            margin-left: 1rem;
            pointer-events: all;
        }
        
        .modal-content {
            padding: 2.75rem 1.25rem;
        }
        
        .modal-content .btn-close {
            position: absolute;
            right: 10px;
            top: 10px;
        }
        
        .modal-content .image-container {
            margin-bottom: 3rem;
        }
        
        .modal-content img {
            border-radius: 6px;
        }
        
        .modal-content h3 {
            margin-bottom: 0.5rem;
        }
        
        .modal-content hr {
            width: 44px;
            margin-top: 0.125rem;
            margin-bottom: 1.25rem;
            margin-left: 0;
            height: 2px;
            border: none;
            background-color: #53575a;
        }
        
        .modal-content h4 {
            margin-top: 2rem;
            margin-bottom: 0.625rem;
        }
        
        .modal-content .list-unstyled {
            margin-bottom: 2rem;
        }
        
        .modal-content .list-unstyled .fas {
            font-size: 0.75rem;
            line-height: 1.75rem;
        }
        
        .modal-content .list-unstyled .flex-grow-1 {
            margin-left: 0.5rem;
        }
        
        .modal-content .btn-solid-reg {
            margin-right: 0.75rem;
        }
        
        .modal-content .btn-outline-reg {
            cursor: pointer;
        }
        /*********************/
        /*     Details 2     */
        /*********************/
        
        .counter {
            padding-top: 5rem;
            padding-bottom: 9.75rem;
        }
        
        .counter .text-container {
            margin-bottom: 4rem;
        }
        
        .counter h2 {
            margin-bottom: 1.875rem;
        }
        
        .counter h2 span {
            font-weight: 400;
        }
        
        .counter p {
            margin-bottom: 4rem;
        }
        
        .counter .counter-container {
            text-align: center;
        }
        
        .counter .counter-cell {
            margin-bottom: 3rem;
            color: #6168ff;
        }
        
        .counter .counter-cell.red {
            color: #ff5574;
        }
        
        .counter .purecounter {
            margin-bottom: 1.5rem;
            font-weight: 400;
            font-size: 3.5rem;
            line-height: 2rem;
        }
        
        .counter .purecounter:after {
            content: "+";
            margin-left: 0.5rem;
        }
        
        .counter .counter-info {
            font-size: 0.875rem;
            line-height: 1.5rem;
        }
        /********************/
        /*     Projects     */
        /********************/
        
        .filter {
            padding-top: 9.25rem;
            padding-bottom: 5.625rem;
            text-align: center;
        }
        
        .filter h2 {
            margin-bottom: 2.625rem;
        }
        
        .filter .button-group {
            margin-bottom: 1rem;
        }
        
        .filter .button {
            margin-bottom: 0.75rem;
            border: none;
            background-color: transparent;
            color: #222222;
            font-weight: 600;
            font-size: 1rem;
        }
        
        .filter .button:hover,
        .filter .button.is-checked {
            color: #ff5574;
        }
        
        .filter .grid {
            margin-right: auto;
            max-width: 351px;
            margin-left: auto;
        }
        
        .filter .element-item {
            margin-bottom: 3rem;
        }
        
        .filter .element-item a {
            text-decoration: none;
        }
        
        .filter .element-item img {
            margin-bottom: 1.125rem;
            border-radius: 8px;
            border: 1px solid #5e6576;
        }
        
        .filter .element-item p {
            text-align: left;
        }
        
        .filter .element-item p strong {
            color: #222222;
        }
        /************************/
        /*     Testimonials     */
        /************************/
        
        .slider-1 {
            padding-top: 9.75rem;
            padding-bottom: 4.5rem;
        }
        
        .slider-1 .slider-container {
            position: relative;
        }
        
        .slider-1 .swiper-container {
            position: static;
            width: 86%;
        }
        
        .slider-1 .swiper-button-prev:focus,
        .slider-1 .swiper-button-next:focus {
            /* even if you can't see it chrome you can see it on mobile device */
            outline: none;
        }
        
        .slider-1 .swiper-button-prev {
            left: -12px;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23707375'%2F%3E%3C%2Fsvg%3E");
            background-size: 18px 28px;
        }
        
        .slider-1 .swiper-button-next {
            right: -12px;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23707375'%2F%3E%3C%2Fsvg%3E");
            background-size: 18px 28px;
        }
        
        .slider-1 .card {
            border: none;
        }
        
        .slider-1 .card-body {
            padding: 0;
        }
        
        .slider-1 .quotes {
            margin-bottom: 3rem;
            width: 64px;
        }
        
        .slider-1 .testimonial-text {
            margin-bottom: 1.875rem;
            color: #838a9c;
            font-style: italic;
            font-size: 1.5rem;
            line-height: 2.25rem;
        }
        
        .slider-1 .testimonial-image {
            display: inline-block;
            width: 70px;
            margin-bottom: 0.875rem;
            border-radius: 50%;
        }
        
        .slider-1 .testimonial-author {
            margin-bottom: 0.125rem;
            color: #222222;
            font-weight: 700;
            font-size: 1.125rem;
        }
        /**********************/
        /*     Invitation     */
        /**********************/
        
        .basic-2 {
            padding-top: 3rem;
            text-align: center;
        }
        
        .basic-2 .text-container {
            padding: 5rem 1.5rem 5rem 1.5rem;
            border-radius: 28px;
            background: url('../images/invitation-background.jpg') center center no-repeat;
            background-size: cover;
        }
        
        .basic-2 h4 {
            margin-bottom: 2rem;
            color: #ffffff;
        }
        
        .basic-2 .p-large {
            margin-bottom: 0;
            color: #ffffff;
        }
        /*******************/
        /*     Contact     */
        /*******************/
        
        .form-1 {
            padding-top: 9.25rem;
            padding-bottom: 8.5rem;
            text-align: center;
        }
        
        .form-1 .h2-heading {
            margin-bottom: 1.125rem;
            text-align: center;
        }
        
        .form-1 .h2-heading span {
            font-weight: 400;
        }
        
        .form-1 .p-heading {
            margin-bottom: 0.375rem;
        }
        
        .form-1 .list-unstyled {
            margin-bottom: 3.5rem;
        }
        
        .form-1 .list-unstyled .fas {
            color: #6168ff;
        }
        /******************/
        /*     Footer     */
        /******************/
        
        .footer {
            position: relative;
            padding-top: 8.75rem;
            padding-bottom: 7.5rem;
            text-align: center;
        }
        
        .footer .decoration-city {
            position: absolute;
            bottom: 0;
            left: 0;
        }
        
        .footer div[class*="col"] {
            /* selects all elements which have classes starting with col */
            /* needed so that the absolute positioned decoration stays behind */
            position: relative;
        }
        
        .footer h4 {
            margin-bottom: 2rem;
        }
        
        .footer .fa-stack {
            width: 2em;
            margin-bottom: 1.25rem;
            margin-right: 0.375rem;
            font-size: 1.5rem;
        }
        
        .footer .fa-stack .fa-stack-1x {
            color: #222222;
            transition: all 0.2s ease;
        }
        
        .footer .fa-stack .fa-stack-2x {
            color: #ffffff;
            transition: all 0.2s ease;
        }
        
        .footer .fa-stack:hover .fa-stack-1x {
            color: #ffffff;
        }
        
        .footer .fa-stack:hover .fa-stack-2x {
            color: #222222;
        }
        /* .footer {
            width: 90rem;
            height: 20px;
            background: #19568A;
        } */
        /*********************/
        /*     Copyright     */
        /*********************/
        
        .copyright {
            padding-top: 1.75rem;
            border-top: 1px solid #d0dae2;
            text-align: center;
        }
        
        .copyright a {
            text-decoration: none;
        }
        
        .copyright .list-unstyled,
        .copyright .statement {
            opacity: 0.7;
        }
        
        .copyright .list-unstyled li {
            margin-bottom: 0.75rem;
        }
        /******************************/
        /*     Back To Top Button     */
        /******************************/
        
        #myBtn {
            position: fixed;
            z-index: 99;
            bottom: 20px;
            right: 20px;
            display: none;
            width: 52px;
            height: 52px;
            border: none;
            border-radius: 50%;
            outline: none;
            background-color: #44434a;
            cursor: pointer;
        }
        
        #myBtn:hover {
            background-color: #1d1d21;
        }
        
        #myBtn img {
            margin-bottom: 0.25rem;
            width: 18px;
        }
        /***********************/
        /*     Extra Pages     */
        /***********************/
        
        .ex-header {
            padding-top: 9rem;
            padding-bottom: 5rem;
            background-color: #f9f9f9;
        }
        
        .ex-basic-1 .list-unstyled .fas {
            font-size: 0.375rem;
            line-height: 1.625rem;
        }
        
        .ex-basic-1 .list-unstyled .flex-grow-1 {
            margin-left: 0.5rem;
        }
        
        .ex-basic-1 .text-box {
            padding: 1.25rem 1.25rem 0.5rem 1.25rem;
            background-color: #f9f9f9;
        }
        
        .ex-cards-1 .card {
            border: none;
            background-color: transparent;
        }
        
        .ex-cards-1 .card .fa-stack {
            width: 2em;
            font-size: 1.125rem;
        }
        
        .ex-cards-1 .card .fa-stack-2x {
            color: #6168ff;
        }
        
        .ex-cards-1 .card .fa-stack-1x {
            width: 2em;
            color: #ffffff;
            font-weight: 700;
            line-height: 2.125rem;
        }
        
        .ex-cards-1 .card .list-unstyled .flex-grow-1 {
            margin-left: 2.25rem;
        }
        
        .ex-cards-1 .card .list-unstyled .flex-grow-1 h5 {
            margin-top: 0.125rem;
            margin-bottom: 0.5rem;
        }
        /*************************/
        /*     Media Queries     */
        /*************************/
        /* Min-width 768px */
        
        @media (min-width: 768px) {
            /* Header */
            .header {
                padding-top: 9rem;
            }
            .header .h1-large {
                font-size: 2.75rem;
                line-height: 3.5rem;
            }
            /* end of header */
            /* Details 2 */
            .counter .counter-container {
                text-align: left;
            }
            .counter .counter-cell {
                display: inline-block;
                margin-right: 3rem;
                vertical-align: top;
            }
            /* end of details 2 */
            /* Contact */
            .form-1 .list-unstyled li {
                display: inline-block;
                margin-right: 1rem;
            }
            /* end of contact */
            /* Extra Pages */
            .ex-basic-1 .text-box {
                padding: 1.75rem 2rem 0.875rem 2rem;
            }
            /* end of extra pages */
        }
        /* end of min-width 768px */
        /* Min-width 992px */
        
        @media (min-width: 992px) {
            /* General Styles */
            .h2-heading {
                width: 35.25rem;
                margin-right: auto;
                margin-left: auto;
            }
            .p-heading {
                width: 46rem;
                margin-right: auto;
                margin-left: auto;
            }
            /* end of general styles */
            /* Navigation */
            .navbar {
                padding-top: 0.35rem;
                background-color: #ffffff;
                box-shadow: none;
                transition: all 0.2s;
            }
            .navbar.extra-page {
                padding-top: 0.5rem;
            }
            .navbar.top-nav-collapse {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                background-color: #ffffff;
                box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05);
            }
            .offcanvas-collapse {
                position: static;
                top: auto;
                bottom: auto;
                left: auto;
                width: auto;
                padding-right: 0;
                padding-left: 0;
                background-color: transparent;
                overflow-y: visible;
                visibility: visible;
            }
            .offcanvas-collapse.open {
                -webkit-transform: none;
                transform: none;
            }
            .navbar .navbar-nav {
                margin-top: 0;
                margin-bottom: 0;
            }
            .navbar .nav-item .nav-link {
                padding-right: 0.75rem;
                padding-left: 0.75rem;
            }
            .navbar .dropdown-divider {
                width: 90%;
            }
            .navbar .nav-item .btn-solid-sm {
                margin-top: 0;
                margin-left: 1rem;
            }
            /* end of navigation */
            /* Header */
            .header {
                padding-top: 13rem;
                text-align: left;
            }
            .header .text-container {
                margin-bottom: 0;
            }
            .header .btn-solid-lg {
                margin-right: 1.5rem;
                margin-bottom: 0;
            }
            .header .btn-solid-lg,
            .header .quote {
                display: inline-block;
            }
            /* end of header */
            /* Services */
            .cards-1 .card {
                display: inline-block;
                width: 298px;
                vertical-align: top;
            }
            .cards-1 .card:nth-of-type(3n+2) {
                margin-right: 1rem;
                margin-left: 1rem;
            }
            /* end of services */
            /* Details 1 */
            .basic-1 .image-container {
                margin-bottom: 0;
            }
            .basic-1 .text-container {
                margin-top: 1.25rem;
            }
            .basic-1 h2 {
                width: 23rem;
            }
            /* end of details 1 */
            /* Details Modal */
            /* Stops body and navbar shift on modal open */
            body.modal-open {
                overflow-y: scroll !important;
                padding-right: 0 !important;
            }
            body.modal-open .navbar {
                padding-right: 0 !important;
            }
            /* end of stops body and navbar shift on modal open */
            .modal {
                padding-right: 0 !important;
            }
            .modal-dialog {
                margin-top: 120px;
                margin-right: auto;
                margin-left: auto;
            }
            .modal-content .image-container {
                margin-bottom: 0;
            }
            /* end of details modal */
            /* Details 2 */
            .counter .text-container {
                margin-bottom: 0;
            }
            .counter .counter-cell {
                display: inline-block;
                vertical-align: top;
            }
            /* end of details 2 */
            /* Projects */
            .filter .button {
                margin-right: 0.25rem;
                margin-left: 0.25rem;
            }
            .filter .grid {
                max-width: 750px;
            }
            .filter .element-item {
                display: inline-block;
                width: 351px;
                margin-right: 0.625rem;
                margin-left: 0.625rem;
                vertical-align: top;
            }
            /* end of projects */
            /* Testimonials */
            .slider-1 .swiper-container {
                width: 92%;
            }
            .slider-1 .swiper-button-prev {
                left: -16px;
                width: 22px;
                background-size: 22px 34px;
            }
            .slider-1 .swiper-button-next {
                right: -16px;
                width: 22px;
                background-size: 22px 34px;
            }
            .slider-1 .details {
                display: flex;
                align-items: flex-start;
            }
            .slider-1 .text {
                flex-direction: column;
            }
            .slider-1 .testimonial-author {
                margin-top: 0.625rem;
            }
            .slider-1 .testimonial-image {
                margin-right: 1.125rem;
            }
            /* end of testimonials */
            /* Pricing */
            /* end of pricing */
            /* Invitation */
            .basic-2 .text-container {
                padding: 8rem;
            }
            /* end of invitation */
            /* Footer */
            /* end of footer */
            /* Copyright */
            .copyright {
                text-align: left;
            }
            .copyright .list-unstyled li {
                display: inline-block;
                margin-right: 1rem;
            }
            .copyright .statement {
                text-align: right;
            }
            /* end of copyright */
            /* Extra Pages */
            .ex-cards-1 .card {
                display: inline-block;
                width: 296px;
                vertical-align: top;
            }
            .ex-cards-1 .card:nth-of-type(3n+2) {
                margin-right: 1rem;
                margin-left: 1rem;
            }
            /* end of extra pages */
        }
        /* end of min-width 992px */
        /* Min-width 1400px */
        
        @media (min-width: 1400px) {
            /* General Styles */
            .container {
                max-width: 1320px;
            }
            /* end of general styles */
            /* Header */
            .header {
                overflow: hidden;
                padding-top: 18.25rem;
                padding-bottom: 11.5rem;
            }
            .header .image-container {
                position: relative;
            }
            .header .image-container img {
                position: absolute;
                top: -80px;
                left: 10px;
                width: 840px;
                max-width: none;
            }
            /* end of header */
            /* Services */
            .cards-1 .card {
                width: 300px;
            }
            .cards-1 .card:nth-of-type(3n+2) {
                margin-right: 2.5rem;
                margin-left: 2.5rem;
            }
            /* end of services */
            /* Details 1 */
            .basic-1 .image-container {
                margin-right: 3.5rem;
            }
            .basic-1 .text-container {
                margin-top: 5rem;
                margin-left: 2.75rem;
            }
            /* end of details 1 */
            /* Details Modal */
            .modal-content {
                padding-right: 2rem;
                padding-left: 2rem;
            }
            /* end of details modal */
            /* Details 2 */
            .counter {
                overflow: hidden;
                padding-top: 9rem;
            }
            .counter .image-container {
                position: relative;
            }
            .counter .image-container img {
                position: absolute;
                top: -60px;
                left: 30px;
                width: 900px;
                max-width: none;
            }
            /* end of details 2 */
            /* Projects */
            .filter .grid {
                max-width: 1120px;
            }
            /* end of projects */
            /* Testimonials */
            .slider-1 .swiper-button-prev {
                left: -24px;
            }
            .slider-1 .swiper-button-next {
                right: -24px;
            }
            /* end of testimonials */
            /* Pricing */
            /* end of pricing */
            /* Invitation */
            .basic-2 .text-container {
                padding: 8rem 12rem;
            }
            /* end of invitation */
            /* Contact */
            .form-1 form {
                width: 860px;
                margin-right: auto;
                margin-left: auto;
            }
            /* end of contact */
            /* Footer */
            .footer .decoration-circles {
                left: 0;
            }
            /* end of footer */
            /* Extra Pages */
            .ex-cards-1 .card {
                width: 336px;
            }
            .ex-cards-1 .card:nth-of-type(3n+2) {
                margin-right: 2.875rem;
                margin-left: 2.875rem;
            }
            /* end of extra pages */
        }
        /* end of min-width 1200px */