/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.5.1752126923
Updated: 2025-07-10 05:55:23

*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap'); /* <--- ADD THIS LINE HERE */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/* Main search wrapper */
.search_warp {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 0;
    flex-wrap: wrap;
}

/* Individual search field containers */
.ser_inn {
    flex: 1;
    min-width: 150px;
}

/* Remove default paragraph margins */
.search_warp p {
    margin: 0;
    padding: 0;
}

/* Style the select dropdowns */
.wpcf7-form-control.wpcf7-select {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 2px solid #333;
    border-radius: 0;
    font-size: 16px;
    font-family: inherit;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ff8c42' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.3s ease;
    color: #333;
    font-weight: 500;
}

/* Select dropdown hover and focus states */
.wpcf7-form-control.wpcf7-select:hover {
    border-color: #ff8c42;
}

.wpcf7-form-control.wpcf7-select:focus {
    outline: none;
    border-color: #ff8c42;
    box-shadow: none;
}

/* Style the submit button */
.wpcf7-form-control.wpcf7-submit {
    background-color: #ff8c42;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 120px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wpcf7-form-control.wpcf7-submit:hover {
    background-color: #e67d3c;
}

.wpcf7-form-control.wpcf7-submit:active {
    background-color: #cc6f35;
}

/* Ensure the submit button paragraph doesn't take flex space */
.search_warp > p:last-child {
    flex: 0 0 auto;
}

/* Spinner styling */
.wpcf7-spinner {
    margin-left: 8px;
}

/* Error state styling */
.wpcf7-form-control.wpcf7-not-valid {
    border-color: #e74c3c;
}

/* Success/validation response */
.wpcf7-response-output {
    margin-top: 15px;
    padding: 12px;
    border-radius: 4px;
    font-weight: 500;
}

.wpcf7-mail-sent-ok {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.wpcf7-validation-errors {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Responsive design */
@media (max-width: 768px) {
    .search_warp {
        flex-direction: column;
        gap: 10px;
    }
    
    .ser_inn {
        width: 100%;
        min-width: auto;
    }
    
    .wpcf7-form-control.wpcf7-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .wpcf7-form-control.wpcf7-submit {
        width: 100%;
        margin-top: 10px;
    }
}

/* Medium screens - 2x2 grid */
@media (max-width: 1024px) and (min-width: 769px) {
    .search_warp {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 15px;
    }
    
    .search_warp > p:last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }
    
    .ser_inn {
        min-width: auto;
    }
}
/* Custom CSS for Go to Top Arrow - Targeting Parent Div */

#ast-scroll-top {
    background-color: #f5821e !important; /* Your desired orange background */
    border-radius: 50% !important; /* Make it a circle */
    /* Adjust width/height as needed to get the right size for the circle */
    width: 40px !important;
    height: 40px !important;
    display: flex !important; /* Use flexbox to center content */
    align-items: center !important; /* Center content vertically */
    justify-content: center !important; /* Center content horizontally */
    box-shadow: none !important; /* Remove any default box-shadow that might create the blue */
    border: none !important; /* Remove any default border */
    /* You might want to remove any default padding if it's causing issues */
    padding: 0 !important;
}

/* Ensure the arrow (SVG) itself is white */
#ast-scroll-top .ast-arrow-svg path {
    fill: #ffffff !important; /* White color for the arrow inside the orange background */
}

/* Optional: Hover effect */
#ast-scroll-top:hover {
    background-color: #e0741c !important; /* Slightly darker orange for hover */
}

/* Ensure the arrow SVG takes up 100% of its containing span, or is sized properly */
.ast-icon.icon-arrow {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.scroll-karigars .jet-listing-grid {
    max-height: 700px;
    overflow: hidden;
    overflow-y: scroll;
}


/* For Webkit browsers (Chrome, Safari, Edge) */
.scroll-karigars .jet-listing-grid::-webkit-scrollbar {
    width: 5px; /* Adjust this value for the scrollbar width */
}

.scroll-karigars .jet-listing-grid::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color of the scrollbar track */
}

.scroll-karigars .jet-listing-grid::-webkit-scrollbar-thumb {
    background-color: #ff914d; /* Your brand color for the scrollbar handle */
    border-radius: 5px;
}

/* For Firefox */
.scroll-karigars .jet-listing-grid {
    scrollbar-width: thin; /* Adjust to auto, thin, or none */
    scrollbar-color: #ff914d #f1f1f1; /* Handle color then Track color */
}





/* Initial position of the form container */
.workshop-form-slide-in {
    position: fixed;
    top: 0;
    right: -100%; /* Hides the container off-screen */
    width: 400px; /* Set a specific width */
    height: 100vh;
    background-color: #fff;
    padding: 20px;
    z-index: 100;
    transition: right 0.5s ease-in-out;
    box-shadow: -5px 0 10px rgba(0,0,0,0.1);
}
/* Active state to slide the form in */
.workshop-form-slide-in.active {
    right: 0;
}


.vertical-register-button {
    /* Position the button on the right side */
    position: fixed;
    right: 0;
    top: 50%; /* Center the button vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
    
    /* Make the text vertical */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    
    /* Ensure it's on top of other content */
    z-index: 99;
    
    /* Add some padding and styling for better appearance */
    padding: 20px 10px;
}

/* Style the button's text and background */
.vertical-register-button a.elementor-button {
    white-space: nowrap; /* Prevent text from wrapping */
    font-size: 16px;
    /* You can add more styling here like background-color, border, etc. */
}

@media and screen(max-height: 767px){
    .home-hero-slider {
        min-height: 200px !important;
    }
    .home-hero-slider .swiper-wrapper{
        min-height: 200px !important;
    }
    .home-hero-slider .swiper-wrapper .swiper-slide .elementor-background-slideshow__slide__image {
        padding: 20px !important;
        background-repeat: no-repeat !important;
        background-size: cover;
        min-height: 200px !important;
    }
    .home-hero-slider .e-con-inner{
        min-height: 160px;
        padding-right: 50px;
        padding-top: 30px;
        padding-left: 50px;
    }
    .home-hero-slider .e-con-inner>.elementor-element-233b760 p{
        padding-bottom: 0 !important;
    }
    .home-our-story .e-con-inner>#2994b6b {
        background: none !important;
    }
     .home-hero-slider1 {
        min-height: 200px !important;
    }

    .home-hero-slider1>.element-f75df59 {
        padding: 20px !important;
        background-repeat: no-repeat !important;
        background-size: cover;
        min-height: 200px !important;
    }
}

.orangeColor{
    color: #f58220;
}

/* Correct Aspect Ratio Fix for SELF-HOSTED 616x864 Video */

/* 1. Define the container's proportions using the padding trick */
.my-custom-ratio-video .elementor-wrapper {
    /* Use the HEIGHT/WIDTH ratio: 864 / 616 = 1.4026 */
    aspect-ratio: 1.4026 !important; 
    padding-bottom: 140.26% !important;
    
    /* Crucial properties for the trick to work */
    position: relative !important; 
    height: 0 !important; 
    overflow: hidden !important;
}

/* 2. Target the actual HTML5 video element inside the container */
.my-custom-ratio-video .elementor-wrapper video {
    /* Force the video player to fill the calculated container exactly */
    position: absolute !important;
    top: 0 !important;
    left: -24.5% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* 3. Cleanup: Ensure the main widget container doesn't conflict */
.my-custom-ratio-video .elementor-widget-container {
    height: auto !important;
}


.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay {
    background-position: left top !important;
    background-size: contain !important;
    inset: 0;
    position: absolute;
    background-repeat: no-repeat;
}


.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay .elementor-custom-embed-play {
    left: 25%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hfe-nav-menu{
    --breakpoint: 9999px;
}


/* Custom styling for the Post Comment button */
.paramparik-comments #submit {
    background-color: #F58220 !important;
    color: #ffffff !important; /* Sets text color to white for contrast */
    border-color: #F58220 !important; /* Ensures the border matches the background */
    transition: background-color 0.3s ease; /* Optional: adds a smooth transition */
}

/* Optional: Style for when the user hovers over the button */
.paramparik-comments #submit:hover {
    background-color: #d16b1c !important; /* A slightly darker orange for feedback */
    border-color: #d16b1c !important;
}

.paramparik-comments .logged-in-as a {
    color: #F58220 !important;
}

.paramparik-comments .logged-in-as a:hover {
    color: #d16b1c !important;
}