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

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

body{
  background-color: var(--primary-bg);
}

section {
  background-color: var(--primary-bg);
}

nav {
  position: fixed !important;
  margin: unset !important;
}

.seo {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 12rem;
  font-family: "AgencyFb";
  flex-direction: column;
}

.seo h1 {
  font-size: clamp(2.5rem, 15vw, 10rem);
  color: var(--primary-font-color);
}

.seo-holder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.seoWhat {
  width: 100%;
  max-width: 80rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2rem;
}

.seoWhat-holder {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.seoItem {
  background-color: var(--secondary-bg);
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: 100%;
}

.seoItem svg{
    width: 100%;
    height: 100%;
    max-width: 20rem;
}

.seoItem p{
    font-size: 1.5rem;
    color: var(--secondary-font-color);
    padding: 1rem;
}

.seoItem.one {
  grid-column: 1/1;
  grid-row: 1 / span 2;
}

.seoItem.two {
  grid-column: 2/2;
  grid-row: 1;
}

.seoItem.three {
  grid-column: 2/2;
  grid-row: 2;
}


.seoComponents{
    padding-top: 5rem;
    width: 100%;
    max-width: 80rem;

}

.seoComponents h2{
    color: var(--primary-font-color);
    font-size: clamp(2rem, 14vw, 5rem);
    width: 100%;
    text-align: center;
}



.seoComponents-holder{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  padding-left: unset;
}

.seoComponents-box{
  display: flex;
  background-color: var(--secondary-bg);
  width: 100%;
  min-width: 50vw;
  max-width: 90vw;
  padding: 1rem;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  border-radius: 30px;
  margin-bottom: 2rem;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: all .4s ease-in-out;
}

.seoComponents-drop{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.seoComponents-drop svg {
  transition: all .3s ease-in-out;
  width: 3rem;
}

.seoComponents h3{
  font-size: clamp(2rem, 8vw, 3rem);
  color: var(--primary-font-color);

}

.seoComponents p{
  color: var(--secondary-font-color);
  font-size: 1.4rem;
  padding-top: 1rem;
  width: 90%;
  display: none;
}


.seoComponents-box.active .dropwon-text{
  display: block;
}

.seoComponents-box.active svg{
transform: rotate(180deg);
}

.seoProgress-holder{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.seoProgress{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.seoProgress h2{
  color: var(--primary-font-color);
  font-size: clamp(2rem, 11vw, 5rem);
    padding-bottom: 2rem;
    text-align: center;
}

.seoCircle{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 1rem;
}

.circleHolder{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.container{
  display: flex;
  padding: 1rem;
  border-radius: 30px;
  background: var(--secondary-bg);
  row-gap: 30px;
  flex-direction: column;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.circular-progress{
  position: relative;
  height: 15rem;
  width: 15rem;
  border-radius: 50%;
  background: conic-gradient(#6c63ff 3.6deg, #121316 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}
.circular-progress::before{
  content: "";
  position: absolute;
  height: 13rem;
  width: 13rem;
  border-radius: 50%;
  background-color: var(--secondary-bg);
}
.progress-value{
  font-family: "AgencyFb";
  position: relative;
  font-size: 2rem;
  color: var(--primary-font-color);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
}

.text{
  font-family: "AgencyFb";
  font-size: clamp(1.8rem, 5vw, 3rem);
  padding-bottom: 1rem;
  color: var(--primary-font-color);
}


@media (max-width: 900px) {
 
  .seoWhat{
    max-width: unset;
    padding: 1rem;
  }
  
  .seoWhat-holder{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .seoItem.two{
    display: none;
  }

  .seoComponents{
    max-width: unset;
    padding: 1rem;
  }

  .seoComponents-holder{
    padding: 1.5rem;
    align-items: center;
  }
}

@media (max-width:650px) {
  .circular-progress{
    width: 7.5rem;
    height: 7.5rem;
  }

  .circular-progress::before{
    width: 6.5rem;
    height: 6.5rem;
  }
}

/* ================================================================ */
#contact {
  padding: 10rem 0 0 0;
}

.contact-bar {
  width: 80%;
  background-color: unset;
  border-radius: 0px 50vw 50vw 0;
  border: 2px solid var(--accent-Color);
  border-left: unset;
  padding: 1%;
  padding-left: 10%;
  position: relative;
  font-family: "AgencyFb";
  transition: all 0.3s ease;
}

.contact-bar h1 {
  font-size: clamp(1.7rem, 8vw, 6rem);
  color: var(--primary-font-color);
  text-wrap: nowrap;
}

.contact-bar p {
  padding-top: 0.5rem;
  font-size: clamp(0.9rem, 5vw, 2.5rem);
  color: var(--secondary-font-color);
}

.contact-svg {
  display: flex;
  position: absolute;
  height: 100%;
  width: 16vw;
  right: 0;
  border-radius: 50vw;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  transition: 0.3s ease;
  top: 0;
}

.contact-link {
  text-decoration: none;
}

.contact-bar:hover {
  -webkit-box-shadow: 0px 0px 80px 4px rgba(107, 99, 255, 0.9);
  -moz-box-shadow: 0px 0px 80px 4px rgba(107, 99, 255, 0.9);
  box-shadow: 0px 0px 80px 4px rgba(107, 99, 255, 0.9);
}

@media (max-width: 1050px) {
  .contact-svg svg {
    width: 4rem;
    height: 4rem;
  }

  .contact-bar {
    width: 95%;
  }

  .contact-svg {
    width: 20vw;
  }
}

/* ================================================================ */

.fingerprint{
  position: fixed;
  left: 0.4rem;
  bottom: 0.6rem;
  z-index: 100;
}

.fingerprint button{
  background-color: transparent;
  border: unset;

}

.fingerprint img{
  width: 3rem;
  height: 3rem;
  opacity: 0.4;
  transition: all .3s ease-in-out;
}

.fingerprint img:hover{
  opacity: 1;
  transform: scale(1.2);
}