@import url('clash-display.css');
@import url('panchang.css');
@import url('chillax.css');

/* Box Model Hack */
* {
     box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/



html {
     font-size: 10px;
     scroll-behavior: smooth;
     /* scroll-snap-type: y mandatory; */
}


* {
     font-family: sans-serif, serif;
     font-weight: 600;
     overflow-x: hidden;
}

h1 {
     font-size: 3rem;
}

body {
     background: #E5DFD2;
     margin: -1.2rem 0 0 0;
}

.section{
     padding: 2rem 0;
}

/* HEADER SECTION */

#subheader img {
     display: block;
     width: 100%;    /* scales with container */
     height: auto;
   }
   #subheader {
     height: fit-content;
     padding: 0;
     position: relative;
     background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
   }

header {
     background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("../images/1-print-4493\ Mixson\ Ave\ CoastalRE-8.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     width: 100%;
     height: 92vh;
     margin: 0 auto;
     padding: 10% 0 10% 10%;
     display: flex;
     flex-flow: column wrap;
     align-items: flex-start;
     justify-content: center;

}

header h1{
     color: #E5DFD2;
     font-size: clamp(3rem, 5vw, 6rem);
     font-family: 'ClashDisplay-Semibold';
     padding-right: 33%;
     margin: 0;
     text-shadow:
     1px 1px 0 #153548,   /* Bottom-right shadow */
     -1px 1px 0 #153548,  /* Bottom-left shadow */
     1px -1px 0 #153548,  /* Top-right shadow */
     -1px -1px 0 #153548; /* Top-left shadow */
}

header h4{
     padding-right: 45%;
     font-size: 1.8vw;
     color: #ca6c00;
     margin: 1rem 0 3rem 0;
     text-shadow:
     1px 1px 0 #153548,   /* Bottom-right shadow */
     -1px 1px 0 #153548,  /* Bottom-left shadow */
     1px -1px 0 #153548,  /* Top-right shadow */
     -1px -1px 0 #153548; /* Top-left shadow */
}

header a{
     padding: 2rem 3.25rem;
     color: #153548;
     background-color: #E5DFD2;
     border: #153548 2px solid;
     border-radius: 20px;
     cursor: pointer;
     transition: all 0.2s;
     font-size: 2rem;
     font-family: 'ClashDisplay-Semibold';
     margin: 4rem 0 0 0;
     text-decoration: none;
}

header a:hover{
     border: #ca6c00 2px solid;
     color: #ca6c00;
     scale: 1.05;
}

@media all and (max-width: 850px) {
     
     header h1{
          font-size: clamp(3rem, 9vw, 6rem);
     }

     header h4{
          font-size: 3vw;
     }

     header a{
          font-size: 1rem;
          padding: 1.5rem 2.25rem;
          margin-top: 2rem;
     }

     }




/* VERTICAL MENU SECTION */

.horizontalMenu {
     width: 100%;
     height: fit-content;
     background: #153548;
     padding: 1rem 0;
     margin: 0 auto;
     margin-bottom: 0;
     position: relative;
     margin-top: 1rem;
}

.horizontalMenu .btn {
     width: fit-content;
     position: absolute;
     top: 50%;
     right: 5%;
     transform: translate(0%, -50%);
    }
 
body .horizontalMenu .sticky {
     position: fixed;
     top: 5%;
     right: 5%;
     z-index: 1030;
     opacity: 1 !important;
     transition: opacity 0.5s ;
 }

.horizontalMenu a{
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     justify-content: center;
     font-family: 'Panchang-Semibold';
     font-size: 4vw;
     color: #E5DFD2;
     width: 100%;
     padding: 0 9rem;
     margin: 0;
     text-decoration: none;
}

.horizontalMenu h2{
     margin: 0;
     white-space: nowrap;
}


    .menuButton {
     background: #153548;
     border: none;
     color: #E5DFD2;
     font-size: 2rem;
     cursor: pointer;
     width: fit-content;
     display: flex;
     justify-content: center;
     transition: all .2s ease-in-out;
     border-radius: 50%;
     padding: 1rem;
     z-index: 100;
    }

    .menuButton:hover {
     transform: scale(1.2);
    }

    #openMenu2{
     background: #153548;
     margin-bottom: 2.5rem;
     margin-left: -1rem;
    }

    .dropMenu {
     width: 0;
     height: 100vh;
     position: fixed;
     right: -4px;
     top: 0;
     background: #153548;
     padding-top: 2rem;
     overflow: hidden;
     z-index: 10001;
     transition: all 0.5s ease-in-out;
     border-left: 4px solid #E5DFD2;
    }

    .openMenu {
     position: fixed;
     width: 25% !important;
    }

    .dropMenu ul {
     padding: 0;
     width: 100%;
     margin: 0 0 0 2rem;
     list-style: none;
     text-align: left;
     
    }

    .dropMenu li{
     display: block;
     position: relative;
     width: fit-content;
     margin-bottom: 1rem;
     word-spacing: 0.4rem;
     white-space: nowrap;
    }

    .dropMenu li::after{
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0); /* Hide initially */
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #ca6c00; /* Choose your desired color */
     transform-origin: bottom right; /* Animation direction */
     transition: transform 0.2s ease-out; /* Transition for smoothness */   
    }

    .dropMenu li:first-child ~ li:hover::after{
     transform: scaleX(1); /* Show on hover */
     transform-origin: bottom left; /* Animation direction on hover */
    }
    
    .dropMenu a {
     text-decoration: none;
     color: #E5DFD2;
     line-height: 5rem;
     font-size: 2vw;
     display: inline-block;
     font-family: 'ClashDisplay-Semibold';
     transition: all .2s ease-in-out;
    }

    @media all and (max-width: 850px) {
     
     .openMenu {
          position: fixed;
          width: 50% !important;
         }
     
          .horizontalMenu h2 a{
               font-size: 1.5rem;
          }
     
          .horizontalMenu{
               padding: 1.5rem 0;
          }
          
          .menuButton{
               font-size: 1.5rem;
          }
     
          .dropMenu{
               padding: 0.5rem 0;
          }

          .dropMenu a{
               font-size: 2.5rem;
               line-height: 3.5rem;
          }
     }

    @media all and (max-width: 500px) {
     
     .openMenu {
          position: fixed;
          width: 50% !important;
         }
     
          .horizontalMenu h2 a{
               font-size: 1.5rem;
          }
     
          .horizontalMenu{
               padding: 1.5rem 0;
          }
          
          .menuButton{
               font-size: 1.5rem;
          }
     
          .dropMenu{
               padding: 0.5rem 0;
          }

          .dropMenu a{
               font-size: 1.5rem;
               line-height: 2rem;
          }
     }



/* OUR STORY SECTION */

.ourStoryLink{
     width: 100%;
     display: flex;
}
.ourStoryLink div{
     width: 50%;
     display: flex;
     flex-flow: column;
     align-items: center;
     justify-content: center;
     padding: 3rem;
}

.ourStoryLink a{
     border: black 2px solid;
     color: black;
}
h2{
     font-family: 'clash-display-Regular';
     font-size: 6rem;
     margin: 3rem 0;
     text-align: center;
}
div p{
     font-family: 'clash-display-Regular';
     font-size: 2.5rem;
     margin: 0 0 3rem 0;
     line-height: 2.75rem;
     text-align: center;
}

div img{
     height: auto;
     width: 100%;
}

.underline{
     color: #E5DFD2;
     border-bottom: 5px solid black;
     padding: 0 10rem;
     margin: 0 0 4rem 0;
}

.underlineDark{
     color: #dad5c8;
     border-bottom: 5px solid black;
     width: fit-content;
     margin: 0 50vw 4rem 50vw;
     display: block;
     white-space: nowrap;
}

span{
     font-family: 'clash-display-Regular'; 
     color: #ca6c00;
}

section a{
     padding: 2rem 3.5rem;
     margin: 1rem 0 0 0;
     font-size: 1.75rem;
     background-color: transparent;
     border: #153548 2px solid;
     border-radius: 20px;
     cursor: pointer;
     transition: all 0.2s;
     color: #153548;
     text-decoration: none;
     /* box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); */
}

section a:hover{
     border: #ca6c00 2px solid;
     color: #ca6c00;
     scale: 1.05;
}



@media all and (max-width: 850px) {

     .ourStoryLink{
          width: 100%;
          display: flex;
          flex-flow: column wrap;
     }
     .ourStoryLink div{
          width: 100%;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: center;
          padding: 3rem;
     }
     div h2{
          font-family: 'clash-display-Regular';
          font-size: 6rem;
          text-align: center;
          line-height: 6rem;
     }
     div p{
          font-family: 'clash-display-Regular';
          font-size: 2rem;
          text-align: center;
     }
     
     div img{
          height: auto;
          width: 100%;
     }

 }


.center {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-flow: column wrap;
}

h3{
     font-family: 'clash-display-Regular';
     font-size: 3rem;
}

/* ARTWORK SECTION */

.artworkLink{
     background-color: #dad5c8;
     padding: 3rem 0;
     height: fit-content;
}

.artworkLink div{
     display: flex;
     flex-flow: row wrap;
     align-items: flex-start;
}

.artworkLink h2{
     width: 100%;
     text-align: center;
     color: black;
     padding: 0 8rem;
}

.artworkLink h3{
     color: white;
}

.col-1-3,
.col-2-3,
.col-3-3{
     width: 33%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 4rem;
     margin-top: 4rem;
}

.col-1-3 p,
.col-2-3 p,
.col-3-3 p{
     margin-top: 3.5rem;
}

.col-1-3 h3,
.col-2-3 h3,
.col-3-3 h3{
     font-size: 3rem;
     margin-bottom: 2rem;
     text-shadow:
     1px 1px 0 black,   /* Bottom-right shadow */
     -1px 1px 0 black,  /* Bottom-left shadow */
     1px -1px 0 black,  /* Top-right shadow */
     -1px -1px 0 black; /* Top-left shadow */
}

.col-1-3 p,
.col-2-3 p,
.col-3-3 p{
     font-size: 2rem;
     text-align: center;
}

.colBackground1-3{
     width: 100%;
     height: 30rem;
     background-image: url("../images/art/dji_fly_20251014_114558_739_1760436575976_photo.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: top;
     display: flex;
     justify-content: center;
}

.colBackground2-3{
     width: 100%;
     height: 30rem;
     background-image: url("../images/New\ Photos/Wild\ barbell\ .jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     display: flex;
     justify-content: center;
}

.colBackground3-3{
     width: 100%;
     height: 30rem;
     background-image: url("../images/New\ Photos/paintbrush.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     display: flex;
     justify-content: center;
}

@media all and (max-width: 500px) {
.col-1-3,
.col-2-3,
.col-3-3{
     width: 100%;
     padding: 0;
     margin: 1rem 5rem;
}

.artworkLink h2 {
     line-height: 6rem;
}

.artworkLink div{
     width: 100%;
}
}

/* REVIEW SECTION */

.reviewLink{
     width: 100%;
     display: flex;
     flex-flow: row wrap;
     background-color: #dad5c8;
}

#reviewHeader{
     width: 100%;
     flex: 0 1 100%;
     text-align: center;
}

.reviewLink div{
     width: 50%;
     display: flex;
     flex-flow: column;
     align-items: center;
     justify-content: center;
     padding: 3rem;
     flex: 1 0 50%;
}


/* CONTACT SECTION */

.contactLink{
     padding: 0 3rem 3rem 3rem;
     background-color: #dad5c8;
}

.contact {
     width: 80%;
     margin: 0 auto;
}

.submitButton {
     margin-top: 2rem;
     padding: 2rem 4rem;
     font-size: 2rem;
     /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}

label {
     font-family: 'clash-display-Regular';
     display: block;
     margin: 1rem 0 0 0;
     font-size: 2rem;
}

textarea {
     width: 100%;
     height: 15rem;
     font-family: 'clash-display-Regular';
     font-size: 2rem;
     border: #153548 3px solid;
     background: transparent;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

input {
     font-family: 'clash-display-Regular';
     height: 4rem;
     font-size: 2rem;
     width: 100%;
     border: #153548 3px solid;
     background: transparent;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.contactLink button{
     padding: 2rem 3.5rem;
     margin: 1rem 0 0 0;
     font-size: 1.75rem;
     background-color: transparent;
     border: #153548 2px solid;
     border-radius: 20px;
     cursor: pointer;
     transition: all 0.2s;
     color: #153548;
     /* box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); */
}

.contactLink button:hover{
     border: #ca6c00 2px solid;
     color: #ca6c00;
     scale: 1.05;
}

/* FOOTER */

footer {
     background-color: #dad5c8 !important;
     width: 100%;
     height: fit-content;
     padding: 1rem 0;
     background: transparent;
}

footer ul {
     width: 100%;
     display: flex;
     justify-content: center;
     list-style: none;
     padding: 0;
     gap: 1rem;
}

footer a {
     color: #153548;
     font-size: 2rem;
}

footer p {
     color: #153548;
     display: flex;
     justify-content: center;
}

/* Our Story Page */

.ourStoryPage {
     margin: 5rem;
     padding: 5rem;
     background-color: #dad5c8;
     border-radius: 50px;
     display: flex;
     flex-flow: row wrap;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     justify-content: center;
}

.ourStoryPage div + div{
     display: flex;
     flex-flow: column;
     align-items: center;
     justify-content: center;
     flex: 1 0 70%;
}

.image{
     display: flex;
     flex-flow: column;
     align-content: flex-start;
     justify-content: center;
     flex: 1 0 30%;
}

#storyH2{
     width: 100%;
     display: flex;
     justify-content: center;
}

#storyH2 h2{
     width: fit-content;
}

.ourStoryPage p{
     font-family: 'clash-display-Regular';
     font-weight: 600;
     padding-left: 5rem;
     line-height: 2.75rem;
}

@media all and (max-width: 850px) {

     .ourStoryPage{
          margin: 5rem 2rem;
          padding: 5rem 2rem;
     }

     .ourStoryPage div + div{
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: center;
          flex: 1 0 100%;
     }
     
     .image{
          display: flex;
          flex-flow: column;
          align-content: flex-start;
          justify-content: center;
          flex: 1 0 100%;
     }

     .ourStoryPage p{
          font-family: 'clash-display-Regular';
          font-weight: 600;
          padding-left: 0;
          line-height: 2.75rem;
          margin-top: 3rem;
     }
}
/* Our Process Page */

.ourProcessPage {
     margin: 5rem;
     padding: 5rem;
     background-color: #dad5c8;
     border-radius: 50px;
     display: flex;
     flex-flow: column wrap;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     text-align: -webkit-center;
     align-items: center;
}

.ourProcessPage h3{
     font-size: 5rem;
     margin: 0.5rem 0;
}

.ourProcessPage p{
     font-size: 1.75rem;
     margin: 1rem 0 0rem 0;
     font-family: 'clash-display-Regular';
}

.ourProcessPage h4{
     font-size: 4rem;
     margin: 4rem 0 0.5rem 0;
     font-family: 'clash-display-Regular';
}
.ourProcessPage span{
     font-size: 1.75rem;
     margin: 1rem 0 0rem 0;
     font-family: 'clash-display-Regular';
}


@media all and (max-width: 850px) {

     .ourProcessPage{
          margin: 5rem 2rem;
          padding: 5rem 2rem;
     }
}

/* Media */

@media all and (max-width: 850px) {
     
     .subheader{
          font-size: 3rem !important;
     }

     #quote{
          font-size: 5rem;
     }

     }

     /* Photo Slider */
     
     .about-title {
          font-size: 7.5rem;
          font-weight: 900;
          text-transform: uppercase;
          letter-spacing: -0.02em;
          position: absolute;
          top: 45px;
          left: 50%;
          transform: translateX(-50%);
          pointer-events: none;
          white-space: nowrap;
          font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
          background: linear-gradient(
               to bottom,
               rgb(8 42 123 / 35%) 30%,
               rgb(255 255 255 / 0%) 76%
          );
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
     }
     
     .carousel-container {
          width: 100%;
          height: 450px;
          position: relative;
          perspective: 1000px;
          margin-top: 80px;
     }
     
     .carousel-track {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          transform-style: preserve-3d;
          transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }
     
     .card {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          width: auto;
          height: clamp(220px, 40vw, 380px); /* 👈 responsive height */
          background: white;
          border-radius: 20px;
          overflow-x: visible;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
          transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          cursor: pointer;
        }
        
     
        .card img {
          display: block;
          height: 100%;
          width: auto; /* lets card take the natural width of image */
          object-fit: cover;
          object-position: center;
          transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          position: absolute;
          margin: 0 auto;
        }

        

     .card.center {
          z-index: 10;
          transform: scale(1.1) translateZ(0);
     }
     
     .card.center img {
          filter: none;
     }
     
     .card.left-2 {
          z-index: 1;
          transform: translateX(-400px) scale(0.8) translateZ(-300px);
          opacity: 0.7;
     }
     
     .card.left-2 img {
          filter: grayscale(100%);
     }
     
     .card.left-1 {
          z-index: 5;
          transform: translateX(-200px) scale(0.9) translateZ(-100px);
          opacity: 0.9;
     }
     
     .card.left-1 img {
          filter: grayscale(100%);
     }
     
     .card.right-1 {
          z-index: 5;
          transform: translateX(200px) scale(0.9) translateZ(-100px);
          opacity: 0.9;
     }
     
     .card.right-1 img {
          filter: grayscale(100%);
     }
     
     .card.right-2 {
          z-index: 1;
          transform: translateX(400px) scale(0.8) translateZ(-300px);
          opacity: 0.7;
     }
     
     .card.right-2 img {
          filter: grayscale(100%);
     }
     
     .card.hidden {
          opacity: 0;
          pointer-events: none;
     }
     
     .member-info {
          text-align: center;
          margin-top: 40px;
          transition: all 0.5s ease-out;
     }
     
     .member-name {
          color: rgb(8, 42, 123);
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 10px;
          position: relative;
          display: inline-block;
     }
     
     .member-name::before,
     .member-name::after {
          content: "";
          position: absolute;
          top: 100%;
          width: 100px;
          height: 2px;
          background: rgb(8, 42, 123);
     }
     
     .member-name::before {
          left: -120px;
     }
     
     .member-name::after {
          right: -120px;
     }
     
     .member-role {
          color: #848696;
          font-size: 1.5rem;
          font-weight: 500;
          opacity: 0.8;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          padding: 10px 0;
          margin-top: -15px;
          position: relative;
     }
     .dots {
          display: flex;
          justify-content: center;
          gap: 10px;
          margin-top: 60px;
     }
     
     .dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: rgba(8, 42, 123, 0.2);
          cursor: pointer;
          transition: all 0.3s ease;
     }
     
     .dot.active {
          background: #153548;
          transform: scale(1.2);
     }
     
     .nav-arrow {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: #153548;
          color: white;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          z-index: 20;
          transition: all 0.3s ease;
          font-size: 1.5rem;
          border: none;
          outline: none;
          padding-bottom: 4px;
          margin: 0 1%;
     }
     
     .nav-arrow:hover {
          background: rgba(0, 0, 0, 0.8);
          transform: translateY(-50%) scale(1.1);
     }
     
     .nav-arrow.left {
          left: 20px;
          padding-right: 3px;
     }
     
     .nav-arrow.right {
          right: 20px;
          padding-left: 3px;
     }
     
     @media (max-width: 768px) {
          .about-title {
               font-size: 4.5rem;
          }
     
          .card {
               width: 200px;
               height: 280px;
          }
     
          .card.left-2 {
               transform: translateX(-250px) scale(0.8) translateZ(-300px);
          }
     
          .card.left-1 {
               transform: translateX(-120px) scale(0.9) translateZ(-100px);
          }
     
          .card.right-1 {
               transform: translateX(120px) scale(0.9) translateZ(-100px);
          }
     
          .card.right-2 {
               transform: translateX(250px) scale(0.8) translateZ(-300px);
          }
     
          .member-name {
               font-size: 2rem;
          }
     
          .member-role {
               font-size: 1.2rem;
          }
     
          .member-name::before,
          .member-name::after {
               width: 50px;
          }
     
          .member-name::before {
               left: -70px;
          }
     
          .member-name::after {
               right: -70px;
          }
     }
     
     .clear{
          display: none;
     }

     .photoSlide{
          margin: 0 0 5rem 0;
          overflow-x: hidden;
     }