@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');
html { background: #000; }
body{ font-family: "Roboto", sans-serif; font-size: 16px; background: #fff; }
img { max-width: 100%; }
.roboto-slab {
    font-family: 'Roboto Slab', serif;
}
.container { max-width: 1280px !important; }
.link-haroct, .text-haroct { color: #5C2D91 ; }
.bg-haroct { background-color: #5C2D91; }
.bg-haroct-2 { background-color: #E0E0F3; }
.bg-haroct-3, .bg-haroct-3:not(.collapsed) { background-color: #ece9f0; }
.bg-haroct-4 { background-color: #53208C; }
.bg-haroct-5 { background-color: #FAF5FF; }
.bg-haroct-6 { background-color: #F0CBFF; }
.bg-haroct-7 { background-color: #f1e2f6; }
.bg-haroct-text { background-image: url(../images/bg-haroct-text.png); background-position: top 20px right 20px; background-repeat: no-repeat; background-size: contain }
.bg-haroct-3-layer { background-image: url(../images/bg-haroct-3.png); background-position: top 20px right 20px; background-repeat: no-repeat; background-size: auto; }
.bg-haroct-3b-layer { background-image: url(../images/bg-haroct-3b.png); background-position: top 0 right 0; background-repeat: no-repeat; background-size: auto 100%; }
.bg-haroct-layer { .background-image: url(../images/bg-layer.png); background-position: bottom; background-repeat: no-repeat; background-size: contain; }
.bg-about { background-image: url(../images/image-about-bg.png); background-position: bottom left; background-repeat: no-repeat; background-size: 100% 69%; }
.bg-vision { background-image: url(../images/bg-vision.png); background-position: bottom 20px right 20px; background-repeat: no-repeat; background-size: auto 75%; }
.bg-mission { background-image: url(../images/bg-mission.png); background-position: bottom 20px right 20px; background-repeat: no-repeat; background-size: auto 75%; }
.bg-intersect { background-image: url(../images/bg-intersect.png); background-position: bottom 20px right; background-repeat: no-repeat; background-size: auto 25%; }
.bg-solution { background-image: url(../images/bg-solution.png); background-position: bottom 15px right 15px; background-repeat: no-repeat; background-size: auto 45%; padding-bottom: 50px; }
.bg-footer { background-color: #f6f6f6; }
.bg-serving-location { background-image: url(../images/bg-serving-locations.png); background-position: center; background-repeat: no-repeat; background-size: cover; }
.bg-white-transparent { background-color: rgba(255, 255, 255, 0.8); border-radius: 30px; }
.bg-career { background-image: url(../images/bg-career.png); background-position: bottom left; background-repeat: no-repeat; background-size: auto; }
.btn-haroct { background-color: #5C2D91; color: #fff; }
.btn-haroct:hover { background-color: #4e277a; color: #fff; }
.btn-haroct-light { background-color: #fff; color: #5C2D91 !important; border-radius: 15px; }
.btn-haroct-light:hover { background-color: #5C2D91; color: #fff !important; border: 1px solid #fff; }
.btn-haroct-2 { background-color: #5C2D91; color: #fff !important; border-radius: 15px; border: 1px solid #fff; }
.btn-haroct-2:hover { background-color: #fff; color: #5C2D91 !important; }
.border-haroct { border: 1px solid #5C2D91; }
.logo { max-height: 35px; }
.footer-logo { max-height: 45px; filter: brightness(0) saturate(100%) invert(40%) sepia(100%) saturate(6000%) hue-rotate(253deg) brightness(70%) contrast(92%); }
.homepage .main-row > div:nth-child(1) { margin-left: 75px; }
.homepage .main-row > div:nth-child(2) { margin-left: -25px; }
.homepage .main-row > div:nth-child(3) { margin-left: -50px; padding: 0px 65px; }
.homepage .main-row > div:nth-child(1) img { max-height: 60px; }
.copyright img { max-height: 40px; }
.accordion-flush > .accordion-item { margin-bottom: 15px; }
.accordion-flush > .accordion-item > .accordion-header .accordion-button,
.accordion-flush > .accordion-item > .accordion-header .accordion-button.bg-haroct-3 { border-radius: 5px 5px 0 0; }
.accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed,
.accordion-flush > .accordion-item > .accordion-header .accordion-button.bg-haroct-3.collapsed { border-radius: 5px; font-weight: bold; }
.accordion-flush > .accordion-item > .accordion-header .accordion-button img { max-height: 30px; }
.accordion-item { border: none; }
.accordion-body { border-radius: 0 0 5px 5px; padding-top: 0px; }
.accordion-button, 
.accordion-button:focus { outline: none !important; box-shadow: none !important; }
.accordion-haroct { border: 1px solid #5C2D91 !important; border-radius: 5px !important; background: #fff; }
.accordion-haroct .accordion-button { background: none; }
.accordion-haroct-2 { border: 1px solid #F0CBFF !important; border-radius: 5px !important; background: #F0CBFF; }
.accordion-haroct-2 .accordion-button { background: none; font-weight: bold !important; color: #5C2D91 !important; }
.avatar a { display: grid; place-items: center; overflow: hidden; width: 70px; height: 70px; border-radius: 50%; margin: auto; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); position: relative; }
.avatar a img { min-width: 100%; min-height: 100%; object-fit: cover; object-position: center; }
.buyer-icon img { max-height: 90px; }
.about-image-container { display: inline-block; background-color: #ead4f3; width: 350px; padding: 20px 0; text-align: center; margin-bottom: 30px; }
.about-image-container img { max-height: 150px; }
.border-top-about { border-top: 1px solid #5C2D90; padding-top: 30px; }
.partner img { max-width: 319px; .max-height: 180px; }
.nav-tabs .nav-link { border: none; color: #999; }
.nav-tabs .nav-link.active { border: none; border-bottom: 2px solid #5C2D91; color: #5C2D91; }
.tab-content  { padding: 25px 0; }
.tab-content > div { overflow: hidden; }
.media .image a { display: grid; place-items: center; min-width: 350px; width: 100%; height: 250px; max-width: 100%; overflow: hidden; position: relative; border-radius: 10px 10px 0 0; }
.media a img { min-width: 100%; min-height: 100%; object-fit: cover; object-position: center; }
.journey { display: grid; place-items: center; width: 385px; height: 250px; max-width: 100%; overflow: hidden; position: relative; border-radius: 10px 10px 0 0; }
.journey img { min-width: 100%; min-height: 100%; object-fit: cover; object-position: center; }
.break-word { word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; }
.overlap-container { position: relative; overflow: hidden; }
.overlap { position: relative; z-index: 1; }
.overlap-3rd { position: absolute; right: -9%; z-index: 2; }
.cvh-100 { display: grid; place-items: center; width: 100%; min-height: calc(100vh - 77px); .height: calc(100vh - 77px); max-width: 100%; overflow: hidden; position: relative; }
.cvh-100 > img { min-width: 100%; min-height: 100%; object-fit: cover; object-position: center; }

.navbar-dark .navbar-nav .nav-link {
    font-weight: bold;
    color: rgba(255,255,255,.75);
}

.masonry {
    column-count: 3;
    column-gap: 1rem;
}
.masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}
.masonry-item img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {
    .homepage .main-row > div { margin-left: inherit !important; margin-right: inherit !important; }
    .bg-haroct-layer { background-size: 200% 96vw; }
    .cvh-100 { min-height: inherit; }
    .masonry { column-count: 1; column-gap: 1rem; }
}

@media (min-width: 768px) {
    .col-md-20 {
        flex: 0 0 auto;
        width: 20%;
      }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.form-control-bottom-border {
    background: none;
    border: none;
    border-bottom: 2px solid #ced4da;
    border-radius: 0;
    box-shadow: none;
}

.form-control-bottom-border:focus {
    background: none;
    border-bottom-color: #80bdff;
    box-shadow: none;
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}