@font-face {
  font-family: "Callient";
  src: url(../font/fonnts.com-Callient.ttf);
  font-weight: 400;
}

/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styling */
body {
  direction: ltr;
  font-family: "Montserrat", sans-serif;
  line-height: 1.6;
  background: white;
  color: #222222;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  overflow-wrap: break-word;
}

/* Header styling  Section */
header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background-color: #282828;
  padding: 5px 0px;
  text-align: left;
  margin-bottom: 20px;
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: 100;
}

.wetrust-loop-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  animation: translateLoop 20s linear infinite;
}

.wetrust-content {
  display: flex;
  flex-direction: row;
  flex: none;
  z-index: 500;
  white-space: nowrap;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
}

/* Text and dash styling */
.wetrust-text,
.wetrust-dash {
  display: inline-block;
  padding: 0 2px;
  color: #c8d1d7; /* Medium gray text */
  background-color: #282828;
}

/* Animation for looping text */
@keyframes translateLoop {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/*Styling Hero Section*/
.container-view {
  max-width: 120rem;
  width: 100%;
  margin: 0 auto;
}

/*Styling DropDown button*/
.dropbtn {
  background-color: transparent;
  color: black;
  padding: 0.5rem 0rem 0.5rem 1rem;
  font-size: 16px;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: transparent;
}

.dropdown {
  position: absolute;
  right: 2%;
  top: 4.5rem;
  z-index: 3;
}
.dropdown-menu {
  min-width: 100% !important;
  padding: 0 !important;
  border: 1px solid #e00000;
}
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0);
  min-width: 80px;
  padding: 0;
  box-shadow: 18px 18px 45px 19px rgba(79, 94, 120, 0.1);
}
.dropdown-content a {
  color: black;
  padding: 5px 16px;
  text-decoration: none;
  display: block;
}
.custom-dropdown {
  background-color: transparent !important;
  border: none !important;
}
.custom-dropdown .dropdown-icon {
  width: 10px;
  height: 10px;
  margin-left: 8px;
  color: #000;
}
.custom-dropdown::after {
  display: none;
}
.dropdown-item {
  border-radius: 10px !important;
}
/* fixed eye image*/
.fixed-eye {
  position: fixed;
  bottom: 3%;
  right: 3%;
  width: 91px;
  height: 89px;
  z-index: 100;
}
.order-btn {
  min-width: 11rem !important;
  max-width: 11rem;
  align-self: center;
}
/* Hero Section Design */
.padding-hero {
  padding: 0px 3%;
}
.padding-global {
  padding: 0px 5%;
}
.linear-black {
  background-image: linear-gradient(to right, #2d2d2d 0%, #747474 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.red-color {
  color: #e00000;
}

.website-title {
  font-size: 1.125rem;
  font-weight: 500;
  position: absolute;
  top: 4.844rem;
  left: 10%;
}

.red-button {
  background: linear-gradient(
    145deg,
    #b70000 2%,
    #da0000 15%,
    #ff4242 43%,
    #d10000 65%,
    #7a0000 100%
  );
  min-width: 10.3rem;
  min-height: 3.875rem;
  box-shadow: inset 0px -2px 2px 0px #00000025, inset 0px 4px 4px 0px #ff0000;
  border: none;
  border-radius: 2.5rem;
  padding: 3px 6px;
  cursor: pointer;
  overflow: hidden;
}
.btn-med {
  min-width: 12.5rem;
  transition: transform 1s ease-in-out;
}
.btn-med:hover {
  transform: translateY(-5px);
}
.btn-med:hover > .btn-choose {
  transform: translateX(-5px);
}
.order-button {
  position: absolute;
  top: 3.813rem;
  right: 10%;
  z-index: 2;
}
.love-button-icon {
  position: absolute;
  left: 5px;
  top: auto;
  bottom: auto;
  animation: slide-left 6s ease-in-out infinite;
}
@keyframes slide-left {
  0%,
  20% {
    right: -90px;
  }
  50%,
  70% {
    right: calc(100% - 64px);
  }
  100% {
    right: -90px;
  }
}
.shadow-outside-icon {
  position: absolute;
  top: 0%;
  width: 90%;
  margin: 0 auto;
  bottom: auto;
  left: 2%;
}
.shadow-outside-icon > img {
  width: 100%;
}
.shadow-inside-icon {
  position: absolute;
  top: 0%;
  bottom: auto;
  width: 90%;
  margin: 0 auto;
  left: 2%;
}
.shadow-inside-icon > img {
  width: 100%;
}
.button-text {
  font-size: 1.125rem;
  color: white;
  font-weight: 500;
  line-height: 1.5rem;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
}
.emoji,
.order {
  transition: opacity 0.5s ease-in-out;
}
.emoji {
  position: absolute;
  right: 21%;
  animation: fade-emoji 6s ease-in-out infinite;
}
.order {
  position: absolute;
  left: 16%;
  animation: fade-order 6s ease-in-out infinite;
}
@keyframes fade-order {
  0%,
  20% {
    opacity: 1;
  }
  50%,
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-emoji {
  0%,
  20% {
    opacity: 0;
  }
  50%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0; /* Reset to initial state */
  }
}
.linear-grey {
  background-image: linear-gradient(to right, #020202 0%, #8d8d8d00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.linear-emoji {
  background-image: linear-gradient(to right, #181818 0%, #0000005e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.span-gradient {
  background-image: linear-gradient(to right, #18181882 0%, #00000023 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-text {
  font-size: 18.75rem;
  line-height: 123.6%;
  font-family: "Cormorant SC", serif;
}
.red-point {
  position: absolute;
  top: -28%;
  width: 55%;
}
.red-point2 {
  position: absolute;
  top: -28%;
  width: 50.31%;
}
.red-point2 > img {
  width: 100%;
}
.red-point > img {
  width: 100%;
}
.all-swiss {
  font-size: 2.5rem;
  line-height: 100%;
  font-family: "Libre Bodoni", sans-serif;
  position: relative;
  left: 15%;
}
.all-swiss > span {
  font-size: 2rem;
}
.emoji-text {
  position: relative;
  left: 5%;
}

/*absolute Hero section */
.image-blue-light {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 90%;
}
.image-black-light {
  position: absolute;
  bottom: -30%;
  left: 0;
  z-index: -1;
  width: 29%;
}
.right-hero-image {
  position: absolute;
  bottom: 0;
  z-index: 0;
  right: 0;
  width: 27%;
}
.pin-girl-emoji {
  position: absolute;
  bottom: 0;
  z-index: 0;
  left: 12%;
  width: 42%;
}
.womans-image {
  position: absolute;
  top: 0;
  z-index: 0;
  left: 0;
  width: 35%;
}
.woman-hijab {
  position: absolute;
  bottom: 0;
  z-index: 0;
  left: 2%;
  width: 13%;
}
.b-letter {
  position: absolute;
  top: 20%;
  z-index: 0;
  right: 9%;
  width: 17.3%;
}
.a-letter {
  position: absolute;
  bottom: 2%;
  z-index: 0;
  left: 9%;
  width: 14.5%;
}

/*start design of watch animation*/
.hero-watch {
  position: absolute;
  top: 24%;
  width: 35%;
  left: 33%;
}
.hero-face {
  transition: opacity 1s ease-in;
}
.hero-face-smile {
  position: absolute;
  top: 11.8%;
  left: 31.5%;
  width: 26%;
  opacity: 0;
}

.hero-face-like {
  position: absolute;
  top: 11.8%;
  left: 31.5%;
  width: 26%;
}

.hero-face-bad {
  position: absolute;
  top: 11.8%;
  left: 31.5%;
  width: 26%;
  opacity: 0;
}
.hero-face-think {
  position: absolute;
  top: 11.8%;
  left: 31.5%;
  width: 26%;
  opacity: 0;
}
.emoji-like-image {
  position: absolute;
  right: 2%;
  width: 24%;
  top: 43%;
  animation: moveAndReturn 4s ease-in-out infinite;
}
@keyframes moveAndReturn {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10%, 10%);
  }
  100% {
    transform: translate(0, 0);
  }
}

.emoji-smile-image {
  position: absolute;
  right: 24%;
  width: 18%;
  top: 13%;
  animation: moveAndReturnSmile 4s ease-in-out infinite;
}
@keyframes moveAndReturnSmile {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-10%, 10%);
  }
  100% {
    transform: translate(0, 0);
  }
}
.emoji-super-like-image {
  position: absolute;
  left: 3%;
  width: 8%;
  top: 53%;
  animation: moveAndReturnLike 4s ease-in-out infinite;
}
@keyframes moveAndReturnLike {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(20%, -120%);
  }
  100% {
    transform: translate(0, 0);
  }
}
.emoji-bad-image {
  position: absolute;
  left: 20%;
  width: 6%;
  bottom: 23%;
  animation: moveAndReturnSmile 4s ease-in-out infinite;
}
.emoji-think-image {
  position: absolute;
  left: 20%;
  width: 11%;
  top: 41%;
  animation: moveAndReturnThink 4s ease-in-out infinite;
}
@keyframes moveAndReturnThink {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10%, -10%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/*video section style*/
.video-view-section {
  height: 47rem;
  width: 100%;
  background-image: url(../images/emoji-video-image.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.video-view-icon {
  position: absolute;
  right: 5%;
  bottom: 5%;
  cursor: pointer;
}

.video-view-icon > img {
  transition: transform 1s ease-in-out;
  width: 27%;
}
.video-view-icon:hover > img {
  transform: translate(0px, -5px);
}

.video-view-icon > p {
  font-size: 1.125rem;
  font-weight: 300;
  color: #fff;
  text-decoration: underline;
}
.background-video {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*slider design */
.container-slide {
  width: 100%;
  max-width: 100rem;
  margin: 7rem auto;
  padding: 0px 5%;
  object-fit: cover !important;
}
.gallery-column {
  width: 25%;
}
.gallery-column > a > img {
  width: 100%;
  height: 100%;
}
.h-23 {
  width: 100%;
  height: 23.125rem;
}
.h-18 {
  width: 100%;

  height: 18.125rem;
}
.lb-outerContainer {
  width: 60vw !important;
  height: 80vh !important;
}
.lb-image {
  width: 100% !important;
  height: 80vh !important;
  object-fit: cover;
  object-position: center center;
}
.button-slider {
  cursor: pointer;
}
.button-slider > img {
  transition: transform 1s ease-in-out;
}
.button-slider:hover > img {
  transform: translate(0px, -5px);
}
.button-slider > p {
  color: #bf0000;
  font-size: 1.125rem;
  font-weight: 300;
}
.k-letter {
  position: absolute;
  z-index: -1;
  right: -4%;
  bottom: -2%;
  width: 15%;
}
.k-two-letter {
  position: absolute;
  z-index: -1;
  right: 11%;
  bottom: 4%;
  width: 15%;
}

/*the world section*/
.container-world {
  width: 100%;
  max-width: 100rem;
  padding: 5rem 5%;
}
.linear-collection {
  background-image: linear-gradient(to right, #181818 0%, #00000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Cormorant SC", serif;
}
.linear-red {
  background-image: linear-gradient(to right, #6b0000 0%, #d10000 100%);
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
  font-family: "Cormorant SC", serif;
}
.title-collection {
  font-size: 6.25rem;
  line-height: 90%;
}
.desc-collection {
  color: #5a5a5a;
  font-size: 1.5rem;
  line-height: 150%;
  font-weight: 300;
}
.title-collection-large {
  font-size: 8.75rem;
  line-height: 90%;
}
.title-collection-small {
  font-size: 2.8rem;
  line-height: 3.75rem;
}
.btn-choose {
  font-size: 1.125rem;
  text-transform: capitalize;
  color: white;
  transition: transform 1.2s ease-in-out;
}
.smile-image {
  width: 11.5%;
}
.o-letter {
  position: absolute;
  left: 2.5%;
  bottom: 2%;
  width: 14%;
}
/*watch world section animation */
.sms-image {
  transition: opacity 1s ease-in-out;
}
.emoji-watch {
  width: 100%;
  opacity: 100;
}
.emoji-angery-watch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.emoji-smile-watch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.emoji-blue-watch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.emoji-black-watch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.man-watch-images {
  position: absolute;
  right: 0;
  top: -8%;
  width: 35%;
}
.blue-light-image {
  position: absolute;
  top: -22%;
  right: 13%;
  width: 50%;
}
.black-light-image {
  position: absolute;
  top: 4%;
  right: 4%;
  width: 40%;
}
.light-image {
  position: absolute;
  top: 4%;
  right: 0%;
  width: 53%;
}

/*technical spaces section*/
.container-spaces {
  max-width: 72rem;
}
.spaces-title {
  font-size: 1.125rem;
  color: #000;
  line-height: 150%;
  font-weight: 600;
}

.spaces-desc {
  font-size: 1.25rem;
  color: #bf0000;
  line-height: 150%;
  font-weight: 300;
}
.spaces-second {
  position: relative;
  right: 20%;
}
.spaces-third {
  position: relative;
  right: 35%;
}
.spaces-r-second {
  position: relative;
  left: 20%;
}
.spaces-r-third {
  position: relative;
  left: 26%;
}
.spaces-r-fourth {
  position: relative;
  left: 17%;
}
.spaces-r-final {
  position: relative;
  left: -5%;
}
.technical-images-view:hover > .emoji-technical {
  transform: rotate(-20deg) translateX(-8%);
}
.technical-images-view:hover > .blue-emoji-technical {
  transform: rotate(20deg) translateX(17%) translateY(30px);
}
.technical-images-view:hover > .black-emoji-technical {
  transform: translateX(5%) translateY(12px);
}
.emoji-technical,
.blue-emoji-technical,
.black-emoji-technical {
  transition: transform 3s ease-in-out;
}
.black-emoji-technical {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.blue-emoji-technical {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.smile-3-icon {
  position: relative;
  right: 13%;
}
.btn-heart {
  overflow: visible;
  min-width: 14rem;
}
.btn-heart:hover > .heart-icon {
  transform: scale(1.2);
}
.heart-icon {
  position: absolute;
  right: -20%;
  z-index: 5;
  transition: transform 1s ease-in-out;
}
.tech-bg-woman {
  position: absolute;
  left: 0;
  top: 19%;
  width: 38.5%;
}
.woman-imagess {
  position: absolute;
  right: 8%;
  bottom: 8%;
  width: 13%;
}

.u-letter {
  position: absolute;
  right: 4%;
  bottom: 3%;
  width: 12%;
}
.light-image-tech {
  position: absolute;
  z-index: 0;
  width: 86%;
  top: 0%;
}

/* under tech section*/
.container-strap {
  max-width: 82rem;
}
.strap-view {
  margin-top: 9rem;
  margin-bottom: 7rem;
}
.r-letter {
  position: absolute;
  left: 2%;
  bottom: 22%;
  width: 11.5%;
}
.title-strap {
  font-size: 1.625rem;
  color: #5a5a5a;
  line-height: 150%;
  font-weight: 400;
}
.title-strap-red {
  color: #cc0000;
}
.emoji-strap-view {
  width: 49%;
}

.strap-emoji {
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease-in;
}

.strap-emoji-1 {
  opacity: 1; /* Initially visible */
}
.strap-emoji-2 {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  opacity: 0;
}
.strap-emoji-3 {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  opacity: 0;
}
.strap-emoji-4 {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  opacity: 0;
}
.strap-emoji-5 {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  opacity: 0;
}
.strap-emoji-6 {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  opacity: 0;
}

.woman-image-right {
  position: absolute;
  top: -18%;
  right: 0%;
  width: 43%;
}
.emoji-angery-smile {
  position: absolute;
  top: 36%;
  right: -27%;
  width: 32%;
}
.emoji-smile-smile {
  position: absolute;
  top: -18%;
  left: -25%;
  width: 31%;
}
.emoji-face-smile {
  position: absolute;
  top: 3%;
  right: -2%;
  width: 14%;
}
.emoji-bad-smile {
  position: absolute;
  bottom: -8%;
  right: 0%;
  width: 18%;
}
.emoji-think-smile {
  position: absolute;
  top: -14%;
  left: 55%;
  width: 26%;
  z-index: -1;
}
.emoji-like-smile {
  position: absolute;
  left: 0%;
  bottom: 12%;
  width: 26%;
}

@keyframes moveToBottomAndBack {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(20%);
  }
  50% {
    transform: translateY(20%);
  }
  75% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

.emoji-smile-smile,
.emoji-bad-smile,
.emoji-think-smile,
.emoji-like-smile,
.emoji-angery-smile {
  animation: moveToBottomAndBack 4.5s infinite ease-in-out;
}

/* slide */
.splide-section-view {
  padding-left: 11%;
}
.slide-text {
  font-size: 11.25rem;
  line-height: 90%;
}
.splide__list {
  display: flex;
}

.splide {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.splide__track {
  overflow: hidden;
  width: 100%;
}

.splide__slide {
  width: 23%;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}
.splide__slide > img {
  width: 100%;
  height: 100%;
}
.splide__arrow {
  display: flex;
  cursor: pointer;
}
.lb-number {
  display: none !important;
}
.slide-face,
.slide-face-2,
.slide-face-3,
.slide-face-4,
.slide-face-5 {
  transition: opacity 0.7s ease;
}
.smile-icon-diamonds {
  position: absolute;
  top: 28%;
  left: 34%;
  width: 25%;
}
.think-icon-diamonds {
  position: absolute;
  top: 28%;
  left: 34%;
  width: 25%;
}
.bad-icon-diamonds {
  position: absolute;
  top: 28%;
  left: 34%;
  width: 25%;
}
.like-icon-diamonds {
  position: absolute;
  top: 28%;
  left: 34%;
  width: 25%;
}
.love-icon-diamonds {
  position: absolute;
  top: 28%;
  left: 34%;
  width: 25%;
}
.watch-name {
  font-size: 1.125rem;
  font-weight: 600;
  list-style: 150%;
  color: #000000;
}
.watch-price {
  font-size: 1rem;
  font-weight: 300;
  list-style: 130%;
  color: #e00000;
}
.a-slide-letter {
  width: 15%;
  padding-right: 2%;
}
.light-blue-black {
  position: absolute;
  left: 0%;
  top: -35%;
  width: 45%;
}
.light-blue-light {
  position: absolute;
  right: 0%;
  top: -38%;
  width: 20%;
}
/* unique section */
.face-unique-image {
  position: relative;
  left: 20%;
}
.like-light {
  position: absolute;
  left: -30%;
  top: 0%;
  width: 130%;
  max-width: 130%;
}
.unique-title {
  font-size: 8.125rem;
  line-height: 100%;
}
.unique-desc {
  font-size: 1.625rem;
  line-height: 150%;
  text-transform: uppercase;
}
.unique-para {
  font-size: 1.125rem;
  line-height: 150%;
  color: #5a5a5a;
}
.loop-emoji-image {
  position: absolute;
  top: 0%;
  right: -15.5%;
  width: 140%;
  max-width: 150%;
  transition: transform 2s ease-in-out;
  margin-top: 36%;
}
.woman-image-unique {
  position: absolute;
  right: 0%;
  bottom: 0%;
  width: 20%;
}

/*form section*/
.padding-form {
  padding: 0px 10%;
}
.form-title {
  font-size: 10rem;
  line-height: 100%;
}
.form-title-ru {
  font-size: 7.5rem;
}
.form-desc {
  font-size: 1.125rem;
  line-height: 150%;
  color: #5a5a5a;
  font-weight: 300;
}
.form-label-row {
  color: #a9a9a9;
  font-size: 1rem;
  padding-left: 1.5rem;
  font-weight: 300;
}
.form-control-row {
  background-color: white;
  color: #000;
  padding: 1rem 1.5rem;
  border-radius: 40px;
  border: 1px solid #c4c4c4;
  box-shadow: none;
  outline: none;
  font-size: 1.25rem;
  font-family: "Montserrat", serif;
  font-weight: 300;
}
.form-control-row::placeholder {
  color: #000;
  font-weight: 300;
  font-family: "Montserrat", serif;
}
.form-control-row:focus {
  border: 1px solid #548fc1;
  box-shadow: none;
  outline: none;
}
.form-control-row:focus > .form-label-row {
  color: #548fc1;
}
.form-control-row:active {
  border: 1px solid #548fc1;
  box-shadow: none;
  outline: none;
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
  background-image: none;
}
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: none;
}
.form-control.is-valid,
.was-validated .form-control:valid {
  background-image: none !important;
}
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: none;
}
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../images/arrow-select.svg"); /* Replace with your icon path */
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 0.6rem;
  padding-right: 2rem; /* Adjust based on the size of the icon */
}

.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
  background-position: right 1.2rem center;
  background-size: 0.6rem;
  padding-right: 2rem;
}
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
  background-position: right 1.2rem center;
  background-size: 0.6rem;
  padding-right: 2rem;
}

.text-check-2 {
  font-size: 1.125rem;
  color: #5a5a5a;
  font-family: "Montserrat", serif;
  font-weight: 300;
}
.text-check-2 > span {
  color: #e00000;
}
.check-input-2 {
  width: 3.688rem;
  height: 3.688rem;
  border-radius: 50%;
  background-color: transparent;
  background-image: url("../images/check-befor.svg");
  background-size: cover;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  cursor: pointer;
}
.check-input-2:checked {
  background-color: transparent;
  background-image: url("../images/check-after\ \(1\).svg");
  background-size: cover;
  border: none;
  box-shadow: none;
}
.form-check > label {
  position: relative;
  width: 80%;
  top: -3.5rem;
  left: 4.5rem;
}
.check-input-2:focus {
  border: none;
  box-shadow: none;
  outline: none;
}
.invalid-feedback {
  padding-left: 1.5rem;
}
.woman-form-image {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 43.5%;
}
.woman-form-left {
  position: absolute;
  right: 0%;
  top: 16%;
  width: 25%;
}
.form-blue-light {
  position: absolute;
  right: 0%;
  top: 0%;
  width: 60%;
}
/*dynasty section*/
.dynasty-space {
  margin-bottom: 19rem;
}
.dynasty-desc {
  font-size: 1.125rem;
  line-height: 150%;
  color: #5a5a5a;
  font-weight: 300;
  position: absolute;
  right: 11%;
  bottom: 5%;
  width: 30%;
}
.brand-text {
  font-size: 0.875rem;
  color: #cc0000;
  font-weight: 300;
}
.dynasty-view {
  position: relative;
  top: 8rem;
}
.dynasty-view-center {
  position: relative;
  top: 17rem;
}
.dynasty-image-right {
  position: absolute;
  right: 0%;
  bottom: 0%;
  width: 30%;
}
.bakkoura-logo {
  width: 100%;
}
.dynasty-bg {
  position: absolute;
  top: auto;
  left: 30.5%;
  width: 42%;
}
.dynasty-center-image {
  position: absolute;
  top: auto;
  left: 35.5%;
  width: 31.5%;
}
.black-image-light-dynasty {
  position: absolute;
  left: 0%;
  bottom: 0%;
  width: 30%;
}
.blue-image-light-dynasty {
  position: absolute;
  left: 12%;
  top: auto;
  width: 80%;
  margin-top: 10rem;
}
.black-light-dynasty {
  position: absolute;
  left: 18%;
  top: auto;
  width: 70%;
  margin-top: -5rem;
}
.a-dynasty-letter {
  position: absolute;
  left: 3%;
  bottom: 46%;
  width: 14%;
}
.b-dynasty-letter {
  position: absolute;
  right: 3%;
  top: -3%;
  width: 14%;
}
/*footer section */
.footer-top {
  padding: 4rem 0rem 7rem 0rem;
}
.footer-bottom {
  background-image: url(../images/bg-footer.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.footer-text {
  font-size: 1rem;
  color: #333333;
  font-weight: 300;
}
.designed-text {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 300;
}

.footer-light {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 0;
}
.blue {
  color: #548fc1;
}

.blue-order-image-mob {
  display: none;
}
/* modal */

.order-font {
  background-image: linear-gradient(to right, #030007 0%, #66666600 100%);
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
  font-family: "Cormorant SC", serif;
  font-size: 10rem;
  word-break: normal;
  line-height: 9rem;
}
.order-icon {
  width: 24%;
}
.blue-order-image {
  position: absolute;
  left: 0%;
  top: 0%;
  height: 100%;
}
.black-order-image {
  position: absolute;
  left: 0%;
  top: 0%;
}
.love-order-icon {
  position: absolute;
  right: 5px;
  top: auto;
  bottom: auto;
}
.text-order {
  font-size: 1.25rem;
  color: #282828;
}
/*jfkdnvkmd----------------------------------------------------------------------*/
.contact-form {
  padding-top: 5.25rem;
  padding-bottom: 11.563rem;
}
.text-check {
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: #d1d1d1;
}
.text-check > a {
  color: #dfc188;
}
.check-input {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background-color: transparent;
  background-image: url("../images/check-before.svg");
  background-size: cover;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  cursor: pointer;
}

.check-input:checked {
  background-color: transparent;
  background-image: url("../images/check-after.svg");
  background-size: cover;
  border: none;
  box-shadow: none;
}

.check-input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.line {
  height: 1px;
  width: 100%;
  background-color: #7c92a3;
}
.cookies-text {
  font-size: 1rem;
  color: #a7b5bf;
}
.image-marry {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.a-letter-footer {
  top: 3rem;
}
.feed-2 {
  position: relative;
  top: -2.5rem;
}
.cookies-row {
  column-gap: 1rem;
  row-gap: 2rem;
}
.cookies {
  display: flex;
}
.sucess-message {
  color: rgb(5, 70, 5);
  font-size: 1rem;
  text-transform: capitalize;
  display: none;
}
.modal-dialog {
  width: 90%;
  max-width: 75rem !important;
  margin-right: auto;
  margin-left: auto;
}
.modal-dialog-2 {
  width: 80%;
  max-width: 62rem !important;
  margin-right: auto;
  margin-left: auto;
}
.modal-header {
  border: none;
}
.text-area-height {
  height: 7rem;
}
.modal-content {
  border-radius: 0px;
  padding-left: 10% !important;
  padding-right: 10% !important;
}
.modal-footer {
  border: none;
}

.button-close-modal {
  right: 3%;
  top: 3%;
  cursor: pointer;
}
.modal-image {
  position: absolute;
  top: 0;
  left: -0.12rem;
  width: 28%;
  z-index: 0;
}
.form-check-4 {
  width: 75%;
}
.text-sucess {
  width: 75%;
}
.sucess-content {
  padding-top: 5rem !important;
  padding-bottom: 2rem;
}
.form-control3.is-valid,
.was-validated .form-control3:valid {
  background: linear-gradient(to bottom, #41637d 0%, #9fc5d1 100%) !important;
}

.btn-close {
  --bs-btn-close-bg: none !important;
  width: 20px;
  height: 24px;
}
.btn-close > img {
  --bs-btn-close-bg: none !important;
  width: 100%;
  height: 100%;
}
.logo-bakkoura {
  position: absolute;
  top: 1%;
  right: 0%;
  left: 0%;
}
.bless-logo-bakkoura {
  position: absolute;
  left: 3%;
  top: 3.5%;
}
.w-md-auto {
  width: auto !important;
}
/* Style the pagination container */
.splide__pagination {
  display: flex;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

/* Style each pagination bullet */
.splide__pagination__page {
  background-color: #cccccc;
  border: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  cursor: pointer;
}
.order-md-6 {
  order: 6;
}
.order-md-7 {
  order: 7;
}
.order-md-8 {
  order: 8;
}
.text-para {
  word-break: normal;
}

/* Style the active pagination bullet */
.splide__pagination__page.is-active {
  background-color: #da0000;
}
.para-collec {
  color: #5a5a5a;
  font-weight: 300;
  font-size: 1.125rem;
  width: 75%;
}
.cookies {
  display: flex;
}
.sucess-font {
  font-size: 6.25rem;
  line-height: 90%;
  text-transform: capitalize !important;
}
.name-watch {
  margin-right: 1.8rem;
}
.sucess-icon {
  width: 22%;
}
.modal-content-splide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.splide__list-diamonds {
  width: 100%;
  height: 72vh;
}
.splide__slide-diamonds > img {
  width: 100%;
  height: 100%;
  object-position: center center;
}
.btn-diamond {
  min-width: 10.5rem;
}
/*Start design in mobile*/
@media (max-width: 1750px) {
  .pin-girl-emoji {
    width: 51%;
  }
  .womans-image {
    top: 2%;
    width: 38%;
  }
  .woman-hijab {
    left: 1.5%;
    width: 15.5%;
  }

  /*hero image*/
  .hero-watch {
    top: 28%;
  }

  .emoji-smile-image {
    top: 17%;
  }
}
@media (max-width: 1400px) {
  .hero-text {
    font-size: 15rem;
  }
  .pin-girl-emoji {
    width: 51%;
  }
  .womans-image {
    top: 2%;
    width: 38%;
  }
  .woman-hijab {
    left: 1.5%;
    width: 15.5%;
  }
  /*hero image*/
  .hero-watch {
    top: 32%;
  }
  .emoji-like-image {
    top: 50%;
  }
  .emoji-smile-image {
    top: 20%;
  }
  .spaces-icon {
    width: 4.8rem;
  }
  .emoji-strap-view {
    width: 49%;
    margin-right: 7%;
  }
  .splide-section-view {
    padding-left: 0%;
  }
}
@media (max-width: 1200px) {
  .hero-text {
    font-size: 13rem;
  }
  .slide-text {
    font-size: 9rem;
    word-break: break-all;
  }

  /**/
  .hero-watch {
    position: absolute;
    top: 35%;
    width: 40%;
    left: 33%;
  }
  .title-collection {
    font-size: 4.25rem;
  }
  .title-collection-large {
    font-size: 5rem;
  }
  .desc-collection {
    font-size: 1.2rem;
  }
  .spaces-second {
    right: 0%;
    padding-right: 15%;
  }
  .spaces-third {
    right: 0%;
    padding-right: 30%;
  }
  .spaces-r-second {
    left: 0%;
    padding-left: 15%;
  }
  .spaces-r-third {
    left: 0%;
    padding-left: 21%;
  }
  .spaces-r-fourth {
    left: 0%;
    padding-left: 13%;
  }
  .spaces-r-final {
    left: 0%;
    padding-left: 0%;
  }
  .strap-view {
    margin-top: 4rem;
    margin-bottom: 7rem;
  }
  .woman-image-right {
    top: 6%;
  }
  .unique-title {
    font-size: 6.125rem;
  }
  .padding-form {
    padding: 0px 2%;
  }
  .form-title {
    font-size: 8rem;
  }
}
@media (max-width: 992px) {
  .hero-text {
    font-size: 10rem;
  }
  .b-letter {
    top: 26%;
  }
  .h-23 {
    height: 17rem;
  }
  .h-18 {
    height: 12rem;
  }
  .technical-images-view {
    width: 34%;
  }
  .light-image-tech {
    width: 100%;
    top: 15%;
  }
  .woman-image-right {
    top: 11%;
  }
  .a-slide-letter {
    width: 20%;
    padding-right: 2%;
    position: absolute;
    right: 0;
    top: -22%;
  }
  .unique-title {
    font-size: 4.3rem;
  }
  .dynasty-desc {
    position: static;
    right: 11%;
    bottom: 5%;
    width: 100%;
  }
  .title-strap {
    font-size: 1.375rem;
  }
}
@media (max-width: 767px) {
  .container-view-hero {
    min-height: 100vh;
  }
  .order-button {
    position: relative;
    top: 0rem;
    right: 0%;
  }
  .website-title {
    position: relative;
    top: 0rem;
    left: 0%;
  }
  .all-swiss {
    display: none;
  }
  .emoji-text {
    margin-top: 6rem !important;
  }
  .b-letter {
    top: 14%;
    width: 21%;
    right: 0;
  }
  .a-letter {
    bottom: 7%;
    left: 0%;
    width: 18.5%;
  }
  .order-button {
    margin-bottom: 1rem;
  }
  .hero-text {
    font-size: 7.5rem;
  }
  .image-blue-light {
    position: absolute;
    top: -6%;
    right: -65%;
    width: 160%;
    max-width: 160%;
  }
  .video-view-section {
    height: 37rem;
  }
  .h-23 {
    height: 14rem;
  }
  .h-18 {
    height: 9rem;
  }
  .man-watch-images {
    top: auto;
    bottom: 0%;
    width: 100%;
  }
  .black-light-image {
    top: auto;
    bottom: 3%;
  }
  .blue-light-image {
    top: auto;
    left: 0%;
    bottom: 10%;
    width: 100%;
  }
  .o-letter {
    left: auto;
    right: 5%;
    bottom: 80vh;
    width: 22%;
  }
  .technical-images-view {
    width: 100%;
  }
  .spaces-second {
    padding-right: 0%;
  }
  .spaces-third {
    padding-right: 0%;
  }
  .spaces-r-second {
    padding-left: 0%;
  }
  .spaces-r-third {
    padding-left: 0%;
  }
  .spaces-r-fourth {
    padding-left: 0%;
  }
  .spaces-r-final {
    padding-left: 0%;
  }
  .w-md-auto {
    width: 100% !important;
  }
  .tech-bg-woman {
    top: 4%;
    width: 100%;
  }
  .woman-imagess {
    right: 1%;
    bottom: auto;
    top: 28%;
    width: 40%;
  }
  .u-letter {
    right: 1%;
    bottom: auto;
    top: 36%;
    width: 25%;
  }
  .black-emoji-technical {
    left: auto;
    width: auto;
  }
  .blue-emoji-technical {
    left: auto;
    width: auto;
  }
  .woman-image-right {
    top: -7%;
    width: 100%;
  }
  .emoji-strap-view {
    width: 70%;
    margin-right: 0%;
  }
  .a-slide-letter {
    width: 27%;
    position: absolute;
    right: 0;
    top: -13%;
  }
  .face-unique-image {
    position: relative;
    margin-right: 0;
    margin-left: auto;
    right: 0%;
    left: auto;
  }
  .woman-image-unique {
    position: absolute;
    right: 0%;
    bottom: 15%;
    width: 40%;
  }
  .form-title {
    font-size: 6rem;
  }
  .para-collec {
    width: 100%;
  }
  .woman-form-image {
    left: auto;
    right: 0%;
    top: 0%;
    width: 100%;
  }
  .woman-form-left {
    display: none;
  }
  .dynasty-view {
    top: 0rem;
  }
  .dynasty-view-center {
    top: 0rem;
  }
  .brand-item {
    width: 50%;
    margin: 0 auto;
  }
  .dynasty-center-image {
    position: relative;
    top: 0%;
    left: 8%;
    width: 90%;
  }
  .dynasty-space {
    margin-bottom: 4rem;
  }
  .dynasty-image-right {
    width: 100%;
  }
  .black-light-dynasty {
    left: -40%;
    top: 0%;
    width: 100%;
    margin-top: 0rem;
  }
  .blue-image-light-dynasty {
    position: absolute;
    left: 5%;
    top: 3%;
    width: 130%;
    max-width: 150%;
    margin-top: 0rem;
  }
  .dynasty-bg {
    top: 1%;
    left: -10%;
    width: 120%;
    max-width: 150%;
  }
  .order-font {
    font-size: 7rem;
    line-height: 90%;
  }

  .form-check > label {
    width: 109.5%;
  }
  .modal-content {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
  .modal-content-splide {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .lb-outerContainer {
    width: 95vw !important;
    height: 80vh !important;
  }
  .lb-image {
    width: 100% !important;
    height: 80vh !important;
  }
  .button-close-modal {
    right: 5%;
    top: 2%;
  }
  .blue-order-image {
    display: none;
  }
  .blue-order-image-mob {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .blue {
    color: #a9a9a9;
  }
  .button-cented {
    align-self: center;
  }

  .order-6 {
    order: 6;
  }
  .order-7 {
    order: 7;
  }
  .order-8 {
    order: 8;
  }
  .text-order {
    font-size: 1.125rem;
  }
  .form-label-row {
    font-size: 0.875rem;
  }
  .form-control-row {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
  .check-input-2 {
    width: 2.375rem;
    height: 2.375rem;
  }
  .form-check > label {
    left: 3rem;
    font-size: 0.875rem;
  }

  .sucess-icon {
    position: absolute;
    top: -2.3rem;
    left: 1.5rem;
  }
  .title-collection-small {
    font-size: 1.875rem;
    line-height: 2.125rem;
  }
  .unique-desc {
    font-size: 1.375rem;
  }
  .padding-hero {
    padding: 0px 0%;
    min-height: 70vh;
  }
}
@media (max-width: 576px) {
  .hero-watch {
    top: 30%;
    width: 80%;
    left: 13%;
  }
  .padding-hero {
    min-height: 80vh;
  }
  .hero-text {
    font-size: 5rem;
  }
  .pin-girl-emoji {
    display: none;
  }
  .womans-image {
    width: 61%;
  }
  .woman-hijab {
    top: 34%;
    width: 22.5%;
  }
  .right-hero-image {
    width: 55%;
  }
  .emoji-text {
    left: 8%;
  }
  .emoji-smile-image {
    top: 26%;
    width: 28%;
    right: 10%;
  }
  .emoji-text {
    margin-top: 62% !important;
  }

  .emoji-super-like-image {
    width: 26%;
    left: 0%;
  }
  .emoji-think-image {
    width: 20%;
    left: 9%;
    top: 28%;
  }
  .emoji-bad-image {
    width: 15%;
  }
  .video-view-section {
    height: 28rem;
    background-image: url(../images/video.svg);
    justify-content: center;
    display: flex;
  }
  .video-view-icon {
    right: auto;
  }

  .flex-wrap-slide {
    flex-wrap: wrap;
  }
  .gallery-column {
    width: 47%;
  }
  .final-slide {
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
  }
  .k-letter {
    right: 0%;
    bottom: auto;
    top: -6%;
    width: 20%;
  }
  .k-two-letter {
    right: 20%;
    bottom: auto;
    top: -8.5%;
    width: 20%;
  }
  .title-collection {
    font-size: 3.75rem;
  }
  .title-collection-large {
    font-size: 4.375rem;
  }
  .tech-bg-woman {
    top: 7%;
  }
  .slide-text {
    font-size: 5rem;
  }
  .form-title {
    font-size: 4.2rem;
  }
  .order-font {
    font-size: 5rem;
  }
  .btn-close {
    width: 15px;
    height: 13px;
  }
  .button-close-modal {
    right: 5%;
    top: 1%;
  }
  .emoji-like-image {
    top: 47%;
    width: 41%;
  }
  .smile-image {
    width: 16.5%;
  }
  .o-letter {
    bottom: 53vh;
    width: 25%;
  }
  .emoji-strap-view {
    width: 85%;
  }
}

@media (max-width: 450px) {
  .hero-watch {
    top: 30%;
    width: 92%;
    left: 5%;
  }
}