@media (min-width: 300px) { 
    
}

@media (min-width: 576px) {  
    
}

@media (min-width: 768px) {  
    .title h2{
        font-size: var(--text-4xl);
    }
    .Contact-Form{
        padding: 2.5rem;
    }

}

@media (min-width: 992px) { 
    
    .dropdown-menu{
        width: 1200px;
        max-height: 100vh;
        transform: translateX(-60%);
        padding: 1.5rem;
        border: none;
        box-shadow: var(--tw-shadow);
    }
    .f-properties{
        background-color: white;
    }
    .Property-Types{
        background-color: white;
    }
    .Popular-Locations{
        background-color: white;
    }
    .Resources{
        background-color: white;
    }
    .f-properties img{
        width: 4rem;
        height: 4rem;
        object-fit: cover;
        border-radius: var(--radius-lg);
    }
    .f-properties h4{
        font-size: var(--text-sm);
        color: var(--color-gray-900);
    }
    .f-properties p{
        font-size: var(--text-sm);
        color: var(--color-gray-500);
    }
    .Popular-Locations a .content{
        height: 5rem;
        padding: 1rem;
    }
    .Popular-Locations a .content p:first-child{
        font-size: var(--text-lg);
    }
    .Popular-Locations a .content p:last-child{
        font-size: var(--text-sm);
    }
    .Resources .card .head .icon{
        width: 2.5rem;
        height: 2.5rem;
        font-size: var(--text-lg);
    }
    .Resources .card .head h4{
        font-size: var(--text-lg);
    }
    .Resources .card .card-text{
        font-size: 16px;
    }

    .Resources .card::before{
        content: '';
        position: absolute;
        width: 8rem;
        height: 8rem;
        background-image: linear-gradient(to bottom right , var(--color-Resources-50) ,var(--color-Resources-100));
        opacity: .5;
        border-radius:50% ;
        top: 0;
        right: 0;
        margin-top: -5rem;
        margin-right: -5rem;
    }
    .Resources .card:hover::before{
        opacity: .7;
    }
    /* nav bar */
    nav ul li a span {
        padding-left: 0;
    }
    nav ul li.dropdown a span i{

        padding-right: 0;
    }

    nav ul li a{
        padding-block:10px !important;
        border-radius: var(--radius-lg);
    
    }
    nav ul li a:hover{
        background-color: transparent;
        
    }
    nav ul li a:hover span{
        color: transparent;
        
    }

    nav ul li a.active span{
        color: var(--color-violet-600) !important;
        position: relative;
        font-weight: var(--font-weight-medium);
    }

    nav ul li a.active span::before{
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--color-violet-600);
    }
    nav ul li a span::before{
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 0%;
        height: 2px;
        background-color: var(--color-violet-600);
        transition: width .3s;
    }
    nav ul li a span:hover{
        width: 100%;
        color: var(--color-violet-600);
    }
    nav ul li a span:hover::before{
        width: 100%;
    }

    /* hero */

    .hero{
        height: 100vh;
        padding-top: 5rem;
    }
    .hero h1{
        font-size: var(--text-6xl);
    }
    .hero form{
        width: 56rem;
        
    }

    .hero .Quick-Stats{
        width: 48rem;
    }

    .title h2{
        font-size: var(--text-5xl);
    }

}

@media (min-width: 1200px) {  
    .hero h1{
        margin-top: 2rem;
    }
}

@media (min-width: 1400px) {  }