@charset "utf-8";
@charset "utf-8";
/* CSS Document */

:root {
    --white: #ffffff;
    --black: #000000;
    --grey: #f4f4f4;
    --text-color: #000;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    background-color: var(--white);
    color: var(--text-color);
}
.phone {
  color: #000;
  text-decoration: none;
}
a[href^="tel"] {
  color: #000 !important;
  text-decoration: none !important;
}
/* Ensure the wrapper of the include doesn't block the stickiness */
[w3-include-html] {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header {
    background-color: #ffffff;
    width: 100%;
    /* This ensures it stays at the top */
    position: sticky; 
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #f0f0f0; /* Optional: adds definition when scrolling */
}

/* Ensure the body doesn't hide behind the sticky header on load */
body {
    padding-top: 0;
}
/* Header Sticky & Layout */
.site-header {
    position: sticky;
    top: 0;
    background: var(--white);
    border-bottom: 1px solid #eee;
    z-index: 1000;
    width: 100%;
}

/* 1. Create a uniform container class */
.header-container, 
.main-content, 
.footer-container {
    max-width: 1200px; /* Adjust this to your desired site width */
    margin: 0 auto;    /* Centers the entire block */
    padding: 0 10px;   /* Consistent side spacing */
    width: 100%;
    box-sizing: border-box;
}

/* 2. Fix the Header Alignment */
.header-container {
    display: flex;
    justify-content: space-between; /* Pushes Logo left, Menu right */
    align-items: center;
    height: 80px; /* Consistent height */
}

/* 3. If you want the menu NEXT to the logo instead of far right: */
.main-nav {
   /*  margin-left: 50px; Gap between Logo and first Menu item */
    flex-grow: 1;      /* Allows nav to occupy space */
	margin-left: 40px; /* This controls the distance between the LOGO and the first menu item */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
	 letter-spacing:.12em;
      text-transform:uppercase;
	padding:10px 6px;
}
/* Desktop Hover Box */
.nav-links li a {
    text-decoration: none;
     color:#8c8c8c;
    /*padding: 8px 15px;  Creates the space for the box */
    /*transition: all 0.3s ease;  Makes the box appear smoothly */
    border-radius: 4px; /* Optional: slightly rounded corners */
	padding:10px 6px;
      border-radius:10px;
    transition: background-color 0.3s ease;

    font-size: 13px; /* Slightly smaller font also makes the menu look tighter */
}
.nav-links li a {
    text-decoration: none;
    color: #333;
    /* Reduced horizontal padding from 12px to 8px */
    padding: 6px 8px; 
    transition: background-color 0.3s ease;
    border-radius: 4px;
    font-size: 13px; /* Slightly smaller font also makes the menu look tighter */
}
.nav-links li a:hover {
    color:#111; background:#f6f6f6;
    /* Optional: add a border instead of background */
    /* border: 1px solid #ccc; */
}
/* 4. Ensure Content has no extra default margins */
.main-content h1 {
    margin-top: 40px; /* Space from sticky header */
	margin-top: 2px; padding-top: 2px;
	color: #000;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 15px; /* Change this from 30px or 50px to 15px to bring them closer */
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: var(--black);
    text-transform: uppercase;
    font-size: 14px;
}

.burger-menu {
    display: none; /* Hide on Desktop */
}

h1{
      margin:0 0 14px;
      font-size:22px;
      font-weight:600;
      letter-spacing:.01em;
	  margin-top: 2px; padding-top: 2px;
	  color: #000;
    }

/* MOBILE VIEW (iPhone/Android) */
@media (max-width: 768px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 0; /* Changed to 0 to prevent double-padding */
        border-bottom: 1px solid #eee;
        z-index: 999;
		margin-left: 0;
    }
    a[href^="tel"] {
  color: #000 !important;
  text-decoration: none !important;
}
	article{
      border:1px solid var(--hair);
      border-radius:var(--radius);
      background:#fff;
	  border: 1px solid #ddd;
  border-radius: 8px;
      display:flex;
      flex-direction:column;
      color: #000;
    }
	.metaTop{
	flex-direction:column; 
	align-items:flex-start;
	text-align: left;
		margin-left: 0 !important;
		margin-top: 0 !important;
		color: #000;
		
	}
	.card-container {
  display: grid;
  /* This creates 3 columns if space allows, but drops to 1 on mobile */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 0;
  padding-top: 0;
  margin-left: 0;
  margin-right: 0;
	margin-top: 0;
	color: #000;
  }
.card-container2 {
  display: grid;
  /* This creates 3 columns if space allows, but drops to 1 on mobile */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 0;
  padding-top: 0;
  margin-left: 0;
  margin-right: 0;
	margin-top: 0;
	
  }
    .nav-links {
        display: flex; /* Ensure it's flex */
        flex-direction: column;
        gap: 0; /* Remove gap so boxes touch, looks cleaner for gallery */
        padding: 10px 0; /* Vertical padding for the dropdown */
        margin: 0;
        list-style: none;
        gap: 0; /* Ensures boxes touch for a solid look */
    }

    .nav-links li a {
        display: block;
        width: 100%;
        /* The magic alignment numbers: */
        padding: 12px 20px; /* 20px matches your .header-container padding exactly */
        text-decoration: none;
        color:#8c8c8c;
        box-sizing: border-box;
        transition: 0.2s ease;

    }

    .nav-links li a:active,
    .nav-links li a:hover {
		color:#111; background:#f6f6f6;
        /* Keep padding-left at 20px so the text DOES NOT move when hovered */
        padding-left: 20px; 
    }

    .header-container {
        padding: 0 20px; /* Your 'red line' alignment anchor */
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .main-nav.active {
        display: block;
    }

    /* Keep content alignment consistent */
    .main-content, .footer-container {
        padding-right: 20px;
		padding-left: 20px;
		
    }

    .burger-menu {
        display: block;
        position: relative; /* Changed from absolute for better centering in the header */
        cursor: pointer;
    }

    .burger-menu span {
        display: block;
        width: 25px;
        height: 2px;
        background: #000;
        margin: 5px 0;
    }
}













.logo-img {
    /* height: 40px;      Adjust this height to fit your header */
    width: auto;        /* Maintains aspect ratio */
    display: block;     /* Removes bottom whitespace gap */
    transition: 0.3s;   /* Smooth resizing if needed */
    max-width: 100%;
    height: auto; /* Maintains proportions */
    /* If the logo has a tiny bit of white space in the image, 
       you can nudge it left with a negative margin: */
    margin-left: -2px;
	height: 30px; 
}

/* Ensure the logo link doesn't add extra padding */
.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
/* Footer Styling */
.site-footer {
    background: var(--white);
    border-top: 1px solid #eee;
    margin-top: 50px;
    color: #000;

	 /*padding: 40px 20px 20px;*/
	
  	font-family: sans-serif;
  text-align: left; /* Global left alignment */
	margin-bottom: 0;
}

/* .footer-container {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
	max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* Automatically wraps columns when they hit 250px */
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;

}*/

.footer-container {
	justify-content: space-between;
  background-color: #fff;
  color: #000;
  padding: 20px 20px;
  text-align: left; /* Global left alignment */
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Row 1: Full width */
.footer-top {
margin-top: 0;
  margin-bottom: 40px;
}

.footer-brand h2, p {
  font-size:12px;
  margin-bottom: 10px;
  color: #000;
}

.footer-divider {
  border: 0;
   border-top: 1px solid #eee;
  margin-bottom: 40px;
	margin-top: 0;
}

/* Row 2: Responsive 3 Columns */
.footer-bottom-grid {
  display: grid;
  /* Handles the 3-column to 1-column snap automatically */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.footer-col h4 {
  color: #00d1b2;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: #aaa;
  text-decoration: none;
  transition: 0.2s;
}

.footer-col a:hover {
  color: #fff;
}



/* card colums */

.card-container {
  display: grid;
  /* This creates 3 columns if space allows, but drops to 1 on mobile */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 0px;
  padding-top: 0;
  margin-left: 0;
  margin-right: 0;
	margin-top: 0;
  }

.card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
  /* Aligns text and inline elements to the left */
  text-align: left;
	margin-left: auto;
	margin-right: auto;
  
  /* If using flex inside the card, this aligns items like buttons to the left */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color:grey;

  min-height: 200px; /* Adjust as needed */
}
.card a {
	color: #000;
	text-decoration: none;
}
.card a:hover {
	color: #000;
	text-decoration: underline;
}

.card:hover {
  transform: translateY(-5px);
}

/* This is the secret: it pushes the footer to the bottom */

/* News card (invisible card style) */
    article{
      border:1px solid var(--hair);
      border-radius:var(--radius);
      padding:12px;
      background:#fff;
	  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 14px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .thumb{
      width:100%;
      aspect-ratio: 16/10;
      background:#f3f3f3;
      border:1px solid var(--hair);
      border-radius:var(--radius);
      overflow:hidden;
		
    }
    img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
	/*	filter: grayscale(100%);*/
  transition: filter 0.5s ease; /* Makes the color fade in smoothly */
    }
imgs:hover {
 filter: grayscale(100%);
	transform: scale(1.05); /* Optional: slight zoom effect */
}
.thumb:hover .imgs {
   /* filter: grayscale(100%);*/
	filter: brightness(1.2) grayscale(0.5) opacity(0.7);
}
.metaTop{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      border-bottom:1px solid var(--hair);
      padding-bottom:16px;
      margin-bottom:16px;
      color: #000;
    }
    .metaTop .hint{color:var(--muted); font-size:12px}

    .title{
      margin:0;
      font-size:16px;
      font-weight:600;
      line-height:1.25;
      letter-spacing:.01em;
      color: #000;
    }
    .title a{color:var(--text); text-decoration:none;}
    .title a:hover{text-decoration:underline;}
    .excerpt{
  margin:0;
  color: #000;
  font-size:15px;
  line-height:1.5;
}
    .bottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top:auto;
      padding-top:22px;
    }
    .readmore{
      font-size:12px;
      text-decoration:none;
      color: #000000;
      letter-spacing:.02em;
      text-transform:uppercase;
    }
    .readmore:hover{color: #333; text-decoration:underline;}
    .date{
      font-size:12px;
      color:#000000;
      white-space:nowrap;
    }


.card-footer {
  display: flex;
  justify-content: space-between; /* Pushes Read More Left, Date Right */
  align-items: center;
  border-top: 1px solid #eee;
  padding-top: 15px;
      gap:12px;
      margin-top:auto;
      padding-top:2px;
}

.read-more {
  font-weight: bold;
  font-size: 12px;
  color: #000;
  text-decoration: none;
}

.date {
  font-size: 12px;
  color: #000000;

      white-space:nowrap;
}
.imgs {
  filter: grayscale(0%);
  transition: filter 0.5s ease; /* Makes the color fade in smoothly */
}

/* 2. Change to Color on Hover */
/* Note: Applying hover to the .card makes the image change even 
   if you hover over the text area. */
.card:hover .imgs {
  /* filter: grayscale(100%);*/
	filter: brightness(1.2) grayscale(0.5) opacity(0.7);
}




/* news details css */

.container2 {
  display: flex;
  flex-wrap: wrap; /* Allows columns to wrap to the next line */
  gap: 40px;      /* Space between columns */
}

.column2 {
  flex: 1;          /* Columns grow to fill space */
  min-width: 300px; /* If the screen is narrower than 300px per column, they wrap */
  /*  background: #ff0000; */
   /* text-align: justify; */
color: #000;
  font-size:15px;
  line-height:1.5;
  margin-left: 0;
	margin-right: 0;
}
.column2 img {
  max-width: 100%;
  height: auto;
  display: block; /* Removes the bottom margin/gap */
  filter: grayscale(0%);
}

.container3 {
  width: 100%;          /* Leaves some breathing room on the sides */
  /* max-width: 800px;    Prevents the image from getting too huge */
  margin: 0 auto;      /* Centers the column on the page */
}
/* news details css end */












.gallery-footer {
  padding: 20px 0 30px 0;
  background-color: #fff;
  font-family: 'Helvetica', 'Arial', sans-serif;
  border-top: 1px solid #eee; /* Thin line seen in image */
  margin-top: 20px;
}

.footers-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px; /* Aligns content to the left like your image */
}

.connects-text {

  letter-spacing: 1px;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #000;
  font-size:15px;
  line-height:1.5;
}

.social-icons {
  display: flex !important; /* Forces the row layout */
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px; /* Space between the boxes */
  align-items: center;
  margin-bottom: 25px;
}

.social-icons a {
  display: inline-block;
  width: 36px; /* Match the width in your HTML */
  height: 36px;
  overflow: hidden; /* Prevents huge images from leaking out */
}

.social-icons img {
  display: block;
  width: 100%;
  height: auto;
}
/* Creating the square border boxes for icons */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid #333;
  border-radius: 4px;
  color: #000;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.2s ease;
}

.icon-box:hover {
  background-color: #333;
  color: #fff;
}

.artsy-icon {
  font-weight: bold;
  font-family: serif;
}

.footer-credits {
  color:#2a2a2a;
  font-size:15px;
  line-height:1.5;
  letter-spacing: 1px;
	text-transform: uppercase;
}


@media (min-width: 768px) {
.galleryxx {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;        /* Space between the columns */

  justify-content: center;
}
	.phone {
  color: #000;
  text-decoration: none;
}
.art-itemxx img {
  width: 100%;      /* Image fills the container width */
  height: auto;     /* Maintains aspect ratio */
  display: block;   /* Removes tiny bottom gap found in inline images */
  margin-bottom: 15px;
}
.art-itemxx {
  flex: 1 1 200px;  /* Items will stack if screen is narrower than 300px */
  max-width: 300px; /* Limits size on large screens */
  margin: 0;
}

.image-containerxx {
  border: 1px solid #ddd; /* Mimics the frame in your image */
  padding: 40px;          /* Mimics the matting around the art */
  background: #fff;
  margin-bottom: 15px;
}

.image-containerxx img {
  width: 100%;            /* Makes image responsive */
  height: auto;
  display: block;
}

figcaption h3 {
  font-size: 1.1rem;
  margin: 0 0 8px 0;
}

figcaption {
  font-family: sans-serif;
  text-align: left;
}

figcaption p {
  margin: 5px 0;
  font-size: 0.9rem;
}
}
.tight-text {
  margin: 0;           /* Removes the big gaps between blocks */
  line-height: 1.2;    /* Shrinks the vertical space between lines */
  display: block;
}

.tight-text i {
  display: inline;     /* Ensures it stays part of the text flow */
  font-style: italic;
  padding: 0;
  margin: 0;
}
@media (max-width: 768px) {
  .your-element-class {
    text-align: left !important;
    padding-left: 15px; /* Adds a little breathing room from the edge */
  }
	
	.tight-text {
  margin: 0;           /* Removes the big gaps between blocks */
  line-height: 1.2;    /* Shrinks the vertical space between lines */
  display: block;
}

.tight-text i {
  display: inline;     /* Ensures it stays part of the text flow */
  font-style: italic;
  padding: 0;
  margin: 0;
}
}

/* =========================================================== */

/* for 3 column artists    Container styling */

/* Container styling */
        .name-grid {
            display: grid;
            /* Creates 3 equal columns that stretch to fill space */
            grid-template-columns: repeat(3, 1fr); 
            /* Vertical gap between rows */
            row-gap: 20px; 
            /* Spreads the width to the right as indicated in your screenshot */
            width: 100%; 
            max-width: 1200px; /* Increased to allow more right-side reach */
            margin: 20px 0; /* Aligned to the left, spreading right */
            font-family: 'Arial', sans-serif;
        }

        /* Individual item styling */
        .name-item {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            /* Ensures text stays on the left of its equal column */
            text-align: left; 
        }
		.name-item a {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            /* Ensures text stays on the left of its equal column */
            text-align: left; 
			text-decoration: none;
        }
		.name-item a:hover {
            font-size: 18px;
            font-weight: bold;
            color: #gray;
            /* Ensures text stays on the left of its equal column */
            text-align: left; 
			text-decoration: underline;
        }

        /* Mobile Adjustments */
        @media (max-width: 600px) {
            .name-grid {
                grid-template-columns: 1fr;
				font-family: 'Arial', sans-serif;
            }
			.name-item a:hover {
            font-size: 18px;
            font-weight: bold;
            color: #gray;
            /* Ensures text stays on the left of its equal column */
            text-align: left; 
			text-decoration: underline;
        }
			.name-item a {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            /* Ensures text stays on the left of its equal column */
            text-align: left; 
			text-decoration: none;
        }
        }



        

        /* Responsive Breakpoints */
        
        /* Tablets: 2 columns */
        @media (max-width: 768px) {
            .name-grid {
                grid-template-columns: repeat(2, 1fr);
            }
			.name-item a:hover {
            font-size: 18px;
            font-weight: bold;
            color: #gray;
            /* Ensures text stays on the left of its equal column */
            text-align: left; 
			text-decoration: underline;
        }
			.name-item a {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            /* Ensures text stays on the left of its equal column */
            text-align: left; 
			text-decoration: none;
        }
        }

        /* Mobile: 1 column */
        @media (max-width: 480px) {
            .name-grid {
                grid-template-columns: 1fr;
                gap: 15px;
				margin-left: 0;
            }
			.name-item a {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            /* Ensures text stays on the left of its equal column */
            text-align: left; 
			text-decoration: none;
        }
			.name-item a:hover {
            font-size: 18px;
            font-weight: bold;
            color: #gray;
            /* Ensures text stays on the left of its equal column */
            text-align: left; 
			text-decoration: underline;
        }
        }
/* =========================================================== */

/* The flex container column right sticky left overflow   */
        .wrapper {
            display: flex;
            align-items: flex-start; /* Important: prevents the left col from stretching */
            gap: 40px;
            max-width: 1000px;
            margin: 0 auto;
        }

        /* The Sticky Left Column */
        .right-column {
            flex: 1;
            position: sticky;
            top: 20px; /* Keeps image 20px from top of viewport while scrolling */
        }

        .right-column img {
            width: 100%;
            height: auto;
            border-radius: 4px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        /* The Scrolling Right Column */
        .left-column {
            flex: 1.5;
            line-height: 1.6;
            color: #333;
        }

        h1 { margin-top: 0; }
        p { margin-bottom: 20px; }
        
        /* Mobile adjustment 
        @media (max-width: 768px) {
            .wrapper { flex-direction: column; }
            .left-column { position: static; } /* Disable sticky on small screens 
        }*/
		
		
		/* Mobile View: Stack and Reverse Order */
		@media (max-width: 768px) {
			.wrapper {
				display: flex;
				flex-direction: column-reverse; /* Right column moves to top, Left to bottom */
			}

			.right-column {
				position: static; /* Disable sticky on mobile so it flows naturally */
				width: 100%;
			}

			.left-column {
				width: 100%;
				margin-bottom: 30px; /* Add space between text and the image below it */
			}
		}
/* End of  The flex container column right sticky left overflow   */