*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body{
    width: 100%;
    height: 100%;
    background-color: #202020;
    overflow: hidden;
}



.rotate_container{
    position: absolute;
    top: 50%;
    left: -90vh;
    transform: translate(0, -50%) rotate(0deg);
    height: 200vh;
    width: 200vh;
    background-color: #202020;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 100px 4px;
    border-radius: 50%;
    animation: animate 150s infinite linear;
}

.n_c{
    display: flex;
    z-index: 100;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    position: relative;
    height: 100vh;
    /* width: 60%; */
    top: 0;
    color: #f9f9f9;
    padding: 5%;
}

.n_c .header_container h1{
    font-weight: 700;
    letter-spacing: 4px;
}

.n_c .content_container{
    display: flex;
    width: 100%;
    gap: 20px;
    flex-direction: column;
    
}

.n_c .content_container p{
    width: 50%;
}

.n_c .content_container h1, .content_container h2{
   font-size: 5rem;
   line-height: 4rem;
}

.n_c .content_container .card_details_container{
    display: flex;
    gap: 5rem;
}

.n_c .content_container .card_details_container ul{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.n_c .btn_container button{
    margin-left: 10px;
}

.n_c .btn_container a{
        text-decoration: none;
        color: #f9f9f9;
    
}

.strip{
    display: flex;
    justify-content: end;
    align-items: end;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0, -50%) ;
    width: 100%;
    height: 300px;
    transform-origin: 0 50%;
    
}

.strip .text{
    color: #333;
    display: none;
    justify-content: center;
    align-items: start;
    gap: 1rem;
    flex-direction: column;
    width: 50%;
    height: 100%;
    padding-left: 5%;
}

.strip .text  ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}




.btn-17,
.btn-17 *,
.btn-17 :after,
.btn-17 :before,
.btn-17:after,
.btn-17:before {
  border: 0 solid;
  box-sizing: border-box;
}

.btn-17 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}

.btn-17:disabled {
  cursor: default;
}

.btn-17:-moz-focusring {
  outline: auto;
}

.btn-17 svg {
  display: block;
  vertical-align: middle;
}

.btn-17 [hidden] {
  display: none;
}

.btn-17 {
  border-radius: 99rem;
  border-width: 2px;
  padding: 0.8rem 3rem;
  z-index: 0;
}

.btn-17,
.btn-17 .text-container {
  overflow: hidden;
  position: relative;
}

.btn-17 .text-container {
  display: block;
  mix-blend-mode: difference;
}

.btn-17 .text {
  display: block;
  position: relative;
}

.btn-17:hover .text {
  -webkit-animation: move-up-alternate 0.3s forwards;
  animation: move-up-alternate 0.3s forwards;
}

@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(80%);
  }

  51% {
    transform: translateY(-80%);
  }

  to {
    transform: translateY(0);
  }
}

.btn-17:after,
.btn-17:before {
  --skew: 0.2;
  background: #fff;
  content: "";
  display: block;
  height: 102%;
  left: calc(-50% - 50% * var(--skew));
  pointer-events: none;
  position: absolute;
  top: -104%;
  transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
  transition: transform 0.2s ease;
  width: 100%;
}

.btn-17:after {
  --progress: 0%;
  left: calc(50% + 50% * var(--skew));
  top: 102%;
  z-index: -1;
}

.btn-17:hover:before {
  --progress: 100%;
}

.btn-17:hover:after {
  --progress: -102%;
}



.strip .card{
    padding-left: 5%;
    display: flex;
    justify-content: start;
    align-items: center;
    width: 50%;
    height: 100%;
}

.strip .card img{
    height: 100%;
}


@keyframes animate {
    from{
        transform: translate(0, -50%) rotate(10deg);
    }
    to{
        transform: translate(0, -50%) rotate(360deg);
    }
}