/* Fonts */

@import "et-line.css";
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Raleway:wght@300;400;700&display=swap");

/* Common */

* {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    font-family: Lato, sans-serif;
    font-weight: 300;
    color: #777;
}

html {
   scroll-behavior: smooth;
}

.section {
    width: 100%;
    margin: 0 auto;
    display: block;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    box-sizing: border-box;
    padding: 100px 0px;
}

.small-section {
    width: 100%;
    margin: 0 auto;
    display: block;
    position: relative;
    overflow: hidden;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    box-sizing: border-box;
}

.container {
    width: 70%;
    margin: auto;
}

.reviews-container {
    display: grid;
    align-content: center;
    justify-content: center;
    margin: auto;
    z-index: 0;
}

.form-container {
    margin: auto;
    width: 100%;
}

.column-container {
    margin: auto;
    overflow: auto;
}

.column {
    width: 70%;
    margin: auto;
}

.strong {
    font-weight: 700;
}

.hidden {
    display: none;
}

.transparent {
    opacity: 0;
    transition:opacity 0.5s ease-in-out;
}

.push {
    margin-left: auto;
}

/* Headings */

h1,
h2,
h3 {
    font-family: Raleway, sans-serif;
    text-transform: uppercase;
}

/* Navigation Bar and Logo */

#nav-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 8px 12px;          /* less padding on small screens */
    flex-wrap: wrap; 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    transition: 0.5s ease-in-out;
    background: #2e753ba2;
    font-size: large;
}

#nav-bar.scroll {
    background: #2e753b;
    box-shadow: 0px 10px 30px rgba(37, 37, 49, 0.932);
    transition: 0.5s ease-in-out;
}

#nav-menu {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav-menu > li {
    overflow: hidden;
    padding: 10px 15px;
    margin-right: 30px;
    z-index: inherit;
}

#nav-toggle {
    display: none;
}

.nav-link {
    text-decoration: none;
    color: #ffffff;
    font-size: 100%;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.3;
    transition: 0.3s ease-in-out;
    font-weight: 800;      
}

.nav-link:hover,
.nav-link.active {
    color: #a1a1a1;
    transition: 0.3s ease-in-out;
    font-weight: 700;
}

.nav-link:not(:hover),
.nav-link:not(:active) {
    transition: 0.3s ease-in-out;
}

.mobile-nav-link,
.nav-link.black {
    position: relative;
    transition: 0.3s ease-in-out;
    display: inline-block;
    color: #696969;
}

.mobile-nav-link.active,
.nav-link.black.active {
    color: #000;
    transition: 0.3s ease-in-out;
}

.underlined {
    border-bottom: 1px solid #2e753b;
    color: #000000;
    padding-bottom: 3px;
    transition: 0.3s ease-in-out;
}


/* ===== Mobile override: show full desktop nav on small screens ===== */
@media (max-width: 900px) {
  /* 1) Show the menu list even if it's using [hidden] / off-canvas tricks */
      #logo {
    flex: 0 0 auto;
  }
  #logo img {
    height: clamp(28px, 6vw, 40px);
    width: auto;
  }

  #nav-menu,
  nav .menu,
  #primary-nav {
    display: flex !important;
    margin-left: auto;            /* push to right */
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: clamp(6px, 2vw, 14px);   /* fluid spacing between items */
  }
  /* Fallback if iOS ignores flex gap */
  @supports not (gap: 8px) {
    #nav-menu > li + li { margin-left: clamp(6px, 2vw, 14px); }
  }
  /* 2) Make the items flow horizontally, readable & tappable */
  #nav-menu > li {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
  }
#nav-menu > li + li { margin-left: 10px; }

/* Link sizing so they fit in one row */
#nav-menu a.nav-link {
  display: inline-block;
  white-space: nowrap;          /* avoid wrapping mid-word */
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  line-height: 1.2;
  padding: 6px 8px;
  font-weight: 700;             /* keep that bolder look */
}

    #nav-bar.scroll {
    background: #2e753b;

    box-shadow: 0px 10px 30px rgba(37, 37, 49, 0.932);
    transition: 0.5s ease-in-out;
    }

  /* 4) Keep the bar layout sane: logo left, links right, allow wrap */
  #nav-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* logo left, menu pushed right */
    flex-wrap: nowrap;
    padding: clamp(6px, 2vw, 12px) clamp(10px, 3vw, 16px);
  }

  /* 5) If you had an off-canvas mobile container, neutralize it */
  #mobile-nav {
    position: static !important;
    height: auto !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Optional tiny phones: tighten spacing a touch */

/* 
Top Pictures Format Section Start

This section defines the styles for all the top images across different pages of the website (home, services, reviews, contact). 
Each page has its own unique ID (#idris-image, #idris-image-small-ser, #idris-image-small-rev, #idris-image-small-con), but all share similar formatting. 
The images use a linear gradient overlay for better text readability and are styled to be responsive for various screen sizes using media queries.

Additionally:
- The #idris-logo styles format the logo and associated text/button for the home page.
- The #textlocation styles ensure that text is perfectly centered on the respective top images of each page.
*/

/* Top Pictures Format Section End */


/* home page top pic Section */
/* Base styles for larger devices (desktop/laptop) */
#idris-image {
    height: 100dvh; /* Full viewport height */
    width: 100%; /* Full width */
    background: linear-gradient(rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3)), 
                url("../images/idris-images/homepage.webp") no-repeat center center;
    background-size: cover; /* Ensures the image covers the container */
    background-attachment: scroll; /* Better performance on mobile (change from 'fixed') */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents repetition of the image */
    z-index: -5;
    
  }

/* For devices with very small height, reduce to 60vh to avoid abrupt cropping */
@media (max-height: 600px) {
  #idris-image {
    height: 100vh;
  }
}

/* For tablets and mobile screens */
@media (max-width: 768px) {
  #idris-image {
    background-attachment: scroll; /* Better performance on mobile */
    background-position: top;      /* Adjust focus for smaller screens if needed */
    height: auto;              /* Allows height to adjust based on content */
    min-height: 100vh;             /* Ensures the section still has a decent height */
  }
}

/*idris logo pic and writing under with button format*/
  #idris-logo img {
    width: 50%; /* Adjust logo size */
    position: absolute; /* Places it relative to the nearest positioned parent */
    top: 48%; /* Centers vertically */
    left: 50%; /* Centers horizontally */
    transform: translate(-50%, -50%); /* Ensures perfect centering */
    
}
#idris-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 35%, rgba(0,0,0,0) 70%);
  z-index: -1;
  pointer-events: none;
}


#idris-logo h1 {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, 0);

  /* keep one line but don't clip */
  white-space: nowrap;
  overflow: visible;         /* was hidden */
  text-overflow: clip;       /* was ellipsis */

  /* fluid sizing (desktop/tablet defaults) */
  font-size: clamp(1.0rem, 4.0vw, 2.2rem);

  font-weight: 700;
  text-transform: uppercase;
  color: #cccccc;
  width: auto;
  max-width: 96vw;           /* safety so it never exceeds viewport */
  text-align: center;
}
@media (min-width: 900px) {
  #idris-logo h1 {
    font-size: clamp(1.1rem, 2.6vw, 1.8rem); /* smaller max + gentler scale */
    letter-spacing: clamp(0.2px, 0.35vw, 1px);
  }
}

#idris-logo > .button {
    position: absolute;
    top: 65%; /* Adjust this value to position it under the <h1> */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, 0); /* Ensures horizontal centering */
    margin-top: 10px; /* Optional: Adds space between the <h1> and button */
    padding: 10px 20px; /* Button size */
    color: #cccccc; /* Button text color */
    background-color: transparent; /* Button background color */
    border: 2px solid #cccccc; /* Grey border */
    border-radius: 10px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Proper sizing */
    transition: all 0.3s ease; /* Smooth hover effect */
}

#idris-logo > a.button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  /* --- fluid sizing --- */
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);          /* text scales with viewport */
  letter-spacing: clamp(0.4px, 0.25vw, 1.2px);       /* modest tracking */
  padding: clamp(8px, 1.1vw, 12px) clamp(14px, 2vw, 22px); /* vertical / horizontal */
  border-width: clamp(1.5px, 0.25vw, 2.5px);         /* border scales */
  border-radius: clamp(8px, 1.2vw, 12px);    
  white-space: nowrap;                      /* don't wrap the text */
        /* rounded corners scale */

  /* colors */
  color: #ccc;
  background: transparent;
  border-style: solid;
  border-color: currentColor;                         /* matches text color */

  text-decoration: none;
  display: inline-block;
  transition: color .2s ease, border-color .2s ease, transform .15s ease;
}

/* First button sits where the old one was */
#idris-logo > a.button:first-of-type {
  top: 65%;
}

/* Second button sits underneath; tweak +60px to your taste */
#idris-logo > a.button:nth-of-type(2) {
  top: calc(65% + 55px);
}

/*services page top image*/
#idris-image-small-ser {
    position: relative;
    height: 100vh; /* Full viewport height */
    width: 100%; /* Full width */
    overflow: hidden; /* Ensures video doesn't overflow */
    z-index: 0;
}

#idris-image-small-ser video {
    position: absolute;
    top: 50%; /* Center the video vertically */
    left: 50%; /* Center the video horizontally */
    transform: translate(-50%, -50%); /* Center the video exactly */
    width: 100%; /* Make the video full width */
    height: 100%; /* Make the video full height */
    object-fit: cover; /* Ensure video covers the container without distortion */
    z-index: -1; /* Place the video behind content */
}

  
  /* Adjust for smaller screen heights */
  @media (max-height: 600px) {
    #idris-image-small-ser {
      height: 80vh; /* Adjusts height for short screens */
    }
  }
  
  /* Adjust for smaller devices */
  @media (max-width: 768px) {
    #idris-image-small-ser {
      background-attachment: scroll; /* Prevents fixed issues on mobile */
      background-position: center; /* Centers the focus area for smaller screens */
    }
  }

  /*reviews page top image*/
  #idris-image-small-rev {
    position: relative;
    height: 100vh; /* Full viewport height */
    width: 100%; /* Full width */
    overflow: hidden; /* Ensures video doesn't overflow */
    z-index: 0;
}

  #idris-image-small-rev video {
    position: absolute;
    top: 50%; /* Center the video vertically */
    left: 50%; /* Center the video horizontally */
    transform: translate(-50%, -50%); /* Center the video exactly */
    width: 100%; /* Make the video full width */
    height: 100%; /* Make the video full height */
    object-fit: cover; /* Ensure video covers the container without distortion */
    z-index: -1; /* Place the video behind content */
}

  
  /* Adjust for smaller screen heights */
  @media (max-height: 600px) {
    #idris-image-small-rev {
      height: 80vh; /* Adjusts height for short screens */
    }
  }
  
  /* Adjust for smaller devices */
  @media (max-width: 768px) {
    #idris-image-small-rev {
      background-attachment: scroll; /* Prevents fixed issues on mobile */
      background-position: center; /* Centers the focus area for smaller screens */
    }
  }

  /*contact page top image*/
#idris-image-small-con {
    position: relative;
    height: 100vh; /* Full viewport height */
    width: 100%; /* Full width */
    overflow: hidden; /* Ensures video doesn't overflow */
    z-index: 0;
}

#idris-image-small-con video {
    position: absolute;
    top: 50%; /* Center the video vertically */
    left: 50%; /* Center the video horizontally */
    transform: translate(-50%, -50%); /* Center the video exactly */
    width: 100%; /* Make the video full width */
    height: 100%; /* Make the video full height */
    object-fit: cover; /* Ensure video covers the container without distortion */
    z-index: -1; /* Place the video behind content */
}


  
  /* Adjust for smaller screen heights */
  @media (max-height: 600px) {
    #idris-image-small-con {
      height: 80vh; /* Adjusts height for short screens */
    }
  }
  
  /* Adjust for smaller devices */
  @media (max-width: 768px) {
    #idris-image-small-con {
      background-attachment: scroll; /* Prevents fixed issues on mobile */
      background-position: center; /* Centers the focus area for smaller screens */
    }
  }

/* text format for header on page*/
  #textlocation {
    position: absolute; /* Position it relative to the #idris-image-small-ser */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Ensure perfect centering */
    width: 100%; /* Span full width for responsive alignment */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    text-align: center; /* Center text inside the container */
    flex-direction: column; /* Stack multiple elements vertically */
    z-index: 1; /* Place above the background image */
    color: white; /* Ensure text is visible on a dark background */
    padding: 20px; /* Add padding for better spacing */
    box-sizing: border-box; /* Include padding in element dimensions */
}

#textlocation h1{
    font-size: 2.8rem;
    font-weight: bold;
    font-family: Lato, sans-serif;
    z-index: 1;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
    #textlocation {
        top: 45%; /* Slight adjustment for smaller screens */
        transform: translate(-50%, -45%); /* Adjust centering */
        padding: 10px; /* Reduce padding on smaller screens */
    }
}

@media (max-height: 600px) {
    #textlocation {
        top: 50%; /* Ensure vertical centering on short screens */
        transform: translate(-50%, -50%);
    }
}

/* 
This section ensures consistent formatting for all top images and header text across the website. 
By separating styles for different pages and maintaining responsiveness through media queries, the section achieves a cohesive design 
that adapts well to all devices and screen sizes. The centered text adds a professional touch while improving user readability. 
*/


/* 
About Idris Section

This section styles the "About Idris" section on the homepage. It provides a clean and centered layout for text, a bullet-point list of qualifications, and a call-to-action button. 

Key Elements:
- `#about-idris`: The main container for the section, styled with a light background color and centered alignment.
- `h2`: The heading for the section, with larger text, uppercase styling, and spacing for emphasis.
- `p`: The paragraph text, limited in width for readability and styled with line spacing for better legibility.
- `ul`: The unordered list for displaying bullet points (e.g., certifications and qualifications), aligned to the left with proper padding and spacing.
- `.about-idris-button`: The call-to-action button, styled with a transparent background, rounded edges, and hover effects for better interactivity.
*/

/* About Idris Section End */


/* About Idris Section */
#about-idris {
    text-align: center; /* Centers all text and elements */
    background-color: #fffefe;
    padding: 20px 20px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  #about-idris h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  
  #about-idris p {
    font-size: 1.1rem;
    font-weight: 800;
    color: #646363;
    line-height: 1.8; /* Improves readability with better line spacing */
    margin: 0 auto 30px; /* Centers paragraph and adds space below */
    max-width: 600px; /* Restricts width for better readability */
  }
  
  #about-idris ul {
    list-style: disc; /* Adds default bullet points */
    display: inline-block; /* Centers the list */
    padding-left: 1.5rem; /* Increases spacing for the bullet points */
    margin: 16px auto 50px; /* Centers the list */
    max-width: 500px; /* Limits the width for consistency */
    text-align: left; /* Aligns list items to the left */
  }
  
  #about-idris ul li {
    font-size: 1rem;
    font-weight: 400;
    color: #444;
    margin: px 0; /* Adds a bit more space between items */
    line-height: 1.8; /* Slightly increases spacing for readability */
  }
  
  .about-idris-button {
    display: inline-block;
    font-size: 1rem; /* Adjust text size */
    color: rgb(100, 98, 98); /* Text color */
    background-color: transparent; /* Transparent background */
    border: 2px solid rgb(100, 99, 99); /* Border color and thickness */
    text-transform: uppercase; /* Uppercase text */
    text-decoration: none; /* Remove underline */
    padding: 10px 20px; /* Spacing inside the button */
    border-radius: 25px; /* Rounded edges */
    text-align: center; /* Center text */
    transition: all 0.3s ease; /* Smooth hover effect */
  }
  
  .about-idris-button:hover {
    color: #ffffff;
    background-color: #807f7f;
    border-color: #ffffff;
    transform: translateY(-3px); /* Slight lift effect */
  }
  .about-idris-photo {
  justify-self: center;
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 50%;              /* circle headshot */
  border: 2px solid #2e753b;       /* matches your green accent */
  display: block;
}


/* Mobile: ensure true centering (Safari-safe) and reasonable size */
@media (max-width: 768px) {
  .container.coaches .coach {
    display: grid;
    grid-template-columns: 1fr;   /* stack image over text */
    justify-items: center;        /* center grid children */
    text-align: center;
  }

  .about-idris-photo {
    margin: 0 auto;               /* centers even if grid fallback */
    justify-self: center;         /* grid centering */
    width: 200px;                 /* smaller on phones */
    height: 200px;
  }
}

/* 
This section is featured on the homepage and provides information about Idris' expertise and services. 
It ensures responsive and visually appealing formatting for text, lists, and the call-to-action button, adapting seamlessly across devices. 
The button's hover effects enhance interactivity, making it inviting for users to engage with the content. 
*/



/* 
Column Adjustment and Button Styles

This section provides styles for layout adjustments in a three-column structure (`#column-left`, `#column-center`, `#column-right`) and button designs used across the website. 

Key Elements:
- `#column-left`, `#column-center`, `#column-right`: Define the layout for a three-column design with appropriate spacing and padding for elements like headings and paragraphs.
- Headings (`h3`): Styled with spacing and letter-spacing for readability and emphasis within columns.
- Paragraphs (`p`): Text is left-aligned, with line height and font size optimized for clarity.

Button Styles:
- `.button`: A light, transparent button with hover effects that change the text and background color.
- `.button-dark`: A darker button style with hover effects that slightly change the background shade for interactivity.
- `button`: Sets a cursor pointer to indicate buttons are clickable.

Icon Styles:
- `.features-icon`: Provides consistent sizing and color for icons, ensuring visual clarity in feature lists or UI elements.
*/

/* End of Column Adjustment and Button Styles */



/*column adjustment*/
#column-left {
    float: left;
    width: 33.33%;
    padding-right: 24px;
    box-sizing: border-box;
}

#column-right {
    float: right;
    width: 33.33%;
    padding-left: 24px;
    box-sizing: border-box;
}

#column-center {
    display: inline-block;
    width: 33.33%;
    padding: 0 24px 0 24px;
    box-sizing: border-box;
}

#column-left > h3,
#column-center > h3,
#column-right > h3 {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 3px;
}

#column-left > p,
#column-center > p,
#column-right > p {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    text-align: left;
}

/* Buttons */

button {
  cursor: pointer;
}

.button,
.button > a {
    display: inline-block;
    color: #dcdcdc;
    background: transparent;
    padding: 13px 44px;
    border: 2px solid #dcdcdc;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 30px;
    box-sizing: border-box;
}

.button:hover,
.button:focus {
    color: #111;
    background: #fff;
    transition: 0.5s ease-in-out;
}

.button:not(:hover),
.button:not(:focus) {
    transition: 0.5s ease-in-out;
}

.button-dark,
.button-dark > a {
    display: inline-block;
    color: #fff;
    background: #424242;
    padding: 13px 44px;
    border: 2px solid transparent;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0px;
    box-sizing: border-box;
}

.button-dark:hover,
.button-dark:focus {
    color: #fff;
    background: #848484;
    transition: 0.5s ease-in-out;
}

.button-dark:not(:hover),
.button-dark:not(:focus) {
    transition: 0.5s ease-in-out;
}

/* Et-Line Icons */

.features-icon {
    font-size: 48px;
    line-height: 1.3;
    color: #111;
}
/* 
This section focuses on creating a structured three-column layout for content and providing reusable button styles for consistent interactivity across the website. 
Icon styles add visual enhancement where needed. Any unused styles (e.g., column-specific styles or button variations) can be safely removed after verifying their use across the project. 
*/




/* 
Contact Us Section (Get in Touch with Idris)

This section styles the "Get in Touch with Idris" area on the homepage. It uses a visually appealing background image with a gradient overlay to enhance readability while maintaining a professional look.

Key Elements:
- `#contact-us`: The main container for the section, styled with a full-width background, padding, and responsive adjustments for smaller screens and shorter heights.
- Media Queries:
  - Adjust padding and focus for smaller devices (`max-width: 768px`).
  - Optimize layout for screens with limited height (`max-height: 600px`).
- Nested Content:
  - Heading (`h2`): Styled with a subdued color, centered alignment, and uppercase letter spacing for emphasis.
  - Paragraph (`p`): Provides clear and readable text with line-height and alignment for uniformity.
  - Call-to-action Element (`#end-trial`): Adds spacing to create separation and focus for the call-to-action.

The section is responsive and ensures the layout adapts well to all devices while maintaining its aesthetic and functional purpose.
*/

/* Contact Us Section */
#contact-us {
    display: flex;
    padding: 100px 50px;
    text-align: center;
    background-color: #111; /* Fallback solid color */
    background: linear-gradient(rgba(34, 34, 34, 0.8), rgba(34, 34, 34, 0.8)), 
                url("../images/coaching1.webp") no-repeat center center;
    background-size: cover; /* Ensures the image covers the entire container */
    background-attachment: scroll; /* Better performance on mobile (change from 'fixed') */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents repetition of the image */
  }
  
  /* Adjust for smaller devices */
  @media (max-width: 768px) {
    #contact-us {
      padding: 50px 20px; /* Reduce padding for smaller screens */
      background-attachment: scroll; /* Prevent jankiness on mobile */
      background-position: top; /* Adjust focus for smaller screens */
    }
  }
  
  /* Adjust for smaller screen heights */
  @media (max-height: 600px) {
    #contact-us {
      padding: 50px 20px; /* Adjust padding for shorter screens */
    }
  }

#contact-us > .container > h2 {
    margin-bottom: 50px;
    color: #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 5px;
}

#contact-us > .container > p {
    margin-bottom: 25px;
    color: #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
}

#contact-us > .container > #end-trial {
  margin-bottom: 50px;
}
/* 
This section contributes to the homepage's "Get in Touch with Idris" area. 
It is designed to invite users to engage, with responsive features that enhance usability across various devices. 
The gradient overlay ensures text remains legible while complementing the background image. 
Remove or adjust unused nested elements (`h2`, `p`, `#end-trial`) after verifying their usage. 
*/





/* 
Coaching Services Section

This section styles the "Explore Our Services" section on the services page, showcasing different coaching options (e.g., Stretch Therapy, Personal Training, Online Programs).

Key Elements:
- `#coaching-services`: Main container for the section with centered alignment.
- `#coaching-comparisons`: Organizes the three coaching types into left, center, and right columns with proper padding and alignment.
- `.coaching-type-inner`: Adds styling and hover effects to individual coaching cards for an interactive user experience.
- `.coaching-list`: Lists the features of each coaching service with consistent spacing and text formatting.
- `.coaching-button`: Provides a call-to-action button for each coaching card with hover effects.

Tabs for Service Navigation:
- `#coaching-comparison-tabs`: Styles the background and alignment for the service navigation tabs.
- `.nav-tabs`: Styles the tabs for navigation, including hover and active states for interactivity.

This section ensures a clean and interactive layout for users to explore and compare the different coaching services offered.
*/

/* Coaching Services */

#coaching-services {
    text-align: center;
}

#coaching-services > .column-container > h1 {
    color: #777;
    margin-bottom: 100px;
    font-size: 280%;
    letter-spacing: 10px;
    font-weight: 400;
}

#coaching-services > .column-container > .text-title {
    margin: 0 200px 50px 200px;
    color: #595959;
    display: flex;
    text-transform: none;
    font-family: Lato, sans-serif;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 300;
    letter-spacing: 0;
}

#coaching-comparisons {
    padding: 0 24px;
}

.coaching-left {
    float: left;
    width: 33.33%;
    padding-right: 12px;
    box-sizing: border-box;
}

.coaching-right {
    float: right;
    width: 33.33%;
    padding-left: 12px;
    box-sizing: border-box;
}

.coaching-center {
    display: inline-block;
    width: 33.33%;
    padding: 0 12px 0 12px;
    box-sizing: border-box;
}

.coaching-type {
    margin: 0 0 30px;
    position: relative;
}

.coaching-type-inner {
    border: 1px solid #E1E1E1;
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.coaching-type-inner:hover {
    border-color: #a7a7a7;
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.coaching-wrap {
    position: relative;
    box-sizing: border-box;
    padding: 30px 20px;
    overflow: hidden;
}

.coaching-icon {
    padding: 10px 0 10px 0;
    position: relative;
    font-size: 32px;
    z-index: 1;
    color: #3C3C3C;
}

.coaching-title {
    position: relative;
    margin-bottom: 40px;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: 1;
    color: #111;
    font-family: Raleway;
}

.coaching-features {
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.coaching-list {
    margin: 0 -20px 19px;
    padding: 0;
    color: #8F8F8F;
    font-size: 12.5px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: Raleway;
    line-height: 20px;
}

.coaching-list li:first-child {
    border-top: 1px solid #f1f1f1;
}

.coaching-list li {
    padding: 12px 20px;
    list-style: none;
    border-bottom: 1px solid #f1f1f1;
    letter-spacing: 2px;
}

/*.coaching-button {
    margin: 30px -20px 0;
    padding-top: 30px;
    border-top: 1px solid #fffdfd;
}*/

.coaching-button .button-dark {
    font-size: 11px;
    padding: 7.5px 21px;
}


.serv-type {
    font-size: 20px;
    font-weight: 300;
    padding-bottom: 5px;
    color: #3C3C3C;
}

.sub-serv-type {
    font-weight: 300;
    line-height: 1;
    
    color: #8F8F8F;
    font-size: 14px;
}

#stretch,
#Personal-tr,
#online {
    padding: 35px 24px 0px 24px;
    text-align: left;
    overflow: auto;
}

.tab-content {
  overflow: auto;
}

.coaching-description p {
    margin-bottom: 25px;
    display: flex;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    color: #ccc;
}

.coaching-description p:last-child {
  margin-bottom: 0;
}

.coaching-description ul {
    list-style-position: inside;
    display: flex;
    text-align: left;
    flex-direction: column;
    justify-content: left;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    gap: 25px;
    color: #ccc;
}

.coaching-description h3 {
    margin-bottom: 25px;
    display: flex;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 300;
    text-transform: none;
    color: #ccc;
}

#coaching-comparison-tabs {
  text-align: center;
  background-color: #111;
  background: linear-gradient(rgba(34, 34, 34, 0.97), rgba(34, 34, 34, 0.97)), url("../images/contact-us.webp") no-repeat center center;
  background-size: cover;
}

.tabs {
    text-align: center;
}

.tabs h2 {
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.5em;
  line-height: 1.4;
  margin-bottom: 50px;
  color: #ccc;
}

.nav-tabs {
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    border: none;
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    color: #fff;
    box-sizing: border-box;
    margin-bottom: -1px;
    border: 1px solid #fff transparent;
}

.nav-tabs > li > a {
    padding: .5rem 1rem;
    text-decoration: none;
    border-radius: 20px;
    color: #fff;
    background: none;
    border: 1px solid transparent;
    border-radius: 20px;
    box-sizing: border-box;
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.nav-tabs > li > a:hover {
    background: none;
    border-color: #ccc;
    color: #fff;
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.tab-item {
    display: inline-block;
    padding: 10px 30px;
    margin-bottom: 15px;
}

.tab-pane {
    display: none;
}

.active-tab {
    display: block;
}

.nav-tabs > .tab-item > .active-item {
    border: 1px solid #fff;
    background: none;
    color: #fff;
    cursor: default;
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.nav-tabs > .tab-item > .active-item:hover  {
    color: #ccc;
    border: 1px solid #ccc;
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}


/* reviews */

#reviews {
    display: flex;
    flex-wrap: wrap; /* Wraps images to the next row */
    gap: 50px; /* Space between columns and rows */
    justify-content: center; /* Center the reviews horizontally */
    padding: 16px;
    z-index: 1;

}

#popup-reviews {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    z-index: 1;

}

#popup-reviews img {
    flex: 0 1 calc(50% - 50px); /* Adjust width based on gap */
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    z-index: 1;

}


/* 
Contact Section

This section styles the "Contact Us" and "Free Trial" areas, including forms and informational elements. 
It ensures proper alignment, spacing, and responsiveness for user interaction.

Key Elements:
- `#free-trial`: Main container for the free trial section, with centered text and proper padding for readability.
- `#form-contact`: Styles the contact form, including input fields and submit buttons, ensuring consistent alignment and spacing.
- `#get-in-touch`: Adds a visually appealing background with a gradient overlay for text clarity, along with responsive text alignment.
- Columns (`#contact-item-left`, `#contact-item-center`, `#contact-item-right`): Three-column layout for displaying contact details or icons.

Form Elements:
- Input Fields (`.text-form`, `.email-form`, `.message-form`): Styled for consistency with uppercase text, borders, and focus effects.
- Buttons (`#end-trial`, `#end-call`): Call-to-action elements styled with proper alignment and spacing.

Icons:
- `.contact-icon`: Styles for contact icons, ensuring proper alignment and visual emphasis.

This section provides a clean and professional interface for user interaction and engagement.
*/

/* Contact */

#consultation {
    display: flex;
    padding: 0 50px;
    text-align: center;
}

#consultation > .container > h1 {
    text-align: center;
    color: #777;
    margin-bottom: 100px;
    font-size: 280%;
    letter-spacing: 10px;
    font-weight: 400;
}

#consultation h2 {
    margin-bottom: 50px;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 5px;
}

#form-contact {
    text-align: center;
}

#form-contact > .form-container > form > .required {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 12px;
}

#contact-column {
    width: 70%;
    margin: auto;
    display: grid;
    align-items: center;
    justify-items: center;
}

#get-in-touch {
    padding: 140px 0;
    text-align: left;
    background-color: #111;
    background: linear-gradient(rgba(34, 34, 34, 0.8), rgba(34, 34, 34, 0.8)), url("../images/contact-us.webp") no-repeat center center;
    background-size: cover;
}

#get-in-touch h2 {
    margin-bottom: 50px;
    color: #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 5px;
}
#get-in-touch p {
    margin: 0 auto; /* Center horizontally */
    text-align: center; /* Align text to the center */
    max-width: 600px; /* Optional: Limit width for better readability */
    line-height: 1.6; /* Improve line spacing for readability */
    margin-bottom: 60px;
    color: #dcdcdc;
}

#contact-list {
    text-align: center; /* Center the content */
    margin: 0 auto;
    color: #dcdcdc;
}

#get-in-touch h3 {
    margin-bottom: 25px;
    color: #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 5px;
}

#get-in-touch ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

.contact-item {
    display: flex;
    align-items: center; /* Center align the icon and text vertically */
    justify-content: center; /* Center the whole item horizontally */
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.5;
}

.contact-item .contact-icon {
    width: 27px;
    height: 27px;
    margin-right: 10px; /* Add spacing between the icon and text */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #dcdcdc;
}

.contact-item .contact-icon i {
    position: relative;
    font-size: 16px;
    transform: translateY(0%);
}

.contact-item .contact-icon::before {
    content: "";
    width: 27px;
    height: 27px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #666;
    border-radius: 2px;
    transform: rotate(45deg);
    z-index: 0;
}

.contact-item a {
    color: #dcdcdc;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: #fff; /* Change text color on hover */
}

#form-contact i {
    margin-right: 5px;
}

#consultation > .container > p {
    margin-bottom: 25px;
    display: flex;
    justify-content: left;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
}

#consultation > .container > #end-trial {
    margin-bottom: 50px;
}

#consultation > .container > #end-call {
  margin-bottom: 50px;
  justify-content: center;
}

.start-form {
    margin-bottom: 15px;
}

.end-form {
    margin-bottom: 0px;
}

.block {
    width: 35%;
    font-size: 12px;
    text-transform: uppercase;
    padding-bottom: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    display: block;
    text-align: left;
    margin: auto;
}

#form-contact h2 {
            margin-bottom: 50px;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 5px;
}

.form-shape {
    width: 35%;
    height: 40px;
    padding: 0 15px 0 15px;
    font-size: 11px;
}

.text-form,
.email-form,
.message-form {
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #111;
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    box-shadow: none;
}

#message {
    height: 80px;
    padding: 15px 15px;
    font-size: 12px;
    resize: vertical;
}

.text-form:focus,
.email-form:focus,
.message-form:focus {
    color: #111;
    border-color: #848484;
    box-shadow: 0 0 3px #848484;
    outline: 0;
}


/* Error 404 */

#image-404 {
    height: 100vh;
    width: 100%;
    background: linear-gradient(rgba(34, 34, 34, 0.5), rgba(34, 34, 34, 0.5)), url('../images/idris-images/404.webp') no-repeat center center;
    background-size: cover;
    z-index: 0;
}

#error-404 {
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 0;
}

#error-404 h1 {
    margin-bottom: 10px;
    position: relative;
    text-align: center;
    font-size: 110px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 8px;
    color: #fff;
}

#error-404 h2 {
    margin-bottom: 20px;
    position: relative;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.9);
}

#error-404 h3 {
    margin-bottom: 20px;
    position: relative;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.9);
}



/* Footer */

#footer {
    height: 275px;
    margin: auto 0;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#footer p {
    color: #999;
    padding: 15px 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
}

#social-links ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

#social-links li {
    display: inline;
    font-size: 20px;
    padding: 20px;
    text-decoration: none;
    list-style-type: none;
}

#social-links i {
    color: #777;
    border: 2px solid #777;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    vertical-align: middle;
}

#social-links i:hover {
    color: #111;
    border: 2px solid #111;
    transition: 0.3s ease-in-out;
}

#social-links i:not(:hover),
#social-links i:not(:focus) {
    transition: 0.3s ease-in-out;
}
#footer .company-name {
    font-size: 1em; /* Keep default size for the company name */
    font-weight: bold; /* Optional: Make it bold for emphasis */
  }
  
 #footer .developer-name {
    font-size: 0.1em; /* Make the developer's name smaller */
    color: #777; /* Optional: Lighter color for less emphasis */
    margin-top: 4px; /* Add spacing between the two lines */
  }
  
/* Media Queries */

/* Mobile Menu Queries */

/* @media (max-width: 768px) {

    #nav-menu {
        display: none;
    }

    #nav-bar.scroll {
        box-shadow: none;
    }

    #mobile-nav-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        visibility: visible;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        align-items: center;
        z-index: 9999;
    }

    :root {
        --screen-width: 320px;
    }

    #nav-toggle {
        display: inline-block;
        position: absolute;
        z-index: 9999;
        padding: 0;
        background: transparent;
        outline: 0;
        right: 15px;
        top: 15px;
        cursor: pointer;
        border-radius: 50%;
        transition: background-color 0.15s linear;
        background-color: rgba(0, 0, 0, .5);
    }

    #nav-toggle:hover, #nav-toggle:focus {
        background-color: rgba(0, 0, 0, .5);
    }

    .nav-item {
        opacity: 0;
        list-style: none;
        transition: all 0.3s cubic-bezier(0, 0.995, 0.99, 1) 0.3s;
    }

    .nav-item:nth-child(1) {
        transform: translateY(-40px);
    }

    .nav-item:nth-child(2) {
        transform: translateY(-80px);
    }

    .nav-item:nth-child(3) {
        transform: translateY(-120px);
    }

    .nav-item:nth-child(4) {
        transform: translateY(-160px);
    }

    .nav-item:nth-child(5) {
        transform: translateY(-200px);
    }

    .nav-link {
        color: black;
        display: block;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-size: 1.25rem;
        text-decoration: none;
        padding: 1rem;
    }

    .nav-link:hover, .nav-link:focus {
        outline: 0;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .menuicon {
        display: block;
        cursor: pointer;
        color: white;
        transform: rotate(0deg);
        transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .menuicon-bar, .menuicon-circle {
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
    }

    .menuicon-bar {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
        transition: transform 0.25s ease-in-out;
    }

    .menuicon-circle {
        transition: stroke-dashoffset 0.3s linear 0.1s;
        stroke-dashoffset: 144.513262038;
        stroke-dasharray: 144.513262038;
    }

    #splash {
        position: absolute;
        top: 40px;
        right: 40px;
        width: 1px;
        height: 1px;
    }

    #splash::after {
        content: "";
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: #fff;
        width: 284vmax;
        height: 284vmax;
        top: -142vmax;
        left: -142vmax;
        transform: scale(0);
        transform-origin: 50% 50%;
        transition: transform 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);
        will-change: transform;
    }

    .nav:target > #splash::after, .nav--open > #splash::after {
        transform: scale(1);
    }

    .nav:target .menuicon, .nav--open .menuicon {
        color: white;
        transform: rotate(180deg);
    }

    .nav:target .menuicon-circle, .nav--open .menuicon-circle {
        stroke-dashoffset: 0;
    }

    .nav:target .menuicon-bar:nth-child(1), .nav--open .menuicon-bar:nth-child(1), .nav:target .menuicon-bar:nth-child(4), .nav--open .menuicon-bar:nth-child(4) {
        opacity: 0;
    }

    .nav:target .menuicon-bar:nth-child(2), .nav--open .menuicon-bar:nth-child(2) {
        transform: rotate(45deg);
    }

    .nav:target .menuicon-bar:nth-child(3), .nav--open .menuicon-bar:nth-child(3) {
        transform: rotate(-45deg);
    }

    .nav:target #mobile-nav-menu, .nav--open #mobile-nav-menu {
        visibility: visible;
    }

    .nav:target .nav-item, .nav--open .nav-item {
        opacity: 1;
        transform: translateY(0);
    }

    #nav-bar a:hover,
    #nav-bar a.active {
        color: #000;
        transition: 0.3s ease-in-out;
}

    #nav-bar a:not(:hover),
    #nav-bar a:not(:active) {
        transition: 0.3s ease-in-out;
}

    #logo {
        margin-left: 0;
        pointer-events: none;
    }

    #white-nav-logo {
        opacity: 0;
    }

    #red-nav-logo {
        opacity: 0;
        margin-left: 0px;
        transition:opacity 0.5s ease-in-out;
    }

    #nav-bar.scroll {
        height: 50px;
        background: rgba(255, 255, 255, 0.95);
}

    #nav-menu > li {
        overflow: hidden;
        padding: 6px 0px 0px 0px;
        margin-right: 0px;
        z-index: inherit;
     }
} */

/* General Queries */

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container,
    .form-container,
    .reviews-container {
        width: 970px;
    }

        .column {
        width: 83.34%;
    }
}

@media (min-width: 1200px) {
  .container,
  .column-container,
  .form-container,
  #contact-column,
  .reviews-container {
    width: 1170px;
  }

  .column {
    width: 50%;
  }

  #contact-options {
    width: 90%;
    margin-left: 12%;
  }

  .coaching-center li:first-child {
    margin-right: 5px;
  }
}

@media (max-width: 1200px) {
    .form-shape,
    .block {
        width: 50%;
    }
        #column-left,
    #column-center {
        width: 100%;
        padding: 0px 0px 50px 0;
    }

#column-left > p,
#column-center > p,
#column-right > p {
    text-align: center;
}

    #column-right {
        width: 100%;
        padding: 0px;
    }

        #contact-item-left,
        #contact-item-right
    {
        float: none;
        width: 100%;
        padding-bottom: 20px;
    }

     #contact-item-center {
        width: 100%;
        padding-bottom: 20px;
    }

            #contact-options {
                width: auto;
    margin-left: 3%;
}
}

@media (max-width: 992px) {
  .form-shape,
  .block {
    width: 70%;
  }

  .coaching-left,
  .coaching-center {
    padding: 0px 0px 25px 0;
    width: 100%;
  }

  .coaching-right {
    width: 100%;
    padding: 0
  }

  #coaching-services > .column-container > .text-title {
    margin: 0 50px 50px 50px;
   }

  .column-container {
    width: 80%;
  }

  #gym-ethos,
  #coaching p,
  #consultation {
    text-align: left;
  }
}

@media (max-width: 768px) {
    #idris-logo > img {
        max-width: 85%;
    }

    #idris-logo > h1 {
        font-size: 75%;
    }

    #reviews {
        padding: 0 10px;
        z-index: 2;
    }

    #popup-reviews {
        grid-template-columns: repeat(1, 1fr);
        position: relative;
        z-index: 1; /* Ensure it's within the section's context */
        display: flex;
        flex-wrap: wrap; /* Allow wrapping for responsive layout */
        gap: 15px; /* Add spacing between images */
        justify-content: center; /* Center the images */
    }
        #gym-ethos,
    #why-choose-us,
    #consultation {
        padding: 0px 10px;
    }

        #coaching,
        #contact-us {
            padding: 100px 10px;
        }

        #idris-image-small,
        #location {
            height: 30vh;
        }

        #location > h1 {
            font-size: 180%;
            letter-spacing: 15px;
        }

    .container,
    .column,
    .form-shape,
    .block {
        width: 90%;
    }

    #column-left > p,
    #column-center > p,
    #column-right > p {
      text-align: left;
  }

    .coaching-left,
    .coaching-center {
        padding: 0px 0px 25px 0;
        width: 100%;
    }

    .coaching-right {
       width: 100%;
       padding: 0
     }

     .coaching-description > .coaching-left,
     .coaching-description > .coaching-center {
        padding: 0;
     }

     #coaching-services > .column-container > .text-title {
        margin: 0 24px 50px 24px;
     }

     .tab-item {
        padding: 10px 5px;
    }

    #stretch,
    #Personal-tr,
    #online {
      padding: 35px 10px;
    }

    .coaching-description li:last-child {
      margin-bottom: 25px;
    }
}

@media (max-width: 480px) {
    #idris-logo > h1 {
        width: 70%;
        text-align: center;
    }

    #coaching-services > .column > h1 {
        font-size: 200%;
    }

            #idris-image-small,
            #location {
            height: 20vh;
}

        #location > h1 {
            font-size: 130%;
            letter-spacing: 15px;
        }

    .column-container {
        width: 90%;
    }

}

@media (max-width: 444px) {
  .tab-item:last-child {
    margin-bottom: 0px;
  }
}
/* issue fix 04-01-2025 start */
/* nav#mobile-nav:not(.nav--open) ul#mobile-nav-menu {
    pointer-events: none;
  }
  body > header {
    background: #ffffff00;
  }
  
  #nav-bar.scroll {
    background: #107a1593;
  }
   */
/* issue fix end   */

/* Inquiry form styling */
.inquiry-form {
  max-width: 500px;
  margin: 2rem auto 0;   /* separate from the contact list */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.inquiry-form label {
  font-weight: 700;
  color: #dcdcdc;
}

.inquiry-form input,
.inquiry-form textarea {
  padding: 0.75rem;
  border: 1px solid #696969;
  border-radius: 4px;
  background: #fff;
  font-family: Lato, sans-serif;
}

.inquiry-form input:focus,
.inquiry-form textarea:focus {
  outline: none;
  border-color: #2e753b;
}

.inquiry-form button {
  padding: 0.75rem;
  background-color: #2e753b;
  color: #fff;
  border: none;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.inquiry-form button:hover {
  background-color: #245731;
}