@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600');

html, body {
    margin: 0;
    padding:0;
    background-color: #EFEFEF;
    flex-wrap: wrap;
}

/* For WebKit browsers (Chrome, Safari) */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

/*-------------------renthouse.php-----------------*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cinzel:wght@400..900&family=Dancing+Script:wght@400..700&family=Lilita+One&family=Orbitron:wght@400..900&family=Staatliches&display=swap');

header{
    display:flex;
    flex-direction: row;
    align-items: center;
    width:100%;
    height:60px;
    background-color:#708090;
}

.sidebar{
    margin-top:-1px;
    height: 717px;
    width:240px;
    background-color: black;
}
.navbar{
    width:100%;
    margin-left: -40px;
    margin-top: 0.5px;
    display: flex;
    flex-direction: column;
}
.navbar li{
    
    height:27px;
    padding:11px;
    text-align: center;
    border-bottom: 0.7px solid #F5F5F5;

}

.navbar a{
    text-decoration: none;
    color:#F5F5F5;
}

.navbar li:hover {
    background: linear-gradient(90deg, #006DFF, #00BFFF);
    transition: 0.3s ease-in-out;
}

.content{
display:flex;
flex-direction: row;

}
#t1{
    font-size: large;
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    margin-left: -5px;
    margin-top:42px; 
}

.content1{
    display: flex;
    flex-direction: row;
}

.rumah{
    width:76%;
    height:500px;
    border-radius: 15px;
    margin-top: 45px;
    margin-left:53px;
    background-color: #F5F5F5;
    box-shadow: 0 14px 18px rgba(0, 0, 0, 0.2);
}

.detail{
    background-color: #F8F9FA;
    width:34%;
    border-radius:15px;
    margin-top:8px;
    margin-left: 9px;
    height:250px;
    padding: 2px;
   
}

.info{
    display: flex;
    flex-direction: column;
    margin-left: -725px;
}


.heading{
    margin-top:5px;
    background-color: #FFD700;
    height:50px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    padding-top: 1px;
    padding-bottom: 3px;
}

.heading p{
    text-align: center;
    font-family: "Staatliches", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:20px;
    margin-top: 15px;
}

.plan{
    margin-top:5px;
    margin-left: 11px;
    border-radius:10px;
    height:309px;
    width:60%;
    background-color: #F8F9FA;
    display:flex;
    flex-direction: row;
    border: 2px solid black;
}

/*svg{
    width:700; 
    height:330; 
    margin-left:13px; 
    margin-top:7px; 
    border:2px solid black; 
    background-color: #F8F9FA; 
    border-radius:15px; 
    padding-top:-3px;
}*/

.house{
    display: flex;
    margin-left: 27px;
}

.attribute{
    display:flex; 
    flex-direction:row; 
    width: 693px; 
    height:30px; 
    padding-inline:3px; 
    padding-block:2px; 
    margin-left:457px; 
    margin-top:-56px; 
    border-radius:15px; 
}

.size2{
    display:flex; 
    flex-direction:row; 
    width: 104px;
    height:30px; 
    padding-inline:5px; 
    padding-block:2px; 
    margin-left:13px; 
    margin-top:-2px; 
    border-radius:15px; 
    background-color:#F8E19D;
}

.size2 p{
    margin-top:4.7px; 
    margin-left:4px; 
    color:black; 
    white-space: nowrap;
}

.info2{
    display:flex;
    flex-direction: column;
    margin-top: -33px;
    margin-left:-733px
}


#price2{
    font-size: 20px; 
    margin-left: 18px; 
    margin-top: 35px;   
    font-family: Poppins, sans-serif; 
    font-weight: 500; 
    font-style: normal; 
    Color: #000000;
}

#price{
    margin-top:5px;
}

.detail2{
    display:flex; 
    flex-direction:row; 
    margin-left:18px; 
    margin-top:-28px;
    gap:33px;
    width:100%;
    white-space: nowrap;
}

.detail2 #button3, .detail2 #button4{
    width:160px; 
    height:35px; 
    border-radius:5px; 
    border:none; 
    background-color:#006DFF; color: #F8F9FA;
    margin-left: 683px;
    margin-top:8px;
}

#popupbox{
    position: absolute; 
    background-color: white; 
    border: 1px solid black; 
    padding: 5px; 
    display: none; 
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
    width:412px;height:232px;
}

.locs{
    display: flex;
    flex-direction: row;
}

.rumah2{
    width:100%;
    display:flex;
    flex-direction:row;
    gap:5px;
    margin:0 auto;

}

.rumah2 img{
    background-color:#F5F5F5 ;
    margin:0 auto;
    width:70px;
    height:66px;
}

#mapSelector{
    height:20px;
    margin-top:7px;
    margin-left: 180px;
}

button{
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);

}
/*------------------------------------------------------------*/




.house2{
    display: flex;
    margin-left: 27px;
    margin-top: -40px;
}
.rumah1{
    display: flex;
    gap:2px;
    margin-left: 44px;
    margin-top: 34px;
}

.icon {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease-in-out;
}

.gambar{
    background-color: #A8A8A8;
    width:60%;
    border-radius:15px;
    margin-top:-265px;
    height:247px;
}



.address{
    width: 100%;
    max-width: 500px; 
    margin: auto;
    padding: 20px;
    padding-top:2px;
    background: #F5F5F5; 
    border-radius: 10px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}

.address2{
    transform: translateY(13px);
    max-width: 1300px; 
    margin: auto;
    padding: 20px;
    padding-top:2px;
    background: #F5F5F5;
    border-radius: 10px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}

.umah{
    max-width: 1300px; 
    margin: auto;
    padding: 20px;
    padding-top:2px;
    background: #F5F5F5;
    border-radius: 10px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}


#price{
    font-size: 28px;
    margin-left: 13px;
    margin-top: 7px;
}
#price span{
    font-size:15px;
}

.room{
    fill:lightgray;
    stroke:black;
    stroke-width: 2;
}

.door{
    fill: none;
        stroke: black;
        stroke-width: 3;
      
}

.hover-effect{
    width:fit-content;
    border-radius:25px;
    padding:3px;
    background-color: #F8E19D;
    transition: 0.3s ease-in-out;   
}

.hover-effect2{
    width:fit-content;
    border-radius:25px;
    padding:3px;
    transform: translateY(-15px);
    background-color: #F8E19D;
    transition: 0.3s ease-in-out;   
    filter: invert(28%) sepia(7%) saturate(331%) hue-rotate(20deg) brightness(90%) contrast(90%);
}

.hover-effect3{
    width:fit-content;
    border-radius:25px;
    padding:3px;
    transform: translateY(-15px);
    background-color: #F8E19D;
    filter: invert(28%) sepia(7%) saturate(331%) hue-rotate(20deg) brightness(90%) contrast(90%);
}

.renthouse{
    margin-left: -130px;
    height:107px;
    padding-top: 45px;
    width:70%;
    border-radius: 10px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    display:none; 
    flex-direction:column; 
    background-color:#f7f7f7;
}

#popup2 {
    display: none;
    position: absolute; 
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000; 
}

/*------------------------------*/
.tajuk{
    margin-top: -15px;
    background-color: #FFD700;
    height:38px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    padding-block: 3px;
 
}

.tajuk p{
    text-align: center;
    font-family: "Staatliches", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:17px;
    margin-top: 10px;
    margin-left: 195px;
    white-space: nowrap;
    display:flex;
    
}

#gallery{
    margin-top: -31px; 
    display: flex; 
    flex-wrap: wrap;
}

.photo{
    width:101%;
    margin-top: -10px;
    margin-left:15px;
    background-color: black;
    height:300px;
    border-radius: 8px;
    
}

/*-------------login page---------*/
.bahagian {
    display: flex;
    width: 100%;
}

.video, .form {
    flex: 1; /* This makes them take equal width */
    min-height: 100vh; /* Optional: makes them full viewport height */
}

.video {
    background-color: black; /* Just to visualize the video area */
}

.logo {
    height: 270px; /* Adjust as needed */
    background-color: #e0e0e0; /* Just to visualize the logo area */
    margin-bottom: 20px; /* Space between logo and form */
    padding-inline: 25px;
    padding-top: 30px;
    text-align: center;
}

.isi {
    display: flex;
    flex-direction: column;
    padding: 20px;
    max-width: 300px; /* Optional: limits form width */
    margin-left:250px;/* Centers the form */
    align-items: center;
}

input[type="text"], input[type="number"]{
    padding: 10px;
    width:200px;
    margin-bottom: 10px;
    border-radius: 7px;
    border: none;
}

button {
    padding: 10px;
    width:220px;
    background-color:#006DFF;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 7px;
}

button:hover {
    background-color: #0056cc;
}