/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 22, 2026 */

/* KEEP THIS FOR YOUR LOCAL WAMP SANDBOX */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts2026/montserrat-v31-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/* FOR THE LIVE SERVER: Absolute root path (NO DOTS) */
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts2026/montserrat-v31-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

/*  DEFINE THE 500 (MEDIUM) WEIGHT */
@font-face {
    font-family: 'Montserrat'; /* Keep the exact same family name! */
    src: url('fonts2026/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat'; /* Keep the exact same family name! */
    src: url('fonts2026/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
}

/*  DEFINE THE 600 (SEMI-BOLD) WEIGHT */
@font-face {
    font-family: 'Montserrat'; /* Keep the exact same family name! */
    src: url('fonts2026/montserrat-v31-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}


/*  DEFINE THE 700 (BOLD) WEIGHT */
@font-face {
    font-family: 'Montserrat'; /* Keep the exact same family name! */
    src: url('fonts2026/montserrat-v31-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat'; /* Keep the exact same family name! */
    src: url('fonts2026/montserrat-v31-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}


/* OPEN SOURCE */

@font-face {
    font-family: 'arialregular';
    src: url('fonts2026/arial-webfont.woff2') format('woff2'); 
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'liberation_sansregular';
    src: url('fonts2026/liberationsans-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'liberation_serifregular';
    src: url('fonts2026/liberationserif-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;

}


/* =========================================
   UNIVERSAL BASELINE SETTINGS
   ========================================= */
*,
*::before,
*::after {
  box-sizing: border-box; /* Ensures consistent element sizing across browsers */
}

/* =========================================
   GLOBAL HTML SETTINGS
   ========================================= */
html {
  font-family: 'Georgia', serif;
  font-size: 16px;            /* Base = 1rem */
  font-weight: normal;
  overflow-y: scroll;
}

body {
  background: url("/images/TempleAsetGoldArnk_tlling_white_bg.jpg");
    /*overflow-x: hidden; Prevent horizontal scroll */
/* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); optional */
}

/*-Tokens Admin, Dashboard */

.err {
  color: #ff0000;
  background-color: #ffe6e6;
  border: 1px solid #ff0000;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.msg {
  color: #008000;
  background-color: #e6ffe6;
  border: 1px solid #008000;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}



/*header */
header {
  text-align: center;
  background: url("/images/centralpark_fl_06_update.jpg") no-repeat top;
  background-size: cover;
  background-position: center top;
  height: 55vh; /* This ensures the header always takes up 60% of the viewable screen height */
  min-height:575px; /* Safety cap so it doesn't get too short on the Mac */
  color: white;
  margin: auto;
  padding-bottom: 2rem;

}

/* =========================================
   HEADINGS
   ========================================= */
h1 {

  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  font-size: clamp(1.8rem, 2vw + 0.5rem, 2.25rem); /* Fluid scaling for mobile → 4K */
   /* font-size: clamp(2rem, 2vw + 1rem, 2.3rem); Scales smoothly for 4K & HD */
}





 #mypic, #mypicholder {
  /* Instead of 18.5rem, use a percentage of the screen height */
  margin-top: 29.2vh;
  height: auto;
  width: 10rem;
  border-radius: 180px;
  border: 1.5px solid white;
}
/* =========================================
   NAVIGATION LIST ITEMS
   ========================================= */

   ul {
     padding: 0;
     /*list-style: none;*/
     padding-bottom: 1.5rem;
   }


li {
  display: inline;
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.125rem); /* Fluid font sizing */
  letter-spacing: 0.5px;
  text-transform: capitalize;
  padding: 0 1.32rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}



a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
}

a:hover {
    color: rgba(255, 255, 255, 1);
}

/* About page*/
strong {
    font-weight: bold;
}

.error-link {
  color: black !important;        /* same color as surrounding text */
  text-decoration: none; /* removes underline */
  font-size:1.125rem;
}

.error-link:hover {
  color: black;        /* optional: same hover color */
}



/* =========================================
   MAIN BODY CONTENT
   ========================================= */
.body-content {
  margin-top: 0.5rem;
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
  line-height: 1.5;
  text-align: left;
  text-justify: inter-word;
  color: rgba(0, 0, 0, 1);
}


/* For titles,descriptions under video with cover photo*/
  .body-content-t {

      margin-top: 0.5rem;           /* keeps spacing below the h2 */
      font-family: ; /* 'Playfair Display', serif */
      font-style: italic;           /* adds elegant emphasis */
      font-size: clamp(1rem, 1.2vw + 0.5rem, 1rem);         /* slightly smaller than h2 for hierarchy */
      text-align: center;
      text-justify: inter-word;
      color: rgba(0, 0, 0, 1.0);
      line-height: 1.5;             /* improves readability for multi-line text */
    }

    .body-content-t p {
      margin: 0;                    /* removes default paragraph margins */
    }

    .body-content-t p:first-child {
      margin-bottom: 0.1rem;        /* controls gap between the two subtitle lines */
    }

    #video-timer {
        margin-top:-0.8rem;
        font-size: 1rem;   /* optional, smaller than button text */
        margin-bottom: 0.5rem;
     }

  /* ===============================
       Shared container for videos & YouTube
      =====================================================
   1. THE MAIN VIDEO & BLOG CONTAINERS (Unified Symmetry)
   ======================================================== */
.section-video-900w,
#yt-blog {
  margin: 0 auto !important;     /* Centers both layouts down the page spine */
  width: 100% !important;         /* Keeps fluid responsive scaling identical */
  max-width: 1200px !important;  /* Strict grand horizon hard-stop boundary */
  text-align: center !important;
  display: block !important;
  padding: 0;
  box-sizing: border-box !important;
  border-radius: 9px !important;
  background-color: transparent !important;
}

 
  /* ========================================================
     2. HTML5 VIDEOS INSIDE CONTAINER
     ======================================================== */
  .section-video-900w video {
    width: 100% !important;
    height: auto !important;
    border: 1px solid black !important;    /* Outer frame border */
    border-radius: 9px !important;
    margin: 0.75rem 0 !important;
    display: block !important;
    cursor: pointer;
    box-sizing: border-box !important;
    background-color: transparent !important;
    padding: 0.75rem !important;
  }

  /* ========================================================
     3. YOUTUBE EMBED CONTAINER & IFRAME (The Gallery Matte Fix)
     The YouTube video itself inside that matte */
  #yt-blog iframe {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin-top: 0.5rem;      /* Clean cinematic proportions */
    height: auto !important;
    border-radius: 9px !important;         /* Slight radius so the video corners look clean inside the matte */
    display: block !important;
    border: 1px solid black;
    box-sizing: border-box !important;
    padding: 0.75rem !important;
    background-color:transparent;              /* Removes competing inner borders */
  }
  /* =========================================
       PLAY VIDEO FULLSCREEN BUTTON
       ========================================= */
    .section-video-900w button,
    .section-video-900w .play-video-btn {
  display: inline-block;  /* ensures centering works */
  margin-top: 0.5rem;                 /* slightly smaller top margin */
  padding: 0.12rem 0.50rem;               /* smaller padding */
  line-height: 1.25;   /* text balance */
  margin-bottom: 2rem;
  font-family:'Montserrat',sans-serif;
  font-size: clamp(0.9rem, 1vw + 0.5rem, 0.9rem);
  font-weight: 500;
  text-transform:capitalize;
  color: #000;
  background-color: transparent; /* rgba(82,82,82,1.0)  */
  border: 1px solid #000;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.section-video-900w button:hover,
.section-video-900w .play-video-btn:hover {
  background: #000;
  color: #fff;
}

/* ========================================================
   1. THE MAIN FOOTER CONTAINER (Transparent)
   ======================================================== */
footer.legal-footer {
  width: 100%;                  /* Spans edge-to-edge horizontally */
  background: transparent;      /* Lets your subtle tile/textured background show through */
  padding: 60px 0;
  padding-bottom: 24rem;        /* Generous breathing room below your last video */
  box-sizing: border-box;
}

/* ========================================================
   2. THE INNER CONTENT WRAPPER
   (Kept wide at 1200px so everything aligns with your video tracking)
   ======================================================== */
.footer-content {
  margin: 0 auto !important;               /* Centers the text block perfectly on screen */
  width: 85% !important;                   /* Fluid width matching your video scaling on mobile */
  max-width: 1200px !important;            /* Hard stop matching the exact width of your video */
  box-sizing: border-box;
  padding: 0 10px;              /* Tiny safety cushion for mobile screen edges */
}

/* ========================================================
   3. THE MAIN COPYRIGHT HEADER
   (Stays centered at the top of the footer)
   ======================================================== */
.legal-footer .footer-content .copyright-header {
  max-width: none !important;
  text-align: center !important;
  margin-bottom: 3.5rem !important;
  font-size: 1rem !important;
  font-weight: normal !important;
}

/* ========================================================
   4. THE 6 TEXT LINES INSIDE (UPDATED TO 600PX)
   (Restricted to 600px wide so your eyes don't have to turn to read)
   ======================================================== */
footer.legal-footer p {
  max-width: 600px !important;  /* NEW: Restricts only the heavy paragraph blocks */
  margin-left: auto !important;  /* NEW: Centers the text column inside the 1200px wrapper */
  margin-right: auto !important; /* NEW: Centers the text column inside the 1200px wrapper */

  text-align: left;          /* Stretches the text to align left AND right edges */
  text-justify: inter-word;     /* Ensures clean spacing between words when justified */
  margin-bottom: 12px;          /* Clean, uniform spacing between your 6 legal lines */
  font-size: 0.9rem;            /* Keeps legal text clean, highly readable, but elegant */
  line-height: 1.6;
  color: #111111;               /* Sharp, sophisticated black text over your light tile background */
}

   /* ========================================================
      5. THE 3 LINKS (UPDATED FOR 600PX EDGE-TO-EDGE LOCK)
      ======================================================== */
   .footer-utility-links {
     max-width: 600px !important;   /* Locks the container width to match the text column */
     width: 100% !important;
     margin-left: auto !important;  /* Centers the link box on the page */
     margin-right: auto !important; /* Centers the link box on the page */
     margin-top: 4rem !important;   /* Breathing room below the text */
     padding-bottom: 2rem !important;

     /* FLEXBOX MAGIC: Forces edge-to-edge alignment with the middle link dead center */
     display: flex !important;
     justify-content: space-between !important;
     align-items: center !important;
     visibility: visible !important;
   }

   .footer-utility-links a,
   .footer-utility-links a:link,
   .footer-utility-links a:visited {
     font-family: 'liberation_serifregular', serif !important;
     font-weight: normal !important;
     color: #333333 !important;        /* Stealth dark charcoal */
     text-decoration: none !important;
     font-size: 0.85rem !important;
     letter-spacing: 0.15em !important; /* Premium gallery tracking */
     text-transform: uppercase !important;
     display: inline-block !important;

     /* REMOVED: We set margin to 0 because Flexbox is doing the perfect spacing work now! */
     margin: 0 !important;

     transition: color 0.3s ease;
   }

/* Your custom bold zoom interaction on hover */
.footer-utility-links a:hover,
.footer-utility-links a:active {
  color: #000000 !important;
  font-weight: bold !important;
}


/* ========================================================
   6. RESPONSIVE LAYOUT SAFETY (For smooth mobile scaling)
   ======================================================== */
@media (max-width: 1024px) {
  .footer-utility-links a { margin: 0 40px !important; }
}
@media (max-width: 768px) {
  .footer-utility-links a { margin: 0 25px !important; font-size: 0.8rem !important; }
}
@media (max-width: 480px) {
  .footer-utility-links a { margin: 0 12px !important; font-size: 0.75rem !important; }
}

section {
   margin:0 auto;
   max-width:600px;
}

/* END of Base Styles */
a:link {

    color: rgba(255,255,255,0.9);
    text-decoration: none;
}


a:visited {

  color: rgba(255,255,255,1.0);
  text-decoration: none;

}


a:hover {

    color: rgba(255, 255, 255,1.0); /*255, 0, 128 or */
    text-decoration: none;
    /*border-bottom: 1px solid;*/
}


a:active {
  color: rgba(255, 255, 255,0.9);
  text-decoration: none;
  /*border-bottom: 1px solid;*/
}

.pp:link {
  color: rgba(0,0,0,1.0);
  text-decoration:none;
}

.pp:visited {
  color: rgba(0,0,0,1.0);
  text-decoration: none;
}

.pp:hover {
  color: rgba(0,108,0,1.0);
  text-decoration: none;
}
.pp:active {

  color: rgba(0,0,0,1.0);
  text-decoration: none;
}

a:link#find {
  font-weight: 600;
  color: rgba(0,0,0,1.0);
  text-decoration: none;


}

a:visited#find {
  color: rgba(0,0,0,1.0);
  text-decoration: none;
}

a:hover#find {
color: rgba(99,99,99,1.0);
 /*255, 0, 128 or */
  text-decoration: none;
/*border-bottom: 1px solid;*/
}

a:active#find {
color: rgba(0, 0, 0,1.0);
text-decoration: none;

}



#portfolio, h2 {
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  text-align:center;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 1.75rem); /* Slightly smaller than h1, fluid */
  font-family:'Montserrat',sans-serif;
  font-weight: 500;
}

/*  H2 TextScramble JavaScript Animation for WELCOME ON HOME PAGE */
/*  When using Typewriter Animation(welcome_typewriter_text.js and
welcome_typewriter_text_v2.js files): Swap out .text and put in #typing, height: 28.4px for WELCOME ON HOME PAGE */

#typing {
  height:1.5rem;
  margin-top:0.5rem;
  margin-bottom:1rem;
  text-align: center;
  font-size:   clamp(1.5rem, 2vw + 0.5rem, 1.75rem); /* Slightly smaller than h1, fluid */
  font-family:'Montserrat',sans-serif;
  font-weight: 500;
  color: rgba(0,0,0,1.0);
}

#typing-blog,h2 {
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  text-align: center;
  font-size:  clamp(1.5rem, 2vw + 0.5rem, 1.75rem); /* Slightly smaller than h1, fluid */
  font-family:'Montserrat',sans-serif;
  font-weight: 500;
  text-transform:;
  color: rgba(0,0,0,1.0);

}

h3 {
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  text-align:center;
  font-size:  clamp(1.5rem, 2vw + 0.5rem, 1.75rem);
  font-family:'Montserrat',sans-serif;
  font-weight: 500;
}

/* For h3 for Distilled Water Music Video to add more top space for info beneath in <p> tags.*/

#dwmv {
  margin-top:0.5rem;
  text-align:center;
  font-size:  clamp(1.4rem, 2vw + 0.5rem, 1.6rem);
  font-weight:600;
  margin-bottom:0.6rem;

}


/*First-of-its-kind caption under Distilled Water Music Video on Homepage */

#first {
  text-align: center;
  text-transform:uppercase;
  line-height:1.5;
  font-weight:600;
  color: rgb(0 0 0);
  letter-spacing:1px;
}




#ch {
font-weight:400;
color: rgba(0, 0, 0,1.0);
text-decoration:none;

}

#ch:hover {

color: rgba(99, 99, 99,1.0);


}


#about {

 margin-top:2rem;
 padding-bottom: 24rem;


}

#hw {
  margin-top:0.5rem;
  text-align:center;
  font-size: clamp(0.82rem, 0.75vw + 1.125rem);
  font-style:italic;
  margin-bottom:0.3rem;
}



/* For the shop-wip.html to shop.html page h2 in <section> tags */

#shop {
   margin-top:0.85rem;
   margin-bottom:-0.5rem;
   text-align:center;
   font-size: 1.5rem;
   font-weight:500;
}

/* Scoped CSS (ds) for the Shop-wip.html page to shop.html page */

.shop-page {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.4;
  padding: 20px;
  color:#000;
  font-weight: 500;
  /*background-color: #f9f9f9;*/
}

.shop-page h1,
.shop-page p,
.shop-page ul,
.shop-page li,
.shop-page button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Product Container */
.shop-page .product-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 8px;
/*background-color: #fff;*/
/*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
}

/* Large Product Image */
.shop-page .product-image {
  flex: 1 1 60%;
  text-align: center;
}

.shop-page .product-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Thumbnails Column */
.shop-page .thumbnails {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 10%;
  justify-content: flex-start; /* Align thumbnails to the top */
  align-items: center; /* Center thumbnails horizontally */
}

.shop-page .thumbnails img {
  width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.shop-page .thumbnails img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Product Details Section */
.shop-page .product-details {
  flex: 1 1 35%;
}

.shop-page .product-details .target-h1 {
  font-size: 1.5rem;
  margin-top: -16px;
  margin-bottom: 5px;
  font-weight: 600;
  text-transform: capitalize;
  color: #333;
}

.shop-page .product-details .price {
  font-size: 1rem;
  color:#000; /* #007BFF */
  /*font-weight: 600;*/
  margin-bottom: 10px;
}

.shop-page .product-details .description {
  font-size: 1rem;
  color: #555;
  margin-bottom: 10px;
}

.shop-page .product-details .features-subheading {
   font-size: 1.25rem;
   font-weight: 600;
   margin-bottom: 0px;/*Increase from 0px to 10px*/
}

.shop-page .product-details .features {

  list-style-type: disc;
/*  padding-left: 10px;*/
  text-align: left;
  margin-bottom: 28px;
  color: #555;
}

/* class="target-item" RePresents li (s) for Shop */
.shop-page .product-details .features .target-item {
    display:block;
    font-size: 1rem;
    color: #555;
    letter-spacing: 0px;
    text-transform:none;
  /*  font-weight: bold;*/
  /*   margin-bottom: 10px;*/
}

.shop-page .product-details .add-to-cart {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 15px 30px;
  margin-bottom: 128px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.shop-page .product-details .add-to-cart:hover {
  background-color: #0056b3;
}

/* Responsive Layout for Mobile Devices */
@media (max-width: 768px) {
  .shop-page .product-container {
    flex-direction: column;
  }

  .shop-page .thumbnails {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:left;
  }

  .shop-page .thumbnails img {
    width: 25%;
  }
}

/* Fix for iPhone Landscape Mode */
@media (max-device-width: 812px) and (orientation: landscape) {
  .shop-page .product-container {
    display: flex;
    flex-direction: row; /* Side-by-side layout for image and thumbnails */
    gap: 10px;
    align-items: flex-start; /* Align items to the top */
    justify-content: center; /* Center the image and thumbnails horizontally */
  }

  /* Large Image */
  .shop-page .product-image {
    flex: 0 1 48%; /* Reduce large image width to 40% (10% reduction) */
    text-align: center; /* Center the image horizontally */
  }

  .shop-page .product-image img {
    max-width: 95%; /* Ensure the image fits within its container */
    height: auto; /* Maintain aspect ratio */
  }

  /* Thumbnails Column */
  .shop-page .thumbnails {
    flex: 0 1 18%; /* Reduce thumbnails width to 15% (20% reduction) */
    display: flex;
    flex-direction: column; /* Stack thumbnails vertically */
    gap: 5px;
    align-items: center; /* Center thumbnails horizontally */
  }

  .shop-page .thumbnails img {
    width: 70%; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
  }

  /* Product Details Section */
  .shop-page .product-details {
    flex: 1 1 50%; /* Take up full width below the image and thumbnails */
    text-align: left; /* Left-align the product details */
    padding: 10px;
    margin-top: 10px; /* Add some space between the image/thumbnails and details */
    margin-left: 124px;
/*Use a dynamic margin like( margin-left: calc(40% - 20px); if:
1. The large image dimensions or percentage width might change in the future.
2. You want the layout to be more flexible and responsive to different screen sizes or image sizes.*/
    }

  .shop-page .product-details .target-h1 {
    font-size: 1.5rem; /* Reduce font size for better fit */
    margin-top:-20px;

  }

  .shop-page .product-details .price {
    font-size: 1rem; /* Reduce font size for better fit */
  }

  .shop-page .product-details .description  {
    font-size: 1.125rem; /* Reduce font size for better fit */
  }

  .shop-page .product-details .features .target-item {
    font-size: 0.65rem; /* Reduce font size for better fit */
  }
}

/* END of Scoped (ds) CSS code for shop-wip.html to shop.html*/

/*  CSS For Spinning Image(any image) */

 @keyframes spinning
        { from { transform: rotate(0deg) }
     to { transform: rotate(360deg) }
 }
 .spin {
   animation-name: spinning;
   animation-duration: 3s;
   animation-iteration-count: infinite;
/* linear | ease | ease-in | ease-out | ease-in-out */
   animation-timing-function: linear;
}

/* Apply class="spin" or other class or id name
(e.g. swap out .spin for #mypic because it represents the name of the element in the html file)
to html element that represents the image in the html file */


/* CSS FOR  CANCELING  MYPIC IMAGE FADE IN FROM index.html to about html */

.fade-in-image.cut {
     animation: fadeIn 0s;
     -webkit-animation: fadeIn 0s;
     -moz-animation: fadeIn 0s;
     -o-animation: fadeIn 0s;
     -ms-animation: fadeIn 0s;
   }

    @keyframes fadeIn {
     0% {opacity:1;}
     100% {opacity:1;}
   }

   @-moz-keyframes fadeIn {
     0% {opacity:1;}
     100% {opacity:1;}
   }

   @-webkit-keyframes fadeIn {
     0% {opacity:1;}
     100% {opacity:1;}
   }

   @-o-keyframes fadeIn {
     0% {opacity:1;}
     100% {opacity:1;}
   }

   @-ms-keyframes fadeIn {
     0% {opacity:1;}
     100% {opacity:1;}
   }


/* CSS FOR ABOVE MYPIC IMAGE FADE IN on About.html or the ABOUT link*/

.fade-in-image {
     animation: fadeIn 1s;
     -webkit-animation: fadeIn 1s;
     -moz-animation: fadeIn 1s;
     -o-animation: fadeIn 1s;
     -ms-animation: fadeIn 1s;
   }
    @keyframes fadeIn {
     0% {opacity:0;}
     100% {opacity:1;}
   }

   @-moz-keyframes fadeIn {
     0% {opacity:0;}
     100% {opacity:1;}
   }

   @-webkit-keyframes fadeIn {
     0% {opacity:0;}
     100% {opacity:1;}
   }

   @-o-keyframes fadeIn {
     0% {opacity:0;}
     100% {opacity:1;}
   }

   @-ms-keyframes fadeIn {
     0% {opacity:0;}
     100% {opacity:1;}
   }




.fade-out {

     animation: fadeOut 2s;
     opacity: 0;
   }


   @keyframes fadeOut {
   from {
     opacity: 1;
   }
   to {
   opacity: 0;
   }
}

title {

    transition: opacity 0.1s ease; /* Title will fade in over 0.1 seconds  */

}


title:hover {

    opacity: 1; /* Fully visible on hover */

}

/* CONTACT FORM GLOBAL */

* {
  box-sizing: border-box;
}

/* Container */
.container {
  max-width: 600px;
  margin: 2rem auto 3rem auto; /* TOP: 3rem, RIGHT/LEFT: auto, BOTTOM: 0 */rem;
  border-radius: 5px;
  padding-bottom: 24rem;
}

/* Headings */
#contact {
  margin-top: -0.5rem;
  margin-bottom:1rem;
  text-align:center;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem); /* Slightly smaller than h1, fluid */
  /*font-weight:600;*/
  letter-spacing: 0.25px;
  font-family:'Montserrat',sans-serif;
}


#contact-subheading {
  font-size: clamp(1rem, 0.75vw + 0.85rem, 1.125rem);
  font-weight: 500;
  line-height:1.5;
  text-align: left;
  color:rgba(0,0,0,1.0);
  margin-bottom:1.5rem;
}



/* Form layout */
.form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family:;
  color:;
}

/* Labels */
.form label {
  font-weight: 600;
  font-size: clamp(1rem, 0.75vw + 0.85rem, 1.125rem);
  display: block;
}

/* Name, Email and Message Labels
  .form>.nem{
  font-weight: 400;
  font-size: clamp(1rem, 0.75vw + 0.85rem, 1.125rem);
  display: block;
}*/

/* Hint text */

abel, .hint {
  display: block;
  font-size: clamp(1rem, 0.75vw + 0.85rem, 1.125rem);
  margin-top: 4px;
  font-weight: 400;
  line-height:1.5;
}


/* Inputs and textarea */
input[type=text],
input[type=email],
textarea,
select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 2rem;
  resize: vertical;
  font-weight: 500;
  font-family:;
}

/* Submit button */

input[type=submit] {
  font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem; /* Matches input scale but carries more visual weight */
    font-weight: 500; /* Bold */
    text-transform: capitalize;
    padding: 12px 30px;
    background-color: #000000; /* Solid structural anchor for the form */
    color: #ffffff;
    border: none;
    /*/border-radius: 9px;*/
    cursor: pointer;
    margin-bottom: 2.25rem;
    transition: background-color 0.2s ease;
}

input[type=submit]:hover {
  background-color: #333333; /* Smooth interactive feedback */
}

/* Go to top (Javascript) button */
#myBtn {
  display: none;
  position: fixed;
  bottom: 	7.7rem;/*84px*/
  right: 10rem;/*84px*/
  text-transform: capitalize;
  font-size:  clamp(1rem, 0.75vw, 1.125rem);
  font-weight: 500;
  border: none;
  outline: none;
  background-color: rgba(0,0,0,1.0);
  color:rgba(255,255,255,1.0);
  cursor: pointer;
  padding: 0.9375rem;
  transition: all 0.2s ease;
}



#myBtn:hover {
  background-color: #333333;
}



/* For Opt-in on contact and privacy policy pages  */
.opt {
  line-height: 1.5;
  font-weight: 600;
  font-size: 1rem;
}

#lh-i {
line-height: 1.5;
font-style:italic;
}

.lh {
  line-height: 1.5;
  font-size: 1rem;
}


p.lh a[href^="tel"] {
  color: black !important;
  text-decoration: none;
}

/* For footer  */
.f-lh {
font-size: 0.8rem;
line-height: 1.5;
text-align: justify-left;
}
/* For privacy policy heading */
#pp-heading {
  margin-top:1rem;
  text-align:justify-left;
  font-size: 1.5rem;
  font-weight:600;
}

/* For Copyright styling of illegal and U.S. Federal Law with <span tags> */
.cop {
 font-family:'times new roman';
 font-weight:600;
 font-style:italic;
 font-size:1.125rem;
}

/* For privacy policy email link for terms and conditions */
.tc:link {
  color: rgba(0,0,0,1.0);
  text-decoration: underline;
}

.tc:visited {
  color: rgba(0,0,0,1.0);
  text-decoration: none;
}

.tc:hover {
  color: rgba(0,0,0,1.0);
  text-decoration: none;
}

.tc:active {

  color: rgba(80,160,15,1.0);
}/* Use to make semi-bold or bolder text 600 or 700 on About page*/

b {
font-weight: 600;
}

/* CodePen HomeJS Typewriter  */
.typewrite {
text-align: center;
font-size:2rem;
margin: 0 auto;
}
 * {
color:#000;
text-decoration: none;
}

/* CodePen HomeJS Typewriter(At the End) */

#phone {
  font-size:0.75rem;
  color:rgba(0,0,0,1.0);
  text-align:center;
  margin-bottom:24px;


}

.vote{
    margin-top:2.25rem;
   }

.dud {
  color: rgba(0,0,0,1.0);
}


#yt,#email {
  font-size:1.05rem;
}


.social-ap{
opacity:0;
  }


.ap{
  opacity:0;
}


/* social media brands, skype and email icons */
 .fa-brands:hover, .fa:hover, .fa-regular:hover {

                         color:#666666;
}


/*   Navbar Below*/
.below {
  margin-top: ;
  text-align:center;
  padding: 8px;
  background: rgba(0,0,0,0);
  padding-bottom: 10px;

}

.below a:link {
  color: rgba(0,0,0,1.0);
  text-decoration: none;


}

.below a:hover{
  color: rgba(0,0,0,1.0);
  text-decoration: none;
}

.below a:visited{
color: rgba(0, 0, 0,1.0); /*255, 0, 128 or */
border-bottom: 1px solid;
}

.below a:active{
color: rgba(0, 255, 0,1.0);
border-bottom: 1px solid;
}



/*  THANK YOU PAGE)*/
  .thankyou {
    font-size: 1.25rem; /* Slightly larger than your 1.125rem body text */
    line-height: 1.6;   /* Keeps the multi-line text easy to read */
    max-width: 600px;   /* Prevents the lines from stretching too wide on desktop */
    margin: 2rem auto;  /* Centers it nicely if your layout is centered */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.thankyou strong {
    display: block;
    font-size: 1.5rem; /* Makes the initial "Thank you!" a nice, bold header */
    margin-bottom: 0.5rem;
}

.spam-notice {
    display: block;
    margin-top: 1rem;
    font-size: 1.125rem; /* Drops the utility note back down to your standard body size */
    opacity: 0.85;       /* Softens it visually so it doesn't compete with the main thanks */
}


#credits {
    margin-top: 0.75rem;
    text-align: center;
    font-weight: 500;
    font-size:clamp(1.4rem, 2.5vw, 1.6rem); /* Slightly smaller than h1, fluid */
    margin-bottom: 0.5rem;
    font-family:'Montserrat',sans-serif;
}

.credits {
   text-align:center;
   line-height:1.3;
}

/* ADDING SPACE LAST CREDIT ON BLOG  */
.space  {
  padding-bottom: 8rem;
}

/* Responsive Design */

@media (max-width: 1367px) {

  header {
    background: url("/images/centralpark_fl_06_update-mobile.jpg") no-repeat top;
      background-size: cover;
      background-position: center top;
      height: 416px;     /* Reset Desktop height */
      min-height:300px; /* Give iPad a nice cinematic but smaller height */
    }

h1 {
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* font-size: clamp(1.75rem, 4vw, 2.25rem); Fluid scaling for mobile → 4K */
  font-size:2rem;
}


li {
 display: inline;
 letter-spacing: 0.5px;
 text-transform: capitalize;
 padding: 0 1.56rem;
 font-weight: 500;
}


#mypic,
#mypicholder{
  margin-top: 11rem;
  width: 8rem;
 }


@media (max-width: 1025px) {

header {
background: url("/images/centralpark_fl_06_update-mobile.jpg") no-repeat top;
 height: 416px;     /* Reset Desktop height */
 min-height:300px; /* Give iPad a nice cinematic but smaller height */
 background-position:42% top;

}

h1 {
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* font-size: clamp(1.75rem, 4vw, 2.25rem); Fluid scaling for mobile → 4K */
  font-size:2rem;
}


li {
 display: inline;
 letter-spacing: 0.5px;
 text-transform: capitalize;
 padding: 0 1.56rem;
 font-weight: 500;
}


#mypic,
#mypicholder{
  margin-top: 11rem;
  width: 8rem;
 }

#portfolio, h2 {
margin-top:0.5rem;
margin-bottom:0.5rem;
font-size:1.5rem; /* Slightly smaller than h1, fluid */
}

/*  H2 TextScramble JavaScript Animation for WELCOME ON HOME PAGE */
/*  When using Typewriter Animation(welcome_typewriter_text.js and
welcome_typewriter_text_v2.js files): Swap out .text and put in #typing, height: 28.4px for WELCOME ON HOME PAGE */

#typing {
height:1.5rem;
margin:0.5rem;
text-align: center;
font-size: 1.5rem; /* Slightly smaller than h1, fluid */
/*letter-spacing:0.25px;*/
color: rgba(0,0,0,1.0);
}

#typing-blog,h2 {
height:1.5rem;
text-align: center;
/*font-family:'Montserrat',sans-serif;*/
font-size: 1.5rem; /* Slightly smaller than h1, fluid */
text-transform:;
color: rgba(0,0,0,1.0);
}

h3 {
margin-top:0.5rem;
margin-bottom:0.5rem;
text-align:center;
font-size: 1.5rem;

}

/* For h3 for Distilled Water Music Video to add more top space for info beneath in <p> tags.*/

#dwmv {
margin-top:0.5rem;
text-align:center;
font-size: 1.375rem;
margin-bottom:0.6rem;

}

#credits {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 1.5rem; /* Slightly smaller than h1, fluid */
    margin-bottom: 0.5rem;
}


}


/* Styles for iPad 4 in portrait mode */
@media (max-width: 768px) {

header {
   background: url("/images/centralpark_fl_06_update-mobile.jpg") no-repeat top;
   height: 416px;     /*Reset Desktop height*/
   min-height:300px;  /*Give iPad a nice cinematic but smaller height */
   background-position:97% 1%;
}

h1 {
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* font-size: clamp(1.75rem, 4vw, 2.25rem); Fluid scaling for mobile → 4K */ */
}


  li {
 display: inline;
 letter-spacing: 0.5px;
 text-transform: capitalize;
 padding: 0 1.56rem;
 font-weight: 500;
}


  #mypic,
  #mypicholder{
    margin-top: 11rem;
    width: 8rem;
   }


  #portfolio, h2 {
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  font-size: 1.5rem; /* Slightly smaller than h1, fluid */
}

/*  H2 TextScramble JavaScript Animation for WELCOME ON HOME PAGE */
/*  When using Typewriter Animation(welcome_typewriter_text.js and
welcome_typewriter_text_v2.js files): Swap out .text and put in #typing, height: 28.4px for WELCOME ON HOME PAGE */

#typing {
  height:1.5rem;
  margin:0.5rem;
  font-size: 1.5rem; /* Slightly smaller than h1, fluid */
  color: rgba(0,0,0,1.0);
}

#typing-blog,h2 {
  height:1.5rem;
  font-size: 1.5rem; /* Slightly smaller than h1, fluid */
  text-transform:;
  color: rgba(0,0,0,1.0);

}

h3 {
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  text-align:center;
  font-size: 1.5rem;
}

/* For h3 for Distilled Water Music Video to add more top space for info beneath in <p> tags.*/

#dwmv {
  margin-top:0.5rem;
  text-align:center;
  font-size: 1.375rem;
  font-weight:600;
  margin-bottom:0.6rem;

}

#credits {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 1.5rem;  /*Slightly smaller than h1, fluid */
    margin-bottom: 0.5rem;
 }

}

/* The CSS code below adjusts the content below for mobile devices at the less than 896px width! */

@media (max-width: 896px) and (orientation: landscape) {



header {
   text-align: center;
   background: url("/images/centralpark_fl_06_update-mobile.jpg") no-repeat top;
   background-size: cover;
   background-position: 90% 6%;
   height:10vh;
   color: white;
   margin: 0 auto;
 }

 #mypic,
 #mypicholder{
   margin-top:4rem;
   width: 8rem;
  }

h1 {
    margin: 0;
    padding: 1rem 0;
    font-weight: 400;
    font-size: 1.8rem;
  }

  li {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1.4;
    text-transform: capitalize;
    padding: 0 0.86rem 0 0.85rem; /* top right bottom left */
    font-weight: 500;
  }

  .body-content {
    font-size: 1rem;
    line-height: 1.5;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    text-align: left;
    color: rgba(0, 0, 0, 1);
  }

  /* Titles / descriptions under videos */
  .body-content-t {
    margin-top: 0.5rem;
    font-size:1rem;
    text-align: center;
    text-justify: inter-word;
    color: rgba(0, 0, 0, 1.0);
    line-height: 1.5;
  }
  .body-content-t p {
    margin: 0;
  }
  .body-content-t p:first-child {
    margin-bottom: 0.1rem;
  }

  #portfolio, h2, h3, #credits {
    text-align: center;
    font-size: 1.5rem;
    margin: 0.75rem 0;
  }

  #yt, #email {
    font-size: 1.3rem;
}

}

/*The CSS code below adjusts the content below for mobile devices at the less than 480px width!*/
/* The CSS code below adjusts the content below for mobile devices at less than 480px width! */
@media (max-width: 480px) {

  header {
    background: url("/images/centralpark_fl_06_update-mobile.jpg") no-repeat center top;
    background-position: 67% 12%;
    height: 300px;
    min-height:555px;
  }


.section-video-900w,
       #yt-blog,
.footer-content {
 width: 90% ;  /* Bumped to 95% for an extra push */
}

footer.legal-footer {
 padding-top: 3rem;
 padding-bottom: 10rem;
}


#mypic,
#mypicholder {
  margin-top: 6.8rem;
  width: 8rem;
 }


 h1 {
   text-transform: uppercase;
   padding: 1rem 0;
   font-size: 1.8rem;
   letter-spacing: 0.05em;
 }

 li {
   display: block;
   font-size: 1rem;
   line-height: 1.5;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   padding: 0.5rem 0.75rem;
   font-weight: 500;
 }

 #about {

  margin-top:2rem;
  margin-bottom:3rem;
  padding: 0 1.25rem;


 }

 .container {

   margin: 2rem auto 3rem auto;  /*TOP: 3rem, RIGHT/LEFT: auto, BOTTOM: 0 rem;*/
   padding: 0 1.25rem;
   border-radius: 5px;
 }



 .body-content {
   font-size: 1rem;
   line-height: 1.6;
   color: rgba(0,0,0,1.0);
 }

 /* Titles / descriptions under videos */
 .body-content-t {
   margin-top: 0.5rem;
   font-size:1rem;
   text-align: center;
   text-justify: inter-word;
   color: rgba(0, 0, 0, 1.0);
   line-height: 1.5;
 }
 .body-content-t p {
   margin: 0;
 }
 .body-content-t p:first-child {
   margin-bottom: 0.1rem;
 }

 #portfolio, h2, h3, #credits {
   text-align: center;
   font-size: 1.5rem;
   margin: 0.75rem 0;
 }

 #shop {
   font-size: 1.5rem;
   font-weight: 600;
   text-align: center;
 }

 .social {
   display: flex;
   justify-content: center;
   align-items: center;
   letter-spacing: 1.5rem;
   padding: 2rem 1rem 0.75rem;
   max-width: 600px;
   margin: 0 auto;
 }

 #yt, #email {
   font-size: 1.15rem;
 }

}