@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: myfirstFont;
    src: url(/assets/css/fonts/avenir.ttf);
}
html {
    scroll-behavior: smooth;
  }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Oswald", sans-serif;
}

p {
    font-family: myfirstFont;
}

a {
    font-family: myfirstFont;
    text-decoration: none;
}

:root {
    --primaryColor: #000000;
    --secondarColor: #F1F4FA;
    --btnPrimaryColor: #7A559B;
    --mainColor: #ffffff;
    --bgbtnColor: #E9EBF0;
}

.main-header .navbar-center .nav-item{
    padding: 0 40px;
}
.background-body{
    background-color: #F7F8F9;
}
.announcement-bar {
    background-color: var(--primaryColor);
}
#navbarScroll{
    transition: 0.7s;
}
.navbar-toggler .iconify{
    font-size: 35px;
    font-weight: 700;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}
.announcement-bar p {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0;
    padding: 22px 0px;
    color: var(--mainColor);
}

.main-header img {
    width: 100px;
}

.nav-item .nav-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--primaryColor);
}

.navbar-nav .last-button .nav-link {
    background-color: var(--primaryColor);
    color: var(--mainColor);
    padding: 12px 0;
    transition: .5s;
}

.navbar-nav .last-button .nav-link:hover {
    background-color: var(--btnPrimaryColor);
    color: var(--mainColor);
    padding: 12px 0;
}

.main-header .container-fluid {
    /* background-color: #ffffff; */
    backdrop-filter: blur(24px);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border-radius: 20px;
    padding: 5px 20px;
}

/* =======Home Banner section css */

.banner-section {
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( to right, #ffffff 0%, #ffffff 60%, #F2F4F6 60%, #F2F4F6 100%);
}

.banner-section .margin-top {
    margin-top: 17%;
}

.banner-section .home-banner h1 {
    font-size: 80px;
    font-weight: 800;
    line-height: 100px;
}

.banner-section .home-banner {
    padding: 0 40px;
}

.banner-section .home-banner p {
    font-size: 21px;
    font-weight: 500;
    line-height: 32px;
    padding: 20px 30% 0px 0px;
}

.home-slider .slider-border {
    border: 10px solid var(--mainColor);
}

.owl-carousel .owl-nav {
    display: flex;
    gap: 15px;
    align-items: center;
}

.owl-carousel .owl-nav button.owl-next {
    background-color: var(--primaryColor);
    color: var(--mainColor);
    width: 25px;
    height: 25px;
    border-radius: 20px;
    outline: none;
}
.owl-carousel .owl-nav button.owl-prev {
    background-color: var(--primaryColor);
    color: var(--mainColor);
    width: 25px;
    height: 25px;
    border-radius: 20px;
    outline: none;
}

.slide-navbar .overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index:2;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow: hidden;
    transition: 0.5s;
  }
  
  .slide-navbar .overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    z-index: 9;
  }
  
  .slide-navbar .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 25px;
    color: var(--mainColor);
    font-weight: 400;
    font-family: "Oswald", sans-serif;
  }
  
  .overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
  }
  
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
  }
  .nav-item.book-online{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav-item.book-online a{
    background-color: var(--mainColor);
    color: var(--primaryColor);
    font-size: 18px;
    font-weight: 400;
    width: 100%;
    max-width: 10%;
    transition: 0.5s;
  }
  .nav-item.book-online a:hover{
    background-color: var(--btnPrimaryColor);
    color: var(--mainColor);
  }
 .meet-section{
    background: linear-gradient( to right, #F2F4F6 0%, #F2F4F6 40%, #ffffff 40%, #ffffff 100%);
 }
 .meet-images{
    border: 10px solid var(--mainColor);
 }
 .meet-section .meet-details h1{
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
 }
 .meet-section .meet-details p{
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    color: var(--primaryColor);
    padding-top: 20px;
 }
 .meet-details{
    padding: 0 80px;
 }
 .meet-section .meet-details a{
    font-weight: 500;
    line-height: 21px;
    text-decoration: underline;
    color: var(--btnPrimaryColor);
 }
 .book-roman-btn a{
    background-color: var(--primaryColor);
    margin: 20px;
    padding: 13px 25px;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s;
 }
 .book-roman-btn a:hover{
    background-color: var(--btnPrimaryColor);
 }
 .book-roman-btn .learn-more a{
    background-color: var(--bgbtnColor);
    color: var(--primaryColor) !important;
    margin: 20px;
    padding: 10px 25px;
    font-size: 13px;
    font-weight: 500;
    transition: 0.5s;
 }
 .book-roman-btn .learn-more a:hover{
    background-color: var(--btnPrimaryColor);
    color: var(--mainColor) !important;
 }
 /* =====common class=== */
 .common-class h1{
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
 }
 .common-class p{
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    color: var(--primaryColor);
    padding-top: 20px;
 }
 .margin-padding{
    margin: 40px 0;
    padding: 50px 0;
 }
/* ===common class=== */
.specialize-img{
    width: 100%;
    height: 330px;
}
.specialize-img img {
    width: 100%;
    height: 100%;
    max-height: 77%;
    object-fit: contain;
}
.card-box-1 {
    background: linear-gradient(rgb(28 28 28 / 73%), rgb(61 61 61 / 73%)), url("../images/style-1.jpg");
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    transition: 0.5s;
}
.card-box-1:hover{
    background: linear-gradient(
        rgba(2, 2, 2, 0.73), 
        rgba(0, 0, 0, 0.73)
      ),url("../images/style-1.jpg");  
      width: 100%;
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}
.card-box-2 {
    background: linear-gradient(rgb(28 28 28 / 73%), rgb(61 61 61 / 73%)), url(../images/style-2.jpg);
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    transition: 0.5s;
}
.card-box-2:hover{
    background: linear-gradient(
        rgba(2, 2, 2, 0.73), 
        rgba(0, 0, 0, 0.73)
      ),url(../images/style-2.jpg);  
      width: 100%;
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}

.card-box-3 {
    background: linear-gradient(rgb(28 28 28 / 73%), rgb(61 61 61 / 73%)), url(../images/style-3.jpg);
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    transition: 0.5s;
}
.card-box-3:hover{
    background: linear-gradient(
        rgba(2, 2, 2, 0.73), 
        rgba(0, 0, 0, 0.73)
      ),url(../images/style-3.jpg);  
      width: 100%;
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}
.card-box-4 {
    background: linear-gradient(rgb(28 28 28 / 73%), rgb(61 61 61 / 73%)), url(../images/style-4.jpg);
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    transition: 0.5s;
}
.card-box-4:hover{
    background: linear-gradient(
        rgba(2, 2, 2, 0.73), 
        rgba(0, 0, 0, 0.73)
      ),url(../images/style-4.jpg);  
      width: 100%;
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}
.card-box-5 {
    background: linear-gradient(rgb(28 28 28 / 73%), rgb(61 61 61 / 73%)), url(../images/style-5.jpeg);
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    transition: 0.5s;
}
.card-box-5:hover{
    background: linear-gradient(
        rgba(2, 2, 2, 0.73), 
        rgba(0, 0, 0, 0.73)
      ),url(../images/style-5.jpeg);  
      width: 100%;
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}
.card-box-6 {
    background: linear-gradient(rgb(28 28 28 / 73%), rgb(61 61 61 / 73%)), url(../images/style-6.jpg);
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    transition: 0.5s;
}
.card-box-6:hover{
    background: linear-gradient(
        rgba(2, 2, 2, 0.73), 
        rgba(0, 0, 0, 0.73)
      ),url(../images/style-6.jpg);  
      width: 100%;
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}
.card-box-7 {
    background: linear-gradient(rgb(28 28 28 / 73%), rgb(61 61 61 / 73%)), url(../images/style-7.jpg);
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    transition: 0.5s;
}
.card-box-7:hover{
    background: linear-gradient(
        rgba(2, 2, 2, 0.73), 
        rgba(0, 0, 0, 0.73)
      ),url(../images/style-7.jpg);  
      width: 100%;
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}
.card-box-8 {
    background: linear-gradient(rgb(28 28 28 / 73%), rgb(61 61 61 / 73%)), url(../images/style-8.jpg);
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    transition: 0.5s;
}
.card-box-8:hover{
    background: linear-gradient(
        rgba(2, 2, 2, 0.73), 
        rgba(0, 0, 0, 0.73)
      ),url(../images/style-8.jpg);  
      width: 100%;
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}
.card-box-9 {
    background: linear-gradient(rgb(28 28 28 / 73%), rgb(61 61 61 / 73%)), url(../images/style-10.jpg);
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    transition: 0.5s;
}
.card-box-9:hover{
    background: linear-gradient(
        rgba(2, 2, 2, 0.73), 
        rgba(0, 0, 0, 0.73)
      ),url(../images/style-10.jpg);  
      width: 100%;
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}

.card-box-10 {
    background: linear-gradient(rgb(28 28 28 / 73%), rgb(61 61 61 / 73%)), url(../images/style-10.jpg);
    width: 100%;
    height: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px;
    transition: 0.5s;
}
.card-box-1:hover{
    background: linear-gradient(
        rgba(2, 2, 2, 0.73), 
        rgba(0, 0, 0, 0.73)
      ),url(../images/style-1.jpg);  
      width: 100%;
      height: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}
.style-bg{
    color: var(--mainColor);
}
.style-bg a{
    color: var(--mainColor);
}
/* ===heading h2 class common==== */
.heading-h2 h2{
    font-size: 23px;
    font-weight: 400;
    line-height: 23px;
}
.city-details h1{
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
}
.city-details p{
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    color: var(--primaryColor);
    margin-bottom: 0;
    padding: 3px 0px;
}
.city-details p a{
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    color: var(--btnPrimaryColor);
    text-decoration: underline;

}
.visit-location{
    width: 100%;
  background: linear-gradient(
    to bottom,
    #000000 0%,
    #000000 60%,
    #F7F8F9 60%,
    #F7F8F9 100%
  );
}

.insta-main-slides {
    position: relative;    
}
.insta-main-slides .insta-details{
    position: absolute;
    top: 0;
    left: 0;
   opacity: 0;
    transition:0.8s;
    height: 100%;    
}

.insta-main-slides:hover .insta-details {
    opacity: 1;
    height: 100%;
}
.insta-main-slides:hover .insta-details .content {
    padding-top: 60px;
}
.insta-main-slides .insta-details .content{
    background-color: #000000;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 32px;
    text-align: justify;
    padding-top: 80px;
    transition: 0.8s;
}
.insta-main-slides .insta-details p{
    color: #ffffff;
}
.owl-carousel .owl-nav {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 100%;
    height: 100%;
}
.footer .links ul li a{
    font-size: 15px;
    font-weight: 500;
    color: var(--primaryColor);
}
.social-icons .iconify{
    font-size: 20px;
}

.blog-section{
    padding: 200px 0;
    
}
.blog-image{
width: 100%;
height: 340px;
}
.blog-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-content h1{
    font-size: 30px;
    font-weight: 500;
    line-height: 40px;
    padding: 0px 60px;
    color: var(--primaryColor);
}
.blog-content p{
    font-size:15px;
    font-weight: 400;
    line-height: 21px;
    padding: 0px 60px;
    color: var(--primaryColor);
}
.blog-main-bg{
    box-shadow: 0 8px 50px 12px rgba(136,152,168,.07);
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
}
.anchor-links a{
 font-size: 14px;
 font-weight: 600;
 color: var(--primaryColor);
}
 .anchor-links a:hover{
    text-decoration: underline;
    color: var(--primaryColor);
   }
.blog-content .iconify{
    font-size: 12px;
}
/* =====inner blogs==== */
.inner-blog-image{
    width: 100%;
    height: 450px;
}
.inner-blog-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inner-blog-section {
    padding: 200px 150px 50px 201px;
}
.inner-blog-body{
    padding: 50px 60px;
    background-color: var(--mainColor);
    box-shadow: 6px 6px 50px 12px rgba(136,152,168,.07);
}

.service-size-fonts h1{
    font-size: 75px;
    font-weight: 500;
}

.main-services-section {
    padding-top: 200px;
    padding-bottom: 50px;
}
.service-body-1{
    background: linear-gradient(
        rgba(21,24,27,.73), 
        rgba(21,24,27,.73)
      ),url(../images/style-1.jpg);
    width: 100%;
    height: 300px;
    background-size: cover;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}
.service-body-2{
    background: linear-gradient(
        rgba(21,24,27,.73), 
        rgba(21,24,27,.73)
      ),url(../images/style-2.jpg);
    width: 100%;
    height: 300px;
    background-size: cover;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.service-body-3{
    background: linear-gradient(
        rgba(21,24,27,.73), 
        rgba(21,24,27,.73)
      ),url(../images/style-3.jpg);
    width: 100%;
    height: 300px;
    background-size: cover;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.service-body-4{
    background: linear-gradient(
        rgba(21,24,27,.73), 
        rgba(21,24,27,.73)
      ),url(../images/style-4.jpg);
    width: 100%;
    height: 300px;
    background-size: cover;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.service-body-5{
    background: linear-gradient(
        rgba(21,24,27,.73), 
        rgba(21,24,27,.73)
      ),url(../images/style-5.jpeg);
    width: 100%;
    height: 300px;
    background-size: cover;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.service-body-6{
    background: linear-gradient(
        rgba(21,24,27,.73), 
        rgba(21,24,27,.73)
      ),url(../images/style-6.jpg);
    width: 100%;
    height: 300px;
    background-size: cover;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}
.service-body-7{
    background: linear-gradient(
        rgba(21,24,27,.73), 
        rgba(21,24,27,.73)
      ),url(../images/style-7.jpg);
    width: 100%;
    height: 300px;
    background-size: cover;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}
.service-body-8{
    background: linear-gradient(
        rgba(21,24,27,.73), 
        rgba(21,24,27,.73)
      ),url(../images/style-8.jpg);
    width: 100%;
    height: 300px;
    background-size: cover;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}
.service-body-9{
    background: linear-gradient(
        rgba(21,24,27,.73), 
        rgba(21,24,27,.73)
      ),url(../images/style-1.jpg);
    width: 100%;
    height: 300px;
    background-size: cover;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}
.service-heading h1{
    font-size: 25px;
    font-weight: 600;
    line-height: 40px;
    color: var(--mainColor);
}
.about-section {
    width: 100%;
    height: 750px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #ffffff 0%, #ffffff 60%, #F2F4F6 60%, #F2F4F6 100%);
}
.about-section .about-image img{
    border: 10px solid #ffffff;
}

.about-innner h1{
    font-size: 75px;
    font-weight: 500;
}
.about-innner span{
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    background-color: #F2F4F6;
}
.about-innner p{
    padding: 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: rgb(109, 115, 124);
}
.about-innner .iconify{
    font-size: 25px;
    color: var(--primaryColor);
}
.roman-para p{
    font-size: 15px;
    font-weight: 500;
}
.book-online a{
    transition: 0.5s;
    background-color: var(--primaryColor);
}
.book-online a:hover{
    background-color: var(--btnPrimaryColor);
}
.book-online-bottom{
    transition: 0.5s;
    background-color: var(--primaryColor);
}
.book-online-bottom:hover{
    background-color: var(--btnPrimaryColor);
}
.book-online-today p{
    font-size: 20px;
    font-weight: 600;
}
.service-inner-btn a{
    border: 2px solid var(--mainColor);
    border-radius: 0;
    color: var(--mainColor);
    padding: 10px 30px;
}
.service-inner-btn a:hover{
    border: 2px solid var(--mainColor);
    border-radius: 0;
    color: var(--mainColor);
    padding: 10px 30px;
}
.service-inner-section{
    background: linear-gradient(rgba(21, 24, 27, .9), rgba(21, 24, 27, .9)
      ),url(../images/style-7.jpg);
    width: 100%;
    height: 660px;
    padding-top: 60px;
    background-size: cover;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}
.spacer{
    width: 100%;
    height: 89px;
}
.service-inner-banner h1{
    font-size: 50px;
    font-weight: 500;
    line-height: 60px;
    color: var(--mainColor);
}
.main-inner-services .col-lg-10{
    margin-top: -200px;
    z-index: 1;
}

@media screen and (max-width:380px){
  .main-inner-services .col-lg-10{
    margin-top: -170px;
    z-index: 1;
  }  
}
.roman-salon h3{
    font-size: 20px;
    font-weight: 500;
}
.roman-salon p{
    padding-top: 10px;
    font-size: 15px;
    font-weight: 500;
}
.inner-image-contact {
    width: 100%;
    height: 600px;
    padding: 0 65px;
}
.inner-image-contact img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inner-image-contact img {
    border-radius: 200px 200px 0px 0px;
}
.form-contact p{
    margin-bottom: 0px;
    
}
.contact-section .form-control{
    font-size: 18px;
    font-weight: 500;
    border-radius: 0px 0px 5px 5px;
    border: none;
    padding: 7px 5px;
    background: transparent;
    border-bottom: 2px solid #8e8e8e;
}
.contact-section .form-control:focus {
    color: var(--bs-body-color);
    background-color: transparent;
    border-bottom: 2px solid #8e8e8e;
    outline: 0;
    box-shadow: none;
}
.contact-section label{
 font-size: 16px;
 font-weight: 600;
}
.contact-section{
    background: linear-gradient(#F2F4F6, #5D847B);
    padding: 100px;
    padding-bottom: 100px;
}
.main-contact-details h1{
    font-size: 60px;
    letter-spacing: 0.5px;
}
.main-contact-details p{
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.form-contact .name{
    font-size: 18px;
    font-weight: 600;
}
.form-contact p{
    font-size: 15px;
    font-weight: 600;
}
.getqoute button{
    background-color: var(--primaryColor);
    color: var(--mainColor);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 30px;
    border-radius: 20px 0px 20px 20px;
    transition: 0.5 ease-in;
}
.getqoute button:hover{
    background-color: var(--btnPrimaryColor);
    color: var(--mainColor);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 30px;
    border-radius: 20px 0px 20px 20px;
}
.getqoute button .iconify{
    font-size: 20px;
    margin-bottom: 1px;
}
.circleWrap {
    position: absolute;
    content: "";
    top: 2%;
    right: 4%;
    width: 80px;
    height: 80px;
    border-radius: 200px;
    background-color: #5D847B;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-image-details{
    padding: 55px;
}
.contact-image-details-1{
    padding: 55px;
}
.circleWrap {
      
    svg {
        animation: rotate 10s linear infinite;
        width: 250px;
        height: 250px;
        position: absolute;
        top: auto;
        left: auto;
        overflow: hidden;
    
      &:after {
        display: block;
        content: "hi";
      }
      
      .circle-text {
        font: 100px/100px times;
        letter-spacing: 22.5px;
        width: 100%;
        fill: var(--primaryColor);
        
      }
    }
  }
  
  @keyframes rotate {
    to {
      transform: rotate(-360deg);
    }
  }