@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');


:root {
    --font-header: "Playfair Display", serif;
    --font-all: "Inter", sans-serif;

}


a {
    text-decoration: none;

}

body {
    font-family: var(--font-all);
    background: rgb(198, 219, 248);
    background: linear-gradient(180deg, rgba(198, 219, 248, 0.49670290479473034) 10%, rgba(33, 74, 132, 0.4) 100%);
    /* opacity: 0.4; */
}

.navbar {
    /* z-index: 9998; */
    background: rgb(222, 231, 243);
    box-shadow: 0 1px 10px rgb(0 0 0 / 0.2);

    /* background: #C3D1E4; */


}

.add-shadow {
    box-shadow: 0 1px 10px rgb(0 0 0 / 0.2);
    /* border-radius: 0 0 3em 3em; */
}


.navbar-brand {
    font-family: var(--font-header);
    font-size: 25px;
}

.navbar-nav {
    font-family: var(--font-all);
}

.nav-item {
    margin-left: 25px;
}

#navbarNav a {
    color: #214a84;
}


.box {
    position: absolute;
    width: 450px;
    height: 200px;
    left: 10px;
    top: 250px;
    background: linear-gradient(91.1deg, rgba(244, 246, 245, 0.9) -7.89%, rgba(255, 255, 255, 0.9) 132.55%);
    z-index: 9998;
}

.box h2 {
    font-family: var(--font-header);
    padding-left: 30px;
    padding-top: 40px;
}

.box p {
    padding-left: 30px;
}

.carousel-item img {
    height: 530px;
    width: auto;
    padding-left: 200px;
}

.control {
    background-color: #F4F6F5;
    width: 120px;
    height: 40px;
    border: solid;
    border-color: #F4F6F5;
    position: absolute;
    top: 490px;
    left: 1120px;
    z-index: 9999;
}

.carousel-control-prev {
    margin-left: 20px;
}

.carousel-control-next {
    margin-right: 20px;
}

#about-us,
#our-business {
    margin-top: 70px;
}


#about-us h2 {
    font-family: var(--font-header);
}


#our-business h2 {
    font-family: var(--font-header);
}


/*
 CSS for the main interaction
 */
.gif,
.panca {
    padding: 5%;
    border-radius: 15px;
    box-shadow: 0 1px 10px rgb(0 0 0 / 0.2);
    /* background-color: #ffffff; */
}

.tab-panel,
.tab-panel2 {
    /* border: solid 1px blue; */
    padding: 2%;
    border-radius: 15px;
    border-top: 1px solid #9c9c9c;
    height: 390px;
    overflow: auto;
    box-shadow: 0 1px 10px rgb(0 0 0 / 0.2);
    background-color: transparent;
    /* background-color: #ffffff; */

}

/* .tab-panel::-webkit-scrollbar {
    width: 10px;
} */
.tab-panel::-webkit-scrollbar,
.tab-panel2::-webkit-scrollbar {
    width: 10px;
}


::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 15px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 15px;

}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.tabset>input[type="radio"] {
    position: absolute;
    left: -200vw;
}


.tabset .tab-panel {
    display: none;
}


.tabset2>input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset2 .tab-panel2 {
    display: none;
}

.tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
.tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),
.tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),
.tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),
.tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5),
.tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6) {
    display: block;
}

.tabset2>input:first-child:checked~.tab-panels2>.tab-panel2:first-child,
.tabset2>input:nth-child(3):checked~.tab-panels2>.tab-panel2:nth-child(2),
.tabset2>input:nth-child(5):checked~.tab-panels2>.tab-panel2:nth-child(3),
.tabset2>input:nth-child(7):checked~.tab-panels2>.tab-panel2:nth-child(4),
.tabset2>input:nth-child(9):checked~.tab-panels2>.tab-panel2:nth-child(5),
.tabset2>input:nth-child(11):checked~.tab-panels2>.tab-panel2:nth-child(6) {
    display: block;
}


/*
   Styling
  */


.tabset>label {
    position: relative;
    display: inline-block;
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    /* padding: 10px 23.3px 10px; */
    padding: 10px 5.65% 10px;

    /* border: 1px solid transparent; */
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
    border-radius: 10px 10px 0 0;
}

.tabset2>label {
    position: relative;
    display: inline-block;
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    /* padding: 10px 23.3px 10px; */
    padding: 10px 5.65% 10px;

    /* border: 1px solid transparent; */
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
    border-radius: 10px 10px 0 0;
}

/* .tabset>label::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 10px;
    width: 22px;
    height: 4px;
    background: #8d8d8d;
} */

.tabset>label:hover,
.tabset>input:focus+label {
    color: #06c;
}

.tabset>label:hover::after,
.tabset>input:focus+label::after,
.tabset>input:checked+label::after {
    background: #06c;
}

.tabset>input:checked+label {
    border-color: #9c9c9c;
    border-bottom: 2px solid #214A84;
    /* border-bottom: 3px solid #06c; */
    margin-bottom: -1px;
}

/* .tab-panel {
    padding: 30px 0;
    border-top: 1px solid #9c9c9c;
    height: 390px;
    overflow: auto;
} */

.tabset2>label:hover,
.tabset2>input:focus+label {
    color: #06c;
}

.tabset2>label:hover::after,
.tabset2>input:focus+label::after,
.tabset2>input:checked+label::after {
    background: #06c;
}

.tabset2>input:checked+label {
    border-color: #9c9c9c;
    border-bottom: 2px solid #214A84;
    /* border-bottom: 3px solid #06c; */
    margin-bottom: -1px;
}

/* .tab-panel2 {
    padding: 30px 0;
    border-top: 1px solid #9c9c9c;
    height: 390px;
    overflow: auto;
} */

/*
   Demo purposes only
  */
*,
*:before,
*:after {
    box-sizing: border-box;
}


/* .tabset,
.tabset2 {
    max-width: 65em;
} */

.history-image {
    width: auto !important;
    float: left;
    /* margin-right: 5%; */
    margin-left: 5%;
    margin-right: 3%;

}

.history-description {
    line-height: 2;
    /* margin-left: -90px; */
}

/* #about-us .background {
    border-style: solid 1px blue;
    background-color: blue;
    height: 300px;
    width: 700px;
    border-radius: 20px;

} */


/* Graha Inti Fauzi */

.img-show {
    height: 200px;
    width: auto;
    margin-top: 10px;
    /*margin-right: 50px;*/
}

.modal {
    z-index: 9999;
}

.card {
    background-color: transparent;
}

/* .wrap {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} */

/* .wrap {
    height: 350px;
    overflow: auto;
} */

.wrapper {
    height: 125px;
    overflow: hidden;
    /* border-width: 4px;
    border-bottom-style: solid;
    border-image: red; */
    border-width: 20px;
    border-bottom-style: solid 50px #DDE8F7;
    /* border-image: linear-gradient(to top, #DDE8F7, black) 1; */
}

/* .wrap {
    overflow: hidden;
    max-width: 75ch;

} */


#contact {
    background-color: #214a84;
}

#contact h3 {
    color: #fafafa;
}

#contact p {
    color: #fafafa;
}

#contact ul {
    color: #fafafa;
}

/* #contact li {
    color: #fafafa;
} */

#contact a {
    color: #fafafa;
}

.zoom-image a {
    z-index: 9999;
}