@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-BookItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'OverusedGrotesk';
    src: url('../fonts/OverusedGrotesk-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}


@import url("/fonts.css");

body {
  font-family: 'OverusedGrotesk';
  margin: 0;
  padding: 0;
}

/* Base styles */
h1 {
  font-family: "OverusedGrotesk";
}
h2 {
  font-family: "OverusedGrotesk";
}
h3 {
  font-family: "OverusedGrotesk";
}
h4 {
  font-family: "OverusedGrotesk";
}
h5 {
  font-family: "OverusedGrotesk";
}
span,
a {
  font-size: 20px;
  font-family: "OverusedGrotesk";
}

@media only screen and (max-width: 1600px) {
  span,
  a {
    font-size: 18px;
  }
}

@media only screen and (max-width: 1400px) {
  span,
a {
  font-size: 16px;
}
  
}

/* Responsive styles */

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
  h1 {
    font-size: 50px;
  }
  h2 {
    font-size: 38px;
  }
  h3 {
    font-size: 16px;
  }
  h4 {
    font-size: 14px;
  }
}

/* Small devices (portrait tablets and large phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  h1 {
    font-size: 70px;
  }
  h2 {
    font-size: 52px;
  }
  h3 {
    font-size: 22px;
  }
  h4 {
    font-size: 18px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  h1 {
    font-size: 60px;
  }
  h2 {
    font-size: 40px;
  }
  h3 {
    font-size: 18px;
  }
  h4 {
    font-size: 16px;
  }
  h5 {
    font-size: 14px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  h1 {
    font-size: 70px;
  }
  h2 {
    font-size: 58px;
  }
  h3 {
    font-size: 24px;
  }
  h4 {
    font-size: 20px;
  }
  h5 {
    font-size: 16px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  h1 {
    font-size: 80px;
  }
  h2 {
    font-size: 65px;
  }
  h3 {
    font-size: 26px;
  }
  h4 {
    font-size: 22px;
  }
  h5 {
    font-size: 18px;
  }
}

@media (min-width: 1400px) {
  h1 {
    font-size: 100px;
  }
  h2 {
    font-size: 75px;
  }
  h3 {
    font-size: 32px;
  }
  h4 {
    font-size: 24px;
  }
  h5 {
    font-size: 18px;
  }
}

@media (min-width: 1600px) {
  h1 {
    font-size: 120px;
  }
  h2 {
    font-size: 85px;
  }
  h3 {
    font-size: 40px;
  }
  h4 {
    font-size: 32px;
  }
  h5 {
    font-size: 20px;
  }
}



.slide-in-left {
  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

 @-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right {
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

 @-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-blurred-bottom {
	-webkit-animation: slide-in-blurred-bottom 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-bottom 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}


 @-webkit-keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

header {
  position: fixed;
  top: 0;
  left: 0;
  /* right: 0;  */
  width: 100%;
  z-index: 99;
  transition: all 0.5s;
}
body {
  padding-top: 15.5vh;
  overflow-x: hidden;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #000;
  position: relative;
}
.no-scroll {
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    padding-top: 13.5vh; 
  }
}
@media only screen and (max-width: 768px) {
  body {
    padding-top: 10vh; 
  }
}
.small-header2 {
  margin-top: -4.5vh;
}
@media only screen and (max-width: 768px) {
  .small-header2 {
    margin-top: 0;
  }
} 

.top-header {
  background-color: #000;
  height: 4.5vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
}

.top-header__info {
  display: flex;
  color: #fff;
  align-items: center;
}

.top-header__info-single {
  display: flex;
  align-items: center;
  margin-right: 5vh;
}

.top-header__info-single a {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}
.top-header__info-single a span {
  font-size: 14px;
}

.top-header__info-single img {
  margin-right: 1.5vh;
  height: 2vh;
}

.top-header__social-language {
  display: flex;
  align-items: center;
}

.top-header__social-language-single {
  display: flex;
  align-items: center;
}
.top-header__social-language-single a {
  display: flex;
  align-items: center; 
}

.language {
  border-left: 1px solid #fff;
  margin-left: 10px;
  padding-left: 5px;
}

.language details {
  background: #000;
  color: #fff;
  font-size: 15px;
  position: relative;
  padding: 0 10px ;
  cursor: pointer;
}

.language details summary {
  color: #fff;
  font-size: 15px;
  list-style: none;
  background-image: url('../images/chevron-down-w.svg');
  background-repeat: no-repeat;
  background-position: 100%;
  width: 100%;
  padding-right: 10px;
  background-size: 10px;
}

.language details ul{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
list-style: none;
padding: 10px;
width: 60px;
}

.language details ul li{
  display: flex;
  align-items: center;
  justify-content: center;
}

.language details ul li a{
  color: #fff;
  text-decoration: none;
  text-align: center;
}

.top-header__social-language-single img {
  margin: 0 12px;
  height: 2vh;
  width: auto;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 0 5%;
  height: 11vh;
  transition: all 0.3s ease; /* Smooth transition */
  z-index: 1000; /* Ensure it stays on top */
}
.sticky {
  position: fixed;
  transition: all 0.3s ease; /* Smooth transition */
  top: 0;
  width: 100%;
}

.main-header.sticky {
  justify-content: center;
  gap: 32vw;
  padding: 0;
}
.logo img {
  height: 6vh;
  width: auto;
}

.navbar {
  background-color: #fff;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1.5vw;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
}

.nav-links li {
  margin-left: 2vh;
}

.nav-links a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  margin: 0 10px;
  font-weight: 500;
  font-size: 2vh;
  /* font-size: 18px; */
  padding-bottom: 4vh;
}

.nav-links a:hover,
.nav-links a.active-nav {
  color: #ce8429;
  border-bottom: 3px solid #ce8429;
}


.menu {
  display: flex;
  align-items: center;
}

.menu button {
  background-color: #317461;
  color: #fff;
  border-radius: 40px;
  font-size: 2vh;
  font-weight: 400;
  cursor: pointer;
  border: none;
  padding: 1.4vh 3.4vh;
  transition: 0.4s;
}

.menu button:hover {
  background-color: #2b6655;
  transition: 0.4s;
}

.hero-section {
  /* background: url("../images/hero-bg.png");
  background-size: cover;
  background-position: center; */
  height: 80vh;
}

.hero-section img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-section:hover {
  cursor: url("../images/getintouch.png"), auto;
}

.second-section {
  display: flex;
  align-items: center;
  padding: 0 5%;
  justify-content: center;
  background-color: #f5f5f5;
}

.second-section-left {
  width: 35%;
}

.second-section-right {
  width: 65%;
}

.second-section h3 {
  width: 80%;
  margin-bottom: -5vh;
  margin-right: -8vw;
}

.second-section h1 {
  margin-bottom: 0;
  font-weight: 600;
}

.second-section h5 {
  font-weight: 400;
}

.numbers-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%;
}

.numbers-section__single h5 {
  font-family: "OverusedGrotesk";
  font-size: 15px;
  font-weight: 400;
  /* margin-bottom: -5vh; */
}

.numbers-section__single {
  margin: 5vh 5vw;
}

.what-we-do {
  display: flex;
  gap: 10vw;
  align-items: center;
  padding: 0 5%;
}

#wwd-heading {
  text-align: center;
}
.what-we-do__list a {
  text-decoration: none;
}
.what-we-do__list-single {
  display: flex;
  align-items: center;
}
.what-we-do__list-single h3 {
  font-weight: 600;
  color: #000;
}

.what-we-do__image img {
  height: 75vh;
  width: auto;
}

.what-we-do__list img {
  height: 4.7vh;
  margin-right: 15px;
  width: auto;
  transform: translateY(3px);
}
a:has(.wild-beauty), a:has(.contact-us) {
  text-decoration: none; 
}
.wild-beauty {
  margin: 10vh 0;
  padding: 1vh 5%;
  background-color: #f5f5f5;
}
.wild-beauty *, .contact-us * {color: #000;}
.wild-beauty:hover {
  cursor: url("../images/answer.png"), auto;
}

.wild-beauty__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.wild-beauty__inner img {
  height: 75vh;
}
.wild-beauty__inner-text {
  width: 50%;
}

.wild-beauty__inner-text h2 {
  font-weight: 400;
  font-size: 55px;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .wild-beauty__inner-text h2 {
    font-size: 50px;
  }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .wild-beauty__inner-text h2 {
    font-size: 45px;
  }
  
}

.wild-beauty__inner-image {
  width: 50%;
}
.wild-beauty__inner-image img {
  width:100%;
  height: auto;
}

#wild-beauty-heading {
  text-align: center;
  margin-top: 15vh;
}

.wild-beauty-paragraph h4 {
  color: #111;
  text-align: center;
  width: 98%;
}
.our-partners-section {
  margin-top: -5vh;
}
.our-partners {
  padding: 0 5%;
  justify-content: space-between;
  align-items: center;
}
.our-partners h2 {
  text-align: center;
  margin-bottom: 0;
  color: #99bab1;
}
.our-partners h3 {
  text-align: center;
  margin-top: 20px;
}
.our-partners h5 {
  text-align: center;
  font-weight: 400;
}

.partner-logos {
  margin-top: 5vh;
  
}


.logos-container {
  overflow: hidden;}

.logos {
  display: flex;
  margin: 5vh 0;
  flex-shrink: 0;
}

.logos-slide {
  display: flex;
  margin: 2vh 0;
}
.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos img {
  /* height: 4.5vh; */
  /* margin: 0 3vw; */
  /* width: auto; */
  /* width: 100%; */
  /* height: 100%; */
  width: 200px;
  /* width: auto; */
  max-width: 200px;
  height: 150px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  
}
@media screen and (max-width: 1600px) {
  .logos img {
    height: 120px;
      width: 200px;
  }
}
@media screen and (max-width: 1400px) {
  .logos img {
    height: 100px;
  }
}


.logos-slide {
  animation: scroll 100s linear infinite;
}
.logos-slide a {
  width: fit-content;
  height: fit-content;
  padding: 0 30px;
}

.logos.reverse .logos-slide {
  animation-direction: reverse;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@media screen and (max-width: 576px) {
  .logos img {
    height: 50px;
  }
  .logos-slide a {
    padding: 0 20px;
  }
  .partner-logos {
    margin-top: 0;
  }
}
.contact-us {
  display: flex;
  margin-top: 10vh;
}

.contact-us:hover {
  cursor: url("../images/getintouch.png"), auto;
}

.contact-us-left {
  /* background: url("../images/contact-us-img.png");
  background-position: center;
  background-size: cover; */
  height: 100vh;
  text-align: right;
  color: #fff;
  width: 50%;
}

.contact-us-left img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contact-us-left h2 {
  margin-top: 20vh;
  margin-right: 3vh;
}

.contact-us-right h2 {
  margin-top: 20vh;
  margin-left: 5vw;
  margin-bottom: 0;
}

.contact-us-right h4 {
  margin-left: 5vw;
  font-weight: 600;
}

.contact-us-right__heading {
  display: flex;
  align-items: center;
}

#phone, #mail,
#mobile-phone,
#working-hours {
  height: 30px;
  width: auto;
  margin-right: 10px;
}



.contact-us-right__heading img {
  height: 14vh;
  margin-left: 7vw;
  margin-top: 15vh;
}

/*footer*/
footer {
  background-color: #111111;
  color: #fff;
  padding: 3% 5% 0 5%;
}

footer h5,
footer h4 {
  font-weight: 400;
}

footer h4 {
  font-size: 20px;
}

footer h5 {
  margin: 1vh 0;
  font-size: 16px;
}

.footer-rightside {
  padding-top: 10vh;
}

.footer-rightside-inner {
  display: flex;
  gap: 13vw;
}
footer a {
  color: #fff;
  text-decoration: none;
}

.footer-inner {
  display: flex;
}

.footer-rightside-inner-single {
  display: flex;
  flex-direction: column;
}

.footer-leftside {
  width: 35%;
}
.bottom-footer {
  padding: 5vh 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottom-footer-left a {
  font-size: 16px;
}

.bottom-footer-left a:hover {
  text-decoration: underline;
  
}

.bottom-footer-right {
  display: flex;
}

.footer-rightside-inner-single a {
  font-size: 18px;
  font-weight: 500;
  font-family: "OverusedGrotesk";
  margin: 1vh 0;
  width: fit-content;
}

.footer-rightside-inner-single a:hover {
  color: #da9239;
}

.newsletter-container p {
  font-size: 18px;
  font-family: "OverusedGrotesk";
  font-weight: 400;
}

.newsletter-container {
  color: white;
  margin-top: 8vh;
}
.newsletter-container input[type="email"] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid white;
  color: white;
  padding: 10px;
  width: 100%;
  max-width: 300px;
  padding-right: 30px;
  outline: none;
  /* background-image: url('../images/arrow-right.png');
  background-repeat: no-repeat;
  background-position: 100%;
  padding-right: 30px; */
}
.newsletter-container input[type="email"]::placeholder {
  color: #ffffffb5;
  font-size: 15px;
}
.newsletter-container input:-internal-autofill-selected {
  background-color: transparent !important;
  color:  #fff !important;
  /* background-image: url('../images/arrow-right.png') !important; */
  
}
.newsletter-container input:-webkit-autofill,
.newsletter-container input:-webkit-autofill:hover, 
.newsletter-container input:-webkit-autofill:focus {
   /* border-bottom: 1px solid rgba(112, 112, 112, 0.5); */
    -webkit-text-fill-color: white;
    /* -webkit-box-shadow: 0 0 0px 1000px transparent inset; */
    transition: background-color 5000s ease-in-out 0s;
}
.newsletter-container .newsletter-form {
  position: relative;
  width: 100%;
  max-width: 340px;
}
.newsletter-container .newsletter-form .submit {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  outline: none;
  width: 22px;
  height: 10px;
  background-image: url('../images/arrow-right.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
  cursor: pointer;
}
/* .newsletter-container button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin-left: -40px;
} */

#legal-precision {
  margin-top: -5vh;
  margin-bottom: 5vh;
}



.bottom-footer-right a:first-child{
  border-right: 1px solid #fff;
  padding-right: 20px;
  margin-right: 20px;
}

.footer-icons {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 1.5vh;
}

.footer-icons img {
  height: 3.5vh;
  width: auto;
}

/*Hover animacija na meniju*/
.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation::after {
  content: "";
  position: absolute;
  width: 30px;
  max-width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #da9239;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.mobile-menu-btn {
  display: none;
}
.mobile-menu {
  display: none;
}

/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .top-header {
    padding: 0 3%;
  }

  .menu {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
  }
  .mobile-menu-btn {
    display: block;
    font-size: 32px;
    color: #000;
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease-in-out;
    z-index: 9999;
  }

  .rotate {
    transform: rotate(90deg);
    transition: transform 0.3s ease-in-out;
  }

  @keyframes slideOutToRight {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0%);
    }
  }

  span, a {
    font-size: 1.6vh;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    /* left: -100%; */
    left: 0;
    width: 100%;
    max-width: 500px;
    height: 100%;
    z-index: 9999;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: all 0.3s ease;
  }
  .mobile-menu.show {
    /* position: fixed; */
    /* display: block; */
    /* background-color: #fff; */
    /* height: 100%; */
    /* width: 75%; */
    /* left: 0; */
    /* top: 0; */
    /* padding: 30px 0 0 12px; */
    padding: 30px 20px;
    border-bottom: 3px solid #000;
    border-right: 1px solid #ce8429;
    transform: translateX(0);
    overflow-y: scroll;
    /* z-index: 9999; */
    /* animation: slideOutToRight 0.5s ease-in-out; Apply the animation */
  }

  .mobile-menu__logo img {
    height: auto;
    border-bottom: 1px solid #00000031;
    padding-bottom: 10px;
    z-index: 999;
  }

  .mobile-menu__contact h4 {
    font-size: 16px;
    font-weight: normal;
  }

  .mobile-menu.show ul {
    /* padding-right: 40px; */
    /* margin-left: -15%; */
    margin-top: 40%;
    padding-left: 0;
  }

  .mobile-menu__social-icons {
    display: flex;
  }

  .mobile-menu__social-icons img {
    height: 22px;
    margin: 0 15px 0 0;
    filter: brightness(0%);
  }

  .mobile-menu__language {
    margin-top: 2vh;
    margin-bottom: 50px;
  }

  .mobile-menu__language a {
    font-size: 16px !important;
  
  }

  .info-mobile-menu {
    /* position: absolute; */
    /* bottom: 7%; */
    padding-top: 30px;
    margin-top: auto;
  }

  .mobile-menu.show a {
    text-decoration: none;
    color: #000;
    font-size: 25px;
  }

  .mobile-menu.show li {
    margin-top: 15px;
    border-bottom: 1px solid #00000031;
    list-style-type: none;
  }

  .top-header__info-single {
    margin-right: 3vh;
  }

  .top-header__info-single img {
    height: 1.5vh;
  }

  .top-header__social-language-single img {
    height: 1.5vh;
  }

  .language select {
    font-size: 13px;
  }

  .main-header {
    padding: 0 ;
    height: 9vh;
    width: 100%;
  }
  .footer-leftside {
    margin-right: 10px;
  }
  .newsletter-container input[type="email"] {
    width: 150px;
  }

  .logo {
    padding-left: 2.5%;
  }
  .logo img {
    height: 5vh;
  }

  .nav-links li {
    margin-left: 1.5vh;
  }


  .main-header.sticky {
    width: 100%;
    justify-content: space-between;
    gap: 0;
    padding: 0;
  }

  .nav-links a {
    font-size: 14px;
    padding-bottom: 3vh;
  }

  .menu button {
    font-size: 1.6vh;
    padding: 1.2vh 2.8vh;
  }

  .hero-section {
    height: 60vh;
  }

  .second-section-left {
    width: 45%;
  }

  .second-section-right {
    width: 55%;
  }

  .second-section h3 {
    margin-bottom: -3vh;
  }


  .second-section h5 {
    font-size: 1.6vh;
  }

  .numbers-section__single h5 {
    font-size: 13px;
  }

  .what-we-do {
    gap: 5vw;
    flex-direction: column;
    align-items: start;
  }

  .wild-beauty {
    padding: 0 5% 5% 5%;
  }

  #wild-beauty-heading {
    padding-top: 5vh;
    margin-top: 0;
  }

  .wild-beauty__inner {
    flex-direction: column;
    align-items: start;
  }
  .what-we-do__image img {
    height: 60vh;
  }

  .wild-beauty__inner img {
    height: 60vh;
  }

  .wild-beauty__inner-text h2 {
    font-size: 3.4vh;
  }

  /* .logos img {
    height: 3.5vh;
    margin: 0 3vw;
    width: auto;
  } */
  
  .contact-us-left {
    height: 50vh;
  }

  .contact-us-left h2 {
    margin-top: 0 !important;
    margin-right: 2vh;
  }

  .contact-us-right h2 {
    margin-top:5vh;
    margin-left: 4vw;
  }

  .contact-us-right h4 {
    margin-left: 4vw;
  }

  .contact-us-right__heading img {
    height: 10vh;
    margin-left: 5vw;
    margin-top: 12vh;
  }

  footer h4 {
    font-size: 18px;
  }

  footer h5 {
    font-size: 14px;
  }

  .footer-rightside-inner {
    gap: 10vw;
  }

  .footer-rightside-inner-single a {
    font-size: 16px;
  }

  .newsletter-container p {
    font-size: 16px;
  }

  .newsletter-container input[type="email"]::placeholder {
    font-size: 13px;
  }

  .footer-icons img {
    height: 3vh;
  }
}



/* Responsive styles for mobile devices */
@media only screen and (max-width: 768px) {
  #phone, #mail, #mobile-phone, #working-hours {
    height: 15px;
  }

  .menu {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
    font-size: 32px;
    color: #000;
    position: absolute;
    right: 20px;
    transition: transform 0.3s ease-in-out;
    z-index: 9999;
  }

  .rotate {
    transform: rotate(90deg);
    transition: transform 0.3s ease-in-out;
  }

  @keyframes slideOutToRight {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  .mobile-menu {
    position: fixed;
    top: 0;
    /* left: -100%; */
    left: 0;
    width: 100%;
    max-width: calc(100% - 70px);
    height: 100%;
    z-index: 9999;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: all 0.3s ease;
  }
  .mobile-menu.show {
    /* position: fixed; */
    /* display: block; */
    /* background-color: #fff; */
    /* height: 100%; */
    /* width: 75%; */
    /* left: 0; */
    /* top: 0; */
    padding: 30px 0 0 12px;
    border-bottom: 3px solid #000;
    border-right: 1px solid #ce8429;
    transform: translateX(0);
    overflow-y: scroll;
    /* z-index: 9999; */
    /* animation: slideOutToRight 0.5s ease-in-out; Apply the animation */
  }



  .mobile-menu__logo img {
    height: auto;
    border-bottom: 1px solid #00000031;
    padding-bottom: 10px;
    z-index: 999;
  }

  .mobile-menu__contact h4 {
    font-size: 16px;
    font-weight: normal;
  }

  .mobile-menu.show ul {
    padding-right: 20px;
    /* margin-left: -15%; */
    /* padding-left: 0; */
    margin-top: 40%;
    padding-left: 0;
  }

  .mobile-menu__social-icons {
    display: flex;
  }

  .mobile-menu__social-icons img {
    height: 22px;
    width: auto;
    margin: 0 15px 0 0;
    filter: brightness(0%);
  }

  .mobile-menu__language {
    margin-top: 2vh;
    margin-bottom: 50px;
  }

  .mobile-menu__language a {
    font-size: 16px !important;
      border-right: 1px solid #000;
      padding-right: 10px;
  }

    .mobile-menu__language a:last-child{
      border-right: none;
      padding-left: 10px;
    }

  .info-mobile-menu {
    /* position: absolute; */
    /* bottom: 7%; */
    padding-top: 30px;
    margin-top: auto;
  }

  .mobile-menu.show a {
    text-decoration: none;
    color: #000;
    font-size: 25px;
  }

  .mobile-menu.show li {
    margin-top: 15px;
    border-bottom: 1px solid #00000031;
    list-style-type: none;
  }

  .top-header {
    display: none;
  }

  .main-header {
    height: 10vh;
  }

  header {
    position: fixed;
    width: 100%;
    z-index: 999;
  }

  .logo img {
    height: 5vh;
  }

  .hero-section {
    height: 40vh;
  }

  .second-section {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 5%;
    justify-content: center;
    background-color: #f5f5f5;
  }

  .second-section-left {
    width: 100%;
    margin: 2vh 0;
  }

  .second-section-right {
    width: 100%;
  }

  .second-section h3 {
    width: 100%;
  }

  .numbers-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
  }

  .numbers-section__single h5 {
    font-family: "OverusedGrotesk";
    font-size: 11px !important;
    text-align: center;
    font-weight: 400;
    margin-bottom: 0px;
  }

  .numbers-section__single h2 {
    font-size: 35px;
  }

  .what-we-do {
    align-items: start;
    flex-direction: column;
    padding: 0;
  }

  .wild-beauty__inner-text h2 {
    font-size: 3.4vh;
    text-align: center;
  }


  .what-we-do__list-single {
    display: flex;
    align-items: center;
  }

  .what-we-do__image img {
    height: 50vh;
    width: 100vw;
  }

  .what-we-do__list {
    padding-left: 5%;
    display: flex;
    flex-direction: column;
  }

  .what-we-do__list img {
    /* height: 4.7vh; */
    width: 20px;
    height: 20px;
    margin-right: 10px;
    transform: translateY(1px);
  }

  .wild-beauty {
    margin: 7vh 0 10vh 0;
    padding: 3vh 5% 5vh 5%;
    background-color: #f5f5f5;
  }

  .wild-beauty__inner {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .wild-beauty__inner img {
    height: 50vh;
    width: 100vw;
    margin-left: -5vw;
  }
  .wild-beauty__inner-text {
    width: 100%;
  }

  .wild-beauty__inner-image {
    width: 100%;
  }
  #wild-beauty-heading {
    text-align: center;
    margin-top: 0;
  }

  .contact-us {
    display: flex;
    flex-direction: column;
    margin-top: 2vh;
  }

  /* .logos img {
    height: 2.5vh;
    margin: 0 3vw;
    width: auto;
  } */
  

  .contact-us-left {
    background: url("../images/contact-us-img.png");
    background-position: center;
    display: flex;
    align-items: end;
    justify-content: center;
    background-size: cover;
    height: 50vh;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #0000006e;
    width: 100%;
  }


  .contact-us-right h2 {
    margin-left: 5vw;
    margin-top: 0;
    text-align: center;
  }

  .contact-us-right h4 {
    margin-left: 5vw;
    font-weight: 500;
  }

  .contact-us-right__heading {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .contact-us-right__heading img {
    height: 8vh;
    margin-left: 0;
    margin-top: 0;
  }

  /*footer*/

  footer h4 {
    font-size: 16px;
  }

  footer h5 {
    margin: 1vh 0;
    font-size: 14px;
  }

  .footer-rightside {
    padding-top: 10vh;
  }

  .footer-rightside-inner {
    display: flex;
    flex-direction: column;
    gap: 13vw;
  }
  footer a {
    color: #fff;
    text-decoration: none;
  }

  .footer-inner {
    display: flex;
    flex-direction: column;
  }

  .footer-rightside-inner-single {
    display: flex;
    flex-direction: column;
  }

  .footer-leftside {
    /* width: 35%; */
    width: 100%;
  }
  .bottom-footer {
    padding: 5vh 0 0 0;
    display: flex;
    align-items: center;
    flex-direction: column;

    justify-content: space-between;
  }

  .bottom-footer-right {
    display: flex;
  }

  .newsletter-container p {
    font-size: 18px;
    font-family: "OverusedGrotesk";
    font-weight: 400;
    width: 100%;
  }

  .newsletter-container {
    color: white;
    margin-top: 8vh;
  }

  .newsletter-form {
    display: flex;
  }

  .newsletter-container button {
    margin-left: -40px;
  }

  .hover-underline-animation {
    position: static;
  }
}


.tracking-in-expand {
  -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1)
    both;
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.about-us-hero {
  padding: 2% 5%;
  background-color: #f5f5f5;
}

.about-us-hero h3 {
  text-align: center;
}

.about-us-hero h5 {
  text-align: center;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-top img {
  width: 45%;
  height: 25vh;
}
.hero-cards {
  padding: 5% 0;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.image-container {
  height: 15vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;

}
.image-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.hero-cards-single {
  /* height: 30vh; */
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 25%;
}

.hero-cards-single h4 {
  margin-bottom: 0;
}

.hero-cards-single span {
  text-align: center;
  max-width: 60%;
  margin-top: 2vh;
}

.video-animacija {
  background-color: #c1c1c1;
  height: 75vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  padding: 5%;
}

.video-animacija h4 {
  color: #fff;
  font-weight: 400;
  text-align: center;
  margin: 0;
  width: 75%;
}

.our-story {
  padding: 5%;
}

.our-story h4 {
  text-align: right;
  font-weight: 500;
}

.our-story span {
  font-size: 24px;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .our-story span {
    font-size: 20;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .our-story span {
    font-size: 18px;
  }
}

.about-reviews {
  background-color: #f5f5f5;
  padding: 2% 5%;
}

.about-reviews h3 {
  font-size: 55px;
}

.about-reviews h5 {
  text-align: center;
}

.review-swiper {
  position: relative;
}

.swiper-container {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  padding: 5% 0;
}
/* .swiper-wrapper {
  display: flex;
} */
.swiper-slide {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  /* min-height: 390px !important; */
  /* height: auto; */
  /* width: 28% !important; */
  /* margin: 0 5px; Add margin to ensure space between slides */
}
.testimonial-img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-top: -70px;
}
.testimonial-stars {
  margin: 10px 0;
}
.testimonial-stars img {
  width: 30px;
  height: 30px;
}
.testimonial-content {
  margin-bottom: 10px;
  font-family: "OverusedGrotesk";
}
.testimonial-author {
  font-weight: bold;
  font-size: 24px;
  font-family: "OverusedGrotesk";
  margin-top: 10px;
  margin-bottom: 0;
}
.testimonial-location {
  color: #000;
  font-family: "OverusedGrotesk";
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .testimonial-author {
    font-size: 22px;
  }
  .testimonial-location {
    font-size: 22px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .testimonial-author {
    font-size: 18px;
  }
  .testimonial-location {
    font-size: 18px;
  }
}
.swiper-button-next,
.swiper-button-prev {
  color: #000;
  width: 40px !important;
  height: 40px !important;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1000;
}
.swiper-button-next {
  background-image: url("../images/rev-arrow-right.png");
  background-repeat: no-repeat !important;
}
.swiper-button-prev {
  background-image: url("../images/rev-arrow.png");
  background-repeat: no-repeat !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

.perfectum-partner {
  padding: 2% 5%;
}

.perfectum-partner h3 {
  font-size: 55px;
  text-align: center;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .perfectum-partner h3 {
    font-size: 50px;
  }

  .about-reviews h3 {
    font-size: 50px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .perfectum-partner h3 {
    font-size: 46px;
  }

  .about-reviews h3 {
    font-size: 46px;
  }
}

.perfectum-partner-inner {
  /* display: flex;
  justify-content: center;
  gap: 15vw; */
  display: grid;
  /* grid-template-columns: 40% 1fr; */
  gap: 40px;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.perfectum-partner-inner span {
  font-size: 32px;
  text-align: center;
}
.perfectum-partner-inner h4 {
  margin: 0;
  text-align: center;
}
.perfectum-partner-inner .two-titles {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.perfectum-partner-inner-right {
  display: flex;
  flex-direction: column;
}

.perfectum-partner-inner-right span {
  font-size: 32px;
  margin-top: 4vh;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .perfectum-partner-inner-right span {
    font-size: 28px;
  }
  .perfectum-partner-inner {
    max-width: 80%;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  /* .perfectum-partner-inner-right span {
    font-size: 24px;
  } */
.perfectum-partner-inner span, .perfectum-partner-inner h4 {
  font-size: 22px; 
}
.perfectum-partner-inner span img {
  width: 20px;
  height: 20px;
}
}

@media only screen and (max-width: 900px) {
  .perfectum-partner-inner span, .perfectum-partner-inner h4 {
    font-size: 18px; 
  }
  .perfectum-partner-inner {
    max-width: 90%;
  }
}
@media only screen and (max-width: 768px) {
  .perfectum-partner-inner span, .perfectum-partner-inner h4 {
    font-size: 16px; 
  }
  .perfectum-partner-inner {
    max-width: 100%;
  }
}

.experience {
  background-color: #f5f5f5;
  padding: 1% 5% 3% 5%;
}

.experience h2 {
  color: #93b5aa;
  text-align: center;
}

/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .about-us-hero {
    padding: 2% 5%;
  }

  .about-us-hero h3 {
    font-size: 25px;
  }

  .about-us-hero h5 {
    font-size: 25px;
  }

  .hero-top {
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 6vh;
    margin-top: 5vh;
  }

  .hero-top img {
    width: 40%;
    margin-right: 3vh;
    height: 12vh;
  }

  .hero-cards {
    padding: 5% 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .image-container {
    height: 12vh;
  }

  .hero-cards-single {
    /* height: 20vh; */
    margin: 3vh 0;
    max-width: unset;
  }

  /* .hero-cards-single img {
    height: 7vh;
    width: auto;
  } */

  .video-animacija {
    height: 60vh;
    padding: 5%;
  }

  .video-animacija h4 {
    font-size: 26px;
  }

  .our-story {
    padding: 5%;
  }

  .our-story h4 {
    font-size: 26px;
  }

  .our-story span {
    font-size: 24px;
  }

  .about-reviews {
    padding: 2% 5%;
  }

  .about-reviews h3 {
    font-size: 28px;
  }

  .swiper-container {
    width: 80%;
    padding: 10% 0;
  }

  /* .swiper-slide {
    width: 80% !important;
  } */

  .testimonial-author,
  .testimonial-location {
    font-size: 24px;
  }

  .perfectum-partner {
    padding: 2% 5%;
  }

  .perfectum-partner h3 {
    font-size: 35px;
  }

  .perfectum-partner-inner {
    gap: 5vw;
  }

  .perfectum-partner-inner-right span {
    font-size: 18px;
    margin: 10px;
  }

  .experience {
    padding: 1% 5% 3% 5%;
  }

  .experience h2 {
    font-size: 42px;
  }
}

@media only screen and (max-width: 768px) {
  .about-us-hero {
    padding: 2% 5%;
    background-color: #f5f5f5;
  }

  .about-us-hero h3 {
    text-align: center;
  }

  .about-us-hero h5 {
    text-align: center;
  }

  .hero-top {
    margin-top: 10vh;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
  }
  .hero-top img {
    width: 35%;
    height: 7vh;
  }

  #about-usimg {
    display: none;
  }
  .hero-cards {
    padding: 5% 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .image-container {
    /* height: 10vh; */
    align-items: center;
    justify-content: center;
    display: flex;
  }

  .hero-cards-single {
    /* height: 10vh; */
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* margin: 4vh 0; */
    margin-bottom: 40px;
    max-width: unset;
  }

  /* .hero-cards-single img {
    height: 5vh;
    width: auto;
  } */

  .hero-cards-single h4 {
    margin-bottom: 0;
  }

  .hero-cards-single span {
    text-align: center;
    max-width: unset;
    width: 100%;
    margin-top: 0vh;
  }

  .video-animacija {
    background-color: #c1c1c1;
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 5%;
  }

  .video-animacija h4 {
    color: #fff;
    font-weight: 400;
    text-align: center;
    margin: 0;
    width: 75%;
  }

  .our-story {
    padding: 5%;
  }

  .our-story h4 {
    text-align: right;
    font-weight: 500;
  }

  .our-story span {
    font-size: 25px;
  }

  .about-reviews {
    background-color: #f5f5f5;
    padding: 2% 5%;
  }

  .about-reviews h3 {
    font-size: 36px;
  }

  .about-reviews h5 {
    text-align: center;
  }

  .review-swiper {
    position: relative;
  }

  .swiper-container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    padding: 20% 0;
  }
  .swiper-wrapper {
    display: flex;
  }
  .swiper-slide {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border-radius: 10px;
    text-align: center;
    min-height: 390px !important;
    height: auto;
    width: 100% !important;
    /* margin: 0 5px; Add margin to ensure space between slides */
  }
  .testimonial-img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-top: -70px;
  }
  .testimonial-stars {
    margin: 10px 0;
  }
  .testimonial-stars img {
    width: 30px;
    height: 30px;
  }
  .testimonial-content {
    margin-bottom: 10px;
    font-family: "OverusedGrotesk";
  }
  .testimonial-author {
    font-weight: bold;
    font-size: 25px;
    font-family: "OverusedGrotesk";
    margin-top: 10px;
    margin-bottom: 0;
  }
  .testimonial-location {
    color: #000;
    font-family: "OverusedGrotesk";
    font-size: 25px;
    font-weight: bold;
    margin: 0;
  }
  .swiper-button-next,
  .swiper-button-prev {
    color: #000;
    width: 40px !important;
    height: 40px !important;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 1000;
  }
  .swiper-button-next {
    background-image: url("../images/rev-arrow-right.png");
    background-repeat: no-repeat !important;
  }
  .swiper-button-prev {
    background-image: url("../images/rev-arrow.png");
    background-repeat: no-repeat !important;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    display: none;
  }

  .perfectum-partner {
    padding: 2% 5%;
  }

  .perfectum-partner h3 {
    font-size: 36px;
    text-align: center;
  }

  .perfectum-partner-inner {
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0vw; */
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 20px;
  }

  .perfectum-partner-inner-right {
    display: flex;
    flex-direction: column;
  }

  .perfectum-partner-inner-right span {
    font-size: 20px;
    margin-top: 3vh;
  }

  .experience {
    background-color: #f5f5f5;
    margin-top: 5vh;
    padding: 1% 5% 3% 5%;
  }

  .experience h2 {
    margin-bottom: -5vh;
  }
}


.acc-services-hero {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d9d9d9;
}

.acc-services-main h1 {
  text-align: center;
  font-size: 75px;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .acc-services-main h1 {
    font-size: 65px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .acc-services-main h1 {
    font-size: 60px;
  }
}

.acc-nums {
  background: url("../images/ACC.png");
  background-position: center;
  background-size: cover;
  height: 60vh;
}

.acc-nums-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  margin: 0;
}

.acc-nums-single {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 33.333%;
  height: 30vh;
  margin: 0;
  padding: 0 10% 0 10%;
  background-color: #317461ba;
  transition: 0.3s;
  color: #fff;
}
.acc-nums-single span {
  font-size: 32px;
  font-weight: 700;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .acc-nums-single span {
    font-size: 30px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .acc-nums-single span {
    font-size: 26px;
  }
}
.acc-nums-single h4 {
  font-weight: 300;
  margin: 0;
}

.acc-nums-single.active {
  background-color: transparent;
}
.acc-nums-single.active h4, .acc-nums-single.active span {
  color: #fff;
}

.acc-nums-single:hover {
  background-color: transparent;
  cursor: pointer;
  transition: 0.3s;
}

.acc-nums-content {
  display: flex;
  gap: 5vw;
  padding: 2% 5%;
}

.acc-nums-content-right h4 {
  font-weight: 500;
  /* margin-top: 155px; */
}

.acc-nums-content-left {
  width: 50%;
  display: flex;
  flex-direction: column;
}
.acc-nums-content-left img {
  height: auto;
  width: 100%;
}
.acc-nums-content-left h5 {
  font-weight: 500;
  margin: 5vh auto;
}
.acc-nums-content-right {
  width: 50%;
}

.acc-help {
  padding: 2% 5%;
  background-color: #f5f5f5;
}

.acc-help h3 {
  text-align: center;
}

.acc-help h5 {
  text-align: center;
}

.acc-help-container {
  display: flex;
  justify-content: center;
  gap: 5vw;
  margin: 10vh 0;
}

.acc-help-container-single {
  font-size: 24px;
  font-weight: 700;
  padding: 20px 50px;
  border-radius: 50px;
  border: 1px solid #d7d7d6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "OverusedGrotesk";
  text-align: center;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .acc-help-container-single {
    font-size: 22px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .acc-help-container-single {
    font-size: 20px;
  }
}

.acc-help-container-single:hover {
  background-color: #da9239;
  color: #fff;
  cursor: pointer;
}

.acc-help-container-single.active{
  background-color: #da9239;
  color: #fff !important;
  cursor: pointer;
}

/* .acc-supp {
  padding: 2% 0% 2% 5%;
} */

.acc-supp h3 {
  text-align: right;
  padding-right: 5%;
}

.swiper-container {
  width: 100%;
  /* min-height: 80vh; */
  /* height: auto; */
  margin: 20px auto;
  overflow: hidden;
  /* padding-left: 5%; */
}
.swiper-container-wrap {
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;

}
@media only screen and (max-width: 768px) {
  .swiper-container-wrap {
    padding: 0 20px;

  }
}
.acc-supp + .swiper-container-wrap .swiper-container {
  padding: 0; 
  margin: 0 auto;
}
.swiper-button {
  background-color: #c68534;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: absolute;
  left: 0;
  top: 30%;
  z-index: 10;
  opacity: 0.5;
}
.swiper-button:hover {
  opacity: 1;
}
/* .swiper-wrapper {
  gap: 5vw;
} */
.swiper-slide {
  display: flex;
  /* width: 40%; */
  flex-direction: column;
  align-items: center;

}
.slide-image {
  width: 100%;
  height: 50vh;
  object-fit: cover;
  transition: 0.4s;
}

.slide-image:hover {
  border-radius: 30px;
  transition: 0.4s;
  filter: grayscale(0.5);
  cursor: pointer;
}
.slide-title {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  font-size: 28px;
  margin-top: 10px;
}

.slide-subtitle {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: "OverusedGrotesk";
}
.slide-content {
  text-align: left;
  font-family: "OverusedGrotesk";
}

/* FAQ Styles */
.faq {
  padding: 5%;
  display: flex;
  background-color: #f5f5f5;
}

.left-faq {
  width: 50%;
}

.left-faq span {
  font-size: 18px;
}

.left-faq h3 {
  font-size: 55px;
  margin: 10px 0;
}

.left-faq h5 {
  font-size: 18px;
}

.right-faq {
  width: 50%;
  margin-top: 10vh;
}

.faq-accordion {
  width: 100%;
}

.faq-accordion-item {
  margin-bottom: 10px;
}

.faq-accordion-header {
  background: none;
  color: #000;
  cursor: pointer;
  padding: 15px;
  border: none;
  outline: none;
  text-align: left;
  font-size: 24px;
  font-family: "OverusedGrotesk";
  font-weight: 500;
  width: 100%;
  gap: 20px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
}

.faq-accordion-header .faq-arrow {
  background-color: #f5a623;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.faq-accordion-header.active .faq-arrow {
  background-color: #c68534;
}

.faq-accordion-content {
  padding: 15px;
  display: none;
  border-top: none;
}

.faq-accordion-content p {
  margin: 0;
  font-size: 18px;
  font-family: "OverusedGrotesk";
  font-weight: 600;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .slide-title {
    font-size: 26px;
  }
  
  .slide-subtitle {
    font-size: 16px;
  }
  .left-faq span {
    font-size: 16px;
  }
  
  .left-faq h3 {
    font-size: 50px;
  }
  
  .left-faq h5 {
    font-size: 16px;
  }
  .faq-accordion-header {
    font-size: 22px;
  }
  .faq-accordion-content p {
    font-size: 16px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .slide-title {
    font-size: 24px;
  }
  
  .slide-subtitle {
    font-size: 14px;
  }
  .left-faq span {
    font-size: 14px;
  }
  
  .left-faq h3 {
    font-size: 45px;
  }
  
  .left-faq h5 {
    font-size: 14px;
  }
  .faq-accordion-header {
    font-size: 20px;
  }
  .faq-accordion-content p {
    font-size: 14px;
  }
}


/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .acc-services-hero {
    height: 70vh;
    padding-top: 0;
  }

  .acc-services-main h1 {
    text-align: center;
    font-size: 60px;
  }

  .acc-nums {
    height: 40vh;
  }

  .acc-nums-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin: 0;
  }

  .acc-nums-single {
    width: 33.333%;
    height: 20vh;
    padding: 0 5% 0 5%;
  }

  .acc-nums-single span {
    font-size: 2.5vh;
  }

  .acc-nums-content {
    flex-direction: column-reverse;
    gap: 5vw;
    padding: 2% 5%;
  }

  .acc-nums-content-right h4 {
    font-weight: 500;
  }

  .acc-nums-content-left {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .acc-nums-content-left img {
    height: 40vh;
  }

  .acc-nums-content-left h5 {
    font-weight: 500;
    margin: 3vh auto;
  }

  .acc-nums-content-right {
    width: 100%;
  }

  .acc-help {
    padding: 2% 5%;
    background-color: #f5f5f5;
  }

  .acc-help h3 {
    font-size: 4vh;
  }

  .acc-help-container {
    flex-direction: column;
    gap: 3vh;
    margin: 5vh 0;
  }

  .acc-help-container-single {
    font-size: 2.2vh;
    padding: 15px 40px;
  }

  .acc-supp {
    padding: 2% 5%;
  }

  .acc-supp h3 {
    font-size: 3.5vh;
    text-align: center;
    padding-right: 5%;
  }

  .swiper-container {
    width: 100%;
    /* min-height: 60vh; */
    margin: 0;
    overflow: hidden;
  }

  .swiper-button {
    background-color: #c68534;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 1rem;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 20%;
    z-index: 10;
    opacity: 0.5;
  }

  /* .swiper-wrapper {
    gap: 5vw;
  } */

  /* .swiper-slide {
    width: 50% !important;
  } */

  .slide-image {
    height: 25vh;
  }

  .slide-title {
    font-size: 2vh;
  }

  .slide-subtitle {
    font-size: 1.2vh;
  }

  /* FAQ Styles */
  .faq {
    flex-direction: column;
    background-color: #f5f5f5;
  }

  .left-faq {
    width: 100%;
  }

  .left-faq span {
    font-size: 1.8vh;
  }

  .left-faq h3 {
    font-size: 4.5vh;
  }

  .left-faq h5 {
    font-size: 1.8vh;
  }

  .right-faq {
    width: 100%;
    margin-top: 0;
  }

  .faq-accordion {
    width: 100%;
  }

  .faq-accordion-header {
    font-size: 2vh;
  }

  .faq-accordion-header .faq-arrow {
    width: 20px;
    height: auto;
    padding: 3px 10px;
  }
  .faq-arrow {
    width: 20px;
    height: 40px;
  }

  .faq-accordion-content p {
    font-size: 1.8vh;
  }
}



@media only screen and (max-width: 768px) {
  .acc-services-hero {
    padding-top: 0;
  }



  .acc-services-main h1 {
    padding: 2%;
    font-size: 36px;
  }

  .acc-nums {
    background: url("../images/ACC.png");
    background-position: center;
    background-size: cover;
    height: 60vh;
  }

  .acc-nums-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .acc-nums-single {
    padding: 0 0% 0 10%;
  }

  .acc-nums-content {
    display: flex;
    flex-direction: column-reverse;
    gap: 5vw;
    padding: 2% 5%;
  }

  .acc-nums-content-right h4 {
    font-weight: 500;
  }

  .acc-nums-content-left {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .acc-nums-content-left h5 {
    font-weight: 500;
    margin: 5vh auto;
  }
  .acc-nums-content-right {
    width: 100%;
  }

  .acc-help {
    padding: 2% 5%;
    background-color: #f5f5f5;
  }

  .acc-help h3 {
    font-size: 2.5vh;
  }

  .help-container-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .help-container-wrap-headers {
    width: 50%;
  }


#acc-help-content {
  text-align: right;
}
  .acc-help-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vh;
    margin: 2vh 0;
  }

  .acc-help-container-single {
    font-size: 16px;
    font-weight: 700;
    padding: 10px 40px;
    border-radius: 50px;
    border: 1px solid #d7d7d6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "OverusedGrotesk";
    text-align: center;
  }

  .acc-help-container-single:hover {
    background-color: #da9239;
    color: #fff;
    cursor: pointer;
  }

  .acc-supp {
    padding: 2% 0% 2% 5%;
  }

  .acc-supp h3 {
    font-size: 3vh;
    text-align: right;
    padding-right: 5%;
  }

  .swiper-container {
    width: 100%;
    /* height: 60vh; */
    margin:0;
    overflow: hidden;
    /* position: static; */
  }

  .swiper-button {
    background-color: #c68534;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: absolute;
    left: 0;
    top: 20%;
    z-index: 10;
    opacity: 0.5;
  }
  .swiper-button:hover {
    opacity: 1;
  }

  /* .swiper-wrapper {
    gap: 5vw;
    margin-bottom: 0;
  } */
  .swiper-slide {
    display: flex;
    /* width: 100% !important; */
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;

  }
  /* .review-swiper .swiper-slide {
    padding-left: 10px;
    padding-right: 10px; 
  } */
  .slide-image {
    width: 100%;
    height: 30vh;
    object-fit: cover;
    margin-bottom: 0;
  }
  .slide-title {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left;
    font-size: 2.5vh;
    margin-top: 10px;
  }

  .slide-subtitle {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.6vh;
    font-family: "OverusedGrotesk";
  }
  .slide-content {
    text-align: left;
    font-family: "OverusedGrotesk";
  }

  /* FAQ Styles */
  .faq {
    /* margin-top: -10vh; */
    padding: 5%;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
  }

  .faq-accordion-header span {
    font-size: 35px;
  }

  .left-faq {
    width: 100%;
  }

  .left-faq span {
    font-size: 2vh;
  }

  .left-faq h3 {
    font-size: 5.7vh;
    margin: 10px 0;
  }

  .left-faq h5 {
    font-size: 2vh;
  }

  .right-faq {
    width: 100%;
    margin-top: 0;
  }

  .faq-accordion {
    width: 100%;
  }

  .faq-accordion-item {
    margin-bottom: 10px;
  }

  .faq-accordion-header {
    background: none;
    color: #000;
    cursor: pointer;
    padding: 15px;
    border: none;
    outline: none;
    text-align: left;
    font-size: 2.5vh;
    font-family: "OverusedGrotesk";
    font-weight: 500;
    width: 100%;
    gap: 20px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
  }

  .faq-accordion-header .faq-arrow {
    background-color: #f5a623;
    color: white;
    padding: 3px 12px 5px 12px;
    border-radius: 50%;
    transition: transform 0.2s ease;
  }

  .faq-accordion-content {
    padding: 15px;
    display: none;
    border-top: none;
  }

  .faq-accordion-content p {
    margin: 0;
    font-size: 2vh;
    font-family: "OverusedGrotesk";
    font-weight: 600;
  }
}

.main-blog {
  padding: 5%;
  background-color: #f5f5f5;
}
.main-blog h1 {
  text-align: center;
  margin-top: 0;
  font-size: 75px;
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .main-blog h1 {
    font-size: 70px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .main-blog h1 {
    font-size: 65px;
  }
}

.page-width {
  max-width: 90% !important;
}

.blog-post {
  /* width: calc(33% - 20px); */
  width: 100%;
  margin: 3vh 1vh;
  padding: 0;
  box-sizing: border-box;
  float: left;
}

.category-date {
  display: flex;
  align-items: center;
  margin-top: -20px;
  margin-bottom: -20px;
}

.blog-post a {
  text-decoration: none;
}

.blog-post img {
  width: 28vw;
  border-radius: 30px;
  height: 42vh;
  object-fit: cover;
  transition: 0.3s;
}

.blog-post img:hover {
  transition: 0.3s;
  border-radius: 0;
}

.blog-post h5,
.blog-post h2,
.blog-post p {
  text-align: left;
}

.blog-post h5 {
  /* color: #b0b0b1; */
  color: rgba(0, 0, 0, 0.3);
  font-size: 20px;
  font-weight: 400;
  font-family: "OverusedGrotesk";
}

.blog-post p {
  color: #000;
  font-family: "OverusedGrotesk";
  font-weight: 700;
  font-size: 20px;
  /* padding-right: 1vw; */
}

.blog-post h2 {
  margin-top: 0;
  font-weight: 700;
  font-size: 32px;
  color: #000;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {

  .blog-post h5 {
    font-size: 18px;
  }
  
  .blog-post p {
    font-size: 18px;
  }
  
  .blog-post h2 {
    font-size: 28px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {

  .blog-post h5 {
    font-size: 16px;
  }
  
  .blog-post p {
    font-size: 16px;
  }
  
  .blog-post h2 {
    font-size: 24px;
  }
}

.blog-post h2:hover {
  text-decoration: underline;
  text-decoration-color: #000;
}

.pagination {
  clear: both;
  text-align: center;
  margin-top: 20px;
}

.active {
  color: #000 !important;
  border-radius: 50px !important;
}

.pagination span {
  font-size: 32px;
  color: #b0b0b1;
  font-family: "OverusedGrotesk";
}

.pagination button {
  margin: 0 3px;
  width: 50px;
  height: 50px;
  border-radius: 0;
  background-color: #007bff00;
  color: #b0b0b1;
  border: none;
  font-size: 32px;
  cursor: pointer;
  font-weight: 600;
  font-family: "OverusedGrotesk";
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .pagination span {
    font-size: 28px;
  }
  
  .pagination button {
    font-size: 28px;
  }
  
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .pagination span {
    font-size: 24px;
  }
  
  .pagination button {
    font-size: 24px;
  }
}

.pagination button:hover {
  color: #000;
}

/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .main-blog {
    padding: 5%;
  }

  .main-blog h1 {
    text-align: center;
    margin-top: 0;
    font-size: 58px;
  }

  .page-width {
    max-width: 90% !important;
  }


  .category-date {
    margin-top: -15px;
    margin-bottom: -15px;
  }

  .blog-post img {
    width: 40vw;
    height: 25vh;
    border-radius: 20px;
  }

  .blog-post h5 {
    font-size: 1.8vh;
  }

  .blog-post p {
    font-size: 1.8vh;
    padding-right: 1vw;
  }

  .blog-post h2 {
    font-size: 2.5vh;
  }

  .pagination {
    margin-top: 20px;
  }

  .pagination span {
    font-size: 2.5vh;
  }

  .pagination button {
    width: 40px;
    height: 40px;
    font-size: 2.5vh;
  }
}


@media only screen and (max-width: 768px) {
  .blog-post {
    width: 100%;
    margin: 0;
    float: none;
  }
  .main-blog h1 {
    /* margin-top: 10vh; */
    margin: 30px 0;
  }

  .main-blog {
    padding: 5%;
  }

  .blog-post img {
    width: 90vw;
    height: 30vh;
  }

  .blog-post h2 {
    font-size: 2.9vh;
  }
}

.blog-details-hero {
  background: url("../images/blog-details.png");
  background-size: cover;
  height: 60vh;
}

.blog-details-main {
  padding: 0 5%;
  display: flex;
  gap: 50px;
}

.blog-details-main-left {
  width: 40%;
}
.blog-details-main-right {
  width: 60%;
}

.blog-share {
  display: flex;
  align-items: center;
}

.blog-share a {
  margin: 0 10px;
}

.other-posts-single {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.other-posts-single img {
  width: 140px;
  height: 120px;
  margin: 2vh 2vh 2vh 0;
  border-radius: 10px;
}

.other-posts-single h4, .other-posts-single span, .other-posts-single h5{
  color: #000;
}
.other-posts-single h5 {
  font-weight: 400;
}
.other-posts-single span {
  opacity: 0.3;
}
/* #other-posts-category {
  margin-right: 10px !important;
} */
.other-posts-category-date {
  display: flex;
  align-items: center;
  margin: 0;
}
#other-posts-category {
  margin: 0;
}

#other-posts-title {
  margin: 1vh 0;
  font-size: 24px;
}

.blog-details-category-date {
  display: flex;
  align-items: center;
}
#blog-category {
  font-weight: 400;
}
/* #blog-date {
  margin-left: 1vw;
} */
.blog-details-main-right h1 {
  font-size: 45px;
  font-weight: 800;
  margin: 0;
}
.blog-details-main-right {
  margin-bottom: 5vh;
}
.blog-details-main-right p {
  font-family: "OverusedGrotesk";
  color: #000;
  font-weight: 500;
  font-size: 16px;
}
.blog-details-main-right h4 {
  margin: 2vh 0;
}

.blog-lists {
  display: flex;
}

.blog-lists ul {
  margin-left: -20px;
  margin-right: 20px;
}
.blog-lists li {
  font-size: 16px;
  font-family: "OverusedGrotesk";
  font-weight: 500;
}

.blog-gallery {
  display: flex;
}

.blog-gallery img {
  width: 90%;
  height: auto;
  margin: 2vh 2vh 2vh 0;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {

  #other-posts-title {
    font-size: 24px;
  }

  .blog-details-main-right h1 {
    font-size: 45px;
  }

  .blog-details-main-right p {
    font-size: 14px;
  }
  .blog-lists li {
    font-size: 14px;
  }
  
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  #other-posts-title {
    font-size: 20px;
  }

  .blog-details-main-right h1 {
    font-size: 40px;
  }

  .blog-details-main-right p {
    font-size: 12px;
  }
  .blog-lists li {
    font-size: 12px;
  }
}

/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .blog-details-hero {
    height: 50vh;
  }

  .blog-details-main {
    padding: 0 5%;
    display: flex;
    flex-direction: column-reverse;
    gap: 30px;
  }

  .blog-details-main-left,
  .blog-details-main-right {
    width: 100%;
  }

  .blog-share a {
    margin: 0 5px;
  }

  .other-posts-single img {
    width: 120px;
    height: 100px;
    margin: 1vh 1vh 1vh 0;
  }

  #other-posts-title {
    font-size: 2.2vh;
  }

  .blog-details-main-right h1 {
    font-size: 4vh;
  }

  .blog-details-main-right p {
    font-size: 1.6vh;
  }

  .blog-details-main-right h4 {
    margin: 1.5vh 0;
  }

  .blog-lists li {
    font-size: 1.6vh;
  }

  .blog-gallery img {
    width: 90%;
    margin: 1.5vh 1.5vh 1.5vh 0;
  }
  .other-posts-single {
    margin: 3vh 0;
  }
}


@media only screen and (max-width: 768px) {
  .blog-details-hero {
    height: 40vh;
  }

  .blog-details-main {
    padding: 0 5%;
    display: flex;
    flex-direction: column-reverse;
    gap: 50px;
  }

  .blog-details-main-left {
    width: 100%;
  }
  .blog-details-main-right {
    width: 100%;
  }

  .blog-share {
    display: flex;
    align-items: center;
  }

  .blog-share a {
    margin: 0 10px;
  }

  .other-posts-single {
    display: flex;
    align-items: center;
  }
  .other-posts-single img {
    width: 140px;
    height: 120px;
    margin: 2vh 2vh 2vh 0;
    border-radius: 10px;
  }

  .other-posts-category-date {
    display: flex;
    align-items: center;
    margin: 0;
  }
  #other-posts-category {
    margin: 0;
  }

  #other-posts-title {
    margin: 1vh 0;
    font-size: 2.5vh;
  }

  .blog-details-category-date {
    display: flex;
    align-items: center;
  }

  #blog-date {
    margin-left: 1vw;
  }
  #blog-title {
    font-size: 4.8vh;
    font-weight: 800;
    margin: 0;
  }
  .blog-details-main-right {
    margin-bottom: 5vh;
  }
  .blog-details-main-right p {
    font-family: "OverusedGrotesk";
    color: #000;
    font-weight: 500;
    font-size: 1.8vh;
  }
  .blog-details-main-right h4 {
    margin: 2vh 0;
  }

  .blog-lists {
    display: flex;
  }

  .blog-lists ul {
    margin-left: -20px;
    margin-right: 20px;
  }
  .blog-lists li {
    font-size: 1.8vh;
    font-family: "OverusedGrotesk";
    font-weight: 500;
  }
  .blog-gallery {
    display: flex;
  }

  .blog-gallery img {
    width: 90%;
    margin: 2vh 2vh 2vh 0;
  }
}

.contact-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  font-family: "OverusedGrotesk";
  gap: 50px;
}
.contact-image {
  width: 50%;
}
.contact-image img {
  width: 100%;
  height: auto;
}

.contact-form-container {
  width: 50%;
  margin-left: 20px;
}
.contact-form-container h1 {
  font-size: 65px;
  margin: 0;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .contact-form-container h1 {
    font-size: 60px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .contact-form-container h1 {
    font-size: 55px;
  }
}

.contact-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.contact-details div {
  flex: 1;
}

.contact-form-container h4 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 5px;
}

.contact-details p {
  font-size: 16px;
  font-family: "OverusedGrotesk";
  font-weight: 600;
}
.contact-details a {
  text-decoration: none;
  color: #000;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .contact-form-container h4 {
    font-size: 24px;
  }
  
  .contact-details p {
    font-size: 14px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .contact-form-container h4 {
    font-size: 20px;
  }
  
  .contact-details p {
    font-size: 12px;
  }
}

.contact-form-container h2 {
  margin: 0;
}

.contact-form {
  display: flex;
  width: 95%;
  flex-direction: column;
}

#send-us {
  margin: 3vh 0;
}

.contact-form label {
  font-size: 16px;
  color: #dcdcdc;
  margin-bottom: 5px;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .contact-form label {
    font-size: 14px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .contact-form label {
    font-size: 12px;
  }
}

.contact-form input,
.contact-form textarea {
  margin-bottom: 15px;
  padding: 10px;
  font-size: 14px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #ccc;
  font-family: "OverusedGrotesk";
}

.contact-form textarea {
  resize: vertical;
  height: 100px;
}

.contact-checkbox input {
  margin-right: 10px;
}

.contact-form button {
  width: 150px;
  padding: 10px 5px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid #f5a623;
  background-color: transparent;
  color: #000;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #e59420;
  color: #fff;
}

.map-section {
  margin-top: 20px;
  padding: 0;
  height: 60vh;
  text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {

  .contact-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    font-family: "OverusedGrotesk";
    gap: 50px;
  }
  .contact-image {
    width: 100%;
  }
  .contact-image img {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: cover;
  }
  
  .contact-form-container {
    width: 90%;
    margin-left: 20px;
  }
  .contact-form-container h1 {
    font-size: 65px;
    margin: 0;
  }
  
  .contact-details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  .contact-details div {
    flex: 1;
  }
  
  .contact-form-container h4 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  
  .contact-details p {
    font-size: 16px;
    font-family: "OverusedGrotesk";
    font-weight: 600;
  }

  
  .contact-form-container h2 {
    margin: 0;
  }
  
  .contact-form {
    display: flex;
    width: 95%;
    flex-direction: column;
  }
  
  #send-us {
    margin: 3vh 0;
  }
  
  .contact-form label {
    font-size: 16px;
    color: #dcdcdc;
    margin-bottom: 5px;
  }

  .contact-form input,
  .contact-form textarea {
    margin-bottom: 15px;
    padding: 10px;
    font-size: 14px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #ccc;
    font-family: "OverusedGrotesk";
  }
  
  .contact-form textarea {
    resize: vertical;
    height: 100px;
  }
  
  .contact-checkbox input {
    margin-right: 10px;
  }
  
  .contact-form button {
    width: 150px;
    padding: 10px 5px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #f5a623;
    background-color: transparent;
    color: #000;
    cursor: pointer;
  }
  
  .contact-form button:hover {
    background-color: #e59420;
    color: #fff;
  }
  
  .map-section {
    margin-top: 20px;
    padding: 0;
    height: 60vh;
    text-align: center;
  }

}

@media only screen and (max-width: 768px) {
  .contact-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
  }
  .contact-image {
    width: 100%;
  }
  .contact-image img {
    width: 100%;
    height: auto;
  }

  .contact-form-container {
    width: auto;
    margin: 0;
    padding: 0 5%;
  }

  .contact-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .contact-details p {
    font-size: 1.8vh;
    font-family: "OverusedGrotesk";
    font-weight: 600;
  }

  .contact-form-container h2 {
    margin: 0;
  }

  .contact-form {
    display: flex;
    width: 90%;
    flex-direction: column;
  }

  #send-us {
    margin: 3vh 0;
  }

  .contact-form label {
    font-size: 1.8vh;
    color: #dcdcdc;
    margin-bottom: 5px;
  }

  .contact-form input,
  .contact-form textarea {
    margin-bottom: 15px;
    padding: 10px;
    font-size: 14px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #ccc;
    font-family: "OverusedGrotesk";
  }

  .contact-form textarea {
    resize: vertical;
    height: 100px;
  }

  .contact-checkbox input {
    margin-right: 10px;
  }

  .contact-form button {
    width: 150px;
    padding: 10px 5px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #f5a623;
    background-color: transparent;
    color: #000;
    cursor: pointer;
  }

  .contact-form button:hover {
    background-color: #e59420;
    color: #fff;
  }

  .map-section {
    margin-top: 20px;
    padding: 0;
    height: 60vh;
    text-align: center;
  }
}

.cookies-containere {
  padding: 0 5%;
  min-height: 100vh;
}

.cookies-maine {
  background-color: #f5f5f5;
  padding: 5vh 0 0 0;
}

.cookies-containere h1 {
  text-align: center;
  margin: 0 0 5vh 0;
  font-size: 8.5vh;
}


.text-container {
  overflow: auto;
  padding-bottom: 10vh;
  margin-top: 10vh;
  z-index: 10;
  display: grid;
  grid-template-columns: 28% 65%;
  gap: 5vw;
}

.text-container h4 {
  display: flex;
  align-items: start;
  margin: 0;
}

.text-container p {
  font-size: 18px;
  font-family: 'OverusedGrotesk';
  font-weight: 700;
  display: flex;
  margin: 0;
  align-items: start;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .text-container p {
    font-size: 16px;

  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .text-container p {
    font-size: 14px;

  }
}



/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .cookies-containere {
    padding: 0% 5%;
  }

  .cookies-maine {
    padding: 5vh 0 0 0;
  }

  .cookies-containere h1 {
    font-size: 6vh;
    margin: 0 0 2vh 0;
  }

  .text-container {
    margin: 0;
  }
}

@media only screen and (max-width: 768px) {
  .cookies-containere {
    padding: 15% 5%;
  }

  .cookies-containere h1 {
    text-align: center;
    margin: 0 0 5vh 0;
    font-size: 6vh;
  }

  .text-container h4 {
    width: 100%;
    float: left;
    clear: right;
  }
  .text-container p {
    width: 100%;
    float: right;
    margin: 0vh 0;
  }

  .text-container {
    overflow: auto;
    margin-top: 5vh;
    z-index: 10;
  }
}

.container {
  display: flex;
  padding: 0 5% 5% 5%;
  justify-content: space-between;
  align-items: start;
  background-color: #f5f5f5;
  font-family: "OverusedGrotesk";
  min-height: 80vh;
}

.documents {
  width: 60%;
}
.navigation {
  width: 40%;
}
.documents h1,
.navigation h2 {
  font-size: 75px;
  font-weight: bold;
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .documents h1,
  .navigation h2 {
    font-size: 65px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .documents h1,
.navigation h2 {
    font-size: 60px;
  }
}



.documents table {
  width: 75%;
  border-collapse: collapse;
}
.documents th {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  font-size: 18px;
  font-weight: 400;
}

.documents td {
  padding: 10px;
  text-align: left;
  font-weight: 700;
}
.documents a {
  color: #0056b3;
  text-decoration: none;
  font-weight: 400;
}
.documents a:hover {
  text-decoration: underline;
}
.navigation ul {
  list-style-type: none;
  padding: 0;
}
.navigation li {
  margin: 10px 0;
}
.navigation li a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  font-size: 26px;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .navigation li a {
    font-size: 24px;
  }
  .documents th {
    font-size: 16px;

  }
  
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .navigation li a {
    font-size: 20;
  }
  .documents th {
    font-size: 14px;

  }
}


.navigation li a:hover {
  color: #da9239;
}

/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    flex-direction: column;
    padding: 0 5% 5% 5%;
  }
  .documents {
    width: 100%;
    margin-top: 5vh;
  }
  .navigation {
    width: 100%;
  }
  .documents h1,
  .navigation h2 {
    font-size: 48px;
  }
  .documents table {
    width: 100%;
  }
  .documents th {
    font-size: 2vh;
  }
  .documents td {
    font-size: 2vh;
  }
  .navigation li a {
    font-size: 2.2vh;
  }
}


@media only screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .documents {
    width: 100%;
    margin-top: 10vh;
  }
  .navigation {
    width: 100%;
  }
  .documents h1,
  .navigation h2 {
    font-size: 38px;
  }
  .documents table {
    width: 100%;
  }
  .documents th {
    font-size: 2vh;
  }

  .navigation li a {
    font-size: 2vh;
  }
}

.opening-company-hero {
  padding: 0 5%;
}

.opening-company-hero {
  cursor: url("../images/hover2.png"), auto;
}

.opening-company-hero h1 {
  margin: 5vh 0 -30px 0;
  font-size: 80px;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .opening-company-hero h1 {
    font-size: 70px;
  }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .opening-company-hero h1 {
    font-size: 65px;
  }
}

.number-overlay {
  display: flex;
  justify-content: space-between;
  padding: 0 10%;
}

.number h5 {
  font-size: 250px;
  font-weight: 400;
  color: #f2f2f2;
  margin: 0 0 -210px;
  padding: 0;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .number h5 {
    font-size: 220px;
    font-weight: 400;
    color: #f2f2f2;
    margin: 0 0 -190px;
    padding: 0;
  }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .number h5 {
    font-size: 180px;
    font-weight: 400;
    color: #f2f2f2;
    margin: 0 0 -160px;
    padding: 0;
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeftDelayed {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.content-item {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.content-item.active {
  opacity: 1;
  animation: slideInLeft 0.5s forwards;
}

.content-item h3,
.content-item p {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.content-item.active h3 {
  animation-name: slideInLeft;
}


.steps {
  display: flex;
  align-items: center;
  margin: 20px auto;
  padding: 0 5%;
}
.steps h5 {
  font-weight: 500;
}

.content h3 {
  font-weight: 500;
}

.content-item p {
  font-weight: 600;
  font-family: "OverusedGrotesk";
}

.step {
  flex: 1;
  display: flex;
  justify-content: center;
  text-align: center;
  height: 100px;
  align-items: center;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 0;
  border-radius: 20px;
  margin: 0 40px;
  width: 20%;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .step {
    flex: 1;
    display: flex;
    justify-content: center;
    text-align: center;
    height: 100px;
    width: 250px;
    align-items: center;
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 0;
    border-radius: 20px;
    margin: 0 40px;
  }
  

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .step {
    flex: 1;
    display: flex;
    justify-content: center;
    text-align: center;
    height: 100px;
    align-items: center;
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 0;
    border-radius: 20px;
    margin: 0 40px;
  }
  
}

.step.active {
  background-color: orange;
  color: white !important;
  border-radius: 20px !important;
}

.content {
  text-align: center;
  padding-top: 30px;
  margin: 20px auto;
  max-width: 70%;
}

.content-item {
  display: none;
}

.content-item.active {
  display: block;
}
.opening-company-second {
  padding: 5% 10%;
  margin-top: 5vh;
  background-color: #f5f5f5;
}
.opening-company-second h3 {
  text-align: center;
  font-weight: 800;
  font-size: 45px;
}
.opening-company-third {
  padding: 5%;
}
.opening-company-third h3 {
  font-size: 50px;
  text-align: right;
  font-weight: 800;
  margin-top: 0;
  letter-spacing: 3px;

}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .opening-company-second h3 {
    font-size: 42px;
  }
  .opening-company-third h3 {
    font-size: 48px;
  
  }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .opening-company-second h3 {
    font-size: 38px;
  }
  .opening-company-third h3 {
    font-size: 45px;
  }
}
.accordion {
  width: 80%;
  margin: auto;
}

.accordion-item {
  margin-bottom: 10px;
}

.accordion-header {
  background: none;
  color: #000;
  cursor: pointer;
  padding: 15px;
  border: none;
  outline: none;
  text-align: left;
  font-size: 32px;
  font-weight: 600;
  width: 100%;
  transition: background-color 0.2s ease;
  display: flex;
  gap: 30px;
  align-items: center;
}

.accordion-content {
  padding: 0 15px; /* Adjusted padding */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.accordion-content.active {
  padding: 15px;
  max-height: 500px; /* Arbitrary high value to accommodate content */
}


.accordion-content p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-family: "OverusedGrotesk";
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .accordion-header {
    font-size: 30px;

  }

  .accordion-content p {
    font-size: 16px;
  }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .accordion-header {
    font-size: 26px;

  }
  .accordion-content p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    font-family: "OverusedGrotesk";
  }
}

.icon {
  float: left;
  margin-right: 10px;
  width: 100%;
  max-width: 125px;
  height: auto;
}

.arrow {
  background-color: #f5a623;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  transition: transform 0.2s ease;
}

.accordion-header.active .arrow {
  transform: rotate(180deg);
}

.trust-section {
  display: flex;
  padding: 2% 5%;
  background-color: #f5f5f5;
  gap: 50px;
}
.trust-section__left {
  width: 50%;
}
.trust-section__left img {
  width: 85%;
  height: auto;
}

.trust-section__right {
  width: 50%;
}

.trust-section__right h2 {
  margin-top: 0;
  text-align: center;
}

.trust-section__right h5 {
  line-height: 35px;
  text-align: center;
}

/* FAQ Styles */
.faq {
  padding: 5%;
  display: flex;
}

.left-faq {
  width: 50%;
}

.left-faq span {
  font-size:18px;
}

.left-faq h3 {
  font-size: 55px;
  margin: 10px 0;
}

.left-faq h5 {
  font-size: 18px;
}

.right-faq {
  width: 50%;
  margin-top: 10vh;
}

.faq-accordion {
  width: 100%;
}

.faq-accordion-item {
  margin-bottom: 10px;
}

.faq-accordion-header {
  background: none;
  color: #000;
  cursor: pointer;
  padding: 15px;
  border: none;
  outline: none;
  text-align: left;
  font-size: 24px;
  font-family: "OverusedGrotesk";
  font-weight: 500;
  width: 100%;
  gap: 20px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
}

.faq-accordion-header .faq-arrow {
  background-color: #f5a623;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.faq-accordion-header.active .faq-arrow {
  background-color: #c68534;
}

.faq-accordion-content {
  padding: 15px;
  display: none;
  border-top: none;
}

.faq-accordion-content p {
  margin: 0;
  font-size: 18px;
  font-family: "OverusedGrotesk";
  font-weight: 600;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .left-faq span {
    font-size: 16px;
  }
  
  .left-faq h3 {
    font-size: 50px;
  }
  
  .left-faq h5 {
    font-size: 16px;
  }
  .faq-accordion-header {

    font-size: 22px;

  }
  .faq-accordion-content p {
    font-size: 16px;
  }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .left-faq span {
    font-size: 14px;
  }
  
  .left-faq h3 {
    font-size: 45px;
  }
  
  .left-faq h5 {
    font-size: 14px;
  }
  .faq-accordion-header {

    font-size: 18px;

  }
  .faq-accordion-content p {
    font-size: 14px;
  }
}

/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .opening-company-hero {
    padding: 3vh 5% 0 5%;
  }

  .opening-company-hero h1 {
    margin: 0;
    font-size: 62px;
  }

  .number-overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 12%;
    gap: 23px;
  }

  .number h5 {
    font-size: 80px;
    font-weight: 400;
    color: #f2f2f2;
    margin: 0 0 0px 0;
    padding: 0;
  }

  .steps-and-content {
    display: flex;
    align-items: center;
    margin-top: -620px;
  }

  .steps {
    width: 30%;
    flex-direction: column;
    gap: 20px;
    padding: 0;
  }

  .step {
    flex: 1;
    display: flex;
    justify-content: center;
    text-align: center;
    height: 10vh;
    width: 20vw;
    align-items: center;
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 0 20px;
    border-radius: 20px;
    margin: 0 10px;
  }

  .step.active {
    background-color: orange;
    color: white;
  }

  .content {
    text-align: center;
    margin: 20px auto;
    max-width: 70%;
    width: 70%;
  }

  .content-item {
    display: none;
  }

  .content-item.active {
    display: block;
  }
  .opening-company-second {
    padding: 5% 10%;
    margin-top: 5vh;
    background-color: #f5f5f5;
  }
  .opening-company-second h3 {
    text-align: center;
    font-weight: 800;
    font-size: 2.7vh;
  }
  .opening-company-third {
    padding: 5%;
  }
  .opening-company-third h3 {
    font-size: 3.3vh;
    text-align: center;
    font-weight: 800;
    margin-top: 0;
  }
  .opening-company-second {
    padding: 5% 8%;
    margin-top: 5vh;
  }

  .opening-company-second h3 {
    font-size: 3.5vh;
  }

  .opening-company-third {
    padding: 5%;
  }

  .opening-company-third h3 {
    font-size: 4vh;
    text-align: center;
  }

  .accordion {
    width: 90%;
    margin: auto;
  }

  .accordion-header {
    font-size: 2vh;
  }
  .accordion-content {
    padding: 0 15px; /* Adjusted padding */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  }
  
  .accordion-content.active {
    padding: 15px;
    max-height: 500px; /* Arbitrary high value to accommodate content */
  }
  
  .accordion-content p {
    font-size: 1.4vh;
  }

  .trust-section {
    flex-direction: column;
    gap: 40px;
  }
  .trust-section__left {
    width: 100%;
  }
  .trust-section__right {
    width: 100%;
  }
  .trust-section__right h2{
    text-align: center;
  }
  .trust-section__left img {
    width: 100%;
    margin: 0 auto;
    height: auto;
  }

  .trust-section__right h5 {
    line-height: 30px;
  }

  .faq {
    flex-direction: column;
  }
  .right-faq {
    margin-top: 0;
  }
  .left-faq, .right-faq {
    width: 100%;
  }

  .left-faq h3 {
    font-size: 4.5vh;
  }

  .left-faq h5 {
    font-size: 1.8vh;
  }

  .faq-accordion-header {
    font-size: 2.2vh;
  }

  .faq-accordion-header .faq-arrow {
    padding: 4px 10px;
    width: 20px;
  }

  .faq-arrow {
    padding: 4px 8px;
  }

  .faq-accordion-content p {
    font-size: 1.8vh;
  }
}

@media only screen and (min-width: 820px) and (max-width: 822px) {
  .number-overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    margin-left:10vw;
    gap: 8px;
  }

  .steps-and-content {
    display: flex;
    align-items: center;
    margin-top: -550px !important;
  }
}

/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 819px) {
  .opening-company-hero {
    padding: 3vh 5% 0 5%;
  }

  .number-overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    margin-left: -3vw;
    gap: 10px;
  }

  .steps-and-content {
    display: flex;
    align-items: center;
    margin-top: -560px !important;
  }

}

@media only screen and (max-width: 768px) {
  .opening-company-hero {
    padding: 10vh 5% 0 5%;
  }

  .opening-company-hero {
    cursor: url("../images/hover.png"), auto;
  }

  .opening-company-hero h1 {
    margin: 5vh 0 50px 0;
    font-size: 48px;
  }

  .number-overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 15%;
  }

  .number h5 {
    font-size: 80px;
    font-weight: 400;
    color: #f2f2f2;
    margin: 0 0 0px 0;
    padding: 0;
  }

  .steps-and-content {
    display: flex;
    align-items: center;
    margin-top: -530px;
  }

  .steps {
    flex-direction: column;
    gap: 20px;
    padding: 0;
  }

  .step {
    flex: 1;
    display: flex;
    justify-content: center;
    text-align: center;
    height: 10vh;
    width: 20vw;
    align-items: center;
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 0 20px;
    border-radius: 20px;
    margin: 0 10px;
  }

  .step.active {
    background-color: orange;
    color: white;
  }

  .content {
    text-align: center;
    margin: 20px auto;
    max-width: 70%;
  }

  .content-item {
    display: none;
  }

  .content-item.active {
    display: block;
  }
  .opening-company-second {
    padding: 5% 10%;
    margin-top: 5vh;
    background-color: #f5f5f5;
  }
  .opening-company-second h3 {
    text-align: center;
    font-weight: 800;
    font-size: 2.7vh;
  }
  .opening-company-third {
    padding: 5%;
  }
  .opening-company-third h3 {
    font-size: 3.3vh;
    text-align: center;
    font-weight: 800;
    margin-top: 0;
  }

  .accordion {
    width: 100%;
    margin: auto;
  }

  .accordion-item {
    margin-bottom: 10px;
  }

  .accordion-header {
    background: none;
    color: #000;
    cursor: pointer;
    padding: 15px;
    border: none;
    outline: none;
    text-align: left;
    font-size: 2.5vh;
    font-weight: 600;
    width: 100%;
    transition: background-color 0.2s ease;
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .accordion-content {
    padding: 0 15px; /* Adjusted padding */
    max-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  }
  
  .accordion-content.active {
    padding: 15px;
    max-height: 500px; /* Arbitrary high value to accommodate content */
  }
  

  .accordion-content p {
    margin: 0;
    font-size: 2vh;
    font-weight: 600;
    font-family: "OverusedGrotesk";
  }

  .icon {
    float: left;
    margin-right: 10px;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .arrow {
    background-color: #f5a623;
    padding: 4px 5px 5px 5px;
    border-radius: 50px;
    transition: transform 0.2s ease;
  }

  .accordion-header.active .arrow {
    transform: rotate(180deg);
  }

  .trust-section {
    display: flex;
    flex-direction: column;
    padding: 2% 5%;
    background-color: #f5f5f5;
    gap: 50px;
  }
  .trust-section__left {
    width: 100%;
  }
  .trust-section__left img {
    width: 100%;
  }

  .trust-section__right {
    width: 100%;
  }

  .trust-section__right h2 {
    margin-top: 0;
  }

  .trust-section__right h5 {
    line-height: 30px;
    text-align: left;
  }

  /* FAQ Styles */
  .faq {
    padding: 5%;
    display: flex;
    flex-direction: column;
  }

  .left-faq {
    width: 100%;
  }

  .left-faq span {
    font-size: 2vh;
  }

  .left-faq h3 {
    font-size: 5.7vh;
    margin: 10px 0;
  }

  .left-faq h5 {
    font-size: 2vh;
  }

  .right-faq {
    width: 100%;
    margin-top: 0vh;
  }

  .faq-accordion {
    width: 100%;
  }

  .faq-accordion-item {
    margin-bottom: 10px;
  }

  .faq-accordion-header {
    background: none;
    color: #000;
    cursor: pointer;
    padding: 15px;
    border: none;
    outline: none;
    text-align: left;
    font-size: 2.5vh;
    font-family: "OverusedGrotesk";
    font-weight: 500;
    width: 100%;
    gap: 20px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
  }

  .faq-accordion-header .faq-arrow {
    background-color: #f5a623;
    color: white;
    padding: 3px 12px 5px 12px;
    border-radius: 50%;
    transition: transform 0.2s ease;
  }
  .faq-accordion-header span {
    font-size: 35px;
  }
  .faq-accordion-header.active .faq-arrow {
    background-color: #c68534;
  }

  .faq-accordion-content {
    padding: 15px;
    display: none;
    border-top: none;
  }

  .faq-accordion-content p {
    margin: 0;
    font-size: 2vh;
    font-family: "OverusedGrotesk";
    font-weight: 600;
  }
}

.privacy-policy-container {
  padding: 0 5%;
}

.privacy-main {
  background-color: #f5f5f5;
  padding: 5vh 0 0 0;
}

.privacy-policy-container h1 {
  text-align: center;
  margin: 0 0 5vh 0;
  font-size: 8vh;
}

.text-container {
  overflow: auto;
  padding-bottom: 10vh;
  margin-top: 10vh;
  z-index: 10;
  display: grid;
  grid-template-columns: 28% 65%;
  gap: 5vw;
}

.text-container h4 {
  display: flex;
  align-items: start;
  margin: 0;
}

.text-container p {
  font-size: 18px;
  font-family: 'OverusedGrotesk';
  font-weight: 700;
  display: flex;
  margin: 0;
  align-items: start;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .text-container p {
    font-size: 16px;

  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .text-container p {
    font-size: 14px;

  }
}

/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .privacy-policy-container {
    padding: 0 5%;
  }

  .privacy-main {
    padding: 5vh 0 0 0;
  }

  .privacy-policy-container h1 {
    font-size: 6vh;
    margin: 0 0 2vh 0;
  }

  .text-container {
    margin: 0;
  }
}

@media only screen and (max-width: 768px) {
  .privacy-policy-container {
    padding: 15% 5%;
  }
  .privacy-policy-container h1 {
    text-align: center;
    margin: 0;
    font-size: 6vh;
  }
  .text-container h4 {
    width: 100%;
    float: left;
    clear: right;
  }
  .text-container h5 {
    width: 100%;
    float: right;
    margin: 0vh 0;
  }

  .text-container {
    overflow: auto;
    margin-top: 5vh;
    z-index: 10;
  }
}

.residence-hero {
  background: url("../images/residence-hero.png");
  height: 560px;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: end;
  padding: 0 5% 5% 5%;
}

.residence-hero h1 {
  margin: 0;
  font-weight: 600;
  color: #fff;
  font-size: 80px;
}

.puff-in-center {
	-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

 @-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .residence-hero h1 {
    font-size: 70px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .residence-hero h1 {
    font-size: 65px;
  }
}

.residence-hero h5 {
  font-size: 24px;
  margin-top: 2vh;
  font-weight: 600;
  color: #fff;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .residence-hero h5 {
    font-size: 22px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .residence-hero h5 {
    font-size: 20px;
  }
}

.type-text {
  padding: 0 5%;
}

.type-text h2 {
  font-weight: 600;
  display: inline-block;
  overflow: hidden;
}

.you-we-section {
  padding: 0 5%;
}
.you {
  margin: 0;
  gap: 5%;
  display: flex;
  align-items: center;
}

.we {
  margin: 0 0 0 10vw;
  gap: 5%;
  display: flex;
  align-items: center;
}
.six-cards-section {
  padding: 2% 5% 5% 5%;
  background-color: #f5f5f5;
}
.six-cards-section:hover {
  cursor: url("../images/discover.png"), auto;
}
.six-cards-section h3 {
  font-size: 55px;
  text-align: right;
}
.six-cards-section_inner {
  display: flex;
  justify-content: space-between;
  margin: 5vh;
  padding: 0 10%;
}

.card-single {
  font-size: 26px;
  font-weight: 600;
  border: 1px solid #d6d6d7;
  font-family: "OverusedGrotesk";
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  width: 300px;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .six-cards-section h3 {
    font-size: 50px;
  }

  .card-single {
    font-size: 24px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .six-cards-section h3 {
    font-size: 45px;
  }

  .card-single {
    font-size: 22px;
  }
}

.card-single:hover {
  background-color: #317461;
  color: #fff;
  cursor: pointer;
  transition: 0.5s;
}

.card-single.active {
  background-color: #317461;
  color: #fff;
}

.card-parent {
  text-align: center;
  width: 300px;
}
.card-content img {
  margin-top: 1vh;
}

.card-content.active {
  display: block;
}
.card-content p {
  font-size: 18px;
  font-family: "OverusedGrotesk";
  font-weight: 600;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .card-content p {
    font-size: 16px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .card-content p {
    font-size: 14px;
  }
}
.counter-section {
  padding: 0 5% 5% 5%;
  background-color: #f5f5f5;
}
.counter-section h2 {
  text-align: center;
}
.counter-residence {
  display: flex;
  padding: 0 20%;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.counter {
  margin: 0 0 3vh 0;
}

.span {
  border-top: 1px solid #000;
}

.counter-section h5 {
  text-align: center;
}

.residence-steps {
  align-items: center;
  padding: 0 5%;
}
.residence-steps h3 {
  text-align: right;
}

.residence-steps-section {
  display: flex;
  padding: 5%;
}

.residence-steps-section-mid {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 33%;
  align-items: center;
  color: #da9239;
}

.residence-steps-section-mid h3 {
  margin: 3vh 0;
}
.residence-steps-section-mid img {
  height: 15vh;
  width: 3px;
}

.residence-steps-section-left {
  display: flex;
  flex-direction: column;
  gap: 38vh;
  max-width: 41%;
  margin-top: 25vh;
}
.residence-steps-section-right {
  display: flex;
  flex-direction: column;
  gap: 38vh;
  max-width: 43%;
}

/*Document req section*/

.document-req {
  padding: 5%;
  background-color: #f5f5f5;
}

.document-req h2 {
  text-align: left;
}

.document-req-nums {
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: start;
}
.document-req-nums-single {
  text-align: center;
}
.document-req-nums-single {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 20%;
}
.document-req-nums-single h2 {
  background-color: #317461;
  color: #fff;
  text-align: center;
  margin: 0;
  border-radius: 50%;
  /* padding-top: 5px; */
  width: 110px;
  height: 110px;
  font-size: 64px;
  line-height: 105px;
}
.document-req-nums-single h3 {
  font-size: 32px;
}
@media screen and (max-width: 1400px) {
  .document-req-nums-single h2 {
    width: 90px;
    height: 90px;
    font-size: 54px;
    line-height: 85px;
  }
  .document-req-nums-single h3 {
    font-size: 24px;
  }
}
@media screen and (max-width: 1200px) {
  .document-req-nums-single h2 {
    width: 80px;
    height: 80px;
    font-size: 48px;
    line-height: 75px;
  }
  .document-req-nums-single h3 {
    font-size: 22px;
  }
}
@media screen and (max-width: 1000px) {
  .document-req-nums-single {
    max-width: 25%;
    padding: 0 5px;
  }
  .document-req-nums-single h2 {
    width: 60px;
    height: 60px;
    font-size: 38px;
    line-height: 55px;
  }
  .document-req-nums-single h3 {
    font-size: 20px;
  }
}
@media screen and (max-width: 700px) {
  .document-req-nums-single h2 {
    width: 50px;
    height: 50px;
    font-size: 30px;
    line-height: 45px;
  }
  .document-req-nums-single h3 {
    font-size: 16px;
  }
}
@media screen and (max-width: 500px) {
  .document-req-nums-single h2 {
    width: 40px;
    height: 40px;
    font-size: 22px;
    line-height: 38px;
  }
  .document-req-nums-single h3 {
    font-size: 14px;
  }
}
.mne-residence-permits {
  padding: 5%;
  /* margin-right: 8vw; */
}
.mne-residence-permits li {
  padding-left: 2.5vw;
  font-size: 24px;
  align-items: center;
}
.mne-residence-permits ul {
  list-style-type: none;
  padding: 0;
  position: relative;
}

.mne-residence-permits li::before {
  content: url(../images/orange-arrow1.png);
  display: inline-block;
  position: absolute;
  left: 0;
}
.mne-residence-permits h3 {
  font-size: 55px;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .mne-residence-permits h3 {
    font-size: 50px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .mne-residence-permits h3 {
    font-size: 45px;
  }
}

.apply-section {
  padding: 5%;
  background-color: #f5f5f5;
}
.apply-section h2 {
  text-align: center;
  margin: 0;
}

.apply-section-inner {
  display: flex;
  margin-top: 8vh;
  gap: 50px;
}
.apply-section-inner ul {
  list-style: none;
  padding-left: 0;
}
.apply-section-inner ul li {
  font-size: 32px;
  font-family: "OverusedGrotesk";
  font-weight: 700;
  margin: 5vh 0;
  padding-left: 30px;
  position: relative;
}
.apply-section-inner ul li::before {
  content: ".";
  position: absolute;
  left: 10px;
  top: 13px;
  line-height: 1px;
  font-weight: bold;
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .apply-section-inner ul li {
    font-size: 28px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .apply-section-inner ul li {
    font-size: 24px;
  }
}
@media only screen and (max-width: 768px) {
  .apply-section-inner ul li {
    font-size: 14px;
    margin: 0;
    margin-top: 20px;
    padding-left: 15px;
  }
  .apply-section-inner ul li::before {
    left: 0;
    top: 5px;
  }
}

.apply-section-inner-left {
  width: 50%;
}
.apply-section-inner-right {
  width: 50%;
}

.apply-section-inner-right img {
  width: 100%;
}

.contact-our-company {
  text-align: center;
  /* pad: 5%; */
  padding: 0 5%;
}

.contact-our-company h2 {
  color: #da9239;
}

/* FAQ Styles */
.faq {
  padding: 5%;
  display: flex;
  background-color: #f5f5f5;
}

.left-faq {
  width: 50%;
}

.left-faq span {
  font-size: 18px;
}

.left-faq h3 {
  font-size: 55px;
  margin: 10px 0;
}

.left-faq h5 {
  font-size: 18px;
}

.right-faq {
  width: 50%;
  margin-top: 10vh;
}

.faq-accordion {
  width: 100%;
}

.faq-accordion-item {
  margin-bottom: 10px;
}

.faq-accordion-header {
  background: none;
  color: #000;
  cursor: pointer;
  padding: 15px;
  border: none;
  outline: none;
  text-align: left;
  font-size: 24px;
  font-family: "OverusedGrotesk";
  font-weight: 500;
  width: 100%;
  gap: 20px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
}

.faq-accordion-header .faq-arrow {
  background-color: #f5a623;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.faq-accordion-header.active .faq-arrow {
  background-color: #c68534;
}

.faq-accordion-content {
  padding: 15px;
  display: none;
  border-top: none;
}

.faq-accordion-content p {
  margin: 0;
  font-size: 18px;
  font-family: "OverusedGrotesk";
  font-weight: 600;
}

#youdesktop {
  display: block;
}
#youmobile {
  display: none;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {
  .left-faq span {
    font-size: 16px;
  }

  .left-faq h3 {
    font-size: 50px;
  }

  .left-faq h5 {
    font-size: 16px;
  }

  .faq-accordion-header {
    font-size: 22px;
  }
  .faq-accordion-content p {
    font-size: 16px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  .left-faq span {
    font-size: 14px;
  }

  .left-faq h3 {
    font-size: 45px;
  }

  .left-faq h5 {
    font-size: 14px;
  }

  .faq-accordion-header {
    font-size: 20px;
  }
  .faq-accordion-content p {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------*/

/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .residence-hero {
    height: 450px;
    padding: 0 5% 5% 5%;
  }

  .residence-hero h1 {
    font-size: 58px;
  }

  .residence-hero h5 {
    font-size: 2vh;
    margin-top: 1.5vh;
  }

  .type-text {
    padding: 0 5%;
  }

  .type-text h2 {
    font-size: 5vh;
  }

  .you-we-section {
    padding: 0 5%;
  }

  .you img,
  .we img {
    width: 30px;
  }

  .you span,
  .we span {
    font-size: 1.8vh;
  }

  .you h2,
  .we h2 {
    font-size: 4vh;
  }

  #youdesktop {
    display: none;
  }
  #youmobile {
    display: block;
  }

  .you,
  .we {
    gap: 3%;
  }

  .six-cards-section {
    padding: 2% 5% 5% 5%;
  }

  .six-cards-section h3 {
    font-size: 4.5vh;
  }

  .six-cards-section_inner {
    flex-direction: column;
    padding: 0 10%;
  }

  .card-single {
    font-size: 2.5vh;
    margin: 2vh 0;
    height: 80px;
    width: 250px;
  }

  .counter-section {
    padding: 0 5%;
  }

  .counter-section h2 {
    font-size: 4vh;
  }

  .counter-residence {
    flex-direction: column;
    padding: 0 5%;
  }

  .counter-residence-single {
    margin: 0 auto;
  }

  .counter-residence-single h2 {
    font-size: 3vh;
  }

  /* Document req section */

  .document-req {
    padding: 5%;
  }

  /* .document-req h2 {
    font-size: 3vh;
  } */

  .document-req-nums {
    justify-content: space-between;
  }

  /* .document-req-nums-single h2 {
    font-size: 2vh;
    height: 40px;
    width: 40px;
  } */

  .mne-residence-permits {
    padding: 5%;
  }

  .mne-residence-permits li {
    padding-left: 4vw;
    font-size: 2.2vh;
  }

  .mne-residence-permits h3 {
    font-size: 4.5vh;
  }

  .apply-section {
    padding: 5%;
  }

  .apply-section h2 {
    font-size: 4vh;
  }

  .apply-section-inner {
    flex-direction: column;
    margin-top: 5vh;
  }

  .apply-section-inner ul li {
    font-size: 2.2vh;
  }

  .apply-section-inner-left,
  .apply-section-inner-right {
    width: 100%;
  }

  .contact-our-company {
    padding: 5%;
  }

  .contact-our-company h2 {
    font-size: 4vh;
  }

  /* FAQ Styles */
  .faq {
    padding: 5%;
    flex-direction: column;
  }

  .left-faq {
    width: 100%;
  }

  .left-faq span {
    font-size: 1.8vh;
  }

  .left-faq h3 {
    font-size: 4vh;
  }

  .left-faq h5 {
    font-size: 1.8vh;
  }

  .right-faq {
    width: 100%;
    margin-top: 5vh;
  }

  .faq-accordion-header {
    font-size: 2vh;
  }

  .faq-accordion-header .faq-arrow {
    width: 20px;
    height: auto;
    padding: 2px 10px;
  }

  .faq-accordion-content p {
    font-size: 1.8vh;
  }
}

@media only screen and (max-width: 768px) {
  .residence-hero {
    background: url("../images/residence-hero.png");
    height: 560px;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: end;
    padding: 0 5% 5% 5%;
  }

  .residence-hero h1 {
    margin: 0;
    font-weight: 600;
    color: #fff;
    font-size: 55px;
  }

  .residence-hero h5 {
    font-size: 2.5vh;
    margin-top: 2vh;
    font-weight: 600;
    color: #fff;
  }

  .type-text {
    padding: 0 5%;
  }

  .type-text h2 {
    font-weight: 600;
    display: inline-block;
    overflow: hidden;
    text-align: center;
  }

  .you-we-section {
    padding: 0 5%;
  }

  .you img,
  .we img {
    width: 25px;
  }
  .you span,
  .we span {
    font-size: 13px;
  }
  .you h2,
  .we h2 {
    font-size: 32px;
  }

  #youmobile {
    display: block;
    margin: 0;
  }
  #youdesktop {
    display: none;
  }
  .you {
    margin: 0;
    gap: 2%;
    display: flex;
    align-items: center;
  }

  .we {
    margin: 0;
    gap: 2%;
    display: flex;
    align-items: center;
  }
  .six-cards-section {
    padding: 2% 5% 5% 5%;
    background-color: #f5f5f5;
  }
  .six-cards-section:hover {
    cursor: url("../images/discover.png"), auto;
  }
  .six-cards-section h3 {
    font-size: 3.8vh;
    text-align: center;
  }
  .six-cards-section_inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0 10%;
  }

  .card-single {
    font-size: 2.8vh;
    font-weight: 600;
    margin: 2vh 0;
    border: 1px solid #d6d6d7;
    font-family: "OverusedGrotesk";
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    width: 300px;
  }

  .counter-section {
    padding: 0 5%;
  }
  .counter-section h2 {
    text-align: center;
  }

  .counter-residence {
    display: flex;
    flex-direction: column;
    padding: 0 5%;
    justify-content: center;
    align-items: start;
    text-align: center;
  }

  .counter-section h5 {
    text-align: center;
  }
  .counter-residence-single {
    margin: 0 auto;
  }
  .counter-residence-single h2 {
    margin-top: 0;
  }

  .residence-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 5%;
  }

  .residence-steps-section {
    display: flex;
    padding: 5%;
  }

  .residence-steps-section-mid {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 33%;
    align-items: center;
    color: #da9239;
  }

  .residence-steps-section-mid h3 {
    margin: 3vh 0;
  }
  .residence-steps-section-mid img {
    height: 15vh;
    width: 3px;
  }

  .residence-steps-section-left {
    display: flex;
    flex-direction: column;
    gap: 22vh;
    margin-top: 22vh;
  }
  .residence-steps-section-right {
    display: flex;
    flex-direction: column;
    gap: 25vh;
  }

  /*Document req section*/

  .document-req {
    padding: 5%;
    background-color: #f5f5f5;
  }

  /* .document-req h2 {
    text-align: left;
  } */

  .document-req-nums {
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
  }
  .document-req-nums-single {
    text-align: center;
  }
  .document-req-nums-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: 150px;
  }
  /* .document-req-nums-single h2 {
    background-color: #317461;
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 3vh;
    border-radius: 100px;
    height: 40px;
    padding-top: 0px;
    width: 40px;
  } */

  .mne-residence-permits {
    padding: 5%;
  }
  .mne-residence-permits li {
    padding-left: 10.5vw;
    font-size: 24px;
    align-items: center;
  }
  .mne-residence-permits ul {
    list-style-type: none;
    padding: 0;
    position: relative;
  }

  .mne-residence-permits li::before {
    content: url(../images/orange-arrow1.png);
    display: inline-block;
    position: absolute;
    left: 0;
  }
  .mne-residence-permits h3 {
    font-size: 5.7vh;
  }
  .mne-residence-permits h3 {
    font-size: 3vh;
  }

  .mne-residence-permits h5 {
    font-size: 2vh;
  }

  .apply-section {
    padding: 5%;
    background-color: #f5f5f5;
  }
  .apply-section h2 {
    text-align: center;
    margin: 0;
  }

  .apply-section-inner {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 3vh;
    gap: 10px;
  }

  .apply-section-inner ul li {
    /* font-size: 1.5vh; */
    font-family: "OverusedGrotesk";
    font-weight: 600;
    /* margin: 5vh 0; */
  }

  .apply-section-inner-left {
    width: 100%;
  }
  .apply-section-inner-right {
    width: 100%;
  }

  .apply-section-inner-right img {
    width: 100%;
  }

  .contact-our-company {
    text-align: center;
    /* pad: 5%; */
    padding: 5%;
  }

  .contact-our-company h2 {
    color: #da9239;
  }

  /* FAQ Styles */
  .faq {
    padding: 5%;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
  }

  .left-faq {
    width: 100%;
    /* margin-top: 50px;    */
  }

  .left-faq span {
    font-size: 2vh;
  }

  .left-faq h3 {
    font-size: 4vh;
    margin: 10px 0;
  }

  .left-faq h5 {
    font-size: 2vh;
  }

  .right-faq {
    width: 100%;
    margin-top: 1vh;
  }

  .faq-accordion-header {
    background: none;
    color: #000;
    cursor: pointer;
    padding: 15px;
    border: none;
    outline: none;
    text-align: left;
    font-size: 2.5vh;
    font-family: "OverusedGrotesk";
    font-weight: 500;
    width: 100%;
    gap: 20px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
  }

  .faq-accordion-header .faq-arrow {
    background-color: #f5a623;
    color: white;
    padding: 3px 12px 5px 12px;
    border-radius: 50%;
    transition: transform 0.2s ease;
  }

  .faq-accordion-header span {
    font-size: 35px;
  }

  .faq-accordion-content p {
    font-size: 1.8vh;
  }
}

.template-hero {
  background: url("../images/blog-details.png");
  background-size: cover;
  height: 60vh;
}

.template-main {
  background-color: #f5f5f5;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.template-main-left {
  width: 40%;
}
.template-main-right {
  /* width: 60%; */
  width: 100%;
}

.template-share {
  display: flex;
  align-items: center;
}

.template-share a {
  margin: 0 10px;
}

.other-posts-single {
  display: flex;
  align-items: center;
}
.other-posts-single img {
  width: 140px;
  height: 120px;
  margin: 2vh 2vh 2vh 0;
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.other-posts-category-date {
  display: flex;
  align-items: center;
  margin: 0;
}
#other-posts-category {
  margin: 0;
}

#other-posts-title {
  margin: 1vh 0;
  font-size: 24px;
}

.template-main-right h1 {
  font-size: 45px;
  font-weight: 800;
  margin: 4vh 0;

  width: 100%;
  max-width: 700px;
}
.template-main-right {
  margin-bottom: 5vh;
}
.template-main-right p {
  font-family: "OverusedGrotesk";
  color: #000;
  font-weight: 500;
  font-size: 16px;
}
.template-main-right h4 {
  margin: 2vh 0;
}

.template-lists {
  display: flex;
}

.template-lists ul {
  margin-left: -20px;
  margin-right: 20px;
}
.template-lists li {
  font-size: 16px;
  font-family: "OverusedGrotesk";
  font-weight: 500;
}

.template-gallery {
  /* display: flex; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.template-gallery img {
  /* width: 32%; */
  width: 100%;
  height: 330px;
  /* height: auto; */
  /* margin: 2vh 2vh 2vh 0; */
}

.pdf-download {
  display: flex;
  align-items: center;
}

.prev-page {
  display: flex;
  align-items: center;
  margin: 1.5vh 0;
}
.prev-page a {
  font-family: "OverusedGrotesk";
  color: #ce8429;
  text-decoration: none;
}
.pdf-download a {
  font-family: "OverusedGrotesk";
  color: #1753a3;
  text-decoration: none;
}

.pdf-download img,
.prev-page img {
  margin-right: 10px;
}
.prev-page img {
  height: 15px;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1600px) {

  #other-posts-title {
    font-size: 24px;
  }

  /* .template-main-right p {
    font-size: 14px;
  } */
  .template-lists li li {
    font-size: 14px;
  }
  
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1400px) {
  #other-posts-title {
    font-size: 20px;
  }

  .template-main-right p {
    font-size: 12px;
  }
  .template-lists li li {
    font-size: 12px;
  }
}

/* Responsive styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .template-hero {
    height: 50vh;
  }

  .template-main {
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .template-main-left,
  .template-main-right {
    width: 100%;
  }

  .template-share a {
    margin: 0 5px;
  }

  .other-posts-single img {
    width: 120px;
    height: 100px;
    margin: 1vh 1vh 1vh 0;
  }

  #other-posts-title {
    font-size: 2.2vh;
  }

  .template-main-right h1 {
    font-size: 4vh;
  }

  .template-main-right p {
    font-size: 1.6vh;
  }

  .template-main-right h4 {
    margin: 1.5vh 0;
  }

  .template-lists li {
    font-size: 1.6vh;
  }

  /* .template-gallery img {
    width: 32%;
    height: auto;
    margin: 1.5vh 1.5vh 1.5vh 0;
  } */

  .other-posts-single {
    margin: 2vh 0;
  }
}


@media only screen and (max-width: 768px) {
  .template-hero {
    height: 40vh;
  }

  .template-main {
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    gap: 50px;
  }

  .template-main-left {
    width: 100%;
  }
  .template-main-right {
    width: 100%;
    margin-bottom: 0;
  }

  .template-share {
    display: flex;
    align-items: center;
  }

  .template-share a {
    margin: 0 10px;
  }

  .other-posts-single {
    display: flex;
    align-items: center;
  }
  .other-posts-single img {
    width: 140px;
    height: 120px;
    margin: 2vh 2vh 2vh 0;
    border-radius: 10px;
  }

  .other-posts-category-date {
    display: flex;
    align-items: center;
    margin: 0;
  }
  #other-posts-category {
    margin: 0;
  }

  #other-posts-title {
    margin: 1vh 0;
    font-size: 2.5vh;
  }

  .template-category-date {
    display: flex;
    align-items: center;
  }

  #template-date {
    margin-left: 1vw;
  }
  #template-title {
    font-size: 4.8vh;
    font-weight: 800;
    margin: 0;
  }
  .template-main-right {
    margin-bottom: 5vh;
  }
  .template-main-right p {
    font-family: "OverusedGrotesk";
    color: #000;
    font-weight: 500;
    font-size: 1.8vh;
  }
  .template-main-right h4 {
    margin: 2vh 0;
  }

  .template-lists {
    display: flex;
  }

  .template-lists ul {
    margin-left: -20px;
    margin-right: 20px;
  }
  .template-lists li {
    font-size: 1.8vh;
    font-family: "OverusedGrotesk";
    font-weight: 500;
  }
  /* .template-gallery {
    display: flex;
  } */

  /* .template-gallery img {
    width: 32%;
    height: auto;
    margin: 2vh 2vh 2vh 0;
  } */
}


.blog-wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.blog-wrapper a{
  display: block;
  width: 100%;
}

.blog-wrapper a img{
  width: 100%;
  height: 42vh;
  object-fit: cover;
  object-position: center;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;

}

.pagination li a{
    margin: 0 30px;
  width: 50px;
  height: 50px;
  border-radius: 0;
  background-color: #007bff00;
  color: #b0b0b1;
  border: none;
  font-size: 32px;
  cursor: pointer;
  font-weight: 600;
  font-family: "OverusedGrotesk";
  text-decoration: none;
}

@media only screen and (max-width: 1200px){
  .blog-wrapper{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px){
  .blog-wrapper{
    grid-template-columns: 1fr;
    padding: 0;
  }

  .blog-wrapper a img{
    height: 25vh;
  }
}
.success-message a{
color: #ce8429;
margin-bottom: 20px;
display: block;
}
.faq-list ul {
  list-style: none;
  padding-left: 0;
}
.faq-list ul li {
  font-family: "OverusedGrotesk";
  color: #111111;
}
.faq-list > ul > li {
  position: relative;
  cursor: pointer;
  padding-left: 50px;
  font-size: 24px;
  font-weight: 500;
  line-height: 180%;
  margin-bottom: 20px;
}
.faq-list > ul > li::before {
  /* content: "+"; */
  content: "";
  width: 30px;
  height: 30px;
  /* border-radius: 50%; */
  /* background-color: #f5a623; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* color: #fff; */
  /* transition: transform 0.2s ease; */
  position: absolute;
  top: 7px;
  left: 0;
  background-image: url('../images/plus.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.faq-list > ul > li ul {
  position: absolute;
  /* opacity: 0; */
  margin-top: 20px;
}
.faq-list > ul > li ul li {
  font-size: 18px;
  font-weight: bold;
  line-height: 130%;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s;
}
.faq-list > ul > li.openfaq::before {
  /* background-color: #c68534; */
  background-image: url('../images/minus.svg');
  /* content: "-"; */
}
.faq-list > ul > li.openfaq ul {
  position: static;
  opacity: 1;
  padding-left: 0;
}
.faq-list > ul > li.openfaq ul li {
  opacity: 1;
  transform: translateY(0); 
}
@media screen and (max-width: 650px){
  .faq-list > ul > li ul li {
    font-size: 16px;
  }
  .faq-list > ul > li {
    font-size: 20px;
    padding-left: 40px;
  }
  .faq-list > ul > li::before {
    top: 5px;
    width: 25px;
    height: 25px;

  }
}
.blog-separator {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: rgba(17, 17, 17, 0.3);
  margin: 0 17px;
}
.other-posts-category-date .blog-separator {
  width: 5px;
  height: 5px;
  background-color: #000;
  margin: 0 7px;
  opacity: 1;
}
.blog-details-category-date .blog-separator {
  width: 8px;
  height: 8px;
  background-color: #000;
}

.map-section iframe {
  height: 100%;
  width: 100%;
}

.other-text{
  padding: 0% 5% 2% 5%;
}

.other-text h5{
      font-weight: 500;
}

.acc-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 5vw;
  row-gap: 0;
}

.acc-grid .acc-nums-content-left, .acc-grid .acc-nums-content-right{
width: 100%;
}

.acc-grid .acc-nums-content-right{
display: flex;
align-items: center;
}

@media only screen and (max-width: 1199px){
 .acc-grid{
  grid-template-columns: 1fr;
  row-gap: 20px;
 } 

 .acc-grid .acc-nums-content-right{
  order: 1;
 }

 .acc-grid .acc-nums-content-left{
  order: 2;
 }

 .other-text{
  order: 3;
  display: flex;
  justify-content: center;
 }

 .template-gallery{
  grid-template-columns: 1fr 1fr;
 }
}

@media only screen and (max-width: 767px){
     .template-gallery{
      gap: 10px;
     }
   .template-gallery img{
height: 180px;
 }
}

.padding-lr{
  padding: 0 5%;
}

.contact-liquidation h3{
  text-align: center;
}

.contact-liquidation-cont{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
    margin-bottom: 80px;
}

.contact-liquidation-cont .row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-liquidation-cont .row .box {
    padding: 10px 20px;
    text-align: center;
}

.contact-liquidation-cont .arrow2{
  width: 100%;
  max-width: 62px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.contact-liquidation-cont .arrow2 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

@media only screen and (max-width: 991px){
.contact-liquidation-cont .row{
  flex-direction: column;
}

.contact-liquidation-cont .arrow2{
    transform: rotate(90deg);
  margin: 30px 0;
}

.contact-liquidation-cont {
gap: 0;
}
}

.center-h3 h3 {
  text-align: center;
}
.review-swiper.about-reviews {
  padding: 0 5%;
  width: 90%;
}
.reviewSwiper {
  margin: 0 auto;
}

.why-perfectum-wrap {
  padding: 100px 5% 0;
  background-color: #f5f5f5;
}
.why-perfectum {
  padding-right: 45%;
  padding-bottom: 50px;
  position: relative;
}
.why-perfectum img {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.why-perfectum h2 {
  font-size: 44px;
  margin: 0;
}
.why-perfectum h3 {
  font-size: 18px;
  font-weight: 400;
  margin: 50px 0;
}
.why-perfectum h2, .why-perfectum h3 {
  text-align: center;
}
.why-perfectum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 100px;
  row-gap: 60px;
}
.why-perfectum-grid h4 {
  font-size: 24px;
  margin: 0 0 10px;
}
.why-perfectum-grid p {
  font-size: 16px;
  line-height: 130%;
  margin: 0;
}
.why-perfectum-grid div {
  padding-top: 30px;
  border-top: 1px solid #000;
}
@media screen and (max-width: 1200px) {
.why-perfectum img {
  display: none;
}
.why-perfectum {
  padding: 0;
}
.why-perfectum-wrap {
  padding: 100px 5%;
}
}
@media screen and (max-width: 800px) {
.why-perfectum-grid {
  column-gap: 50px;
}
.why-perfectum-grid h4 {
  font-size: 20px;
}
}
@media screen and (max-width: 576px) {
.why-perfectum-grid {
  grid-template-columns: 1fr;
  gap: 30px;
}
.why-perfectum h2 {
  font-size: 34px;
}
.why-perfectum-wrap {
  padding: 60px 5%;
}
.why-perfectum-grid h4, .why-perfectum-grid p {
  text-align: center;
}
}  
.swiper-button-prev, .swiper-button-next {
  z-index: 9 !important;
}
.review-swiper .swiper-slide {
  padding: 0;
}
.review-swiper .swiper-slide .reviewslide {
  padding: 20px;
}
.residence-steps h2 {
  text-align: center;
}
.blog-details-category-date .blog-separator:first-child, .other-posts-category-date .blog-separator:first-child, .category-date .blog-separator:first-child {
  margin-left: 0;
} 
.blog-details-main-right {
  padding-top: 25px;
}
.video-background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.vb1 {
  background-image: url('../images/perfectum-accounting.jpg');
}
.vb2 {
  background-image: url('../images/perfectum-onama.jpg');
}
@media screen and (max-width: 768px) {
  .video-background {
    height: fit-content;
    min-height: 30vh;
  }
}
.review-swiper .swiper-slide {
  min-height: unset !important;
}
@media screen and (max-width: 1000px) {
  .review-swiper .swiper-button-prev, .review-swiper .swiper-button-next {
    width: 20px !important;
    height: 20px !important;
  }
  .review-swiper .swiper-button-prev {
    background-position: left;
  }
  .review-swiper .swiper-button-next {
    background-position: right;
  }
}
@media screen and (max-width: 650px) {
  .review-swiper .swiper-button-prev {
    left: 10px;
  }
  .review-swiper .swiper-button-next {
    right: 10px;
  }
}

/* ////////////////////////////////////////////////////// */
.main-video-wrap {
  position: relative;
}
.main-video-wrap .main-video {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.mute-video {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  position: fixed;
  bottom: 40px;
  right: 0;
  z-index: 10;
  background-image: url("../images/volume-mute.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 1199px) {
  .mute-video {
    bottom: 10px;
  }
}
@media screen and (max-width: 575px) {
  .mute-video {
    width: 35px;
    height: 35px;
    right: unset;
    left: 0;
  }
}
.mute-video.mute {
  background-image: url("../images/volume-unmute.png");
}





/* searchhh */

.search-blog-wrapper{
  min-height: auto;
}

.search-blog-wrapper.no-results{
  padding: 0;
}



.search-title{
  padding: 0 5% 0 5%;
}

.search-title h1 span{
  font-size: 70px;
  color: #317461;
}

.around-search-bar {
    height: 100%;
    width: 25px;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.search-form{
  cursor: pointer;
    position: relative;
    height: 100%;
    width: 100%;
    width: 25px;
    height: 35px;
    background: transparent url(../images/search.svg) no-repeat;
    background-size: contain;
    cursor: pointer;
    background-position-y: 7px;
}

.search-form input{
  height: 40px;
    width: calc(100% - 80px);
    padding:0 40px;
    outline: none;
    border: 2px solid #317461;
    border-radius: 40px;
    background-color: #fff;

    color: #317461;
    background: transparent url(../images/search.svg) no-repeat;
    background-position: 10px;
    background-size: 20px;
    display: none;
}

.close-search {
    position: absolute;
    right: 20px;
    color: #317461;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3;
    cursor: pointer;
    display: none;
}

.search-bar-open {
    background-color: white;
    max-width: 100%;
    background-image: none;
    height: 100%;
}

.search-bar-open form {
  width: 100%;
  height: 40px;
}

.main-header{
  position: relative;
}
.around-search-bar.search-bar-open{
     position: absolute;
    width: 70%;
    background-color: white;
    max-width: 100%;
    right: 5%;
    top: 0;
    background-image: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.around-search-bar.search-bar-open .search-form{
  width: 40%;
  height: 40px;
  margin-left: auto;
  background-image: none;
}


.around-search-bar.search-bar-open  form input{
  display: block;
}

    .mobile-search {display: none;}

@media only screen and (max-width: 1200px){

    .mobile-search {
        margin-bottom: 80px;
        width: calc(100% - 20px);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 23%;
        padding-right: 20px;
    }

        .mobile-search form {
        width: 80%;
    }

        .mobile-search form input {
        height: 40px;
        width: calc(100% - 40px);
        outline: none;
        border: 2px solid #317461;
        border-radius: 15px;
        background-color: #fff;
        padding: 0 20px;
        color: #317461;
        display: block;
        background: transparent url(../images/search.svg) no-repeat;
        background-size: 20px;
        background-position: calc(100% - 10px);
    }

    .mobile-menu.show ul{
      margin-top: 0 !important;
    }
  }

  @media only screen and (max-width: 1200px){
  .mobile-search form{
    width: 90%;
  }

  .mobile-search{
    margin-bottom: 25px;
    margin-top: 17%;
  }
  }

  @media only screen and (min-width: 768px) and (max-width: 1200px){
        .mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 500px;
        height: 100%;
        z-index: 9999;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        transition: all 0.3s ease;
    }

    .menu {
        display: none;
    }

    .mobile-menu-btn{
      display: block;
        font-size: 32px;
        color: #000;
        position: absolute;
        right: 20px;
        transition: transform 0.3s ease-in-out;
        z-index: 9999;
    }
  }