.joinUs_sec{
    background-image: url(../Image/booth/lengkung1.png), url(../Image/booth/lengkung2.png), url(../Image/background/Yel_blue_mix.jpg);
    background-size: 895px, 908px, cover;
    background-position: -17% 45%, 120% 50%, center 96%;
    background-repeat: no-repeat;
    height: 90vh;
}

.headerText_joinUs{
    position: relative;
    display: flex;
    width: 342px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    color: var(--color_cream, #FFEBCA);
    padding-top: 160px;
    text-align: center;
}
.headerText_joinUs h6{
    position: absolute;
    width: 342px;
    top: 184px;
}
.headerText_joinUs img{
    height: 193px;
    align-self: stretch;
}
.franchise_sec{
    background-image: url(../Image/text/JoinHorizontal.png), url(../Image/text/JoinVertikal.png), url(../Image/background/BlueBG.jpg);
    background-size: 800px, 108px, cover;
    background-position: 100% center, 8% center, center;
    background-repeat: no-repeat;
    padding-bottom: 66px;
}
.franchise_starter{
    background-image: url(../Image/logo/2-left.png), url(../Image/logo/2.png), url(../Image/background/BlueBG.jpg);
    background-size: 295px, 358px, cover;
    background-position: 103% 16%, -4% 59%, center;
    background-repeat: no-repeat;
    padding-bottom: 66px;
}
.franchise_main{
    display: flex;
    /* width: 1149px; */
    flex-direction: column;
    align-items: center;
    gap: 40px;
    color: var(--color_secondry_yellow);
}
.franchise_starter_main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: -41px;
    align-self: stretch;
}
.franchise_starter_main h1{
    color: var(--color_secondry_yellow);
    text-align: center;
    text-shadow: 4px 0px 2.3px var(--color_primary_red);
    transform: rotate(-5deg);
}
.harga{
    border-radius: 60px;
    background: var(--Canary-Ginger, #FAAB19);
    display: flex;
    width: 549px;
    transform: rotate(-5deg);
    padding: 24px 39px;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}
.harga h1{
    color: var(--Cobalt-Blue, #283980);
    text-align: center;
    text-shadow: 4px 0px 2.3px #EC1E24;
    transform: rotate(359deg);
}
.img_miring{
    transform: rotate(-5deg);
    height: 209px;
}
.potato_miring{
    height: 590px;
}
.FR_content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 59px;
    align-self: stretch;
    color: var(--color_cream);
}
.FR_info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 59px;
}
.FR_card{
    border-radius: 12px;
    background: rgba(87, 127, 191, 0.83);
    box-shadow: 0px 7px 11.4px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4.800000190734863px);
    display: flex;
    padding: 42px 21px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.FR_cardContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}
.FR_cardContent p{
    margin: 0;
}
.FR_booth{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.FR_booth img{
    max-width: 400px;
}
.subTag_FR{
    display: flex;
    padding: 4px 20px;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    border-radius: 10px;
    background: var(--Cobalt-Blue, #283980);
}
.pointFR{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 5px;
}
.point{
    display: flex;
    align-items: flex-start;
    gap: 9px;
    align-self: stretch;
}
.point img{
    max-height: 24px;
}

/* Gallery */
.gallery{
    height: 100%;
    background-image: url(../Image/background/BlueBG.jpg);
    padding: 60px 84px;
}

.gallery img {
    transition: 1s;
    /* height: 150px;
    padding: 5px; */
    
}

.foto-grid{
    
    --gap:2px;
    --num-cols:7;
    --row-height:200px;

    box-sizing: border-box;
    padding: var(--gap);

    display: grid;
    grid-template-columns: repeat(var(--num-cols), minmax(auto,auto));
    grid-auto-rows: var(--row-height);
    grid-auto-flow: dense;
    grid-gap: var(--gap);
    justify-content: center;

}
.foto-grid img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
.foto-grid .wide{
    grid-column: span 2;
}

.foto-grid a{
    text-decoration: none !important;
    text-decoration-color:white ;
}

.gallery img:hover{
    filter: brightness(40%);
}
.join_form_input{
    background-image: url(../Image/background/CreamBg.jpg);
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 141px 302px 76px;
    flex: 1 0 0;
}
.join_us_list_header{
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
}

@media (max-width: 1700px) {
    .joinUs_sec {
        background-image: url(../Image/booth/lengkung1.png), url(../Image/booth/lengkung2.png), url(../Image/background/Yel_blue_mix.jpg);
        background-size: 658px, 674px, cover;
        background-position: -17% 45%, 120% 50%, center 96%;
        background-repeat: no-repeat;
        height: 100%;
        padding: 94px 20px;
    }
}
@media (max-width: 1300px) {
    .joinUs_sec {
        background-image: url(../Image/booth/lengkung1.png), url(../Image/booth/lengkung2.png), url(../Image/background/Yel_blue_mix.jpg);
        background-size: 470px, 471px, cover;
        background-position: -17% 45%, 120% 50%, center 96%;
        background-repeat: no-repeat;
        height: 100%;
        padding: 94px 20px;
    }
}
@media (max-width: 1440px) {
    .foto-grid {
        --gap: 2px;
        --num-cols:6 ;
        --row-height: 200px;
    }
}
@media (max-width: 1028px) {
    .joinUs_sec {
        background-image: url(../Image/booth/lengkung2.png), url(../Image/background/Yel_blue_mix.jpg);
        background-size: 446px, cover;
        background-position: center 10%, center 96%;
        background-repeat: no-repeat;
        height: 100%;
        padding: 94px 20px;
    }
    .headerText_joinUs {
        padding-top: 364px;
    }
    .headerText_joinUs h6 {
        top: 382px;
    }
    .join_form_input {
        padding: 141px 42px 76px;
    }
}
@media (max-width: 990px){
    .foto-grid{
        --gap:2px;
        --num-cols:5;
        --row-height:200px;
    }
}
@media (max-width: 768px){
    .foto-grid{
        --gap:2px;
        --num-cols:5;
        --row-height:150px;
    }
    .FR_content {
        flex-direction: column;
    }
    .FR_booth img {
        max-width: 365px;
    }
    .franchise_sec {
        padding: 0px 20px;
    }
    .franchise_starter {
        background-image: url(../Image/background/BlueBG.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-bottom: 66px;
    }
    
}
@media (max-width: 566px){ 
    .img_miring {
        transform: rotate(-5deg);
        height: 159px;
    }
    .harga {
        width: 369px;
    }
    .potato_miring {
        height: 440px;
    }
}   
@media (max-width: 425px){    
    .foto-grid{
        --gap:10px;
        --num-cols:1;
        --row-height:200px;
    }
    .joinUs_sec {
        background-image: url(../Image/booth/lengkung2.png), url(../Image/background/Yel_blue_mix.jpg);
        background-size: 306px, cover;
        background-position: center 26%, center 0;
        background-repeat: no-repeat;
        height: 100%;
        padding: 59px 20px;
    }
    .headerText_joinUs {
        padding-top: 359px;
        width: 100%;
    }
    .headerText_joinUs h6 {
        top: 363px;
        width: 100%;
    }
    .headerText_joinUs img {
        height: auto;
        align-self: stretch;
    }
    .FR_booth img {
        max-width: 250px;
    }
    .navbar-brand img {
        width: auto;
        height: 71px;
        flex-shrink: 0;
    }
    .harga{
        max-width: 285px;
    }
    .img_miring {
        transform: rotate(-5deg);
        height: 115px;
    }
    .potato_miring {
        height: 330px;
    }
}