/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@font-face {
  font-family: 'Biorhyme SemiBold';
  src: url('assets/fonts/BioRhyme/static/BioRhyme-SemiBold.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi-Variable';
  src: url('assets/fonts/Satoshi_Complete/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Variable.woff2') format('woff2'),
       url('assets/fonts/Satoshi_Complete/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Variable.woff') format('woff'),
       url('aassets/fonts/Satoshi_Complete/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Urbanist-Italic-Variable';
  src: url('assets/fonts/Urbanist-master/fonts/variable/Urbanist-Italic[wght].ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Urbanist-Variable';
  src: url('assets/fonts/Urbanist-master/fonts/webfonts/Urbanist-Regular.woff2') format('woff2'),
       url('assets/fonts/Urbanist-master/fonts/webfonts/Urbanist-Regular.woff') format('woff');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --purple-color: rgba(131, 100, 198, 1);
  --biorhyme-font: 'Biorhyme SemiBold', sans-serif;
  --satoshi-font: 'Satoshi-Variable', sans-serif;
  --urbanist-italic-font: 'Urbanist-Italic-Variable', sans-serif;
  --urbanist-font: 'Urbanist-Variable', sans-serif;
}

body::-webkit-scrollbar       {
background-color: transparent;
width:15px;
}

body::-webkit-scrollbar-track {
background-color:transparent;
}

body::-webkit-scrollbar-thumb { background: transparent; border-radius:16px; border:2px solid #000000; -webkit-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -ms-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out;
}

body::-webkit-scrollbar-thumb:hover {
background-color: transparent;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html, body {
  height: 100%;
  overflow: hidden; 
  overscroll-behavior: none;
}


html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-size: calc(16px + 0.00390625%);
  background: #fff;
  position: relative;
}

.hero-section {
  width: 100vw;
  height: 100vh;
  background: url('assets/hero-bg-ii.jpg') center;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: fixed;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7); 
  -webkit-backdrop-filter: blur(6px); 
          backdrop-filter: blur(6px); 
  z-index: 1; 
}

.hero-section > * {
  z-index: 3;
}

.hero-section .logo {
  width: 32rem;
  height: auto;
  position: relative;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;

}

.hero-section .logo img {
  width: 100%;
  height: auto;
  position: absolute;
}

.hero-section .text-div {
width: 64rem;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
text-align: center;
}

.hero-section h1 {
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 5.5rem;
  font-style: normal;
  width: 100%;
  margin: 0 0 5rem;
  letter-spacing: 1px;
  -webkit-animation: fontCycle 4s infinite;
  animation: fontCycle 4s infinite;
  -webkit-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

@-webkit-keyframes fontCycle {
  0% { font-family: var(--biorhyme-font); }
  100% { font-family: var(--satoshi-font); }
}

@keyframes fontCycle {
  0% { font-family: var(--biorhyme-font); }
  100% { font-family: var(--satoshi-font); }
}

.hero-section p {
  font-family: var(--urbanist-italic-font);
  font-size: 3rem;
  width: 100%;
  font-style: normal;
  margin: 0 0 5rem;

}

.btn-divs {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12rem;
}

.btn-divs button,
.btn-divs a {
  font-family: var(--urbanist-font);
  background-color: var(--purple-color);
  color: white;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: .5px;
  padding: 1.5rem 2.5rem;
  border: none;
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}

.btn-divs button:hover,
.btn-divs a:hover {
  background-color: #261258;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
}

.btn-divs i {
  font-size: 1.7rem;
}

.mail-btn i,
.call-btn i {
  margin-right: 1rem;
}

.copyright {
  width: 100%;
  height: 4rem;
  text-align: center;
  letter-spacing: .5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
          position: absolute;
          inset: auto auto 2%;
}

.copyright p {
  font-size: 1.35rem;
  font-family: var(--urbanist-font);
  width: auto;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.copyright p i {
  margin: 0 .2rem;
}

.copyright p span {
  font: var(--urbanist-font);
  font-weight: bolder;
}

/* Smaller mobile devices (300px to 350px) */
@media screen and (min-width:300px) and (max-width:349px) {
.hero-section .logo {
  width: 10rem;
  height: 10rem;
}

.hero-section .text-div {
width: 27rem;
}

.hero-section h1 {
font-size: 2rem;
line-height: 2.5rem;
margin: 0 auto 2.8rem;
letter-spacing: 0;
width: 25rem;
}

.hero-section p {
font-size: 1.4rem;
margin: 0 0 3.2rem;
}

.btn-divs {
width: 100%;
gap: 3rem;
}

.btn-divs button,
.btn-divs a {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: .2px;
  padding: 1rem 1.5rem;
}

.btn-divs i {
  font-size: 1rem;
}

.mail-btn i,
.call-btn i {
  margin-right: .5rem;
}

.copyright {
  width: 100%;
  height: 4rem;
  letter-spacing: .2px;
}

.copyright p {
  font-size: 1rem;
}

.copyright p i {
  margin: 0 .2rem;
}
}

/* Mobile devices (350px to 576px) */
@media screen and (min-width:350px) and (max-width:576px) {
.hero-section .logo {
  width: 18rem;
  height: auto;
  margin: 1rem 0 0;

}

.hero-section .text-div {
width: 33rem;
}

.hero-section h1 {
font-size: 2.6rem;
line-height: 3.8rem;
margin: 0 auto 2.8rem;
letter-spacing: 0;
width: 27rem;
}

.hero-section p {
font-size: 1.6rem;
margin: 0 0 4rem;
}

.btn-divs {
width: 100%;
gap: 3rem;
}

.btn-divs button,
.btn-divs a {
  font-size: 1.4rem;
  line-height: 1.5rem;
  letter-spacing: .2px;
  padding: 1.5rem;
}

.btn-divs i {
  font-size: 1.2rem;
}

.mail-btn i,
.call-btn i {
  margin-right: 1rem;
}

.copyright {
  letter-spacing: .3px;
}

.copyright p {
  font-size: 1.15rem;
}

.copyright p i {
  margin: 0 .5rem;
}

}

/* Large devices (Tablets and ipads, 577px to 768px) */
@media screen and (min-width: 577px) and (max-width: 768px) {
.hero-section .logo {
  width: 14rem;
  height: 14rem;
  margin: 2rem 0 0;

}

.hero-section .text-div {
width: 45rem;
}

.hero-section h1 {
font-size: 4.5rem;
line-height: 5.2rem;
margin: 0 auto 4rem;
letter-spacing: 0;
width: 40rem;
}

.hero-section p {
font-size: 2rem;
margin: 0 0 4rem;
}

.btn-divs {
width: 100%;
gap: 8rem;
}

.btn-divs button,
.btn-divs a {
  font-size: 1.4rem;
  line-height: 1.5rem;
  letter-spacing: .2px;
  padding: 1.5rem 2rem;
}

.btn-divs i {
  font-size: 1.4rem;
}

.mail-btn i,
.call-btn i {
  margin-right: 1.4rem;
}

.copyright {
  letter-spacing: .5px;
}

.copyright p {
  font-size: 1.4rem;
}

.copyright p i {
  margin: 0 .5rem;
}
}

/* Medium devices (small laptops,  769px to 899px) */
@media screen and (min-width: 769px) and (max-width: 899px) {
.hero-section .logo {
  width: 18rem;
  height: 18rem;
  margin: 2rem 0 0;
}

.hero-section .text-div {
width: 60rem;
}

.hero-section h1 {
font-size: 6.4rem;
line-height: 7.2rem;
margin: 0 auto 6rem;
letter-spacing: 0;
width: 55rem;
}

.hero-section p {
font-size: 3.2rem;
margin: 0 0 6rem;
}

.btn-divs {
width: 100%;
gap: 12rem;
}

.btn-divs button,
.btn-divs a {
  font-size: 1.8rem;
  line-height: 2rem;
  letter-spacing: .3px;
  padding: 2rem 2.5rem;
}

.btn-divs i {
  font-size: 1.8rem;
}

.mail-btn i,
.call-btn i {
  margin-right: 1.8rem;
}

.copyright {
  letter-spacing: .5px;
}

.copyright p {
  font-size: 1.6rem;
}

.copyright p i {
  margin: 0 .7rem;
}
}

/* Larger devices ( laptops and mini desktops, 900px to 1200px) */
@media screen and (min-width: 900px) and (max-width: 1200px) {
.hero-section .logo {
  width: 17rem;
  height: 17rem;
  margin: 2rem 0 0;
}

.hero-section .text-div {
width: 75rem;
}

.hero-section h1 {
font-size: 5.6rem;
line-height: 7rem;
margin: 0 auto 4rem;
letter-spacing: 0;
width: 70rem;
}

.hero-section p {
font-size: 2.4rem;
margin: 0 0 6rem;
}

.btn-divs {
width: 100%;
gap: 10rem;
}

.btn-divs button,
.btn-divs a {
  font-size: 2rem;
  line-height: 2.5rem;
  letter-spacing: .3px;
  padding: 1.5rem 2rem;
}

.btn-divs i {
  font-size: 2rem;
}

.mail-btn i,
.call-btn i {
  margin-right: 2rem;
}

.copyright {
  letter-spacing: .5px;
}

.copyright p {
  font-size: 1.3rem;
}

.copyright p i {
  margin: 0 .5rem;
}
}

/* Larger devices (large desktop or wider screens, 1201px to 1439px) */
@media screen and (min-width: 1201px) and (max-width: 1439px) {

 .hero-section .logo {
  width: 17rem;
  height: 17rem;
}

.hero-section .text-div {
width: 70rem;
}

.hero-section h1 {
font-size: 4.8rem;
line-height: 5.3rem;
margin: 0 auto 3.2rem;
letter-spacing: 0;
width: 60rem;
}

.hero-section p {
font-size: 2.2rem;
margin: 0 0 4.2rem;
}

.btn-divs {
width: 100%;
gap: 8rem;
}

.btn-divs button,
.btn-divs a {
  font-size: 1.6rem;
  line-height: 2.5rem;
  letter-spacing: .3px;
  padding: 1.5rem 2rem;
}

.btn-divs i {
  font-size: 1.6rem;
}

.mail-btn i,
.call-btn i {
  margin-right: 1.6rem;
}

.copyright {
  letter-spacing: .5px;
}

.copyright p {
  font-size: 1.2rem;
}

.copyright p i {
  margin: 0 .5rem;
}
}