/**@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap:500,700');
 */
/*inter*/
 @font-face {
     font-family: 'Inter';
     src: url('../../assets/fonts/inter/Inter-Bold.ttf') format('truetype');
     font-weight: 700;
    /* Bold */
}
 @font-face {
     font-family: 'Inter';
     src: url('../../assets/fonts/inter/Inter-ExtraBold.ttf') format('truetype');
     font-weight: 800;
    /* Extra Bold */
}
 @font-face {
     font-family: 'Inter';
     src: url('../../assets/fonts/inter/Inter-Medium.ttf') format('truetype');
     font-weight: 500;
    /* Medium Bold */
}
 @font-face {
     font-family: 'Inter';
     src: url('../../assets/fonts/inter/Inter-Regular.ttf') format('truetype');
    /* Regular */
}
 .font-Inter-regular{
     font-family: 'Inter', sans-serif;
}
 .font-Inter-bold {
     font-family: 'Inter', sans-serif;
     font-weight: 700;
    /* Bold */
}
 .font-Inter-extra-bold {
     font-family: 'Inter', sans-serif;
     font-weight: 800;
    /* Extra Bold */
}
 .font-Inter-medium-bold {
     font-family: 'Inter', sans-serif;
     font-weight: 500;
    /* Medium Bold */
}
/* popins*/
 @font-face {
     font-family: 'Poppins';
     src: url('../../assets/fonts/Poppins-Bold.ttf') format('truetype');
     font-weight: 700;
    /* Bold */
}
 @font-face {
     font-family: 'Poppins';
     src: url('../../assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
     font-weight: 800;
    /* Extra Bold */
}
 @font-face {
     font-family: 'Poppins';
     src: url('../../assets/fonts/Poppins-Medium.ttf') format('truetype');
     font-weight: 500;
    /* Medium Bold */
}
 @font-face {
     font-family: 'Poppins';
     src: url('../../assets/fonts/Poppins-Regular.ttf') format('truetype');
    /* Regular */
}
 .font-Poppins-regular{
     font-family: 'Poppins', sans-serif;
}
 .font-Poppins-bold {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
    /* Bold */
}
 .font-Poppins-extra-bold {
     font-family: 'Poppins', sans-serif;
     font-weight: 800;
    /* Extra Bold */
}
 .font-Poppins-medium-bold {
     font-family: 'Poppins', sans-serif;
     font-weight: 500;
    /* Medium Bold */
}
 a, a:hover, a:active, a:focus {
     text-decoration: none;
     color: inherit;
}
/* Mobile devices (phones) */
 @media (max-width: 599px) {
      [class*="hero-section--about"] {
         width: 100%;
         height: 307px;
         background-image: url("../../assets/images/history_bg.png");
         padding-top: 100px;
         padding-bottom: 50px;
         background-size: cover;
         background-repeat: no-repeat;
    }
     .content-mobile{
         margin-top:20%;
    }
     .ico-footer-socmed{
         display: flex;
         justify-content: center;
    }
     .footer-about {
         text-align: center;
    }
     .gd-bg-hero-ppid {
         height: 16vh;
         background: linear-gradient(to top, #ffffff26, #fff, #f9fafb);
         color: white;
         text-align: center;
         padding: 19px;
         box-sizing: border-box;
    }
     .img-misi{
         position: relative;
    }
     .img-visi{
         position: relative;
    }
     .login-mobile {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         width: 200px;
    }
     .login-container {
         display: none;
    }
     .ddk-main-header {
         font-family: 'Poppins', sans-serif;
         font-weight: 800;
         font-size:35px;
         margin-left:6%;
         color: #0E588D;
    }
     .ddk-header{
         margin-left:15%;
         font-family: 'Poppins', sans-serif;
         font-weight: 600;
         font-size: 70px;
         line-height: 10px;
         color: #0E588D;
    }
     .btn-home-ddk {
         font-size: 9px;
    }
     .text-home-ddk-skb {
         font-size: 25px;
         margin-top: -20px;
         font-family: 'Poppins';
         font-style: normal;
         font-weight: 400;
         line-height: 37px;
         color: #0E588D;
    }
     .text-4k-home{
         text-align:left;
    }
     .text-dp-primary--h1 {
         font-family: 'Poppins';
         font-style: normal;
         color: #0E588D;
         font-size: 31px;
         font-weight: 700;
    }
}
 .image-container {
     position: relative;
     text-align: center;
     color: white;
}
 .image-container img {
     width: 100%;
     height: auto;
}
/* Tablet devices */
 @media (min-width: 600px) and (max-width: 1205px) {
     .hero-section--about{
         width: 100%;
         height: 432px;
         object-position: bottom;
           padding-top: 100px;
     padding-bottom: 50px;
     background-image: url("../../assets/images/history_bg.png");
     background-size: cover;
     background-repeat: no-repeat;
    }
     .content-mobile{
         margin-top:20%;
    }
     .overlay-text-contact {
         color: #fff;
         text-align: center;
         position: absolute;
         bottom: 65px;
        /* Adjust this value to position the text vertically */
         left: 50%;
         transform: translateX(-50%);
         padding: 10px;
         border-radius: 5px;
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
         width: 100%;
        /* Adjust this value to control the width of the text container */
         font-size: 17px;
        /* Adjust font size as needed */
    }
     .hero-category--3 {
         height: 45vh !important;
    }
     .hero-category--2 {
         height: 45vh !important;
    }
     .hero-category--1 {
         height: 45vh !important;
    }
     .ddk-text-img-car {
         margin-left: 0rem!important;
    }
     .text-overlay-label--small {
         transform: translate(-40%, -54%) !important;
    }
     .bottom-overlay {
         height: 45% !important;
    }
     .six-step-section {
         background-size: contain !important;
         background-position-x: -9vw !important;
    }
     .six-step-section h2 {
         font-size: 1.8rem !important;
    }
     .custom-label-about {
         line-height: 1.6;
         position: relative;
         margin-top: -6%;
         max-width: 27%;
         color: #0E588D;
         font-size: 10pt;
    }
     .text-history {
         font-family: 'Poppins';
         font-style: normal;
         font-size: 16px;
         font-weight: 400;
         line-height: 35px;
         color: #808080;
    }
     .ico-footer-socmed{
         display: flex;
         justify-content: flex-end;
    }
     .container-bg1-lock{
         display: flex;
         flex-direction: column;
         background-image: url('../../assets/images/bg_img_crop.png');
         background-size: cover;
         background-position: center;
    }
     .hero-section--ddr-distribution {
         width: 82vh;
         height: fit-content;
         background-image: url("../../assets/images/category_ddk_car_distribusi.png");
    }
     .hero-direksi {
         min-height: 25vh;
         padding-top: 50px;
         padding-bottom: 50px;
         background-size: cover;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/direksi_new.png");
    }
     .hero-history {
         min-height: 28vh;
         padding-top: 50px;
         padding-bottom: 50px;
         background-size: contain;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/history_bg2.png");
    }
     .img-visi-misi {
         object-fit: cover;
         height: 500px;
        /* max-width: fit-content;
         */
         width: max-content;
    }
     .img-misi{
         position: relative;
         right:10%;
    }
     .img-visi{
         margin-top: auto;
         position: relative;
         left: -6%;
    }
     .btn-home-ddk {
         font-size: 12px;
    }
     .login-container {
         display: none;
    }
     .text-home-ddk-skb {
         margin-top: -20px;
         font-size: 28px;
         margin-top: -20px;
         font-family: 'Poppins';
         font-style: normal;
         font-weight: 400;
         line-height: 37px;
         color: #0E588D;
    }
     .text-4k-home{
         text-align:left;
    }
     .ddk-main-header {
         font-family: 'Poppins', sans-serif;
         font-weight: 800;
         font-size:88px;
         margin-left:5%;
         color: #0E588D;
    }
     .container-sewa {
         text-align: left;
    }
     .text-home-hku {
         color: #0E588D;
         font-weight: 700;
         font-size: 40px;
    }
     .ddk-header{
         margin-left:16%;
         font-family: 'Poppins', sans-serif;
         font-weight: 600;
         font-size: 70px;
         line-height: 10px;
         color: #0E588D;
    }
}

 @media (min-width: 1906px) {
     
      .container {
        max-width: 1400px;
      }
 }
/* Desktop devices */
 @media (min-width: 1206px) {
     .hero-section--about{
         width: 100%;
         height: 100vh;
         object-position: bottom;
         padding-top: 100px;
         padding-bottom: 50px;
         background-image: url("../../assets/images/history_bg.png");
         background-size: cover;
         background-repeat: no-repeat;
    }
     .content-mobile{
         margin-top:10%;
    }
     .custom-label-about {
         line-height: 1.6;
         position: relative;
         margin-top: 6%;
         max-width: 41%;
         color: #0E588D;
         font-size: 20pt;
        /* Set the desired font color */
    }
     .text-history {
         font-family: 'Poppins';
         font-style: normal;
         font-size: 20px;
         font-weight: 400;
         line-height: 52px;
         color: #808080;
    }
     .ico-footer-socmed{
         display: flex;
         justify-content: flex-end;
    }
     .tagline-footer{
         width: 66%;
    }
     .container-bg1-lock{
         display: flex;
         flex-direction: column;
         background-image: url('../../assets/images/bg_img_crop.png');
         background-size: cover;
    }
     .overlay-text-contact {
         color: #fff;
         text-align: center;
         position: absolute;
         bottom: 35px;
        /* Adjust this value to position the text vertically */
         left: 50%;
         transform: translateX(-50%);
         padding: 10px;
         border-radius: 5px;
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
         width: 100%;
        /* Adjust this value to control the width of the text container */
         font-size: 24px;
        /* Adjust font size as needed */
    }
     .hero-direksi {
         min-height: 55vh;
         padding-top: 50px;
         padding-bottom: 50px;
         background-size: cover;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/direksi_new.png");
    }
     .hero-history {
         max-height: 64vh;
         min-height: 44vh;
         padding-top: 50px;
         padding-bottom: 50px;
         background-size: cover;
         background-repeat: no-repeat;
         background-image: url(../../assets/images/history_bg2.png);
    }
     .cs-misi{
         padding-left: 20%;
         padding-top: 10%;
    }
     .img-visi-misi {
         object-fit: cover;
         height: 500px;
        /* max-width: fit-content;
         */
         width: max-content;
    }
     .img-misi{
         position: relative;
         right:15%;
    }
     .img-visi{
         position: relative;
         left: 1%;
    }
     .login-container {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         width: 200px;
         position: relative;
    }
     .text-home-hku {
         color: #0E588D;
         font-weight: 700;
         font-size: 55px;
    }
     .ddk-main-header {
         font-family: 'Poppins', sans-serif;
         font-weight: 800;
        /* Extra Bold */
         font-size:149px;
         margin-left:12%;
         color: #0E588D;
    }
     .text-4k-home{
         text-align:right;
    }
     .btn-home-ddk {
         font-size: 18px;
    }
     .text-home-ddk-skb {
         margin-top: -20px;
         font-size: 35px;
         margin-top: -20px;
         font-family: 'Poppins';
         font-style: normal;
         font-weight: 400;
         line-height: 30px;
         color: #0E588D;
    }
     .ddk-header{
         margin-left:23%;
         font-family: 'Poppins', sans-serif;
         font-weight: 600;
         font-size: 70px;
         line-height: 10px;
         color: #0E588D;
    }
}
 .line-bottom {
     border-bottom: 1px solid #808080;
}
 .btn-primary{
     background-color: #0E588D;
}
 .six-step-section{
     background-color: #0E588D;
     background-image: url(../../assets/images/bg_img_crop.png);
     background-repeat: no-repeat;
     background-size: 51vw;
}
 .six-step-list > li {
     color: #fff;
     margin-bottom: 16px;
     font-weight: 400;
}
 .six-step-section h2 {
     color: white;
     font-size: 2.25rem;
     font-weight: 700;
     line-height: 1.4;
}
 .six-step-section p {
     color: white;
     font-weight: 300;
     line-height: 1.4;
     font-size: 1.125rem;
     margin-top: 16px;
}
 @media (min-width: 724px) and (max-width: 760px) {
     .header-6step{
         width: 29%;
         top: 6%;
         right: 7%;
         position: absolute;
         transform: translate(-25%, 20%);
         color: #fff;
         font-size: 26pt;
         text-align: left;
         font-weight: 700;
         line-height: initial;
         -webkit-text-size-adjust: auto;
    }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
 @media screen and (max-width: 600px) {
     .nav-pos-header-pad{
         padding-left: 0%;
    }
     .ddk-header {
         font-size: 16px;
         line-height: 20px;
    }
     .container-sewa{
         text-align: left;
    }
     .six-step-section {
         background-image: url('../../assets/images/bg_img_crop3.png');
         background-size: contain;
    }
     .six-step-section h2 {
         color: #0E588D;
         font-size: 1.8rem;
    }
     .six-step-section p {
         font-size: 1rem;
         margin-top: 6px;
    }
     .six-step-list {
         margin-top: 4rem;
    }
}
 @media screen and (min-width: 601px) {
     .nav-pos-header-pad{
         padding-left: 12%;
    }
     .content-visi{
         max-width: 505px;
        /*margin-left: 33%;
         */
    }
}
 @media(min-width: 1025px) and (max-width: 1279px) {
     .content-6-list{
         width: 92%;
         left: 58%;
         color: #fff;
         font-size: 12.5pt;
         text-align: justify;
         font-weight: 200;
         margin-top: 7%;
         line-height: 2.6;
         -webkit-text-size-adjust: auto;
    }
     .content-6step{
         width: 30%;
         height: 8%;
         left: 62.5%;
         position: relative;
         transform: translate(-73%, 53%);
         color: #fff;
         font-size: 10.7pt;
         text-align: left;
         font-weight: 200;
         right: 20%;
         margin-top: 30%;
    }
     .header-6step{
         width: 29%;
         top: 7%;
         right: 23%;
         position: absolute;
         transform: translate(-25%, 20%);
         color: #fff;
         font-size: 16pt;
         text-align: left;
         font-weight: 700;
         line-height: initial;
         -webkit-text-size-adjust: auto;
    }
     .container-bg1-lock {
         display: flex;
         flex-direction: column;
         height: auto;
         background-image: url(../../assets/images/bg_img_crop.png);
         background-size: cover;
         background-position: left;
    }
}
 @media (min-width: 1280px) {
     .swiper-container {
         width: 100%;
         height: 100%;
    }
     .swiper-slide {
         display: flex;
         align-items: center;
         justify-content: center;
         background: #fff;
    }
     .profile-card {
         text-align: center;
    }
     .profile-card img {
         width: 200px;
         height: auto;
         border-radius: 50%;
    }
     .profile-card h3 {
         margin: 10px 0 5px 0;
         font-size: 18px;
    }
     .profile-card p {
         margin: 0;
         font-size: 14px;
         color: #666;
    }
     .container-sewa{
         text-align: left;
    }
     .header-6step{
         width: 35%;
         top: 19%;
         left: 56%;
         position: absolute;
         transform: translate(-25%, 20%);
         color: #fff;
         font-size: 22pt;
         text-align: left;
         font-weight: 700;
         line-height: initial;
         -webkit-text-size-adjust: auto;
    }
     .content-6step{
         width: 30%;
         left: 62%;
         position: relative;
         transform: translate(-50%);
         color: #fff;
         top:4%;
         margin-top:37%;
         font-size: 12pt;
         text-align: left;
         font-weight: 200;
         -webkit-text-size-adjust: auto;
    }
     .content-6-list{
         width: 92%;
         left: 58%;
         color: #fff;
         font-size: initial;
         text-align: justify;
         font-weight: 200;
         margin-top: 16%;
         line-height: 2.6;
         -webkit-text-size-adjust: auto;
    }
}
 .ddk-header-btm-text {
     font-size: 30px;
     line-height: 20px;
     color: #0E588D;
}
 @media screen and (min-width: 601px) {
     .ddk-header-btm-text {
         font-size: 21px;
         color: #0E588D;
    }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
 @media screen and (max-width: 600px) {
     .ddk-header-btm-text {
         font-size: 9pt;
         line-height: 10px;
    }
     .ddk-header-btm-text-bold {
         font-size: 8pt;
         font-weight: 800;
    }
     .ddk-text-img-car{
         margin-left:3rem!important;
         height: 68%;
    }
}
 @media screen and (min-width: 601px) {
     .btn-ddk-detail {
         width: 33%;
         font-size: small;
    }
     .label-4k-home{
         font-size: 21px;
    }
     .ddk-text-img-car{
         margin-left:3rem;
         padding-bottom: 3rem!important;
         margin-bottom: 3rem!important;
    }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
 @media screen and (max-width: 600px) {
     .btn-ddk-detail {
         width: auto;
    }
     .label-4k-home{
         font-size: 15px;
         margin-top: 8px;
    }
     .bottom-overlay {
         content: "";
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 39%;
        /* Adjust the height of the overlay as needed */
         background:linear-gradient(to top, black, rgba(0, 0, 0, 9%));
        /* Adjust the opacity (0.7) as needed */
    }
}
 .label-4k-home{
     font-family: 'Inter', sans-serif;
}
 .label-4k-home-step{
     font-family: 'Inter', sans-serif;
     font-weight: 500;
     color: #0E588D;
     font-size: 18px;
}
 .relative {
     position: relative;
}
 .primary {
     color: #0E588D;
}
 .regular {
     font-weight: 500;
}
 .semibold {
     font-weight: 600;
}
 .p {
     font-size: 14px;
}
 h1, h2, h3, h4, h5, h6 {
     font-family: "Poppins";
}
 h1 {
     font-size: 40px;
}
 h4 {
     font-size: 24px;
}
 h5 {
     font-size: 20px;
}
 h6 {
     font-size: 16px;
}
 p {
     font-size: 14px;
}
 .transition-3s, .offcanvas-nav_links li, .offcanvas-nav_profile-links li, .dropdown-nav-button, .dropdown-nav-item, .input-addon, .text-input {
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
}
 .flex-row-center, .dropdown-nav-button, .form-submit-button, .form-submit-button--square, .service-round-element {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}
 .flex-col-center {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}
 .border-top {
     border-top: 1px solid #b7c1ca !important;
}
 .no-border-top-radius {
     border-top-right-radius: 0px !important;
     border-top-left-radius: 0px !important;
}
 .no-border-bottom-radius, .dropdown-nav-button {
     border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
}
 html, body {
     font-family: "Poppins";
     color: #02001C;
     margin: 0;
     padding: 0;
}
 .light {
     font-weight: 400;
}
 .rubik {
     font-family: rubik;
}
 .Poppins {
     font-family: Poppins;
}
 .karla {
     font-family: karla;
}
 .primary {
     color: #0E588D;
}
 .back-primary {
     background-color: #0E588D;
}
 .wrapper {
     position: relative;
     overflow-x: hidden;
     width: 100%;
     height: 100%;
}
 .container-large {
     max-width: 1360px;
}
 .slick-list {
     overflow-x: hidden;
}
 .mt-120 {
     margin-top: 120px;
}
 header {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
}
 .container-footer {
     padding-right: 11%;
     padding-left: 12%;
     margin-right: auto;
     margin-left: auto;
     width: 100%;
}
 .right-nav-trigger, .left-nav-trigger {
     display: none;
}
 .offcanvas-nav {
     position: fixed;
     height: 100%;
     width: 100%;
     background-color: white;
     z-index: 999;
}
 .offcanvas-nav_links {
     margin-top: 100px;
}
 .offcanvas-nav_links li {
     border-bottom: 1px solid rgba(2, 0, 28, 0.1);
     text-align: center;
     font-size: 18px;
     padding: 40px;
     font-weight: 500;
}
 .offcanvas-nav_links li:hover {
     color: #cc0036;
}
 .offcanvas-nav_profile-section {
     width: 100%;
     position: relative;
     margin-top: 80px;
}
 .offcanvas-nav_user-icon {
     display: inline-block;
     background-color: white;
     height: 80px;
     width: 80px;
     border: 1px solid #cc0036;
     border-radius: 50px;
     overflow: hidden;
}
 .offcanvas-nav_user-icon img {
     width: 100%;
     height: 100%;
}
 .offcanvas-nav_profile-links {
     margin: 0 auto;
}
 .offcanvas-nav_profile-links li {
     text-align: center;
     padding: 20px;
     font-weight: 500;
}
 .offcanvas-nav_profile-links li:hover {
     color: #00CC37;
}
 .offcanvas-nav_logo img {
     display: block;
     margin: 0px auto;
     margin-top: 40px;
}
 .offcanvas-nav_close {
     position: absolute;
     right: 30px;
     top: 30px;
}
 .offcanvas-nav_close:hover {
     cursor: pointer;
}
 .left-side-nav {
     opacity: 0;
     visibility: hidden;
     top: 0;
     left: -400px;
     will-change: transform;
     -webkit-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}
 .left-side-nav.active {
     left: 0px;
     opacity: 1;
     visibility: visible;
}
 .left-nav-trigger:hover {
     cursor: pointer;
}
 .right-side-nav {
     opacity: 0;
     visibility: hidden;
     top: 0;
     right: -400px;
     will-change: transform;
     -webkit-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}
 .right-side-nav.active {
     right: 0px;
     opacity: 1;
     visibility: visible;
}
 .right-nav-trigger .user-icon {
     display: inline-block;
     background-color: white;
     height: 44px;
     width: 44px;
     border: 1px solid #00CC37;
     border-radius: 22px;
     overflow: hidden;
}
 .right-nav-trigger .user-icon img {
     width: 100%;
     height: 100%;
}
 .right-nav-trigger .user-icon:hover {
     cursor: pointer;
}
 .navbar-collapse {
     -webkit-box-flex: 0;
     -ms-flex-positive: 0;
     flex-grow: 0;
}
 .nav-item {
     margin: 0 20px;
     padding-top: 0px;
     padding-bottom: 0px;
     padding-right: 10px !important;
     position: relative;
}
 .nav-item:after {
     content: '';
     position: absolute;
     right: 0px;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background-color: #e83d33;
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
     opacity: 0;
}
 .nav-item:hover::after {
     opacity: 1;
}
 .nav-item.active {
     font-weight: 700;
}
 .nav-item.active:after {
     opacity: 1;
}
 .dropdown-nav-button {
     position: relative;
     top: 10px;
     background-color: transparent;
     padding: 10px;
     width: 210px;
     border-radius: 6px;
     outline: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
     border: 0;
     z-index: 90;
     position: relative;
}
 .dropdown-nav-button:hover {
     cursor: pointer;
}
 .dropdown-nav-button:focus {
     outline: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
}
 .dropdown-nav-button:after {
     display: none;
}
 .dropdown-nav-user {
     display: inline-block;
     background-color: white;
     height: 44px;
     width: 44px;
     border: 1px solid #00CC37;
     border-radius: 22px;
     margin-right: 10px;
     overflow: hidden;
}
 .dropdown-nav-user img {
     width: 100%;
     height: 100%;
}
 .dropdown-nav-menu {
     z-index: 10;
     top: -70px !important;
     left: 10px !important;
     width: 210px;
     border-radius: 6px;
     border: 0;
     margin-top: 0px;
     padding: 0px;
     padding-top: 70px;
     background-color: white;
     overflow: hidden;
}
 .dropdown-nav-item {
     padding: 15px 24px;
     font-size: 14px;
     font-weight: 500;
     border-bottom: 2px solid rgba(0, 204, 55, 0.15);
}
 .dropdown-nav-item:nth-child(3) {
     border-bottom: 0;
}
 .dropdown-nav-item:hover {
     color: white;
     background-color: #00CC37;
}
 .dropdown-nav-icon {
     margin-right: 10px;
}
 .login-container h6 {
     padding-right: 10px;
     margin-bottom: 0px;
}
 [data-target]:hover {
     cursor: pointer;
}
 .login-popup {
     display: none;
     position: absolute;
     top: 100px;
     right: 0;
     padding: 40px 30px;
     padding-bottom: 30px;
     width: 350px;
     z-index: 5;
     background-color: white;
     -webkit-box-shadow: 0px 4px 8px rgba(2, 0, 28, 0.3);
     box-shadow: 0px 4px 8px rgba(2, 0, 28, 0.3);
}
 .login-popup.active {
     display: block;
}
 .login-popup:after {
     content: '';
     position: absolute;
     background: transparent;
     top: -12.5px;
     right: 45px;
     width: 0;
     height: 0;
     border-left: 12px solid transparent;
     border-right: 12px solid transparent;
     border-bottom: 12px solid white;
     -webkit-filter: drop-shadow(-0.2px -2px 3px rgba(2, 0, 28, 0.1));
     filter: drop-shadow(-0.2px -2px 3px rgba(2, 0, 28, 0.1));
}
 .login-popup .form-group {
     margin-bottom: 40px;
}
 .login-popup input {
     border: 1px solid #00CC37;
}
 .login-helper span {
     opacity: .5;
}
 .hero-section, .hero-section--home, .hero-section--ddr-car, .hero-section--ddr-distribution, .hero-section--ddr-procurement, .hero-section--contact, .hero-section--ppid {
     height: 100vh;
     width: 100vw;
     padding-top: 100px;
     padding-bottom: 50px;
     margin-bottom: 50px;
     background-size: cover;
     background-repeat: no-repeat;
}
 .hero-section--home {
     background-image: url("../../assets/images/frontend-fleet-hero2.jpg");
}
/* .hero-section--about {*/
/*    background-image: url("../../assets/images/history_bg.png");*/
/*}*/
 .hero-section--ddr-car {
     background-image: url("../../assets/images/category_ddk_car_rental.png");
}
 .hero-section--ddr-distribution {
     background-image: url("../../assets/images/category_ddk_car_distribusi.png");
}
 .hero-section--ddr-procurement {
     background-image: url("../../assets/images/category_ddk_car_procurement.png");
}
 .hero-section--contact {
     margin-top:-39px;
     background-image: url("../../assets/images/bg_contact_overlay.png");
}
 .hero-section--ppid {
     background-image: url("../../assets/images/bg_ppid_new.png");
}
 @media screen and (max-width: 601px) {
     .hero-section--ddr-distribution {
         width: 62vh;
         height: fit-content;
         background-image: url("../../assets/images/category_ddk_car_distribusi.png");
    }
     .hero-section--ppid {
         width: 100vh;
         height: fit-content;
         background-image: url(../../assets/images/bg_ppid_new.png);
    }
     .hero-section--ddr-car {
         background-size: cover;
         height: 50vh;
         width: 89vh;
         background-image: url("../../assets/images/category_ddk_car_rental.png");
    }
     .hero-history {
         height: 19vh;
         width: 100vw;
         padding-top: 20px;
         padding-bottom: 20px;
         background-size: contain;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/history_bg2.png");
    }
}
 @media screen and (min-width: 601px) {
     .gd-bg-hero-ppid {
         height: 21vh;
         background: linear-gradient(to top, #ffffff73, #fff, #f9fafb);
         text-align: center;
         padding-left: 12%;
         box-sizing: border-box;
    }
}
 .hero-visi {
    /* height: 50vh;
     */
     width: auto;
    /* padding-top: 50px;
     */
    /* padding-bottom: 50px;
     */
     background-size: contain;
     background-repeat: no-repeat;
     background-image: url("../../assets/images/visi_img.png");
}
 .hero-home-top {
    /* height: 100vh;
     */
     width: 100%;
     padding-top: 50px;
     padding-bottom: 50px;
     background-size: contain;
     background-repeat: no-repeat;
     background-image: url("../../assets/images/carHome.png");
}
 .hero-service-top {
    /* height: 100vh;
     */
     width: 100%;
     padding-top: 50px;
     padding-bottom: 50px;
     background-size: contain;
     background-repeat: no-repeat;
     background-image: url("../../assets/images/banner_service.png");
}
 .hero-category {
     height: 100vh;
     position: relative;
     width: 120vh;
     background-size: contain;
     background-repeat: no-repeat;
}
 @media screen and (max-width: 701px) {
     .overlay-text {
         padding: 5px;
         width: 85%;
         position: absolute;
         top: 21%;
         left: 45%;
         transform: translate(-50%, -50%);
         color: #fff;
         background-color: rgba(0, 0, 0, 0.35);
    }
}
 @media screen and (min-width: 601px) {
     .overlay-text {
         padding: 2%;
         position: absolute;
         top: 25%;
         left: 45%;
         transform: translate(-50%, -50%);
         color: #fff;
         background-color: rgba(0, 0, 0, 0.35);
         text-align: left;
    }
     .bottom-overlay {
         content: "";
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 30%;
        /* Adjust the height of the overlay as needed */
         background:linear-gradient(to top, black, rgba(0, 0, 0, 0.35));
        /* Adjust the opacity (0.7) as needed */
    }
}
 @media screen and (max-width: 701px) {
     .overlay-text-contact {
         color: #fff;
         width: 100%;
         text-align: center;
         position: absolute;
         bottom: 15px;
         padding: 10px;
         font-size: 8px;
    }
     .contact-ktk-kami {
         padding-left: 10%;
    }
}
 @media screen and (min-width: 601px) {
     .contact-ktk-kami {
         margin-top:1rem!important;
    }
}
/* class procurement */
/* mobile */
 @media screen and (max-width: 701px) {
     .content-procurement {
         padding-left: 20px;
         padding-right: 20px;
         padding-top: 10px;
         padding-bottom: 10px;
    }
}
 @media screen and (min-width: 601px) {
     .content-procurement {
         margin-left: 10%;
         margin-right: 10%;
         padding-left: 20px;
         padding-right: 20px 
    }
}
 @media screen and (max-width: 701px) {
     .content-procurement-form-x{
         margin-top: 8px;
    }
     .bottom-overlay {
         content: "";
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 52%;
        /* Adjust the height of the overlay as needed */
         background:linear-gradient(to top, black, rgba(0, 0, 0, 0.35));
        /* Adjust the opacity (0.7) as needed */
    }
}
 @media screen and (min-width: 601px) {
     .content-procurement-form-x {
         margin-top: 0px;
    }
}
 .bottom-overlay-step {
     left: 0;
     width: 100%;
     bottom: 30%;
     height: 28vw;
     background-size: contain;
     background-repeat: no-repeat;
     background-image: url("../../assets/images/banner_6langkah.png");
}
 @media screen and (max-width: 601px) {
     .bottom-overlay-step {
         left: 50%;
         top: 20%;
         height: 33vw;
         width: 100%;
    }
}
 .card-news-list-type {
    /* Rectangle 59 */
     padding: 10%;
     background: #F1F1F1;
     border-radius: 7px;
     min-height: 432px;
     max-height: 540px;
     max-width:387px;
}
 .card-car-type {
    /* Rectangle 59 */
     padding: 10%;
     background: #F1F1F1;
     border-radius: 7px;
     min-height: 440px;
     max-height: 440px;
}
 .card-news-type {
    /* Rectangle 59 */
     padding: 10%;
     background: #F1F1F1;
     border-radius: 7px;
}
 .gradient-container {
     left: 50%;
     top: 20%;
     height: 28vw;
     width: 100%;
     background: linear-gradient(307.92deg, #0E588D 53.93%, rgba(0, 0, 0, 0) 92.83%);
}
 @media screen and (max-width: 601px) {
     .gradient-container {
         left: 50%;
         top: 20%;
         height: 33vw;
         width: 100%;
    }
}
 .image-overlay-home {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
}
 .ico-c-primary {
     color: #0E588D;
}
 @media only screen and (max-width: 599px) {
    /* For mobile phones: */
     .hero-category--1 {
         height: 70vh;
        /*width: 50vh;
         */
         background-size: cover;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/car_1_img.png");
    }
     .hero-category--2 {
         height: 70vh;
        /*width: 50vh;
         */
         background-size: cover;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/car_2_img.png");
    }
     .hero-category--3 {
         height: 70vh;
        /*width: 50vh;
         */
         background-size: cover;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/car_3_img.png");
    }
}
 @media only screen and (min-width: 601px) {
     .hero-category--1 {
         height: 120vh;
         width: 100%;
         background-size: cover;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/car_1_img.png");
    }
}
 @media only screen and (min-width: 601px) {
     .hero-category--2 {
         height: 120vh;
         width: 100%;
         background-size: cover;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/car_2_img.png");
    }
}
 @media only screen and (min-width: 601px) {
     .hero-category--3 {
         height: 120vh;
         width: 100%;
         background-size: cover;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/car_3_img.png");
    }
}
 @media only screen and (min-width: 1200px) {
     [class*=".hero-home-top"] {
         width: 100%;
    }
}
 @media screen and (max-width: 721px) {
     .hero-direksi {
         height: 26vh;
         width: 100%;
         padding-top: 20px;
         padding-bottom: 10px;
         background-size: contain;
         background-repeat: no-repeat;
         background-image: url("../../assets/images/direksi_img.png");
    }
}
 .hero-form-container {
     border-radius: 5px;
     background-color: rgba(255, 255, 255, 0.95);
     position: relative;
     z-index: 1;
     padding-bottom: 1px;
     max-width: 450px;
     margin: 0 auto;
     max-height: 700px;
}
 .form-tabs {
     width: 100%;
     height: 70px;
     position: relative;
}
 .tab-button {
     background-color: #0E588D;
     display: inline-block;
     font-weight: 700;
     font-size: 18px;
     border: 0;
     border-radius: 4px !important;
     color: white;
     padding: 10px 40px;
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
}
 .tab-button-secondary {
     background-color: #cc0036;
     display: inline-block;
     font-weight: 700;
     font-size: 18px;
     border: 0;
     border-radius: 4px !important;
     color: white;
     padding: 10px 40px;
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
}
 .tab-button:hover {
     cursor: pointer;
     -webkit-box-shadow: 0px 3px 20px rgba(52, 64, 75, 0.5);
     box-shadow: 0px 3px 20px rgba(52, 64, 75, 0.5);
}
 .tab-button:focus {
     outline: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
     border: 0;
}
 .js-booklater-show {
     display: none;
     position: relative;
}
 .tab-button.active {
     color: white;
     background-color: #02001C;
}
 .form-group {
     position: relative;
}
 .form-group.white-label .label-stay, .form-group.white-label .label-top {
     color: white;
}
 label {
     font-weight: 500;
     font-size: 16px;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     will-change: transform;
}
 .label-animate {
     position: absolute;
     top: 50%;
     left: 30px;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     opacity: .5;
     -webkit-transition: all 200ms ease;
     transition: all 200ms ease;
     color: #02001C;
}
 .label-animate:hover {
     cursor: text;
}
 .text-jb-header {
    /* HISTORY */
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 800;
     font-size: 189px;
     line-height: 270px;
     color: #0E588D;
}
 @media screen and (min-width: 601px) {
     .text-hs-header {
         font-size: 60px;
        /* HISTORY */
         font-family: 'Poppins';
         font-style: normal;
         font-weight: 800;
        /*font-size: 68px;
         */
         line-height: 90px;
         color: #0E588D;
    }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
 @media screen and (max-width: 600px) {
     .text-hs-header {
         font-family: 'Poppins';
         font-style: normal;
         font-weight: 800;
         font-size: 30px;
         margin-top:2%;
         color: #0E588D;
    }
}
 .text-home-header {
    /* HISTORY */
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 700;
     font-size: 150px;
     line-height: 118px;
     color: #0E588D;
}
 @media screen and (min-width: 601px) {
     .text-home-header {
         font-weight: 700;
         font-size: 150px;
    }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
 @media screen and (max-width: 600px) {
     .text-home-header {
         font-size: 30px;
         line-height: 20px;
    }
}
 .text-service-header {
    /* HISTORY */
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 700;
     font-size: 150px;
     line-height: 27px;
     color: #0E588D;
}
 @media screen and (min-width: 601px) {
     .text-service-header {
         font-weight: 700;
         font-size: 50px;
    }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
 @media screen and (max-width: 600px) {
     .text-service-header {
         font-size: 30px;
         line-height: 30px;
    }
     .text-home-hku-2 {
    }
}
 .text-home-hku {
    /* keunggulan */
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 700;
     line-height: 118px;
     color: #0E588D;
}
 @media screen and (min-width: 601px) {
     .text-home-hku-2 {
         font-size: 52pt;
         margin-top: -66PX;
    }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
 @media screen and (max-width: 600px) {
     .text-home-hku {
         font-size: 30px;
         line-height: 20px;
         color: #0E588D;
         line-height: 20px;
    }
}
 .text-subhome-hku {
    /* keunggulan */
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 700;
     font-size: 150px;
     color: #0E588D;
}
 @media screen and (min-width: 601px) {
     .text-subhome-hku {
         color: #0E588D;
         font-weight: 300;
         font-size: 28px;
    }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
 @media screen and (max-width: 600px) {
     .text-subhome-hku {
         font-size: 15px;
        /* line-height: 20px;
         */
         color: #0E588D;
    }
     .contact-address {
         background-color: white;
         position: absolute;
         left: 0px;
         padding: 15px;
         transform: translateX(4%);
         bottom: -16%;
         width: 93%;
    }
}
/* custom responsive */
 @media screen and (min-width: 601px) {
     .contact-address {
         background-color: white;
         position: absolute;
         bottom: 30px;
         left: 0px;
         padding: 15px;
         transform: translateX(41%);
    }
     .c-ks {
         height: 46%;
    }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
 @media screen and (max-width: 600px) {
     .c-ks {
         height: 37%;
    }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
 @media screen and (max-width: 600px) {
     .h2-ol-hm {
         font-size: 15px;
         font-weight: 700;
    }
}
 .line-top {
    /* Line 1 */
     position: absolute;
     align-items: center;
     width: 80%;
     height: 0px;
     border-bottom: 1px solid #888;
    /*border: 0.5px solid #000000;
     */
}
 @media screen and (max-width: 600px) {
    /* .line-top {
         margin-top: 10%;
    }
     */
}
 .text-grey-small {
     font-family: 'Inter';
     font-style: normal;
     font-size: 14px;
     font-weight: 400;
     line-height: 42px;
     color: #808080;
}
 .text-grey-medium {
     font-family: 'Poppins';
     font-style: normal;
     font-size: 16px;
     font-weight: 400;
     line-height: 42px;
     color: #808080;
}
 .text-label-semibold {
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 400;
     font-size: 38px;
     line-height: 57px;
     color: #0E588D;
}
 .text-history-2 {
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 400;
     font-size: 30px;
     line-height: 200%;
     color: #808080;
}
 .text-desc-2 {
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 400;
     font-size: 22px;
     line-height: 200%;
     color: #808080;
}
 @media screen and (min-width: 601px) {
     .text-desc-2 {
         font-weight: 400;
         font-size: 22px;
         line-height: 200%;
         text-align: justify;
    }
}
 @media screen and (max-width: 600px) {
     .text-desc-2 {
         font-size: 15px;
         line-height: 20px;
    }
     .car-img-content{
         width: 260px;
    }
     .content-history {
         padding-left: 10%;
         padding-right: 10%;
         text-align: justify;
    }
}
 @media screen and (max-width: 600px) {
     .text-overlay-label--small {
         line-height: 20px;
         width: 55%;
         top: 101%;
         left: 22%;
         position: absolute;
         transform: translate(-50%, -50%);
         color: #fff;
         font-size: 11pt;
         text-align: justify;
    }
     .text-content-carimg{
         font-size: 10pt;
    }
}
 @media screen and (min-width: 601px) {
     .text-content-carimg{
    }
     .text-overlay-label--small {
         font-size: 13px;
         line-height: 20px;
         position: absolute;
         top: 85%;
         left: 35%;
         transform: translate(-50%, -50%);
         color: #fff;
         text-align: left;
    }
     .car-img-content{
         width: 260px;
    }
     .content-history {
         padding-left: 20%;
         padding-right: 20%;
    }
}
 .text-dp-primary {
     font-family: 'Poppins';
     font-style: normal;
     color: #0E588D;
}
 .text-dp-primary--h1 {
     font-family: 'Poppins';
     font-style: normal;
     color: #0E588D;
     font-size: 36px;
     font-weight: 700;
}
 .content-history-2 {
     padding-left: 5%;
     padding-right: 5%;
}
 .content-history--np {
    /*padding-left: 1%;
     */
     padding-right: 1%;
}
 .custom-label-italic {
     color: #0E588D;
    /* Set the desired font color */
     font-weight: 900;
    /* Make the text bold */
     font-style: italic;
    /* Make the text italic */
}
 @media only screen and (max-width: 600px) {
     .custom-label-about {
         color: #0E588D;
         margin-top: -27%;
         font-size: 6pt;
         max-width: 60%;
    }
}
 .label-top {
     top: -15px;
     -webkit-transform: 0;
     transform: 0;
     font-size: 12px;
     opacity: 1;
     color: rgba(2, 0, 28, 0.5);
}
 .label-top.stay {
     color: rgba(2, 0, 28, 0.5);
}
 .label-hidden {
     opacity: 0;
}
 .input-addon {
     position: absolute;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     right: 0px;
     opacity: .5;
}
 .hide-book-later {
     display: none;
}
 .text-input {
     font-size: 14px;
     border-radius: 2px;
     padding: 10px 30px;
     padding-right: 35px;
     background-color: white;
     -webkit-box-shadow: 0px 2px 3px rgba(2, 0, 28, 0.05);
     box-shadow: 0px 2px 3px rgba(2, 0, 28, 0.05);
     border: 0;
     width: 100%;
     border: 1px solid transparent;
}
 .text-input:focus {
     outline: 0;
     border: 1px solid #cc0036;
}
 .text-input:focus+span {
     opacity: 1;
}
 .nice-select {
     border: 0;
     color: #02001C;
}
 .nice-select .option.selected {
     color: #cc0036;
     font-weight: 700;
}
 .nice-select .option:hover {
     color: #cc0036;
     background-color: white;
}
 .nice-select .list {
     border-radius: 20px;
     margin-top: 10px;
}
 textarea.text-input {
     border-radius: 2px;
}
 .form-submit-button, .form-submit-button--square {
     background-color: #00CC37;
     color: white;
     font-size: 20px;
     height: 50px;
     width: 200px;
     border-radius: 100px;
     font-weight: 700;
     text-transform: capitalize;
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
}
 .form-submit-button--square {
     border-radius: 4px;
}
 .form-submit-button:hover, .form-submit-button--square:hover {
     -webkit-box-shadow: 0px 3px 10px rgba(52, 64, 75, 0.2);
     box-shadow: 0px 3px 10px rgba(52, 64, 75, 0.2);
}
 .section-title {
     position: relative;
}
 .section-title .underline {
     position: absolute;
     bottom: -10px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     display: inline-block;
     height: 3px;
     width: 70px;
     background-color: #e83d33;
}
 .vehicle-section {
     background-image: url("../../assets/images/frontend-fleet-vehicles-bg.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     padding: 20px 0px;
     position: relative;
}
 .vehicle-slider {
     padding-top: 50px;
     margin: 100px 0px;
     margin-bottom: 40px;
}
 .vehicle-slider .col-sm-4 {
     padding: 0px 40px;
}
 .vehicle-slider img {
     -o-object-fit: cover;
     object-fit: cover;
}
 .vehicle-slider .slick-slide {
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
     opacity: .6;
}
 .vehicle-slider .slick-list.draggable {
     overflow: visible !important;
}
 .vehicle-slider .slick-center {
     opacity: 1;
     -webkit-transform: scale(1.2);
     transform: scale(1.2);
}
 .vehicle-details-container {
     margin: 0 auto;
     margin-top: 60px;
     max-width: 400px;
}
 .vehicle-details-container .vehicle_name {
     text-align: center;
     margin-bottom: 20px;
}
 .vehicle-details-container .vehicle_details {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
 .vehicle-details-container .vehicle_details img {
     width: 38px;
     height: 32px;
}
 .vehicle-details-slider [data-animation-in] {
     opacity: 0;
}
 .vehicle-section .custom-controls-container {
     position: absolute;
     top: 180px;
     right: 60px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}
 .vehicle-section .custom-controls-container h6 {
     margin: 0px 20px;
}
 .vehicle-section .custom-dots .slick-dots {
     padding: 0;
     margin-bottom: 12px;
}
 .vehicle-section .custom-dots li button {
     display: none;
}
 .vehicle-section .custom-dots {
     padding-left: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}
 .vehicle-section .custom-dots h6 {
     margin: 0px 15px;
}
 .vehicle-section .custom-dots li {
     position: relative;
     display: inline-block;
     margin-right: 20px;
}
 .vehicle-section .custom-dots li:before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-color: white;
     width: 12px;
     height: 4px;
     border-radius: 2px;
}
 .vehicle-section .custom-dots li.slick-active:before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-color: #00CC37;
     width: 12px;
     height: 4px;
     border-radius: 2px;
}
 .booking-section {
     background-color: #00CC37;
}
 .form-inputs .form-group {
     margin-bottom: 30px;
}
 .form-group {
     margin-bottom: 40px;
}
 .checkboxes .pretty .custom-state label {
     font-size: 18px;
     padding-left: 5px;
}
 .checkboxes .pretty .custom-state label::before {
     border: 4px solid white;
}
 .checkboxes .pretty .custom-state label::after {
     background-color: transparent;
}
 .checkboxes .pretty.p-default input:checked~.state label:after {
     background-color: black !important;
}
 .service-round-element {
     width: 120px;
     height: 120px;
     margin: 0px;
     border-radius: 50%;
     background-color: #0E588D;
     position: relative;
}
 .service-round-element:before {
     content: '';
     position: absolute;
     top: 0px;
     left: 0px;
     width: 150px;
     height: 150px;
     -webkit-transform: translateX(-15px) translateY(-15px);
     transform: translateX(-15px) translateY(-15px);
     border-radius: 50%;
     z-index: -1;
     background-color: rgba(0, 204, 55, 0.25);
}
 .service-round-element:after {
     content: '';
     position: absolute;
     top: 0px;
     left: 0px;
     width: 180px;
     height: 180px;
     -webkit-transform: translateX(-30px) translateY(-30px);
     transform: translateX(-30px) translateY(-30px);
     border-radius: 50%;
     z-index: -2;
     background-color: rgba(0, 204, 55, 0.15);
     -webkit-animation: pulse 2s infinite;
     animation: pulse 2s infinite;
}
 @-webkit-keyframes pulse {
     0% {
         -webkit-transform: translateX(-30px) translateY(-30px) scale(0);
         transform: translateX(-30px) translateY(-30px) scale(0);
         opacity: 1;
    }
     30% {
         opacity: .8;
    }
     100% {
         -webkit-transform: translateX(-30px) translateY(-30px) scale(1.2);
         transform: translateX(-30px) translateY(-30px) scale(1.2);
         opacity: 0;
    }
}
 @keyframes pulse {
     0% {
         -webkit-transform: translateX(-30px) translateY(-30px) scale(0);
         transform: translateX(-30px) translateY(-30px) scale(0);
         opacity: 1;
    }
     30% {
         opacity: .8;
    }
     100% {
         -webkit-transform: translateX(-30px) translateY(-30px) scale(1.2);
         transform: translateX(-30px) translateY(-30px) scale(1.2);
         opacity: 0;
    }
}
 .service-slide-prev {
     position: absolute;
     top: 50%;
     -webkit-transform: translateY(60px);
     transform: translateY(60px);
     left: 30px;
}
 .service-slide-next {
     position: absolute;
     top: 50%;
     -webkit-transform: translateY(60px);
     transform: translateY(60px);
     right: 30px;
}
 .testimonial-image-block {
     width: 300px;
     height: 350px;
     position: relative;
     background-image: url("../../assets/images/frontend-icons-fleet-testimonial.png");
     background-size: cover;
     overflow: hidden;
}
 .testimonial-image-block .testimonial-image {
     display: block;
     margin: 0 auto;
     margin-top: 27px;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     -o-object-fit: cover;
     object-fit: cover;
}
 .testimonial-image-block .quote-round img {
     border-radius: 6px;
     -o-object-fit: cover;
     object-fit: cover;
}
 .testimonial-image-block .testimonial-name {
     color: white;
     position: absolute;
     bottom: 0px;
     right: 50px;
}
 .testimonial-image-block .quote-round {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     position: absolute;
     top: 10px;
     right: 40px;
     height: 68px;
     width: 68px;
     border-radius: 40px;
     background-color: #00CC37;
     -webkit-box-shadow: 0px 3px 10px rgba(2, 0, 28, 0.2);
     box-shadow: 0px 3px 10px rgba(2, 0, 28, 0.2);
}
 .testimonial-content {
     margin-top: 80px;
     text-align: left;
     font-size: 18px;
}
 .testimonial-dots .slick-dots li button {
     display: none;
}
 .testimonial-dots .slick-dots li {
     position: relative;
     display: inline-block;
     margin-right: 30px;
}
 .testimonial-dots .slick-dots li:before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     border: 2px solid #02001C;
     background-color: transparent;
     width: 12px;
     height: 12px;
     border-radius: 15px;
}
 .testimonial-dots .slick-dots li.slick-active:before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     border: 2px solid #00CC37;
     background-color: #00CC37;
     width: 12px;
     height: 12px;
     border-radius: 15px;
}
 div[class^='col']:focus, div:focus, div[class*='col']:focus {
     outline: 0 !important;
     -webkit-box-shadow: none;
     box-shadow: none;
}
 .login-modal-wrapper {
     background-color: #0E588D;
     min-height: 100%;
     position: fixed;
     overflow-y: scroll;
     overflow-x: hidden;
     top: 0px;
     bottom: 0px;
     left: 0px;
     height: 100%;
     display: none;
     z-index: 10;
}
 .login-modal-wrapper.active {
     display: block;
}
 .login-modal-wrapper::-webkit-scrollbar {
     width: 0px;
    /* Remove scrollbar space */
     background: transparent;
    /* Optional: just make scrollbar invisible */
}
 .modal {
     padding: 0px !important;
     margin: 0px;
}
 .modal textarea::-webkit-input-placeholder {
     font-size: 16px;
}
 .modal textarea:-ms-input-placeholder {
     font-size: 16px;
}
 .modal textarea::-ms-input-placeholder {
     font-size: 16px;
}
 .modal textarea::placeholder {
     font-size: 16px;
}
 .login-modal {
     max-width: 100%;
     margin: 0px;
     height: 100%;
}
 .login-modal .modal-title {
     color: #02001C;
}
 .login-modal .modal-close {
     position: absolute;
     right: 20px;
     top: 0px;
     opacity: .6;
     -webkit-transition: all .2s ease;
     transition: all .2s ease;
}
 .login-modal .modal-close:hover {
     cursor: pointer;
     opacity: 1;
}
 .login-modal .modal-close i {
     font-size: 22px;
     color: white;
}
 .login-modal .modal-title {
     position: relative;
}
 .login-modal .modal-content {
     height: 100%;
     border-radius: 2px;
     border: 0;
}
 .login-modal .modal-body {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     padding: 0px !important;
}
 .login-modal .tab-button {
     padding: 10px 70px;
}
 footer {
     background-color: #02001C;
     padding: 20px 0;
}
 footer hr {
     border-color: rgba(255, 255, 255, 0.1);
}
 .footer-col {
     color: rgba(255, 255, 255, 0.5);
     position: relative;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     padding-left: 30px;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}
 .footer-col p {
     margin-bottom: 0px;
}
 .footer-col:before {
     content: '';
     position: absolute;
     height: 80%;
     width: 1px;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     left: 0;
     background-color: white;
     opacity: .4;
}
 .vertical-spacer {
     opacity: .4;
     padding: 0 10px;
}
 .footer-social a {
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
}
 .footer-social a:hover {
     color: white;
}
 .link {
     opacity: .7;
     -webkit-transition: all .2s ease;
     transition: all .2s ease;
}
 .link:hover {
     opacity: 1;
     cursor: pointer;
}
 .hero-content, .hero-content--about, .hero-content--contact {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     text-align: left;
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
     background-image: url("../../assets/images/frontend-fleet-about-title.png");
     background-repeat: no-repeat;
     background-position: right;
     color: white;
     padding: 40px 0px;
}
 .hero-content--about {
     padding-right: 150px;
}
 .hero-content--contact {
     padding-right: 350px;
}
 .about-fleet {
     margin: 100px 0;
     padding: 50px 0;
     background-image: url("../../assets/images/frontend-fleet-about-content.png");
}
 .about-fleet p {
     opacity: .6;
     font-size: 18px;
     margin-top: 40px;
}
 .fleet-member, .fleet-member--flip {
     background-color: #02001C;
     color: white;
     margin-bottom: 50px;
}
 .fleet-member .fleet-shape, .fleet-member--flip .fleet-shape {
     position: relative;
     z-index: 1;
}
 .fleet-member .fleet-shape::before, .fleet-member--flip .fleet-shape::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-image: url("../../assets/images/frontend-fleet-about-minds.png");
     background-repeat: no-repeat;
     background-image: contain;
     z-index: -1;
}
 .fleet-member--flip {
     text-align: right;
}
 .fleet-member--flip .fleet-shape::before {
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
}
 .fleet-member .col, .fleet-member--flip .col {
     padding: 30px 15px;
}
 .fleet-member_image {
     height: 192px;
     width: 192px;
     border-radius: 50%;
     overflow: hidden;
     background-color: #d8dede;
     margin: 0px auto;
}
 .fleet-member_image img {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
}
 .fleet-member_content span {
     font-size: 12px;
}
 .contact-tile {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     margin-bottom: 60px;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
 .contact-tile-image {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-flex: 1;
     -ms-flex-positive: 1;
     flex-grow: 1;
     -ms-flex-negative: 1;
     flex-shrink: 1;
     -ms-flex-preferred-size: 0;
     flex-basis: 0;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
}
 .contact-tile-image img {
     -ms-flex-item-align: center;
     align-self: center;
}
 .contact-tile-details {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-flex: 1;
     -ms-flex-positive: 1;
     flex-grow: 1;
     -ms-flex-negative: 1;
     flex-shrink: 1;
     -ms-flex-preferred-size: 0;
     flex-basis: 0;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
}
 .contact-map-section {
     height: 600px;
     position: relative;
}
 .contact-address h4 {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     margin-bottom: 0px;
}
 .contact-form {
     padding: 15px 0px;
     background-color: #02001C;
     width: 400px;
     height: 90%;
     border-radius: 2px;
     position: absolute;
     right: 30px;
     top: 5%;
     color: white;
     -webkit-box-shadow: 0px 4px 20px rgba(2, 0, 28, 0.5);
     box-shadow: 0px 4px 20px rgba(2, 0, 28, 0.5);
}
 hr.primary {
     border-color: #00CC37;
}
 .contact-social-icons {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}
 .contact-social-icons .social-icon, .contact-social-icons .social-icon--facebook, .contact-social-icons .social-icon--twitter, .contact-social-icons .social-icon--instagram {
     margin: 0 30px;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
     cursor: pointer;
     background-color: rgba(0, 204, 55, 0.15);
}
 .contact-social-icons .social-icon a, .contact-social-icons .social-icon--facebook a, .contact-social-icons .social-icon--twitter a, .contact-social-icons .social-icon--instagram a {
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
     font-size: 25px;
     color: #00CC37;
}
 .social-icon--facebook:hover {
     background-color: #d1e2f2;
}
 .social-icon--facebook:hover a {
     color: #1f77be;
}
 .social-icon--twitter:hover {
     background-color: rgba(79, 172, 234, 0.2);
}
 .social-icon--twitter:hover a {
     color: #4facea;
}
 .social-icon--instagram:hover {
     background-color: rgba(154, 38, 102, 0.2);
}
 .social-icon--instagram:hover a {
     color: #c446ab;
}
 .booking {
     padding: 45px 50px;
     padding-bottom: 20px;
     border: 2px dashed rgba(2, 0, 28, 0.1);
     position: relative;
     margin-bottom: 60px;
}
 .booking p {
     font-size: 16px;
     font-weight: 300;
}
 .pills-container .pill {
     margin-right: 10px;
     margin-bottom: 10px;
}
 .pill {
     display: inline-block;
     background-color: rgba(2, 0, 28, 0.08);
     padding: 0 14px;
     line-height: 2.5em;
     border-radius: 50px;
     text-align: center;
     font-weight: 400;
     font-size: 14px;
     margin-right: 10px;
     margin-bottom: 5px;
}
 .pill img {
     position: relative;
     top: -1px;
     margin: 0px 5px;
}
 .pill.primary {
     color: #00CC37;
     background-color: rgba(0, 204, 55, 0.1);
}
 .pill.primary.filled {
     background-color: #00CC37;
     color: white;
}
 .pill.danger {
     background-color: #ffe8eb;
     color: #e83d33;
}
 .pill.danger.filled {
     background-color: #e83d33;
     color: white;
}
 .booking .booking-date {
     position: absolute;
     background-color: #02001C;
     color: white;
     top: -20px;
     left: 45px;
     padding: 8px 16px;
     border-radius: 2px;
     font-size: 12px;
     font-weight: 600;
}
 .booking .booking-status {
     position: absolute;
     right: 45px;
     top: -20px;
     border-radius: 2px;
     font-weight: 600;
}
 .bg-strip {
     background-image: url("../../assets/images/frontend-icons-fleet-heading-strip.png");
     background-repeat: no-repeat;
     background-position: center;
     padding: 10px 0;
     color: white;
     text-align: center;
}
 .booking-search {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
     position: relative;
}
 .booking-search input {
     color: white;
     line-height: 2em;
     width: 40px;
     will-change: transform;
     -webkit-transition: all .5s ease;
     transition: all .5s ease;
     border: 2px solid rgba(2, 0, 28, 0.1);
     cursor: default;
}
 .booking-search input::-webkit-input-placeholder {
     color: white;
}
 .booking-search input:-ms-input-placeholder {
     color: white;
}
 .booking-search input::-ms-input-placeholder {
     color: white;
}
 .booking-search input::placeholder {
     color: white;
}
 .booking-search input:focus {
     border: 2px solid rgba(2, 0, 28, 0.3);
     -webkit-box-shadow: none;
     box-shadow: none;
     outline: 0;
}
 .booking-search input.active {
     color: #02001C;
     padding-left: 20px;
     padding-right: 40px;
     width: 100%;
     line-height: 2em;
}
 .booking-search input.active::-webkit-input-placeholder {
     color: rgba(2, 0, 28, 0.3);
}
 .booking-search input.active:-ms-input-placeholder {
     color: rgba(2, 0, 28, 0.3);
}
 .booking-search input.active::-ms-input-placeholder {
     color: rgba(2, 0, 28, 0.3);
}
 .booking-search input.active::placeholder {
     color: rgba(2, 0, 28, 0.3);
}
 .booking-search .search-icon {
     position: absolute;
     right: 0px;
     top: 48%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     cursor: pointer;
}
 .rupees {
     font-size: 16px;
}
 @media (max-width: 450px) {
     .hero-section--home {
         background-size: 200%;
         background-position: left 150px;
         background-position-x: 0px !important;
    }
     .hero-section--contact {
         background-size: cover;
         height: 59vh;
         width: 100vh;
    }
     .hero-form-container {
         max-height: none;
    }
     .testimonial-content {
         font-size: 14px;
    }
     .login-popup {
         width: 320px;
         right: -15px;
    }
     .navbar-collapse {
         background-color: white;
         margin-top: 10px;
         border-radius: 5px;
         -webkit-box-shadow: 0px 4px 8px rgba(2, 0, 28, 0.2);
         box-shadow: 0px 4px 8px rgba(2, 0, 28, 0.2);
         -webkit-transition: all .3s;
         transition: all .3s;
    }
     .navbar-collapse .navbar-nav {
         padding: 10px 0;
    }
     .navbar-collapse a {
         padding: 10 px 0px;
    }
     .navbar-collapse a:after {
         display: none;
    }
     .service-slider-arrow .arrow-prev {
         left: 20px;
    }
     .service-slider-arrow .arrow-next {
         right: 20px;
    }
     .js-service-slider .col-sm-4, .js-service-slider .col-sm-8 {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         text-align: center;
    }
     .js-service-slider h6 {
         margin-top: 40px;
    }
     .no-padding-mobile {
         padding-left: 0;
         padding-right: 0;
    }
     .footer-col {
         text-align: center;
         margin-bottom: 30px;
    }
     .about-feature h3 {
         position: relative;
         top: -200px;
         font-size: 32px;
    }
     .about-feature p {
         position: relative;
         top: -20px;
    }
     .contact-form {
         width: 90%;
         top: 3%;
         left: 5%;
    }
     .contact-social-icons .social-icon, .contact-social-icons .social-icon--facebook, .contact-social-icons .social-icon--twitter, .contact-social-icons .social-icon--instagram {
         margin: 0 10px;
    }
     .booking {
         padding-left: 15px;
         padding-right: 15px;
    }
     .booking .booking-date {
         left: 15px;
    }
     .booking .booking-status {
         right: 15px;
    }
}
 @media (max-width: 991px) {
     .bg-strip {
         background-image: url("../../assets/images/frontend-icons-fleet-heading-strip-tablet.png");
    }
     .hero-section--home {
         background-position-x: 15px;
    }
     .right-nav-trigger, .left-nav-trigger {
         display: inline-block;
    }
     .testimonial-content {
         margin-top: 0px;
    }
     .footer-col:before {
         display: none;
    }
     .hero-content--about, .hero-content--contact {
         background-image: none;
         background-color: rgba(0, 204, 55, 0.95);
         padding: 30px 20px;
    }
     .hero-content--about .inner-content, .hero-content--contact .inner-content {
         display: block;
         width: 100%;
         text-align: center;
    }
     .hero-content--about .inner-content h1, .hero-content--contact .inner-content h1 {
         font-size: 30px;
    }
     .hero-content--about .inner-content h5, .hero-content--contact .inner-content h5 {
         margin-top: 10px;
         font-size: 18px;
    }
     .fleet-shape::before {
         display: none;
    }
     .fleet-member_content {
         margin-top: -20px;
         text-align: center;
         padding-bottom: 10px;
    }
     .contact-tile {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
    }
     .contact-tile .contact-tile-details {
         margin-top: 30px;
         text-align: center;
    }
     .contact-address {
         bottom: -60px;
         width: 100%;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-pack: center;
         -ms-flex-pack: center;
         justify-content: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
    }
     .contact-address h4 {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
    }
}
 @media (max-width: 1025px) {
     .js-service-slider {
         max-width: 570px;
         margin: 0 auto;
    }
     .login-modal {
         height: auto;
    }
     .fleet-shape::before {
         background-position: -20px 0px;
    }
     .service-slide-prev, .service-slide-next {
         top: 51%;
    }
     .vehicle-slider {
         margin-top: 0px;
    }
     .vehicle-slider .col-sm-4 {
         margin: 0px auto;
    }
     .vehicle-slider .col-sm-4 img {
         display: block;
         margin: 0 auto;
    }
     .vehicle-slider .slick-slide {
         opacity: 1;
    }
     .custom-controls-container {
         bottom: -320px;
         left: 50%;
         -webkit-transform: translateX(-50%);
         transform: translateX(-50%);
         width: 100%;
         height: auto;
    }
     .vehicle-details-container .vehicle_details {
         padding: 0 30px;
    }
}
 .visi-bg {
     background-image: url(../../assets/images/visi_img.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     min-height: 25vh;
}
 .misi-bg {
     background-image: url(../../assets/images/pic_misi.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     min-height: 25vh;
}