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

 img {
     max-width: 100%;
     height: auto;
 }

 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
 }

 ul {
     list-style: none;
 }

 .max-container {
     --inline-spacing: 3rem;
     width: min(96rem, 100% - var(--inline-spacing));
     margin-inline: auto;

     @media (max-width: 1536px) {
         --inline-spacing: 5rem;
     }
 }

 body {
     --color-primary: #121212;
     --color-base: #7B7B7B;
     font-family: Arial, sans-serif;
     background: #f3f3f3;
     color: var(--color-primary);
 }

 p {
     line-height: 1.75;
 }

 .header {
     background: #003867;
     color: white;
     padding-inline: 3rem;
     display: flex;
     column-gap: 2rem;
     border-radius: 12px;
     justify-content: space-between;
     align-items: center;
     margin-top: 1.5rem;
 }

 .header .left {
     display: flex;
     gap: 50px;
     padding-block: 1.875rem;

     .seperator {
         width: 1px;
         background-color: #fff;
     }

     nav {
         display: flex;
         flex-direction: column;
         justify-content: space-between;

         a {
             text-decoration: none;
             color: #fff;
             font-size: 1.375rem;
         }
     }

     .title {
         font-size: 1.875rem;
         line-height: 3rem;
         max-inline-size: 580px;
     }
 }

 .header .right {
     background: #F98B1C;
     padding: 10px 15px;
     align-self: stretch;
     display: grid;
     row-gap: 1rem;
     place-content: center;
     min-width: fit-content;

     span {
         font-size: 1.5rem;
         font-weight: 700;
     }

     ul {
         list-style: none;
         font-size: 18px;

         li+li {
             margin-top: 8px;
         }
     }
 }

 .header .right div {
     font-size: 12px
 }

 .layout-wrapper {
     display: flex;
 }

 .image-gallery {
     flex: 1;
     padding: 10px
 }

 .image-gallery img {
     width: 100%;
     border: 1px solid #ccc;
     margin-bottom: 10px
 }

 .main-img {
     height: 300px;
     object-fit: contain;
     background: #eee
 }

 .details {
     flex: 1;
 }

 .details h1 {
     font-size: 2rem;
     line-height: 3rem;
     font-weight: 600;
 }

 .info-grid {
     --min-grid-size: 250px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--min-grid-size), 1fr));
     gap: 12px;
     margin-top: 30px;

 }

 .info-grid div {
     background: #f6f6f6;
     padding: 1.5rem;
     border-radius: 0.75rem;
     border: 1px solid #ddd;
     background-color: #fff;
     display: flex;
     flex-direction: column;
     row-gap: 0.5rem;

     .subtitle {
         color: var(--color-base);
     }
 }

 .features {
     font-size: 1.125rem;
     padding-top: 1.875rem;
     margin-top: 1.875rem;
     border-top: 1px solid #DBDBDB;
 }

 .features ul {
     list-style: none;
     padding-left: 10px;
     line-height: 2rem;

     li {
         color: var(--color-base);
         display: flex;
         align-items: center;
         column-gap: 0.5rem;

         strong {
             color: var(--color-primary);
         }
     }
 }

 .features li::before {
     content: "- "
 }

 .section-title {
     font-weight: bold;
     margin-bottom: 10px;

     &:not(:first-child) {
         margin-top: 1.5rem;
     }
 }

 .description {
     margin-top: 20px;
     font-size: 18px;
     line-height: 1.5;
     color: var(--color-base);

     .section-title {
         color: var(--color-primary);
     }
 }

 .shipping {
     background: red;
     color: white;
     padding: 10px;
     font-weight: bold;
     margin-bottom: 10px
 }

 .footer p {
     font-size: 13px;
     margin: 8px 0
 }


 /* gallary styling */
 .gallery-container {
     margin-top: 2rem;
     display: flex;
     gap: 2rem;
     align-items: flex-start;
 }

 .product-gallery {
     display: flex;
     gap: 2rem;
     width: 48rem;
     max-width: 100%;

     .product {
         display: unset;
         padding: unset;
         width: 100%;
     }
 }

 .thumbnail-group {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     align-items: center;
     flex-shrink: 0;
 }

 .tab-btn {
     position: absolute;
     width: 1px;
     height: 1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);

     &:not(:checked)+.thumbnail:hover img {
         scale: 1.05;
         cursor: zoom-in;
     }
 }

 .thumbnail {
     --thumbnail-dimension: 10rem;
     border: 1px solid #DBDBDB;
     overflow: hidden;
     width: var(--thumbnail-dimension);
     height: var(--thumbnail-dimension);
     aspect-ratio: 1 / 1;
     display: inline-block;
     border-radius: 0.5rem;

     img {
         transition: 100ms ease;
     }
 }

 .preview-box {
     border: 1px solid #DBDBDB;
     border-radius: 0.5rem;
     overflow: hidden;
     width: 100%;
     height: 100%;

     .preview-content {
         display: none;
         width: 100%;
         height: 100%;
         animation: img-reveal 500ms cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
     }
 }

 .preview-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .product-gallery:has(#preview-1:checked) .preview-content[data-tab=preview-1],
 .product-gallery:has(#preview-2:checked) .preview-content[data-tab=preview-2],
 .product-gallery:has(#preview-3:checked) .preview-content[data-tab=preview-3],
 .product-gallery:has(#preview-4:checked) .preview-content[data-tab=preview-4],
 .product-gallery:has(#preview-5:checked) .preview-content[data-tab=preview-5],
 .product-gallery:has(#preview-6:checked) .preview-content[data-tab=preview-6],
 .product-gallery:has(#preview-7:checked) .preview-content[data-tab=preview-7],
 .product-gallery:has(#preview-8:checked) .preview-content[data-tab=preview-8],
 .product-gallery:has(#preview-9:checked) .preview-content[data-tab=preview-9],
 .product-gallery:has(#preview-10:checked) .preview-content[data-tab=preview-10] {
     display: block;
 }

 @keyframes img-reveal {
     0% {
         opacity: 0;
         scale: 0;
     }

     100% {
         opacity: 1;
         scale: 1;
     }
 }


 /* Tab group styling */
 .product-tab-block {
     padding-block: 1.875rem;
     margin-block: 1.875rem;
     border-top: 1px solid #DBDBDB;
     border-bottom: 1px solid #DBDBDB;

     .tab-buttons {
         display: flex;
         align-items: center;
         overflow-x: auto;
         scrollbar-width: thin;
         scroll-snap-type: x mandatory;
         gap: 1.25rem;
         flex-wrap: wrap;

         >div {
             scroll-snap-align: start;
             flex-shrink: 0;
         }

         .tab-label {
             padding: 0.75rem;
             font-size: 1rem;
             white-space: nowrap;
             display: block;
             border-bottom: 2px solid #e0dede;
             cursor: pointer;
             transition: 200ms linear;
             line-height: 1;
             background-color: #fff;

             &:hover {
                 border-color: var(--color-base);
             }
         }

         .tab-btn:checked+.tab-label {
             border-color: var(--color-primary);
             color: #fff;
             background-color: #003867;
         }
     }

     .tab-container {
         --para-distance: 1rem;
         margin-top: 1.175rem;
         padding-inline: 0.75rem;
         color: var(--color-base);
         font-size: 1.125rem;

         p {
             line-height: 1.5;
         }

         .tab-content {
             display: none;
             animation: tab-reveal 200ms linear forwards;

             ul {
                 list-style: disc;
                 margin-top: 1rem;

                 li {
                     margin-top: 0.25rem;
                 }
             }

             p {
                 margin-top: var(--para-distance);
             }

             .list-inside {
                 ul {
                     padding-inline-start: 3rem;
                 }
             }
         }

         .shipping-details-block {
             display: flex;
             gap: 2rem;
             align-items: center;

             .guidline-img {
                 border-radius: 0.75rem;
             }

             ul {
                 list-style: none;

                 &>li {
                     margin-top: 1.5rem;
                 }
             }
         }

         .about-us-block {
             >*+* {
                 margin-top: var(--para-distance);
             }

             .itenary-lists,
             .bold-text {
                 color: var(--color-primary);
                 font-weight: 600;
             }

             ul {
                 padding-inline-start: 1.5rem;
             }
         }

         .customer-service-block,
         .satisfaction-block,
         .expert-advice_block {
             >*+* {
                 margin-top: var(--para-distance);
             }
         }

         .contact-us_btn {
             background-color: #003867;
             text-decoration: none;
             text-align: center;
             border-radius: 0.5rem;
             padding: 0.75rem;
             font-size: 1.125rem;
             color: #ffffff;
             display: inline-block;
             transition: 200ms ease;
             font-size: 1rem;
         }

         &:hover {
             opacity: 0.9;
         }
     }

     .bold-text {
         display: inline-block;
         color: var(--color-primary);
         font-weight: 600;
         font-size: 1.25rem;
     }
 }


 /* Tab controller */
 .product-tab-block:has(input[type=radio]#tab-1:checked) .tab-content[data-tab=tab-1],
 .product-tab-block:has(input[type=radio]#tab-2:checked) .tab-content[data-tab=tab-2],
 .product-tab-block:has(input[type=radio]#tab-3:checked) .tab-content[data-tab=tab-3],
 .product-tab-block:has(input[type=radio]#tab-4:checked) .tab-content[data-tab=tab-4],
 .product-tab-block:has(input[type=radio]#tab-5:checked) .tab-content[data-tab=tab-5] {
     display: block;
 }

 @keyframes tab-reveal {
     0% {
         transform: translateY(10px);
         opacity: 0;
     }

     100% {
         transform: translateY(0px);
         opacity: 1;
     }
 }

 /* Footer section styling */

 footer {
     .template-footer {
         padding: 2rem 3rem;
         border-radius: 0.875rem;
         background-color: #ffffff;
         display: flex;
         align-items: center;
         gap: 3rem;

         .pay-partners {
             display: flex;
             align-items: center;
             flex-wrap: wrap;
             gap: 1.75rem;

             .card-text {
                 color: #003867;
                 font-size: 22px;
                 text-transform: uppercase;
             }

             >* {
                 height: 4.375rem;
                 border-radius: 0.875rem;
                 border: 1px solid #DBDBDB;
                 padding: 0.5rem 1rem;
                 display: grid;
                 place-content: center;
                 font-weight: 500;

                 &:not(:first-child) {
                     width: 7.5rem;
                     padding-inline: 0.5rem;
                 }
             }
         }
     }

     .powered-by {
         text-align: center;
         margin-block: 2rem;
     }
 }

 /* ============= Responsive styling starts Here ============== */

 @media (max-width: 1536px) {
     .header {
         padding-inline: 2rem;

         .header-logo {
             max-width: 150px;
         }

         .left {
             gap: 1.5rem;

             .title {
                 font-size: 1.5rem;
                 line-height: 2.5rem;
             }

             nav a {
                 font-size: 1.125rem;
                 white-space: nowrap;
             }
         }
     }

     .details h1 {
         font-size: 2rem;
     }

     .product-gallery {
         width: 40rem;

         .product {
             display: unset;
             padding: unset;
         }
     }

     footer {
         .footer-logo {
             max-width: 150px;
         }

         & .template-footer {
             gap: 24px;

             & .pay-partners {
                 gap: 1.125rem;

                 >* {
                     height: 3.5rem;
                 }
             }
         }
     }

 }

 @media (max-width: 1200px) {
     .max-container {
         --inline-spacing: 2rem;
     }

     .header {
         .header-logo {
             max-width: 120px;
         }

         .left {


             .title {
                 font-size: 1.25rem;
                 line-height: 2rem;
             }

             nav a {
                 font-size: 1rem;
             }
         }

         .right {
             span {
                 font-size: 1.25rem;
             }

             ul {
                 font-size: 1rem;
             }
         }
     }

     .details h1 {
         font-size: 1.5rem;
         line-height: 2.5rem;
     }

     .gallery-container {
         gap: 1.25rem;

         .product-gallery {
             gap: 1rem;

             .thumbnail {
                 --thumbnail-dimension: 8rem;
             }
         }
     }
 }

 @media (max-width: 992px) and (min-width:768px) {
     .gallery-container {

         /* flex-direction: column; */
         .product-gallery {
             width: 50%;
             flex-direction: column-reverse;

             .thumbnail-group {
                 flex-direction: row;
                 overflow-x: auto;
                 scrollbar-width: thin;
             }
         }

         .info-grid {
             --min-grid-size: 160px;
         }
     }
 }

 @media (max-width: 992px) {
     .product-tab-block {
         & .tab-container {

             .shipping-details-block {
                 flex-direction: column;
                 align-items: flex-start;
             }
         }

         .tab-btn:not(:checked)+.tab-label {
             border: 1px solid #003867;
         }
     }

     .product-gallery {
         width: 100%;
     }
 }

 @media (max-width: 767px) {
     .header {
         .left {
             row-gap: 1rem;
             flex-direction: column;
             padding-block: 1.25rem;

             nav {
                 flex-direction: row;
                 justify-content: flex-start;
                 column-gap: 1.25rem;
             }

             .seperator {
                 width: 100%;
                 height: 1px;
             }
         }
     }

     .gallery-container {
         flex-direction: column;

         .details h1 {
             line-height: 2rem;
         }

         .info-grid {
             margin-top: 1rem;
         }
     }

     footer {
         .template-footer {
             padding: 1.5rem;
             flex-direction: column;
             align-items: flex-start;

             & .pay-partners {
                 gap: 0.5rem;

                 .card-text {
                     font-size: 1rem;
                 }

                 &>*:not(:first-child) {
                     width: 5rem;
                 }
             }
         }
     }

     p,
     li {
         font-size: 1rem !important;
     }

     .product-tab-block {
         .bold-text {
             margin-bottom: 0;
         }

         .tab-buttons {
             gap: 0.5rem;
         }
     }
 }

 @media (max-width: 600px) {
     .header {
         flex-direction: column;
         padding: 1.5rem 0px;

         .left {
             padding-inline: 1.5rem;
         }
     }

     .product-gallery {
         flex-direction: column-reverse;

         .thumbnail-group {
             flex-direction: row;
             overflow-x: auto;
             scrollbar-width: thin;
         }

         .thumbnails {
             flex-direction: column-reverse;

             .thumbnailsInner {
                 flex-direction: row;
                 overflow-x: auto;
                 scrollbar-width: thin;
             }
         }
     }
 }