
@media (min-width: 375px) and (max-width:915px) {

    div{
        width: 100% !important;
        display: block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }

    p.sub-heading {
        font-size:0.75rem!important;
    }
    
    .page-inner:not(header .page-inner, footer.page-inner) {
        width:90%!important;
        margin-left:auto;
        margin-right:auto;
    }



    
    header .page-inner {
        width:96%!important;
        margin-left:auto;
        margin-right:auto;
    }
    
    .inner-pad {
        width: 96% !important;
        padding: 2%;
    }

    #menu-toggle {
        display: flex; /* Show the button now */
    }

    #nav-container {
        position: relative;
        height:0!important;
        top: 0;
        right: -100%; /* Hidden off-screen */
        width: 100%;
        background: var(--logo-blue);
        transition: right 0.4s ease-in-out;
        z-index: 1000;
        flex-direction:column;
    }

        #nav-container li {
            display:block;
            width:100%;
            padding:1.5vh 0!important;
        }

            #nav-container li a  {
                font-size:3vh!important;
            }
            

            #nav-container.active {
                right: 0; /* Slide in */
                height: 100vh !important;
                padding-top:0vh!important;
            }
            
            header button {
                font-size:2.5vh!important;
            }

    .line {
        transition: transform 0.3s ease, opacity 0.3s ease;
        /* CRITICAL FIXES */
        transform-origin: center; /* Sets rotation point to the middle of the line */
        transform-box: fill-box; /* Forces SVG to use the line's own box, not the whole SVG area */

        stroke: white; /* Ensure your color is visible */
    }
        /* Animation to 'X' */
        #menu-toggle.is-open .line-top {
        transform: translateY(6px) rotate(45deg);
    }

    #menu-toggle.is-open .line-mid {
        opacity: 0;
    }

    #menu-toggle.is-open .line-bot {
        transform: translateY(-6px) rotate(-45deg);
    }

    body.menu-open header {
        background-color: var(--logo-blue); /* Match your mobile nav color */
    }
    
    ul#menu-primary-menu, ul#menu-primary-menu-1  {
        display:block!important;
    }


    #logo {
        width: 49.5% !important;
        padding: 5% 0;
    }

    #logo img {
        width:90%;
    }

    button {
        padding:2vh!important;
        font-size:2vh!important;
    }

    header div.twothirdswidth:has(#header-nav) div.fifthwidth button {
        width:49.5%;
    }
    
    #gallery {
        padding-top:10%;
    }
    
    #gallery .halfwidth {
        padding-bottom:5%
    }
    
    #gallery button:first-of-type {
        margin-top:8%;
    }

    #gallery button {
        display:block;
        margin-left:auto!important;
        margin-right:auto!important;
        width:64.5%!important;
        padding:1.5vh 0!important;
        margin-bottom:3%;
    }

    #scroll-line {
        width:40px!important;
    }

    #gallery .fullwidth:has(#scroll-line) .inner-pad {
        text-align:left!important;
    }
    
   
   #Services .wp-block-column:hover {
        z-index: 0;/* Lifts the box above its neighbors */
    border-color:transparent!important; /* Changes the grey border to British Red */
    transform: 0; /* The "Cool" lift effect */
    box-shadow: none;
   }
   
   #Services .wp-block-columns .wp-block-column {
       margin-left:0px!important;
   }
   
   #Services .wp-block-columns .wp-block-column:first-of-type,  #Services .wp-block-columns .wp-block-column:nth-of-type(2){
       border-bottom:0px!important;
   }
   
   
   #Process .wp-block-column {
        margin: 0 0 20px 0 !important; /* Stack them with a gap */
        width: 100% !important;
    }
    
    #Process .wp-block-columns .wp-block-column:not(#Process .wp-block-columns .wp-block-column .wp-block-columns .wp-block-column ) {
        padding:40px 10px!important;
        margin:5px!important;
    }
    
    .about-us-inner {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 0;
    }
 
 
 .trust-block {
     width:auto!important;
 }
 
    .about-us-right {
      grid-template-columns: 1fr 1fr;
    }
    
    
    #Packages .wp-block-column {
        margin-bottom: 20px !important;
    }
    
    #Packages .wp-block-group {
        padding:30px 10px;
    }

    
    p.has-small-font-size {
        font-size:15px!important;
         line-height: 1.5;
        opacity: 0.9;
    }
    
    h5 {
    font-size: clamp(1.4rem, 2vw + 1rem, 1.6rem) !important;
        margin-bottom: 8px;
        letter-spacing: -0.01em;
    
}
    
  #add-ons .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis:16.5%!important;
        margin-left:auto;
        margin-right:auto;
    }
    
    
    #add-ons:not(#add-ons h2) p{
        font-size:12px!important;
    }
    
    footer .fullwidth:has(#Contact) {
        width:100%!important;
    }

    footer #header-nav  {
        flex-direction:column;
        margin-left:auto;
        margin-right:auto;
    }

    footer #logo {
        width:64.5%!important;
    }

    footer #header-nav li a{
        font-size:2vh!important;
    }

    footer p {
        font-size:1.8vh!important;
    }

    footer .fullwidth {
        width:80%!important;
    }
    
    .faq-answer.open {
        width:88%!important;
    }


}

/* ── Tablet Landscape — iPad Mini (1024px), iPad Air (1180px), iPad Pro (1366px) ── */
@media (min-width: 916px) and (max-width: 1366px) and (orientation: landscape) {

    /* Header button — stop text wrapping */
    header div.twothirdswidth:has(#header-nav) div.fifthwidth button {
        width: auto;
        padding: 0.6vw 1.2vw;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* Shrink nav links slightly so everything fits */
    #header-nav li a {
        padding: 8px 6px;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }

    /* Stop the Get Started button div dropping to a new line */
    header div.twothirdswidth:has(#header-nav) {
        flex-wrap: nowrap;
        align-items: center;
    }

    header div.twothirdswidth:has(#header-nav) div.fifthwidth {
        flex-shrink: 0;
        width: auto;
        padding: 5px 0;
    }

    /* Logo — slightly smaller */
    #logo {
        width: 28% !important;
    }

    #logo img {
        width: 55%;
    }

    /* Gallery buttons — stop them going chunky */
    #gallery button {
        padding: 1vh 1.5vw !important;
        font-size: 0.82rem !important;
        width: auto !important;
        display: inline-block !important;
        margin-right: 1% !important;
    }

    /* iPad Mini specific — tightest viewport, needs most help */
    @media (max-width: 1024px) {
        #header-nav li a {
            padding: 8px 4px;
            font-size: 0.7rem;
        }

        header div.twothirdswidth:has(#header-nav) div.fifthwidth button {
            font-size: 0.7rem;
            padding: 0.5vw 1vw;
        }
    }

}

/* ── iPad Pro Portrait (1024px wide) ── */
@media (min-width: 916px) and (max-width: 1024px) and (orientation: portrait) {

    /* Stop header button text wrapping */
    header div.twothirdswidth:has(#header-nav) div.fifthwidth button {
        width: auto;
        padding: 0.6vw 1.2vw;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Shrink nav links to fit */
    #header-nav li a {
        padding: 8px 5px;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
    }

    /* Stop Get Started div dropping to new line */
    header div.twothirdswidth:has(#header-nav) {
        flex-wrap: nowrap;
        align-items: center;
    }

    header div.twothirdswidth:has(#header-nav) div.fifthwidth {
        flex-shrink: 0;
        width: auto;
        padding: 5px 0;
    }

    /* Logo */
    #logo {
        width: 28% !important;
    }

    #logo img {
        width: 55%;
    }

    /* Gallery buttons */
    #gallery button {
        padding: 1vh 1.5vw !important;
        font-size: 0.82rem !important;
        width: auto !important;
        display: inline-block !important;
        margin-right: 1% !important;
    }

}
