* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     text-decoration: none
 }

 body {
     overflow-x: hidden;
     background: #fff;
     scroll-behavior: smooth
 }


 ::-webkit-scrollbar {
     width: 10px
 }

 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     background: #1d1d1f;
     border: 1px solid #fff
 }

 ::-webkit-scrollbar-track {
     background-color: #ebebeb;
     -webkit-border-radius: 10px;
     border-radius: 10px
 }

 a {
     text-decoration: none !important;
 }

 .luxury-regular {
     font-family: 'DM Sans', sans-serif
 }

 .manifest-regular {
     font-family: Poppins, sans-serif
 }

 header {
     font-family: 'Poppins', sans-serif
 }

 p {
     font-family: 'Poppins', sans-serif;
     color: var(--text-muted);
 }

 .heading-a {
     color: var(--navy1);
 }

 .para-a {
     color: var(--text-muted);
 }

 .para-a-white {
     color: var(--white);
 }

 /* =====================
       CSS VARIABLES
    ===================== */
 :root {
     --navy1: #080e23;
     --navy2: #0d1a2e;
     --navy3: #1e303e;
     --accent: #4fc3f7;
     --white: #ffffff;
     --white40: rgba(255, 255, 255, 0.4);
     --white50: rgba(255, 255, 255, 0.5);
     --green: #00e676;
     --bg-light: #F9F9F9;
     --text-dark: #1D1D1F;
     --text-muted: #4a4a4a;
 }

 /* =====================
       POPUP STYLES
    ===================== */
 .section-wrap {
     display: none;
     position: fixed;
     top: 55%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 9999;
     width: 100%;
     max-width: 660px;
     padding: 0 15px;
 }

 @media (max-width: 1600px) {
     .section-wrap {
         top: 60% !important;
     }

     .live-pill {
         font-size: 14px !important;
     }

     .popup-hl {
         font-size: 30px !important;
     }

     .popup-para {
         font-size: 13px !important;
     }

     .popup-btn {
         padding: 10px !important;
         font-size: 15px !important;
         color: #ffffff !important;
         font-weight: 700;
         border-radius: 14px;
     }
 }

 @media (max-width: 1300px) {
     .section-wrap {
         top: 55% !important;
         height: 400px;
     }

     .popup-body {
         padding: 20px !important;
     }

     .live-pill {
         font-size: 14px !important;
     }

     .popup-hl {
         font-size: 28px !important;
     }

     .popup-para {
         font-size: 13px !important;
     }
 }

 @media (max-width: 700px) {
     .section-wrap {
         top: 40% !important;
         height: 400px;
     }
 }

 .popup-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     z-index: 9998;
 }

 .popup-card {
     background: linear-gradient(145deg, var(--navy2), var(--navy3));
     border: 1px solid rgba(79, 195, 247, 0.2);
     border-radius: 22px;
     overflow: hidden;
     box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
     position: relative;
 }

 .popup-topbar {
     background: transparent;
     border-bottom: 1px solid rgba(79, 195, 247, 0.12);
     padding: 13px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }

 .live-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 20px;
     font-weight: 600;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: #ffffff;
     background: linear-gradient(135deg, #ff6b00, #ff0040);
     padding: 6px 14px;
     border-radius: 50px;
     box-shadow: 0 0 12px rgba(255, 80, 0, 0.6);
     animation: pillBlink 1.2s ease-in-out infinite;
     margin-bottom: 20px;
 }

 @keyframes pillBlink {

     0%,
     100% {
         box-shadow: 0 0 12px rgba(255, 80, 0, 0.6);
         transform: scale(1);
     }

     50% {
         box-shadow: 0 0 24px rgba(255, 80, 0, 0.95);
         transform: scale(1.05);
     }
 }

 .x-btn {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: rgba(255, 80, 0, 0.95);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     font-size: 13px;
     cursor: pointer;
     border: none;
     flex-shrink: 0;
 }

 .popup-body {
     padding: 38px 44px 40px;
     text-align: center;
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/easter-egg.webp') center/cover no-repeat;
 }

 .popup-hl {
     font-size: 46px;
     font-weight: 600;
     line-height: 1.0;
     color: #ffffff;
     margin-bottom: 14px;
 }

 .popup-para {
     font-size: 17px;
     font-weight: 700;
     color: #ffffff;
     line-height: 1.75;
     margin-bottom: 28px;
 }

 .checks {
     display: flex;
     justify-content: center;
     gap: 18px;
     margin-bottom: 32px;
     flex-wrap: wrap;
 }

 .chk {
     display: flex;
     align-items: center;
     gap: 7px;
     font-size: 14px;
     font-weight: 600;
     color: #ffffff;
 }

 .chk-icon {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: rgba(0, 230, 118, 0.12);
     border: 1px solid rgba(0, 230, 118, 0.35);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     color: var(--green);
     flex-shrink: 0;
 }

 .popup-btn {
     display: block;
     width: 100%;
     padding: 19px;
     background: linear-gradient(135deg, #1E303E, #1E303E, #1E303E);
     color: #ffffff !important;
     font-size: 18px;
     font-weight: 700;
     border-radius: 14px;
     border: none;
     cursor: pointer;
     font-family: 'DM Sans', sans-serif;
     margin-bottom: 13px;
     letter-spacing: 0.02em;
     text-decoration: none;
     animation: btnBlink 1.2s ease-in-out infinite;
 }

 @keyframes btnBlink {

     0%,
     100% {
         box-shadow: 0 0 12px rgba(30, 48, 62, 0.5);
         transform: scale(1);
     }

     50% {
         box-shadow: 0 0 24px rgba(30, 48, 62, 0.5);
         transform: scale(1.05);
     }
 }

 .popup-skip {
     font-size: 13px;
     color: #ffffff;
     cursor: pointer;
 }

 /* =====================
       BANNER / HERO
    ===================== */
 .banner-home {
     position: relative;
     overflow: hidden;
     padding-top: 100px;
 }

 .banner-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
 }

 .banner-bg-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }

 .banner-bg-overlay {
     position: absolute;
     inset: 0;
     background: rgba(255, 255, 255, 0.8);
 }

 .banner-inner {
     position: relative;
     z-index: 10;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     padding: 100px 15px 80px;
 }

 .banner-h1 {
     font-size: clamp(40px, 7vw, 92px);
     line-height: 1.1;
     color: var(--navy1);
     margin-bottom: 20px;
     margin-top: 80px;
 }

 .banner-p {
     font-size: clamp(18px, 2vw, 25px);
     color: var(--text-muted);
     max-width: 700px;
     margin: 0 auto 20px;
 }

 .review-logos {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 20px;
     margin: 15px 0;
 }

 .review-logos img {
     width: 150px;
     height: auto;
 }

 .banner-btns {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
     margin-top: 40px;
     padding-bottom: 60px;
 }

 /* =====================
       SHARED BUTTON STYLE
    ===================== */
 .btn-dark-pill {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     min-width: 220px;
     padding: 12px 30px;
     margin-bottom: 30px;
     background: linear-gradient(to top, #080e23, #1e303e);
     color: #ffffff !important;
     font-size: 18px;
     align-self: center;
     font-weight: 600;
     border-radius: 50px;
     text-decoration: none;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     letter-spacing: 0.02em;
 }

 .btn-dark-pill:hover {
     transform: scale(1.08);
     box-shadow: 0 12px 30px rgba(8, 14, 35, 0.4);
     color: #ffffff !important;
 }

 .btn-dark-pill img {
     width: 20px;
     height: 20px;
 }

 /* =====================
       SECTION: WHAT DIFFERENTIATES
    ===================== */
 .section-light {
     background: var(--bg-light);
     padding: 60px 0;
 }

 @media (min-width: 992px) {
     .section-light {
         padding: 96px 0;
     }
 }

 .sec-h2 {
     font-size: clamp(40px, 4vw, 60px);
     line-height: 1.15;
     color: var(--text-dark);
     margin-bottom: 20px;
     font-family: 'DM Sans', sans-serif;
 }

 .sec-p {
     font-size: clamp(15px, 1.5vw, 20px);
     color: var(--text-muted);
     line-height: 1.7;
 }


 @media (max-width: 768px) {

     .sec-h2,
     .sec-p {
         text-align: center;
     }
 }

 /* =====================
       SECTION: CTA BANNER
    ===================== */
 .cta {
     background-image: url('../images/horbg.webp');
     background-repeat: no-repeat;
     text-align: center;
     padding: 70px;
     position: relative;
     background-size: cover;
 }

 @media (max-width: 768px) {
     .cta {
         padding: 30px 0px;
     }
 }

 .cta .cta-hdg h2 {
     font-size: clamp(40px, 4vw, 60px);
     color: #ffffff;
     margin-bottom: 16px;
 }

 .cta .cta-hdg p {
     font-size: clamp(15px, 1.5vw, 20px);
     color: #ffffff;
     margin-bottom: 30px;
 }

 .cta-btns {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 16px;
 }

 .cta-btns .btn-1 {
     display: inline-block;
     padding: 12px 28px;
     font-family: 'DM Sans', sans-serif;
     background: var(--white);
     color: var(--navy1);
     border-radius: 50px;
     font-weight: 700;
     text-decoration: none;
     transition: 0.3s;
     cursor: pointer;
     border: 2px solid var(--white50);
 }

 .cta-btns .btn-1:hover {
     background: transparent;
     color: var(--white);
     border: 2px solid var(--white50);
 }

 .cta-btns a[href^="tel"],
 .cta-btns .btn-2 {
     display: inline-flex;
     align-items: center;
     font-family: 'DM Sans', sans-serif;
     gap: 8px;
     padding: 12px 28px;
     background: transparent;
     color: #ffffff;
     border: 2px solid var(--white50);
     border-radius: 50px;
     font-weight: 700;
     text-decoration: none;
     transition: 0.3s;
 }

 .cta-btns a[href^="tel"]:hover,
 .cta-btns .btn-2:hover {
     border-color: var(--white);
     color: var(--navy1);
     background: var(--white);
 }

 /* =====================
       SECTION: SERVICES
    ===================== */
 .services-section {
     position: relative;
     padding: 80px 20px;
     overflow: hidden;
     text-align: center;
     color: #ffffff;
 }

 .services-section video.bg-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: -1;
 }

 .services-section h3 {
     font-size: clamp(28px, 4vw, 48px);
     color: #ffffff;
     margin-bottom: 16px;
 }

 .services-section>.container>p {
     font-size: clamp(15px, 1.5vw, 20px);
     color: #ffffff;
     margin: 0 auto 40px;
 }

 .service-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0;
     border-radius: 12px;
     overflow: hidden;
 }

 @media (max-width: 991px) {
     .service-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 575px) {
     .service-grid {
         grid-template-columns: 1fr;
     }
 }

 .service-row {
     padding: 15px;
     border-radius: 12px;
 }

 .crd {
     padding: 32px;
     border-right: 1px solid rgba(255, 255, 255, 0.08);
     text-align: left;
     position: relative;
 }

 .crd:last-child {
     border-right: none;
 }

 @media (max-width: 991px) {
     .crd:nth-child(2n) {
         border-right: none;
     }

     .crd {
         border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     }
 }

 .crd h4 {
     color: #ffffff;
     font-size: clamp(18px, 1.8vw, 26px);
     margin-bottom: 14px;
     position: relative;
 }

 .crd p {
     font-size: clamp(14px, 1.2vw, 18px);
     color: #ffffff;
     line-height: 1.7;
     margin-bottom: 20px;
 }

 .crd-arrow {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background: #373737;
     border-radius: 50%;
     color: #ffffff;
     text-decoration: none;
     transition: background 0.3s;
 }

 .crd-arrow:hover {
     background: var(--navy3);
     color: #ffffff;
 }

 /* =====================
       SECTION: PUBLISHING PROCESS
    ===================== */
 .process-section {
     padding: 60px 0 80px;
 }

 .process-section h2 {
     font-size: clamp(36px, 6vw, 80px);
     color: var(--text-dark);
     text-align: center;
     line-height: 1.1;
     padding-top: 40px;
     margin-bottom: 20px;
 }

 .process-intro {
     font-size: clamp(16px, 1.3vw, 20px);
     color: var(--text-muted);
     text-align: center;
     max-width: 820px;
     margin: 0 auto 40px;
 }

 .process-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 25px;
     justify-items: center;
     padding: 20px 0 40px;
 }


 .process-card {
     width: 100%;
     max-width: 280px;
     height: 100%;
     border: 1px solid var(--text-muted);
     border-radius: 8px;
     padding: 12px 8px 8px;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .process-card .step-num {
     font-size: 17px;
     color: var(--navy3);
 }

 .process-card h3 {
     font-size: 24px;
     color: var(--text-dark);
     margin-bottom: 8px;
 }

 .process-card img {
     margin-top: auto;
 }

 @media (max-width: 991px) {
     .process-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 575px) {
     .process-grid {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .process-card {
         height: 100%;
     }
 }


 /* =====================
       BANNER FORM
    ===================== */
 .banner-form-wrap {
     position: relative;
     background: #1E303E;
     z-index: 100;
     width: 100%;
     border-radius: 27px;
     padding: 20px;
     border: 2px solid #1E303E;
 }

 /* ---- SHARED INPUT / SELECT / TEXTAREA STYLE ---- */
 .banner-form-wrap .form-field {
     width: 100%;
     margin-bottom: 16px;
     background: transparent;
     border: none;
     border-bottom: 2px solid #ffffff;
     border-radius: 0;
     height: 60px;
     padding: 0 16px;
     color: #ffffff;
     font-size: 16px;
     font-weight: 500;
     outline: none;
     box-shadow: none;
     appearance: none;
     -webkit-appearance: none;
 }

 .banner-form-wrap .form-field::placeholder {
     color: #ffffff;
 }

 .banner-form-wrap .form-field:focus {
     background: transparent;
     color: #ffffff;
     border-bottom-color: #ffffff;
     box-shadow: none;
     outline: none;
 }

 /* Select dropdown background */
 .banner-form-wrap select.form-field {
     cursor: pointer;
 }

 .banner-form-wrap select.form-field option {
     background: #080e23;
     color: #ffffff;
 }

 /* Textarea */
 .banner-form-wrap textarea.form-field {
     height: auto;
     min-height: 60px;
     padding-top: 16px;
     resize: vertical;
 }

 /* ---- SUBMIT BUTTON ---- */
 .banner-form-submit {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 60%;
     margin: 24px auto 0;
     padding: 12px 24px;
     background: linear-gradient(to top, #080e23, #1e303e);
     color: #ffffff;
     font-size: 20px;
     font-weight: 600;
     border: 2px solid #ffffff;
     border-radius: 50px;
     cursor: pointer;
     transition: opacity 0.3s ease, transform 0.3s ease;
     position: relative;
     z-index: 50;
     text-decoration: none;
     gap: 10px;
 }

 .banner-form-submit:hover {
     opacity: 0.88;
     transform: scale(1.03);
     color: #ffffff;
 }

 .banner-form-submit img {
     width: 20px;
     height: 20px;
     object-fit: contain;
 }

 @media (min-width: 1280px) {
     .banner-form-submit {
         font-size: 24px;
         padding: 16px 24px;
     }
 }

 /* =====================
       REASONS SECTION
    ===================== */
 .reasons-section {
     padding: 80px 0;
     background: #F9F9F9;
 }


 /* Heading */
 .reasons-heading {
     font-size: clamp(40px, 4vw, 60px);
     line-height: 1.2;
     margin-bottom: 32px;
     color: #1D1D1F;
 }

 /* Each reason box */
 .reasons-box {
     display: flex;
     align-items: flex-start;
     gap: 30px;
     margin-bottom: 32px;
 }

 @media (max-width: 767px) {
     .reasons-box {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .reasons-heading {
         text-align: center;
     }
 }

 .reasons-box i.sprite-compr {
     background-image: url('../images/compr-reasons.webp');
     background-repeat: no-repeat;
     display: block;
 }

 .reason-box-cont h3 {
     font-size: clamp(18px, 2vw, 25px);
     line-height: 1.25;
     font-family: 'DM Sans', sans-serif;
     margin-bottom: 8px;
     color: #1D1D1F;
 }

 .reason-box-cont p {
     font-size: clamp(15px, 1.3vw, 20px);
     color: #4a4a4a;
     line-height: 1.6;
     margin: 0;
 }

 /* =====================
       PORTFOLIO SECTION
    ===================== */
 .portfolio-section {
     background: #1D1D1F;
     padding: 0 8px 80px;
 }

 .portfolio-slider-wrap {
     padding-top: 80px;
 }

 .portfolio-heading {
     font-size: clamp(35px, 4vw, 48px);
     color: #ffffff;
     text-align: center;
     line-height: 1.2;
     padding-bottom: 40px;
     margin: 0;
 }

 /* ---- SWIPER OVERRIDES ---- */
 .cover-slider {
     width: 100%;
     overflow: hidden;
 }

 /* ---- PORT BOX (each slide card) ---- */
 .port-box {
     text-align: center;
     padding: 10px;
     cursor: pointer;
 }

 .port-box img {
     width: 100%;
     height: auto;
     display: block;
     margin: 0 auto 16px;
     border-radius: 6px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .port-box:hover img {
     transform: translateY(-6px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
 }

 .port-box h3 {
     font-size: 22px;
     color: #ffffff;
     line-height: 1.4;
     margin-bottom: 6px;
     text-decoration: none;
 }

 .port-box p {
     font-size: 17px;
     color: rgba(255, 255, 255, 0.75);
     margin: 0;
 }

 .port-box a {
     text-decoration: none;
     display: block;
 }

 /* =====================
       SECTION: TESTIMONIALS VIDEOS
    ===================== */
 .story-section {
     padding: 80px 0 60px;
 }

 .story-section h4 {
     font-size: clamp(28px, 3vw, 48px);
     color: var(--text-dark);
     text-align: center;
     margin-bottom: 16px;
 }

 .story-section .story-desc {
     font-size: clamp(14px, 1.2vw, 18px);
     color: var(--navy1);
     text-align: center;
     margin: 0 auto 50px;
     line-height: 1.7;
 }

 .video-portrait {
     width: 100%;
     max-width: 320px;
     aspect-ratio: 9 / 16;
     border-radius: 12px;
     display: block;
     margin: 0 auto;
     object-fit: cover;
     box-shadow: 0 4px 20px rgb(0 0 0 / .15);
 }

 @media (max-width: 768px) {
     .video-t {
         display: flex;
         gap: 50px;
     }

     .faq-form-head {
         text-align: center;
     }
 }

 /* Hide fullscreen button in Chrome / Edge */
 video::-webkit-media-controls-fullscreen-button {
     display: none !important;
 }

 video::-webkit-media-controls {
     overflow: hidden;
 }

 .view-all-wrap {
     display: flex;
     justify-content: center;
     margin-top: 40px;
 }


 /* =====================
       LOGO SLIDER SECTION
    ===================== */
 .logo-slider-section {
     text-align: center;
     padding: 2.5em 0;
     background: url('../images/horbg.webp');
     width: 100%;
     position: relative;
     z-index: 10;
     clear: both;
 }

 @media (min-width: 992px) {
     .logo-slider-section {
         padding: 0 16px;
     }
 }

 .logo-slider-heading {
     font-size: clamp(25px, 2.5vw, 40px);
     line-height: 1.2;
     color: #ffffff;
     margin: 0;
     text-align: left;
 }

 /* Infinite scroll ticker */
 .logo-slider {
     overflow: hidden;
     position: relative;
     width: 100%;
     /* Fade edges */
     -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
     mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
 }

 .logo-slider-track {
     display: flex;
     align-items: center;
     gap: 40px;
     width: max-content;
     animation: logoScroll 20s linear infinite;
 }

 .logo-slider-track:hover {
     animation-play-state: paused;
 }

 .logo-slide {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .logo-slide img {
     height: 50px;
     width: 200px;
     object-fit: contain;
     filter: grayscale(20%);
     transition: filter 0.3s ease, transform 0.3s ease;
 }

 .logo-slide img:hover {
     filter: grayscale(0%);
     transform: scale(1.08);
 }

 @keyframes logoScroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }


 /* =====================
       RESPONSIVE TWEAKS
    ===================== */
 @media (max-width: 768px) {
     .banner-inner {
         padding: 80px 15px 60px;
     }

     .banner-h1 {
         margin-top: 40px;
     }

     .logo-slider-section {
         padding: 10px 0px;
     }

     .logo-slider-heading {
         text-align: center;
         margin-bottom: 20px;
     }
 }


 /* =====================
       FAQ SECTION
    ===================== */
 .faq-section {
     background: #F9F9F9;
     position: relative;
     z-index: 1000;
     padding: 80px 0;
 }

 .faq-head {
     font-size: clamp(32px, 4vw, 48px);
     color: #1D1D1F;
     text-align: center;
     margin-bottom: 40px;
 }

 /* ---- ACCORDION ITEM ---- */
 .faq-item {
     border-bottom: 2px solid #d1d5db;
 }

 /* ---- ACCORDION BUTTON ---- */
 .faq-btn {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     padding: 20px;
     gap: 12px;
     background: transparent;
     border: none;
     cursor: pointer;
     text-align: left;
     transition: background 0.3s ease;
 }

 .faq-btn[aria-expanded="true"] {
     background: #1D1D1F;
 }

 .faq-btn h5 {
     font-size: clamp(15px, 1.5vw, 20px);
     color: #4a4a4a;
     margin: 0;
     line-height: 1.5;
     transition: color 0.3s ease;
 }

 .faq-btn[aria-expanded="true"] h5 {
     color: #ffffff;
 }

 .faq-btn .faq-icon {
     font-size: 24px;
     color: #4a4a4a;
     flex-shrink: 0;
     transition: color 0.3s ease, transform 0.3s ease;
 }

 .faq-btn[aria-expanded="true"] .faq-icon {
     color: #ffffff;
     transform: rotate(45deg);
 }

 /* ---- ACCORDION BODY ---- */
 .faq-body {
     display: none;
 }

 .faq-body.show {
     display: block;
 }

 .faq-body-inner {
     padding: 40px;
     background: #ffffff;
 }

 .faq-body-inner p {
     font-size: 18px;
     color: #4b5563;
     margin: 0;
     line-height: 1.75;
 }

 /* =====================
       FOOTER EXACT MATCH
    ===================== */
 .site-footer {
     background: #1D1D1F;
     color: #ffffff;
     padding: 40px 0 0;
     position: relative;
     overflow: hidden;
     font-family: inherit;
 }

 /* ---- VERTICAL GRID LINES ---- */
 .footer-grid-lines {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 0;
     display: flex;
     justify-content: space-between;
     padding: 0 calc((100% - 1320px) / 2);
 }

 @media (max-width: 1399px) {
     .footer-grid-lines {
         padding: 0 12px;
     }
 }

 .footer-grid-lines .vline {
     width: 1px;
     height: 100%;
     background: rgba(193, 193, 193, 0.15);
     flex-shrink: 0;
 }

 .footer-inner {
     position: relative;
     z-index: 1;
 }

 /* ---- LOGO ROW ---- */
 .footer-logo-row {
     padding: 0 0 36px 0;
 }

 .footer-logo-row a img {
     height: 70px;
     width: auto;
     max-width: 260px;
 }

 /* ---- DIVIDERS ---- */
 .footer-hr {
     width: 100%;
     height: 1px;
     background: rgba(193, 193, 193, 0.2);
     border: 0;
     margin: 0 0 36px 0;
 }

 .footer-hr-bottom {
     width: 100%;
     height: 1px;
     background: rgba(193, 193, 193, 0.2);
     border: 0;
     margin: 36px 0 0 0;
 }

 /* ---- MIDDLE ROW: 4 equal columns ---- */
 .footer-middle-row {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     align-items: start;
     gap: 0;
     padding-bottom: 36px;
 }

 .footer-cell {
     padding-right: 24px;
 }

 .footer-cell-nav {
     text-align: right;
     padding-right: 0;
     padding-left: 16px;
 }

 .footer-cell-label {
     font-size: 18px;
     font-weight: 600;
     color: #ffffff;
     margin-bottom: 14px;
     display: block;
 }

 .footer-cell-text {
     font-size: 15px;
     color: #ffffff;
     line-height: 1.65;
     margin: 0;
 }

 .footer-cell-text a {
     color: #ffffff;
     text-decoration: none;
     transition: color 0.25s;
 }

 .footer-cell-text a:hover {
     color: var(--white50);
 }

 .footer-phone-link {
     font-size: 15px;
     color: #ffffff;
     text-decoration: none;
     display: block;
     margin-top: 2px;
     transition: color 0.25s;
 }

 .footer-phone-link:hover {
     color: var(--white50);
 }

 /* Socials */
 .footer-socials {
     display: flex;
     gap: 12px;
     margin-top: 4px;
     flex-wrap: wrap;
 }

 .footer-socials a img {
     width: 32px;
     height: 32px;
     display: block;
     transition: opacity 0.25s;
 }

 .footer-socials a:hover img {
     opacity: 0.65;
 }

 /* Nav links */
 .footer-nav-links {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .footer-nav-links a {
     font-size: 15px;
     color: #ffffff;
     text-decoration: none;
     transition: color 0.25s;
     display: block;
 }

 .footer-nav-links a:hover {
     color: rgba(249, 249, 249, 0.5);
 }

 /* ---- BOTTOM ROW: services (3/4 width) + Let's Talk (1/4 width) ---- */
 .footer-bottom-row {
     display: grid;
     grid-template-columns: 3fr 1fr;
     align-items: end;
     gap: 40px;
     padding-bottom: 36px;
 }

 /* Services — 3 columns */
 .footer-services-list {
     list-style: none;
     padding: 0;
     margin: 0;
     columns: 3;
     column-gap: 0;
 }

 .footer-services-list li {
     margin-bottom: 18px;
     break-inside: avoid;
     padding-right: 16px;
 }

 .footer-services-list a {
     font-size: 15px;
     color: #ffffff;
     text-decoration: none;
     transition: color 0.25s;
     display: block;
 }

 .footer-services-list a:hover {
     color: rgba(249, 249, 249, 0.5);
 }

 /* Let's Talk */
 .footer-lets-talk {
     text-align: right;
 }

 .footer-lets-talk h2 {
     font-size: clamp(42px, 3.5vw, 58px);
     color: #ffffff;
     margin: 0 0 12px 0;
     line-height: 1.1;
     font-weight: 600;
 }

 .footer-lets-talk a {
     font-size: 14px;
     color: #ffffff;
     text-decoration: none;
     text-underline-offset: 3px;
     transition: color 0.25s;
     word-break: break-all;
 }

 .footer-lets-talk a:hover {
     color: rgba(255, 255, 255, 0.65);
 }

 /* =====================
       MOBILE FOOTER
    ===================== */
 .site-footer-desktop {
     display: block;
 }

 .site-footer-mobile {
     display: none;
 }

 @media (max-width: 991px) {
     .site-footer-desktop {
         display: none;
     }

     .site-footer-mobile {
         display: block;
     }

     .footer-grid-lines {
         display: none;
     }

     .site-footer-mobile .site-footer {
         padding: 36px 0 0;
     }

     .site-footer-mobile .footer-logo-row {
         text-align: center;
     }

     .site-footer-mobile .footer-logo-row a img {
         height: 56px;
         margin: 0 auto;
         display: block;
     }

     .site-footer-mobile .footer-contact-stack {
         display: flex;
         flex-direction: column;
         gap: 24px;
         text-align: center;
         padding-bottom: 24px;
     }

     .site-footer-mobile .footer-socials {
         justify-content: center;
     }

     .site-footer-mobile .footer-nav-links {
         text-align: center;
         padding: 24px 0;
         align-items: center;
     }

     .site-footer-mobile .footer-services-list {
         columns: 1;
         text-align: center;
         margin-top: 24px;
     }

     .site-footer-mobile .footer-lets-talk {
         text-align: center;
         padding: 24px 0 32px;
     }

     .site-footer-mobile .footer-lets-talk h2 {
         font-size: 38px;
     }
 }


 /* =====================
       CONTACT PAGE
    ===================== */
 .contact-section {
     padding: 160px 20px 80px;
 }

 .contact-row {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     flex-direction: column;
     position: relative;
     z-index: 10;
     gap: 48px;
 }

 @media (min-width: 768px) {
     .contact-row {
         flex-direction: row;
         align-items: flex-start;
     }
 }

 /* ---- LEFT: Content ---- */
 .contact-content {
     width: 100%;
     padding-left: 0;
 }

 @media (min-width: 768px) {
     .contact-content {
         width: 55%;
         padding-left: 1rem;
     }
 }

 @media (min-width: 992px) {
     .contact-content {
         padding-left: 3rem;
     }
 }

 @media (min-width: 1280px) {
     .contact-content {
         padding-left: 6rem;
     }
 }

 /* Heading */
 .contact-heading {
     font-size: clamp(30px, 5vw, 72px);
     line-height: 1.15;
     margin-bottom: 0;
     color: #1D1D1F;
 }

 /* Intro paragraph */
 .contact-intro {
     margin-top: 24px;
     font-size: clamp(15px, 1.3vw, 18px);
     color: #080e23;
     line-height: 1.7;
 }

 .contact-intro a {
     color: #080e23;
     text-decoration: underline;
 }

 /* Divider */
 .contact-divider {
     width: 100%;
     height: 1px;
     background: rgba(193, 193, 193, 0.2);
     border: 0;
     margin: 24px 0 0;
     display: none;
 }

 @media (min-width: 992px) {
     .contact-divider {
         display: block;
     }
 }

 /* ---- Contact Info row (Address / Phone / Socials) ---- */
 .contact-info-row {
     display: flex;
     flex-direction: column;
     gap: 24px;
     margin-top: 40px;
 }

 @media (min-width: 992px) {
     .contact-info-row {
         flex-direction: row;
         gap: 24px;
     }
 }

 .contact-info-col {
     width: 100%;
 }

 @media (min-width: 992px) {
     .contact-info-col {
         width: 33.33%;
     }
 }

 .contact-info-label {
     font-size: clamp(16px, 1.3vw, 20px);
     margin-bottom: 12px;
     color: #1D1D1F;
 }

 .contact-info-text {
     font-size: 16px;
     color: #080e23;
     line-height: 1.6;
     margin: 0;
 }

 .contact-info-text a {
     color: #080e23;
     text-decoration: none;
 }

 .contact-phone-link {
     font-size: 16px;
     color: #080e23;
     text-decoration: none;
     transition: color 0.25s;
 }

 .contact-phone-link:hover {
     color: rgba(8, 14, 35, 0.5);
 }

 /* Socials */
 .contact-socials {
     display: flex;
     gap: 16px;
     margin-top: 12px;
 }

 .contact-socials a img {
     width: 30px;
     height: 30px;
     display: block;
     cursor: pointer;
     transition: opacity 0.25s;
 }

 .contact-socials a:hover img {
     opacity: 0.6;
 }

 /* ---- Map ---- */
 .contact-map-wrap {
     margin-top: 32px;
     margin-bottom: 40px;
 }

 .contact-map-wrap iframe {
     width: 350px;
     height: 350px;
     border: 0;
     border-radius: 8px;
 }

 @media (min-width: 768px) {
     .contact-map-wrap iframe {
         width: 750px;
     }
 }

 /* =====================
       TESTIMONIALS PAGE
    ===================== */

 /* ---- HERO BANNER ---- */
 .testi-hero {
     padding-top: 160px;
     background: url('./images/bg-reviews.png') center bottom / cover no-repeat;
     display: flex;
     justify-content: center;
     position: relative;
     z-index: 10;
 }

 /* Light overlay on mobile, transparent on desktop */
 .testi-hero::after {
     content: '';
     position: absolute;
     inset: 0;
     background: #ffffff;
     opacity: 0.8;
     z-index: -1;
 }

 @media (min-width: 992px) {
     .testi-hero::after {
         opacity: 0;
     }
 }

 .testi-hero-inner {
     padding: 80px 0 60px;
     text-align: center;
 }

 .testi-hero-heading {
     font-size: clamp(24px, 5vw, 72px);
     line-height: 1.15;
     color: #1D1D1F;
     font-weight: normal;
     margin-bottom: 20px;
 }

 .testi-hero-desc {
     font-size: clamp(16px, 1.4vw, 20px);
     color: #080e23;
     line-height: 1.65;
     max-width: 66.66%;
     margin: 0 auto;
 }

 .testi-hero-desc a {
     color: #080e23;
     text-decoration: underline;
 }

 @media (max-width: 767px) {
     .testi-hero-desc {
         max-width: 100%;
     }
 }

 /* ---- VIDEO GRID ---- */
 .testi-video-section {
     padding: 0 8px 0;
     margin-top: 80px;
     margin-bottom: 80px;
 }

 @media (min-width: 768px) {
     .testi-video-section {
         padding: 0 20px;
     }
 }

 /* Video portrait style */
 .video-portrait {
     width: 100%;
     display: block;
     border-radius: 10px;
 }

 /* Hide fullscreen button in Chrome / Edge */
 video::-webkit-media-controls-fullscreen-button {
     display: none !important;
 }

 video::-webkit-media-controls {
     overflow: hidden;
 }


 /* =====================
       ABOUT PAGE
    ===================== */

 /* ---- HERO BANNER ---- */
 .about-hero {
     background: #f9f9f9;
     width: 100%;
     padding: 176px 8px 160px;
     text-align: center;
 }

 @media (min-width: 768px) {
     .about-hero {
         text-align: left;
     }
 }

 .about-hero-inner {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     justify-content: space-between;
     gap: 40px;
 }

 .about-hero-content {
     width: 100%;
     max-width: 680px;
     padding-top: 0;
 }

 @media (min-width: 768px) {
     .about-hero-content {
         padding-top: 80px;
     }
 }

 .about-hero-heading {
     font-size: clamp(30px, 4vw, 60px);
     line-height: 1.15;
     color: #000000;
     margin-bottom: 12px;
 }

 .about-hero-p {
     font-size: clamp(15px, 1.3vw, 20px);
     color: #080e23;
     line-height: 1.65;
     font-weight: 500;
     padding-top: 12px;
 }

 .about-hero-p a {
     color: #080e23;
 }

 .about-hero-btn-wrap {
     display: flex;
     justify-content: center;
 }

 @media (min-width: 768px) {
     .about-hero-btn-wrap {
         justify-content: flex-start;
     }
 }

 .about-hero-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 220px;
     margin-top: 20px;
     padding: 10px 30px;
     background: linear-gradient(to top, #080e23, #1e303e);
     color: #ffffff !important;
     font-size: clamp(18px, 1.5vw, 24px);
     font-weight: 600;
     border-radius: 50px;
     text-decoration: none;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .about-hero-btn:hover {
     transform: scale(1.08);
     box-shadow: 0 12px 30px rgba(8, 14, 35, 0.4);
     color: #ffffff !important;
 }

 @media (min-width: 1280px) {
     .about-hero-btn {
         min-width: 325px;
         padding: 16px 30px;
     }
 }

 /* Hero image — desktop only */
 .about-hero-img {
     width: 100%;
     max-width: 686px;
     height: auto;
     object-fit: cover;
     margin-bottom: -800px;
     display: none;
 }

 @media (min-width: 992px) {
     .about-hero-img {
         display: block;
     }
 }

 /* ---- WHO WE ARE ---- */
 .about-who-section {
     padding: 80px 8px;
     text-align: center;
 }

 @media (min-width: 768px) {
     .about-who-section {
         text-align: left;
     }
 }

 .about-who-heading {
     font-size: clamp(30px, 4vw, 60px);
     line-height: 1.15;
     color: #000000;
     margin-bottom: 12px;
 }

 .about-who-p {
     font-size: 17px;
     color: #080e23;
     line-height: 1.7;
     font-weight: 300;
     padding-top: 12px;
 }

 /* ---- MISSION SECTION ---- */
 .about-mission-section {
     background: #F9F9F9;
     width: 100%;
     padding: 100px 10px 50px 10px;
     position: relative;
     z-index: 10;
 }

 .about-mission-heading {
     font-size: clamp(25px, 4vw, 60px);
     line-height: 1.15;
     color: #1D1D1F;
     margin-bottom: 16px;
 }

 .about-mission-p {
     font-size: clamp(15px, 1.3vw, 20px);
     color: #4a4a4a;
     line-height: 1.7;
 }

 .about-mission-p a {
     color: #4a4a4a;
 }


 /* =====================
       COUNTER STATS SECTION
    ===================== */
 .counter-section {
     background: #ffffff;
     position: relative;
     z-index: 10;
     padding: 64px 8px 40px;
 }

 @media (min-width: 768px) {
     .counter-section {
         padding: 64px 16px 40px;
     }
 }

 @media (min-width: 1280px) {
     .counter-section {
         padding: 80px 16px;
     }
 }

 .counter-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
     gap: 20px;
 }

 @media (min-width: 768px) {
     .counter-row {
         flex-direction: row;
         gap: 0;
     }
 }

 /* Each stat block */
 .counter-item {
     text-align: center;
     line-height: 2.5;
     flex: 1;
 }

 .counter-item h2 {
     font-size: clamp(24px, 3.5vw, 55px);
     color: #1D1D1F;
     margin: 0;
     line-height: 1.1;
 }

 .counter-item p {
     font-size: clamp(14px, 1.2vw, 17px);
     color: #4a4a4a;
     font-weight: 300;
     line-height: 1.3;
     margin: 6px 0 0;
 }


 /* =====================
       PORTFOLIO PAGE
    ===================== */

 /* ---- HERO ---- */
 .portfolio-hero {
     background: #f9f9f9;
     width: 100%;
     padding: 160px 8px 40px;
 }

 .portfolio-hero-heading {
     font-size: clamp(32px, 4vw, 50px);
     line-height: 1.15;
     color: #000000;
     margin-bottom: 0;
 }

 .portfolio-hero-p {
     font-size: clamp(16px, 1.3vw, 20px);
     color: #000000;
     font-weight: 500;
     line-height: 1.65;
     padding-top: 12px;
 }

 .portfolio-hero-p a {
     color: #000000;
 }

 .portfolio-hero-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 220px;
     margin-top: 40px;
     padding: 10px 30px;
     background: #1E303E;
     color: #ffffff !important;
     font-size: clamp(18px, 1.5vw, 24px);
     border-radius: 50px;
     text-decoration: none;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .portfolio-hero-btn:hover {
     transform: scale(1.08);
     box-shadow: 0 12px 30px rgba(30, 48, 62, 0.4);
     color: #ffffff !important;
 }

 /* ---- SHARED SECTION STYLES ---- */
 .portfolio-main-section {
     background: #F9F9F9;
     width: 100%;
     padding: 80px 0;
 }

 .port-sub-section {
     margin-top: 80px;
 }

 .port-sub-section:first-child {
     margin-top: 0;
 }

 .port-section-heading {
     font-size: clamp(32px, 3.5vw, 50px);
     text-align: center;
     padding-bottom: 40px;
     color: #000000;
     line-height: 1.15;
     margin: 0;
 }

 /* ---- BOOK COVER SLIDER ---- */
 .cover-slider {
     overflow: hidden;
     width: 100%;
 }

 .port-box {
     text-align: center;
     padding: 10px;
 }

 .port-box a {
     text-decoration: none;
     display: block;
 }

 .port-box img {
     width: 100%;
     height: auto;
     display: block;
     margin: 0 auto 12px;
     border-radius: 4px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .port-box img:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
 }



 /* ---- AUTHOR WEBSITES ---- */
 .author-websites-row {
     display: flex;
     flex-direction: column;
     gap: 40px;
     justify-content: center;
     align-items: center;
 }

 @media (min-width: 768px) {
     .author-websites-row {
         flex-direction: row;
         align-items: flex-start;
     }
 }


 .author-img {
     width: 100%;
     max-width: 500px;
     height: 500px;
     object-fit: cover;
     object-position: top;
     display: block;
     margin: 0 auto;
     border-radius: 6px;
     transition: opacity 0.3s ease;
 }

 .author-img:hover {
     opacity: 0.85;
 }

 .video-head {
     width: 100%;
     height: 300px;
     object-fit: cover;
     border-radius: 8px;
     display: block;
 }

 .video-head.playing {
     height: auto;
 }

 /* ---- EDITING SLIDER ---- */
 .editing-slider {
     overflow: hidden;
     width: 100%;
 }

 .editing-slider .swiper-slide img {
     width: 100%;
     height: auto;
     border-radius: 6px;
     cursor: pointer;
     transition: opacity 0.3s ease;
 }

 .editing-slider .swiper-slide img:hover {
     opacity: 0.85;
 }

 /* Swiper nav */
 .swiper-button-next,
 .swiper-button-prev {
     color: #1E303E;
 }

 /* Divider */
 .divider-des {
     width: 100%;
     height: 1px;
     background: rgba(193, 193, 193, 0.3);
     margin-top: 60px;
 }

 /* Fancybox z-index */
 .fancybox__container {
     z-index: 99999 !important;
 }

 /* =====================
       REVIEW BADGES ROW
    ===================== */
 .review-badges-row {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     margin-top: 20px;
 }

 @media (max-width: 1024px) {
     .review-badges-row {
         display: none !important;
     }
 }

 @media (min-width: 992px) {
     .review-badges-row {
         flex-direction: row;
     }
 }

 .review-badges-row a,
 .review-badges-row span {
     display: inline-flex;
     flex-shrink: 0;
 }

 .review-badges-row img {
     width: 120px;
     height: auto;
     display: block;
     transition: opacity 0.25s ease;
 }

 .review-badges-row a:hover img {
     opacity: 0.8;
 }

 /* =====================
       PUBLISHING BANNER
    ===================== */

 .publishing-banner-section {
     background: #F9F9F9;
     padding-top: 220px;
     padding-bottom: 70px;
 }

 @media (min-width: 992px) {
     .publishing-banner-section {
         flex-direction: row;
         text-align: left;
     }
 }


 /* Heading */
 .publishing-banner-heading {
     font-size: clamp(32px, 4vw, 60px);
     line-height: 1.15;
     margin-bottom: 0;
 }

 /* Paragraph */
 .publishing-banner-p {
     margin-top: 24px;
     font-size: clamp(16px, 1.3vw, 20px);
     line-height: 1.65;
 }

 /* =====================
       THANK YOU PAGE
    ===================== */
 .thankyou-section {
     padding: 160px;
 }

 /* Subheading */
 .thankyou-sub {
     font-size: clamp(20px, 1.8vw, 23px);
     color: var(--text-muted);
     line-height: 1.6;
     margin-bottom: 0;
 }

 /* Countdown indicator */
 .thankyou-redirect-note {
     margin-top: 30px;
     font-size: 14px;
     color: var(--text-muted);
 }

 .child-bp {
     width: 100%;
     height: 600px;
     object-fit: cover;
 }

 @media (max-width: 565px) {
     .child-bp {
         height: 400px;
         margin-top: 30px;
     }
 }


 /* =====================
       PUBLISHING STEPS SECTION
    ===================== */
 .steps-section {
     padding-bottom: 40px;
     margin-bottom: 80px;
 }

 .steps-heading {
     font-size: clamp(40px, 4vw, 60px);
     color: #1D1D1F;
     text-align: center;
     line-height: 1.2;
     padding-top: 80px;
     margin-bottom: 0;
 }

 .steps-intro-wrap {
     width: 100%;
     max-width: 80%;
     background: #ffffff;
     padding: 16px 8px;
     margin: 0 auto;
 }

 .steps-intro {
     font-size: 20px;
     color: #080e23;
     font-weight: 300;
     text-align: center;
     line-height: 1.65;
     margin: 0;
 }

 /* ---- STEPS GRID ---- */
 .res-steps {
     display: grid;
     grid-template-columns: repeat(1, minmax(0, 1fr));
     place-items: center;
     justify-content: center;
     justify-items: center;
     align-items: center;
     padding: 20px 0;
     row-gap: 20px;
     column-gap: 0;
 }

 @media (min-width: 768px) {
     .res-steps {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }

 @media (min-width: 1024px) {
     .res-steps {
         grid-template-columns: repeat(3, minmax(0, 1fr));
         column-gap: 8px;
     }
 }

 @media (min-width: 1400px) {
     .res-steps {
         grid-template-columns: repeat(5, minmax(0, 1fr));
     }
 }

 /* ---- STEP CIRCLE CARD ---- */
 .step-circle {
     width: 300px;
     height: 300px;
     border: 1px solid #080e23;
     border-radius: 50%;
     padding: 24px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     background: #172536;
     box-sizing: border-box;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .step-circle:hover {
     transform: translateY(-6px);
     box-shadow: 0 16px 36px rgba(23, 37, 54, 0.35);
 }

 .step-circle .step-num {
     font-size: 17px;
     color: #ffffff;
     margin-bottom: 6px;
 }

 .step-circle h3 {
     font-size: 22px;
     color: #ffffff;
     line-height: 1.25;
     margin-bottom: 0;
 }

 .step-circle p {
     font-size: 15px;
     color: #ffffff;
     line-height: 1.55;
     padding: 8px 0 0;
     margin: 0;
 }