*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


.container{
      display: flex;
      justify-content: center;
}

.tittlecontro{
    color: white;
    text-align: center;
    margin: 10px;
    margin-top: 50px;
}

.state{
    color: white;
    margin-bottom: 15px;
}

.cardLocation{
     background: white;
     width:fit-content;
     height: 400px;
     margin: 10px;
     border-radius: 15px;
}

.card-image{
   background-color: aqua;
   height: 150px;
   margin-bottom: 15px;
   background-size: cover;
   border-radius: 15px 15px 0 0;
}

.locationFinal{
    background-image: url('../image/sungaipetani.jpg');
}


.location1{
    background-image: url('../image/PetalingJaya.jpg');
}

.location2{
    background-image: url('../image/shaAlam.jpg');
}

.location3{
    background-image: url('../image/sepang.jpg');
}

.location4{
    background-image: url('../image/alorsetar.jpg');
}

.location5{
    background-image: url('../image/kulim.jpg');
}

.location6{
    background-image: url('../image/georgetown.jpg');
}
.location7{
    background-image: url('../image/butterworth.jpg');
}
.location8{
    background-image: url('../image/Kuantan.jpg');
}
.location9{
    background-image: url('../image/JohorBahru.jpg');
}
.location10{
    background-image: url('../image/kangar.jpg');
}
.location11{
    background-image: url('../image/Kuala\ Terengganu.jpg');
}
.location12{
    background-image: url('../image/Ipoh.jpg');
}
.location13{
    background-image: url('../image/MalaccaCity.jpg');
}
.location14{
    background-image: url('../image/Seremban.jpg');
}
.location15{
    background-image: url('../image/Kota\ Bharu.jpg');
}
.location16{
    background-image: url('../image/Kuching.jpg');
}
.location17{
    background-image: url('../image/kotakinabaru.jpg');
}

.titlebackground{
    margin: 10px;
}

.p{
    padding: 10px;
}


.cardLocation:hover{
    background-color: rgb(62, 62, 62);
    color: white;
    transform:scale(1.03);
    transition: all 1s ease;
}

.content {
    width: 60%;
    margin-top: 1px;
    padding-bottom: 1px;
    border-bottom: 2px double white;
    cursor: pointer;
}

.q {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.question h3 {
    font-size: 2rem;
}

.a {
    max-height: 0;
    overflow: hidden;
    margin-left: 50%;
    transform: translateX(-50%);
    transition: max-height .5s ease;
}

.a p {
    line-height:1.7;
}

@keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1; }
}

.content.active .a {
    max-height: 300px;
    animation: fadeIn 1.5s
}