/* hero section  */
.hero-listing {


    width: 100vw;

    margin: auto;
    position: relative;
    background-image: url("images/banner-01\ 1.png");
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;

    height: 700px;
    padding-left: 6vw;
    padding-right: 6vw;

    align-items: center;
    justify-content: center;
    background-size: 100% 100%;
    z-index: 999;

}

.hero-listing::before {
    content: '';
    background-color: #00000049;

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.hero-listing h1 {
    font-size: clamp(40px, 5vw, 60px);
    text-align: center;
    z-index: 1;
    margin-bottom: 5px;
}

.hero-listing p {
    text-align: center;
    width: 100%;
    max-width: 55vw;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(16px, 2vw, 24px);
    font-weight: normal;
    line-height: clamp(24px, 2vw, 36px);
    z-index: 1;
    color: #fff;
}

@media(max-width:820px) {
    .hero-listing {
        height: 500px;
    }

    .hero-listing p {
        max-width: 88vw;
		font-size:14px! important;
    }
	.hero-listing h1 {
		font-size: 20px! important;}
}

/* section prodct */
.listing-product {
    width: 100%;
    max-width: 1220px;
    gap: 70px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000000;
    padding-block: clamp(40px, 8vw, 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: auto;
    position: relative;


}

.product-top {
    display: flex;
    width: 100%;
    gap: 80px;
    margin-bottom: 30px;
}

.prod-top-left-listing {
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: space-between;
}

.prod-top-right-listing {
    width: 100%;
    max-width: 642px;
    display: flex;
    justify-content: space-between;
}

#sort-y {
    color: #a3a3a3;
    font-size: clamp(14px, 2vw, 18px);



}

.custom-select-wrapper {
    position: relative;
    display: flex;
    max-width: 200px;

    gap: 10px;

}

.custom-select {

    border-color: #0077ff;
    background: linear-gradient(to bottom, #1e205d3a 0%, #1e205d00 100%);
    color: #ffffff;
    height: 50px;
    appearance: none;
    /* Remove default arrow (Chrome, Safari) */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 150px;
    padding: 10px 40px 10px 12px;
    border: 1px solid #006dc7;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transform: translateY(-12.5px);
}

.custom-select-wrapper-two {
    width: 259px;
    display: flex;
    position: relative;
}

.custom-select-two {

    color: #ffffff;
    height: 50px;
    appearance: none;
    /* Remove default arrow (Chrome, Safari) */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 259px;
    padding: 10px 30px 10px 12px;
    border: 1px solid #006dc7;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    background: linear-gradient(to bottom, #1e205d4a 0%, #1e205d00 100%);
    transform: translateY(-12.5px);
}

.custom-select-two option,
.custom-select option {
    background: black;
    color: white;



}
.span-select{
  position: absolute; right: -5%;
}

/* Custom ▼ arrow */

.search-div {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 362px;
}

#search-bar {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    height: 50px;
    margin-left: 40px;
    padding: 5px;
    padding-left: 10px;
    width: 100%;
    max-width: 362px;
    border: 1px solid #0077ff;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transform: translateY(-15px);
}

#search-bar::placeholder {

    color: #ffffffb4;

}

.icon {
    position: absolute;
    right: 7.5%;

}

@media(max-width:1250px) {
    .listing-product {
        max-width: 88vw;
    }

    .product-top {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        max-width: 88vw;
        gap: 20px;

    }

    .prod-top-left-listing {
        width: 100%;
        max-width: 86vw;
        display: flex;
        justify-content: space-between;
    }

    .prod-top-right-listing {
        width: 100%;
        max-width: 88vw;
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        gap: 10vw;
    }

    .product-top label {
        color: #a3a3a3;
        font-size: clamp(16px, 2vw, 18px);



    }


    .custom-select-two {
        background-color: #000000;
        color: #ffffff;
        height: 50px;

        width: 35vw;
        border: 2px solid #006dc7;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transform: translateY(-12.5px);
    }



    /* Custom ▼ arrow */

    .search-div {
        position: relative;
        display: flex;
        width: 100%;
        max-width: 60vw;
        margin-left: 0;
    }

    #search-bar {
        background-color: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        height: 50px;

        padding: 5px;
        width: 100%;
        max-width: 60vw;
        border: 1px solid #0077ff;
        border-radius: 10px;
        font-size: 16px;
        cursor: pointer;
        transform: translateY(-15px);
        margin-left: 0;
    }

}

@media(max-width:600px) {
    .listing-product {
        max-width: 88vw;
    }

    .product-top {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        max-width: 88vw;
        gap: 20px;

    }

    .prod-top-left-listing {
        width: 100%;
        max-width: 88vw;
        display: flex;
        justify-content: space-between;
        gap: clamp(0px, 2vw, 100px);

    }

    .prod-top-right-listing {
        width: 100%;
        max-width: 88vw;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
        gap: 20px;
    }

    .product-top label {
        color: #a3a3a3;
        font-size: clamp(16px, 2vw, 18px);



    }

.custom-select-wrapper-two{
  width: 88vw;
}
    .custom-select-two {
        background-color: #000000;
        color: #ffffff;
        height: 50px;
width: 100%;
        max-width: 88vw;
        border: 2px solid #006dc7;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transform: translateY(-12.5px);
    }



    /* Custom ▼ arrow */

    .search-div {
        position: relative;
        display: flex;
        width: 100%;
        max-width: 88vw;
        margin-left: 0;
    }

    #search-bar {
        background-color: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        height: 50px;

        padding: 5px;
        width: 100%;
        max-width: 88vw;
        border: 1px solid #0077ff;
        border-radius: 10px;
        font-size: 16px;
        cursor: pointer;
        transform: translateY(-15px);
        margin-left: 0;
    }

    .custom-select-wrapper {
        position: relative;
        display: flex;
        width: 100%;
        max-width: 250px;



    }

    .custom-select {

        background-color: #000000;
        color: #ffffff;
        height: 50px;

        width: 100%;
        padding: 10px 30px 10px 12px;
        border: 2px solid #006dc7;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transform: translateY(-12.5px);
    }
    .span-select{
  position: absolute; right: 5%;
}
}


.item-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
}



.listing-product .tool-card {
    /* background-color: #101010; */
    border: 1px solid #434343;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 580px;

    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
    overflow: hidden;
}

.tool-card:hover {
    border-color: #0077ff;
    background: linear-gradient(to bottom, #1e205d3a 0%, #1e205d00 100%);
    box-shadow: 4px 4px #1e205d3a;
}

.tool-card img {
    position: absolute;
    height: 53px;
    object-fit: contain;
    width: fit-content;
    left: 1%;
    top: 1%;
}

.tool-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 53px;
}

.tool-info i {
    color: #006DC7;
}

.tool-info a {
    text-decoration: none;
    color: #0077ff;
}



.visit-btn {
    background-color: white;
    color: black;
    position: absolute;
    width: 100%;
    max-width: 155px;
    height: 45px;
    border: none;
    border-radius: 6px;
    font-size: 16px;

    right: 1%;
    top: 1%;
    cursor: pointer;
    font-weight: normal;


}






.tool-rating {
    font-size: 14px;

}

.full-stars i {
    color: #eeba0e;

}


.half-stars i {

    color: #eeba0e;
}

.tool-desc,
.tool-location,
.tool-services {
    font-size: 13px;
    color: #ccc;
    line-height: 1.4;
}

@media(max-width:1250px) {
    .tool-card {
        padding: 10px;
        width: 100%;
        max-width: 440px;
    }
}

@media(max-width:1050px) {
    .none-small {
        display: none;
    }
}

@media(max-width:900px) {

    .second-last-tool-card,
    .last-tool-card {
        display: none;
    }
}

@media (max-width: 768px) {
    .tool-card {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width:880px) {


    .tool-card {
        width: 100%;
        max-width: 500px;
    }

    .visit-btn {
        font-size: 12px;
        background-color: white;
        color: black;

        width: 100%;
        max-width: 105px;
        height: 45px;
        border: none;
        border-radius: 6px;

        margin-left: 35%;
        right: 2%;
        top: 1%;
        cursor: pointer;
        font-weight: normal;



    }

    .tool-card img {
        position: absolute;
        height: 55px;
        object-fit: contain;
        width: 100px;
        left: 1%;
        top: 1%;
    }
}


.page-buttons {
    display: flex;
    max-width: 1200;

    justify-content: center;
    gap: clamp(5px, 2vw, 20px);
    align-items: center;

}

.page-buttons button {
    text-align: center;
    color: white;
    padding-block: clamp(3px, 2vw, 10px);
    padding-left: clamp(10px, 2vw, 20px);
    padding-right: clamp(10px, 2vw, 20px);
    background-color: black;
    border: 1px solid #434343;
    border-radius: 10px;
}

.page-buttons button:hover {
    border: 1px solid #0077ff;
}

.next {
    padding-left: clamp(15px, 3vw, 30px);
    padding-right: clamp(15px, 3vw, 30px);

}




/* tools explore */
.tools-section {
    /* padding-block: clamp(40px, 8vw, 100px); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 88vw;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 100px;

}

.tools-section h2 {
    text-align: center;
    font-size: clamp(32px, 2vw, 36px);
    margin-bottom: 30px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    width: 100%;
    max-width: 900px;
}

.tag-button {
    background-color: #1a1a1a;
    border: 1px solid #333;
    color: #f0f0f0;
    padding: 10px 18px;
    border-radius: 15px;
    font-size: clamp(12px,2vw,16px);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease;
}

.tag-button:hover {
    background-color: #0077ff;
}
@media(max-width:500px){
  .tag-button{
padding: 5px 9px;
border-radius: 5px;
  }
}