/*

Breezed Template
https://templatemo.com/tm-543-breezed

Coastal Treasures FL
Consolidated stylesheet. This single file replaces:
  - templatemo-breezed.css
  - products-style.css
  - contact-us.css
  - the inline <style> blocks that used to live in about-us.html,
    gallery.html, products.html and artClasses.html
Bootstrap and Font Awesome remain as their own vendor files
(assets/css/bootstrap.min.css, assets/css/font-awesome.css) since
they're third-party frameworks, not site-authored styles.

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio
13. page: about us (bio boxes, parallax)
14. page: gallery / art classes (image grid)
15. page: products / merch (search + category cards)
16. mobile responsiveness enhancements
--------------------------------------------- */

/*
---------------------------------------------
font & reset css
---------------------------------------------
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

/*
---------------------------------------------
reset
---------------------------------------------
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.body-wrapper{
  overflow-x: hidden;
}
/* Locks background scroll while the full-screen mobile nav is open */
body.nav-lock-scroll {
  overflow: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: 1s ease-in-out;
  background: linear-gradient(to right, #85C7F2, #21FFCB);
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #777;
}

/*
---------------------------------------------
global styles
---------------------------------------------
*/
html,
body {
  background: linear-gradient(to right, #85C7F2, #21FFCB);
  font-family: 'Raleway', sans-serif;
}

.turtle-background{
  background: url(../img/images/pngwing.com\ \(19\).png);
  background-size: 440px auto;
  background-repeat: no-repeat;
  background-position: right;
  background-attachment: fixed;
}
::selection {
  background: #5fb759;
  color: #fff;
}

::-moz-selection {
  background: #5fb759;
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

a.main-stroked-button {
  font-size: 13px;
  border-radius: 25px;
  padding: 11px 25px;
  background-color: transparent;
  border: 2px solid #fff;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-stroked-button:hover {
  background-color: #fff;
  color: #5fb759;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
}

.br-appear{
  display: none;
}

a.main-filled-button {
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #fff;
  text-transform: uppercase;
  color: #5fb759;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-filled-button:hover {
  color: #fff;
  background-color: #5fb759;
  transform: translateY(-2px);
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
}

a.main-button-icon {
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #5fb759;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  display: inline-block;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-button-icon:hover {
  background-color: #4ea34c;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
}

a.main-button-icon i {
  margin-left: 5px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a.main-button-icon:hover i {
  padding-left: 5px;
}

button.main-button {
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  border-radius: 25px;
  padding: 10px 25px;
  background-color: #fff;
  text-transform: uppercase;
  color: #5fb759;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

button.main-button:hover {
  color: #fff;
  background-color: #5fb759;
  transform: translateY(-2px);
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
}

button.main-button-icon {
  border: none;
  outline: none;
  font-size: 13px;
  border-radius: 25px;
  padding: 13px 25px;
  background-color: #5fb759;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

button.main-button-icon:hover {
  background-color: #4ea34c;
  transform: translateY(-2px);
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
}

button.main-button-icon i {
  margin-left: 5px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

button.main-button-icon:hover i {
  padding-left: 5px;
}

a.text-button-icon {
  text-transform: uppercase;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.text-button-icon i {
  margin-left: 5px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a.text-button-icon:hover {
  color: #5fb759;
  background-color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.15);
}

a.text-button-icon:hover i {
  padding-left: 5px;
}


.section-heading h6 {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.section-heading h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-top: 20px;
  margin-bottom: 0px;
}


/*
---------------------------------------------
header
---------------------------------------------
*/
.header-area .main-nav .nav .current,
.header-area .main-nav .nav li:hover {
  border: 1px solid #5fb759;
  border-radius: 20px;
}

.current-img {
  width: 75px;
  height: auto;
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  top: 50px;
  left: 0%;
  transition: 0.3s ease-in-out;
}

.nav li:hover ~ .current-img {
  top: 40px;
}

.nav li a:hover ~ .current-img {
  left: calc(50% - 37.5px);
}

.sand{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999;
  width: 100vw;
  height: auto;
}
.background-header {
  background-color: #fff;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 80px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  z-index: 0;
}
.header-area .main-nav .logo img{
  width: 100px;
  height: auto;
  border-radius: 20px;
  margin-left: -100px;
}

.header-area .main-nav .logo:hover ~ .logoHover-img{
  margin-left: 0%;
}

.header-area .main-nav .logoHover-img{
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  position: absolute;
  width: 100px;
  height: auto;
  margin-left: -50%;
  z-index: -1;
  transition: 2s ease-in-out;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 27px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid transparent;
  border-radius: 20px;
  -webkit-transition: border-color 0.3s ease 0s, background-color 0.3s ease 0s;
  -moz-transition: border-color 0.3s ease 0s, background-color 0.3s ease 0s;
  -o-transition: border-color 0.3s ease 0s, background-color 0.3s ease 0s;
  transition: border-color 0.3s ease 0s, background-color 0.3s ease 0s;
}

.header-area .main-nav .nav .search-icon {
  float: right;
  margin-left: 15px;
}

.header-area .main-nav .nav .search-icon a {
  background-color: #fff;
  color: #5fb759;
  width: 40px;
  height: 40px;
  display: inline-block;
  text-align: center;
  line-height: 40px;
}

@media (max-width: 991px) {
  .header-area .main-nav .nav .search-icon {
    float: none;
    text-align: center;
    width: 100%;
    background-color: #fff;
    margin-left: 0px;
  }
}

.header-area .main-nav .nav .search-icon a:hover {
  opacity: 1;
  color: #5fb759!important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #7a7a7a;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #fff;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 35px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #7a7a7a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  color: white!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  border-bottom: 1px solid #f5f5f5;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #5fb759!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: none; /* shown/restyled entirely inside the mobile media query below */
  position: absolute;
  top: 23px;
  width: 50px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
  color: #5fb759;
}

@media (max-width: 991px) {
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #5fb759!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 70px;
    box-shadow: 0px 1px 8px rgba(0,0,0,0.12);
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .main-nav .logo {
    line-height: normal;
    color: #1e1e1e;
    width: auto;
    max-width: calc(100% - 100px);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    letter-spacing: 0.5px;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-area .main-nav .logo img {
    width: 40px;
    height: 40px;
    margin-left: 0px;
    flex-shrink: 0;
  }
  /* ----- Hamburger button: white circle pinned to the viewport, built
     from three independent real bar elements (mt-bar1/2/3) instead of
     a single span + ::before/::after — each bar is its own node in
     DevTools with nothing shared or generated, so there's no ambiguity
     about what's rendering where. A soft "beacon" glow breathes while
     closed (a nod to the coastal/lighthouse theme) and a coral sonar
     ring pings outward the instant it's tapped open. ----- */
  .header-area .main-nav .menu-trigger {
    /* Fixed to the viewport (not the header) so it stays put in the
       same corner no matter how far the page was scrolled when it was
       opened — the header itself only becomes position:fixed after
       scrolling past the hero, so anchoring the button to it directly
       let the button scroll out of view along with the rest of the
       header while the full-screen nav (which IS position:fixed)
       stayed pinned, making the button appear to vanish. */
    position: fixed !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: 11px;
    right: 15px;
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(15, 90, 90, 0.35);
    z-index: 700;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    animation: mtBeacon 3s ease-in-out infinite;
  }
  .header-area .main-nav .menu-trigger:active {
    transform: scale(0.88);
  }
  .header-area .main-nav .menu-trigger.active {
    animation: none;
    box-shadow: 0 4px 16px rgba(232, 173, 69, 0.55);
  }
  @keyframes mtBeacon {
    0%, 100% { box-shadow: 0 4px 14px rgba(15, 90, 90, 0.35); }
    50%      { box-shadow: 0 4px 20px rgba(23, 176, 153, 0.65); }
  }
  /* Sonar ping: a ring that expands and fades out from the button the
     moment it's opened, so the tap itself feels answered right away,
     independent of and slightly faster than the bars morphing into
     the X. */
  .header-area .main-nav .menu-trigger .mt-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(232, 173, 69, 0.8);
    opacity: 0;
    pointer-events: none;
  }
  .header-area .main-nav .menu-trigger.active .mt-ring {
    animation: mtRingPulse 0.55s ease-out;
  }
  @keyframes mtRingPulse {
    0%   { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.9); }
  }
  /* Three real bars stacked with translateY, all sharing one center
     point (left/top 50% + a negative margin equal to half their own
     size) and only ever moved with `transform` — never mixed with a
     `top`/`left` transition on the same element, since those animate
     on different browser pipelines and drift out of sync. */
  .header-area .main-nav .menu-trigger .mt-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 3px;
    margin-left: -11px;
    margin-top: -1.5px;
    background-color: #17806e;
    border-radius: 3px;
    transition: transform 0.35s cubic-bezier(0.5, -0.2, 0.5, 1.2), opacity 0.2s ease, background-color 0.3s ease;
  }
  .header-area .main-nav .menu-trigger .mt-bar1 { transform: translateY(-8px); }
  .header-area .main-nav .menu-trigger .mt-bar2 { transform: translateY(0); }
  .header-area .main-nav .menu-trigger .mt-bar3 { transform: translateY(8px); }
  .header-area .main-nav .menu-trigger.active .mt-bar {
    background-color: #e8ad45;
  }
  .header-area .main-nav .menu-trigger.active .mt-bar1 {
    transform: translateY(0) rotate(45deg);
  }
  .header-area .main-nav .menu-trigger.active .mt-bar2 {
    opacity: 0;
    transform: translateY(0) scale(0.3);
  }
  .header-area .main-nav .menu-trigger.active .mt-bar3 {
    transform: translateY(0) rotate(-45deg);
  }

  .header-area .main-nav {
    overflow: visible;
    min-height: 70px;
  }

  /* ----- Full-screen nav takeover: coastal gradient, wave-lit corners,
     a slow-bobbing turtle mark, and links that cascade in like waves
     rolling ashore. Shown/hidden with opacity + transform (toggled via
     the .nav-open class in custom.js) instead of jQuery's slideToggle,
     so the whole entrance can be choreographed in CSS. ----- */
  .header-area .main-nav .nav {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 40px 20px;
    background: linear-gradient(160deg, #1c7ea8 0%, #17a998 55%, #12c79a 100%);
    box-shadow: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.04);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.4s;
    z-index: 500;
  }
  .header-area .main-nav .nav.nav-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
  }
  .header-area .main-nav .nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 8%, rgba(255,255,255,0.22), transparent 55%),
                radial-gradient(circle at 85% 92%, rgba(255,255,255,0.14), transparent 50%);
    pointer-events: none;
  }
  .header-area .main-nav .nav::after {
    content: "";
    position: absolute;
    right: 8%;
    bottom: 10%;
    width: 110px;
    height: 110px;
    background: url('../img/logo.png') no-repeat center / contain;
    opacity: 0.16;
    filter: brightness(0) invert(1);
    animation: navMarkFloat 6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes navMarkFloat {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-18px) rotate(4deg); }
  }

  .header-area .main-nav .nav li:first-child {
    border-top: none;
  }
  .header-area .main-nav .nav li {
    position: relative;
    width: auto;
    background: transparent;
    border: none;
    text-align: center;
    justify-content: center;
    padding-left: 0px !important;
    padding-right: 0px !important;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* Text starts fading in almost immediately (2ms) so it reads as part
     of the same motion as the background instead of catching up late —
     the cascade is in how each item is *offset* from that start, not a
     delay before anything begins. */
  .header-area .main-nav .nav.nav-open li {
    opacity: 1;
    transform: translateY(0);
  }
  .header-area .main-nav .nav.nav-open li:nth-child(1) { transition-delay: 0.02s; }
  .header-area .main-nav .nav.nav-open li:nth-child(2) { transition-delay: 0.06s; }
  .header-area .main-nav .nav.nav-open li:nth-child(3) { transition-delay: 0.10s; }
  .header-area .main-nav .nav.nav-open li:nth-child(4) { transition-delay: 0.14s; }
  .header-area .main-nav .nav.nav-open li:nth-child(5) { transition-delay: 0.18s; }
  .header-area .main-nav .nav.nav-open li:nth-child(6) { transition-delay: 0.22s; }

  .header-area .main-nav .nav li a {
    height: auto !important;
    line-height: normal !important;
    padding: 12px 0 !important;
    margin: 2px 0;
    width: auto;
    border: none;
    text-align: center;
    color: #fff !important;
    opacity: 1 !important;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.5px;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
  .header-area .main-nav .nav li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    transition: width 0.35s ease, left 0.35s ease;
  }
  .header-area .main-nav .nav li:hover a,
  .header-area .main-nav .nav li a.active {
    background: transparent !important;
    color: #fff !important;
    opacity: 1 !important;
  }
  .header-area .main-nav .nav li:hover a::after,
  .header-area .main-nav .nav li a.active::after,
  .header-area .main-nav .nav .current a::after {
    width: 56%;
    left: 22%;
  }
  .header-area .main-nav .nav .current a {
    border-color: transparent;
  }
  /* The desktop template draws a green pill border around the
     current-page link (see the un-scoped `.nav .current` rule near
     the top of this file) — inside the full-screen mobile nav that
     showed up as an ugly rounded box around "Home". Kill it here so
     the current link only gets the same underline sweep as hover. */
  .header-area .main-nav .nav .current,
  .header-area .main-nav .nav li:hover {
    border: none;
    border-radius: 0;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 992px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/*
---------------------------------------------
banner
---------------------------------------------
*/
.img-fill{
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
  transition: 1s ease-in;
  background: linear-gradient(to right, #85C7F2, #21FFCB);
}

.img-fill .background {
  height: 100vh;
  width: 100vw;
  position: relative;
  display: inline-block;
  transition: 1s ease-in;
  background: linear-gradient(to right, #85C7F2, #21FFCB);
}

.img-fill .background-mobile{
  width: 100vw;
  height: 100vh;
  display: none;
}

@media (max-width: 530px) {
  .img-fill .background {
    height: 100vh;
    width: 100vw;
    position: relative;
    display: none;
    transition: 1s ease-in;
    background: linear-gradient(to right, #85C7F2, #21FFCB);
  }
  .img-fill .background-mobile{
    display: block;
  }
}
.img-fill .home-turtle{
  position: absolute;
  width: 800px;
  max-width: 55vw;
  height: auto;
  top: -100px;
  left: 450px;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}

.blocks-box,
.slick-slider {
  margin: 0;
  padding: 0!important;
}

.slick-slide {
  float: left;
  padding: 0;
}

.Modern-Slider .item .img-fill{
  height:95vh;
  background: linear-gradient(to right, #85C7F2, #21FFCB);
}
.Modern-Slider .item .img-fill .shade{
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
}

.Modern-Slider .info > div{
  display:inline-block!important;
  vertical-align:middle;
}

.Modern-Slider .NextArrow{
  position:absolute;
  top:50%;
  right:30px;
  border:0 none;
  background-color: transparent;
  text-align:center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color:#FFF;
  z-index:5;
  outline: none;
}

.Modern-Slider .NextArrow:before{
  content:'\f105';
}

.Modern-Slider .PrevArrow {
  position:absolute;
  top:50%;
  left:30px;
  border:0 none;
  background-color: transparent;
  text-align:center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color:#FFF;
  z-index:5;
  outline: none;
}

.Modern-Slider .PrevArrow:before{
  content:'\f104';
}

.scroll-down {
  position: absolute;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  z-index: 10;
}

.scroll-down a {
  display: inline-block;
  background-color: #5fb759;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

ul.slick-dots {
  display: none!important;
}

.Modern-Slider .text-content {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(93, 155, 175, 0.6);
  padding: 20px;
  border-radius: 20px;
}

.Modern-Slider .item h3 {
  margin-bottom: 25px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  color:#FFF;
  animation:fadeOutRight 1s both;
}

.Modern-Slider .item h5 {
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 200;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  letter-spacing: 2.5px;
  color:#FFF;
  overflow:hidden;
  animation:fadeOutLeft 1s both;
}

.Modern-Slider .item a {
  margin: 0 5px;
}

.Modern-Slider .item.slick-active h3{
  animation:fadeInDown 1s both 1s;
}

.Modern-Slider .item.slick-active h5{
  animation:fadeInLeft 1s both 1.5s;
}

.Modern-Slider .item.slick-active{
  animation:Slick-FastSwipeIn 1s both;
}

.Modern-Slider .buttons {
  position: relative;
}

.Modern-Slider {background:#000;}

.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

/*
---------------------------------------------
about
---------------------------------------------
*/

.about-container{
  background: url('../img/images/beach3.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 50px;
}
.aboutUs-btn{
  background-color: rgba(141, 105, 139, 0.95);
  border-radius: 20px;
  padding: 10px;
  color:  white;
}
.about-img{
  width: 400px;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}

/* Turtle swim animation (page load) — shared by index.html,
   about-us.html and gallery.html. Group starts off-screen
   bottom-left, glides fully clear of the right edge, then the
   inline script hides it. See #turtle-group JS in each page. */
#turtle-group{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  position: absolute;
  transition: 5s ease-in-out;
  left: -100px;
  top: 600px;
}
.turtle-group{
  height: auto;
  width: auto;
}
.turtle-group p,
.turtle-group div{
  margin: 0;
}
/* Pulls turtles tight — compensates for the transparent padding
   baked into Sea-Turtle.gif itself (CSS gap alone can't close that). */
.turtle-group > *:not(:first-child){
  margin-top: -90px;
}
.giphy-embed{
  width: 200px;
  height: auto;
}

.turlte-cover{
  position: absolute;
  width: 200px;
  height: 300px;
  z-index: 999;
}

#about {
  padding: 120px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#about .container {
  border-bottom: 5px solid #f7f7f7;
  padding-bottom: 80px;
}

#about .section-heading {
  margin-bottom: 10px;
}

#about .section-heading h6 {
  color: black;
}

#about .service-item {
  margin-top: 30px;
}

#about .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#about .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#about a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#about .right-text-content {
  margin-top: 40px;
  text-align: center;
  background: rgba(93, 155, 175, 0.9);
  padding: 20px;
  border-radius: 20px;
  color: white;
}

#about .right-text-content p {
  font-size: 20px;
  line-height: 27px;
  color: white;
}


/*
---------------------------------------------
features
---------------------------------------------
*/

.featured-products{
  width: 300px;
  max-width: 100%;
  height: auto;
}

#features {
  padding-top: 80px;
}

#features .features-item {
  margin-bottom: 50px;
  background: rgba(93, 155, 175, 0.9);
  padding: 10px;
  border-radius: 20px;
  color: white;
}

.features-item .features-icon {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.features-item .features-icon img{
  width: 75px;
  height: auto;
}

#features .features-content {
  text-align: center;
  padding-top: 20px;
}

#features .features-content img{
 border-radius: 20px;
}
.whiteLine{
  width: 100vw;
  justify-content: center;
  text-align: center;
}
.whiteLine1{
  width: 87vw;
  border-bottom: 5px solid #f7f7f7;
  padding-bottom: 80px;
  text-align: center;
  justify-content: center;
  margin-left: 7%;
}

.features-item .features-content h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  margin-bottom: 15px;
}

.features-item .features-content p {
  margin-bottom: 15px;
  color: white;
}


/*
---------------------------------------------
subscribe
---------------------------------------------
*/

#subscribe {
  padding: 80px 0px;
  background-image: url(../images/slide-02.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#subscribe .section-heading {
  text-align: center;
  color: #fff;
  margin-bottom: 25px;
}

#subscribe p {
  text-align: center;
  font-size: 16px;
  line-height: 27px;
  color: #fff;
  margin-bottom: 40px;
}

#subscribe input {
  width: 100%;
  height: 38px;
  border-radius: 19px;
  border: 1px solid #fff;
  background-color: transparent;
  padding: 0px 20px;
  font-size: 13px;
  color: #fff;
  outline: none;
}

.subscribe-form ::-webkit-input-placeholder {
  color: #fff;
}

.subscribe-form :-ms-input-placeholder {
  color: #fff;
}

.subscribe-form ::placeholder {
  color: #fff;
}

@media (max-width: 400px) {
  .Modern-Slider .text-content {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(93, 155, 175, 0.6);
    padding: 20px;
    border-radius: 20px;
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  #subscribe fieldset {
    text-align: center;
    margin-bottom: 20px;
  }
  a.main-stroked-button {
    font-size: 13px;
    border-radius: 25px;
    padding: 11px 25px;
    background-color: transparent;
    border: 2px solid #fff;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-bottom: 50px;
  }
  .br-appear{
    display: block;
  }
}

/*
--------------------------------------------
testimonials
--------------------------------------------
*/
#testimonials {
  margin-top: 120px;
  padding: 120px 0px;
  background-image: url(../images/slide-03.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#testimonials .section-heading {
  text-align: center;
  color: #fff;
  margin-bottom: 60px;
}

#testimonials .item {
  position: relative;
  text-align: center;
}

#testimonials .item h4 {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  margin-top: 22px;
  margin-bottom: 7px;
}

#testimonials .item span {
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#testimonials .item .member-thumb {
  position: relative;
}

#testimonials .item .hover-effect {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.95);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

#testimonials .item .hover-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

#testimonials .item:hover .hover-effect {
  opacity: 1;
  visibility: visible;
}

#testimonials .item .hover-effect ul li {
  display: inline-block;
  margin: 0px 5px;
}

#testimonials .item .hover-effect ul li a {
  width: 32px;
  height: 32px;
  display: inline-block;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 50%;
  color: #5fb759;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

#testimonials .item .hover-effect ul li a:hover {
  color: #fff;
  background-color: #5fb759;
}

#testimonials .owl-carousel {
  padding-bottom: 60px;
}

.owl-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.owl-dots .owl-dot {
  outline: none;
  height: 10px;
}

.owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  margin: 0px 5px;
  outline: none;
  -webkit-transition: all 0.2s ease 0s;
  -moz-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
}

.owl-dots .active span {
  width: 10px;
  height: 10px;
  margin-bottom: -1px;
}


/*
---------------------------------------------
contact
---------------------------------------------
*/

#contact-us .section-heading {
  margin-bottom: 50px;
}

#contact-us .section-heading h6 {
  color: black;
}

#contact-us .left-text-content ul li {
  margin-bottom: 30px;
}

#contact-us .left-text-content ul li {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#contact-us .left-text-content ul li img {
  margin-right: 15px;
}

#contact-us {
  padding: 120px 0px;
  background-image: url(../images/dotted-map-bg.png);
  background-position: center center;
  background-repeat: no-repeat;
}

#contact {
  margin-top: 40px;
}
#contact-us .contact-info img{
  width: 75px;
  height: 75px;
}

.responsive-iframe-wrapper{
  width: 100%;
  max-width: 640px;
}

.responsive-iframe-wrapper iframe{
  width: 100%;
  max-width: 100%;
  border: none;
}

.contact-info li p {
  background: rgba(104, 204, 152, 0.5);
  color: black;
  padding: 20px;
  border-radius: 0px 0px 20px 20px;
}

.contact-info li h2 {
  background: rgba(104, 204, 152, 0.5);
  padding: 20px;
  border-radius: 20px 20px 0px 0px;
}

.C-Form {
  width: 640px;
  height: 620px;
}

@media (max-width: 716px) {
  .C-Form {
    width: 500px;
    height: 750px;
  }
}

@media (max-width: 470px) {
  .C-Form {
    width: 300px;
    height: 700px;
  }
}

.contact-form input,
.contact-form textarea {
  color: #7a7a7a;
  font-size: 15px;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 46px;
  outline: none;
  padding-top: 3px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}

.contact-form textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}

.contact-form ::-webkit-input-placeholder {
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder {
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}


/*
---------------------------------------------
footer
---------------------------------------------
*/

footer {
  padding: 80px 0px;
  background: rgb(51,155,158);
  background: linear-gradient(145deg, rgba(51,155,158,1) 0%, rgba(104,204,152,1) 100%);
}

footer .left-text-content p {
  color: #fff;
  font-size: 14px;
}

footer .left-text-content a {
  color: #fff;
}

footer .right-text-content {
  float: right;
}

footer .right-text-content p {
  color: #fff;
  font-size: 14px;
  margin-right: 15px;
  text-transform: uppercase;
}

footer .right-text-content ul li {
  display: inline-block;
}

footer .right-text-content ul li a {
  width: 32px;
  height: 32px;
  display: inline-block;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 50%;
  color: #5fb759;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

footer .right-text-content ul li a:hover {
  background-color: #5fb759;
  color: #fff;
}

@media (max-width: 992px) {
  footer .left-text-content p {
    text-align: center;
    margin-bottom: 30px;
  }
  footer .right-text-content {
    float: none;
    text-align: center;
  }
  .img-fill{
    width: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: 1s ease-in;
  }
}


/*
---------------------------------------------
preloader
---------------------------------------------
*/
#preloader {
  overflow: hidden;
  background-image: linear-gradient(145deg, #339b9e 0%, #68cc98 100%);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 99999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/*
---------------------------------------------
search
---------------------------------------------
*/

#search {
  z-index: 9999;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translate(0px, -100%) scale(0, 0);
  -moz-transform: translate(0px, -100%) scale(0, 0);
  -o-transform: translate(0px, -100%) scale(0, 0);
  -ms-transform: translate(0px, -100%) scale(0, 0);
  transform: translate(0px, -100%) scale(0, 0);
  opacity: 0;
}
#search input {
  position: absolute;
  top: 50%;
  width: 100%;
  color: white;
  background: rgba(0, 0, 0, 0);
  font-size: 60px;
  font-weight: 300;
  text-align: center;
  border: 0px;
  margin: 0px auto;
  margin-top: -51px;
  padding-left: 30px;
  padding-right: 30px;
  outline: none;
}
#search .main-button {
  color: #fff;
  position: absolute;
  text-transform: uppercase;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 25px;
  letter-spacing: 1px;
  transform: translateX(-15%);
  top: 50%;
  left: 50%;
  margin-top: 61px;
  margin-left: -45px;
  background-color: #5fb759;
  border: black;
}
#search .close {
  border-radius: 50%;
  position: fixed;
  top: 15px;
  right: 15px;
  color: #fff;
  background-color: #5fb759;
  outline: none;
  opacity: 1;
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 28px;
}
#search.open {
  -webkit-transform: translate(0px, 0px) scale(1, 1);
  -moz-transform: translate(0px, 0px) scale(1, 1);
  -o-transform: translate(0px, 0px) scale(1, 1);
  -ms-transform: translate(0px, 0px) scale(1, 1);
  transform: translate(0px, 0px) scale(1, 1);
  opacity: 1;
}


/*
---------------------------------------------
portfolio
---------------------------------------------
*/

#projects .filters {
  margin-top: 50px;
}
#projects .filters ul {
  padding: 0;
}
#projects .filters ul li {
  list-style: none;
  display: block;
  padding: 15px 0px;
  cursor: pointer;
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: #9a9a9a;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#projects .filters ul li.active,
#projects .filters ul li:hover {
  color: #5fb759;
}
#projects .filters-content {
  margin-top: 50px;
}
#projects .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}
#projects .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}

#projects .filters-content .all {
  margin-bottom: 30px;
}

#projects .filters-content .item {
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#projects .filters-content .item:hover {
  opacity: 0.75;
}
#projects .filters-content .item .p-inner {
  padding: 20px 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
#projects .filters-content .item .p-inner h5 {
  font-size: 15px;
}
#projects .filters-content .item .p-inner .cat {
  font-size: 13px;
}
#projects .filters-content .item img {
  width: 100%;
}

#projects {
  padding-top: 120px;
}

#projects .section-heading {
  margin-bottom: 60px;
}

#projects .section-heading h6 {
  color: black;
}

@media (max-width: 992px) {
  #projects .filters ul li {
    display: inline-block;
    margin-right: 10px;
    padding: 0px;
  }
  #projects .section-heading {
    margin-bottom: 0px;
  }
}


/* ---------------------------------------------
12b. Happy Customers — interactive 3D coverflow carousel
(index.html only)
--------------------------------------------- */
#happy-customers {
  padding: 90px 0 100px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(133,199,242,0.18) 0%, rgba(33,255,203,0.08) 100%);
}
#happy-customers .section-heading {
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}
#happy-customers .section-heading h6 {
  color: #1e8f74;
  letter-spacing: 2px;
}
#happy-customers .section-heading h2 {
  color: #1e5f74;
  margin-top: 10px;
}

.hc-bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.08);
  animation-name: hcBubbleRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes hcBubbleRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.85; }
  100% { transform: translateY(-460px) translateX(24px); opacity: 0; }
}

.hc-carousel {
  position: relative;
  max-width: 920px;
  margin: 50px auto 10px;
  height: 380px;
  perspective: 1400px;
  -webkit-user-select: none;
  user-select: none;
  z-index: 2;
}
.hc-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  cursor: grab;
}
.hc-track:active { cursor: grabbing; }

.hc-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: 280px;
  height: 340px;
  margin-left: -140px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  border: 6px solid #fff;
  transition: transform 0.6s cubic-bezier(.25,.8,.25,1), opacity 0.6s ease, filter 0.6s ease;
  cursor: pointer;
  background: #ddd;
}
.hc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.hc-slide.hc-active img {
  transform: scale(1.05);
}
.hc-slide::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hc-slide.hc-active::after { opacity: 1; }
.hc-slide::before {
  content: '\f004';
  font-family: FontAwesome;
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: #fff;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.4s ease 0.15s;
  z-index: 2;
}
.hc-slide.hc-active::before { opacity: 1; }

.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: #1e8f74;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 50;
  transition: all 0.25s ease;
}
.hc-arrow:hover {
  background: #1e8f74;
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}
.hc-prev { left: 0px; }
.hc-next { right: 0px; }

@media (max-width: 767px) {
  .hc-prev { left: -6px; }
  .hc-next { right: -6px; }
}

.hc-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  position: relative;
  z-index: 2;
}
.hc-dot {
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  border: none;
  background: rgba(30,143,116,0.3);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
.hc-dot-active {
  background: #1e8f74;
  transform: rotate(45deg) scale(1.3);
}

.hc-turtle-swim {
  position: absolute;
  width: 90px;
  height: auto;
  right: 2%;
  top: -30px;
  opacity: 0.9;
  animation: hcTurtleFloat 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes hcTurtleFloat {
  0%, 100% { transform: translateY(0px) rotate(-4deg); }
  50%      { transform: translateY(-18px) rotate(4deg); }
}

@media (max-width: 600px) {
  .hc-carousel { height: 320px; }
  .hc-slide { width: 220px; height: 280px; margin-left: -110px; }
  .hc-turtle-swim { width: 55px; top: -40px; }
}


/* ---------------------------------------------
13. page: about us — bio boxes, parallax
(was an inline <style> block in about-us.html)
--------------------------------------------- */
.team-container {
  background: url('../img/custom-website-art/c9.JPG');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  display: flex;
  flex-direction: column;
  align-items: left;
  margin-top: 50px;
  padding: 0 20px;
}

.bio-box {
  width: 70%;
  max-width: 600px;
  height: auto;
  background-color: rgba(93, 155, 175, 0.9);
  margin: 20px 0;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: .5s ease-in-out;
  color: black;
  text-align: center;
}

.bio-box:hover {
  width: 75%;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}

.bio-image {
  width: 200px;
  height: auto;
  border-radius: 50%;
}

.bio-text {
  margin-top: 20px;
}

.bio-text p {
  margin-bottom: 10px;
  color: black;
}

@media (max-width: 768px) {
  .team-container {
    align-items: stretch;
  }
  .bio-box {
    width: 90%;
    margin: 20px 0;
    padding: 15px;
  }
  .bio-image {
    width: 150px;
    border-radius: 10px;
  }
}

.parallax {
  background-image: url('../img/custom-website-art/c9.JPG');
  height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.content {
  margin-top: -740px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-box {
  background: rgba(93, 155, 175, 0.9);
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 1000px;
}

.text-box h1 {
  margin: 0;
  font-size: 2.5em;
  color: white;
}

.text-box p {
  font-size: 1.2em;
  color: white;
}


/* ---------------------------------------------
14. page: gallery / art classes — image grid
(was an inline <style> block in gallery.html and artClasses.html)
--------------------------------------------- */
.gallery-heading {
  font-family: Satisfy;
  font-size: 50px;
  text-align: center;
  color: black;
  padding: 1%;
}

#gallery {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

@media (max-width:1200px) {
  #gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
}

@media (max-width:800px) {
  #gallery {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
}

@media (max-width:600px) {
  #gallery {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
}

#gallery img,
#gallery video {
  width: 100%;
  height: auto;
  margin: 4% auto;
  box-shadow: -3px 5px 15px #000;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.modal-img,
.model-vid {
  width: 100%;
  height: auto;
}

.modal-body {
  padding: 0px;
}


/* ---------------------------------------------
15. page: products / merch — search + category cards
(was an inline <style> block in products.html)
--------------------------------------------- */
.search-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0 -10px;
}

.product-item {
  padding: 10px;
  width: calc(33.33% - 20px);
  margin: 10px;
  box-sizing: border-box;
  border-radius: 20px;
  background: linear-gradient(to right, #85C7F2, #21FFCB);
  transition: transform 0.3s ease;
  text-align: center;
}

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

.product-image {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 5px;
}

.product-info {
  margin-top: 10px;
}

.product-info h3 {
  margin-top: 10px;
  color: black;
  font-size: 22px;
}

.product-info p {
  font-size: 18px;
  margin-top: 10px;
  color: black;
}

.product-link {
  text-decoration: none;
  color: inherit;
}

.search-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  box-shadow: none;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  z-index: 1;
}

.search-input::placeholder {
  color: black;
  text-align: center;
}

.category-btn {
  display: inline-block;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.65);
  color: white;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.category-btn:hover {
  background-color: #45a049;
  transform: translateY(-2px);
}

/* Surfboard + turtle swim-in filter bar (products.html).
   The turtle is nested INSIDE the board and positioned off its right
   edge, and the two move together as a single rigid transform — so the
   turtle always leads on the right, the board always trails behind on
   the left, and that relationship never drifts during the animation
   (only one transform to keep in sync, not two). All distances use vw
   units (not fixed pixels) so it scales correctly at every breakpoint.
   The transition is slow/gentle on purpose so it reads as swimming,
   not darting across the screen. */
.surf-turtle-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 70px auto 30px;
  min-height: 160px;
  transform: translateX(-160vw);
  transition: transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.surf-turtle-wrap.swim-in {
  transform: translateX(0);
}

.surf-board {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 150px;
  margin: 0 auto;
  background: url('../img/surf-board.png') no-repeat center / contain;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 65px 0 20px;
}

.surf-turtle-img {
  position: absolute;
  top: 50%;
  right: -68px;
  width: 130px;
  height: auto;
  transform: translateY(-50%) rotate(-4deg);
  z-index: 5;
  animation: surfTurtleBob 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes surfTurtleBob {
  0%, 100% { transform: translateY(-50%) rotate(-4deg); }
  50%      { transform: translateY(calc(-50% - 10px)) rotate(2deg); }
}

@media (max-width: 768px) {
  .product-item {
    width: calc(50% - 20px);
  }
  .category-btn {
    font-size: 13px;
    padding: 6px 14px;
  }
  .surf-turtle-wrap {
    max-width: 480px;
    margin: 50px auto 20px;
    min-height: 130px;
  }
  .surf-board {
    height: 120px;
    padding: 0 50px 0 15px;
  }
  .surf-turtle-img {
    width: 95px;
    right: -48px;
  }
}

@media (max-width: 576px) {
  .surf-turtle-wrap {
    max-width: 320px;
    margin: 40px auto 20px;
    min-height: 100px;
  }
  .surf-board {
    height: 90px;
    padding: 0 34px 0 10px;
    gap: 6px;
  }
  .surf-turtle-img {
    width: 68px;
    right: -32px;
  }
  .product-item {
    width: calc(100% - 20px);
  }
  .category-btn {
    width: calc(50% - 10px);
    margin-top: 6px;
    font-size: 12px;
    padding: 6px 10px;
  }
}


/* ---------------------------------------------
16. mobile responsiveness enhancements
--------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 992px) {
  .turtle-background {
    background-attachment: scroll;
    background-size: 260px auto;
  }
}

@media (max-width: 576px) {
  .turtle-background {
    background-size: 160px auto;
  }
}

@media (max-width: 992px) {
  .img-fill .home-turtle {
    max-width: 45vw;
    left: auto;
    right: -40px;
    top: -40px;
  }
  .Modern-Slider .text-content {
    width: 90%;
    padding: 25px 20px;
  }
  .Modern-Slider .item h3 {
    font-size: 14px;
    margin-bottom: 15px;
  }
  .Modern-Slider .item h5 {
    font-size: 20px;
    margin-bottom: 25px;
    letter-spacing: 1px;
  }
}

@media (max-width: 576px) {
  .img-fill .home-turtle {
    max-width: 38vw;
    top: -20px;
    right: -20px;
    opacity: 0.9;
  }
  .Modern-Slider .text-content {
    width: 100%;
    padding: 20px 15px;
    border-radius: 12px;
  }
  .Modern-Slider .item h5 {
    font-size: 17px;
    margin-bottom: 20px;
  }
  a.main-stroked-button,
  a.main-filled-button {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    padding: 10px 18px;
  }
}

/* The swimming turtle stickers are a brief, decorative page-load
   animation; keep them from overlapping content or overflowing on
   narrow viewports instead of padding sections with empty space */
@media (max-width: 768px) {
  #turtle-group {
    top: 420px;
    transform: scale(0.7);
    transform-origin: top left;
  }
}

@media (max-width: 480px) {
  #turtle-group {
    top: 320px;
    transform: scale(0.5);
  }
}

@media (max-width: 991px) {
  #about {
    padding-top: 80px;
    text-align: center;
  }
  #about .container {
    padding-bottom: 50px;
  }
  #about .row .row {
    justify-content: center;
  }
  .about-img {
    margin: 0 auto;
    display: block;
  }
  #about .right-text-content {
    margin-top: 30px;
    margin-bottom: 0px;
  }
}

@media (max-width: 576px) {
  #about {
    padding-top: 60px;
  }
  .section-heading h2 {
    font-size: 24px;
  }
}

@media (max-width: 991px) {
  #features {
    padding-top: 50px;
  }
  #features .features-item {
    margin-bottom: 30px;
  }
  .whiteLine1 {
    width: 100%;
    margin-left: 0px;
    padding-bottom: 50px;
  }
  #features .col-lg-4:last-child .features-item {
    height: auto !important;
    margin-top: 0px !important;
    padding: 20px 10px !important;
  }
  .featured-products {
    margin-bottom: 10px;
  }
}

@media (max-width: 991px) {
  #contact-us {
    padding: 70px 0px;
    background-size: contain;
  }
  #contact-us .left-text-content {
    text-align: center;
    margin-bottom: 40px;
  }
  #contact-us .contact-info li {
    display: inline-block;
    margin: 0px 10px 20px 10px;
  }
  .responsive-iframe-wrapper {
    max-width: 100%;
    margin: 0 auto;
  }
  .responsive-iframe-wrapper iframe {
    height: 620px;
  }
}

@media (max-width: 480px) {
  .responsive-iframe-wrapper iframe {
    height: 680px;
  }
}

@media (max-width: 576px) {
  footer {
    padding: 50px 0px;
  }
  footer .right-text-content ul li {
    margin: 0px 5px;
  }
}