* {box-sizing: border-box;}

ul li {list-style-type:none;}

a{text-decoration: none; color:var(--clr-primary-1);
}

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted-text: #5f6368;

  --accent-blue: #00a6e8; /*000d12*/

  --border-soft: rgba(0, 0, 0, 0.08);
  --form-text: #222;
  --form-bg: #ffffff;
  --form-border: #ccc;
  --accent-blue: #0191bd;
}

body.dark-mode {
  --bg: #0f1115;
  --text: #e8e8e8;
  --muted-text: #b3b3b3;

  --accent-blue: #4cc3ff;

  --border-soft: rgba(255, 255, 255, 0.12);
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

html.dark-mode {
  --bg: #0f1115;
  --text: #e8e8e8;
  --accent-blue: #4cc3ff;
}

a {
  color: var(--accent-blue);
}

a:hover {
  opacity: 0.8;
}

/*
@media (prefers-color-scheme: dark) {
  body:not(.dark-mode) {
    --bg: #0f1115;
    --text: #e8e8e8;
    --muted-text: #b3b3b3;
    --accent-blue: #4cc3ff;
    --border-soft: rgba(255, 255, 255, 0.12);
  }
}*/

  /* background-color: #0e76d29c; #feb20082*/
  body {
      -webkit-flex: 3;
      -ms-flex: 3;
      flex: 3;
      background-color: #ffffffd1;
      color: rgb(1, 170, 226);
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal; /*
      font-family: Verdana, Geneva, Tahoma, sans-serif;*/
      font-size: 1rem;
      letter-spacing: 1px;  
      border:0px; 
      border-style:solid; 
      margin: 0px;
      padding: 0px;
      align-items: center;
      justify-content: center;      
    } 
  
  hr { 
    width: 90%;
     }

  a:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 3px;
  }


 .darkbutton {
  background-color: transparent;
  color: rgb(1, 170, 226);  
  border:0px; 
 
 }

 .dark-mode footer {
    background-color: rgb(17, 17, 17);
 }

 .dark-mode nav#primary-nav {
  background-color: rgb(36, 36, 36);
 }
 
 .dark-mode .hamburger {
    color: rgb(255, 255, 255);
 }

 .dark-mode nav ul {
   background-color: rgb(36, 36, 36);
 }

  .dark-mode {
    background-color: rgb(36, 36, 36);
    color: rgb(178, 204, 212);
  }   

.dark-mode .accordion {
    background-color: rgb(32, 32, 32);
    color: rgb(178, 204, 212);  
}

.dark-mode .accordion:hover {
   color: #000000;
}

.dark-mode .panel {
   background-color: rgb(41, 43, 44);
}

.dark-mode h1 {
  color: rgb(178, 204, 212);
}

.dark-mode h2 {
  color: rgb(178, 204, 212);
}

.dark-mode h4 {
  color: rgb(178, 204, 212);
}

.dark-mode .price { color: rgba(178, 204, 212, 0.867); }

.dark-mode a:visited {
  color: rgb(178, 204, 212);
}

  .dark-mode nav .has-submenu .submenu {
    background-color: #272727ef;
  }

  .dark-mode .nav-close { color: rgb(178, 204, 212);}

  .dark-mode .container {
    background-color: #212121ef;
  }

  .dark-mode .final {
    color:#00bc6b;
  }

  .dark-mode .contentPortfolio {
    background-color: rgb(42, 56, 82);
  }

  .dark-mode .filterContainer {
    background-color: rgb(36, 36, 36);
  }

  .dark-mode .product {
    background-color: rgb(36, 36, 36);
  }

  .dark-mode .filter-buttons button {
    background-color: rgb(36, 36, 36);
    color:#9ed1fad9;
  }

   .dark-mode .filter-buttons button:hover {
    background-color: rgb(36, 36, 36);
    color:#9ed1fad9;
    animation-name: myAnimationNav;
    animation-duration: 4s;
  }

   .dark-mode .contact {
    color: rgb(178, 204, 212);
   }

  .dark-mode .img-modal {
    background-color: rgba(36, 36, 36, 0.974);
  }
  
  .description {
    font-size: 1.125rem;
    line-height: 25px;
    justify-content: center;
    margin: auto;
  } 

  figure {
    padding: 4px;
    margin: auto;

  }  

  .final {
    color: black;
  }

  /*
  #showcase {
    display: block;
    text-align: center;
    margin: auto;
  }

#showcase:after {
  content: "";
  display: block;
  clear: both;
}
  /*

  #showcase2 figure {
    margin: 0px 20px;
    display: inline-block;
    text-decoration: none;
    color: black;
  }

  figcaption {
    padding: 2px;
     text-align: center;
  } */

  .privacy li {
    list-style-type: disc;
  }

  form {
      background-color: transparent;
      color: rgb(1, 170, 226);
      padding-bottom: 4px;/*
      width: 100%;
      height: 300px; */
      margin: auto;
      text-align: left;
    }

/* Style inputs */
.containerForm input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: rgb(1, 170, 226);  
 /* background-color: #013c6c;*/
  color: white;
  font-size: 1rem;
  width: 85px;
  height: 34px;
  padding: 9px 14px;
  border: none;
  cursor: pointer;
}

/*contact form*/
input[type=submit]:hover {
  background-color: #45a049;
  animation-name: myAnimation;
  animation-duration: 5s;
}


.colUL input[type=submit] {
  background-color: rgb(1, 170, 226);  
 /* background-color: #013c6c;*/
  color: white;
  font-size: 1rem;
  width: 100px;
  height: 34px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 2px;
  border: none;
  cursor: pointer;
}

.form-status {
  margin-top: 12px;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;  
}

.form-status.success {
  opacity: 1;
  transform: translateY(0);
  color: var(--accent-blue);  
}

@keyframes myAnimation {
  0%   {background-color:rgb(1, 170, 226);}
  10%   {background-color:rgb(3, 209, 250);}
  25%  {background-color:rgb(0, 194, 194);}
  50%  {background-color:rgb(0, 212, 131);}
  100% {background-color: #00bc6b;}
}

/*newsletter button*/
.colUL input[type=submit]:hover {
  position: relative;
  background-color:#00bc6b;
  animation-name: myAnimation;
  animation-duration: 4s;
  color: white;
}


.signup-text {
  text-transform: none;
  font-size: 1rem;
}

@media screen and (max-width: 768px) {
  .signup-text {
    font-size: .98rem;
    text-align: left;
  }
}

.colUL label {
  padding-bottom: 6px;
}

.colUL input[type=email] {
  background-color: transparent;  
  border: 1px solid rgb(103, 103, 103);
  width: 260px;
  margin: 6px 0;
  padding: 8px;
}

/* Style the container/contact section */
.containerForm {
  border-radius: 5px;
  padding: 10px;
  width: 1150px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.contactform {
  width: 50%;
  margin-top: 6px;
  padding: 5px;
  margin: auto;
}

/* Create two columns that float next to eachother */
.column {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.followme {
  display: flex;
  flex-direction: column;
  margin: auto;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }

  .containerForm {
    width: 100%;
  }
}

  #signup {
      background-color: transparent;
      color: rgb(1, 170, 226);
      border: none;
      width: 300px;
      height: 128px;
      margin: 0;
      padding: 0;
  }

  body.dark-mode {
  --accent-blue: #01b8f0;
  }

  :root {
    --accent-blue: #000d12;
  }

  .social-icon {
    width: 22px;
    height: 22px;
    color: var(--accent-blue);
    transition: color 0.3s ease;  
  }

  .social-icon:hover {
    opacity: 0.75;
  }
  
/*
  :root {
    --accent-blue: #00a6e8;
  }

  .social-link img {
    width: 18px;
    height: 18px;
    color: var(--accent-blue);
  } */

  .social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 70px 0;
  }

  .social-link:hover img {
    opacity: 0.75;
  }

 
  
  h1 { 
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(1, 170, 226);  
  }


  h2 {
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-style: normal;
    color: rgb(1, 170, 226);
/*    color: #04b5fb;*/

  }

  h3 { 
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(1, 170, 226);
  }

  h4 { 
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(1, 170, 226);   
  }


  .sold {
      font-family: "Marcellus", serif;
      font-weight: 400;
      font-style: normal;
      font-size: 1.3rem;
      font-weight: bold;
  }

  #hform {
    width: 100%;
  }  
  
  #paintings {
    padding: 0px;
    background-color: rgba(3, 27, 62, 0);
    /* border: 5px solid #004a68; */
    color:#000306df;
    text-align:center;
    margin: 0px; 
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 10%;
    height: 10%;
  }
  /* delete? */
  .container2 {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 10%; /* 4:3 Aspect Ratio */
  }
  

/* Style the links */
li a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  }

 a:link {
      color: rgb(1, 170, 226);
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      font-size: 1rem;
      text-decoration: none;
    }
    
    a:visited {
      color: rgb(1, 170, 226); 
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      font-size: 1rem;
      text-decoration: none;
     }
    
    a:active {
      color: rgb(1, 170, 226); 
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      font-size: 1rem;
      background-color: transparent;
      text-decoration: underline;
    }
    
    a:hover {
      color: #00bc6b;
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      font-size: 1rem;
      text-decoration: underline;    
      animation-name: myAnimationNav;
      animation-timing-function: ease-in;
      animation-duration: 3s;    
    }
    
  
  /* Style the header 0f84c3a1 *
  header {
      padding: 0;
      background-color: #ffffff00; 
      /*background-image: url('./images/headercover.png'); 
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-size: 100%; *
      text-align: center;
      font-size: 2vw;
      color: rgb(255, 255, 255);
/* color: rgba(0, 0, 0, 0.285);
    } */
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

  .hero-header {
    position: relative;
    margin: 0;
    padding: 0;
  }

  .dark-mode .header-text {
    color: white;
  }



  .header-text {
      position: absolute;
      top: 0%;          /* move upward */
      left: 6%; /*
      transform: translateX(-50%); left previousl 35*/
      font-family: "Shadows Into Light Two", cursive;/*
      font-size: clamp(7.5rem, 6vw, 10rem); */
      font-size: 10rem;
      color: white;
      text-transform: capitalize;
      letter-spacing: 12px;
      line-height: 6.3cm;
      text-shadow: 2.5px 2.5px 6px rgba(0,0,0,0.6);
      margin: 0;
      z-index: 33;
    }  


  

/*
  .imgheader { /*
    float: left;
    display: block; *
    width: 100%;
  }*/

.imgheader {
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}


/*   .header-text {
    position: absolute;
    top: 0%;          /* move upward *
    left: 3.4%; /*
    transform: translateX(-50%); left previousl 35*
    font-family: "Shadows Into Light Two", cursive;/*
    font-size: clamp(7.5rem, 6vw, 10rem); *
    font-size: 2.4rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 1.8px;
    line-height: 1.3cm;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
    margin: 0;
    z-index: 22;
  }  */
/*
 @media (max-width: 767px) {
     imgheader {
       width:150%;
     }
 } */
  
  .imgabout {
    display: flexbox;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .aboutcaption {
    font-style: italic;
  }

  .caption {
    padding-bottom: 22px;
  }


  .about {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    margin: auto;
/* margin: 0px auto; */
    text-align: left;
    padding: 50px 0px;
    width: 65%;
    }

 
  /*
  #aboutpage {
    display: flex;
    justify-content: center;
    align-items: center;
  }
*/
    /* Container for flexboxes */
  section {
      /*display: -webkit-flex;
      display: flex;v*/
      justify-content: center;

    }
  
/* NAV MENU with mobile that pulls up on left*/

/* General nav reset */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 2.3rem;
}

/* Submenus hidden by default */


.has-submenu {
  z-index: 2;
  padding-right: 2px;
}  

ul li {
   justify-items: left;
}


.submenu {
  display: none;
  position: absolute;
  min-width: 270px;
  background-color: white;
  border: 1px solid #ddd;
}
/*
.submenu li:hover {
  background-color: rgba(211, 239, 250, 0.426);
  border-left: 3px solid #00bc6b; 
  border-right: 3px solid #00bc6b;   
}
*/

.submenu a:hover { 
  background-color: transparent; 
  border: none;
  animation-name: myAnimationSub;
  animation-duration: 4s;
}
/*
#primary-nav {
  position: fixed;
  
}*/

nav {
  -webkit-flex: 3;
  -ms-flex: 3; /*
  -webkit-text-size-adjust: 60%;*/
  flex: 3;
  display:flex; /* new*/
  justify-content: center; /*new*/
  letter-spacing:normal;
  background-color: #fdfdfd;
  padding: 4px;
  width: auto;
}
 
nav ul li {
  margin: 0 0px;
  padding: 2px;
  text-transform:uppercase;
  letter-spacing: 1px;  
}

nav ul li:hover {
  padding: 2px;
    /*
  border-top: 3px solid #00bc6b; 
  background-color: rgba(144, 176, 240, 0.283); 
    outline: 3px solid #00bc6b; 
*/
} 

nav li a {
  display: block;
  font-size: 1.37rem;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  letter-spacing: 0.12em; 
  }

nav li a:link {
   font-size: 1.37rem;
}

nav li a:active {
  font-size: 1.37rem;
}

nav li a:visited {
  font-size: 1.37rem;
}

/* make separate one for filter buttons

@keyframes myAnimationNav {
  0%   {color:rgb(1, 170, 226); border-bottom: 2px solid rgb(1, 170, 226);}
  10%   {color:rgb(3, 209, 250); border-bottom: 2px solid rgb(3, 209, 250);}
  25%  {color:rgb(2, 220, 220); border-bottom: 2px solid rgb(2, 220, 220);}
  50%  {color:rgb(1, 234, 179); border-bottom: 2px solid rgb(1, 234, 179);}
  100% {color: #00bc6b; border-bottom: 2px solid #00bc6b;}
}
*/

@keyframes myAnimationNav {
  0%   {color:rgb(1, 170, 226); border-bottom: 2px solid rgb(1, 170, 226);}
  10%   {color:rgb(3, 209, 250); border-bottom: 2px solid rgb(3, 209, 250);}
  25%  {color:rgb(2, 220, 220); border-bottom: 2px solid rgb(2, 220, 220);}
  50%  {color:rgb(1, 234, 179); border-bottom: 2px solid rgb(1, 234, 179);}
  100% {color: #00bc6b; border-bottom: 2px solid #00bc6b;}
}

nav li a:hover {
  font-size: 1.37rem;
  color: #00bc6b;
/*  background-color: rgba(211, 239, 250, 0.426);*/
  text-decoration: none;  
  border-bottom: 2px solid #00bc6b;
}

/* Remove hover-based dropdowns */
@media (min-width: 767px) {
  nav ul li:hover > .submenu {
    display: none; /* no hover effect */
    background-color: #fdfdfd;
  }
}

/*Remove mobile setting on desktop when resizing*/

@media (min-width: 768px) {
  nav ul.show {
    display: flex !important;
    justify-content: center;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  
  .navcol {
    width: 100%;/*
    transform: translateY(50%); */
    margin-top: 50%;;
  }
  
.navul {
  display: block;               /* <-- make menu items visible */
  flex-direction: column;
  padding-left: 2.7rem;
  background-color: white;
  list-style: none;
  margin: 0;
}

.navul a {
  text-align: left;
}
  
  .navul li {
    margin: 4px 0;
    padding-bottom: 0.99rem;
  }

  .navul li:hover {
    margin: 4px 0;
     padding-bottom: 0.99rem;
  }

  nav {
      background-color: #ffffff;
      margin-bottom: 48px;
      display: inline-block; /* new*/
      justify-content: left;
      margin: auto;
      text-align: left;
  }
  
  .navul a:link {
    display: inline-block;
    font-size: 1.1rem;
    padding: 0;
    padding-bottom: .95rem;
  }

  nav ul.show {
    display: inline-block;
  }

  .submenu {
    position: static;
    border: none;
    padding-top: .99rem;
    padding-left: 2rem;
    line-height: 1.5rem;
    width: 100%;
  }
  
  @keyframes myAnimationSub {
  0%   {color:rgb(1, 170, 226);}
  10%   {color:rgb(3, 209, 250);}
  25%  {color:rgb(2, 220, 220);}
  50%  {color:rgb(1, 234, 179);}
  100% {color: #00bc6b;}
}

  /*
  .submenu ul:last-child {
    padding-bottom: -9px;
  } */

.has-submenu {
  justify-items: left;
  padding: 0;
 }

 nav ul li {
  justify-items: left;
   padding: 0;
}
  
  .arrow {
    float: right;
    transition: transform 0.3s ease;
  }

  .has-submenu.open > a .arrow {
    transform: rotate(180deg); /* flips arrow */
  }
}

/* Hamburger */
.hamburger {
  display: none;
  font-size: 2rem;
}

/* --------------- end Top Nav -----*/

.icon {
  padding-top: 3px;
  width: 18px;
}

.icon2 {
  padding-top: 0px;
  width: 16px;
  margin: auto;
}

.email {
  width: 12px;
}

.iconbottom {
  padding-top: 18px;
}

/* Dropdown hover effect 
nav ul li select:hover {
  background-color: #00b0f5;
} */

.dropdownlink {
  background-color: #c6c6c634;
} 

#menulinks {
  text-align: center;
}

.terms {
  width: 900px;
  margin: auto;
  text-align: left;
  line-height: 1.4;
  padding: 3px;
}

.terms a {
  font-size: .98rem;
  color: black;
  text-decoration: underline;
}

.terms a:hover {
  text-transform: uppercase;
}

.uppercase {
  text-transform: uppercase;
}

/* sub menu links
#menulinks a:h2 {
    color: #000405;
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-size: 20px;
      text-decoration: none;
    }

#menulinks a:visited {
      color: #000405;
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-size: 20px;
      text-decoration: none;
    }

#menulinks a:hover {
      color: #011a14;
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-size: 20px;
      text-decoration: underline;
      
    } */

    /* Style the content */
    article {
    /*
      -webkit-flex: 3;
      -ms-flex: 3;
      flex: 3; */
      padding: 20px;
      text-align: center;
      margin: 10px;
    
    }

    .articleabout {
      -webkit-flex: 3;
      -ms-flex: 3;
      flex: 3;

      place-items: center;
    }
  
     @media (max-width: 800px) {
        .articleabout {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
    /* Making iframes responsive 
  
    .container {
      position: relative;
      width: 100%;
      overflow: hidden;
      padding-top: 75%; /* 4:3 Aspect Ratio */
    /*}
  
    .responsive-iframe {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    */
/*
    .paintings {
      background-color: rgb(255, 255, 255);
      color:#00c4d2df;
      text-align:left;
      margin: 0px;
      float: left;
    }
*/

/* ---block of text/images-body of home/about page---- */

.text a:link, .text a:active {
  font-size: 1.125rem;
  text-decoration: underline;
  font-weight: bold;
}

.text a:hover { text-transform: capitalize; }

.gallery {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 1100px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.gallery .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap; /* ensures wrapping if needed */
}

.gallery .row img {
  width: 45%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 3px rgba(144, 176, 240, 0.873);  
/*  box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
}

.gallery .row .text {
  flex: 1;
  font-size: 1.125rem;
  line-height: 1.6;
  text-align: left;
}

/* Alternate rows */
.gallery .row:nth-child(even) {
  flex-direction: row-reverse;
}

/* ✅ Stronger mobile stacking override */
@media screen and (max-width: 900px) {
  .gallery .row {
    flex-direction: column !important;
    align-items: center;
    text-align: left;
  }

  .filterContainer {
    width: 800px;
  }

  .gallery .row img {
    width: 100% !important;
    max-width: 500px;
  }

  .gallery .row .text {
    width: 100%;
    text-align: left;
    margin-top: 1rem;
  }

  .containerForm {
    width: 100%;
  }
}


    table {
      -webkit-flex: 3;
      -ms-flex: 3;
      flex: 3;
      background-color: rgba(250, 250, 251, 0);
      border: 0px inset #00b0f5;
      border-collapse: collapse; /* Merge cell borders for cleaner look */
      margin: 0px auto; /* Center the table with margin */
      color: rgb(0, 146, 195);
      font-size: 1.8rem;
      text-align:left;
      table-layout: fixed; /*Ensures even column distibution */
      float: left;
    } 

    .abouttable {
      z-index: 1;
    }
/*
    .abouttable {
      display: inline-table;
      justify-content: center;
      align-items: center;
      padding: 0 200px;
      margin: 100px 0;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: inline-table;
      justify-content: center;
      align-items: center;
      padding: 0px;
      position: relative; 
      background-color: rgba(3, 27, 62, 0);
      border: 5px solid #004a68; 
      color: rgb(0, 146, 195);
      text-align: left;
      width: 100%;
      table-layout: fixed;
      float: right;
      margin-left: 20px;
      margin-right: 20px; 
    } 

    .tdabout {
      text-align: left;
    }

    .img-painting {
/* width: 100%;
      max-width: 350px; 
      height: auto;
      padding: 8px;
      margin: auto;
 /* margin: 15px;
      border: 0px solid rgb(224, 224, 224); 
    } */

    @media (max-width: 800px) {
        .img-painting {
          width: 100%;
          max-width: 350px;
        }
    }

    .responsive {
      width: 100%;
      max-width: 350px;
      height: auto;
    }

/*  Porfolio Gallery */


.contentPortfolio a {
  text-decoration: none;
  font-size: 18px;
}

/* Center website */
.mainPortfolio {
 max-width: 1200px;
  margin: auto;
}


.rowPortfolio {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.rowPortfolio,
.rowPortfolio > .columnPortfolio {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.columnPortfolio {
  float: left;
  width: 25%;
}

/* Clear floats after rows */
.rowPortfolio:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.contentPortfolio {
  background-color: white;
  padding: 10px; /*
  border:#00000030 solid 1px; */
  margin: 1px; /*
  box-shadow: 1px 3px rgba(0, 0, 0, 0.148);*/
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other *
@media screen and (max-width: 600px) {
  .columnPortfolio {
    width: 100%;
  }

  .terms {
    width: 100%;
  }
} */

/* ------------------ */

     /* Style the testimonials *

    .container {
      border: 2px solid #ccc;
      background-color: #eee;
      border-radius: 10px;
      padding: 16px;
      margin: 0px auto;
      width: 390px;
      justify-content: center;
      align-items: center;
    }

    .container::after {
      content: "";
      clear: both;
      display: table;
    }

    .container img{
      float: left;
      margin-right: 20px;
      border-radius: 50%;
    }

    .container span {
      font-size: 1.25rem;
      margin-right: 15px;
    }

  
    @media (max-width: 768px) {
      .container {
        text-align: center;
        width: 98%;
      }
    }
  
    @media (max-width: 500px) {
      .container {
        text-align: center;
        width: 98%;
      }
    }

    .container img {
      margin: auto;
      float: none;
      display: block;
    }  */

    /* -------- FOOTER ------ */
    footer {    
      -webkit-flex: 3;
      -ms-flex: 3;
      -webkit-text-size-adjust: 100%;
      flex: 3;
      padding-top: 10px;
      padding: 5px;
      padding-bottom: 50px;
      background-color: #d6e2ef67;
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;   
      font-size: 0.7rem;
      text-transform: uppercase;
      text-align: center;
    }

footer ul {
  display: inline-block;
  flex-direction: column;
  flex-wrap: wrap; 
  list-style: none;
  padding: 0;
  padding-top: 48px;
  margin: 0; 
}

footer ul li {
  justify-items: left;
}

footer a:link {
  font-size: 0.875rem;
}

footer p {
  justify-content: center;
  font-size: 0.76rem;
    
}


/* Create three equal columns that floats next to each other */
.columnF {
  float: left;
  width: 33%;
  padding: 10px;

}

.rowF {
  display: flex;
  max-width: 1300px;
  padding-right: 24px;
  margin: auto;
  justify-content: center;
}

/* Clear floats after the columns */
.rowF:after {
  content: "";
  display: table;
  clear: both;
}

.colUL li {
  display: flex;
  margin: 4px auto;
  line-height: 1.6;
  font-size: 0.875rem;
}

.footer-heading {
  font-weight: 600;
  margin-bottom: 6px;
}

.colUL ul {
  margin: 0 auto;
}

/* Mobile Drawer */
#nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 30;
  transition: opacity 0.25s ease;
  opacity: 0;
}
@media (max-width: 767px) {
  nav#primary-nav {
    position: fixed;
    top: 0;
    left: -320px;
    height: 100vh;
    width: 320px;
    max-width: 86%;
    background: white;
    box-shadow: 2px 0 12px rgba(0,0,0,0.12);
    overflow-y: auto;
    transition: left 0.7s cubic-bezier(.22,.9,.17,1);
    z-index: 40;
    padding: 1.5rem 1rem;
  }
  nav#primary-nav.open { left: 0; }
  body.nav-open #nav-overlay { display: block; opacity: 1; }

  .nav-close {
    display: inline-flex;
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 1.6rem;
    cursor: pointer;
    color: #2e3437;
  }
  .hamburger {
    display: inline-block;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    padding-left: 1rem;
  }
  .submenu { position: static; border: none; padding-left: 1.2rem; width: 100%; display: none; }
  .has-submenu.open > .submenu { display: block !important; }
  .has-submenu > a .arrow { transition: transform 0.25s ease; }
  .has-submenu.open > a .arrow { transform: rotate(180deg); }
}

/* old Slideshow *

.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}

/* Slideshow container *
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons *
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);   /* <-- perfect centering *
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
}

/* Left arrow *
.prev {
  left: 10px;    /* controls distance from left edge *
}


/* Right arrow *
.next {
  right: 10px;   /* controls distance from right edge *
  border-radius: 3px 0 0 3px;
}

/* Position the "next button" to the right *
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
*/
/* On hover, add a black background color with a little bit see-through *
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.6);
}

/* Caption text *
.slidetext {
  color: #f2f2f2;
  background-color: rgba(36, 36, 36, 0.181);
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;   
  font-size: 1rem;
  padding: 8px 12px;
  position: absolute;
  bottom: 1px;
  width: 100%;
  text-align: center;
}

.slidetext a {
  color: white;
}

/* Number text (1/3 etc) *
.numbertext {
  color: #f2f2f2;
  background-color: rgba(36, 36, 36, 0.105);
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators 
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/*
.active, .dot:hover {
   background-color:  #0096d6;
}
*/
/* Fading animation *
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size *
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/* Smaller arrows on mobile *
@media (max-width: 600px) {
  .prev,
  .next {
    font-size: 14px;
    padding: 6px;
  }

  .prev { left: 4px; }
  .next { right: 4px; }
}

button.open { 
  border: none; 
  cursor:zoom-in;
}

/* PRODUCT GALLERY slideshow */
.product-gallery {
  max-width: 500px;
  margin: 0 auto;
}

/* Main Image */
.main-image-wrapper {
  width: 100%;
  border: 1px solid #ddd;
  overflow: hidden;
}

#mainImage {
  width: 100%;
  display: block;
  cursor: zoom-in;
}


/* Thumbnails */
.thumbnail-row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.thumbnail {
  width: 65px;
  height: 65px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.2s ease;
}

.thumbnail:hover {
  border: 2px solid #888;
}

.active-thumb {
  border: 2px solid #333;
}

/* MODAL */


/*original*/
.img-modal {
  display: none; 
  position: fixed;
  z-index: 2000;
  padding-top: 1px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.966);
}


.img-modal img {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100vh;
}


.close-modal {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #bfbfbf;
  font-size: 40px;
  cursor: pointer;
}

/* Arrows inside modal */
.modal-prev,
.modal-next {
  color: #ccc;
  font-size: 55px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  padding: 10px;
  transition: 0.2s ease;
}

.modal-prev {
  left: 20px;
}

.modal-next {
  right: 20px;
}

.modal-prev:hover,
.modal-next:hover {
  color: rgb(0, 176, 203);
  transform: translateY(-50%) scale(1.1);
}

/* Mobile size adjustments */
@media (max-width: 600px) {
  .img-modal::after {
    content: "Swipe →";
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-size: 12px;
    opacity: .4;
  }

  .modal-prev, .modal-next {
    font-size: 30px;
    padding: 5px;
    z-index: 44;
  }

  .modal-prev {
    left: 0px;
  }

  .modal-next {
    right: 0px;
  }
}


/* Mobile swipe spacing */
@media (max-width: 600px) {
  .thumbnail {
    width: 55px;
    height: 55px;
  }
}

/* ----- FILTERS GALLERY ----- 

.filterContainer {
  overflow: hidden;
  display: flex;
  width: 1000px;
  margin: auto;
  padding-top: 48px;
  padding-left: 2px;
  padding-right: 2px;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}


@media screen and (max-width: 900px) {
  .filterContainer {
    width: 20%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;   
  }
}

.filterDiv {
  background-color: transparent;
  float: left;
  color: #ffffff;
  width: 350px;
  line-height: 100px;
  text-align: center;
  place-items: center;
  justify-content: center;
  margin: auto;
  padding: 4px;
  display: none; /* Hidden by default /
}

/* Clear floats after rows 
.filterDiv:after {
  content: "";
  display: table;
  clear: both;
} */


/* The "show" class is added to the filtered elements /
.show {
  display: block;
}

/* Style the buttons /
.btn {
  border: none;
  outline: none;
  padding: 10px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Add a light grey background on mouse-over /
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button /
.btn.active {
  background-color: #666;
  color: white;
}
/* box-shadow*


@media screen and (max-width: 768px) {
  .filterContainer {
    width: 100%;
  }
}
*/

.filterContainer {
    width: 80%;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 10px; /*
    box-shadow: 0 0 8px rgba(144, 176, 240, 0.326); */
}

.filter-buttons {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(144, 176, 240, 0.326);
}

.filter-buttons button {
    margin: 5px;
    padding: 10px 15px;
    cursor: pointer;
    border: none;  /*rgb(0, 191, 255) blue*/
    background: rgba(243, 243, 243, 0.701);/*
    border: 1px solid black;*/
    color: #4070c9; /*dark purple 4070c9 - light purple rgba(144, 176, 240, 0.873)*/
    border-radius: 5px;
    transition: 0.3s;
    text-transform: uppercase;
    box-shadow: 0 0 2px rgba(144, 176, 240, 0.873);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
}

@keyframes myAnimationButton {
  0%   {color:rgb(1, 170, 226); border: 2px solid rgb(1, 170, 226);}
  10%   {color:rgb(3, 209, 250); border: 2px solid rgb(3, 209, 250);}
  25%  {color:rgb(2, 220, 220); border: 2px solid rgb(2, 220, 220);}
  50%  {color:rgb(1, 234, 179); border: 2px solid rgb(1, 234, 179);}
  100% {color: #00bc6b; border: 2px solid #00bc6b;}
}

.filter-buttons button:hover {
    background: rgb(255, 255, 255);
    color: #53c160;
    font-weight: bold;
    animation-name: myAnimationButton;
    animation-duration: 4s;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 5px;
}

.product {
    display: inline-block;
    width: 300px;
    margin: 10px;
    padding: 15px;
    border-radius: 8px; /*
    border: 1px solid #ddd;*/
    background: white; /*
    box-shadow: 0 0 3px rgba(144, 176, 240, 0.298);*/
    transition: transform 0.3s;
}

.product:hover {
    transform: scale(1.05);
}

.product img {
    width: 100%;
    border-radius: 5px;
}

.product-name {
    font-weight: bold;
    margin-top: 18px;
    text-transform: uppercase;
}



/*slide show portfolio
.product #mainImage {

} */

/* Thumbnails */
.thumbnail-row-hide {
  margin-top: 10px;
  display: none;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.thumbnail-portfolio {
  width: 100%;
  cursor: zoom-in;
  transition: border 0.2s ease;
}

/* SHOPPING CART */

.header {
    display: flex; /*
    justify-content: space-between;*/
    padding: 1px;
    background: transparent;
    color: white;
    margin: auto;
}

.cart-btn {
  background-color: rgba(144, 176, 240, 0.283);
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;  
  border: none;
  border-radius: 5px;
  color: #4070c9;
  border: 2px solid #ffffff;
}

.cart-btn:hover {
  border: 2px solid rgb(0, 0, 0);
}

.remove-btn {
  background-color: #ffffff;
  border: none;
}

.close-btn {
  background-color: #ffffff;
  padding: 5px;
  border: 2px solid white; 
  border-radius: 3px;
}

.close-btn:hover {
  color: rgb(0, 0, 0);
  border: 2px solid black;
  border-radius: 3px;
}

.cart-popup input[type=submit]  {
  background-color: rgb(1, 170, 226);
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: 2px solid rgb(255, 255, 255);
  width: 100%;
  height: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;

}
/*
.cart-popup input[type=submit]:hover { 
  background-color: #53c160; 
  border: 2px solid rgba(1, 170, 226, 0.519); 
}*/

.cart-icon {
    cursor: pointer;
    position: relative; /*
    top: 435px;
    right: 333px;*/
    padding: 1px;
    margin: 10px 14px;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -10px;
    background: #00bc6b;
    color: white;
    font-size: 12px;
    padding: 3px 7px;
    border-radius: 50%;
}
/*
.product {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    padding: 15px;
    margin: 15px;
    border-radius: 8px;
    background: #f9f9f9;
}
*/
.cart-popup {
    position: fixed;
    top: 60px;
    right: 20px;
    background: white;
    padding: 20px;
    border: 1px solid #ccc;
    display: none;
    width: 300px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 35;
}

    @media (max-width: 800px) {
      section {
          display: flex;
          flex-direction: column;
      }

    .filterContainer {
        padding: 0px;
      }

      .product-list {
        padding: 0px;
      }

      .product {
        padding: 0px;
      }   
  }

    @media (max-width: 768px) {
      section {
          display: block;
          flex-direction: column;
      }

       article {
        padding: 4px;
      }    
   
     .terms {
        width: 100%;
        padding: 4px;
      }   
  }

    @media (max-width: 600px) {
    .img-modal img {
      margin-top: 35%;
      margin-bottom: 30%;
      max-width: 85vw;
      max-height: 85vh;
    }
  }


  /* Responsive layout - makes a two column-layout instead of four columns */
    @media screen and (max-width: 900px) {
      .columnPortfolio {
        width: 50%;
      }

      .terms {
        width: 50%;
      }
    }

  
  @media (min-width: 1024px) and (max-width: 1800px) {
    
   .header-text {
    position: absolute;
    top: 3.5%;          /* move upward */
    left: 0%; 
    width: 100%;
    text-align: center;
    font-family: "Shadows Into Light Two", cursive;
    font-size: 5.8rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 1.9px;
    line-height: 1.8cm;
    text-shadow: 2.5px 2.5px 6px rgba(0,0,0,0.6);
    margin: 0;
    z-index: 22;
  }  
    
}

@media (max-width: 1024px) {
  
  .header-text {
    position: absolute;
    top: 2%;          /* move upward */
    left: 0%; /*
    transform: translate(-50%, -50%);*/
    width: 100%;
    text-align: center;
    font-family: "Shadows Into Light Two", cursive;
    font-size: 3.5rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 1.9px;
    line-height: 1.8cm;
    text-shadow: 2.5px 2.5px 6px rgba(0,0,0,0.6);
    margin: 0;
    z-index: 22;
  }  
  
}


@media (min-width: 770px) and (max-width: 800px) {
   .header-text {
    position: absolute;
    top: 2%;          /* move upward */
    left: 0%; 
    width: 100%; 
    font-family: "Shadows Into Light Two", cursive;
    font-size: 2.8rem;
    text-align: center;
    color: white;
    text-transform: capitalize;
    letter-spacing: 1.8px;
    line-height: 1.3cm;
    text-shadow: 2.5px 2.5px 6px rgba(0,0,0,0.6);
    margin: 0;
    z-index: 22;
  }
}

@media (min-width: 768px) {
  .nav-close { display: none; }
  #nav-overlay { display: none; }
}

@media (max-width: 768px) {

  .hamburger {
    display: block;
    color: rgb(1, 170, 226);
    padding-left: 1rem;  
    /*everything below is new- testing 
      position: absolute;
      transform: translate(-5.5px, .5px) !important;
      text-shadow: 2px 2px 6px rgba(239, 239, 239, 0.6);
      top: .2%;         
      left: 0%; */
      z-index: 33; /*recent add*/
  }
  
  .contactform {
    width: 90%;
    margin-top: 6px;
    padding: 5px;
    margin: auto;
   }
    
  .header {
    justify-content: space-between;
  }
  
  header h1 {
    top: 15%;
    font-size: 2.5rem;
  }

  h1 {
    font-size: 1.6rem;
  }

   .header-text {
    position: absolute;
    top: .2%;          /* move upward */
    left: 0%; 
    width: 100%; 
    font-family: "Shadows Into Light Two", cursive;
    font-size: 1.8rem;
    text-align: center;
    color: white;
    text-transform: capitalize;
    letter-spacing: 1.8px;
    line-height: 1.3cm;
    text-shadow: 2.5px 2.5px 6px rgba(0,0,0,0.6);
    margin: 0;
    z-index: 22;
  }  

  .filter-buttons button {
    font-size: .72rem;  
  }

/* PORTFOLIO GALLERY */

 .filterContainer {
  padding: 0px;
 }

 .product-list {
  padding: 0px;
 }

 .product {
  padding: 0px;
 }

/* FOOTER */

  footer {
    text-align: left;
    padding: 1rem;
  }
    
  footer p {
    justify-content: center;
    text-align: center;
    font-size: 0.60rem;
    
  }

  /*
    li a {
  display: block;
  color: white;
  text-decoration: none;
  }
    */
  .rowF {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .columnF {
    width: 100%;
  }

  .colUL {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .colUL li {
    margin: 4px 0;
    line-height: 1.6;
    font-size: .85rem;
  }

  .colUL a {
    color: #008bc6; /* your link blue */
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-block;
    padding: 0;
  }

  .colUL a:hover {
    text-decoration: underline;
    font-weight: bold;
  }

  /* Email text styling */
  .colUL li:last-child {
    color: #00bc6b; /* your green accent */
    font-weight: 600;
  }

}

/* LIGHTBOX */

@media (max-width: 600px) {
  .thumbnail-portfolio {
    pointer-events: none;
    cursor: auto;
  }
}