/* Base styles */


/* Footer */
footer {
  padding: 26px 0 60px;
  text-align: center;
  color: #1d0e00;
}

footer small {
  opacity: 0.85;
  font-size: 17px;
  text-shadow: 0 0 3px #ffffff; /* white glow effect */
}




*,
*::before,
*::after {
box-sizing: border-box;
}

html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}

body {
font-size: 100%; }

body {
background-color: #222222;
color: #fff;
font-size: clamp(14px, 2.5vw, 28px); /* 👈 responsive font size */
padding: 0;
margin:0; color:var(--ink); background:var(--sepia);
font-family:"Crimson Text", Georgia, serif; font-size:18px; line-height:1.55;
font-weight: normal;
font-style: normal;
line-height: 1.5; /* Increased for readability */
position: relative;
cursor: default;
z-index: 100;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed; /* Keeps the image in place while scrolling */
}



.content {
text-align: center;
padding: 100px 20px;
color: white;
text-shadow: 1px 1px 2px black;
}

h1, h2 {
color: #F0B340;
}

   /* Headline */
   h1.title {
    font-family: "Merriweather", Georgia, serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #F0B340;
    margin: 28px auto 10px;
    max-width: 900px;
    line-height: 1.15;
    font-size: clamp(25px, 4vw, 52px); /* 👈 responsive font size */
    text-shadow: 0 1px 0 rgba(255,240,210,.6), 0 2px 0 rgba(0,0,0,.06);
  }

  h2.title {
    font-family: "Merriweather", Georgia, serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #F0B340;
    margin: 28px auto 10px;
    max-width: 900px;
    line-height: 1.15;
    font-size: clamp(16px, 3vw, 36px); /* 👈 responsive font size */
    text-shadow: 0 1px 0 rgba(255,240,210,.6), 0 2px 0 rgba(0,0,0,.06);
  }
  

ul {
list-style-type: none;
margin-left: 20px;
}

ul {
        list-style-type: none;
        padding-left: 0;
    }


/* HR line */
.red-line {
width: 80%;
border: none;
border-top: 2px solid #C00000;
}
    

header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}



/* Desktop view */
@media (min-width: 1025px) {
body {
background-image: url("https://www.enfield-karate.co.uk/Images/DesktopBackground.png");
background-position: center top; /* 👈 aligns image to the right */
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll; /* 👈 ensures the background scrolls with the page */
}
}

/* Tablet view */
@media (min-width: 768px) and (max-width: 1024px) {
body {
background-image: url("https://www.enfield-karate.co.uk/Images/TabletBackground.png");
background-position: center top; /* 👈 aligns image to the right */
background-repeat: no-repeat;
background-size: cover;
}
}


/* Mobile view url("https://www.enfield-karate.co.uk/Images/MobileBackground.png");*/
@media (max-width: 767px) {
  body {
    background-image: url("https://www.enfield-karate.co.uk/Images/Sandbackground.png");
    background-position: center top; /* 👈 aligns image to the right */
    background-repeat: repeat;
    background-size: 300px 300px;
  }
}




/* top banner */



.banner-content {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
height: 90px;
}


.social-icons {
display: flex;
gap: 20px; /* space between icons */
justify-content: flex-end; /* align to right corner */
align-items: center;
}


.social-icons img {
height: 70px;
width: auto;
}

.icon {
height: 30px;
}


/* Mobile layout */
@media screen and (max-width: 600px) {
.banner-content {
flex-direction: column;
align-items: center;
text-align: center;
}

.logo {
margin-bottom: 10px;
display: block;
max-width: 100%;
height: auto;
}

/* 60% of the viewport width Mobile*/
@media (max-width: 768px) {
    .logo {
      width: 100vw; /* 60% of the viewport width */
      height: auto;
      display: block;
      margin: 20px auto; /* centres the logo */
    }
  }
  

 
/* Top of page Badge image */
.badge {
  width: 30vw;  /* 60% of viewport width on mobile */
 /*  max-width: 17%;
  height: auto;*/
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .badge-img {
    width: 60vw !important;  /* 60% of viewport width on mobile */
    max-width: 100vw;
    height: auto;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}



.social-icons {
display: flex;
justify-content: center;
gap: 10px;
}

.social-icons img {
height: 60px;
width: auto;
}
}


/* Base styles for .rowwidth */

.rowwidth {
position: relative;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
padding: 30px 20px 30px;
margin: auto auto 0;
max-width: 100%;
border-radius: 0;
text-align: center;
z-index: 1;
overflow: hidden;
}

/* Overlay for all devices */
.rowwidth::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
/* background-color: rgba(0, 0, 0, 0.432); /* default overlay */
z-index: 0;
pointer-events: none;
display: block;
}

/* Ensure content appears above the overlay */
.rowwidth * {
position: relative;
z-index: 2;
}

/* Optional: Clearfix */
.rowwidth:before,
.rowwidth:after {
content: " ";
display: table;
}
.rowwidth:after {
clear: both;
}

/* Optional: Collapse padding for columns */
.rowwidth.collapse > .column,
.rowwidth.collapse > .columns {
padding-left: 0;
padding-right: 0;
}

/* Mobile-specific adjustments */


@media (max-width: 768px) {
.rowwidth {
background-position: left center !important;
background-attachment: scroll !important;
background-size: cover !important;
padding: 20px 15px 12px;
}
}


/* Intro column */

.rowintro {
background-color: #0000004d;
background-color: rgba(0, 0, 0, 0.507); /* default overlay */
font-size: 18px;
color: #fff; /* 👈 This sets the font colour to white */
text-align: center;
width: 100%;
max-width: 80%;
margin: 0 auto;
padding: 10px 30px 10px 30px;
border-radius: 30px;
box-sizing: border-box;
}

@media (max-width: 768px) {
.rowintro {
max-width: 100%;
padding: 0 10px;
}
}
.rowintro:before,
.rowintro:after{content:" ";display:table}
.rowintro:after{clear:both}
.rowintro.collapse>.column,
.rowintro.collapse>
.columns{padding-left:0;padding-right:0
}
.rowintro.collapse .rowintro{margin-left:0;margin-right:0}
.rowintro .rowintro{
width:auto;
margin-left:-0.9375rem;
margin-right:-0.9375rem;
margin-top:0;
margin-bottom:0;
max-width:none;*zoom:1}
.rowintro .rowintro:before,
.rowintro .rowintro:after{content:" ";display:table}
.rowintro .rowintro:after{clear:both}
.rowintro .rowintro.collapse{width:auto;margin:0;max-width:none;*zoom:1}
.rowintro .rowintro.collapse:before,
.rowintro .rowintro.collapse:after{content:" ";display:table}.rowintro 
.rowintro.collapse:after{clear:both}

/* Content column */

.rowcontent {
background-color: #0000004d;
background-color: rgba(0, 0, 0, 0.507); /* default overlay */
font-size: 18px;
color: #fff; /* 👈 This sets the font colour to white */
text-align: center;
padding: 10px 30px 10px 30px;
width: 100%;
max-width: 80%;
margin: 0 auto;
border-radius: 30px;
box-sizing: border-box;
}

@media (max-width: 768px) {
.rowcontent {
max-width: 100%;
padding: 0 10px;
}
}
.rowcontent:before,
.rowcontent:after{content:" ";display:table}
.rowcontent:after{clear:both}
.rowcontent.collapse>.column,
.rowcontent.collapse>
.columns{padding-left:0;padding-right:0
}
.rowcontent.collapse .rowcontent{margin-left:0;margin-right:0}
.rowcontent .rowcontent{
width:auto;
margin-left:-0.9375rem;
margin-right:-0.9375rem;
margin-top:0;
margin-bottom:0;
max-width:none;*zoom:1}
.rowcontent .rowcontent:before,
.rowcontent .rowcontent:after{content:" ";display:table}
.rowcontent .rowcontent:after{clear:both}
.rowcontent .rowcontent.collapse{width:auto;margin:0;max-width:none;*zoom:1}
.rowcontent .rowcontent.collapse:before,
.rowcontent .rowcontent.collapse:after{content:" ";display:table}.rowcontent 
.rowcontent.collapse:after{clear:both}

.row {
  background-color: #0000004d;
  background-color: rgba(0, 0, 0, 0.507); /* default overlay */
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
  border-radius: 30px;
  box-sizing: border-box;
}

.column {
  flex: 1;
  padding: 10px;
}

/* Mobile */
@media (max-width: 768px) {
  .row {
    flex-direction: column;
    align-items: center;
  }

  .column {
    width: 100%;
    max-width: 100%;
  }
}

/* 📱 Social Icons */
.social-icons {
text-align: center;
}

.social-img {
width: 10%;
max-width: 80px; /* optional: limits size on large screens */
height: auto;
margin: 0 10px;
}

/* 📱 On mobile: make icons larger */
@media (max-width: 768px) {
.social-img {
width: 30%;
}
}


/* Two-column layout */

/* Two-column layout inside .twocolumn */
.twocolumn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  background-color: rgba(0, 0, 0, 0.507);
  font-size: 18px;
  color: #fff;
  text-align: center;
  padding: 10px 30px 10px 30px;
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
  border-radius: 30px;
  box-sizing: border-box;
}

/* Individual columns */
.twocolumn .column {
  flex: 1 1 45%;
  padding: 10px 30px 10px 30px;
  /*background-color: rgba(255, 255, 255, 0.05);  optional subtle background */
  border-radius: 20px;
  box-sizing: border-box;
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
  .twocolumn {
    flex-direction: column;
    max-width: 100%;
    padding: 0 10px;
  }

  .twocolumn .column {
    flex: 1 1 100%;
    margin-bottom: 20px;
  }
}





/* Footer Section */
.rowbottom {
  background-color: #000;
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  zoom: 1;
  }
  
  .rowbottom::before,
  .rowbottom::after {
  content: " ";
  display: table;
  }
  
  .rowbottom::after {
  clear: both;
  }
  
  .rowbottom.collapse > .column,
  .rowbottom.collapse > .columns {
  padding-left: 0;
  padding-right: 0;
  }
  
  .rowbottom.collapse {
  margin-left: 0;
  margin-right: 0;
  }
  
  .rowbottom .rowbottom {
  width: auto;
  margin: 0 -0.9375rem;
  max-width: none;
  zoom: 1;
  }
  
  .rowbottom .rowbottom::before,
  .rowbottom .rowbottom::after {
  content: " ";
  display: table;
  }
  
  .rowbottom .rowbottom::after {
  clear: both;
  }
  
  .rowbottom .rowbottom.collapse {
  width: auto;
  margin: 0;
  max-width: none;
  zoom: 1;
  }
  
  .rowbottom .rowbottom.collapse::before,
  .rowbottom .rowbottom.collapse::after {
  content: " ";
  display: table;
  }
  
  .rowbottom .rowbottom.collapse::after {
  clear: both;
  }
  
  
  /* footer logo */
  .footer-logo {
  text-align: center;
  }
  
  .footer-img {
  width: 40%;
  max-width: 80px; /* optional: limits size on large screens */
  height: auto;
  margin: 0 10px;
  }
  
  /* 📱 On mobile: make icons larger */
  @media (max-width: 768px) {
  .footer-img {
  width: 50%;
  }
  }
  

.quote {
display: inline-block;
margin: 14px auto;
padding: 6px 12px;
border-left: 4px solid #F0B340;
background: rgba(255,255,255,.35);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
font-style: italic;
}