:root {
     --white: #FFF;
     --black: #000;
     --bg: #10110F;
     --red: #D62A1E;

     --primary: #121212;
     --secondary-orange: #FF6D1E;
     --secondary-red: #D62A1E;
     --secondary-yellow: #FBC02D;
     --secondary-tiffanyBlue: #0ABBB5;
     --secondary-blue: #7E7EF6;
     --secondary-dark: #09080D;
     --secondary-dark-blue: #151530;

     --gray-900: #1F1F25;
     --gray-800: #33333D;
     --gray-700: #5F616D;
     --gray-600: #868793;
     --gray-500: #979AA3;
     --gray-400: #B6B7BE;
     --gray-300: #D9DBE0;
     --gray-200: #E7E9EB;
     --gray-150: #F1F3F8;
     --gray-100: #F7F7F8;
     --gray-50: #efeff0;


     --filter-white: invert(97%) sepia(97%) saturate(2%) hue-rotate(82deg) brightness(103%) contrast(100%);
     --filter-black: invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(97%) contrast(103%);

     --filter-gray-900: invert(8%) sepia(7%) saturate(1453%) hue-rotate(202deg) brightness(96%) contrast(102%);
     --filter-gray-800: invert(14%) sepia(4%) saturate(1430%) hue-rotate(202deg) brightness(93%) contrast(100%);
     --filter-gray-700: invert(32%) sepia(4%) saturate(606%) hue-rotate(202deg) brightness(91%) contrast(89%);
     --filter-gray-600: invert(50%) sepia(4%) saturate(360%) hue-rotate(202deg) brightness(90%) contrast(85%);
     --filter-gray-500: invert(57%) sepia(4%) saturate(311%) hue-rotate(202deg) brightness(92%) contrast(85%);
     --filter-gray-400: invert(70%) sepia(4%) saturate(228%) hue-rotate(202deg) brightness(95%) contrast(85%);
     --filter-gray-300: invert(85%) sepia(2%) saturate(170%) hue-rotate(202deg) brightness(98%) contrast(85%);
     --filter-gray-200: invert(91%) sepia(2%) saturate(100%) hue-rotate(202deg) brightness(100%) contrast(85%);
     --filter-gray-150: invert(95%) sepia(1%) saturate(50%) hue-rotate(202deg) brightness(101%) contrast(85%);
     --filter-gray-100: invert(97%) sepia(0%) saturate(0%) hue-rotate(202deg) brightness(102%) contrast(85%);
     --filter-gray-50: invert(94%) sepia(1%) saturate(57%) hue-rotate(202deg) brightness(102%) contrast(85%);
     --rgb-white: 255, 255, 255;
     --rgb-black: 0, 0, 0;
 }

 .plr-0 {
     padding-left: 0 !important;
     padding-right: 0 !important;
 }


 @import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');

 /* RESET */

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     outline: none;
 }

 html,
 body {
     width: 100%;
 }

 html {
     height: 100%;
     min-height: 100vh;
     overflow-y: scroll;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     margin: 0;

 }

 body {
     font-family: 'Archivo', sans-serif;
     text-transform: capitalize;
     font-size: 15px;
     font-weight: 400;
     background: var(--white);
     color: var(--gray-900);
     line-height: 1.3;
     letter-spacing: -0.5px;
     padding: 0;
     margin: 0;
     height: 100%;
     min-height: 100vh;
     -webkit-overflow-scrolling: touch;
 }

 a {
     text-decoration: none;
     background-color: transparent;
     vertical-align: middle;
     -webkit-text-decoration-skip: objects;
     color: inherit;
     word-break: break-word;
     cursor: pointer;
 }


 /* container */
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding-left: 16px;
     padding-right: 16px;
 }


 .com-title {
     &.center {
         text-align: center !important
     }

     &.left {
         text-align: left !important;
     }

     h2 {
         font-size: clamp(22px, 3.938vw + 9.400px, 85px);
         font-family: "Tinos", serif;
         font-weight: 600;
         margin-bottom: clamp(10px, 1.250vw + 6.000px, 30px);
         color: #1a0b2e;
         letter-spacing: -1px;
     }

     p {
         font-size: clamp(16px, 0.563vw + 14.200px, 25px);
         color: #555555;
         line-height: 1.3;
     }
 }

 @media all and (max-width: 1024px) {
     .com-title {
         text-align: center;
     }
 }



 /* ---------------------------
   HEADER
   --------------------------- */
 .main-header {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;
     background: rgba(0, 0, 0, 0.85);
     padding: 26px 0;
     width: 100%;

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

     .logo {
         font-size: clamp(20px, 0.625vw + 18.000px, 30px);
         font-weight: 700;
         color: var(--white);
         letter-spacing: 1px;
         font-family: "Tinos", serif;
     }

     nav {
         ul {
             display: flex;
             gap: clamp(12px, 1.750vw + 6.400px, 40px);
             align-items: center;
         }

         a {
             color: var(--white);
             font-weight: 500;
             font-size: clamp(15px, 0.188vw + 14.400px, 18px);
             transition: color 0.25s ease;

             &:hover {
                 color: #00bcd4;
             }
         }
     }
 }

 @media all and (max-width: 768px) {

     .main-header {
         padding: 10px 0;

         .container {
             flex-direction: column;

             .logo {
                 padding-bottom: 6px;
             }
         }
     }
 }



 /* ---------------------------
   HERO
   --------------------------- */
 .hero {
     position: relative;
     padding: 160px 16px;
     background: url('./images/19.png') no-repeat center/cover;
     color: #fff;
     overflow: hidden;


     &::before {
         content: "";
         position: absolute;
         top: -50%;
         right: -20%;
         width: 80%;
         height: 200%;
         background: radial-gradient(circle, rgba(124, 77, 255, 0.15) 0%, transparent 60%);
         transform: rotate(-15deg);
         pointer-events: none;
     }

     .container {
         display: flex;
         gap: 40px;
         align-items: center;
         padding-top: 80px;
     }

     .hero-content {
         flex: 1;

         h1 {
             font-size: clamp(30px, 2.500vw + 22.000px, 70px);
             font-weight: 300;
             line-height: 1.1;
             margin-bottom: 20px;
             color: #ffffff;

             .highlight {
                 display: block;
                 font-weight: 700;
                 margin-top: 10px;
             }
         }
     }
 }


 @media all and (max-width: 768px) {
     .hero {
         padding: 110px 0 30px;

         .container {
             padding: 16px;
         }
     }

     .hero-visual {
         min-height: 200px;
     }
 }


 /* ---------------------------
   ABOUT
   --------------------------- */
 .about {
     background: #ffffff;
     padding: 80px 0;

     .about-grid {
         display: flex;
         align-items: flex-start;
         gap: 80px;
     }

     .about-images {
         display: flex;
         flex-direction: column;
         gap: 20px;

         .img-wrapper {
             width: 500px;
             height: 350px;
             border-radius: 15px;
             overflow: hidden;
             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);

             img {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
                 display: block;
             }
         }

         .img-1 {}

         .img-2 {}
     }

 }

 @media all and (max-width: 1024px) {

     .about {
         padding: 30px 0;

         .about-grid {
             flex-direction: column;
             gap: 35px;
         }

         .about-images {
             flex-direction: row;
             gap: 20px;
             width: 100%;

             .img-wrapper {
                 flex: 1;
                 width: auto;
                 height: 200px;
                 border-radius: 8px;
                 box-shadow: 0 6px 10px rgba(0, 0, 0, 0.10);

             }
         }
     }
 }



 /* ---------------------------
   BANNER STRIP
   --------------------------- */
 .banner-strip {
     background: #1a0b2e;
     color: #ffffff;
     padding: 0;


     .banner-split {
         display: flex;

     }

     .banner-text {
         flex: 1;
         display: flex;
         align-items: center;
         justify-content: center;


         h2 {
             font-size: clamp(22px, 2.375vw + 14.400px, 60px);
             font-weight: 300;
             line-height: 1.2;
         }
     }

     .banner-image {
         flex: 1;
         background-size: cover;
         background-position: center;
         min-height: 600px;
     }
 }

 @media all and (max-width: 768px) {
     .banner-strip {
         padding: 16px 0;

         .banner-split {
             flex-direction: column;
             gap: 20px;
         }

         .banner-text {

             h2 {
                 text-align: center;
                 line-height: 1.1;

             }
         }

         .banner-image {
             min-height: 300px;
         }
     }
 }



 /* ---------------------------
   SERVICES
   --------------------------- */
 .services {
     background: var(--white);
     padding: 100px 0;

     h2 {
         margin-bottom: 60px;
     }

     .services-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 26px;
     }

     .service-card {
         background: transparent;
         text-align: left;
         padding: 0;

         .service-img {
             width: 100%;
             height: 250px;
             background-size: cover;
             background-position: center;
             margin-bottom: 20px;
         }

         h3 {
             font-size: clamp(13px, 0.313vw + 12.000px, 18px);
             font-weight: 500;
             text-transform: uppercase;

             color: #555555;
             line-height: 1.3;
         }
     }
 }

 @media all and (max-width: 768px) {
     .services {

         padding: 30px 0;

         h2 {
             margin-bottom: 30px;
         }

         .services-grid {
             gap: 8px;
         }

         .service-card {
             background: transparent;
             text-align: left;
             padding: 0;

             .service-img {
                 height: 150px;
                 margin-bottom: 10px;
             }

         }
     }
 }



 /* ---------------------------
   PORTFOLIO GRID LAYOUT
   --------------------------- */
 .portfolio {
     background: var(--gray-100);

     .portfolio-grid-layout {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 0;
         width: 100%;
     }

     .pf-grid-item {
         min-height: 600px;
         position: relative;
         overflow: hidden;
     }

     /* Cell 1: Collage */
     .pf-collage {
         display: flex;
         flex-direction: column;
         gap: 20px;

         background: #ffffff;

         .collage-top {
             flex: 1.5;
             background-size: cover;
             background-position: center;
             border-radius: 0;
             min-height: 360px;
         }

         .collage-bottom {
             flex: 1;
             display: flex;
             gap: 20px;

             .collage-img {
                 flex: 1;
                 background-size: cover;
                 background-position: center;
                 min-height: 200px;
             }
         }
     }

     /* Cell 2: Title Block */
     .pf-title-block {
         background: #2d1b4e;
         display: flex;
         align-items: center;
         justify-content: end;
         padding: clamp(16px, 1.500vw + 11.200px, 40px);

         h2 {
             display: flex;
             font-size: clamp(22px, 3.938vw + 9.400px, 85px);
             color: var(--white);
             text-align: right;
             font-family: "Tinos", serif;
             font-weight: 400;
             line-height: 1;
             border-bottom: 2px solid var(--white);
             padding-bottom: 20px;

         }
     }

     /* Cell 3: Bumble Branding */
     .pf-bumble-brand {
         background: #f5f0eb;
         padding: 60px;
         display: flex;
         flex-direction: column;
         justify-content: center;

         .bumble-content {
             h3 {
                 font-size: clamp(22px, 3.938vw + 9.400px, 85px);
                 font-family: "Tinos", serif;
                 color: #1a0b2e;
                 line-height: 0.9;
                 margin-bottom: 40px;
             }

             .bumble-images {
                 display: flex;
                 gap: 20px;
                 margin-bottom: 40px;

                 .b-img-1,
                 .b-img-2 {
                     width: 180px;
                     height: 200px;
                     background-size: cover;
                     background-position: center;
                     border-radius: 10px;
                     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                 }

                 .b-img-2 {
                     margin-top: 30px;
                     background-color: #ff80ab;
                 }
             }

             p {
                 font-size: 1rem;
                 color: #666666;
                 line-height: 1.5;
             }
         }
     }

     /* Cell 4: Bumble App (image-only) */
     .pf-bumble-app {
         background: #121212;
         color: #ffffff;
         padding: 60px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         background-size: cover;
         background-position: center;
     }
 }

 @media all and (max-width: 1024px) {

     .portfolio {
         .portfolio-grid-layout {
             display: flex;
             flex-direction: column;
         }

         .pf-grid-item {
             min-height: 250px;
         }

         /* Cell 1: Collage */
         .pf-collage {
             gap: 10px;

             .collage-top {

                 min-height: 360px;
             }

             .collage-bottom {

                 gap: 10px;

                 .collage-img {
                     flex: 1;
                     background-size: cover;
                     background-position: center;
                     min-height: 200px;
                 }
             }
         }

         /* Cell 2: Title Block */
         .pf-title-block {

             justify-content: center;

             h2 {
                 text-align: center;
                 padding-bottom: 20px;
             }
         }

         /* Cell 3: Bumble Branding */
         .pf-bumble-brand {
             padding: 30px 16px;
             align-items: center;

             .bumble-content {
                 h3 {
                     text-align: center;
                     margin-bottom: 20px;
                 }

                 .bumble-images {
                     display: flex;
                     gap: 10px;
                     margin-bottom: 20px;

                     .b-img-1,
                     .b-img-2 {
                         width: 180px;
                         height: 200px;
                         border-radius: 6px;
                         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                     }
                 }

                 p {
                     text-align: center;
                 }
             }
         }

         /* Cell 4: Bumble App (image-only) */
         .pf-bumble-app {
             background: #121212;
             color: #ffffff;
             padding: 60px;
             display: flex;
             flex-direction: column;
             justify-content: center;

         }
     }
 }




 /* ---------------------------
   FACE-CAM SECTION
   --------------------------- */
 .face-cam-section {

     background: #ffffff;
     /* min-height: 500px; */
     padding: 80px 0;

     .fc-wrapper {
         position: relative;
         display: flex;
         gap: 40px;
         align-items: center;
         /* min-height: 500px; */
     }

     .fc-images {
         flex: 1;
         display: flex;
         gap: 20px;

         .fc-single-img {
             min-width: 650px;
             min-height: 700px;
             background-size: cover;
             background-position: center;
         }
     }

     .fc-content {
         position: absolute;
         top: 0;
         right: 0;
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-end;
         text-align: left;

         h2 {
             font-size: clamp(22px, 3.938vw + 9.400px, 85px);
             font-family: 'Tinos';
             color: #1a0b2e;
             margin-bottom: 20px;
             line-height: 1;
             text-align: right;
         }

         .fc-divider {
             width: 100px;
             height: 2px;
             background: #1a0b2e;
             margin-bottom: 20px;
         }

         p {
             color: #666666;
         }
     }
 }

 @media all and (max-width: 768px) {
     .face-cam-section {
         padding: 30px 0;

         .fc-wrapper {
             gap: 40px;
         }

         .fc-images {
             flex: 1;

             gap: 20px;

             .fc-single-img {
                 min-width: 100%;
                 min-height: 500px;
                 background-size: cover;
                 background-position: center;
             }
         }

         .fc-content {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             background: rgb(var(--rgb-white), 60%);
             align-items: center;
             text-align: center;
             width: fit-content;
             padding: 16px;

             h2 {
                 margin-bottom: 20px;
                 line-height: 1;
                 text-align: right;
             }

             .fc-divider {
                 all: unset;
             }

             p {
                 text-align: center;
                 display: flex;
                 justify-content: center;
                 width: fit-content;

             }
         }
     }
 }


 /* ---------------------------
   CELEBBOX SECTION
   --------------------------- */
 .celebbox-section {
     background: #f5e6d3;
     padding: 100px 0;

     .cb-wrapper {
         display: flex;
         gap: 40px;
         align-items: center;
         min-height: 500px;
     }

     .cb-content {}

     .cb-visuals {
         flex: 1;
         position: relative;
         background: #000000;
         overflow: hidden;
         padding: 0;

         .cb-single-img {
             width: 100%;
             height: 100%;
             background-size: cover;
             background-position: center;
             min-height: 500px;
         }
     }
 }


 @media all and (max-width: 1024px) {

     .celebbox-section {
         padding: 30px 0;

         .cb-wrapper {
             flex-direction: column;
             gap: 16px;
             align-items: center;
             min-height: 500px;
         }

         .cb-visuals {
             width: 100%;

             .cb-single-img {
                 min-height: 300px;
             }
         }
     }
 }


 /* ---------------------------
   TIKTOK AGENCY SECTION
   --------------------------- */
 .tiktok-section {
     background: #1a0b2e;
     color: #ffffff;
     min-height: 500px;
     padding: 100px 0;

     .tt-wrapper {
         display: flex;
         gap: 40px;
         align-items: center;
         min-height: 500px;
     }

     .tt-visual {
         flex: 1;

         .neon-room {
             width: 100%;
             height: 100%;
             min-height: 500px;
             background-size: cover;
             background-position: center;
             box-shadow: 0 0 50px rgba(0, 255, 255, 0.2);
         }
     }

     .tt-content {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-end;
         text-align: right;

         h2 {
             font-size: clamp(22px, 3.938vw + 9.400px, 85px);
             font-family: "Tinos", serif;
             line-height: 1;
             margin-bottom: 10px;
         }

         .upcoming-text {
             font-size: clamp(16px, 0.250vw + 15.200px, 20px);
             color: #555555;
             color: rgba(255, 255, 255, 0.85);
             letter-spacing: 1px;
         }
     }
 }


 @media all and (max-width: 1024px) {

     .tiktok-section {
         min-height: 500px;
         padding: 30px 0;

         .tt-wrapper {
             flex-direction: column;
             gap: 20px;
             min-height: 500px;
         }

         .tt-visual {
             width: 100%;

             .neon-room {
                 min-height: 500px;
             }
         }

         .tt-content {
             align-items: center;

         }
     }
 }


 /* ---------------------------
   PARTNERS
   --------------------------- */
 .partners {
     padding: 100px 0;

     .partners-split {
         display: flex;
         flex-direction: column;
         gap: 80px;
     }


     .partners-wrap {
         display: flex;
         justify-content: center;
         gap: clamp(10px, 4.375vw + -4.000px, 80px);
         /* background: rgba(26, 11, 46, .8); */
         flex: 1;
     }

     .partners-logos {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: clamp(12px, 0.500vw + 10.400px, 20px);

         .partner-logo {
             width: clamp(130px, 8.125vw + 104.000px, 260px);
             height: clamp(130px, 8.125vw + 104.000px, 260px);
             border-radius: 100%;
             background: var(--gray-150);
             display: flex;
             justify-content: center;
             align-items: center;

             .logo {
                 width: clamp(60px, 3.750vw + 48.000px, 120px);
                 height: clamp(60px, 3.750vw + 48.000px, 120px);
                 object-fit: contain;
             }
         }

         .partner-name {
             font-size: clamp(15px, 0.563vw + 13.200px, 24px);
             ;
         }
     }
 }

 @media all and (max-width: 768px) {
     .partners {
         padding: 30px 0;

         .partners-split {
             gap: 20px;
         }

         .partners-wrap {}


     }
 }



 /* ---------------------------
   CONTACT
   --------------------------- */
 .contact {
     background: #f9f9f9;
     padding: 100px 0;
     color: #1a0b2e;

     .contact-wrapper {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 80px;
         align-items: center;
     }

     .contact-logo {
         text-align: center;

         .logo {
             width: 350px;
             height: 350px;
             object-fit: contain;
         }
     }

     .contact-info {

         .info-item {
             margin-bottom: clamp(16px, 0.875vw + 13.200px, 30px);

             h4 {
                 font-size: clamp(16px, 0.125vw + 15.600px, 18px);
                 font-weight: 700;
                 letter-spacing: 1px;
             }

             p {
                 font-size: clamp(14px, 0.063vw + 13.800px, 15px);
                 color: var(--gray-700);
                 line-height: 1.6;
             }
         }
     }
 }


 @media all and (max-width: 768px) {

     .contact {
         padding: 30px 0;

         .contact-wrapper {
             display: flex;
             flex-direction: column;
             gap: 20px;
             align-items: center;
         }

         .contact-logo {
             text-align: center;

             .logo {
                 width: 200px;
                 height: 200px;
             }
         }

         .contact-info {}
     }

 }



 /* ---------------------------
   FOOTER
   --------------------------- */
 .main-footer {
     background: linear-gradient(to right, #000000, #2a1b3d);
     color: var(--white);
     padding: clamp(20px, 1.250vw + 16.000px, 40px) 0;
     text-align: center;

     h2 {
         font-size: clamp(20px, 1.000vw + 16.800px, 36px);
         font-family: "Tinos", serif;
         margin-bottom: clamp(10px, 0.625vw + 8.000px, 20px);
         font-weight: 400;
     }

     p {
         font-size: 15px;
         opacity: 0.9;
     }

     .copyright {
         margin-top: clamp(16px, 0.875vw + 13.200px, 30px);
         padding-top: clamp(16px, 0.875vw + 13.200px, 30px);
         font-size: 13px;
         opacity: 0.6;
         border-top: 1px solid rgba(255, 255, 255, 0.1);

     }
 }