.section {
			width: 100%;
			padding: 10px;
		}

		.box {
			width: 100%;
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 15px;
			padding: 25px;
			margin-bottom: 25px;
			box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
		}

		/* Image 3 column */
		.box img {
			margin-left: 23px;
			width: 35%;
			max-width: 250px;
			padding: 20px;
			object-fit: contain;
		}



		/* Content 9 column */
		.content {
			width: 75%;
			padding: 20px;
		}


		/* Odd cards - Image left */
		.box:nth-child(odd) {
			flex-direction: row;
		}

		/* Even cards - Image right */
		.box:nth-child(even) {
			flex-direction: row-reverse;
		}


		.content h2 {
			font-weight: 1000;
			color: #12355b;
			font-size: 28px;
			margin-bottom: 15px;
		}

		.content p {
			font-size:21px;
			line-height: 1.7;
			color: #555;
		}

		.btn {
			display: flex;
			gap: 15px;
			margin-top: 20px;
		}

		.btn a {
			background: #04284d;
			color: white;
			padding: 12px 25px;
			border-radius: 6px;
			text-decoration: none;
		}

		.btn a:hover {
			background: #11293e;
			color: white;

		}

		.btn .second {
			background: #ff7b00;
		}

		.btn .second:hover {
			background: #ff8d21;
		}


		/* Mobile */
		@media(max-width:768px) {

			.box,
			.box:nth-child(odd),
			.box:nth-child(even) {
				flex-direction: column;
				text-align: center;
			}

			.box img,
			.content {
				width: 100%;
			}

			.box img {
				max-width: 180px;
			}

			.btn {
				justify-content: center;
			}
		}


		/* -----------Seconnd---------- */


		.dsc-info-section {
			padding: 60px 20px;
			background: #f7f9fc;
			font-family: Arial, sans-serif;
		}

		.container {
			max-width: 1200px;
			margin: auto;
		}

		.section-heading {
			text-align: center;
			margin-bottom: 40px;
		}

		.section-heading h2,
		.why-dsc h2,
		.cta-box h2 {
			color: #12355b;
			font-size: 32px;
			margin-bottom: 15px;
		}

		.section-heading p,
		.why-dsc p {
			color: #555;
			font-size: 21px;
			line-height: 1.7;
		}


		.dsc-cards {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 25px;
		}


		.dsc-card {
			background: #fff;
			padding: 30px 20px;
			text-align: center;
			border-radius: 12px;
			box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
			transition: .3s;
		}


		.dsc-card:hover {
			transform: translateY(-8px);
		}


		.icon1 {
			font-size: 40px;
			margin-bottom: 15px;
		}


		.dsc-card h3 {
			color: #1a73e8;
			font-size: 20px;
		}


		.dsc-card p {
			color: #666;
			line-height: 1.6;
		}



		.why-dsc {
			margin-top: 60px;
			background: #fff;
			padding: 35px;
			border-radius: 15px;
			box-shadow: 0 5px 20px rgba(0, 0, 0, .06);
		}


		.why-dsc ul {
			padding: 0;
			list-style: none;
		}


		.why-dsc li {
			margin: 12px 0;
			font-size: 21px;
			color: #333;
		}



		.cta-box {
			margin-top: 50px;
			background: #12355b;
			color: white;
			text-align: center;
			padding: 45px 25px;
			border-radius: 15px;
		}


		.cta-box h2 {
			color: #ffb703;
		}


		.cta-box p {
			color: #fff;
			font-size: 21px;
		}


		.buy-btn {
			display: inline-block;
			margin-top: 20px;
			padding: 14px 35px;
			background: #f17602;
			color: #000;
			text-decoration: none;
			border-radius: 30px;
			font-weight: bold;
		}



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


		@media(max-width:600px) {
			.dsc-cards {
				grid-template-columns: 1fr;
			}

			.section-heading h2,
			.why-dsc h2,
			.cta-box h2 {
				font-size: 25px;
			}
		}




		/* ======================================
   Responsive CSS (Hero + DSC Section)
====================================== */

		/* Images */
		img {
			max-width: 100%;
			height: auto;
			display: block;
		}

		/* ---------- Laptop ---------- */
		@media (max-width:1200px) {

			.content h2 {
				font-size: 26px;
			}

			.hero-content h1 {
				font-size: 42px;
			}

			.dsc-cards {
				grid-template-columns: repeat(2, 1fr);
			}

		}

		/* ---------- Tablet ---------- */
		@media (max-width:992px) {

			/* Hero */

			.hero-section {
				height: 40vh;
				min-height: 300px;
			}

			.hero-content {
				max-width: 90%;
			}

			.hero-content h1 {
				font-size: 36px;
				line-height: 1.3;
			}

			/* Content Boxes */

			.box,
			.box:nth-child(odd),
			.box:nth-child(even) {
				flex-direction: column;
				text-align: center;
				padding: 25px;
			}

			.box img {
				width: 100%;
				max-width: 220px;
				margin: 0 auto 20px;
				padding: 10px;
			}

			.content {
				width: 100%;
				padding: 0;
			}

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

			/* Cards */

			.dsc-cards {
				grid-template-columns: repeat(2, 1fr);
			}

		}

		/* ---------- Mobile ---------- */
		@media (max-width:768px) {

			.hero-section {
				height: 35vh;
				min-height: 250px;
			}

			.hero-tag {
				font-size: 13px;
				padding: 6px 14px;
			}

			.hero-content h1 {
				font-size: 30px;
			}

			.section {
				padding: 15px;
			}

			.box {
				padding: 20px;
			}

			.content h2 {
				font-size: 24px;
			}

			.content p {
				font-size: 16px;
				text-align: left;
			}

			.btn {
				flex-direction: column;
				gap: 12px;
			}

			.btn a {
				width: 100%;
				text-align: center;
			}

			.dsc-cards {
				grid-template-columns: 1fr;
			}

			.dsc-card {
				padding: 25px 20px;
			}

			.section-heading h2,
			.why-dsc h2,
			.cta-box h2 {
				font-size: 28px;
			}

			.section-heading p,
			.why-dsc p,
			.cta-box p {
				font-size: 16px;
			}

			.why-dsc {
				padding: 25px 20px;
			}

			.cta-box {
				padding: 35px 20px;
			}

			.buy-btn {
				width: 100%;
				text-align: center;
			}

		}

		/* ---------- Small Mobile ---------- */
		@media (max-width:480px) {

			.hero-section {
				height: 30vh;
				min-height: 220px;
			}

			.hero-content h1 {
				font-size: 24px;
			}

			.hero-tag {
				font-size: 12px;
			}

			.content h2 {
				font-size: 22px;
			}

			.content p {
				font-size: 15px;
			}

			.section-heading h2,
			.why-dsc h2,
			.cta-box h2 {
				font-size: 22px;
			}

			.section-heading p,
			.why-dsc p,
			.cta-box p {
				font-size: 15px;
			}

			.dsc-card {
				padding: 20px 15px;
			}

			.icon1 {
				font-size: 32px;
			}

			.buy-btn {
				padding: 12px 20px;
				font-size: 15px;
			}

		}
	



        
		.hero-section {
			position: relative;
			height: 50vh;
			min-height: 200px;
			background: url("/images/dsc5.png") center center/cover no-repeat;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			overflow: hidden;
		}

		.hero-overlay {
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.55);
		}

		.hero-content {
			position: relative;
			z-index: 2;
			max-width: 750px;
			padding: 20px;
			color: #fff;
		}

		.hero-tag {
			display: inline-block;
			background: #ff6b00;
			color: #fff;
			padding: 8px 18px;
			border-radius: 30px;
			font-size: 14px;
			margin-bottom: 20px;
			text-transform: uppercase
		}

		.hero-content h1 {
			color: white;
		}
		
		
		 .msign-services,
            .msign-services * {
                box-sizing: border-box;
            }

            .msign-services {
                --msign-blue: #0969da;
                --msign-green: #63b516;
                --msign-dark: #14243a;
                --msign-muted: #64748b;

                width: 100%;
                padding: 65px 0 70px;
                overflow: hidden;
                font-family: Arial, Helvetica, sans-serif;
                background:
                    radial-gradient(ellipse at 10% 10%,
                        rgba(25, 119, 235, 0.07), transparent 38%),
                    radial-gradient(ellipse at 90% 90%,
                        rgba(99, 181, 22, 0.07), transparent 35%),
                    #f7faff;
            }

            /* Section heading */

            .msign-services .section-heading {
                max-width: 850px;
                padding: 0 20px;
                margin: 0 auto 38px;
                text-align: center;
            }

            .msign-services .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 9px 16px;
                margin-bottom: 16px;
                border: 1px solid #d7e7ff;
                border-radius: 30px;
                background: #ffffff;
                color: var(--msign-blue);
                font-size: 12px;
                font-weight: 800;
                letter-spacing: 1.5px;
                text-transform: uppercase;
            }

            .msign-services .eyebrow::before {
                content: "";
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--msign-green);
                box-shadow: 0 0 0 4px rgba(99, 181, 22, .12);
            }

            .msign-services .section-heading h2 {
                margin: 0 0 14px;
                color: var(--msign-dark);
                font-size: clamp(28px, 4vw, 43px);
                line-height: 1.2;
                font-weight: 800;
                letter-spacing: -1px;
            }

            .msign-services .brand-highlight {
                color: var(--msign-blue);
            }

            .msign-services .section-heading p {
                max-width: 650px;
                margin: 0 auto;
                color: var(--msign-muted);
                font-size: 15px;
                line-height: 1.9;
            }

            /* Scrolling viewport */

            .msign-services .card-container {
                position: relative;
                width: 100%;
                overflow: hidden;
                padding: 15px 0 30px;
                -webkit-mask-image: linear-gradient(to right,
                        transparent,
                        #000 3%,
                        #000 97%,
                        transparent);
                mask-image: linear-gradient(to right,
                        transparent,
                        #000 3%,
                        #000 97%,
                        transparent);
            }

            /* Track */

            .msign-services .card-track {
                display: flex;
                align-items: stretch;
                gap: 24px;
                width: max-content;
                padding: 0 12px;
                animation: msignInfiniteScroll 48s linear infinite;
            }

            .msign-services .card-container:hover .card-track,
            .msign-services .card-container:focus-within .card-track {
                animation-play-state: paused;
            }

            /* Individual card */

            .msign-services .service-card {
                position: relative;
                display: flex;
                flex-direction: column;
                flex: 0 0 380px;
                width: 320px;
                min-width: 0;
                overflow: hidden;
                border: 1px solid #e4ebf5;
                border-radius: 20px;
                background: #ffffff;
                box-shadow:2px 2px 10px 2px;
                transition:
                    transform .3s ease,
                    box-shadow .3s ease,
                    border-color .3s ease;
            }

            .msign-services .service-card:hover {
                transform: translateY(-7px);
                border-color: #c9ddff;
                box-shadow: 0 18px 40px rgba(22, 48, 85, 0.14);
            }

            /* Image */

            .msign-services .card-image {
                position: relative;
                height: 205px;
                overflow: hidden;
                background: linear-gradient(135deg, #eaf3ff, #f2fbe9);
            }

            .msign-services .card-image img {
                display: block;
                width: 100%;
                height: 100%;

                object-position: center;
                transition: transform .5s ease;
            }

            .msign-services .service-card:hover .card-image img {
                transform: scale(1.055);
            }

            .msign-services .image-label {
                position: absolute;
                left: 15px;
                bottom: 14px;
                display: inline-block;
                max-width: calc(100% - 30px);
                padding: 7px 11px;
                border: 1px solid rgba(255, 255, 255, .8);
                border-radius: 8px;
                background: rgba(255, 255, 255, .94);
                color: #17467c;
                font-size: 11px;
                font-weight: 800;
                letter-spacing: .5px;
            }

            /* Card body */

            .msign-services .card-content {
                display: flex;
                flex: 1;
                flex-direction: column;
                align-items: flex-start;
                padding: 23px 21px 22px;
            }

            .msign-services .card-content h3 {
                min-height: 55px;
                margin: 0 0 12px;
                color: var(--msign-dark);
                font-size: 19px;
                line-height: 1.45;
                font-weight: 800;
            }

            .msign-services .card-content h3 strong {
                color: var(--msign-blue);
            }

            .msign-services .card-content p {
                min-height: 82px;
                margin: 0 0 -50px;
                color: #637187;
                font-size: 13px;
                line-height: 1.8;
            }

            /* Pricing box */

            .msign-services .starting-price {
                width: 100%;
                margin: auto 0 -12px;
                padding: 0px 15px;
                border: 1px solid #e0ebff;
                border-radius: 12px;
                background: linear-gradient(110deg, #f0f6ff, #f5fbed);
            }

            .msign-services .price-label {
                display: block;
                margin-bottom: 5px;
                color: #718096;
                font-size: 10px;
                font-weight: 800;
                letter-spacing: 1.1px;
                text-transform: uppercase;
            }

            .msign-services .starting-price h4 {
                margin: 0;
                color: var(--msign-blue);
                font-size: 27px;
                line-height: 1.3;
                font-weight: 800;
				margin-bottom: 22px;
            }

            .msign-services .starting-price small {
                color: #68778b;
                font-size: 12px;
                font-weight: 500;
            }

            /* Button */

            .msign-services .details-btn {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                width: 100%;
                min-height: 46px;
                padding: 12px 16px;
                border: none;
                border-radius: 10px;
                background: linear-gradient(110deg,
                        var(--msign-blue),
                        #1688e8);
                color: #ffffff;
                text-decoration: none;
                font-size: 13px;
                font-weight: 800;
                transition:
                    background .25s ease,
                    box-shadow .25s ease;
            }

            .msign-services .details-btn span {
                font-size: 18px;
                line-height: 1;
                transition: transform .25s ease;
            }

            .msign-services .details-btn:hover {
                background: linear-gradient(110deg, #0755b5, #0870d4);
                box-shadow: 0 6px 16px rgba(9, 105, 218, .22);
                color: #fff;
            }

            .msign-services .details-btn:hover span {
                transform: translateX(4px);
            }

            .msign-services .details-btn:focus-visible {
                outline: 3px solid #8dbdff;
                outline-offset: 3px;
            }

            /* Accent borders */

            .msign-services .card-1 {
                border-top: 4px solid #0875e1;
            }

            .msign-services .card-2 {
                border-top: 4px solid #19a76a;
            }

            .msign-services .card-3 {
                border-top: 4px solid #7556df;
            }

            .msign-services .card-4 {
                border-top: 4px solid #e5a52c;
            }

            .msign-services .card-5 {
                border-top: 4px solid #079eaf;
            }

            .msign-services .card-6 {
                border-top: 4px solid #43a047;
            }

            .msign-services .card-7 {
                border-top: 4px solid #2473cf;
            }

            /* Infinite loop.
   Each track group must have the same width. */

            @keyframes msignInfiniteScroll {
                from {
                    transform: translateX(0);
                }

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

            /* Tablet */

            @media (max-width: 900px) {
                .msign-services {
                    padding: 50px 0;
                }

                .msign-services .card-track {
                    gap: 18px;
                    animation-duration: 42s;
                }

                .msign-services .service-card {
                    flex-basis: 290px;
                    width: 290px;
                }

                .msign-services .card-image {
                    height: 190px;
                }
            }

            /* Mobile */

            @media (max-width: 600px) {
                .msign-services {
                    padding: 40px 0 45px;
                }

                .msign-services .section-heading {
                    margin-bottom: 22px;
                }

                .msign-services .section-heading h2 {
                    font-size: 28px;
                    letter-spacing: -.5px;
                }

                .msign-services .section-heading p {
                    font-size: 13px;
                    line-height: 1.8;
                }

                .msign-services .card-track {
                    gap: 15px;
                    animation-duration: 36s;
                }

                .msign-services .service-card {
                    flex-basis: 270px;
                    width: 270px;
                    border-radius: 17px;
                }

                .msign-services .card-image {
                    height: 170px;
                }

                .msign-services .card-content {
                    padding: 19px 17px;
                }

                .msign-services .card-content h3 {
                    font-size: 18px;
                }

                .msign-services .starting-price h4 {
                    font-size: 25px;
                }
            }

            /* Accessibility */

            @media (prefers-reduced-motion: reduce) {
                .msign-services .card-track {
                    animation: none;
                }

                .msign-services .service-card,
                .msign-services .card-image img,
                .msign-services .details-btn span {
                    transition: none;
                }
            }
    


			
    :root {
      --blue: #1648ef;
      --blue2: #0c35bf;
      --green: #19b77b;
      --ink: #172033;
      --muted: #657087;
      --line: rgba(125, 150, 205, .28);
      --glass: rgba(255, 255, 255, .72);
      --shadow: 0 22px 65px rgba(28, 58, 125, .12)
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: Inter, Arial, sans-serif;
      background: radial-gradient(ellipse at 8% 4%, rgba(93, 143, 255, .19), transparent 35%), radial-gradient(ellipse at 92% 22%, rgba(88, 220, 184, .13), transparent 28%), linear-gradient(135deg, #f7f9ff, #edf3ff 55%, #f9fbff);
      min-height: 100vh
    }

    button,
    select {
      font: inherit
    }

    .product-page {
      max-width: 1380px;
      margin: auto;
      padding: 34px 22px 65px
    }

    .topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 24px
    }

    .brand {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.8px;
      color: #123aab
    }

    .brand span {
      color: #26b77e
    }

    .cart-top {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 11px 16px;
      background: rgba(255, 255, 255, .7);
      backdrop-filter: blur(18px);
      color: #183b9e;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 25px #193d8510
    }

    .cart-top b {
      display: inline-grid;
      place-items: center;
      min-width: 23px;
      height: 23px;
      margin-left: 7px;
      border-radius: 20px;
      background: var(--blue);
      color: #fff;
      font-size: 12px
    }

    .product-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
      gap: 30px;
      align-items: start
    }

    .glass-card {
      background: var(--glass);
      border: 1px solid rgba(255, 255, 255, .9);
      border-radius: 25px;
     box-shadow: 2px 2px 10px 2px;
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      overflow: hidden
    }

    .gallery-card {
      padding: 20px
    }

    .gallery-main {
      height: 465px;
      border: 1px solid rgba(123, 151, 229, .35);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 25px;
      background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .98), rgba(240, 246, 255, .82));
      overflow: hidden
    }

    .gallery-main img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain
    }

    .gallery-placeholder {
      width: min(100%, 390px);
      aspect-ratio: 1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: radial-gradient(circle, #fff 42%, #f2f6ff 70%, rgba(220, 230, 255, .65));
      border: 2px dashed #bfcbe0;
      box-shadow: inset 0 0 30px #dbe5f9;
      color: #2874ce;
      font-size: clamp(36px, 5vw, 56px);
      font-weight: 800;
      letter-spacing: -3px
    }

    .gallery-placeholder span {
      color: #68b90d
    }

    .thumbs {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap
    }

    .thumb {
      width: 60px;
      height: 58px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255, 255, 255, .8);
      color: #2465c9;
      font-weight: 800;
      font-size: 12px;
      cursor: pointer
    }

    .thumb.active {
      border: 1.5px solid var(--blue);
      box-shadow: 0 0 0 3px #1648ef12
    }

    .product-description {
      padding: 23px 5px 4px;
      line-height: 1.75;
      font-size: 14px;
      color: #4f5c73
    }

    .product-description h2 {
      font-size: 20px;
      line-height: 1.35;
      color: #172c56;
      margin: 0 0 10px
    }

    .details {
      padding: 27px
    }

    .sale-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid #5d85ff;
      border-radius: 25px;
      padding: 7px 14px;
      color: var(--blue);
      background: #f6f8ff;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 16px
    }

    h1 {
      font-size: 27px;
      line-height: 1.25;
      color: #123fce;
      margin: 0 0 15px;
      font-weight: 800;
      letter-spacing: -.7px
    }

    .rating {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 10px;
      font-size: 13px
    }

    .stars {
      color: var(--blue);
      font-size: 22px;
      letter-spacing: 1px;
      line-height: 1
    }

    .sku {
      font-size: 13px;
      color: #4c5870;
      margin-bottom: 23px
    }

    .prices {
      display: flex;
      gap: 13px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 7px
    }

    .old-price {
      font-size: 19px;
      color: #e32332;
      text-decoration: line-through;
      font-weight: 700
    }

    .new-price {
      font-size: 23px;
      color: var(--green);
      font-weight: 800
    }

    .tax-note {
      font-size: 12px;
      color: #59647a;
      margin-bottom: 24px
    }

    .field {
      margin: 0 0 18px
    }

    label {
      display: block;
      color: #173cb5;
      font-weight: 750;
      font-size: 14px;
      margin-bottom: 9px
    }

    .select-wrap {
      position: relative
    }

    .select-wrap:after {
      content: "";
      position: absolute;
      right: 17px;
      top: 16px;
      width: 9px;
      height: 9px;
      border-right: 1.7px solid #4a5670;
      border-bottom: 1.7px solid #4a5670;
      transform: rotate(45deg);
      pointer-events: none
    }

    select {
      appearance: none;
      width: 100%;
      height: 48px;
      border: 1px solid rgba(72, 112, 239, .52);
      border-radius: 13px;
      padding: 0 42px 0 14px;
      background: rgba(255, 255, 255, .84);
      color: #27334b;
      font-size: 14px;
      font-weight: 650;
      cursor: pointer;
      outline: none;
      transition: .2s;
      box-shadow: 2px 2px 10px 2px ;
    }

    select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px #1648ef14
    }

    .quantity-label {
      font-size: 14px;
      font-weight: 700;
      margin: 21px 0 10px
    }

    .quantity {
      height: 47px;
      width: 132px;
      border: 1px solid rgba(85, 103, 139, .48);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      background: rgba(255, 255, 255, .75)
    }

    .quantity button {
      border: 0;
      background: transparent;
      width: 40px;
      height: 100%;
      font-size: 23px;
      color: #26354e;
      cursor: pointer
    }

    .quantity output {
      font-size: 15px;
      font-weight: 700;
      min-width: 25px;
      text-align: center
    }

    .buy-button,
    .checkout-button {
      display: block;
      width: 100%;
      margin-top: 25px;
      border: 0;
      border-radius: 14px;
      background: linear-gradient(115deg, #ff9f00, #ff9f00);
      color: #fff;
      font-weight: 750;
      height: 51px;
      cursor: pointer;
      box-shadow: 0 12px 25px rgba(22, 72, 239, .22);
      transition: transform .2s, box-shadow .2s
    }

    .buy-button:hover,
    .checkout-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 30px rgba(22, 72, 239, .28)
    }

    .help {
      font-size: 11px;
      color: var(--muted);
      margin-top: 14px;
      line-height: 1.65
    }



    /* SignX price-list and information section */
    .signx-info-section {
      margin-top: 30px;
      padding: clamp(20px, 3vw, 34px);
      background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(241,246,255,.94));
      border: 1px solid rgba(125,150,205,.3);
      border-radius: 25px;
      box-shadow: var(--shadow);
    }
    .signx-section-heading { text-align: center; max-width: 900px; margin: 0 auto 25px; }
    .signx-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:30px; background:#eaf0ff; color:#1648ef; font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
    .signx-section-heading h2 { margin:14px 0 10px; color:#123aab; font-size:clamp(23px,3vw,32px); letter-spacing:-.7px; }
    .signx-section-heading p { margin:0; color:#657087; font-size:16px; line-height:1.8; }
    .signx-table-wrap { overflow-x:auto; border:1px solid #dfe7fb; border-radius:17px; background:#fff; }
    .signx-price-table { width:100%; border-collapse:collapse; min-width:650px; }
    .signx-price-table th { padding:16px 18px; text-align:left; color:#fff; background:linear-gradient(110deg,#1648ef,#315fff); font-size:13px; letter-spacing:.2px; }
    .signx-price-table td { padding:16px 18px; border-bottom:1px solid #edf1fb; color:#26354e; font-size:14px; }
    .signx-price-table tr:last-child td { border-bottom:0; }
    .signx-price-table tbody tr:nth-child(even) { background:#f7f9ff; }
    .signx-price-table tbody tr:hover { background:#eef3ff; }
    .signx-price-table td:first-child { font-weight:750; color:#173b9f; }
    .signx-price-table td:not(:first-child) { font-weight:800; font-variant-numeric:tabular-nums; }
    .signx-product-tag { display:inline-block; margin-left:7px; padding:4px 7px; border-radius:6px; background:#e8fbf2; color:#08794b; font-size:10px; font-weight:800; vertical-align:middle; }
    .signx-price-note { display:flex; align-items:flex-start; gap:10px; margin:16px 0 0; padding:14px 16px; border-radius:13px; background:#fff8e9; color:#78531a; font-size:12px; line-height:1.7; }
    .signx-content-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:25px; }
    .signx-content-card { padding:20px; border:1px solid #e4eafa; border-radius:17px; background:rgba(255,255,255,.82); box-shadow: 2px 2px 10px 2px; }
    .signx-content-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:13px; border-radius:13px; color:#1648ef; background:#eaf0ff; font-size:18px; }
    .signx-content-card h3 { margin:0 0 8px; color:#172c56; font-size:20px; }
    .signx-content-card p { margin:0; color:#657087; font-size:18px; line-height:1.8; }
    .signx-info-footer { margin-top:20px; color:#68748b; font-size:12px; line-height:1.8; text-align:center; }
    @media(max-width:820px) { .signx-content-grid { grid-template-columns:1fr; } .signx-price-table th,.signx-price-table td { padding:13px 14px; } }

    .cart-section {
      margin-top: 30px;
      padding: 25px
    }

    .cart-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px
    }

    .cart-heading h2 {
      margin: 0;
      font-size: 22px;
      color: #172c56
    }

    .cart-heading p {
      margin: 6px 0 0;
      font-size: 12px;
      color: var(--muted)
    }

    .clear-cart {
      border: 1px solid #f0caca;
      background: #fff8f8;
      color: #b52b3a;
      border-radius: 10px;
      padding: 9px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer
    }

    .empty-cart {
      text-align: center;
      padding: 30px 10px;
      color: #778198;
      font-size: 13px;
      line-height: 1.7
    }

    .empty-cart i {
      display: block;
      font-size: 29px;
      margin-bottom: 10px;
      color: #9cabc4
    }

    .cart-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      padding: 17px 0;
      border-top: 1px solid var(--line)
    }

    .cart-item h3 {
      margin: 0 0 7px;
      font-size: 14px;
      color: #203153
    }

    .cart-item p {
      margin: 0;
      color: #66718a;
      font-size: 12px;
      line-height: 1.8
    }

    .cart-item-right {
      text-align: right;
      min-width: 115px
    }

    .cart-item-price {
      font-size: 16px;
      font-weight: 800;
      color: #143fc4
    }

    .remove-item {
      display: block;
      margin: 8px 0 0 auto;
      border: 0;
      background: transparent;
      color: #c12f3b;
      font-size: 11px;
      cursor: pointer
    }

    .cart-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--line);
      padding-top: 17px;
      margin-top: 5px;
      font-size: 14px;
      font-weight: 800
    }

    .cart-total strong {
      font-size: 22px;
      color: #153fc4
    }

    .checkout-button {
      background: linear-gradient(115deg, #16a66d, #25c889);
      box-shadow: 0 12px 25px #19b77b26
    }

    .footer-note {
      text-align: center;
      color: #748099;
      font-size: 11px;
      padding: 24px 10px 0
    }

    @media(max-width:820px) {
      .product-grid {
        grid-template-columns: 1fr;
        gap: 20px
      }

      .gallery-main {
        height: min(76vw, 440px);
        min-height: 270px
      }

      .details {
        padding: 23px
      }

      .product-page {
        padding: 20px 13px 45px
      }
    }

    @media(max-width:480px) {
      .topline {
        margin-bottom: 16px
      }

      .brand {
        font-size: 18px
      }

      .gallery-card {
        padding: 12px
      }

      .details {
        padding: 19px 15px
      }

      h1 {
        font-size: 23px
      }

      .cart-section {
        padding: 17px
      }

      .cart-heading h2 {
        font-size: 19px
      }

      .cart-item {
        gap: 9px
      }

      .cart-item-right {
        min-width: 90px
      }
    }