/* fonts */
@font-face {
  font-family: "JosefinSans";
  src: url("../fonts/JosefinSans.ttf");
}

@font-face {
  font-family: "myriaDPRO";
  src: url("../fonts/myriaDPRO.OTF");
}

@font-face {
  font-family: "PlayfairDisplay";
  src: url("../fonts/PlayfairDisplay.ttf");
}

@font-face {
  font-family: "RedHatDisplay";
  src: url("../fonts/RedHatDisplay.ttf");
}

@font-face {
  font-family: "RedHatDisplay";
  src: url("../fonts/RedHatDisplay-Italic.ttf");
  font-style: italic;
}

.brands{
  font-family: RedHatDisplay;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 30px;
}
.hours-text{
  font-family: PlayfairDisplay;
  font-size: 20px;
/*  padding-top: 100px;*/
}
.second-para{
  padding-top: 60px;
}
.enquiry{
/*  padding-top: 140px;*/
    font-family: RedHatDisplay;
    font-style: italic;
    opacity: 0.8;
    font-size: 12px;
}

.clients{
  font-size: 80px;
  font-family: PlayfairDisplay;
  color: #b97e2f;
  /* font-weight: bold; */
 
}

html {scroll-behavior: smooth;}
.ht-100{height: 100vh}
.bg-black{background: #000}
.bg-dark-pink{background: #ebccb9}
.bg-light-pink{background: #fff5f2}
.text-pink{color: #d55485}
.text-brown{color: #b97e2f}
.title{color: #bd4066; font-size: 18px;font-weight: bold;font-family: PlayfairDisplay; letter-spacing: 2px;}
.logo{width: 40%; height: auto}
.needle-section{padding: 60px 60px 100px 60px}
.needle-bg{background-image: url('../images/background-frame.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;}
.needle-sub2{font-size: 2.5em}
.section-padding{padding: 100px 0 100px 0}

.boutique-agency{color: #b97e2f;font-size: 6vw; padding: 50px 0 50px 0; font-family: PlayfairDisplay;float: right; text-align: right;}
.about-bg{background-image: url("../images/paper.png"); background-size: 100% 100%;}
.left-hand-img{width: 100%}
.left-hand-bg{background: url('../images/paper.png');background-size: 100% 95%;background-repeat: no-repeat;}
.acheive-brand-wrap{width: 40vh; height: 40vh; border-radius: 50%;display: block;}
.circle-bg{background-image: url('../images/dot-circle.png');background-size: cover;}
.arrow{width: 50px}
.client-logo{padding: 10px 15px;text-align: center;}
.hamburger-wrap{width: 90px;height: 90px;position: absolute; right: 20vh;margin-top: 50px}
.down-arrow-wrap{width: 90px;height: 90px;position: absolute; right: 20vh;bottom: 50px}
.form-input{display: block;width: 100%; border: 2px solid #b97e2f;padding: 15px 15px}
.form-input::placeholder { color: #000;opacity: 1; }
.name{font-size: 80px;padding-top: 20px;color: #b97e2f; line-height: 1; font-family: PlayfairDisplay}
.shaping-brand{font-size: 45px; font-family: PlayfairDisplay}
#testimonial-slides .glide__slide{padding: 0px 20px}
#insta-slides .glide__slide{padding-right: 20px}
.glide__arrow{box-shadow: none !important;border: none !important}
.number{display: block;margin-top: 70px;}
.work-title{position: absolute;right: 70%;margin-top: 80px;letter-spacing: 2px;font-family: myriaDPRO; font-size: 30px; line-height: 1}
.whatwedo-img-wrap{border-left: 2px solid #b97e2f;border-right: 2px solid #b97e2f;padding-left: 0px;padding-right: 0px;}
.whatwedo-img-title{float: right; margin-right: 10px}
.what-we-do-title{font-size: 45px; color: #b97e2f;font-family: PlayfairDisplay}
.model1{width: 400px; position: absolute;left: 0%;display: block;margin-top:-15%}
.model2{width: 400px;position: absolute;right: 0%;margin-top: 10%}
.what-more-wrap{padding: 10% 20% 0;font-family: PlayfairDisplay}
.what-more-txt{font-size: 50px; color: #ebccb9; font-family: PlayfairDisplay; line-height: 1}
.enquire-strategist{font-size: 25px;font-family: RedHatDisplay; font-weight: 500;letter-spacing: 1px}
.block-hours{font-family: PlayfairDisplay;font-size: 50px;color: #ebccb9}
.vertical-text{position: absolute;left: -50px;transform: rotate(-90deg);z-index: 1; font-family: JosefinSans}
/*.animation{opacity: 0}*/

/* menu css */
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(255, 245, 242);
  background-color: rgba(255, 245, 242, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 20px;
  color: #bd4066;
  display: block;
  transition: 0.3s;
  font-family: PlayfairDisplay;
  letter-spacing: 1.3px;
  font-weight: bold;
}

.overlay a:hover, .overlay a:focus {
  color: #bd4066;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.overlay .logo {
  position: absolute;
  top: 20px;
  left: 45px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
/* // menu css */

/* #welcome svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

.line-container{
  position:absolute;
  top: -45%;
  left:0;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
}
/* #welcome svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: opacity 0.5s ease-in-out, stroke-dashoffset 2s ease-in-out;
} */

/* #commonsection {
  position: relative;
  height: 500px; adjust the height to match your section 
}

#commonsection svg {
  position: absolute;
  top: -330px;
  left: 0;
  width: 100%;
  height: 100%;
} */
.client-logo img{
  max-width: none;
  height: auto;
  width: 75px;
}
.client-logo .imgSize{  
  max-width: none;
  width: 155px;
}
.logoCollection{
  padding: 15px 80px;
}
.client-logo .roho {
  width: 40px;
}



.card1 {
  height: 300px;
  width: 400px;
  transition: transform 0.5s;
 /*  border-radius: 5px; */
}
.card1 img{transition: transform 0.5s}
.card:nth-child(odd) {
  /* background-color: blue; */
}
.card:nth-child(even) {
  /* background-color: rgb(0, 183, 255); */
}
.slider-container {
  width: 100%;
  height:430px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.inner-slider {
  width: 150%;
  display: flex;
  gap: 10px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}
.ourWorkSlider{
  position: relative;
  width: 100%;
  height: 52vh;
  margin-top: 120px;
}
.imgHeight_ourWork{
  /* height: 420px; */
}

.sticky-image {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: block;
  width: 189px;
  height: 40px;
  cursor: pointer;
}

.sticky-image img {
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.sticky-image:hover img {
  transform: scale(1.05);
}