@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");

:root {
  --font-geist: "Geist", sans-serif;
  --font-roboto-flex: "Roboto Flex", sans-serif;

    /* Colors */
    --color-white: #ffffff;
    --color-black: #101010;
    --color-black-light: #212121;
    --color-pink: #bf249a;
    --color-blue: #3c51e0;
    --color-green: #b5e48c;
    
    --border-color:#ffffff15;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

html {
    background: #ffffff;
}

body {
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-geist);
  font-optical-sizing: auto;
  font-style: normal;
  position: relative;
  max-width: 2000px;
  margin: auto;
}

.body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button {
    border: none;
    outline: none;
}

a, button {
    cursor: pointer;
    color: currentcolor;
}



/* Sections Common CSS */

.smooth-content {
    max-width: 2000px;
    margin: auto;
    position: relative;
    border-inline: 1px solid #303030;
}

.container {
  max-width: 1800px;
  margin: auto;
  padding: 0 5rem;
}

.container--narrow {
    max-width: 1000px;
}

.pt-0 {
    padding-top: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}


.button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  border-radius: 0px;
  padding-left: 20px;
  padding-right: 20px;
  height: 50px;
  min-width: 150px;
  background: var(--color-white);
  color: var(--color-black);
  cursor: pointer;
}

.section {
    position: relative;
    padding: 0 40px;
    
    &::before, &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        background: #ffffff15;
    }
    
    &::before {
        top: 40px;
    }
    
    &::after {
        bottom: 40px;
    }
}

.section_dots {
    position: relative;
    display: block;
    width: 100%;
    
    &::before, &::after {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        background: var(--color-white);
        z-index: 1;
    }
}

.section_dots-top {
    &::before {
       top: 40px;
       left: 0;
    }
    
    &::after {
       top: 40px;
       right: 0;
    }
}

.section_dots-bottom {
    &::before {
       bottom: 40px;
       left: 0;
    }
    
    &::after {
       bottom: 40px;
       right: 0;
    }
}

.section-inner {
    padding: 0 40px;
    border-inline: 1px solid #ffffff15;
}

@media (max-width:999px) {
    .section {
        padding: 0 20px;
        
        &::before {
            top: 20px;
        }
        
        &::after {
            bottom: 20px;
        }
    }
    
    .section_dots {
        &::before, &::after {
            width: 4px;
            height: 4px;
        }
    }
    
    .section_dots-top {
        &::before {
           top: 20px;
        }
        
        &::after {
           top: 20px;
        }
    }
    
    .section_dots-bottom {
        &::before {
           bottom: 20px;
        }
        
        &::after {
           bottom: 20px;
        }
    }
    
    .section-inner {
        padding: 0 20px;
    }
}

@media (max-width:768px) {
    .button {
        height: 40px;
    }
}



.primary-button {
  position: relative;
  overflow: hidden;

  &::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--current-btn-hover-clr);
    left: 0;
    top: 0;
    z-index: 0;
    transform: translatey(100%);
    display: block;
    transition: all 0.2s cubic-bezier(0.65, 0, 0.35, 1);
  }
}

.primary-button .btn__text {
  position: relative;
  height: min-content;
  overflow: hidden;

  span {
    transition: all 0.2s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: 0.05s;
    display: block;
    z-index: 1;
    position: relative;
  }
}

.primary-button .btn__text span:last-child {
  z-index: 1;
  width: auto;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--btn-text-clr);
}

.primary-button .btn__text span:last-child {
  transform: translatey(20px);
}

.primary-button:hover {
  .btn__text span:first-child {
    transform: translatey(-20px);
  }
  .btn__text span:last-child {
    transform: translatey(0);
  }

  &::after {
    transform: translatey(0%);
  }
}

.primary-button .btn__icon {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--icon-bg-color);
  z-index: 1;

  color: var(--icon-color);
  transition: all 0.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.primary-button .btn__icon span {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;

  transform: none;
  will-change: transform;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}

.primary-button .btn__icon span:last-child {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-20px, 20px);
}

.primary-button:hover {
  .btn__icon {
    background: var(--icon-bg-hover-color);
  }

  .btn__icon span:first-child {
    transform: translate(20px, -20px);
  }
  .btn__icon span:last-child {
    transform: translate(0, 0);
    color: var(--icon-hover-color);
  }
}