@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@700&family=Noto+Sans+TC:wght@100..900&display=swap');

* {
    font-family: "Noto Sans TC", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400px;
    margin-top: -.5px;
}

.ma {
    display: none !important;
}

    @keyframes Cat_Cards {
        0% {
            -moz-transform: translateX(calc(10% -.5rem));
            -webkit-transform: translateX(calc(10% -.5rem));
            transform: translateX(calc(10% -.5rem));
        }
        100% {
            -moz-transform: translateX(-341%);
            -webkit-transform: translateX(-341%);
            transform: translateX(-341%)
        }
        
    }

.dropdown:hover .dropdown-menu {
    display: block;
}

.navbar-nav {
    flex-grow: .7;
}

.nav-link {
    color: #fff !important;
}

.nav-item {
    padding-left: 3vh;
}

.head {
    background: url(/Images/elements\ \(1\).png) no-repeat center center /cover;
    text-align: center;
    animation: head-imgs 20s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
    color: #fff;
}

@keyframes head-imgs {

    0% {
        background: url(/Images/elements2.png) no-repeat center center /cover;
    }
    
    20% {
      background: url(/Images/elements1.png) no-repeat center center /cover;
    }
    
    35% {
        background: url(/Images/div.elementor-element3.png) no-repeat center center /cover;   
    }
    
    50% {
        background: url(/Images/div.property-item.png) no-repeat center center /cover;
    }
    
    60% {
        background: url(/Images/div.elementor-element4.png) no-repeat center center /cover;
    }
    
    75% {
        background: url(/Images/element.png) no-repeat center center /cover;
    }
    
    90% {
        background: url(/Images/elements.png) no-repeat center center /cover;
    }

    100% {
        background: url(/Images/elements2.png) no-repeat center center /cover;
    }
}

.head-top {
    padding-top: 10vh;
}

.head-top h1 {
    padding-top: 3vh;
    font-size: 53px;
}

.head-top h1 span, .head-text span {
    color: #E7C873;
}

.head-text h4 {
    font-size: 24px;
    margin-top: -1vh;
    padding-bottom: 3vh;
}

.htn {
    border-style: solid;
    border-width: thin;
    color: #fff;
    border-color: #fff;
    border-radius: 20px;
    font-size: 12px;
    padding: 8px 17px;
    letter-spacing: -0.02rem;
}

.frm {
    padding-bottom: 2vh;
}

.inp {
    background: none;
    color: #fff;
    border-color: #fff;
    border-radius: 34px;
    border-style: groove;
    height: 7vh;
    width: 25%;
    padding-left: 3vh;
}

.btn1 {
    border-radius: 40px;
    margin-top: -.5vh;
    margin-bottom: -.5vh;
    padding: 8px 10px;
    margin-left: -7.5vh;
}

.btn1, .sel, .content {
    background: #E7C873;
}

.select {
    padding-top: 3vh;
    padding-bottom: 20vh;
    font-size: 18px;

}

.select p {
    margin-bottom: 9px;
}

.sel {
    border-radius: 24px;
    margin-left: 1vh;
    font-weight: 500;
    border-color: #fff;
    border-style: double;
    border-width: medium;
    padding: 8px;
    font-size: 14px;
}

.head-footer {
    background: #E7C873;
    color: #2d2b2b;
    width: 45%;
    padding-top: 2vh;
    padding-left: 1vh;
    font-size: 18px;
    border-radius:  0px 90px 0px 0px;
}

.row {
    margin: 0 !important;
}

.fit {
    color: #000;
    font-size: 24px;
    font-weight: 550;
}

.content {
    padding-top: 5vh;
    text-align: center;
    color: #fff;
    font-size: 18px;
}

.con-img {
    padding-top: 1vh;
    padding-bottom: 5vh;
}

.con-img  img {
    padding-left: 12vh;
}

.category {
    padding-top: 15vh;
    padding-bottom: 10vh;
    text-align: center;
}

.cat-cards {
    padding-top: 5vh;
    padding-bottom: 10vh;
}

.cat-card {
    display: flex;
    padding: 10px;
    margin-left: 4vh;
    width: 230px !important;
    height: 350px;
    border-radius: 15px;
}

.cat-card:hover {
    cursor: pointer;
}

.blu {
    margin-left: 3vh;
    background: url(/images/h32.png) no-repeat center center /cover;
}

.mel {
    background: url(/images/h83.png) no-repeat center center /cover;
    animation: villa 15s ease-in-out infinite;
    
}

@keyframes villa {
    0% {
        background: url(/images/h83.png) no-repeat center center /cover;
    }

    50% {
        background: url(/images/h102.jpg.png) no-repeat center center /cover;
    }

    100% {
        background: url(/images/h83.png) no-repeat center center /cover;
    }
    
}

.tem {
    background: url(/images/h31.png) no-repeat center center /cover;
    animation: apart 15s ease-in-out infinite;
}

/* 
.tem:hover {
    animation: apart 15s ease-in-out infinite;
} */

@keyframes apart {
    0% {
        background: url(/images/h31.png) no-repeat center center /cover;
    }

    40% {
        background: url(/images/h33.png) no-repeat center center /cover;
    }

    70% {
        background: url(/images/h80.png) no-repeat center center /cover;
    }

    100% {
        background: url(/images/h31.png) no-repeat center center /cover;
    }
    
}


.bol {
    background: url(/images/h104.png) no-repeat center center /cover;
    
}

.tlu {
    background: url(/images/h85.png) no-repeat center center /cover;
    animation: office 15s ease-in-out infinite;
}

@keyframes office {
    0% {
        background: url(/images/h85.png) no-repeat center center /cover;
    }

    40% {
        background: url(/images/h105.png) no-repeat center center /cover;
    }

    70% {
        background: url(/images/h35.png) no-repeat center center /cover;
    }
    
    100% {
        background: url(/images/h85.png) no-repeat center center /cover;
    }
}

.bans {
    display: inline;
    flex-wrap: nowrap !important;
}

.img-text {
    text-align: initial;
}

.img-text p {
    margin-top: -1vh;
    font-size: 14px;
}

.city {
    text-align: center;
}

.city-set {
    padding: 5vh 10vh 0vh 10vh;
}

.city-card1 {
    background: url(/images/LGA.png)no-repeat center center /cover;
    -webkit-box-shadow: 0px 8px 56px 0px hsla(210,8%,62%,.05);
    box-shadow: 0px 8px 56px 0px hsla(210,8%,62%,.05);
    width: 550px;
    height: 350px;
    border-radius: 20px;
    animation: LGA 20s ease-in-out infinite;

}

@keyframes LGA {
    0% {
        background: url(/images/LGA.png) no-repeat center center /cover;
    }

    40% {
        background: url(/images/LGA1.png) no-repeat center center /cover;
    }

    70% {
        background: url(/images/LGA3.png) no-repeat center center /cover;
    }
    
    100% {
        background: url(/images/LGA.png) no-repeat center center /cover;
    }
}

.city-card2 {
    background: url(/images/ABJ.png)no-repeat center center /cover;
    -webkit-box-shadow: 0px 8px 56px 0px hsla(210,8%,62%,.05);
    box-shadow: 0px 8px 56px 0px hsla(210,8%,62%,.05);
    width: 550px;
    height: 350px;
    border-radius: 20px;
    animation: ABJ 20s ease-in-out infinite;
}

@keyframes ABJ {
    0% {
        background: url(/images/ABJ.png) no-repeat center center /cover;
    }

    20% {
        background: url(/images/ABJ1.png) no-repeat center center /cover;
    }

    40% {
        background: url(/images/ABJ2.png) no-repeat center center /cover;
    }
    
    80% {
        background: url(/images/ABJ3.png) no-repeat center center /cover;
    }
    
    100% {
        background: url(/images/ABJ.png) no-repeat center center /cover;
    }
}

.mini-card {
    box-shadow: 0px 8px 56px 0px hsla(210,8%,62%,.05);
    width: 260px;
    height: 350px;
    border-radius: 20px;
    display: inline-block;
}

.card1 {
    background: url(/images/PH.png)no-repeat center center /cover;
    margin-right: 3vh;
    animation: PH 20s linear infinite;
}

@keyframes PH {
    0% {
        background: url(/images/PH.png) no-repeat center center /cover;
    }

    40% {
        background: url(/images/PH1.png) no-repeat center center /cover;
    }

    70% {
        background: url(/images/PH2.png) no-repeat center center /cover;
    }
    
    100% {
        background: url(/images/PH.png) no-repeat center center /cover;
    }
}

.card2 {
    background: url(/images/AB.png)no-repeat center center /cover;
    margin-left: 3vh;
    animation: AB 20s linear infinite;
}

@keyframes AB {
    0% {
        background: url(/images/AB.png) no-repeat center center /cover;
    }

    50% {
        background: url(/images/AB1.png) no-repeat center center /cover;
    }

    100% {
        background: url(/images/AB.png) no-repeat center center /cover;
    }
}

.card3 {
    background: url(/images/CR.png)no-repeat center center /cover;
    animation: CR 20s linear infinite;
}

@keyframes CR {
    0% {
        background: url(/images/CR.png) no-repeat center center /cover;
    }

    40% {
        background: url(/images/CR1.png) no-repeat center center /cover;
    }
    
    100% {
        background: url(/images/CR.png) no-repeat center center /cover;
    }
}

.card4 {
    background: url(/images/DT.png)no-repeat center center /cover;
    animation: DT 20s linear infinite;
}

@keyframes DT {
    0% {
        background: url(/images/DT.png) no-repeat center center /cover;
    }

    40% {
        background: url(/images/DT1.png) no-repeat center center /cover;
    }
    
    100% {
        background: url(/images/DT.png) no-repeat center center /cover;
    }
}

.city-text {
    text-align: start;
    padding: 3vh;
    color: #E7C873;
}

.city-text p {
    margin-bottom: 0vh;
}

.first {
    padding: 10vh;
    background: #fff;
}

.f-cards {
    padding: 5vh;
    border-radius: 10px;
    text-align: center;
    background: #FFF8F6;
}

.f-head {
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.f-head p {
    margin-top: -.5vh;
}

.fc-head {
    padding: 2vh;
}

.fc-head p {
    padding-top: 0vh !important;
    padding: 2vh;
    font-size: 14px;
}

.custom {
    text-align: start;
    padding: 5vh;
    margin-bottom: 10vh;
}

.c-text {
    padding: 2vh;
}

.f-rate {
    flex-wrap: nowrap !important;
}

.c-peeps p, .rate p {
    margin-top: -1vh;   
}

.star {
    margin-top: -5vh;
}


.caro-head {
    display: flex;
    align-items: end;
    padding-bottom: 3vh;
}

.caro-text {
    padding-left: 2vh;
    text-align: start;
}

.caro-text p { 
    margin-top: -1vh;
}

.quote {
    align-self: center;
    padding-left: 30vh;
}

.quote1 {
    align-self: center;
    padding-left: 25vh;
}

.carousel-item {
    background: #F9F9F9;
    padding: 7vh;
    border-radius: 25px;
}
 
@media screen and (min-width: 1px ) and (max-width: 1000px) {

    .htn {
        font-size: 10px;
    }

    .head-top h1 {
        font-size: 34px;
    }

    .head-text h4 {
        font-size: 16px;
        margin-top: -.5vh;
    }

    .head-footer {
        display: none;
    }

    .inp {
        width: auto;
    }

    .btn1 {
        margin-left: -6.5vh;
    }

    .frm {
        padding-bottom: 0;
    }

    .content {
        padding-left: 1vh;
        padding-right: 1vh;
    }

    .con-img {
        display: flex;
    }

    .con-img img {
        padding-left: 2vh;
        overflow: hidden;
    }

    .category {
        overflow: hidden;
    }

    .cat-cards {
        animation: Cat_Cards 10s linear infinite;
    }

    .ma {
        display: block !important;
    }

    .city-set {
        display: inline-block;
        padding: 0;
    }

    .city-card1, .city-card2 {
        width: auto;
        margin: 2vh 0vh;
    }

    .mini-card {
        width: 335px;
        margin: 2vh 0vh;
    }

    .first, .carousel-item {
        padding: 3vh;
    }

    .fc-head p {
        padding: 0;
    }

    .f-rate {
        flex-wrap: wrap !important;
    }

    .star {
        margin-top: -3vh;
    }

    .carousel-item {
        margin-top: 3vh;
    }

    .caro-text p, .caro-body { 
        font-size: 14px;
    }

    .quote, .quote1 {
        align-self: flex-start;
        padding-left: 3.5vh;
    }

    .quote1 {
        padding-left: 1vh;
    }
}
@media screen and (width: 360px ) {

    .content {
        font-size: 17px;
    }

    .con-img img {
        padding-left: 1vh;
    }

    @keyframes Cat_Cards {
        from {
            -moz-transform: translateX(calc(10% -.5rem));
            -webkit-transform: translateX(calc(10% -.5rem));
            transform: translateX(calc(10% -.5rem));
        }
        to {
            -moz-transform: translateX(-359%);
            -webkit-transform: translateX(-359%);
            transform: translateX(-359%)
        }
        
    }

}

@media screen and (width: 1px ) and (height: 1px) {}