/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Platypi:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poetsen+One:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400;0,700;1,400&display=swap');

html, body {
            height: 100%; /* Ensure html and body take full height */
            margin: 0; /* Remove default body margin */
            padding: 0;
        }

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    font-family: Arial, sans-serif;
    font-size:18px;
}

.pagination a {
    color: #000000;
    font-size:18px;
    text-decoration: none;
    padding: 8px 12px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.pagination a:hover {
    background-color: #007bff;
    color: #fff;
}

.pagination .active {
    padding: 8px 12px;
    margin: 0 5px;
    border: 1px solid #F0560F;
    background-color: #0FF0C6;
    color: #fff;
    border-radius: 4px;
    font-weight: bold;
}

.pagination a:disabled {
    color: #ccc;
    pointer-events: none;
    border-color: #ddd;
}

.p_pgetitle {
    font-family:Platypi ;
    font-size: 40px ;
    color:#467d40;
    margin: 0;
    text-align: center;
    
}

.h1 {
    font-family:Platypi;
    font-size: 50px ;
    color:#ab08f5;
}

.h2 {
    font-family:Platypi;
    font-size: 20px ;
    color:#ab08f5;
}

.p::first-letter {
        font-size: 150%;
        color: green;
        font-family: Swiss;
        font-weight:normal;
        padding-left: 5px;
    }

/* Styling for Home Page */
.date  {	

      font-family:Helvetica;
      font-size: 30px;
      color: blue; 	
      text-align:justify;
      line-height: 1.4;
    }

.speaker {
      font-size:30px;
      color: green;
      font-weight:bold;
      font-family:Platypi;
      padding-left: 10px;
}

.topic  {
     font-size:30px;
     color:#bc19bc;
     font-family:Helvetica;
     font-weight:bold;
     padding-left: 10px;
}



.subhead1 {
     font-family:Platypi;
      font-size: 35px;
      color: teal;
      font-weight:bold;
      text-align:justify;
   }

.subhead2 {
     font-family:Helvetica;
      font-size: 30px;
      color: #bc19bc;
      font-weight:bold;
      text-align:justify;
   }

.subhead3 {
      font-family:Platypi;
      font-size: 18px;
      line-height: 1.5;
      color: black; 	
   }

.subhead4 {
     font-family:Platypi;
      font-size: 25px;
      color: #bc19bc;
      font-weight:400;
      text-align:center;
   }
   
.subhead5 {
     font-family:Helvetica;
      font-size: 30px;
      color: blue;
      padding: 5px;
   }



.iframe {
 margin-left: auto;
margin-right: auto;
width: 95%;
padding-left: 7px;
padding-right: 7px;
}

.columns {
  column-count: 3;
  column-gap: 16px;
  column-rule: 2px solid #151213;
  overflow: hidden;  /* Prevent content overflow */
}

.main .review-text {        /* For Garden Visit Page */
    word-wrap: break-word;  /* Handle long words or unbreakable strings */
    max-height: 200px;
    overflow-y: auto;       /* Enable scrolling for long reviews */
}

.ital {
  font-style: italic;
  line-height:1.2;
}

.pcol {
    font-family:Helvetica;
    font-size:14px;
    text-align: justify;
    color:#000000;
    line-height:1.4;
}



.p1 {
    font-family:Helvetica;
    font-size:18px;
    text-align: justify;
    color:black;
    line-height:1.4;
    padding-left: 15px;
    padding-right: 15px;
}

.p1a {
     color: black;
     font-weight: bold;
}

.p2 {
font-family:Helvetica;
font-size:30px;
color:#bc19bc;
font-weight:bold;
padding-left: 10px;
}

.p3 {
font-family:Platypi;
font-size:30px;
color: green;
font-weight:bold;
line-height: 1.6;
padding-left: 10px;
}

.p2c {
font-family:Helvetica;
font-size:30px;
color:#bc19bc;
font-weight:bold;
text-align:center;
}

.p3c {
font-family:Platypi;
font-size:30px;
color: green;
font-weight:bold;
line-height: 1.6;
text-align:center;
}

.p3cA {
font-family:Platypi;
font-size:30px;
color: green;
font-weight:bold;
line-height: 1.2;
text-align:center;
}

.p5c {
font-family:Platypi;
font-size:25px;
color: green;
line-height: 1.4;
text-align:center;
}

.p4 {
font-family:Platypi;
font-size:30px;
color: #bc19bc;
font-weight:bold;
padding-left: 10px;
}

.p5 {
font-family:Helvetica;
font-size:18px;
line-height: 1.4;
}

/* New styling for the full paragraph */
.p.sidebarL {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    margin: 12px 0;        /* gives breathing room */
    color: #222;           /* optional but recommended */
}

.caveat {
  font-family: "Caveat", serif;
  font-size:40px;
  font-style: normal;
}

.oregano-regular {
  font-family: "Oregano", serif;
  font-size:35px;
  font-weight: 600;
  font-style: normal;
  margin-left:50px;
}

.oregano-regular-italic {
  font-family: "Oregano", serif;
  font-size:20px;
  font-weight: 400;
  font-style: italic;
  margin-left: auto;
  margin-right: auto;
}

.boxedtext {
font-family:Swiss;
font-size:20px;
color:black;
line-height:1.3;
text-align:justify;
text-indent: -12px;
background:#FFFDD0;
border: 1px solid #f60;
box-sizing: border-box;
overflow: hidden;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}

.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:200px;
    height:200px;
  }
  
  table {
        width: 90%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        margin: auto;
        
    }
    th, td {
        border: 2px solid #dddddd;
        text-align: left;
        vertical-align: bottom;
        padding: 10px;
    }
    th {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    tr:hover {
        background-color: #ddd;
    }
    


.angled-image-container {
    display: inline-block;
    text-align: center;
    margin: 35px;
}

.angled-image {
    display: block;
    width: 90%;
    max-width: 200px;
    transform: rotate(-10deg);
    
}

.angled-image2 {
    display: block;
    width: 90%;
    max-width: 200px;
    transform: rotate(10deg);
    
}

.angled-image3 {
    display: block;
    width: 90%;
    max-width: 200px;
    transform: rotate(5deg);
    
}

.image-container {
            position: relative;
            display: inline-block;
        }

.image-container img {
            display: block;
        }
        
.caption1 {
            position: relative;
            bottom: -8px;
            left: -9px;
            font-size: 1.2em;
            color: black;
        }   
        

.caption2 {
            position: relative;
            bottom: -20px;
            left: 4px;
            font-size: 1.2em;
            color: black;
            padding: 0px 0px;
            transform: rotate(-9deg);
            transform-origin: left bottom;
        }
   
.caption3 {
            position: relative;
            bottom: -20px;
            left: -50px;
            font-size: 1.2em;
            color: black;
            padding: 0px 0px;
            transform: rotate(9deg);
            transform-origin: right bottom;
        }
        
.caption4 {
            position: relative;
            bottom: -10px;
            left: 2px;
            font-size: 1.2em;
            color: black;
            padding: 0px 0px;
            transform: rotate(-9deg);
            transform-origin: left bottom;
        }
        

/*Life Members inc. */
.life .lifeM {
    font-family:Swiss;
    font-size: 25px;
    color:#daa520;
    font-weight:bold;
    text-align:justify;
    line-height:1.4;
}

/* Life Members Main Container */
.life .container {
  position: relative;
  text-align: center;
  z-index:1;
  }
  
/* Life Members Board_Title_Text */ 
.life .title {
  position: absolute;
  position: absolute;
  top: 2%;
  width: 100%;
  text-align: center;
  z-index:2;
}

/* Life Members main image */
.life .centered {
  position: absolute;
  top: 18%;
  width: 68%; /* Set a width */
  margin-left: 19%;
  text-align: left;
  z-index:2;
}

.footer .column {
      display: flex;
      justify-content: left;
      align-items: left;
     padding-left: 20px;
      height: 100%;
    }

.footer .column {
  border-right: 2px solid black; /* Black border on the right side of each column */
}

.footer .column:last-child {
  border-right: none; /* Remove the border on the last column (to avoid extra border on the far right) */
}

    .footer .column p {
      margin: 0;
    }

/* Remove the right border from the last column */
    .footer .column:last-child {
      border-right: none;
    }

a  {
text-decoration: none;
color: black;
}

.centered {
  position: absolute;
  top: 25%;
  width: 68%; /* Set a width */
  margin-left: 19%;
  text-align: left;
  z-index:2;
}

.btn {
  color: red;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  border: 2px solid;
  border-radius: 8px;
}

.btn_2 {
  margin-left:90px;
  color: red;
  text-align: center;
  font-family:Swiss;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  border: 2px solid;
  border-radius: 8px;
}

.user-details { margin-left: 90px; margin-right: 90px; margin-bottom: 20px; padding: 15px; border: 1px solid #eee; border-radius: 5px; background-color: #f9f9f9; }
        .user-details label { display: block; margin-bottom: 5px; font-weight: bold; }
        .user-details input[type="text"],
        .user-details input[type="email"] {
            width: 30%; /* Account for padding and border */
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        
/* Modal Styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            display: flex; /* This will be overridden by JS for display:none, but ensures centering when active */
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more specific based on content */
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
            position: relative;
        }

        .modal-header {
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            margin-bottom: 15px;
        }

        .modal-header h2 {
            margin: 0;
            font-size: 1.5em;
        }

        .modal-body-content {
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 15px;
            border: 1px solid #f2f2f2;
            padding: 10px;
            background-color: #fff;
        }

        .modal-body-content p {
            margin: 5px 0;
            padding: 3px 0;
            border-bottom: 1px dashed #eee;
        }

        .modal-body-content p:last-child {
            border-bottom: none;
        }

        .modal-total {
            font-weight: bold;
            font-size: 1.1em;
            text-align: right;
            margin-bottom: 20px;
            padding-top: 10px;
            border-top: 1px solid #eee;
        }

        .modal-footer {
            text-align: right;
        }

        .modal-footer button {
            padding: 10px 20px;
            margin-left: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }

        .modal-footer #cancelReview {
            background-color: #ccc;
            color: #333;
        }

        .modal-footer #confirmSend {
            background-color: #007bff;
            color: white;
        }

        .modal-footer button:hover {
            opacity: 0.9;
        }
        
        .sidebar-image-wrapper { width: 100%; }
  .sb-image-container { text-align: center; margin-bottom: 40px; padding: 5px; display: block; }
  .sb-image { max-width: 85%; height: auto; display: inline-block; border: 6px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: transform 0.2s ease-in-out; }
  .sb-caption { font-size: 13px; font-weight: 500; color: #333; margin-top: 10px; padding: 0 10px; }
  .sb-angled-1 .sb-image { transform: rotate(-8deg); }
  .sb-angled-2 .sb-image { transform: rotate(6deg); }
  .sb-image-container:hover .sb-image { transform: scale(1.05) rotate(0deg) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
  .sb-is-hidden { display: none !important; }

.spacer0 {
  margin-bottom: 5px; /* Example spacing */
}

.spacer {
  margin-bottom: 10px; /* Example spacing */
}

.spacer1a {
  margin-bottom: 15px; /* Example spacing */
}

.spacer2 {
  margin-bottom: 30px; /* Example spacing */
}
 

/* For Past Year GV Visit Tabs in Righthand Sidebar Garden Visit Page */
.year-tab:hover {
    background-color: #e0e0e0;
    color: #800000; /* Optional: adds a nice hover color change */
}


.year-tab {
  /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Box Model */
    width: 100%;             /* Fills the sidebar width */
    height: 50px;            /* Set a fixed height for the button */
    padding: 0 10px;         /* Horizontal padding only */
    box-sizing: border-box;  /* Ensures border/padding don't increase size */
    
    /* Decoration */
    background-color: #9b9b9b;
   text-decoration: none;
    color: #000;
    border: 1px solid #ccc;
    
    /* Spacing */
    margin-bottom: 15px !important;
}