@import url(https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);


@-webkit-keyframes gradient {
  0% {
      background-position: 0 50%
  }
  50% {
      background-position: 100% 50%
  }
  to {
      background-position: 0 50%
  }
}

@keyframes gradient {
  0% {
      background-position: 0 50%
  }
  50% {
      background-position: 100% 50%
  }
  to {
      background-position: 0 50%
  }
}


/* UTILITIES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Avenir, Helvetica, Arial, sans-serif;
  }
  
  a {
    text-decoration: none;
  }
  
  
  /* NAVBAR STYLING STARTS */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #0b0e17;
    color: #fff;
    position: sticky;
    top: 0;
    border-bottom: 1px solid #a0b49c;
    z-index: 9999;
  }
  
  .nav-links a {
    color: #fff;
  }
  
  /* LOGO */
  .logo {
    font-size: 32px;
    font-family: Bebas Neue,sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: max(2.5rem,40px);
    line-height: 100%;
    color: #fff
  }
  
  
  



  /*UL list*/

   nav {
    padding: 1rem 5%;
    height: 8vh;
    border-bottom: 1px solid #a0b49c;

    
}


 nav ul {
    gap: 1.5rem;
    list-style: none;
    display: flex;
    align-items: center;
  }
    

 nav ul li {
    font-family: Neue Montreal, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: max(1rem, 16px);
    line-height: max(1.188rem, 19px);
    color: #fff;
    cursor: pointer
}

   nav ul li:after {
    transition: all .7s ease-in-out;
    position: absolute;
    width: 0;
    content: "";
    left: 0;
    bottom: 0;
    height: 2px;
    background: orange
}

@media(max-width:480px) {
     nav ul {
        position: fixed;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        top: 8vh;
        bottom: 0;
        right: 0;
        order: 1;
        transition: all .2s ease-out;
        overflow: hidden;
        z-index: 2;
        padding: 5% 1.5rem 3%;
        height: 100%;
        width: 100%;
        background-color: #0b0e17;
        transform: translateX(100%)
    }
     nav ul.active {
        transform: translateX(0)
    }
     nav ul li {
        font-family: Neue Montreal Bo, sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: max(3.75rem, 60px);
        line-height: 120%;
        color: #fff;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
        width: 100%
    }
}

 nav .toggle {
    display: none
}

@media(max-width:480px) {
     nav .toggle {
        display: block;
        z-index: 3
    }
}

 nav .toggle {
  display: none
}

@media(max-width:480px) {
   nav .toggle {
      display: block;
      z-index: 3
  }
}

 nav .toggle .box {
    width: 25px;
    height: 1.5px;
    background-color: #fff;
    margin: .65rem 0;
}
  
  body, html {
  font-family: Montserrat,sans-serif;
  background:#0b0e17;
  color: #000;
  max-width: 100vw;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0;
  margin: 0;
  height: 100%;
  scroll-behavior: smooth;
  font-size: 1.1111111111vw;
  flex-flow: column;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  }


  @media (max-width: 768px) {
  body, html {
    font-size: 1.8229166667vw;
}
  }

  @media (max-width: 992px) {
  body, html {
  font-size: 1.4112903226vw;
 }
  }

  .home__about {
    padding: 5rem 5%;
    background-color: #0b0e17;
    height: auto;
    
    border-bottom: 1px solid #a0b49c
}

.home__about span a {
    gap: .75rem;
    font-family: Neue Montreal, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: max(1rem, 16px);
    line-height: max(1.188rem, 19px);
    color: #fff;
    margin-bottom: 3rem
}

.home__about h4 {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: max(2rem, 24px);
  line-height: max(2.5rem, 30px);
  color: #fff
}

.home__about h4.proficiency {
  margin-top: 4rem
}

.home__about p {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: max(1.25rem, 16px);
  line-height: max(1.5rem, 24px);
  color: #a0b49c;
  width: min(1075px, 100%);
  margin: 1.5rem 0
}


.home__about .stacks {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media(max-width:992px) {
  .home__about .stacks {
      flex-wrap: wrap;
      gap: 1.5rem
  }

  
}

.home__about .stacks h6 {
    font-family: Neue Montreal, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: max(1rem, 16px);
    line-height: max(1.188rem, 19px);
    color: #a0b49c;
    min-width: 194px;
    max-width: 240px
}

.home__about p.exp {
  margin: 0 0 3rem
}

.h-5 {
  height: 1.25rem;
}

.inline {
  display: inline;
  vertical-align: middle;
}

.w-5 {
  width: 1.25rem
}

.ml-2 {
  margin-left: .5rem
}

.home__hero__content {
  padding: 3rem 5% 0;
  background-color: #0b0e17;
  height: auto
}

@media(max-width:1200px) {
  .home__hero__content {
      flex-direction: column;
      text-align: center
  }
}

.home__hero__content .text .bold {
  font-family: Neue Montreal Bo, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: max(5rem, 40px);
  line-height: max(6rem, 96px);
  color: #a0b49c;
  margin-bottom: 5rem
}

@media (max-width: 1200px) {
.home__hero__content .text .bold {
    margin: 0 auto;
}
}

.home__hero__content .text p {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: max(1.25rem, 20px);
  line-height: max(1.5rem, 24px);
  color: #a0b49c;
  width: min(485px, 100%)
}

@media(max-width:1200px) {
  .home__hero__content .text p {
      margin: 0 auto
  }
}

.flippable-image{
 
  /* Set the width and height of the container to match the image size */
  width: 500px; /* Adjust as needed */
  height: 500px; /* Adjust as needed */
  transform: scaleX(-1);  
  
}


.home__hero__content img {
  margin-left: 50rem;
  margin-top: -38rem;
}

@media(max-width:1200px) {
  .home__hero__content img {
    margin-right: unset;
    margin-left: unset;
    margin-top: unset;
    width: 100%;
    height: auto
  }
}

.header__hero--heading {
  font-family: Neue Montreal Bo, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: max(5rem, 40px);
  line-height: max(6rem, 96px);
  color: #a0b49c;
  margin-bottom: 5rem
}

@media only screen and (max-width:45em) {
  .header__hero--heading {
      font-size: 7rem
  }
  .header__hero--heading br {
      display: none
  }
}

@media only screen and (max-width:28em) {
  .header__hero--heading {
      font-size: 6rem
  }
}

.header__hero--heading-gradient {
  background: -webkit-linear-gradient(135deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);
  background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 400% 400%;
  -webkit-animation: gradient 3s ease infinite;
  animation: gradient 3s ease infinite
}


.home__footer {
  padding: 5rem 5%;
  background-color: #0b0e17;
  height: auto;
  
}

@media(max-width:768px) {
  .home__footer footer {
      flex-direction: column;
      gap: 1rem;
      align-items: flex-start
  }
}

.home__footer .text {
  width: min(890px, 100%);
  text-align: center;
  margin: 0 auto
}

.home__footer .text h2 {
  font-family: Neue Montreal Bo, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: max(3.75rem, 24px);
  line-height: 120%;
  text-align: center;
  color: #fff
}

@media(max-width:600px) {
  .home__footer .text h2 {
      font-size: max(2.5rem, 24px)
  }
}

.home__footer .text p {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: max(1rem, 16px);
  line-height: max(1.188rem, 19px);
  text-align: center;
  color: #fff;
}



.home__footer .text p.mail {
  margin: 1.5rem 0 2.5rem 0
}

.home__footer .text button {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: max(.875rem, 14px);
  line-height: max(1.066rem, 17px);
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 0.125rem;
  height: max(2.313rem, 37px);
  width: max(10.25rem, 164px);
  margin-top: 1rem;
  transition: all .6s ease-in-out
}

.home__footer .text button:hover {
  background-color: #fff;
  color: #000;
  transition: all .6s ease-in-out;
  font-weight: 500
}

.home__footer .cursive {
  font-family: Luna Bar, cursive;
  font-style: normal;
  font-weight: 400;
  font-size: max(2.75rem, 24px);
  line-height: 100%;
  color: #a0b49c;
  text-align: center;
  margin: 3rem auto
}

.home__footer footer a {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: max(1rem, 16px);
  line-height: max(1.188rem, 19px);
  color: #fff
}

.home__footer footer ul {
    gap: 1rem;
    display: flex;
    align-items: center;
    list-style-type: none;
}

.home__footer footer p,
.home__footer footer ul li {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: max(1rem, 16px);
  line-height: max(1.188rem, 19px);
  color: #fff
}


body { background:#0b0e17; }
form { max-width:220px; margin:50px auto; }

.feedback-input {
  color:white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #CC6666;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #CC4949; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background:#CC6666;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#CC4949; }



.home__work {
  padding: 5rem 5%;
  background-color: #0b0e17;
  height: auto;
  border-bottom: 1px solid #a0b49c;
  
}



.home__work h4 {
  font-family: Neue Montreal,sans-serif;
  margin-bottom: 2.5rem;
  font-style: normal;
  font-weight: 500;
  font-size: max(2rem,24px);
  line-height: max(2.5rem,30px);
  color: #fff;
}

.home__work__content {
  display: block;
}



.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  justify-items: center;
  
}


.home__work__content>div span {
  margin-bottom: unset;
  
}

.home__work__content>div img {
  mix-blend-mode: luminosity;
  transition: all .4s ease-in-out;
  position: relative
}

.home__work__content>div img:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  background-color: linear-gradient(0deg, rgba(70, 114, 104, .3) 24.02%, transparent 44.58%);
  z-index: 2
}

@media(max-width:768px) {
  .home__work__content>div img {
      mix-blend-mode: unset
  }
}

.home__work__content>div p {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: max(.875rem, 14px);
  line-height: 1.066rem, 17px;
  color: #fff;
  margin-top: .25rem;
  gap: .5rem;
  transform: translateY(10px);
  opacity: 0;
  transition: all .4s ease-in-out
}

@media(max-width:768px) {
  .home__work__content>div p {
      transform: translateY(0);
      opacity: 1
  }
}

.home__work__content>div p:after {
  transition: all .7s ease-in-out;
  position: absolute;
  width: 0;
  content: "";
  left: 0;
  bottom: 0;
  height: 2px;
  background: #000
}

.home__work__content>div:hover {
  animation-name: bounce-6;
  animation-timing-function: ease;
  animation-timing-function: linear;
  animation-duration: 1.25s
}

.home__work__content>div:hover img {
  mix-blend-mode: unset;
  transition: all .4s ease-in-out;
  scale: 1.3
}

.home__work__content>div:hover p {
  opacity: 1;
  transform: translateY(0);
  transition: all .4s ease-in-out
}

.home__work a.button {
  margin: 0 auto
}

.home__work button {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: Nax(.875rem, 14px);
  line-height: max(1.066rem, 17px);
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: max(3.125rem, 50px);
  height: max(2.313rem, 37px);
  width: auto;
  margin-top: 1rem;
  transition: all .6s ease-in-out;
  margin: 0 auto;
  padding: 0 10px
}

.home__work button:hover {
  background-color: #fff;
  color: #000;
  transition: all .6s ease-in-out;
  font-weight: 500
}

.home__footer footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


blockquote {
  font-style: italic;
  margin: 0;
  padding: 10px;
  
}


.text-slate-200 {
  --tw-text-opacity: 1;
  color: #a0b49c;
}
.leading-tight {
  line-height:max(1.188rem, 19px);
}

.leading-normal {
  line-height: 1.5
}

.inline-block {
  display: inline-block
}

.h-4 {
  height: 1rem
}

.w-4 {
  width: 1rem
}

.shrink-0 {
  flex-shrink: 0
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

.mt-2 {
  margin-top: .5rem
}

.text-sm {
  font-size: .875rem;
  line-height: 1.25rem
}

.font-medium {
  font-weight: 500;
}
.text-base {
  font-size: 1rem;
  line-height: max(1.188rem, 19px);
}
.items-baseline {
  align-items: baseline;
}
.inline-flex {
  display: inline-flex;
}
@media (prefers-reduced-motion: no-preference){
a, button {
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}
}
a {
  color: inherit;
  text-decoration: inherit;
}
*, :after, :before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59,130,246,.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
*, :after, :before {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
user agent stylesheet
a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

li {
  text-align: -webkit-match-parent;
}

ul {
  list-style-type: none;
}
img {
  max-width: 100%;
  height: auto;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h3 {
  font-size: 1.17em;
  font-weight: bold;
}

li {
  text-align: -webkit-match-parent;
}


ul {
  list-style-type: none;
}
.font-sans {
  font-family: var(--font-inter),ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-feature-settings: "ss03","cv02","cv11";
}
.__variable_20b187 {
  --font-inter: "__inter_20b187","__inter_Fallback_20b187";
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184/var(--tw-text-opacity));
}
.leading-relaxed {
  line-height: 1.625;
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42/var(--tw-bg-opacity));
}
body {
  margin: 0;
  line-height: inherit;
}
:root {
  --deg: 1;
  --x: -50%;
  --y: -50%;
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: var(--font-inter),ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-feature-settings: "ss03","cv02","cv11";
  font-variation-settings: normal;
}

:after, :before {
  --tw-content: "";
}
:after, :before {
  --tw-content: "";
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59,130,246,.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
.selection\:text-teal-900 ::selection {
  --tw-text-opacity: 1;
  color: rgb(19 78 74/var(--tw-text-opacity));
}
.selection\:bg-teal-300 ::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(94 234 212/var(--tw-bg-opacity));
}



@media (min-width:640px) {
  .sm\:left-auto {
      left: auto
  }
  .sm\:order-1 {
      order: 1
  }
  .sm\:order-2 {
      order: 2
  }
  .sm\:col-span-2 {
      grid-column: span 2/span 2
  }
  .sm\:col-span-6 {
      grid-column: span 6/span 6
  }
  .sm\:block {
      display: block
  }
  .sm\:table-cell {
      display: table-cell
  }
  .sm\:hidden {
      display: none
  }
  .sm\:translate-y-1 {
      --tw-translate-y: 0.25rem;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }
  .sm\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr))
  }
  .sm\:items-center {
      align-items: center
  }
  .sm\:gap-8 {
      gap: 2rem
  }
  .sm\:pb-0 {
      padding-bottom: 0
  }
  .sm\:text-3xl {
      font-size: 1.875rem;
      line-height: 2.25rem
  }
  .sm\:text-5xl {
      font-size: 3rem;
      line-height: 1
  }
  .sm\:text-xl {
      font-size: 1.25rem;
      line-height: 1.75rem
  }
}

.absolute {
  position: absolute
}

.-inset-x-4 {
  left: -1rem;
  right: -1rem
}
.-inset-y-4 {
  top: -1rem;
  bottom: -1rem
}

.z-0 {
  z-index: 0
}

.z-10 {
  z-index: 10;
}

.mb-12 {
  margin-bottom: 3rem;
}

.inline-flex {
  display: inline-flex
}

.items-baseline {
  align-items: baseline
}

.font-medium {
  font-weight: 500
}

.flex {
  display: flex
}

.rounded-full {
  border-radius: 9999px
}

.bg-teal-400\/10 {
  background-color: rgba(45, 212, 191, .1)
}

.px-3 {
  padding-left: .75rem;
  padding-right: .75rem
}

.py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem
}

.items-center {
  align-items: center
}

.mr-1\.5 {
  margin-right: .375rem
}

.flex-wrap {
  flex-wrap: wrap
}

.text-sm {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: max(1rem, 16px);
  line-height: max(1.188rem, 19px);
  color: #a0b49c;
  min-width: 194px;
  max-width: 240px;
}

.leading-normal {
  line-height: 1.5
}

.-inset-x-4 {
  left: -1rem;
  right: -1rem
}

.-inset-y-2\.5 {
  top: -.625rem;
  bottom: -.625rem
}

@media (min-width:640px) {
  .sm\:left-auto {
      left: auto
  }
  .sm\:order-1 {
      order: 1
  }
  .sm\:order-2 {
      order: 2
  }
  .sm\:col-span-2 {
      grid-column: span 2/span 2
  }
  .sm\:col-span-6 {
      grid-column: span 6/span 6
  }
  .sm\:block {
      display: block
  }
  .sm\:table-cell {
      display: table-cell
  }
  .sm\:hidden {
      display: none
  }
  .sm\:translate-y-1 {
      --tw-translate-y: 0.25rem;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }
  .sm\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr))
  }
  .sm\:items-center {
      align-items: center
  }
  .sm\:gap-8 {
      gap: 2rem
  }
  .sm\:pb-0 {
      padding-bottom: 0
  }
  .sm\:text-3xl {
      font-size: 1.875rem;
      line-height: 2.25rem
  }
  .sm\:text-5xl {
      font-size: 3rem;
      line-height: 1
  }
  .sm\:text-xl {
      font-size: 1.25rem;
      line-height: 1.75rem
  }
}

@media (min-width:768px) {
  .md\:-inset-x-6 {
      left: -1.5rem;
      right: -1.5rem
  }
  .md\:-inset-y-4 {
      top: -1rem;
      bottom: -1rem
  }
  .md\:-mx-12 {
      margin-left: -3rem;
      margin-right: -3rem
  }
  .md\:mb-24 {
      margin-bottom: 6rem
  }
  .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .md\:gap-4 {
      gap: 1rem
  }
  .md\:p-4 {
      padding: 1rem
  }
  .md\:px-12 {
      padding-left: 3rem;
      padding-right: 3rem
  }
  .md\:py-20 {
      padding-top: 5rem;
      padding-bottom: 5rem
  }
}

.border-2 {
  border-width: 2px
}

.border-slate-200\/10 {
  border-color: rgba(226, 232, 240, .1)
}

.group:hover .group-hover\:border-slate-200\/30 {
  border-color: rgba(226, 232, 240, .3)
}

@media (min-width:640px) {
  .sm\:left-auto {
      left: auto
  }
  .sm\:order-1 {
      order: 1
  }
  .sm\:order-2 {
      order: 2
  }
  .sm\:col-span-2 {
      grid-column: span 2/span 2
  }
  .sm\:col-span-6 {
      grid-column: span 6/span 6
  }
  .sm\:block {
      display: block
  }
  .sm\:table-cell {
      display: table-cell
  }
  .sm\:hidden {
      display: none
  }
  .sm\:translate-y-1 {
      --tw-translate-y: 0.25rem;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }
  .sm\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr))
  }
  .sm\:items-center {
      align-items: center
  }
  .sm\:gap-8 {
      gap: 2rem
  }
  .sm\:pb-0 {
      padding-bottom: 0
  }
  .sm\:text-3xl {
      font-size: 1.875rem;
      line-height: 2.25rem
  }
  .sm\:text-5xl {
      font-size: 3rem;
      line-height: 1
  }
  .sm\:text-xl {
      font-size: 1.25rem;
      line-height: 1.75rem
  }
}

.group\/list:hover .lg\:group-hover\/list\:opacity-50{opacity:.5}

.relative {
  position: relative
}

.grid {
  display: grid
}

.gap-4 {
  gap: 1rem
}

.pb-1 {
  padding-bottom: .25rem
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

.sm\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr))
  }

.sm\:gap-8 {
      gap: 2rem
  }

.md\:gap-4 {
      gap: 1rem
  }

.lg\:hover\:\!opacity-100:hover{opacity:1!important}

.lg\:group-hover\/list\:opacity-50{opacity:.5}


.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240/var(--tw-text-opacity))
}

.hover\:text-teal-300:hover {
  --tw-text-opacity: 1;
  color: rgb(94 234 212/var(--tw-text-opacity))
}

.focus-visible\:text-teal-300:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(94 234 212/var(--tw-text-opacity))
}

.text-xs {
  font-size: .75rem;
  line-height: 1rem
}

.leading-5 {
  line-height: 1.25rem
}

.text-teal-300 {
  --tw-text-opacity: 1;
  color: rgb(94 234 212/var(--tw-text-opacity))
}

.hidden {
  display: none
}

.rounded-md {
  border-radius: .375rem
}

.lg\:-inset-x-6 {
      left: -1.5rem;
      right: -1.5rem
  }

.lg\:block {
      display: block;
  }

.group:hover .lg\:group-hover\:bg-slate-800\/50{background-color:rgba(30,41,59,.5)}
.group:hover .lg\:group-hover\:shadow-\[inset_0_1px_0_0_rgba\(148\2c 163\2c 184\2c 0\.1\)\]{--tw-shadow:inset 0 1px 0 0 rgba(148,163,184,.1);--tw-shadow-colored:inset 0 1px 0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.group:hover .lg\:group-hover\:drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}


.meta p {
  font-family: Neue Montreal, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: max(1rem, 16px);
  line-height: max(1.188rem, 19px);
  
  color: #a0b49c;
  font-size: 0.9rem;
  padding: 10px 0px;
}