/**
Theme Name: The Agony Room
Author: Najubudeen
Author URI: https://www.najubudeen.info
Description: A powerful and modern child theme for \"The Agony Room\" gym and fitness center website. Built on the lightweight Astra framework, this theme is designed to showcase class schedules, trainer profiles, and inspire peak performance for all fitness enthusiasts.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-agony-room
Template: astra
*/

/* Custom CSS to change WhatsApp SVG icon color */

.elementor-button-icon svg path {
    fill: #25D366 !important; /* Replace with your desired color */
}

.elementor-button:hover .elementor-button-icon svg path {
    fill: #25D366 !important; /* Replace with your desired hover color */
}
.explore-courses .elementor-button-icon svg path {
    fill: #5C5C5C !important; /* Replace with your desired color */
}
.explore-courses .elementor-button:hover .elementor-button-icon svg path {
    fill: #ff1111 !important; /* Replace with your desired hover color */
}
.read-more-btn .elementor-button-icon svg path {
    fill: #ff1111 !important; /* Replace with your desired color */
}
.read-more-btn .elementor-button:hover .elementor-button-icon svg path {
    fill: #FF8032 !important; /* Replace with your desired hover color */
}
/* Applies sticky effect to screens 768px and wider (Tablet and Desktop) */
@media only screen and (min-width: 768px) {
    #gym-header-nav-wrapper {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
    }
}

.calendar-batches{
    position: absolute;
    top: 20px;
    right: 20px;
}

.mf-radio-option label,.mf-radio-option label span{
    color: #5C5C5C !important; /* Change #000000 to your desired color */
    font-weight: lighter !important; /* Optional: Make the text lighter */
}
/* Contact Form 7 */
/* Style for all input fields (text, email, tel) and select dropdown */
.wpcf7-form-control:not([type="submit"]) {
    width: 100%;             /* Sets the width to 100% */
    border-radius: 20px;     /* Sets the border radius to 20px */
    box-sizing: border-box;  /* Ensures padding/border are included in the 100% width */
    padding: 10px;           /* Optional: Add some padding inside the fields */
    margin-bottom: 15px;     /* Optional: Add space between fields */
     margin-top: 8px !important;
}

/* Specific styling for the submit button (optional) */
.wpcf7-form-control.wpcf7-submit {
    background-color: #FF3B30 !important; /* Added !important to force the style */
    color: white !important;                        /* Ensure text is visible */
    border-radius: 20px;                 /* Adds the border radius */
    padding: 10px 20px;                  /* Optional: adds padding */
}
.wpcf7-form-control.wpcf7-submit:hover{
    background-color: #232323 !important; /* Darker shade on hover */
}
.wpcf7 label {
    color: #c0c0c0 !important; /* Change label color to desired shade */
    font-weight: bold;         /* Optional: Make them bold */
    display: block;            /* Optional: Ensure they are on their own line */
    margin-bottom: 5px;        /* Optional: Add space below the label text */
    font-weight: normal;
}

.wpcf7-select {
    width: 100%;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 8px !important;
    color: #5C5C5C; /* Default text color for all options */
}
.wpcf7-submit {
    display: block;      /* Makes the button a block element so margins can center/align it */
    margin-left: auto;   /* Pushes the button all the way to the right edge */
    /* Keep your existing styles for appearance: */
    
}
/* style for blog post */
.hfe-posts-grid .hfe-post-image img {
    /* Set top-left and top-right radii to 20px; bottom corners remain 0 */
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    
    object-fit: cover !important;
    width: 100%;
    height: 100%;
}

/* Target the parent container to clip the overflow with top-only radius */
.hfe-posts-grid .hfe-post-image {
    /* Match the radius on the parent container */
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;

    overflow: hidden !important;
}




/* Align the read more link to the right within its existing container */
.hfe-posts-grid .hfe-post-content {
    /* Remove previous flex properties that caused issues */
    /* display: block; is default behavior so you don't need to write it */
    /* Ensure the padding or margin around the content allows space for alignment */
    padding: 15px; /* Adjust padding as needed for your design */
}

/* Float the link right or use text-align on its wrapper */
.hfe-posts-grid .hfe-read-more {
    display: block; /* Make the link a block element so text-align can work on its parent */
    text-align: right; /* Not necessary if you use the next rule but good practice */
}

/* Use this on the container wrapping the link to push the text inside it to the right */
.hfe-posts-grid .hfe-post-excerpt + .hfe-read-more,
.hfe-posts-grid .hfe-post-content > .hfe-read-more:last-child {
    width: 100%; /* Ensure the link wrapper takes full width to align text right */
    text-align: right; /* Pushes the text to the right edge */
    margin-top: 10px; /* Add some space between excerpt and link */
}

/* custom styles for contact from 7 .................................................................*/


#gym-row .form-column>p{
    margin-bottom: 0px; /* Adjust as needed for spacing between rows */
}
#gym-radio .form-column-radio>p,#gym-radio .form-column-radio>p>span, .form-column-radio>p span{
    margin-bottom: 0px; /* Adjust as needed for spacing between rows */
    color: #c0c0c0;
}
/* Container for the top three fields */
.form-row {
    display: flex;
    justify-content: space-between;
    gap: 15px; 
    /* margin-bottom: 20px; */
}

/* Individual columns for First Name, Email, Mobile */
.form-column {
    flex: 1; /* Distributes space equally */
}

/* Container for the experience level radio buttons */
.form-row-radio {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

/* Columns for the radio buttons */
.form-column-radio {
    flex: 1; /* Distributes space equally */
}

/* Style all input fields, select, and textarea to be full width within their columns */
.form-column input,
.form-column input[type="email"],
.form-column input[type="tel"],
select,
textarea {
    width: 100%;
    box-sizing: border-box; /* Ensures padding and border are included in width */
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid #ccc; /* Adds the border style visible in the image */
    border-radius: 20px; /* Optional: adds rounded corners */
}

/* Ensure radios are vertically stacked within their columns */
.form-column-radio span {
    display: inline-block;
    margin-bottom: 10px; /* Adds spacing between radio options */
}
.wpcf7 form>div, .wpcf7 form>p {
    margin-bottom: 0px;
}

.wpcf7 input[type=radio] {
    margin-top: 0px !important;
    margin-right: 10px !important;
    border: 1px solid #c0c0c0 !important;
;
}
#gym-terms{
    color: #c0c0c0;
}

#hfe-promo-notice {
    display: none !important; /* Hides the promotional notice */
}
/* Fluent Form.. */
.gym-experience-level span{
    color: #7A7A7A !important;
}
.gym-terms span{
    color: #7A7A7A !important;
}