html, body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
    background-color: var(--bg-color--main-black--tertiary);
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #BD00FF;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:active {
  background-color: #bb00ffa1;
}
*::selection {
  color: #F3F5FA;
  background: #B39DFB;
}
*::after,
*::before {
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
    list-style: none;
    color: inherit;
    font-family: inherit;
}
* {
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
    list-style: none;
    color: inherit;
    font-family: inherit;
}
 h1, h2, h3, h4, h5, h6, p {
    margin-block-start: 0!important; 
    margin-block-end: 0!important;   
    margin-inline-start: 0!important; 
    margin-inline-end: 0!important;   
}

  :root {
    --bg-color--white-primary: #F3F5FA;
    --bg-color--white-secondary: #F4F6FA;
    --bg-color--white-tertiary: #EEF2FF;
    --bg-color--main-black--primary: #020617;
    --bg-color--main-black--secondary: #090015;
    --bg-color--main-black--tertiary: #020617;
    --bg-color--main-black--Quaternary: #050505;
    --bg-color--main-black--Quinary: #000000;    
    --bg-color--purple-primary: #a47aff;
    --bg-color-gray--primary: #6F799D;
    --black-color: #171720;
    

    --bg-purple--bttn--cta: #a47aff;


    --txt-color--primary: #6F799D;
    --txt-color--secondary: #6F799DB3;
    --txt-color--white-primary: #F3F5FA;
    --txt-color--white-secondary: #F4F6FA;
    --txt-color--purple-primary: #BD00FF;
    --txt-color--purple-secondary: #B39DFB;
    --txt-color--blue-primary: #6366F1;
    --txt-color--green-primary: #C3FFD4;
    
    --color-hr--primary: #BD00FF;
    --color-separation: #CFD5E8;

    --border-color-primary: #B39DFB;
    
    --realce-blue: #6366F1;
    --realce-purple: #B39DFB; 
    --realce-green: #C3FFD4;
    


    --linear-gradient-style_primary: linear-gradient(90deg, #C3FFD4, #FFFFFF, #A9FFFF);
    --linear-gradient-style_secondary: linear-gradient(to top, #C3FFD4, #FFFFFF, #A9FFFF);

    --linear-gradient--hr-primary: linear-gradient(to left, rgba(164, 24, 207, 0.03) 0%, rgba(164, 24, 207, 0.2) 20%, rgba(189, 0, 255, 1) 50%, rgba(164, 24, 207, 0.2) 80%, rgba(164, 24, 207, 0.03) 100%);
    --linear-gradient--hr-secondary:  
      linear-gradient(to right, #BD00FF, #C3FFD4, #B39DFB, #A9FFFF, #6366F1);


    
    /*logo header*/
    --background-color--blue-logo: #312E8180;
    --width-logo--header: 25px;
    --height-logo--header: 37px;


    /*box shadow*/
    --box-shadow:
    0px 20px 16px rgba(111, 121, 157, 0.13), 
    0px 12px 10px rgba(111, 121, 157, 0.09), 
    0px 8px 6px rgba(111, 121, 157, 0.08), 
    0px 5px 4px rgba(111, 121, 157, 0.06), 
    0px 3px 2px rgba(111, 121, 157, 0.05), 
    0px 1px 1px rgba(111, 121, 157, 0.04);
    --box-shadow2:
    0px 100px 80px 0px rgba(114, 106, 135, 0.13), 
    0px 41.778px 33.422px 0px rgba(114, 106, 135, 0.09), 
    0px 22.336px 17.869px 0px rgba(114, 106, 135, 0.08), 
    0px 12.522px 10.017px 0px rgba(114, 106, 135, 0.06), 
    0px 6.65px 5.32px 0px rgba(114, 106, 135, 0.05), 
    0px 2.767px 2.214px 0px rgba(114, 106, 135, 0.04);


    --speed: 20s;
}


/*======================== FONTS =================================*/


/*------------------------- jomhuria -----------------------*/
.jomhuria-title-header {
  font-family: "Jomhuria", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(80px, 5.833vw, 112px);
  line-height: clamp(50px, 3.333vw, 64px);
  letter-spacing: 0.1rem;
  transition: all 0.3s ease-in-out;
}
.jomhuria-title-strong {
  font-family: "Jomhuria", serif;
  font-size: clamp(80px, 5.833vw, 112px);
  line-height: clamp(50px, 3.333vw, 64px);
  letter-spacing: 0.03rem;
  font-weight: 400;
  font-style: normal;
}
.jomhuria-title-medium {
  font-family: "Jomhuria", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(60px, 3.599vw, 70px);
  line-height: 39px;
  letter-spacing: 0.1rem;
  transition: all 0.3s ease-in-out;
}
.jomhuria-title-small {
  font-family: "Jomhuria", serif;
  font-size: 42px;
  letter-spacing: 0.1rem;
  line-height: 30px;
  font-weight: 400;
  font-style: normal;
}

/*------------------------- roboto -----------------------*/
.font-roboto-text--footer{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.875vw, 36px);
  color: var(--text-color--secondary);
  line-height: clamp(32px, 3.125vw, 60px);
  letter-spacing: 0.167vh;
}
.font-roboto--footer{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: var(--text-color--primary);
  font-size: 16px;
}
.roboto-text--large{
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: clamp(1.2rem, 1.042vw, 1.4rem);
    line-height: 1.7rem;
    letter-spacing: 0.01rem;
    font-style: normal;
  }
.roboto-text--medium{
  font-family: "Roboto",sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.028vw, 20px);
  line-height: 1.4rem;
  letter-spacing: 0.1rem;
  font-style: normal;

}
.roboto-text--small{
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3rem;
  letter-spacing: 0.1rem;
  font-style: normal;
}

@media screen and (min-width: 768px) and (max-width:1000px){
/*------------------------- jomhuria -----------------------*/
  .jomhuria-title-header {
      font-size: clamp(60px, 8.182vw, 90px);
      line-height: clamp(43px, 5vw, 55px);
      letter-spacing: 0.1rem;
  }
  .jomhuria-title-strong {
    font-family: "Jomhuria", serif;
    font-size: clamp(74px, 8.182vw, 90px);
    line-height: clamp(47px, 5vw, 55px);
    font-weight: 400;
    font-style: normal;
  }
  .jomhuria-title-medium {
    font-family: "Jomhuria", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(58px, 3.599vw, 70px);
    line-height: 34px;
    letter-spacing: 0.1rem;
    transition: all 0.3s ease-in-out;
  }

  /*------------------------- roboto -----------------------*/
  .font-roboto--footer{
    font-size: clamp(14px, 1.333vw, 16px);
  }
  .font-roboto-text--footer{
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: clamp(29px, 2.667vw, 32px);
  }
  .roboto-text--large{
    font-size: 1.1rem;
    line-height: 1.8rem;
    letter-spacing: 0.01rem;
  }
  .roboto-text--medium{
      font-size: clamp(14px, 1.6vw, 16px);
      line-height: 1.4rem;
  }
  .roboto-text--small{
    font-size: 13px;
  }
}
@media screen and  (min-width: 320px) and (max-width:767px) {

  /*------------------------- jomhuria -----------------------*/
  .jomhuria-title-header {
      font-size: clamp(32px, 9.115vw, 70px);
      line-height: clamp(21px, 5.859vw, 45px);
      letter-spacing: 0.1rem;
  }
  .jomhuria-title-strong {
    font-family: "Jomhuria", serif;
    font-size: clamp(45px, 9.635vw, 74px);
    line-height: clamp(30px, 6.12vw, 47px);
    letter-spacing: 0.04rem;
  }
  .jomhuria-title-medium {
    font-family: "Jomhuria", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(58px, 3.599vw, 70px);
    line-height: 34px;
    letter-spacing: 0.1rem;
  }
  .jomhuria-title-small {
    font-family: "Jomhuria", serif;
    font-weight: 400;
    font-style: normal;
  }

  /*------------------------- roboto -----------------------*/
  .font-roboto--footer{
    font-size: clamp(12px, 2.083vw, 16px);
  }
  .font-roboto-text--footer{
      font-size: clamp(18px, 3.385vw, 26px);
      line-height: clamp(20px, 4.167vw, 32px);
  }
  .roboto-text--large{
      font-size: clamp(14px, 2.344vw, 18px);
      line-height: clamp(20px, 3.255vw, 25px);
      letter-spacing: 0.01rem;
  }
  .roboto-text--medium{
      font-size: clamp(14px, 2.083vw, 18px);
      line-height: 1.4rem;
    
  }
  .roboto-text--small{
    font-size: 10px;
  }
}
/*======================== FONTS END =================================*/




/*======================== GLOBALS SIZE SECTION DECLARATIONS =================================*/
.cont-size--sections{
  width: 100vw;
  display: flex;
  padding-bottom: 150px;
  padding-top: 150px;
  overflow: hidden;

}
.size-fonts-descrption--title {
  width: clamp(600px, 35.99vw, 700px);
  min-width: 500px;
  text-align: center;
}
.size-fonts--title {
  width: clamp(700px, 41.131vw, 800px);
  min-width: 500px;
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width:1000px){
  .cont-size--sections{
    padding-bottom: clamp(70px, 10vw, 100px);
    padding-top: clamp(70px, 10vw, 100px);
  }
  .size-fonts-descrption--title {
    width: clamp(500px, 35.99vw, 700px);
    min-width: 500px;
  }
  .size-fonts--title {
    width: clamp(500px, 35.99vw, 700px);
    min-width: 500px;
  }
}
@media screen and  (min-width: 320px) and (max-width:767px) {
  .cont-size--sections{
    padding-bottom: clamp(50px, 9.115vw, 70px);
    padding-top: clamp(50px, 9.115vw, 70px);
  }
  .size-fonts-descrption--title{
    width: clamp(280px, 65.104vw, 500px);
    min-width: 280px;
  }
  .size-fonts--title{
    width: clamp(280px, 65.104vw, 500px);
    min-width: 280px;
  }
}

/*======================== FINALS GLOBALS SIZE SECTION DECLARATIONS =================================*/


/*======================== SCROOL MOVE TOP AND BOTTOM SLOW, HIDE AND SHOW =================================*/
.scroll-txt2{
  letter-spacing: -1em !important;
  filter: blur(12px);
  opacity: 0;
  transition: 1.8s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  transition-delay: 0.5s !important;
}
.ativo7.scroll-txt2{
   letter-spacing: 0em !important;
  filter: blur(0px);
  opacity: 1;
  transition: 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  transition-delay: 0s;
}
.perspectiva{
  transition: 2s !important;
transform: perspective(100rem) translate3d(0, 0, -5rem) rotateX(-50deg) scale(1, 1);
}
.ativo7.perspectiva{
  transition: 2s !important;
transform: perspective(100rem) translate3d(0, 0, -5rem) rotateX(0deg) scale(1, 1);
}
.scroll-left{
  opacity: 0;
  transition: 0.9s;
  filter: blur(10px);
  transform: translate(-30px, 0);
}
.scroll-left2{
  opacity: 0;
  transition: 0.3s;
  transform: translate(-30px, 0);
}
.scroll-right{
  opacity: 0;
  transition: 0.9s;
  filter: blur(10px);
  transform: translate(30px, 0);
}
.scroll-right2{
  opacity: 0;
  transition: 0.3s;
  transform: translate(30px, 0);
}
.scroll-bottom{
  opacity: 0;
  transition: 0.9s;
  filter: blur(10px);
  transform: translate(0, -30px);
}
.scroll-bottom2{
  opacity: 0;
  transition: 0.3s;
  transform: translate(0, -30px);
}
.scroll-top{
  opacity: 0;
  transition: 0.9s;
  filter: blur(5px);
  transform: translate(0, 30px);
}
.scroll-top2{
  opacity: 0;
  transition: 0.3s;
  transform: translate(0, 30px);
}
.l1{
  opacity: 0;
  transition: 1.4s !important;
}
.l2{
  opacity: 0;
  transition: 1.4s !important;
  transition-delay: 0.2s !important;
}
.l3{
  opacity: 0;
  transition: 1.4s !important;
  transition-delay: 0.9s !important;
}
.l4{
  opacity: 0;
  transition: 1.4s !important;
  transition-delay: 0.7s !important;
}
.l5{
  opacity: 0;
  transition: 1.4s !important;
  transition-delay: 0.5s !important;
}
.l6{
  opacity: 0;
  transition: 1.4s !important;
  transition-delay: 0.6s !important;
}
.l7{
  opacity: 0;
  transition: 1.4s !important;
  transition-delay: 0.4s !important;
}
.l8{
  opacity: 0;
  transition: 1.4s !important;
  transition-delay: 0.8s !important;
}
.l9{
  opacity: 0;
  transition: 1.4s !important;
  transition-delay: 0.3s !important;
}
.l10{
  opacity: 0;
  transition: 1.4s !important;
  transition-delay: 0.3s !important;
}
.ativo7{ 
  opacity: 1;
  transition: 0.9s;
  filter: blur(0px);
  transform: translate(0, 0px);
  transition-delay: 0s;
}

/*======================== SCROOL MOVE TOP AND BOTTOM SLOW, HIDE AND SHOW END =================================*/

/*======================== ANIMATION DECLARATIONS =================================*/
/*=========== circle pulse ==================*/
@keyframes pulsar {
  0% {
      transform: translate(-50%, -50%) scale(1); 
      opacity: 1; 
  }
  50% {
      transform: translate(-50%, -50%) scale(1.1);
      opacity: 0.5; 
  }
  100% {
      transform: translate(-50%, -50%) scale(1); 
      opacity: 1; 
  }
}
/*===========scroll carousel animation ==================*/
@keyframes autoRun{
  from{
      left: 100%;
  }to{
      left: calc(var(--width) * -1);
  }
}
@keyframes reversePlay{
  from{
      left: calc(var(--width) * -1);
  }to{
      left: 100%;
  }
}

/*===========Animation sections==================*/
@keyframes pulseOpacity {
  0% {
      opacity: 0.9;
  }
  50% {
      opacity: 0.5;
  }
  100% {
      opacity: 0.9;
  }
}
/*================================ Animação do box-shadow pulsante BTTN ==========================*/
@keyframes pulseShadow {
  0% {
      box-shadow: 0 0 20px 2px #B39DFB70;
  }
  50% {
      box-shadow: 0 0 35px 5px #B39DFB70;
  }
  100% {
      box-shadow: 0 0 20px 2px #B39DFB70;
  }
}
/*================================ Rotation ==========================*/
@keyframes rodar {
  0% {
      transform: translate(-50%, -50%) rotate(0);
  }
  100% {
      transform: translate(-50%, -50%) rotate(360deg);
  }
}
/*================================ light ==========================*/
@keyframes light {
  0%, 5% {
      filter: brightness(1.0);
  }
  6% {
      filter: brightness(1.05) blur(10px);
  }
  7% {
      filter: brightness(1.1) blur(15px);
  }
  8% {
      filter: brightness(1.05) blur(10px);
  }
  10% {
      filter: brightness(1.0);
  }
  100% {
      filter: brightness(1.0);
  }
}
/*======================== FINALS ANIMATION DECLARATIONS =================================*/

@keyframes tremble {
  0%, 30%, 100% {
      transform: rotate(0deg) scale(1.0);
  }

  20%, 40% {
      transform: rotate(10deg) scale(1.0);
  }
}

/*============================================================================ GLOBALS declarations =============================================================================*/