*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

html, 
body {
    height: 100%; 
    width: 100%;
    font-family: "Calibri" , sans-serif;
}

.Container {
    display: flex;
    margin: 0;
    position: relative;
}

/* navigation start */
.navbar {
    display: flex;
    position: fixed;
    top: 0vw;
    z-index: 1;
    min-width: 100%;
    background-color: white;
    border-bottom: 0.1vw solid #cdcdcd;
    justify-content: space-between;
    align-items: center;
    place-content: center;
    width: 100%;
    height: 4.8vw;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
}

.flag{
    display: flex;
    flex-direction: row;
    gap: 1vw;
}
.flag>li>img{
    display: flex;
    position: relative;
    top: 0.5vw;
    width: 2vw;
    left: 0vw;
    border-color: #DA3556;
    border-style: solid;
    border-width: thin;
}

.nav-menu{
    top: 0vw;
    left: -1.1vw;
    gap: 0vw;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 1;
    min-width: 100%;
    line-height: 1.3vw;
    background-color: white;
    border-bottom: 0.1vw solid #cdcdcd;
}
.nav-menu > li > img {
    position: relative;
    top: 0vw;
    width: 10vw;
    left: 9.8vw;
}
.nav-menu.active {
    left: 0;
}

.hamburger {
    display: none;
    cursor: pointer;
}
.bar {
    display: block;
    width: 5vw;
    height: 1vw;
    border-radius: 1vw;
    margin: 0.5vw auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #DA3556;
}
@media(max-width:768px){

    .hamburger{
        display: block;
        position: relative;
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1){
        position: relative;
        transform: translateY(calc(1.5vw)) rotate(45deg);

    }
    .hamburger.active .bar:nth-child(3){
        position: relative;
        transform: translateY(calc(-1.5vw)) rotate(-45deg);

    }

    .navbar{
        display: flex;
        justify-content: space-between;
        padding: 5vw 5vw;
        width: 100%;
        height: 13vw !important;
    }

    .nav-menu{
        display: flex;
        position: fixed;
        left: -100%;
        top: 13vw;
        gap: 0;
        flex-direction: column;
        width: 100%;
        height: 30vw;
        background-color: #fff;
    }
    .nav-menu a{
        top: -1vw;
        left: 0;
        width: auto;
        height: auto;
        border-radius: 100vw !important; 
        font-size: 3vw !important;
    }
    .language{
        position: absolute;
        left: -10.5vw !important;
        font-size: 3vw !important;
        text-align: left;
    }
    .dropdown{
        position: relative;
    }
    .dropdown-menu a{
        font-size: 3vw !important;
        cursor: pointer;
    }
    
    .dropdown-menu {
        position: absolute;
        top: calc(100% + 1rem) !important;
        left: calc(100% + -4rem);
        width: 15vw !important;
        height: 15vw !important;
        background-color: white;
        padding: 0.8vw !important;
        font-size: 14vw;
        border-radius: .25rem;
        box-shadow: 0vw 0.2vw 0.3vw 0 rgb(0, 0, 0, .1);
        opacity: 0;
        transform: translateY(-0.5vw);
        transition: opacity 170ms ease-in-out;
        transition: 170ms ease-out;
    }

    .triangle{
        font-size: 3vw !important;
    }
    .flag{
        position: relative;
        left: 3vw;
    }
    .flag>li>img{
        width: 4vw;
        position: absolute;
        left: 3.5vw;
    }

    .navigation{
        display: flex;
        flex-direction: column;
        gap: 2vw;
        padding: 0vw;
    }
    .navigation>li>a:hover {
        transform: translateY(0px);
        width: auto;
        padding-block: 1.4vw;
        border-radius: 0.8vw;
        background-color: #DA3556;
        color: white;
        transition: all 0.7s ease;
        font-weight: bold;
        background-image: none;
    }
    .navigation>.language-flag{
        display: flex;
        position: absolute;
        left: auto;
        margin-left: 22vw;
        top: 18vw;
    }
    .nav-menu>li>.logo-jumara{
        display: none;
    }
    .logo-jumara{
        position: relative;
        height: 9.6vw !important;
        top: 0vw;
        left: 1.8vw;
    }

}

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    margin: auto;
}
.navigation>li {
    display: flex;
    align-items: center;
    list-style-type: none;
}
.navigation>li>a {
    color: #DA3556;
    position: relative;
    font-size: 1.04vw;
    text-decoration: none;
    text-transform: capitalize;
}
.navigation>li>a:hover {
    background-image: url(image/Vector.png);
    background-repeat: no-repeat;
    background-position: 0vw 1vw;
    background-size: 100%;
    animation-name: navbg;
    animation-duration: .5s;

    color: white;
    font-weight: bold;
}
@keyframes navbg{
    0%{
        opacity: 0%;
        background-position: 0vw 5vw;
    }
    100%{
        opacity: 100%;
        background-position: 0vw 1vw;
    }
}


.navlink {
    color: #DA3556;
    padding: 1.7vw;
    left: -5vw;
}
.language-flag{
    position: absolute;
    display: flex;
    flex-direction: row;
    top: 1.2vw;
    width: 13vw;
    left: 49vw;
}
.language-flag2{
    position: relative;
    display: flex;
    flex-direction: row;
    top: -0.5vw;
    width: 13vw;
    left: 25vw;
}
.language{
    display: flex;
    flex-direction: row;
    gap: 0.5vw;
    font-size: 0.9vw;
    border: none;
    text-transform: capitalize;
    background-color: white;
    color: #DA3556;
}
.language>.button{
    font-size: 1vw;
}
.triangle{
    position: relative;
    left: 0vw;
    top: 0.5vw;
    font-size: 1vw;
    pointer-events: none;
    color: #DA3556;
}


.dropdown.active.language,
.language:hover {
    font-weight: bold;
    transition: all 0.1s ease-in-out;
    cursor: pointer;
}
.dropdown {
    position: absolute;
    padding: 0.6vw;
    right: 13vw;
    font-size: 1vw;
}
.dropdown-menu {
    position: absolute;
    top: calc(100% + .5rem);
    background-color: white;
    padding: 0.8vw;
    border-radius: .25rem;
    box-shadow: 0vw 0.2vw 0.3vw 0 rgb(0, 0, 0, .1);
    opacity: 0;
    transform: translateY(-0.5vw);
    transition: opacity 170ms ease-in-out;
    transition: 170ms ease-out;
}
.dropdown.active > .language + .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
}

.English {
    color: #DA3556;
    cursor: default;
}
.English:hover {
    font-weight: bold;
}
.Indonesia {
    color: #DA3556;
    cursor: default;
}
.Indonesia:hover {
    font-weight: bold;
}
/* navigation end */




/* short intro start */
.header-story{
    position: relative;
    display: grid;
    background-image: url(image/BGjumara.png);
    background-size: 100vw;
    background-repeat: no-repeat;
    width: 100%;
    height: 57vw;
}
.intro-story{
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.our-story{
    position: relative;
    left: 58vw;
    padding-right: 2.6vw;
    top: 8.5vw;
    height: 36vw;
    width: 100%; 
}
.our-story>h3 {
    position: relative;
    letter-spacing: 0.13vw;
    color: white;
    font-size: 1.05vw;
    font-weight: bold;
}
.tittle-story>h1 {
    position: relative;
    left: 0vw;
    top: 0vw;
    width: 40.8vw;
    color: white;
    font-size: 3.9vw;
    font-weight: bold;
    line-height: 4.5vw;
}
.description-story>h2 {
    position: relative;
    width: 40vw;
    height: 8vw;
    color: white;
    font-size: 1.18vw;
    font-weight: 100;  
    padding: 0.652vw 0vw;
    opacity: 70%;
    line-height: 2.2vw;
}

.learn-more{
    display: none;
    position: relative;
    left: 0vw;
    top: 3.29vw;
    padding: 0.98vw 1.63vw;
    border-radius: 0.5vw;
    border: none;
    box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
    transition-duration: 0.5s;
    transition-property: transform;
    background-color: #DA3556;

}
.learn-more a{
    background-color: #DA3556;
    color: white;
    font-size: 1.3vw;
    font-weight: 100;  
    text-decoration: none;
}
.learn-more:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.quick-fact-on-indonesia{
    position: absolute;
    top: 4vw;
    left: 38vw;
    width: 100%;
    height: 100%;
}
.quick-fact-on-indonesia h1{
    position: relative;
    font-size: 2.5vw;
    color: #fff;
}
.info-achievement{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: -8vw;
    background-color: 2vw 2vw #121212;
    background-image: url(image/shadow.png);
    background-size: 110%;
}
.imagefact{
    width: 5vw;
    height: 4vw;
}
.info-award{
    display: flex;
    flex-direction: row;
    position: relative;
    left: -1.5vw;
    top: 9vw;
    justify-content: center;
    gap: 1vw;
}
.info-award h1{
    position: relative;
    width: 20vw;
    font-size: 2.5vw;
    color: #DA3556;
}
.info-award h2{
    color: white;
    width: 15vw;
    font-size: 1.5vw;
    font-weight: 500;
}
.Total_Islands{
    display: flex;
    flex-direction: row;
    width: 14vw;
    height: 10vw;
    gap: 1vw;
}
.Water_Areas{
    display: flex;
    flex-direction: row;
    width: 22vw;
    height: 10vw;
    gap: 1vw;
}
.Total_Population{
    display: flex;
    flex-direction: row;
    width: 16vw;
    height: 10vw;
    gap: 1vw;
}
.Total_Fisherman{
    display: flex;
    flex-direction: row;
    width: 16vw;
    height: 10vw;
    gap: 1vw;
}
.Total_Fish{
    display: flex;
    flex-direction: row;
    width: 14vw;
    height: 10vw;
    gap: 1vw;
}


@media(max-width:768px){
    .header-story{
        height: 161vw;
        width: 100%;
        background-image: url(image/BG\ versi\ C.png);
        background-position: -88vw 5vw;
        background-size: 245vw;
        overflow: hidden;
    }
    .our-story{
        display: flex;
        flex-direction: column;
        position: relative;
        top: 18vw;
        left: 10vw;
        height: 80vw;
        width: 100%;
    }
    .our-story h3{
        font-size: 2.5vw;
    }

    .tittle-story h1{
        font-size: 7vw;
        line-height: 9vw;
        margin-right: 15vw;
        width: fit-content;
    }
    .description-story h2{
        font-size: 3vw;
        line-height: 6vw;
        width: 90%;
    }
    .learn-more{
        position: relative;
        width: fit-content;
        height: 7vw;
        font-size: 2vw;
        left: 0vw;
        top: 3.29vw;
        padding: 0.98vw 1.63vw;
        border-radius: 1vw;
        border: none;
        box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
        transition-duration: 0.5s;
        transition-property: transform;
        background-color: #DA3556;
    
    }
    .learn-more a{
        background-color: #DA3556;
        color: white;
        font-size: 2.3vw;
        font-weight: 100;  
        text-decoration: none;
    }

    .info-achievement{
        height: 40vw;
        position: relative;
        background-image: none;
    }
    .info-award{
        display: flex;
        flex-direction: column;
        position: relative;
        top: 7vw;
        left: 10vw;
    }
    .story-award{
        position: relative;
        display: flex;
        width: 100vw;
        height: 10vw;
    }
    .text-info h1{
        font-size: 4vw;
        width: 26vw;
    }
    .text-info h2{
        font-size: 3vw;
        width: 30vw;
    }
    .quick-fact-on-indonesia h1{
        position: relative;
        top: -5vw;
        left: -16vw;
        font-size: 5vw;
    }
    .imagefact{
        height: 6vw;
        width: 7vw;
    }
    .Water_Areas{
        position: relative;
        top: -0vw;
        width: fit-content;
    }
    .Water_Areas h1{
        width: fit-content;
    }
    .Total_Population{
        position: absolute;
        top: 0vw;
        right: 38vw;
    }
    .Total_Fisherman{
        position: absolute;
        top: 11vw;
        right: 38vw;
    }
    .Total_Fish{
        position: absolute;
        margin-top: 33vw;
    }
    .Total_Fish h2{
        width: 35vw;
    }

}
/* short intro end */






/* our bussines start */
.Bussines-Container{
    position: relative;
    width: 100%;
    height: 70vw;
    overflow: hidden;
}
.BUSSINES{
    display: flex;
    flex-direction: row;
    position: relative;
    top: 7vw;
    width: 100%;
    height:60vw;
}
.bussines-left{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 38vw;
    width: 50vw;
}
.bussines-left>h1{
    position: relative;
    left: 9.77vw;
    color: #DA3556;
    font-size: 2.08vw;
    font-weight: bold;
}
.bussines-left>h3{
    position: relative;
    letter-spacing: 0.13vw;
    left: 9.77vw;
    color: #DA3556;
    font-size: 1.05vw;
}
.bussines-left>p{
    position: relative;
    top: 2vw;
    left: 9.77vw;
    color: #646464;
    font-size: 1.17vw;
    line-height: 2.5vw;
    width: 34vw;
    height: 28vw;
}

.more-information{
    display: none;
    position: relative;
    height: 4vw;
    width: fit-content;
    top: 1vw;
    left: 9.8vw;
    background-color: #DA3556;
    color: white;
    font-size: 1.3vw;
    font-weight: 500;
    padding: 1.1vw 2vw;
    border-radius: 0.5vw;
    border: none;
    box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
    transition-duration: 0.5s;
    transition-property: transform;
}
.more-information:hover{
    transform: scale(1.1);
    cursor: pointer;
}

.bussines-right{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 50vw;
    height: 50vw;
    top: -1vw;
}
.cold-storage{
    display: flex;
    position: relative;
    height: 16vw;
    width: 100%;
}
.storage {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 1.3vw;
    left: 8.6vw;
    width: 100%;
    height: 13.1vw;
}
.bussines-right img{
    width: 10vw;
}
.text-storage {
    position: relative;
    top: 0vw;
    left: 2vw;
    width: 20vw;
    padding: 1vw;
}
.bussines-right h1{
    font-size: 1.5vw;
}
.bussines-right p{
    font-size: 1vw;
}

.downstream_processing{
    display: flex;
    position: relative;
    height: 16vw;
    width: 100%;
}
.downstreamprocessing{
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    height: 13.1vw;
    top: 1.3vw;
    left: 8.6vw;
}
.text-downstreamprocessing{
    position: relative;
    top: 0vw;
    left: 2vw;
    width: 20vw;
    padding: 1vw;
}

.working_capital_financing{
    display: flex;
    position: relative;
    height: 16vw;
    top: 1.3vw;
    width: 100%;
}
.workingcapitalfinancing{
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    height: 13.1vw;
    left: 8.6vw;
}
.text-working_capital_financing{
    position: relative;
    top: 0vw;
    left: 2vw;
    width: 20vw;
    padding: 1vw;
}

@media(max-width:768px){
    .Bussines-Container{
        position: relative;
        display: flex;
        top: -20vw;
        height: 180vw;
        width: 100%;
    }
    .BUSSINES{
        display: flex;
        flex-direction: column;
    }
    .bussines-left h1{
        width: 100%;
        font-size: 5vw;
    }
    .bussines-left h3{
        font-size: 2.5vw;
    }
    .bussines-left p{
        width: 80vw;
        font-size: 2.5vw;
        line-height: 4vw;
    }
    .more-information{
        position: relative;
        width: fit-content;
        height: 10vw;
        font-size: 3vw;
        left: 9vw;
        top: 10vw;
        padding: 1.98vw 1.63vw;
        border-radius: 1vw;
        border: none;
        box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
        transition-duration: 0.5s;
        transition-property: transform;
        background-color: #DA3556;
    
    }
    .more-information a{
        background-color: #DA3556;
        color: white;
        font-size: 2.3vw;
        font-weight: 100;  
        text-decoration: none;
    }

    .bussines-right{
        position: relative;
        display: flex;
        top: 40vw;
        gap: 8vw;
        height: 100%;
    }
    .image-storage>img{
        position: relative;
        width: 20vw;
    }
    .text-storage h1{
        font-size: 5vw;
        width: 30vw;
    }
    .text-storage p{
        font-size: 2.5vw;
        width: 40vw;
    }
    .downstream_processing{
        position: relative;
        top: 10vw;
    }
    .image-coworker>img{
        position: relative;
        width: 20vw;
    }
    .text-downstreamprocessing h1{
        font-size: 5vw;
        width: 50vw;
    }
    .text-downstreamprocessing p{
        font-size: 2.5vw;
        width: 40vw;
    }

    .working_capital_financing{
        position: relative;
        top: 20vw;
    }
    .image-working_capital_financing>img{
        position: relative;
        width: 20vw;
    }
    .text-working_capital_financing h1{
        font-size: 5vw;
        width: 54vw;
    }
    .text-working_capital_financing p{
        font-size: 2.5vw;
        width: 40vw;
    }

    
}
/* our bussines end */



/* procedure start */

.work-procedure{
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background-image: url('image/Our\ work\ procedure.png');
    background-size: 100vw;
    width: 100%;
    height: 30vw;
}

.tittle-procedure>h1 {
    position: relative;
    top: 2vw;
    left: 41vw;
    font-size: 2.09vw;
    color: white;
    font-weight: bold;
}

.text-procedure {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 21.45vw;
    left: 6vw;
    color: white;
    font-size: 1vw;
}
.step-one{
    display: flex;
    position: relative;
    width: 12vw;
    text-align: center;
}
.step-two{
    display: flex;
    position: relative;
    width: 12vw;
    text-align: center;
    left: 12vw;
}
.step-three{
    display: flex;
    position: relative;
    width: 15vw;
    text-align: center;
    left: 25.5vw;
}
.step-four{
    display: flex;
    position: relative;
    width: 12vw;
    text-align: center;
    left: 37vw;
}

@media(max-width:768px){ 
    .work-procedure{
        position: relative;
        width: 100%;
        height: 195vw;
        background-image: url(image/Our\ work\ procedure\ 2.png);
        background-size: 50%;
        background-repeat: no-repeat;
        background-color: #DA3556;
        background-position: 0vw 15vw;
    }
    .tittle-procedure h1{
        position: relative;
        display: flex;
        top: 10vw;
        left: 30vw;
        font-size: 5vw;
    }
    .text-procedure{
        position: relative;
        display: flex;
        flex-direction: column;
        font-size: 3vw;
    }
    .step-one h1{
        position: absolute;
        display: flex;
        top: 2vw;
        left: 35vw;
        width: 32vw;
    }
    .step-two h1{
        position: absolute;
        display: flex;
        top: 45vw;
        left: 22vw;
        width: 35vw;
    }
    .step-three h1{
        position: absolute;
        display: flex;
        top: 95vw;
        left: 10vw;
        width: 35vw;
    }
    .step-four h1{
        position: absolute;
        display: flex;
        top: 140vw;
        left: 0vw;
        width: 30vw;
    }
}
/* procedure end */



/* benefit start */
.why-choose-us{
    display: flex;
    position: relative;
    flex-direction: row;
    width: 100%;
    height: 60vw;
    top: 8vw;
}

.benefit-left {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    width: 47vw;
    height: 30vw;
    top: 8vw;
}
.benefit-left>h3{
    position: relative;
    left: 9.9vw;
    color: #DA3556;
    font-size: 1.04vw;
    letter-spacing: 0.13vw;
    width: 100%;
    height: 1.5vw;
}
.benefit-left>h1{
    position: relative;
    left: 9.9vw;
    color: #DA3556;
    font-size: 2.08vw;
    width: 28vw;
    height: auto;
}
.benefit-left>p{
    position: relative;
    top: 1vw;
    left: 9.9vw;
    color: #646464;
    font-size: 1.17vw;
    width: 35vw;
    height: 15vw;
    line-height: 2.5vw;
}
.see-product{
    display: none;
    position: relative;
    left: 9.9vw;
    width: fit-content;
    background-color: #DA3556;
    color: white;
    font-size: 1.3vw;
    font-weight: 500;  
    text-decoration: none;
    padding: 0.98vw 1.63vw;
    border-radius: 0.5vw;
    border: none;
    box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
    transition-duration: 0.5s;
    transition-property: transform;
}
.see-product:hover {
    transform: scale(1.1);
}

.benefit-middle{
    display: flex;
    position: relative;
    left: 3vw;
    top: 3vw;
    width: 2vw;
    height: 100%;
}
.benefit-middle>img {
    position: relative;
    width: 1.5vw;
    height: 30vw;
}


.benefit-right{
    position: relative;
    display: flex;
    flex-direction: column;
    left: 10vw;
    gap: 1vw;
}

.product-quality{
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 2vw;
}
.productqualityimage{
    position: relative;
    top: 1vw;
    width: 9vw;
    height: 7vw;
}
.product-quality-text{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 8vw;
    gap: 0.3vw;
}


.product-quality-text>h1 {
    position: relative;
    font-size: 2vw;
    width: fit-content;
    background-image: url('image/Rectangle\ line5.png');
    background-repeat: no-repeat;
    background-position: 0vw 1.4vw;
    background-size: auto;
}
.product-quality-text>p{
    position: relative;
    display: flex;
    height: 100%;
    width: 24vw;
    font-size:1.2vw;
}

.excellent-service {
    position: relative;
    display: flex;
    top: 5vw;
    flex-direction: row;
    gap: 2vw;
}
.education{
    position: relative;
    top: 1vw;
    width: 9vw;
    height: 7vw;
}
.excellent-service-text{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 8vw;
    gap: 0.3vw;
}
.excellent-service-text>h1 {
    position: relative;
    font-size: 2vw;
    width: fit-content;
    background-image: url('image/Rectangle\ line5.png');
    background-repeat: no-repeat;
    background-position: 0vw 1.5vw;
    background-size: auto;
}
.excellent-service-text>p{
    position: relative;
    display: flex;
    height: 100%;
    width: 24vw;
    font-size:1.2vw;
}


.enhanced-operational{
    position: relative;
    display: flex;
    top: 12.5vw;
    flex-direction: row;
    gap: 2vw;
}
.enhancedoperationalimage{
    position: relative;
    top: 1vw;
    width: 9vw;
    height: 7vw;
}
.enhanced-operational-text{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 8vw;
    gap: 0.3vw;
}
.enhanced-operational-text>h1 {
    position: relative;
    font-size: 2vw;
    width: fit-content;
    background-image: url('image/Rectangle\ line5.png');
    background-repeat: no-repeat;
    background-position: 0vw 1.5vw;
    background-size: auto;
}
.enhanced-operational-text>p{
    position: relative;
    display: flex;
    width: 24vw;
    height: 100%;
    font-size:1.2vw;
}

@media(max-width:768px){
    .why-choose-us{
        position: relative;
        display: flex;
        top: 8vw;
        height: 230vw;
        flex-direction: column;
        overflow: hidden;
    }
    .benefit-left{
        position: relative;
        display: flex;
        width: 100%;
        height: 55vw;
        overflow: hidden;
    }
    .benefit-left h3{
        font-size: 2.5vw;
    }
    .benefit-left h1{
        position: relative;
        top: 2vw;
        font-size: 5vw;
        width: 80vw;
    }
    .benefit-left p{
        position: relative;
        top: 10vw;
        font-size: 2.5vw;
        width: 80vw;
        line-height: 4vw;
    }
    .see-product{
        position: relative;
        width: fit-content;
        height: 7vw;
        font-size: 3vw;
        left: 9vw;
        top: 20vw;
        padding: 1.5vw 2vw;
        border-radius: 1vw;
        border: none;
        box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
        transition-duration: 0.5s;
        transition-property: transform;
        background-color: #DA3556;
        overflow: hidden;
    }
    .see-product a{
        background-color: #DA3556;
        color: white;
        font-size: 2.3vw;
        font-weight: 100;  
        text-decoration: none;
    }

    .benefit-middle{
        position: relative;
        top: 27vw;
        left: 7vw;
        width: 1vw;
        height: 1vw;
    }
    .benefit-middle>img{
        width: 10vw;
        height: 85vw;
    }

    .benefit-right{
        position: relative;
        top: 20vw;
        left: 14vw;
        width: 100%;
        height: 130vw;
        gap: 10vw;
        overflow: hidden;
    }
    .productqualityimage{
        position: relative;
        display: flex;
        width: 15vw;
        height: 15vw;
    }
    .product-quality-text h1{
        font-size: 5vw;
        width: fit-content;
        background-image: url('image/Rectangle\ line.png');
        background-repeat: no-repeat;
        background-position: 0vw 3.5vw;
        background-size: contain;
    }
    .product-quality-text p{
        font-size: 2.5vw;
        width: 44vw;
    }

    .education{
        position: relative;
        display: flex;
        top: 12vw;
        width: 15vw;
        height: 15vw;
    }
    .excellent-service-text h1{
        font-size: 5vw;
        top: 12vw;
        width: fit-content;
        background-image: url('image/Rectangle\ line5.png');
        background-repeat: no-repeat;
        background-position: 0vw 3.5vw;
        background-size: auto;
    }
    .excellent-service-text p{
        top: 12vw;
        font-size: 2.5vw;
        width: 44vw;
    }

    .enhancedoperationalimage{
        position: relative;
        display: flex;
        top: 23vw;
        width: 15vw;
        height: 15vw;
    }
    .enhanced-operational-text h1{
        top: 23vw;
        font-size: 5vw;
        width: fit-content;
        background-image: url('image/Rectangle\ line5.png');
        background-repeat: no-repeat;
        background-position: 0vw 3.5vw;
        background-size: auto;
    }
    .enhanced-operational-text p{
        top: 23vw;
        font-size: 2.5vw;
        width: 44vw;
    }    
}
/* benefit end */




/* lastest work start */
.news {
    display: none;
    position: relative;
    width: 100%;
    height: fit-content;
    overflow: hidden;
}
.our-work{
    position: relative;
    margin: 0;
}
.work-tittle{
    display: flex;
    flex-direction: row;
    width: 98.9vw;
    height: 4vw;
}
.Line1 {
    position: relative;
    left: 0px;
    width: 35vw;
    height: 3vw;
}
.Line2{
    position: relative;
    left: 14.8vw;
    width: 35vw;
    height: 3vw;
}
.work-tittle>h1 {
    position: relative;
    left: 7vw;
    font-size: 2.08vw;
    color: #DA3556;
}

.slider {
    position: absolute;
    right: 0vw;
    top: 6vw;
    margin: auto;
    display: grid;
    place-items: center;
    width: 100%;
    overflow: hidden;
}
.slider::-webkit-scrollbar{
    display: none;
}
.slide-track {
    display: flex;
    width: calc(20vw*18);
    height: 25vw;
    animation: scroll 30s linear infinite;
}
.slide-track:hover {
    animation-play-state: paused;
}
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-20vw*9));
    }
}
.slide {
    height: 25.5vw;
    width: 20vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2vw;
    perspective: 100%;
}
.slide>a>img{
    width: 20vw;
}
.slide>a {
    width: 100%;
    transition: transform .5s;
}
.slide>a:hover {
    transform: translateY(-2vw);
    transform: scale(1.1);
}

.Latest{
    display: flex;
    height: 50vw;
}
.Latest2{
    position: relative;
    top: -3vw;
    display: none;
    height: 65vw;
}
.slide2{
    position: relative;
    left: 5vw;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: row;
    gap: 4vw;
    perspective: 100%;
}
.slideA{
    position: relative;
    gap: 2vw;
    top: 6vw;
    left: 6vw;
    display: flex;
    flex-direction: column;
}
.slideB{
    position: relative;
    gap: 2vw;
    top: 6vw;
    left: 10vw;
    display: flex;
    flex-direction: column;
}
.slideC{
    position: relative;
    gap: 2vw;
    top: 6vw;
    left: 14vw;
    display: flex;
    flex-direction: column;
}
.slideA>a>img{
    width: 20vw;
}
.slideA>a {
    width: 100%;
    transition: transform .5s;
}
.slideA>a:hover {
    transform: translateY(-2vw);
    transform: scale(1.1);
}
.slideB>a>img{
    width: 20vw;
}
.slideB>a {
    width: 100%;
    transition: transform .5s;
}
.slideB>a:hover {
    transform: translateY(-2vw);
    transform: scale(1.1);
}
.slideC>a>img{
    width: 20vw;
}
.slideC>a {
    width: 100%;
    transition: transform .5s;
}
.slideC>a:hover {
    transform: translateY(-2vw);
    transform: scale(1.1);
}

.view-more{
    cursor: pointer;
    display: flex;
    position: relative;
    left: 43vw;
    height: fit-content;
    width: fit-content;
    top: 28vw;
    background-color: #DA3556;
    color: white;
    font-size: 1.3vw;
    text-decoration: none;
    padding: 0.98vw 1.63vw;
    border-radius: 0.5vw;
    border: none;
    box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
    transition-duration: 0.5s;
    transition-property: transform;
}
.view-more:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.view-less{
    cursor: pointer;
    display: flex;
    position: absolute;
    left: 43vw;
    width: fit-content;
    top: 55vw;
    background-color: #DA3556;
    color: white;
    font-size: 1.3vw;
    text-decoration: none;
    padding: 0.98vw 1.63vw;
    border-radius: 0.5vw;
    border: none;
    box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
    transition-duration: 0.5s;
    transition-property: transform;
}
.view-less:hover {
    cursor: pointer;
    transform: scale(1.1);
}

@media(max-width:768px)
{

    .Line1{
        position: relative;
        width: 30vw;
        top: 2vw;
        left: -5vw;
        overflow: hidden;
    }
    .Line2{
        position: relative;
        width: 30vw;
        top: 2vw;
        left: 5vw;
        overflow: hidden;
    }
    .work-tittle{
        display: flex;
        flex-direction: row;
        position: relative;
    }
    .work-tittle h1{
        position: relative;
        text-align: center;
        left: 1vw;
        padding: 0vw 1vw;
        font-size: 5vw;
        width: 45vw;
        height: fit-content;
        overflow: hidden;
    }

    .Latest{
        position: relative;
        top: 0vw;
        height: 65vw;
    }
    .slide2{
        width: 100%;
        height: 50vw;
    }
    .slide{
        width: 100%;
        height: 40vw;
    }
    .slide>a>img{
        width: 30vw;
        height: 30vw;
    }
    .slide-track {
        position: relative;
        top: 0vw;
        display: flex;
        width: calc(20vw*18);
        height: 40vw;
        animation: scroll 20s linear infinite;
    }

    .slideA{
        position: relative;
        gap: 2vw;
        top: 6vw;
        left: 0vw;
        display: flex;
        flex-direction: column;
    }
    .slideB{
        position: relative;
        gap: 2vw;
        top: 6vw;
        left: 3vw;
        display: flex;
        flex-direction: column;
    }
    .slideC{
        position: relative;
        gap: 2vw;
        top: 6vw;
        left: 5vw;
        display: flex;
        flex-direction: column;
    }
    .slideA>a>img{
        width: 25vw;
    }
    .slideA>a {
        width: 100%;
        transition: transform .5s;
    }
    .slideA>a:hover {
        transform: translateY(-2vw);
        transform: scale(1.1);
    }
    .slideB>a>img{
        width: 25vw;
    }
    .slideB>a {
        width: 100%;
        transition: transform .5s;
    }
    .slideB>a:hover {
        transform: translateY(-2vw);
        transform: scale(1.1);
    }
    .slideC>a>img{
        width: 25vw;
    }
    .slideC>a {
        width: 100%;
        transition: transform .5s;
    }
    .slideC>a:hover {
        transform: translateY(-2vw);
        transform: scale(1.1);
    }
    .Latest2{
        position: relative;
        top: -1vw;
        height: 80vw;
    }

    .view-more{
        position: relative;
        width: fit-content;
        height: 7vw;
        font-size: 3vw;
        left: 39vw;
        top: 50vw;
        padding: 1.5vw 2.3vw;
        border-radius: 1vw;
        border: none;
        box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
        transition-duration: 0.5s;
        transition-property: transform;
        background-color: #DA3556;
    
    }
    .view-more a{
        background-color: #DA3556;
        color: white;
        font-size: 2.3vw;
        font-weight: 100;  
        text-decoration: none;
    }

    .view-less {
        position: relative;
        width: fit-content;
        height: 7vw;
        font-size: 3vw;
        left: 39vw;
        top: 15vw;
        padding: 1.5vw 2.3vw;
        border-radius: 1vw;
        border: none;
        box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
        transition-duration: 0.5s;
        transition-property: transform;
        background-color: #DA3556;
    
    }
    .view-less a{
        background-color: #DA3556;
        color: white;
        font-size: 2.3vw;
        font-weight: 100;  
        text-decoration: none;
    }
}

/* lastest work end */



/* partnership start */
.partner-container{
    display: flex;
    position: relative;
    width: 100%;
    height: 40vw;
}
.partner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #F3F4F6;
}

.tittle-partner{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 15vw;
}
.tittle-partner>h1 {
    position: relative;
    color: #DA3556;
    top: 5vw;
    left: 10vw;
    font-size: 2.08vw;
    font-weight: bold;
}
.tittle-partner>h2 {
    display: none;
    position: relative;
    top: 6.6vw;
    left: 10vw;
    width: 27vw;
    line-height: 2vw;
    font-size: 1.17vw;
    font-weight: 500;
    color: #646464;
}

.logo-scroller {
    position: relative;
    top: -5vw;
    margin: auto;
    display: grid;
    place-items: center;
    width: 100%;
    overflow: hidden;
}
.logo-scrolling {
    display: flex;
    width: calc(20vw*20);
    animation: logo-scroll 30s linear infinite;
}

@keyframes logo-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-20vw*9));
    }
}
.logo-scroll {
    height: 21vw;
    width: 20vw;
    display: flex;
    align-items: center;
    perspective: 100%;
    gap: 2vw;
}
.logo-scroll>img {
    width: 20vw;
    transition: transform .5s;
}

@media(max-width:768px)
{
    .partner-container{
        height: 70vw;
    }

    .tittle-partner h1{
    position: relative;
    top: 7vw;
    }
    .tittle-partner h1{
        font-size: 5vw;
    }
    .tittle-partner h2{
        font-size: 2.5vw;
        width: 60vw;
        line-height: 3vw;
    }

    .logo-scroll{
        position: relative;
        top: 5vw;
        height: 40vw;
    }
    .logo-scroll>img{
        width: 30vw;
        height: 20vw;
    }
    .logo-scrolling {
        display: flex;
        width: calc(20vw*20);
        animation: logo-scroll 20s linear infinite;
    }
}

/* partnership end */
/* home end */






/* about us start */
/* short intro start */
.content-intro{
    display: flex;
    height: 48.3vw;
    width: 100%;
    background-color: #DA3556;
}
.about{
    position: relative;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

.about>img {
    position: absolute;
    right: 0px;
    width:100vw;
}

.about>h1 {
    position: relative;
    width: 40vw;
    left: 6.5vw;
    top: 12.35vw;
    color: white;
    font-size: 3.5vw;
    font-weight: bold;
    padding: 20px;
    text-shadow: 0.3vw 0.5vw 0.3vw rgb(0, 0, 0, 25%);
}
/* short intro end */
/* about jumara start */
.Container-introduction{
    position: relative;
    width: 100%;
    height: 115vw;
    top: 0px;
    overflow: hidden;
}

.introduction{
    display: flex;
    flex-direction: column;
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.about-us1{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 60vw;
}
.about-text{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100vw;
}
.about-text>h1 {
    position: relative;
    width: fit-content;
    left: 0px;
    top: 0px;
    color: #DA3556;
    font-size: 2.1vw;
    font-weight: bold;
    left: 11vw;
    top: 13vw;
    padding: 1vw 1vw;
}
.p1 {
    position: relative;
    left: 11.5vw;
    top: 15vw;
    width: 33vw;
    line-height: 180%;
    color: #646464;
    font-size: 1.2vw;
    font-weight: 500;
    padding: 5px 5px;
}
.worker1 {
    position: relative;
    width: 46vw;
    height: 40vw;
    top:15vw;
}

.about-us2{
    position: relative;
    display: flex;
    flex-direction: row;
}
.img-worker2{
    width: 50vw;
    height: 45vw;
}
.worker2 {
    position: relative;
    width: 46vw;
    height: 40vw;
    top: 2vw;
}
.p2 {
    position: relative;
    left: 5vw;
    top: 3.8vw;
    width: 32vw;
    line-height: 180%;
    color: #646464;
    font-size: 1.2vw;
    font-weight: 500;
}
/* about jumara end */
/* our skills start */
.expertise{
    position: relative;
    top: 0vw;
    width: 100%;
    height: 78.2vw;
    overflow: hidden;
}
.Container-expertise{
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #DA3556;
}
.Container-expertise>h1{
    position: relative;
    top: 2.8vw;
    left: 42.3vw;
    color: white;
    font-size: 2.1vw;
    font-weight: bold;
    padding: 20px 20px;
}

.skill{
    display: flex;
    position: absolute;
    top: 6.5vw;
    left: 3.3vw;
    width: 100%;
    height: 32.5vw;
    gap: 6.5vw;
}
.skill2{
    display: flex;
    position: absolute;
    top: 40vw;
    left: 3.3vw;
    width: 100%;
    height: 32.5vw;
    gap: 6.5vw;
}

.time-management {
    position: relative;
    width: 26vw;
    height: 22.8vw;
    top: 6.5vw;
    left: 0vw;
    box-sizing: border-box;
    border-radius: 22px;
    box-shadow: 1vw 1vw 0.3vw #A32840;
    background-color: white;
}
.time {
    position: relative;
    top: 1vw;
    left: 0vw;
    width: 26vw;
    height: 10.5vw;
    padding: 1vw 8.5vw;
}
.time-management>h2{
    position: relative;
    top: 0vw;
    color: #DA3556;
    font-size: 1.55vw;
    padding: 1.3vw 6.5vw;
}
.time-management>p {
    position: relative;
    width: 27vw;
    top: 0vw;
    text-align: center;
    line-height: 1.63vw;
    letter-spacing: 0.05vw;
    font-size: 1.2vw;
    font-weight: 500;
    color: black;
    padding: 0vw 4vw;
}
.always-improving {
    position: relative;
    width: 26vw;
    height: 22.8vw;
    top: 6.5vw;
    left: 0vw;
    box-sizing: border-box;
    border-radius: 22px;
    box-shadow: 1vw 1vw 0.3vw #A32840;
    background-color: white;
}

.improve {
    position: relative;
    top: 1vw;
    left: 0vw;
    width: 26vw;
    height: 10.5vw;
    padding: 1vw 8.5vw;
}
.always-improving>h2 {
    position: relative;
    width: fit-content;
    top: 0vw;
    left: 0vw;
    font-size: 1.55vw;
    padding: 1.3vw 6.5vw;
    color: #DA3556;
}
.always-improving>p {
    position: relative;
    top: 0vw;
    text-align: center;
    line-height: 1.63vw;
    letter-spacing: 0.05vw;
    font-size: 1.2vw;
    font-weight: 500;
    color: black;
    padding: 0vw 4vw;
}

.eye-quality {
    position: relative;
    width: 26vw;
    height: 22.8vw;
    top: 6.5vw;
    text-align: center;
    left: 0vw;
    box-sizing: border-box;
    border-radius: 22px;
    box-shadow: 1vw 1vw 0.3vw #A32840;
    background-color: white;
}
.eye {
    position: relative;
    top: 1vw;
    left: 0vw;
    width: 26vw;
    height: 10.5vw;
    padding: 1vw 8.5vw;
}
.eye-quality>h2 {
    position: relative;
    width: fit-content;
    top: 0vw;
    left: 0vw;
    font-size: 1.55vw;
    padding: 1.3vw 8vw;
    color: #DA3556;
}
.eye-quality>p {
    position: relative;
    top: 0vw;
    text-align: center;
    line-height: 1.63vw;
    letter-spacing: 0.05vw;
    font-size: 1.2vw;
    font-weight: 500;
    color: black;
    padding: 0vw 4vw;
}
.good-teamwork {
    position: relative;
    width: 26vw;
    height: 22.8vw;
    top: 0vw;
    left: 0vw;
    box-sizing: border-box;
    border-radius: 22px;
    box-shadow: 1vw 1vw 0.3vw #A32840;
    background-color: white;
}
.teamwork {
    position: relative;
    top: 1vw;
    left: 0vw;
    width: 26vw;
    height: 10.5vw;
    padding: 1vw 8.5vw;
}
.good-teamwork>h2 {
    position: relative;
    top: 0vw;
    left: 0vw;
    font-size: 1.55vw;
    padding: 1.3vw 7.7vw;
    color: #DA3556;
}
.good-teamwork>p{
    position: relative;
    top: 0vw;
    text-align: center;
    line-height: 1.63vw;
    letter-spacing: 0.05vw;
    font-size: 1.2vw;
    font-weight: 500;
    color: black;
    padding: 0vw 4vw;
}

.problem-solver {
    position: relative;
    width: 26vw;
    height: 22.8vw;
    top: 0vw;
    left: 0vw;
    box-sizing: border-box;
    border-radius: 22px;
    box-shadow: 1vw 1vw 0.3vw #A32840;
    background-color: white;
}
.fixer {
    position: relative;
    top: 1vw;
    left: 0vw;
    width: 26vw;
    height: 10.5vw;
    padding: 1vw 8.5vw;
}
.problem-solver>h2 {
    position: relative;
    top: 0vw;
    left: 0vw;
    font-size: 1.55vw;
    padding: 1.3vw 7.7vw;
    color: #DA3556;
}
.problem-solver>p {
    position: relative;
    top: 0vw;
    width: 27vw;
    text-align: center;
    line-height: 1.63vw;
    letter-spacing: 0.05vw;
    font-size: 1.2vw;
    font-weight: 500;
    color: black;
    padding: 0vw 4vw;
}

.qa-responsive {
    position: relative;
    width: 26vw;
    height: 22.8vw;
    top: 0vw;
    left: 0vw;
    box-sizing: border-box;
    border-radius: 22px;
    box-shadow: 1vw 1vw 0.3vw #A32840;
    background-color: white;
}
.QA {
    position: relative;
    top: 1vw;
    left: 0vw;
    width: 26vw;
    height: 10.5vw;
    padding: 1vw 8.5vw;
}
.qa-responsive>h2 {
    position: relative;
    top: 0vw;
    left: 0vw;
    font-size: 1.55vw;
    padding: 1.3vw 10vw;
    color: #DA3556;
}
.qa-responsive>p {
    position: relative;
    width: 27vw;
    top: 0vw;
    text-align: center;
    line-height: 1.63vw;
    letter-spacing: 0.05vw;
    font-size: 1.2vw;
    font-weight: 500;
    color: black;
    padding: 0vw 4vw;
}
/* our skills end */


/* our history start */
.history{
    position: relative;
    top: 3.2vw;
    width: 100%;
    height: 4vw;
    overflow: hidden;
}
.Container-timeline{
    position: relative;
    top: 0vw;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.timeline {
    width: 100%;
    height: 33vw;
}
.timeline>h1 {
    position: relative;
    top: 1.3vw;
    left: 42.3vw;
    color: #DA3556;
    padding-bottom: 3.4vw;
    font-size: 2.1vw;
}

.swiper {
    position: relative;
    display: flex;
    width: 100%;
    height: 45vw;
    margin-left: auto;
    margin-right: auto;
}
.swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.swiper-slide h1{
    position: relative;
    font-size: 2.3vw;
}
.swiper-slide p{
    font-size: 1vw;
}
.line-history-start{
    left: 9.5vw;
}
/* our history end */
@media(max-width:768px)
{
    .about{
        position: relative;
        height: 100vw;
        background-color: #DA3556;
    }
    .about h1{
        position: relative;
        top: 20vw;
        font-size:6vw;
        width: 50vw;
    }
    .about img{
        left: -20vw;
        top: 10vw;
        height: 100vw;
        width: 160vw;
    }
    .Container-introduction{
        position: relative;
        height: 420vw;
    }
    .introduction{
        position: relative;
        display: flex;
        flex-direction: column;
        top: 50vw;
    }
    .about-us1{
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .about-us2{
        position: relative;
        display: flex;
        flex-direction: column;
        top: 120vw;
        margin-top: 15vw;
    }
    .about-us1 h1{
        position: relative;
        font-size: 5vw;
        width: fit-content;
        margin-top: 5vw; 

    }
    .about-us1 p{
        position: relative;
        font-size: 2.5vw;
        line-height: 4vw; 
        width: 65vw; 
        margin-bottom: 5vw; 
        margin-top: 3vw; 
    }
    .worker1{
        position: relative;
        top: 20vw;
        width: 100vw;
        height: 80vw;
        margin-bottom: 5vw; 
    }
    .worker2{
        position: relative;
        width: 100vw;
        height: 80vw;
        margin-top: 5vw; 
        margin-bottom: 5vw; 
    }
    .about-us2 p{
        position: relative;
        top: 40vw;
        left: 5vw;
        font-size: 2.5vw;
        line-height: 4vw; 
        width: 65vw; 
        margin-bottom: 5vw; 
        margin-top: 5vw; 
    }

    .expertise{
        position: relative;
        top: 20vw;
        width: 100%;
        height: 350vw;
        background-color: #DA3556;
        overflow: hidden;
    }
    .Container-expertise{
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .Container-expertise h1{
        position: relative;
        top: 7vw;
        left: 31vw;
        font-size: 5vw;
        width: 50vw;
    }
    .skill{
        position: relative;
        display: flex;
        flex-direction: column;
        height: 175vw;
        top: 10vw;
        left: 20vw;
    }
    .skill2{
        position: relative;
        display: flex;
        flex-direction: column;
        height: 180vw;
        top: 0vw;
        left: 20vw;
    }
    .time-management {
        position: relative;
        width: 55vw;
        height: 45vw;
        top: 6.5vw;
        left: 0vw;
        box-sizing: border-box;
        border-radius: 4vw;
        box-shadow: 1vw 1vw 0.3vw #A32840;
        background-color: white;
    }
    .time {
        position: relative;
        top:5vw;
        left: 10vw;
        width: 36vw;
        height: 20vw;
        padding: 1vw 8.5vw;
    }
    .time-management>h2{
        position: relative;
        top: 4vw;
        left: 6vw;
        color: #DA3556;
        font-size: 4vw;
        padding: 1.3vw 6.5vw;
    }
    .time-management>p {
        position: relative;
        top: 5vw;
        left: 0vw;
        width: 55vw;
        line-height: 3vw;
        letter-spacing: 0.1vw;
        font-size: 2.5vw;
        font-weight: 500;
        color: black;
        padding: 0vw 4vw;
    }
    
    .always-improving {
        position: relative;
        width: 55vw;
        height: 45vw;
        top: 6.5vw;
        left: 0vw;
        box-sizing: border-box;
        border-radius: 4vw;
        box-shadow: 1vw 1vw 0.3vw #A32840;
        background-color: white;
    }
    .improve {
        position: relative;
        top:5vw;
        left: 10vw;
        width: 36vw;
        height: 20vw;
        padding: 1vw 8.5vw;
    }
    .always-improving>h2 {
        position: relative;
        top: 4vw;
        left: 6vw;
        color: #DA3556;
        font-size: 4vw;
        padding: 1.3vw 6.5vw;
    }
    .always-improving>p {
        position: relative;
        top: 5vw;
        left: 0vw;
        width: 55vw;
        line-height: 3vw;
        letter-spacing: 0.1vw;
        font-size: 2.5vw;
        font-weight: 500;
        color: black;
        padding: 0vw 4vw;
    }
    
    .eye-quality {
        position: relative;
        width: 55vw;
        height: 45vw;
        top: 6.5vw;
        left: 0vw;
        box-sizing: border-box;
        border-radius: 4vw;
        box-shadow: 1vw 1vw 0.3vw #A32840;
        background-color: white;
    }
    .eye {
        position: relative;
        top:5vw;
        left: 0vw;
        width: 36vw;
        height: 20vw;
        padding: 1vw 8.5vw;
    }
    .eye-quality>h2 {
        position: relative;
        top: 4vw;
        left: 9vw;
        color: #DA3556;
        font-size: 4vw;
        padding: 1.3vw 6.5vw;
    }
    .eye-quality>p {
        position: relative;
        top: 5vw;
        left: 0vw;
        width: 55vw;
        line-height: 3vw;
        letter-spacing: 0.1vw;
        font-size: 2.5vw;
        font-weight: 500;
        color: black;
        padding: 0vw 4vw;
    }

    .good-teamwork {
        position: relative;
        width: 55vw;
        height: 45vw;
        top: 6.5vw;
        left: 0vw;
        box-sizing: border-box;
        border-radius: 4vw;
        box-shadow: 1vw 1vw 0.3vw #A32840;
        background-color: white;
    }
    .teamwork {
        position: relative;
        top:5vw;
        left: 10vw;
        width: 36vw;
        height: 20vw;
        padding: 1vw 8.5vw;
    }
    .good-teamwork>h2 {
        position: relative;
        top: 4vw;
        left: 8vw;
        color: #DA3556;
        font-size: 4vw;
        padding: 1.3vw 6.5vw;
    }
    .good-teamwork>p{
        position: relative;
        top: 5vw;
        left: 0vw;
        width: 57vw;
        line-height: 3vw;
        letter-spacing: 0.1vw;
        font-size: 2.5vw;
        font-weight: 500;
        color: black;
        padding: 0vw 4vw;
    }
    
    .problem-solver {
        position: relative;
        width: 55vw;
        height: 45vw;
        top: 6.5vw;
        left: 0vw;
        box-sizing: border-box;
        border-radius: 4vw;
        box-shadow: 1vw 1vw 0.3vw #A32840;
        background-color: white;
    }
    .fixer {
        position: relative;
        top:5vw;
        left: 10vw;
        width: 36vw;
        height: 20vw;
        padding: 1vw 8.5vw;
    }
    .problem-solver>h2 {
        position: relative;
        top: 4vw;
        left: 8vw;
        color: #DA3556;
        font-size: 4vw;
        padding: 1.3vw 6.5vw;
    }
    .problem-solver>p {
        position: relative;
        top: 5vw;
        left: 0vw;
        width: 55vw;
        line-height: 3vw;
        letter-spacing: 0.1vw;
        font-size: 2.5vw;
        font-weight: 500;
        color: black;
        padding: 0vw 4vw;
    }
    
    .qa-responsive {
        position: relative;
        width: 55vw;
        height: 45vw;
        top: 6.5vw;
        left: 0vw;
        box-sizing: border-box;
        border-radius: 4vw;
        box-shadow: 1vw 1vw 0.3vw #A32840;
        background-color: white;
    }
    .QA {
        position: relative;
        top:5vw;
        left: 10vw;
        width: 36vw;
        height: 20vw;
        padding: 1vw 8.5vw;
    }
    .qa-responsive>h2 {
        position: relative;
        top: 4vw;
        left: 12vw;
        color: #DA3556;
        font-size: 4vw;
        padding: 1.3vw 6.5vw;
    }
    .qa-responsive>p {
        position: relative;
        top: 5vw;
        left: 0vw;
        width: 55vw;
        line-height: 3vw;
        letter-spacing: 0.1vw;
        font-size: 2.5vw;
        font-weight: 500;
        color: black;
        padding: 0vw 4vw;
    }

    .history{
        position: relative;
        top: 25vw;
        height: 20vw;
        left: -5vw;
    }
    .history h1{
        font-size: 5vw;
    }
    .swiper{
        display: flex;
        position: relative;
        height: 60vw;
        top: 0vw;
    }
    .swiper-slide h1{
        font-size: 3vw;
    }
    .swiper-slide p{
        margin: 0vw 1vw;
        font-size: 2.5vw;
        width: 30vw;
        justify-content: center;
    }
    .swiper-slide{
        text-align: center;
    }
    .line-history-start{
        left: 14vw;
    }
    .line-history-end{
        left: -17.2vw;
    }


}
/* about us */


/* our contact intro start */
.background-contact {
    background-color: #EAEAEA;
    width: 100%;
    height: auto;
}
.contact-title{
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 25vw;
}
.kontak {
    background-color: #EAEAEA;
    width: 100%;
    height: 100%;
    background-image: url(image/contact\ us\ img.png);
    background-repeat: no-repeat;
    background-size: 100vw;
    overflow: hidden;
}
.kontak>h1{
    position: relative;
    top: 13vw;
    left: 41.3vw;
    color: white;
    font-size: 3.9vw;
    font-weight: bold;
}
@media(max-width:768px)
{
    .kontak {
        background-color: #EAEAEA;
        width: 100%;
        height: 45vw;
        background-color: #646464;
        background-image: url(image/contact\ us\ img.png);
        background-repeat: no-repeat;
        background-size: 155vw;
        background-position: -30vw 10vw;
        overflow: hidden;
    }
    .kontak>h1{
        position: relative;
        top: 25vw;
        left: 32vw;
        color: white;
        font-size: 7vw;
        font-weight: bold;
    }
}
/* our contact intro end */
/* contact tittle start */
.contact-content{
    display: flex;
    position: relative;
    top: 5vw;
    width: 100%;
    height: 12vw;
    padding: 0vw;
}
.contact-box {
    position: relative;
    height: 100px;
    width: 100%;
    top: 4vw;
}

.text-title>h1 {
    display: flex;
    justify-content: center;
    color: #DA3556;
    top: 1.3vw;
    position: relative;
    font-size: 2.09vw;
    font-weight: bold;
}

.text-title>h2 {
    display: flex;
    justify-content: center;
    color: #DA3556;
    top: 2.3vw;
    right: 0vw;
    position: relative;
    font-weight: 500;
    font-size: 1.56vw;
}

@media(max-width:768px)
{
    .contact-content{
        display: flex;
        position: relative;
        top: 25vw !important;
        width: 100%;
        height: 12vw;
    }
    .contact-box {
        position: relative;
        height: 10vw;
        width: 100%;
        top: 0vw;
    }
    .text-title h1{
        font-size: 5vw;
    }
    .text-title h2{
        font-size: 3vw;
    }
}
/* contact tittle end */

.contact-form{
    position: relative;
    display: flex;
    flex-direction: row;
    top: 8vw;
    width: 100%;
    height: 65vw;
}
/* our contact info start */
.info-content {
    position: relative;
    top: 1vw;
    width: 100%;
    height: 100%;
}
.info-container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
}
.info-box {
    position: relative;
    top: 0vw;
    left: 6.5vw;
    width: 23.5vw;
    justify-content: center;
    height: 26vw;
    background-color: white;
    border-radius: 1.5vw;
    padding: 1.58vw 2.6vw;
    box-shadow: 0.6vw 0.6vw 0.6vw 0 rgb(0, 0, 0, .3);
}
.info-box>h1 {
    display: flex;
    font-size: 2.1vw;
    font-weight: bold;
    position: relative;
    justify-content: center;
    padding: 1.6vw;
    color: #DA3556;
}
.info-location {
    display: flex;
    width: 100%;
    height: 0vw;
    padding-top: 0.6vw;
    padding-bottom: 5.8vw;
}
.info-location>img {
    position: relative;
    width: 2.1vw;
    height: 2.1vw;
}
.info-location>p {
    padding-left: 1.4vw;
    font-size: 1.2vw;
    font-weight: 500;
    color: #DA3556;
    line-height: 1.8vw;
}

.info-phone {
    display: flex;
    position: relative;
    top: 3vw;
    width: 100%;
    height:1vw;
    padding-bottom: 5.9vw;
}
.info-phone>img {
    position: relative;
    width: 1.9vw;
    height: 2vw;
}
.info-phone>p {
    padding-left: 1.4vw;
    font-size: 1.2vw;
    font-weight: 500;
    color: #DA3556;
}

.info-mail {
    display: flex;
    position: relative;
    top: 1vw;
    width: 100%;
    height: 1vw;
}
.info-mail>img {
    position: relative;
    width: 2vw;
    height: 1.6vw;
}
.info-mail>p {
    padding-left: 1.4vw;
    font-size: 1.2vw;
    font-weight: 500;
    color: #DA3556;
}

@media(max-width:768px)
{
    .contact-form{
        position: relative;
        display: flex;
        flex-direction: column;
        top: 30vw;
        width: 100%;
        height: 175vw;
    }
    .info-box {
        position: relative;
        top: 0vw;
        left: 9vw;
        width: 80vw;
        height: 52vw;
        background-color: white;
        border-radius: 4vw;
        padding: 1.58vw 2.6vw;
        box-shadow: 1.6vw 1.6vw 1.6vw 0 rgb(0, 0, 0, .3);
    }
    .info-box>h1 {
        display: flex;
        font-size: 5vw;
        font-weight: bold;
        position: relative;
        justify-content: center;
        padding: 1.6vw;
        color: #DA3556;
    }
    .info-location {
        display: flex;
        width: 100%;
        height: 0vw;
        padding-top: 5vw;
        padding-bottom: 12vw;
    }
    .info-location>img {
        position: relative;
        width: 5vw;
        height: 5vw;
        left: 5vw;
        top: -1vw;
    }
    .info-location>p {
        padding-left: 9vw;
        line-height: 2.8vw;
        font-size: 3vw;
        font-weight: 500;
        color: #DA3556;
    }

    .info-phone {
        position: relative;
        top: 1vw;
        display: flex;
        width: 100%;
        height:1vw;
        padding-bottom: 12vw;
    }
    .info-phone>img {
        position: relative;
        width: 4.9vw;
        height: 5vw;
        left: 5vw;
        top: -1vw;
    }
    .info-phone>p {
        padding-left: 9vw;
        line-height: 2.8vw;
        font-size: 3vw;
        font-weight: 500;
        color: #DA3556;
    }

    .info-mail {
        display: flex;
        width: 100%;
        height: 1vw;
    }
    .info-mail>img {
        position: relative;
        width: 5vw;
        height: 4.6vw;
        left: 5vw;
        top: -1vw;
    }
    .info-mail>p {
        padding-left: 9vw;
        line-height: 2.8vw;
        font-size: 3vw;
        font-weight: 500;
        color: #DA3556;
    }
    
}
/* our contact info end */
/* our social media start */
.link-container {
    position: relative;
    top: 3.5vw;
    left: 6.4vw;
    width: fit-content;
    height: 13vw;
    background-color: white;
    border-radius: 1.4vw;
    padding: 1.6vw 3vw;
    box-shadow: 0.6vw 0.6vw 0.6vw 0 rgb(0, 0, 0, .3);
}
.link-container>h1 {
    display: flex;
    font-size: 2vw;
    font-weight: bold;
    position: relative;
    justify-content: center;
    padding: 1.6vw;
    color: #DA3556;
}
.link-box {
    position: relative;
    display: flex;
    top: auto;
    height: auto;
}
.link-box a:hover {
    color: white;
    background-color: #DA3556;
    animation: shake 2s;
    animation-iteration-count: infinite;
}
@keyframes shake {
    0%{transform: scale(1.3) rotate(0deg);}
    10%{transform: scale(1.3) rotate(0deg);}
    20%{transform: scale(1.3) rotate(0deg);}
    30%{transform: scale(1.3) rotate(10deg);}
    40%{transform: scale(1.3) rotate(-10deg);}
    50%{transform: scale(1.3) rotate(0deg);}
    60%{transform: scale(1.3) rotate(0deg);}
    70%{transform: scale(1.3) rotate(0deg);}
    80%{transform: scale(1.3) rotate(10deg);}
    90%{transform: scale(1.3) rotate(-10deg);}
    100%{transform: scale(1.3) rotate(0deg);}
}
.link-box a {
    display: inline-block;
    height: 2.6vw;
    width: 2.6vw;
    background-color: white;
    text-align: center;
    line-height: 2.4vw;
    border-radius: 2vw;
    font-size: 1.6vw;
    color: #DA3556;
    border-style: solid;
    margin: auto;
}

@media(max-width:768px)
{
    .link-container {
        position: relative;
        top: 3.5vw;
        left: 9vw;
        width: 80vw;
        height: 32vw;
        background-color: white;
        border-radius: 4vw;
        padding: 1.6vw 2.6vw;
        box-shadow: 1.6vw 1.6vw 1.6vw 0 rgb(0, 0, 0, .3);
    }
    .link-container>h1 {
        display: flex;
        font-size: 5vw;
        font-weight: bold;
        position: relative;
        justify-content: center;
        padding: 1.6vw;
        color: #DA3556;
    }
    .link-box {
        position: relative;
        display: flex;
        top: auto;
        height: auto;
    }
    .link-box a:hover {
        color: white;
        background-color: #DA3556;
        animation: shake 2s;
        animation-iteration-count: infinite;
    }
    @keyframes shake {
        0%{transform: scale(1.3) rotate(0deg);}
        10%{transform: scale(1.3) rotate(0deg);}
        20%{transform: scale(1.3) rotate(0deg);}
        30%{transform: scale(1.3) rotate(10deg);}
        40%{transform: scale(1.3) rotate(-10deg);}
        50%{transform: scale(1.3) rotate(0deg);}
        60%{transform: scale(1.3) rotate(0deg);}
        70%{transform: scale(1.3) rotate(0deg);}
        80%{transform: scale(1.3) rotate(10deg);}
        90%{transform: scale(1.3) rotate(-10deg);}
        100%{transform: scale(1.3) rotate(0deg);}
    }
    .link-box a {
        position: relative;
        top: 4vw;
        display: inline-block;
        height: 8.6vw;
        width: 8.6vw;
        background-color: white;
        text-align: center;
        line-height: 8vw;
        border-radius: 5vw;
        font-size: 4vw;
        color: #DA3556;
        border-style: solid;
        margin: auto;
    }
}
/* our social media end */

/* form start */
.thankyou_message{
    position: absolute;
    overflow: hidden;
    top: -6vw;
    left: -10vw;
    width: fit-content;
    height: fit-content;
    padding: 0.8vw;
    color: white;
    border-radius: 1vw;
    background-color: #DA3556;
}
.thankyou_message h2{
    position: relative;
}

.form-container {
    display: flex;
    position: relative;
    width: 58.6vw;
    height: 42.5vw;
    right: 4.6vw;
    top: 0vw;
}
.form-content {
    display: flex;
    position: relative;
    left: 0vw;
    top: 1vw;
    width: 60vw;
    height: 100%;
    background-color: white;
    border-radius: 2vw;
    padding: 1.6vw 2.6vw;
    box-shadow: 0.6vw 0.6vw 0.6vw 0 rgb(0, 0, 0, .3);
}
.your-name {
    position: relative;
    top: 0vw;
    left: 2vw;
    width: 48.8vw;
    height: 2vw;
    background-color: #FAFAFA;
    border-color: #EAEAEA;
    border-style: solid;
    padding: 1.3vw 1.3vw;
    font-size: 1.2vw;
    font-family: "Calibri" , sans-serif;
}
.your-name::-webkit-input-placeholder {
    color: #757575;
}
.form-content input[type="text"]:focus{
    outline-color: #DA3556;
}
.your-email {
    position: relative;
    top: 2vw;
    left: 2vw;
    width:48.8vw;
    height: 2vw;
    background-color: #FAFAFA;
    border-color: #EAEAEA;
    border-style: solid;
    padding: 1.3vw 1.3vw;
    font-size: 1.2vw;
    font-family: "Calibri" , sans-serif;
}
.your-email::-webkit-input-placeholder {
    color: #757575;
    
}
.form-content input[type="email"]:focus{
    outline-color: #DA3556;
}
.subject {
    position: relative;
    top: 4vw;
    left: 2vw;
    width: 48.8vw;
    height: 2vw;
    background-color: #FAFAFA;
    border-color: #EAEAEA;
    border-style: solid;
    padding: 1.3vw 1.3vw;
    font-size: 1.2vw;
    font-family: "Calibri" , sans-serif;
}
.subject::-webkit-input-placeholder {
    color: #757575;
}
.your-massage {
    position: relative;
    top: 6vw;
    left: 2vw;
    width: 48.8vw;
    height: 13vw;
    background-color: #FAFAFA;
    border-color: #EAEAEA;
    border-style: solid;
    padding: 1.3vw 1.3vw;
    font-size: 1.2vw;
    margin: 0vw;
    font-family: "Calibri" , sans-serif;
}
.your-massage::-webkit-input-placeholder {
    color: #757575;
}
.form-content textarea:focus{
    outline-color: #DA3556;
}
.submit {
    display: flex;
    position: relative;
    top: 7vw;
    left: 2vw;
    background-color: #DA3556;
    color: white;
    font-size: 1.3vw;
    font-weight: 100;  
    text-decoration: none;
    padding: 1vw 1.6vw;
    width: 7.3vw;
    height: 3.5vw;
    border-radius: 0.5vw;
    border: none;
    box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
    transition-duration: 0.5s;
    transition-property: transform;
}
.submit:hover{
    transform: scale(1.1);
    cursor: pointer;
}

@media(max-width:768px)
{ 
    .form-container {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 58.6vw;
        height: 55vw;
        left: 9vw;
        top: -52vw;
    }
    .form-content {
        display: flex;
        position: relative;
        width: 80vw;
        height: 100vw;
        background-color: white;
        border-radius: 2vw;
        padding: 1.6vw 2.6vw;
        box-shadow: 1.6vw 1.6vw 1.6vw 0 rgb(0, 0, 0, .3);
    }
    .your-name {
        position: relative;
        top: 2vw;
        left: 2vw;
        width: 70vw;
        height: 5vw;
        background-color: #FAFAFA;
        border-color: #EAEAEA;
        border-style: solid;
        padding: 1.3vw 1.3vw;
        font-size: 2.5vw;
        font-family: "Calibri" , sans-serif;
    }
    .your-name::-webkit-input-placeholder {
        color: #757575;
    }
    .form-content input[type="text"]:focus{
        outline-color: #DA3556;
    }
    .your-email {
        position: relative;
        top: 4vw;
        left: 2vw;
        width:70vw;
        height: 5vw;
        background-color: #FAFAFA;
        border-color: #EAEAEA;
        border-style: solid;
        padding: 1.3vw 1.3vw;
        font-size: 2.5vw;
        font-family: "Calibri" , sans-serif;
    }
    .your-email::-webkit-input-placeholder {
        color: #757575;
    }
    .form-content input[type="email"]:focus{
        outline-color: #DA3556;
    }
    .subject {
        position: relative;
        top: 6vw;
        left: 2vw;
        width: 70vw;
        height: 5vw;
        background-color: #FAFAFA;
        border-color: #EAEAEA;
        border-style: solid;
        padding: 1.3vw 1.3vw;
        font-size: 2.5vw;
        font-family: "Calibri" , sans-serif;
    }
    .subject::-webkit-input-placeholder {
        color: #757575;
    }
    .your-massage {
        position: relative;
        top: 8vw;
        left: 2vw;
        width: 70vw;
        height: 13vw;
        background-color: #FAFAFA;
        border-color: #EAEAEA;
        border-style: solid;
        padding: 1.3vw 1.3vw;
        font-size: 2.5vw;
        margin: 0vw;
        font-family: "Calibri" , sans-serif;
    }
    .your-massage::-webkit-input-placeholder {
        color: #757575;
    }
    .form-content textarea:focus{
        outline-color: #DA3556;
    }
    .submit {
        display: flex;
        position: relative;
        top: 11vw;
        left: 2vw;
        background-color: #DA3556;
        color: white;
        font-size: 2.5vw;
        font-weight: 100;  
        text-decoration: none;
        padding: 1vw 1.6vw;
        width: 12vw;
        height: 6vw;
        border-radius: 1vw;
        border: none;
        box-shadow: 0vw 1.3vw 1.3vw rgb(218, 53, 86, 0.5);
        transition-duration: 0.5s;
        transition-property: transform;
    }
    .submit:hover{
        transform: scale(1.1);
        cursor: pointer;
    }
    .thankyou_message{
        position: absolute;
        overflow: hidden;
        top: -23vw;
        left: 0vw;
        width: fit-content;
        height: fit-content;
        padding: 0.8vw;
        color: white;
        border-radius: 1vw;
        background-color: #DA3556;
        font-size: 2.5vw;
    }
}
/* form end */
/* our contact info end */


/* FAQ start */
.faq-tittle{
    display: flex;
    position: relative;
    top: 15vw;
    height: 5vw;
    width: 100%;
    padding: 5vw;
    margin: 0;
}
.faq-tittle h1{
    display: flex;
    position: relative;
    left: 34vw;
    color: #DA3556;
    font-size: 2.1vw;
}
.faq-kolom{
    position: relative;
    top: 10vw;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 55vw;
}
/* faq 1 */
.faq{
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 2.7vw;
    margin: 6.5vw 2.6vw;
    max-width: 26vw;    
}
.faq .tab {
    position: relative;
    background-color: white;
    top: 1.3vw;
    left: 3.29vw;
    border-radius: 1.3vw;
    padding: 1.3vw 2.6vw;
    box-shadow: 0.6vw 0.6vw 0.6vw 0 rgb(0, 0, 0, .3);
    overflow: hidden;
}
.faq .tab input{
    display: none;
}
.faq .tab label{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.faq .tab label::after{
    content: '-';
    position: absolute;
    text-align: center;
    line-height: 1.7vw;
    border-radius: 50%;
    font-size: 2vw;
    right: 1.3vw;
    width: 2vw;
    height: 2vw;
    justify-content: center;
    color: white;
    background-color: #DA3556;
    transition: transform 0.4s ease;
}
.faq .tab input:checked ~ label::after{
    transform: rotate(90deg);
    content: '+';
    font-size: 1.6vw;
    line-height: 1.9vw;
}
.faq .tab label h2{
    color: #DA3556;
    font-size: 1.56vw;
}
.faq .tab .content{
    position: relative;
    width: 90%;
}
.faq .tab .content p{
    color: #DA3556;
    padding: 0.7vw 0vw;
    font-size: 1.05vw;
}
.faq .tab .content{
    max-height: 0vw;
    transition: 1s;
    overflow: hidden;
}
.faq .tab input:checked ~ .content {
    max-height: 100vw;
}
/* faq2 */
.faq2{
    display: flex;
    flex-direction: column;
    gap: 2.7vw;
    margin: 6.5vw 2.6vw;
    max-width: 26vw;
    position: relative;
    top: 0vw;
    left: 0vw;    
}
.faq2 .tab {
    position: relative;
    background-color: white;
    top: 1.3vw;
    left: 3.29vw;
    border-radius: 1.3vw;
    padding: 1.3vw 2.6vw;
    box-shadow: 0.6vw 0.6vw 0.6vw 0 rgb(0, 0, 0, .3);
    overflow: hidden;
}
.faq2 .tab input{
    display: none;
}
.faq2 .tab label{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.faq2 .tab label::after{
    content: '-';
    position: absolute;
    text-align: center;
    line-height: 1.7vw;
    border-radius: 50%;
    font-size: 2vw;
    right: 1.3vw;
    width: 2vw;
    height: 2vw;
    justify-content: center;
    color: white;
    background-color: #DA3556;
    transition: transform 0.4s ease;
}
.faq2 .tab input:checked ~ label::after{
    transform: rotate(90deg);
    content: '+';    
    font-size: 1.6vw;
    line-height: 1.9vw;
}
.faq2 .tab label h2{
    color: #DA3556;
    font-size: 1.56vw;
}
.faq2 .tab .content{
    position: relative;
    width: 90%;
}
.faq2 .tab .content p{
    color: #DA3556;
    padding: 0.7vw 0vw;
    font-size: 1.05vw;
}
.faq2 .tab .content{
    max-height: 0;
    transition: 1s;
    overflow: hidden;
}
.faq2 .tab input:checked ~ .content {
    max-height: 100vw;
}
/* faq3 */
.faq3{
    display: flex;
    flex-direction: column;
    gap: 2.7vw;
    margin: 6.5vw 2.6vw;
    max-width: 26vw;
    position: relative;
    top: 0vw;
    right: 0vw;
}
.faq3 .tab {
    position: relative;
    background-color: white;
    top: 1.3vw;
    left: 3.29vw;
    border-radius: 1.3vw;
    padding: 1.3vw 2.6vw;
    box-shadow: 0.6vw 0.6vw 0.6vw 0 rgb(0, 0, 0, .3);
    overflow: hidden;
}
.faq3 .tab input{
    display: none;
}
.faq3 .tab label{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.faq3 .tab label::after{
    content: '-';
    position: absolute;
    text-align: center;
    line-height: 1.7vw;
    border-radius: 50%;
    font-size: 2vw;
    right: 1.3vw;
    width: 2vw;
    height: 2vw;
    justify-content: center;
    color: white;
    background-color: #DA3556;
    transition: transform 0.4s ease;
}
.faq3 .tab input:checked ~ label::after{
    transform: rotate(90deg);
    content: '+';
    font-size: 1.6vw;
    line-height: 1.9vw;
}
.faq3 .tab label h2{
    color: #DA3556;
    font-size: 1.56vw;
}
.faq3 .tab .content{
    position: relative;
    width: 90%;
}
.faq3 .tab .content p{
    color: #DA3556;
    padding: 0.7vw 0vw;
    font-size: 1.05vw;
}
.faq3 .tab .content{
    max-height: 0;
    transition: 1s;
    overflow: hidden;
}
.faq3 .tab input:checked ~ .content {
    max-height: 100vw;
}

@media(max-width:768px)
{
    .question{
        position: relative;
        top: 30vw;
        height: 170vw;
        overflow: hidden;
    }
    .faq-tittle{
        display: flex;
        position: relative;
        top: 10vw;
        height: 5vw;
        width: 100%;
        padding: 5vw;
        margin: 0;
    }
    .faq-tittle h1{
        display: flex;
        position: relative;
        left: 18vw;
        color: #DA3556;
        font-size: 5vw;
    }
    .faq-kolom{
        position: relative;
        top: 10vw;
        display: flex;
        flex-direction: column;
        left: 3vw;
        width: 100%;
        height: 100%;
    }
    /* faq 1 */
    .faq{
        display: flex;
        position: relative;
        flex-direction: column;
        gap: 4.7vw;
        margin: 6.5vw 2.6vw;
        max-width: 80vw;    
    }
    .faq .tab {
        position: relative;
        background-color: white;
        top: 1.3vw;
        left: 3.29vw;
        border-radius: 1.3vw;
        padding: 1.3vw 2.6vw;
        box-shadow: 1.6vw 1.6vw 1.6vw 0 rgb(0, 0, 0, .3);
        overflow: hidden;
    }
    .faq .tab input{
        display: none;
    }
    .faq .tab label{
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .faq .tab label::after{
        content: '-';
        position: absolute;
        text-align: center;
        line-height: 3.5vw;
        border-radius: 50%;
        font-size: 4vw;
        right: 1.3vw;
        width: 4vw;
        height: 4vw;
        justify-content: center;
        color: white;
        background-color: #DA3556;
        transition: transform 0.4s ease;
    }
    .faq .tab input:checked ~ label::after{
        transform: rotate(90deg);
        content: '+';
        font-size: 4vw;
        line-height: 3.5vw;
    }
    .faq .tab label h2{
        color: #DA3556;
        font-size: 3vw;
    }
    .faq .tab .content{
        position: relative;
        width: 90%;
    }
    .faq .tab .content p{
        color: #DA3556;
        padding: 0.7vw 0vw;
        font-size: 2.5vw;
    }
    .faq .tab .content{
        max-height: 0vw;
        transition: 1s;
        overflow: hidden;
    }
    .faq .tab input:checked ~ .content {
        max-height: 100vw;
    }
    /* faq2 */
    .faq2{
        display: flex;
        flex-direction: column;
        gap: 4.7vw;
        margin: 6.5vw 2.6vw;
        max-width: 80vw;
        position: relative;
        top: -8vw;
        left: 0vw;    
    }
    .faq2 .tab {
        position: relative;
        background-color: white;
        top: 1.3vw;
        left: 3.29vw;
        border-radius: 1.3vw;
        padding: 1.3vw 2.6vw;
        box-shadow: 1.6vw 1.6vw 1.6vw 0 rgb(0, 0, 0, .3);
        overflow: hidden;
    }
    .faq2 .tab input{
        display: none;
    }
    .faq2 .tab label{
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .faq2 .tab label::after{
        content: '-';
        position: absolute;
        text-align: center;
        line-height: 3.5vw;
        border-radius: 50%;
        font-size: 4vw;
        right: 1.3vw;
        width: 4vw;
        height: 4vw;
        justify-content: center;
        color: white;
        background-color: #DA3556;
        transition: transform 0.4s ease;
    }
    .faq2 .tab input:checked ~ label::after{
        transform: rotate(90deg);
        content: '+';    
        font-size: 4vw;
        line-height: 3.5vw;
    }
    .faq2 .tab label h2{
        color: #DA3556;
        font-size: 3vw;
    }
    .faq2 .tab .content{
        position: relative;
        width: 90%;
    }
    .faq2 .tab .content p{
        color: #DA3556;
        padding: 0.7vw 0vw;
        font-size: 2.5vw;
    }
    .faq2 .tab .content{
        max-height: 0;
        transition: 1s;
        overflow: hidden;
    }
    .faq2 .tab input:checked ~ .content {
        max-height: 100vw;
    }
    /* faq3 */
    .faq3{
        display: flex;
        flex-direction: column;
        gap: 4.7vw;
        margin: 6.5vw 2.6vw;
        max-width: 80vw;
        position: relative;
        top: -16vw;
        right: 0vw;
    }
    .faq3 .tab {
        position: relative;
        background-color: white;
        top: 1.3vw;
        left: 3.29vw;
        border-radius: 1.3vw;
        padding: 1.3vw 2.6vw;
        box-shadow: 1.6vw 1.6vw 1.6vw 0 rgb(0, 0, 0, .3);
        overflow: hidden;
    }
    .faq3 .tab input{
        display: none;
    }
    .faq3 .tab label{
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .faq3 .tab label::after{
        content: '-';
        position: absolute;
        text-align: center;
        line-height: 3.5vw;
        border-radius: 50%;
        font-size: 4vw;
        right: 1.3vw;
        width: 4vw;
        height: 4vw;
        justify-content: center;
        color: white;
        background-color: #DA3556;
        transition: transform 0.4s ease;
    }
    .faq3 .tab input:checked ~ label::after{
        transform: rotate(90deg);
        content: '+';
        font-size: 4vw;
        line-height: 3.5vw;
    }
    .faq3 .tab label h2{
        color: #DA3556;
        font-size: 3vw;
    }
    .faq3 .tab .content{
        position: relative;
        width: 90%;
    }
    .faq3 .tab .content p{
        color: #DA3556;
        padding: 0.7vw 0vw;
        font-size: 2.5vw;
    }
    .faq3 .tab .content{
        max-height: 0;
        transition: 1s;
        overflow: hidden;
    }
    .faq3 .tab input:checked ~ .content {
        max-height: 100vw;
    } 
}
/* FAQ end */



/* footer start */
.footer-container{
    width: 100%;
    height: 100%;
    background-color: #350E15;
}
.footer-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 0vw 10vw;
    padding: 4.5vw 0vw;
}
.footer {
    position: relative;
    left: 0vw;
    bottom: 0vw;
    width: 100%;
}
.footer-col {
    width: auto;
    padding: 0vw 4.5vw;
    position: relative;
}
.footer-col>img{
    width: 5.3vw
}

.footer-jumara{
    width: 14vw;
    color: white;
}
.footer-jumara p{
    opacity: 70%;
    line-height: 2vw;
    font-size: 1vw;
    font-weight: 300;
    width: 16vw;
}
.jumara-logo-footer{
    width: 13vw;
}
.contact-footer{
    display: flex;
    flex-direction: column;
}
.contact-content{
    top: 1.25vw;
    position: relative;
    display: flex;
    flex-direction: column;
}
.location-footer{
    position: relative;
    display: flex;
    flex-direction: row;
    color: white;
    height: 5vw;
    font-size: 1vw;
    top: 1.25vw;
}
.location-footer-text{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 12vw;
    left: 1vw;
    font-size: 0.8vw;
    font-weight: 300;
    opacity: 70%;
}
.fa-location-dot{
    position: relative;
    width: 1vw;
}
.fa-phone{
    position: relative;
}
.phone-footer{
    position: relative;
    display: flex;
    flex-direction: row;
    color: white;
    height: 5vw;
    font-size: 1vw;
    top: 1.25vw;
}
.phone-footer-text{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 12vw;
    left: 1vw;
    font-size: 0.8vw;
    font-weight: 300;
    opacity: 70%;
}
.email-footer{
    position: relative;
    display: flex;
    flex-direction: row;
    color: white;
    height: 5vw;
    font-size: 1vw;
    top: 1.25vw;
}
.email-footer-text{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 12vw;
    left: 1vw;
    font-size: 0.8vw;
    font-weight: 300;
    opacity: 70%;
}

.quick-link{
    position: relative;
    display: flex;
    flex-direction: column;
}
.quick-link-content{
    position: relative;
    top: 1.25vw;
    opacity: 70%;
    line-height: 2vw;
}
.join-us{
    position: relative;
    display: flex;
    flex-direction: column;
    width: fit-content;
}
.join-us-content{
    position: relative;
    top: 1.25vw;
    opacity: 70%;
}
.footer-col h4 {
    font-size: 1.2vw;
    color: #DA3556;
    text-transform: capitalize;
    font-weight: bold;
}

.footer-col h4::before {
    content: '';
    left: 0vw;
    bottom: -1vw;
    height: 1vw;
    width: 5vw;
}

.footer-col ul li :not(:last-child){
    margin-bottom: 1vw;
}

.footer-col ul li a{
    font-size: 1vw;
    text-transform: capitalize;
    color: white;
    text-decoration: none;
    font-weight: 300;
    display: block;
    color: white;
    transition-duration: 0.2s;
    transition-property: transform;
}

.footer-col ul i{
    color: #DA3556;
}
.footer-col ul a{
    font-size: 0.79vw;
    color: white;
    text-decoration: none;
}

.footer-col ul li a:hover{
    color: #DA3556;
    transition: all 0.5s ease;
    opacity: 100%;
}

.follow-us{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 2vw;
}
.social-links{
    display: flex;
    position: relative;
    top: 1.25vw;
    width: 100%;
    height: 5vw;
    gap: 1vw;
}
.social-links a{
    position: relative;
    display: inline-block;
    height: 2vw;
    width: 2vw;
    background-color: white;
    text-align: center;
    line-height: 2.1vw;
    border-radius: 50%;
    font-size: 1.2vw;
    color: black;
}

.footer-col .social-links a:hover{
    color: white;
    background-color: #DA3556;
    transition: all 0.8 ease;
}

@media(max-width:768px)
{
    .footer-container{
        width: 100%;
        height: 100%;
        background-color: #350E15;
    }
    .footer-row{
        display: flex;
        flex-direction: column;
        gap: 10vw;
        height: 140vw;
        overflow: hidden;
    }
    .footer-jumara{
        width: 90vw;
    }
    .footer-jumara p{
        position: relative;
        left: 0vw;
        font-size: 2.5vw;
        line-height: 4vw;
        width: 60vw;
    }
    .jumara-logo-footer{
        width: 27vw;
        position: relative;
    }

    .contact-footer h4{
        font-size: 4vw;
        height: 8vw;
    }
    .location-footer{
        height: 20vw;
        font-size: 5vw;
    }
    .location-footer-text{
        font-size: 3vw;
        width: 50vw;
        left: 8vw;
    }

    .phone-footer{
        height: 20vw;
        font-size: 5vw;
    }
    .phone-footer-text{
        font-size: 3vw;
        width: 50vw;
        left: 4vw;
    }

    .email-footer{
        height: 20vw;
        font-size: 5vw;
    }
    .email-footer-text{
        font-size: 3vw;
        width: 50vw;
        left: 4vw;
    }

    .quick-link{
        position: relative;
        top: -5vw;
    }
    .quick-link h4{
        font-size: 4vw;
        height: 8vw;
    }
    .quick-link-content ul li a{
        font-size: 3vw;
        height: 6vw;
        width: 30vw;
    }

    .join-us{
        position: relative;
        top: -5vw;
    }
    .join-us h4{
        font-size: 4vw;
        height: 8vw;
    }
    .join-us-content ul li a{
        font-size: 3vw;
        height: 6vw;
        width: 12vw;
    }

    .follow-us h4{
        font-size: 4vw;
        height: 8vw;
    }
    .social-links a{
        position: relative;
        display: inline-block;
        height: 6vw;
        width: 6vw;
        background-color: white;
        text-align: center;
        line-height: 6vw;
        border-radius: 50%;
        font-size: 4vw;
        color: black;
    }
}

.footer-whole{
    background-color: #350E15;
}
.trademark{
    position: relative;
    background-color: #350E15;
    overflow: hidden;
    width: 100%;
    height: 5vw;
}
.trademark hr{
    position: relative;
    left: 10vw;
    width: 80vw;
    color: white;
    opacity: 50%;
}
.trademark p{
    position: relative;
    text-align: center;
    top: 1vw;
    color: white;
    opacity: 50%;
}

@media(max-width:768px)
{
    .footer-whole{
        background-color: #350E15;
    }
    .trademark{
        position: relative;
        background-color: #350E15;
        overflow: hidden;
        width: 100%;
        height: 6vw;
    }
    .trademark hr{
        position: relative;
        width: 90vw;
        left: 3vw;
    }
    .trademark p{
        position: relative;
        text-align: center;
        top: 1vw;
        font-size: 2.5vw;
        width: auto;
    }
}



/* footer end */