/* 
IMPORT FONTS 
* Roboto
* DM Serif
*/
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../fonts/glacial-indifference/GlacialIndifference-Italic.eot');
  src: local('Glacial Indifference Italic'), local('GlacialIndifference-Italic'),
      url('../fonts/glacial-indifference/GlacialIndifference-Italic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/glacial-indifference/GlacialIndifference-Italic.woff2') format('woff2'),
      url('../fonts/glacial-indifference/GlacialIndifference-Italic.woff') format('woff'),
      url('../fonts/glacial-indifference/GlacialIndifference-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../fonts/glacial-indifference/GlacialIndifference-Regular.eot');
  src: local('Glacial Indifference Regular'), local('GlacialIndifference-Regular'),
      url('../fonts/glacial-indifference/GlacialIndifference-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/glacial-indifference/GlacialIndifference-Regular.woff2') format('woff2'),
      url('../fonts/glacial-indifference/GlacialIndifference-Regular.woff') format('woff'),
      url('../fonts/glacial-indifference/GlacialIndifference-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../fonts/glacial-indifference/GlacialIndifference-Bold.eot');
  src: local('Glacial Indifference-Bold'), local('GlacialIndifference-Bold'),
      url('../fonts/glacial-indifference/GlacialIndifference-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/glacial-indifference/GlacialIndifference-Bold.woff2') format('woff2'),
      url('../fonts/glacial-indifference/GlacialIndifference-Bold.woff') format('woff'),
      url('../fonts/glacial-indifference/GlacialIndifference-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Laries Script';
  src: url('../fonts/laries/laries.woff') format('woff');
  font-weight: normal; /* Bold */
  font-style: normal;
}



:root{
  --primary-color: #fda700;
  --secondary-color: #033b20;
  --bg-dark-color: #262626;

  --font-primary: 'Glacial Indifference';
  --font-secondary: 'Laries Script', cursive;
  --font-tinos: "Tinos", serif;
}

/* General  */

body{
    overflow-x: hidden;
    overflow-y: auto;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    font-family: var(--font-primary);
    line-height: 1.5;
    background-color: var(--primary-color); 
}

a{
  color: inherit;
  text-decoration: none;
}

a:hover{
  color: inherit;
  text-decoration: underline;
}

section{
  overflow: hidden;
}

.h-100vh{
  height: 100vh;
}

.z999{
  z-index: 9999;
}

.h-100-vh{
height: 100vh;
}

.glacial-ff{
  font-family: var(--font-primary);
}

.laries-ff{
  font-family: var(--font-secondary);
}

.tinos-ff{
  font-family: var(--font-tinos);

}

.heading.tinos-ff{
  line-height: 72px;
}

.color-primary{
  color: var(--primary-color);
}

.color-secondary{
  color: var(--secondary-color);
}

.text-orange{
  color: var(--primary-color) !important;
}

.text-orange-logo{
  color: var(--primary-color) !important;
}

.text-orange-logo::before{
  color: rgba(253, 169, 0, 0.40) !important;
  }

  .text-green{
    color: var(--secondary-color) !important;
  }

.text-green-logo{
  color: var(--secondary-color) !important;
}

.text-green-logo::before{
color: rgba(3, 58, 32, 0.40) !important;
}

.text-50{
  font-size: 50px;
}

.text-lg{
  font-size: 30px;
}

.text-e-lg{
  font-size: 100px;
}

.btn:hover{
  text-decoration: none;
  
}

/* Loader */

body.loading{
  position: relative;
  overflow: hidden;
}

/* body.loading main{
  display: none;
} */

body.loading header{
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 99999;
  background-color: var(--primary-color);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

body.loading header .navbar-nav{
  display: none;
}

body.loading header .logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#loader{
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 99999;
  background-color: var(--primary-color);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-container{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}


.loading-desc{
  position: absolute;
  justify-content: center;
  width: 100%;
  display: none;
  left: 0;
}

body.loading .loading-desc{
  display: flex;
  z-index: 999999;
  bottom: 40px;
}

body.loading .nav-menu{
  display: none !important;
}





/*
*** Header
*Logo
*/

.header-fixed{
  position: fixed;
  width: 100%;
}

.desktop-nav li a.nav-link{
  color: #fff;
  font-weight: 500;
  font-size: 17px;
  text-shadow: 1px 1px 1px #000;
}

.desktop-nav li a.nav-link:first-child{
  margin-right: 20px;
}

.logo-wrap{
  position: relative;
}

.desktop-wrap{
  width: 300px;
}

.logo{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -23px;
}

.logo:hover{
  text-decoration: none;
}

#menu-mobile-menu{
  padding-top: 60px;
}

.cipher{
  color: #fff;
  font-size: 53px;
  position: relative;
}

.cipher.studios::after{
  content: 'studios';
  font-size: 21px;
  position: absolute;
  bottom: -7px;
  right: 5px;
}

.cipher.five::before{
  content: attr(data-count);
  font-weight: bold;
  font-size: 162px;
  color: #ffffff6b;
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -73px;

}

@media (max-width: 589px) {
  .logo{
    left: -2px;
  }
  .cipher{
    font-size: 35px;
  }
  
  .cipher.studios::after{
    font-size: 17px;
    bottom: -8px;
  }
  
  .cipher.five::before{
    font-size: 130px;
    top: -67px;
  
  }
}

.offcanvas.hiding, .offcanvas.show, .offcanvas.showing {
  visibility: visible;
  height: 100vh !important;
}

.offcanvas-body{
  background-color: var(--secondary-color);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

a.nav-link{
  font-size: 45px;
  font-weight: 500;
}



/* Hero */

.hero-with-bg{
  background-image: url('https://demo.clottware.com/photo/wp-content/uploads/2024/11/hero.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -522px;
}

@media (max-width: 598px) {
  .hero-with-bg{
    background-size: auto;
    background-position-y: -600px;
    background-position-x: -500px;
  }
}

.hero-tagline{
 position: relative;
 font-family: var(--font-tinos);
 color: var(--primary-color);
 font-size: 90px;
}

/* .hero-tagline.desktop-moment::after{
  content: 'Moments';
  position: absolute;
  top: 184px;
  right: 70px;

} */


/* Founder */
.founder-image-wrap{
  width: 392px;
}


.founder-img{
  object-fit: cover;
  width: 100%;
}

.founder-image-wrap .janella{
  margin-top: 50px;
}

.founder-header{
  top: 72px;
    font-size: 100px;
    left: 77px;
}


/* Video Section */

.large-video{
  width: 100%;
  height: auto;
}

.homepage-video {
  width: 100%; /* Full width of the container */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensure the video covers its container */
}

.video-cover{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.bg-dark-color{
  background-color: var(--bg-dark-color);
}

.bg-secondary-color{
  background-color: var(--secondary-color) !important;
}

/* Services */
.iphone-x{
  position: relative;
  overflow: hidden;
  width: 245px;
  height: 490px;
  background-color: #fff;
  border: 8px solid #000;
  border-radius: 40px;
  box-shadow: 0px 0px 1px 1px rgba(150,150,150,0.75);
-webkit-box-shadow: 0px 0px 1px 1px rgba(150,150,150,0.75);
-moz-box-shadow: 0px 0px 1px 1px rgba(150,150,150,0.75);
}

.iphone-x::after{
  content: '';
  position: absolute;
  top: 8px;
  left: 75px;
  background-color: #000;
  border-radius: 20px;
  height: 24px;
  width: 75px;

}

.service-media{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-title{
  margin-top: 20px;
  margin-bottom: 20px;
}

.service-title{
  color: var(--primary-color);
  font-family: var(--font-tinos);
  font-style: italic;
  text-decoration: underline;
  font-size: 20px;
  text-align: center;
  text-wrap: auto;
}

/* Testimonials */

.testimonial-img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.clients-logo{
  transition: filter 0.45s cubic-bezier(0.3, 0.4, 0.1, 1), opacity 0.45s cubic-bezier(0.3, 0.4, 0.1, 1);
  -webkit-filter: sepia(61);
  filter: sepia(61);
  opacity: 1;
  height: auto;
  width: 100%;
  object-fit: scale-down;
}


/* Page */

.page-title{
  display: flex;
  align-items: center;
  justify-content: end;
  height: 270px;
  flex-direction: column;

}


.gallery-masonry{
  width: 100%;
  height: auto;
  border-radius: 15px;
}

.card, .card-body{
  border: 0px;
  background: transparent;
}

label{
  color: var(--secondary-color);
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 10px;
}

input.form-control, textarea.form-control, select.form-select{
  border: 0px;
  border-bottom: 1px solid var(--secondary-color);
  background: transparent;
  color: var(--secondary-color);
}

input.form-control:focus, textarea.form-control:focus, select.form-select:focus{
  border: 0px;
  border-bottom: 1px solid var(--secondary-color) !important;
  background: transparent;
  color: var(--secondary-color);
  box-shadow: none;
}

.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: transparent;
  border-radius: var(--bs-border-radius);
}

.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
  top: -5px;
}

/* Footer */

.footer-100vh{
  height: 100vh;
  padding: 0 20px;
}
.footer-with-bg{
  background-image: url('https://cipher5tudios.com/assets/media/videos/width_1600.webp');
  object-fit: cover;
  width: 100%;
  height: 100%;
right: 0;
  -moz-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.table>:not(caption)>*>* {
  padding: .5rem .5rem;
  color: var(--secondary-color);
  background-color: transparent !important;
  border-color: var(--secondary-color);
}

.marquee {
  overflow: hidden;
  display: flex;
  position: absolute;
  bottom: 0;
  background-color: var(--secondary-color);
  width: 100%;
}

.marquee h5{
  font-size: 2em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--primary-color);
}

.btn-book{
  position: fixed;
  bottom: 55px;
  right: 30px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.about-img{
  width: auto;
  height: 500px;
  border-radius: 5px;
}

.card{
  position: relative;
}

.tags{
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: var(--primary-color);
  border-radius: 100%;
  padding: 5px 5px;
  display:flex;
  align-items:center;
  justify-content: center;
  z-index: 1;
}

.photo {
  display: inline-block;
  width: 21px;
  height: 21px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 9c-1.626 0-3 1.374-3 3s1.374 3 3 3s3-1.374 3-3s-1.374-3-3-3'/%3E%3Cpath fill='%23000' d='M20 5h-2.586l-2.707-2.707A1 1 0 0 0 14 2h-4a1 1 0 0 0-.707.293L6.586 5H4c-1.103 0-2 .897-2 2v11c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V7c0-1.103-.897-2-2-2m-8 12c-2.71 0-5-2.29-5-5s2.29-5 5-5s5 2.29 5 5s-2.29 5-5 5'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  color:#033b20;
}

.video {
  display: inline-block;
  width: 21px;
  height: 21px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M4 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm4.625 5.63a1.235 1.235 0 0 1 1.715-.992c.504.216 1.568.702 2.916 1.48a28 28 0 0 1 2.74 1.786a1.234 1.234 0 0 1 0 1.98a28 28 0 0 1-2.74 1.784a28 28 0 0 1-2.916 1.482a1.234 1.234 0 0 1-1.715-.992a29 29 0 0 1-.176-3.264c0-1.551.112-2.719.176-3.264'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  color:#033b20;
}

.gallery-content-center-full{
  width: 950px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.testimonial-img-wrap{
    background: #fff;
    height: 110px;
    width: auto;
    margin: auto;
    padding: 20px;
    border-radius: 14px;
}