.elementor-8855 .elementor-element.elementor-element-18879ea{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--margin-top:0px;--margin-bottom:35px;--margin-left:0px;--margin-right:0px;--padding-top:58px;--padding-bottom:58px;--padding-left:0px;--padding-right:0px;}.elementor-8855 .elementor-element.elementor-element-35c65ab{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-8855 .elementor-element.elementor-element-f1c2ddb .elementor-heading-title{font-size:32px;color:#DDF732;}.elementor-8855 .elementor-element.elementor-element-dbe5d43{color:#999999;}.elementor-8855 .elementor-element.elementor-element-4cdcb39{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 10px;--row-gap:0px;--column-gap:10px;--padding-top:35px;--padding-bottom:45px;--padding-left:0px;--padding-right:0px;}.elementor-8855 .elementor-element.elementor-element-4cdcb39:not(.elementor-motion-effects-element-type-background), .elementor-8855 .elementor-element.elementor-element-4cdcb39 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-8855 .elementor-element.elementor-element-74d03d3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-8855 .elementor-element.elementor-element-74d03d3.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8855 .elementor-element.elementor-element-e6f3a30 .btn-submit{border-style:none;}.elementor-8855 .elementor-element.elementor-element-e6f3a30 .widget-listing-search-form{background-color:#FFFFFF;}.elementor-8855 .elementor-element.elementor-element-256723e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8855 .elementor-element.elementor-element-b7153c6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}@media(max-width:1024px){.elementor-8855 .elementor-element.elementor-element-18879ea{--margin-top:0px;--margin-bottom:15px;--margin-left:0px;--margin-right:0px;--padding-top:25px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-8855 .elementor-element.elementor-element-f1c2ddb .elementor-heading-title{font-size:25px;}.elementor-8855 .elementor-element.elementor-element-4cdcb39{--flex-wrap:wrap;--padding-top:15px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;}.elementor-8855 .elementor-element.elementor-element-74d03d3{--padding-top:15px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}}@media(max-width:767px){.elementor-8855 .elementor-element.elementor-element-18879ea{--padding-top:20px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;}.elementor-8855 .elementor-element.elementor-element-f1c2ddb .elementor-heading-title{font-size:23px;}}@media(min-width:768px){.elementor-8855 .elementor-element.elementor-element-4cdcb39{--content-width:1487px;}.elementor-8855 .elementor-element.elementor-element-74d03d3{--width:15.561%;}.elementor-8855 .elementor-element.elementor-element-256723e{--width:84%;}.elementor-8855 .elementor-element.elementor-element-b7153c6{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-8855 .elementor-element.elementor-element-74d03d3{--width:100%;}.elementor-8855 .elementor-element.elementor-element-256723e{--width:100%;}.elementor-8855 .elementor-element.elementor-element-b7153c6{--width:100%;}}/* Start custom CSS for apus_element_service_search_form, class: .elementor-element-e6f3a30 *//* 1. Inner white layers ko khatam karne ke liye */
.elementor-element-e6f3a30 *, 
.elementor-element-e6f3a30 .rt-service-item, 
.elementor-element-e6f3a30 .service-item,
.elementor-element-e6f3a30 .atbd_single_service {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* 2. Text ko white force karne ke liye (taki piche glass par dikhe) */
.elementor-element-e6f3a30 h1,
.elementor-element-e6f3a30 h2,
.elementor-element-e6f3a30 h3,
.elementor-element-e6f3a30 span,
.elementor-element-e6f3a30 p,
.elementor-element-e6f3a30 a {
    color: #ffffff !important;
}

/* 3. Aapka main Glass Container (74d03d3) */
.elementor-element-74d03d3 {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 25px !important;
}

/* --- 1. Budget Bar Wrapper ko White karna --- */
/* Ye code budget slider ke area ko solid white kar dega */
.elementor-element-e6f3a30 .atbd_range_slider, 
.elementor-element-e6f3a30 .range-slider-wrapper,
.elementor-element-e6f3a30 .ui-slider-handle {
    background: #ffffff !important; /* Solid White */
    border-radius: 10px !important;
    padding: 10px !important;
    border: 1px solid #dddddd !important;
}

/* --- 2. Budget Text Color Fix --- */
/* Jab background white hoga, toh text ko dark karna padega */
.elementor-element-e6f3a30 .atbd_range_slider label,
.elementor-element-e6f3a30 .atbd_range_slider span,
.elementor-element-e6f3a30 .price_range_text {
    color: #222222 !important; /* Dark Text */
    font-weight: 600 !important;
}

/* --- 3. Slider Line (The actual bar) --- */
.elementor-element-e6f3a30 .ui-slider-range {
    background: #000000 !important; /* Slider ki line black takki white par dikhe */
}

/* --- 4. Sidebar ki baaki cheeze Glass hi rahengi --- */
.elementor-element-74d03d3 {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(16px) !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74d03d3 *//* --- 1. MAIN GLASS CONTAINER (The Background) --- */
.elementor-element-74d03d3 {
    /* Glass Background & Blur */
    background: rgba(255, 255, 255, 0.1) !important;
    background-image: none !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;

    /* Glass Borders */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
    
    /* Shape & Shadow */
    border-radius: 20px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important;
    
    /* Layout Fixes */
    padding: 25px !important;
    color: #ffffff !important;
    transition: all 0.3s ease-in-out;
    overflow: hidden !important;
}

/* --- 2. REMOVE WHITE BACKGROUND FROM INNER ELEMENT --- */
/* This kills the white box from element e6f3a30 */
.elementor-element-e6f3a30, 
.elementor-element-e6f3a30 .elementor-widget-container,
.elementor-element-e6f3a30 .rt-service-item, 
.elementor-element-e6f3a30 .service-item {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- 3. INNER CONTENT & TEXT FIXES --- */
.elementor-element-74d03d3 h2, 
.elementor-element-74d03d3 h3, 
.elementor-element-74d03d3 h4, 
.elementor-element-74d03d3 .widget-title,
.elementor-element-e6f3a30 h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.elementor-element-74d03d3 label,
.elementor-element-74d03d3 span,
.elementor-element-74d03d3 p {
    color: #ffffff !important;
}

/* --- 4. DROPDOWN / SELECT GLASS STYLE --- */
.elementor-element-74d03d3 select,
.elementor-element-74d03d3 .select2-container--default .select2-selection--single {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    height: 45px !important;
}

.elementor-element-74d03d3 .select2-selection__rendered {
    color: #ffffff !important;
}

/* --- 5. THE GLASS BUTTON --- */
.elementor-element-74d03d3 button, 
.elementor-element-74d03d3 input[type="submit"],
.elementor-element-e6f3a30 a.view-details,
.elementor-element-e6f3a30 .btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border-radius: 10px !important;
    width: 100%;
    padding: 12px 0;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    text-decoration: none !important;
    transition: 0.3s ease-in-out;
    margin-top: 15px;
}

/* Button Hover State */
.elementor-element-74d03d3 button:hover, 
.elementor-element-74d03d3 input[type="submit"]:hover,
.elementor-element-e6f3a30 a.view-details:hover {
    background: #ffffff !important;
    color: #333333 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-256723e *//* ============================================================
   FINAL GLASSMORMISM CARDS CSS
   ============================================================ */

/* 1. Main Card Container */
.service-item {
    /* Glass Effect: Semi-transparent white */
    background: rgba(255, 255, 255, 0.1) !important; 
    
    /* Frosting/Blur Effect */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    
    /* Glass Borders (Top and Left highlights for 3D look) */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important; 
    border-left: 1px solid rgba(255, 255, 255, 0.4) !important; 
    
    /* Soft Shadow and Shape */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important;
    border-radius: 20px !important;
    
    /* Transitions */
    transition: all 0.3s ease-in-out !important;
    color: #ffffff !important;
    overflow: hidden;
}

/* 2. Card Hover State */
.service-item:hover {
    transform: translateY(-8px); /* Card lifts up */
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* 3. Text Visibility inside Glass Cards */
.service-item h2, 
.service-item h3, 
.service-item h4,
.service-item a, 
.service-item span,
.service-item .freelancer-name,
.service-item .rating-text {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 4. The Button (Matching your Sidebar Style) */
.service-item .btn-view-profile, 
.service-item a.view-profile,
.service-item .elementor-button,
.service-item button {
    /* Glass style from your sidebar code */
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    
    /* Layout */
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    display: inline-block;
    width: 90%; /* Center the button slightly inside the card */
    margin: 15px auto !important;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s ease-in-out !important;
}

/* 5. Button Hover State */
.service-item .btn-view-profile:hover, 
.service-item a.view-profile:hover,
.service-item button:hover {
    background: #ffffff !important; /* Turns solid white on hover */
    color: #333333 !important;      /* Text turns dark for contrast */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* 6. Image/Avatar Fix */
.service-item img {
    border-radius: 1px%; /* Keeps profile pictures circular */
    border: 1px solid rgba(255, 255, 255, 0.2);
}/* End custom CSS */