@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&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&family=Raleway:ital,wght@0,100..900;1,100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
*{
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    --b: white;
    --b2: #FAFAFA;
    --p: #FF4F01;
    font-family: "Inter";
    color: #101010;
    scroll-behavior: smooth;
    transition: all .2s;
}
body {
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6{
    font-family: "Raleway";
    font-variant-numeric: lining-nums;
}

h1:hover{
    color: var(--p);
}
a:hover{
    color: var(--p);
}
nav{
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 0px 2rem;
    align-items: center;
    height: 72px;
    margin: 20px auto;
    width: 100%;
    max-width: 800px;
    background-color: var(--b2);
    border-radius: .75rem;
    position: sticky;
    top: 20px;
    right: 0;
    z-index: 5;
}
nav.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}
nav .links{
    display: flex;
    gap: 15px;
}
nav .links a{
    padding: 15px 0;
}
nav .links .s{
    padding: 15px 20px;
    background-color: var(--p);
    border-radius: .5rem;
    color: var(--b2);
}
nav .links .s:hover{
    background: #101010;
    color: var(--b2);
}
main{
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}
main .tag{
    padding: 10px;
    border-radius: .5rem;
    border: 1px solid var(--p);
}
main .tag:hover{
    background-color: var(--p);
    color: var(--b2);
    border: 1px solid #101010;
}
section .tag:hover{
    background-color: var(--p);
    color: var(--b2);
    border: 1px solid #101010;
}
main h1{
    font-size: 50px;
}
.book{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    gap: 30px;
    flex-direction: column;
    position: relative;
    z-index: 2;
}
.book .video{
    width: 500px;
    border-radius: 1rem;
    border: 2.5px solid #000;
    display: flex;
}
.book a{
    background: var(--p);
    border-radius: 10px;
    padding: 15px 15px;
    color: var(--b2);
}
.book a:hover{
    background-color: #101010;
    color: var(--b2);
}
.book .mail{
    border: 1px solid #000;
    border-radius: 15px;
    display: flex;
    padding: 7px;
    width: 500px;
}
.book .mail input{
    border: 0;
    padding: 15px 15px;
    flex: 1;
}
.book .mail input[type="submit"]{
    background: var(--p);
    border-radius: 10px;
    flex: 0;
}
.book .mail input:focus,.book .mail input:active{
    border: 0;
    outline: 0;
}
.clients{
    gap: 20px;
    align-items: center;
    text-align: center;
    padding: 50px 0;
    position: relative;
    z-index: 2;
}
.clients p{
    margin: 0 20px;
    margin-bottom: 30px;
}
.marquee {
    display: flex;
    max-width: 1000px;
    margin: auto;
    block-size: var(--marquee-item-height);
    /*margin-block: var(--marquee-item-height);*/
    position: relative;
    overflow-x: hidden;
    mask-image: linear-gradient(
        to right,
        hsl(0 0% 0% / 0),
        hsl(0 0% 0% / 1) 20%,
        hsl(0 0% 0% / 1) 80%,
        hsl(0 0% 0% / 0)
    );
}  
.marquee--8 {
    --marquee-item-width: 100px;
    --marquee-item-height: 100px;
    --marquee-duration: 30s;
    --marquee-items: 8;
    align-items: center;
}
.marquee__item {
    --marquee-item-offset: max(
      calc(var(--marquee-item-width) * var(--marquee-items)),
      calc(100% + var(--marquee-item-width))
    );
    --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
    position: absolute;
    inset-inline-start: var(--marquee-item-offset);
    transform: translateX(-50%);
    animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}  
.marquee--8 .marquee__item:nth-of-type(1) {
    --marquee-item-index: 1;
}  
.marquee--8 .marquee__item:nth-of-type(2) {
    --marquee-item-index: 2;
}  
.marquee--8 .marquee__item:nth-of-type(3) {
    --marquee-item-index: 3;
}  
.marquee--8 .marquee__item:nth-of-type(4) {
    --marquee-item-index: 4;
}  
.marquee--8 .marquee__item:nth-of-type(5) {
    --marquee-item-index: 5;
}  
.marquee--8 .marquee__item:nth-of-type(6) {
    --marquee-item-index: 6;
}  
.marquee--8 .marquee__item:nth-of-type(7) {
    --marquee-item-index: 7;
}  
.marquee--8 .marquee__item:nth-of-type(8) {
    --marquee-item-index: 8;
}
.marquee--8 .marquee__item:nth-of-type(9) {
    --marquee-item-index: 9;
}  
.marquee--8 .marquee__item:nth-of-type(10) {
    --marquee-item-index: 10;
}  
.marquee--8 .marquee__item:nth-of-type(11) {
    --marquee-item-index: 11;
}  
.marquee--8 .marquee__item:nth-of-type(12) {
    --marquee-item-index: 12;
}  
@keyframes go {
    to {  
      inset-inline-start: calc(var(--marquee-item-width) * -1);
    }
}
.reverse .marquee__item {
    animation-direction: reverse;
}

section.section{
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    background: var(--b);
    z-index: 2;
    position: relative;
}
section.section .title{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
section.section .title .tag{
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid var(--p);
}

section.feature .feature-container{
    display: flex;
    flex-direction: column;
    gap: 100px;
    max-width: 1200px;
    margin: auto;
}
section.feature .feature-container section{
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
section.feature .feature-container .img{
    min-width: 500px;
    width: 100px;
    display: flex;
    border: 1px solid var(--p);
    border-radius: 20px;
    overflow: hidden;
    background: #CCC;
}
section.feature .feature-container .con{
    display: flex;
    flex-direction: column;
    gap: 25px;
    justify-content: space-evenly;
}
section.feature .feature-container .con .head{
    display: flex;
    gap: 15px;
    flex-direction: column;
}
section.feature .feature-container .con ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

section.feature .feature-container .con ul li {
    position: relative;
    padding-left: 10px;
}

section.feature .feature-container .con:hover h1{
    color: var(--p);
    transition: .2s all;
}
section.feature .feature-container .con h1{
    font-size: 52px;
}

section.feature .feature-container section:nth-child(even){
    flex-direction: row-reverse;
}

/* Initial state */
.feature-container section .img {
    opacity: 0;
    transition: all 0.8s ease-out;
}

/* Slide in from left for even sections */
.feature-container section.even .img {
    transform: translateX(-100px);
}
.feature-container section.even.reveal .img {
    transform: translateX(0);
    opacity: 1;
}

/* Slide in from right for odd sections */
.feature-container section.odd .img {
    transform: translateX(100px);
}
.feature-container section.odd.reveal .img {
    transform: translateX(0);
    opacity: 1;
}

/* Optional fade-up for text */
.feature-container section .con {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}
.feature-container section.reveal .con {
    transform: translateY(0);
    opacity: 1;
}

section.tech-stack .tech-stack-container .marquee--8{
    --marquee-item-width: 200px;
    --marquee-item-height: 50px;
    --marquee-duration: 40s;
    --marquee-items: 9;
}
section.tech-stack .tech-stack-container .marquee--8 img{
    object-fit: contain;
    height: 50px;
}
section.video-testimonials{
    padding: 50px 0;
}
section.video-testimonials .video-testimonials-container{
    display: flex;
    overflow: hidden;
}
section.video-testimonials .video-testimonials-container .video{
    border-radius: 30px;
    /*aspect-ratio: 16 / 9;*/
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
section.video-testimonials .video-testimonials-container .video iframe{
    width: 60%;
    margin: auto;
    min-width: 500px;
    max-width: 1000px;
    border: 1px solid var(--p);
    border-radius: 30px;
    aspect-ratio: 16/9;
}
.video-testimonials-wrapper{
    position: relative;
}
.video-testimonials-wrapper .left{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    transform: translateX(-50%);
    top: calc(50% - 25px);
    background: #101010;
    width: 50px;
    height: 50px;
    left: calc(20% - 50px);
    border: 1px solid #101010;
}
.video-testimonials-wrapper .right{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    transform: translateX(-50%);
    top: calc(50% - 25px);
    background: #101010;
    width: 50px;
    height: 50px;
    border: 1px solid #101010;
    right: calc(20% - 100px);
}
.video-testimonials-wrapper .right:hover{
    background: var(--b2);
}
.video-testimonials-wrapper .left:hover{
    background: var(--b2);
}
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

section.how-it-works .how-it-works-container{
    display: flex;
    gap: 30px;
    padding: 0 50px;
}

section.how-it-works .how-it-works-container .works{
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-radius: 20px;
    padding: 30px;
    cursor: pointer;
    border: 1px solid var(--p);
}
section.how-it-works .how-it-works-container .works:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--p);
}
section.how-it-works .how-it-works-container .works:hover h2{
    color: var(--p);
}
section.how-it-works .how-it-works-container .works img{
    filter: hue-rotate(180deg) saturate(150%);
}
/* Initial hidden state */
.how-it-works .works {
    opacity: 0;
    transition: opacity 0.8s ease-in;
}

/* When revealed */
.how-it-works .works.reveal {
    opacity: 1;
}


section.hire {
    background: #ecedf1;
    padding: 100px 20px;
}

.hire .title {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

.hire .title.reveal {
    opacity: 1;
    transform: translateY(0);
}


section.book-calls .book-calls-container .marquee--8{
    --marquee-item-width: 200px;
    --marquee-item-height: 50px;
    --marquee-duration: 40s;
    max-width: 1200px;
}

section.written-testimonials .written-testimonials-container{
    display: flex;
    gap: 30px;
}

section.written-testimonials .written-testimonials-container .testimonial{
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid var(--p);
    border-radius: 20px;
    gap: 20px;
    width: 440px;
    transition: all .5s;
}
section.written-testimonials .written-testimonials-container .testimonial:hover{
    background: #101010;
}
section.written-testimonials .written-testimonials-container .testimonial:hover p{
    color: var(--b2);
}
section.written-testimonials {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    background: #fff;
}
.written-testimonials-container {
    display: flex;
    gap: 30px;
    white-space: nowrap;
    animation: scroll 15s linear infinite;
}
.written-testimonials-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}
  
.written-testimonials-container {
    display: flex;
    gap: 30px;
    position: relative;
    will-change: transform;
}

.testimonial {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid var(--p);
    border-radius: 20px;
    gap: 20px;
    width: 400px;
    text-wrap: wrap;
    flex-shrink: 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
  
section.written-testimonials .written-testimonials-container .testimonial .author{
    text-align: right;
}
section.written-testimonials .written-testimonials-container .testimonial .position{
    text-align: right;
}

section.plans .plans-container{
    display: flex;
    gap: 30px;
    padding: 0 50px;
    justify-content: center;
}

section.plans .plans-container .plan{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 40px;
    border-radius: 30px;
    border: 1px solid var(--p);
}
section.plans .plans-container .plan .amount{
    font-size: 40px;
    font-family: "Raleway";
    font-weight: bold;
}
section.plans .plans-container .plan .con{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
section.plans .plans-container .plan .con p{
    display: flex;
}
section.plans .plans-container .plan .con p svg{
    width: 24px;
    height: 24px;
}

section .campaign-results-container .marquee--8{
    --marquee-item-width: 500px;
    --marquee-item-height: 165px;
    --marquee-duration: 50s;
    --marquee-items: 9;
    max-width: unset;
    overflow: hidden;
}

section.newsletters .newsletters-container{
    display: flex;
    justify-content: center;
    padding: 0 50px;
}
section .campaign-results-container img{
    border: 10px solid #DDD;
    border-radius: 20px;
}
section.newsletters .newsletters-container .card{
    padding: 50px 50px;
    border-radius: 30px;
    border: 1px solid var(--p);
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 1000px;
    padding-right: 100px;
}

section.newsletters .newsletters-container .card .content{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;   
}

section.newsletters .newsletters-container .card .content .input{
    display: flex;
    gap: 20px;
}
section.newsletters .newsletters-container .card .content .input input{
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #101010;
}
section.newsletters .newsletters-container .card .content .input input[type="submit"]{
    background: var(--p);
    color: var(--b2);
}

section.newsletters .newsletters-container .card .book-container {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}
  
@keyframes initAnimation {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-30deg);
    }
}
  
section.newsletters .newsletters-container .card .book {
    width: 200px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-30deg);
    transition: 1s ease;
    animation: 1s ease 0s 1 initAnimation;
}
  
section.newsletters .newsletters-container .card .book-container:hover .book, 
section.newsletters .newsletters-container .card .book-container:focus .book {
    transform: rotateY(0deg);
  }
  
  section.newsletters .newsletters-container .card .book > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
    width: 200px;
    height: 300px;
    transform: translateZ(15px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: 5px 5px 20px #666;
  }
  
  section.newsletters .newsletters-container .card .book::before {
    position: absolute;
    content: ' ';
    background-color: blue;
    left: 0;
    top: 1px;
    width: 28px;
    height: 298px;
    transform: translateX(184px) rotateY(90deg);
    background: linear-gradient(90deg, 
      #fff 0%,
      #f9f9f9 5%,
      #fff 10%,
      #f9f9f9 15%,
      #fff 20%,
      #f9f9f9 25%,
      #fff 30%,
      #f9f9f9 35%,
      #fff 40%,
      #f9f9f9 45%,
      #fff 50%,
      #f9f9f9 55%,
      #fff 60%,
      #f9f9f9 65%,
      #fff 70%,
      #f9f9f9 75%,
      #fff 80%,
      #f9f9f9 85%,
      #fff 90%,
      #f9f9f9 95%,
      #fff 100%
      );
}
  
section.newsletters .newsletters-container .card .book::after {
    position: absolute;
    top: 0;
    left: 0;
    content: ' ';
    width: 200px;
    height: 300px;
    transform: translateZ(-15px);
    background-color: #01060f;
    border-radius: 0 2px 2px 0;
    box-shadow: -10px 0 50px 10px #666;
}

section.newsletters .newsletters-container .card {
    transition: all 0.3s ease;
}

section.newsletters .newsletters-container .card:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--p);
}
section.newsletters .newsletters-container .card .content .input input[type="submit"]:hover {
    background: #101010;
    color: var(--b2);
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
section.newsletters .newsletters-container .card:hover .book {
    transform: rotateY(-15deg) rotateX(8deg) translateZ(40px);
    box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.4);
}

section.clients-2 .clients-2-container .marquee--8{
    --marquee-item-width: 250px;
    --marquee-item-height: 100px;
    --marquee-duration: 50s;
    --marquee-items: 12;
}
section.written-testimonials .written-testimonials-container .marquee--8{
    --marquee-item-width: 300px;
    --marquee-item-height: 200px;
    --marquee-duration: 50s;
    --marquee-items: 5;
}
section.clients-2 .clients-2-container .marquee--8 img{
    object-fit: contain;
}

.clients .clients-container .marquee--8{
    --marquee-item-width: 250px;
    --marquee-item-height: 100px;
    --marquee-duration: 50s;
    --marquee-items: 12;
}
.clients .clients-container .marquee--8 img{
    object-fit: contain;
}

section.hire .title{
    gap: 40px;
}

section.hire .title a{
    padding: 10px 15px;
    background: var(--p);
    border-radius: 10px;
    color: var(--b2);
}
section.hire .title a:hover{
    background: #101010;
    color: var(--b2);
}

section.faq .faq-container{
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 100px;
}
section.faq .faq-container .card{
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
    border-radius: 20px;
    border: 1px solid var(--p);
    cursor: pointer;
}
section.faq .faq-container .card:hover{
    border: 1px solid #101010;
}
section.faq .faq-container .card:hover .question p{
    color: var(--p);
}
section.faq .faq-container .card .question{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}
section.faq .faq-container .card .question svg{
    min-width: 24px;
}
.faq-container .card .answer {
    display: none;
    line-height: 150%;
    text-align: justify;
    transition: all 0.3s ease-in-out;
}

section.book{
    gap: 50px;
    background: var(--b2);
}
section.book h1{
    font-size: 50px;
}
section.book a{
    padding: 10px 15px;
    background: var(--p);
    border-radius: 10px;
    color: var(--b2);
}
section.book a:hover{
    background: #101010;
    color: var(--b2);
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

section.book h1 {
    font-size: 50px;
    animation: pulse 2s infinite ease-in-out;
}

footer{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
footer .top{
    display: flex;
    gap: 30px;
    padding: 50px;
    justify-content: space-between;
}
footer .top .left{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
}
footer .top .left input{
    padding: 15px 20px;
    border: 1px solid #101010;
    border-radius: 10px;
    max-width: 350px;
}
footer .top .left input[type="submit"]{
    background: var(--p);
    color: var(--b2);
    width: min-content;
}
footer .top .left input[type="submit"]:hover{
    background: #101010;
    color: var(--b2);
}
footer .top .right{
    display: flex;
    gap: 100px;
}
footer .top .right section{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
footer .top .right p{
    margin-bottom: 10px;
}
footer .top .right .icons a{
    display: flex;
    align-items: center;
    gap: 10px;
}
footer .top .right .icons a img{
    width: 20px;
    height: 20px;
}

footer .bottom{
    padding: 0 50px 50px 50px;
    display: flex;
    justify-content: space-between;
}

.book.section {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 100px 0;
}

.marquee--6 {
    display: flex;
    block-size: var(--marquee-item-height);
    position: relative;
    overflow-x: hidden;
    mask-image: linear-gradient(
        to right,
        hsl(0 0% 0% / 0),
        hsl(0 0% 0% / 1) 20%,
        hsl(0 0% 0% / 1) 80%,
        hsl(0 0% 0% / 0)
    );
    --marquee-item-width: 400px;
    --marquee-item-height: 262px;
    --marquee-duration: 30s;
    --marquee-items: 6;
}  
.marquee--6 .marquee__item {
    --marquee-item-offset: max(
      calc(var(--marquee-item-width) * var(--marquee-items)),
      calc(100% + var(--marquee-item-width))
    );
    --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
    position: absolute;
    height: 262px;
    inset-inline-start: var(--marquee-item-offset);
    transform: translateX(-50%);
    animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}  
.marquee--6 .marquee__item:nth-of-type(1) {
    --marquee-item-index: 1;
}  
.marquee--6 .marquee__item:nth-of-type(2) {
    --marquee-item-index: 2;
}  
.marquee--6 .marquee__item:nth-of-type(3) {
    --marquee-item-index: 3;
}  
.marquee--6 .marquee__item:nth-of-type(4) {
    --marquee-item-index: 4;
}  
.marquee--6 .marquee__item:nth-of-type(5) {
    --marquee-item-index: 5;
}  
.marquee--6 .marquee__item:nth-of-type(6) {
    --marquee-item-index: 6;
}  

@keyframes go {
    to {  
      inset-inline-start: calc(var(--marquee-item-width) * -1);
    }
}

.case-study-container{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 0 50px;
}
.case-study-container .card{
    display: flex;
    flex-direction: column;
    width: calc(50% - 20px);
    border: 1px solid var(--p);
    border-radius: 30px;
    overflow: hidden;
    background: var(--b2);
}
.case-study-container .card .img{
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.case-study-container .card .img {
    background: 
        url('case-study-bg/Crayond\ \(1\).jpg') center / cover no-repeat,
        url('case-study-bg/Tevatel.webp') center / contain no-repeat;
}

.case-study-container .con {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 90%;
    border-radius: 30px 30px 0 0;
    margin: auto;
    background: var(--b);
    align-items: center;
    box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.2),
    0 12px 30px rgba(0, 0, 0, 0.15);
}
.case-study-container .con .logo{
    height: 50px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;    
}
.case-study-container .con span{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-around;
    text-align: center;
}
.case-study-container .con a{
    display: flex;
    padding: 15px 20px;
    background: var(--b2);
    border: 1px solid var(--p);
    border-radius: 50px;
}
.case-study-container .con a:hover{
    background: #101010;
    color: var(--b2);
}
.case-study .button{
    display: flex;
    justify-content: end;
    padding-right: 50px;
}
.case-study .button a{
    display: flex;
    padding: 15px 20px;
    background: #101010;
    border: 1px solid var(--p);
    border-radius: 50px;
    color: var(--b2);
}
.case-study .button a:hover{
    color: var(--p);
    background-color: var(--b2);
}

.case-study-container .con {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* When revealed */
.case-study-container .card.reveal .con {
    opacity: 1;
    transform: translateY(0);
}

.case-study-container .card {
    position: relative;
    overflow: hidden;
}

.case-study-container .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--ambient-image);
    background-size: cover;
    background-position: center;
    filter: blur(5px);
    z-index: 0;
    opacity: 0.5;
    transition: opacity 0.8s ease;
}

.case-study-container .card.reveal::before {
    opacity: 1;
}
.case-study-container .card .img,
.case-study-container .card .con {
    position: relative;
    z-index: 1;
}

.pattern-sides {
    position: relative;
    background: white;
    overflow: hidden;
    z-index: 2;
}

.particles-side {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20%;
    z-index: 3;
}

#particles-left {
    left: 0;
}

#particles-right {
    right: 0;
}

.pattern-sides main, .particles-side .book {
    position: relative;
    z-index: 4;
    background: transparent;
}



footer a{
    text-wrap: nowrap;
}