:root{
   --navy-blue: #002244;
   --golden-yellow: #FFC000;
   --white: #FFFFFF;  
   --dark-blue: #0C2340;
   --Uranian-Blue: #AFDBF5;
   --peacock-blue: #005f69;


   --ff-primary: 'Poppins', sans-serif;
   
   --ff-body:var(--ff-primary);
   --ff-heading:var(--ff-primary);

   --fw-regular: 400;
   --fw-medium: 500;
   --fw-bold: 600;

   --fs-400: 1rem;
   --fs-450: 1.25rem;
   --fs-500: 2rem;
   --fs-600: 3.5rem;

   --fs-body:var(--fs-400);
   --fs-primary-heading:var(--fs-600);
   --fs-secondary-heading:var(--fs-500);
}

@media(min-width: 50em){
   :root{
      --fs-400: 1.125rem;
      --fs-450: 1.8rem;
      --fs-500: 3.313rem;
      --fs-600: 4.375rem;
   }
}

/* Box sizing rules */
*, 
*::before,
*::after{
   box-sizing: inherit;
}

/* Remove default margin */
* {
   margin: 0;
   padding: 0;
 }

 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
   scroll-behavior: smooth;
 }
 
 html, body {
   height: 100%;
 }

html{
   box-sizing: border-box;
   font-size: 100%;
   scroll-behavior: smooth;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
   text-decoration-skip-ink: auto;
 }
 
 /* Make images easier to work with */
 img,
 picture,
 svg {
   max-width: 100%;
   display: block;
 }
 
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   html:focus-within {
     scroll-behavior: auto;
   }
 
   *,
   *::before,
   *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
 }


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

 /*Navigation*/
 .primary-header{
   margin-top: 2rem;
   display: flex;
 }
.nav-wrapper{
   display: flex;
   justify-content: space-between;
   align-items: center;

}
.mobile-nav-toggle{
   display: none;
}

.nav-list{
   display: flex;
   gap: 100px;
}

.nav-list a{
   text-decoration: none;
   color: var(--navy-blue);
   font-size: var(--fs-400);
   font-weight: var(--fw-medium);
   transition: 0.3s;
 }
 .nav-list a:hover,
 .nav-list a:focus{
   color: var(--golden-yellow);
 }

@media (max-width: 50em){
 .primary-navigation{
   display: none;

   position: fixed;
   padding: 3rem;
   position: fixed; 
   inset: 6.25rem 1rem auto;
   background-color: var(--white);
   border-radius: 4px;
   box-shadow: 0 0.25em rgb(0, 0, 0, 0.15);
 }  

 .nav-list{
   display: grid;
   gap: 2rem;;
   text-align: center;
   font-weight: var(--fw-medium);
 }

 .primary-navigation[data-visible]{
   display: block;
    
 }

 .primary-navigation[data-visible] .mobile-nav-toggle{
   background-image: url('images/close\ \(2\).png');
 }

 .mobile-nav-toggle{
   display: block;
   position: fixed;
   top: 2rem;
   right: 2rem;
   cursor: pointer;
   background: transparent;
   border: 0;
   width: 3em;
   aspect-ratio: 1;

   background-image: url('images/hamburger\ open.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   }
   
   .mobile-nav-toggle[aria-expanded="true"]{
      background-image: url('images/close\ \(2\).png');
   }
   }

.container{
   --max-width: 1400px;
   --padding: 1rem;

   width: min(var(--max-width), 100% - (var(--padding) *2));
   margin-inline: auto;
}
.container img{
   height: 150px;
   width: 190px;
   object-fit: contain;
}

.Home-image{
   background-image: url(images/Market-small.jpg);
   height: 551px;
   width: 350px;
   border-radius: 2px;
}

.title{
   font-weight: var(--fw-bold);
   font-size: var(--fs-500);
   margin-top: 80px;
}



.subtitle-2{
   font-size: var(--fs-secondary-heading);
   font-weight: var(--fw-bold);
   margin-top: 90px;
}

.blurb{
   font-size: var(--fs-450);
   font-weight: var(--fw-regular);
}

.button-container{
   margin-left: 0px;
   margin-top: 20px;
   padding: 1rem;
}
.button{
   cursor: pointer;
   border: 0;
   border-radius: 100vmax;
   padding: 1em 2em;
   font-weight: var(--fw-bold);
   font-size: var(--fs-400);
   text-decoration: none;
   color: var(--white);
   background-color: var(--golden-yellow);
   box-shadow: 0 1em 1em -1em var(--navy-blue);
   transition: 0.5s;
}

.button:hover,
.button:focus-visible{
   background-color: var(--dark-blue);
   
}


/*About Page*/
.about-container{
   --max-width: 1400px;
   --padding: 1rem;

   width: min(var(--max-width), 100% - (var(--padding) *2));
   margin-inline: auto;
   margin-top: 30px;

}
/*Product Page*/

.subtitle-1{
   font-size: var(--fs-secondary-heading);
   font-weight: var(--fw-bold);
   
}
.Heading{
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: var(--fs-secondary-heading);
   padding: 30px;
}

.product-cards{
   display: flex;
   justify-content: center;
   align-items: center;
}

/*card 1*/
.card{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/Lock\ Image\ final.png);
   background-size: cover;
   padding: 8rem 0 0;
   max-width: 30ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card:hover,
.card:focus-within{
   transform: scale(1.1);
}
.card-content{
   --padding: 2rem;
   padding:var(--padding);
   background: linear-gradient(
      hsl(0 0% 0% / 0),
      hsl(20 0% 0% / 0.3) 19%,
      hsl(0 0% 0% / 1)
   );
}
.card-title{
   position: relative;
   width: max-content;
}
.card-title::after{
   content: "";
   position: absolute;
   height: 3px;
   left: calc(var(--padding)* -1);
   bottom: 0;
   background: var(--golden-yellow);
   width: calc(100% + var(--padding));
   transform-origin: left;
   transition: transform 450ms ease;
}
.card:hover .card-title::after,
.card:focus-within .card-title::after{
   transform: scaleX(1);
}
.card-body{
   color: rgb(255 255 255 / 0.9);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card:hover .card-content,
.card:focus-within .card-content{
   transform: translateY(0);
}

.card:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card:hover .card-content > *:not(.card-title),
.card:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}

}
.card-link{
   cursor: pointer;
   display: inline;
   text-decoration: none;
   color: var(--navy-blue);
   background-color: var(--golden-yellow);
   padding: 0.25em 1em;
   font-size: var(--fs-body);
   font-weight: var(--fw-medium);
} 

.card-link:hover, 
.button:focus{
   background-color: var(--navy-blue);
   color: var(--white);
}

/*card djeep*/
.card-djeep{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/DJEEP\ cover\ image.jpg);
   background-size: cover;
   padding: 8rem 0 0;
   max-width: 25ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-djeep:hover,
.card-djeep:focus-within{
   transform: scale(1.1);
}
.card-djeep-content{
   --padding: 2rem;
   padding:var(--padding);
   background: linear-gradient(
      hsl(0 0% 0% / 0),
      hsl(20 0% 0% / 0.3) 19%,
      hsl(0 0% 0% / 1)
   );
}
.card-djeep-title{
   position: relative;
   width: max-content;
}
.card-djeep-title::after{
   content: "";
   position: absolute;
   height: 3px;
   left: calc(var(--padding)* -1);
   bottom: 0;
   background: var(--golden-yellow);
   width: calc(100% + var(--padding));
   transform-origin: left;
   transition: transform 450ms ease;
}
.card-djeep:hover .card-title::after,
.card-djeep:focus-within .card-title::after{
   transform: scaleX(1);
}
.card-djeep-body{
   color: rgb(255 255 255 / 0.9);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-djeep:hover .card-content,
.card-djeep:focus-within .card-content{
   transform: translateY(0);
}

.card-djeep:focus-within .card-content{
   transition-duration: 0ms;
}

.card-djeep-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-djeep:hover .card-content > *:not(.card-title),
.card-djeep:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-djeep-title::after{
   transform: scaleX(0);
}

}
.card-djeep-link{
   cursor: pointer;
   display: inline;
   text-decoration: none;
   color: var(--navy-blue);
   background-color: var(--golden-yellow);
   padding: 0.25em 1em;
   font-size: var(--fs-body);
   font-weight: var(--fw-medium);
} 

.card-djeep-link:hover, 
.button:focus{
   background-color: var(--navy-blue);
   color: var(--white);
}

/*card 2*/
.card-2{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/Air\ Freshners\ Image.jpg);
   background-size: cover;
   padding: 8rem 0 0;
   max-width: 30ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-2:hover,
.card-2:focus-within{
   transform: scale(1.1);
}
.card-2:hover .card-title::after,
.card-2:focus-within .card-title::after{
   transform: scaleX(1);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-2:hover .card-content,
.card-2:focus-within .card-content{
   transform: translateY(0);
}

.card-2:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-2:hover .card-content > *:not(.card-title),
.card-2:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}

}

/*card 3*/
.card-3{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/Spice\ Image.jpg);
   background-size: cover;
   padding: 8rem 0 0;
   max-width: 30ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-3:hover,
.card-3:focus-within{
   transform: scale(1.1);
}
.card-3:hover .card-title::after,
.card-3:focus-within .card-title::after{
   transform: scaleX(1);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-3:hover .card-content,
.card-3:focus-within .card-content{
   transform: translateY(0);
}

.card-3:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-3:hover .card-content > *:not(.card-title),
.card-3:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}

}

/*card 4*/
.card-4{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/\(1\)\ K20-F.png);
   background-size: cover;
   padding: 17rem 0 0;
   max-width: 35ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-4:hover,
.card-4:focus-within{
   transform: scale(1.1);
}
.card-4:hover .card-title::after,
.card-4:focus-within .card-title::after{
   transform: scaleX(1);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-4:hover .card-content,
.card-4:focus-within .card-content{
   transform: translateY(0);
}

.card-4:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-4:hover .card-content > *:not(.card-title),
.card-4:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}

}
/*card 5*/
.card-5{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/K9-5W.png);
   background-size: cover;
   padding: 7rem 0 0;
   max-width: 35ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-5:hover,
.card-5:focus-within{
   transform: scale(1.1);
}
.card-5:hover .card-title::after,
.card-5:focus-within .card-title::after{
   transform: scaleX(1);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-5:hover .card-content,
.card-5:focus-within .card-content{
   transform: translateY(0);
}

.card-5:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-5:hover .card-content > *:not(.card-title),
.card-5:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}

}

/*card 6*/
.card-6{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/\(3\)\ L7.png);
   background-size: cover;
   padding: 10rem 0 0;
   max-width: 49ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-6:hover,
.card-6:focus-within{
   transform: scale(1.1);
}
.card-6:hover .card-title::after,
.card-6:focus-within .card-title::after{
   transform: scaleX(1);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-6:hover .card-content,
.card-6:focus-within .card-content{
   transform: translateY(0);
}

.card-6:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-6:hover .card-content > *:not(.card-title),
.card-6:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}

}


/*card 7*/
.card-7{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/\(4\)\ L8.png);
   background-size: cover;
   padding: 3rem 0 0;
   max-width: 45ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-7:hover,
.card-7:focus-within{
   transform: scale(1.1);
}
.card-7:hover .card-title::after,
.card-7:focus-within .card-title::after{
   transform: scaleX(1);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-7:hover .card-content,
.card-7:focus-within .card-content{
   transform: translateY(0);
}

.card-7:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-7:hover .card-content > *:not(.card-title),
.card-7:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}
}

/*card 8*/
.card-8{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/\(5\)\ S500-C.png);
   background-size: cover;
   padding: 5rem 0 0;
   max-width: 90ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-8:hover,
.card-8:focus-within{
   transform: scale(1.1);
}
.card-8:hover .card-title::after,
.card-8:focus-within .card-title::after{
   transform: scaleX(1);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-8:hover .card-content,
.card-8:focus-within .card-content{
   transform: translateY(0);
}

.card-8:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-8:hover .card-content > *:not(.card-title),
.card-8:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}

}

/*card 9*/
.card-9{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/\(6\)\ R6-5.png);
   background-size: cover;
   padding: 1rem 0 0;
   max-width: 35ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-9:hover,
.card-9:focus-within{
   transform: scale(1.1);
}
.card-9:hover .card-title::after,
.card-9:focus-within .card-title::after{
   transform: scaleX(1);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-9:hover .card-content,
.card-9:focus-within .card-content{
   transform: translateY(0);
}

.card-9:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-9:hover .card-content > *:not(.card-title),
.card-9:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}

}

/*card 10*/
.card-10{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/\(7\)\ M5-W.png);
   background-size: cover;
   padding: 10rem 0 0;
   max-width: 43ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-10:hover,
.card-10:focus-within{
   transform: scale(1.1);
}
.card-10:hover .card-title::after,
.card-10:focus-within .card-title::after{
   transform: scaleX(1);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-10:hover .card-content,
.card-10:focus-within .card-content{
   transform: translateY(0);
}

.card-10:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-10:hover .card-content > *:not(.card-title),
.card-10:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}

}

/*card 11*/
.card-11{
   color: var(--white);
   line-height: 1.6;
   background-image: url(images/\(8\)\ M5.png);
   background-size: cover;
   padding: 10rem 0 0;
   max-width: 35ch;
   border-radius: 0.7rem;
   overflow: hidden;

   transition: transform 450ms ease;
}
.card-11:hover,
.card-11:focus-within{
   transform: scale(1.1);
}
.card-11:hover .card-title::after,
.card-11:focus-within .card-title::after{
   transform: scaleX(1);
}
@media (hover){
   .card-content{
      transform: translateY(68%);
      transition: transform 450ms ease;
   }
   
.card-11:hover .card-content,
.card-11:focus-within .card-content{
   transform: translateY(0);
}

.card-11:focus-within .card-content{
   transition-duration: 0ms;
}

.card-content > *:not(.card-title) {
   opacity: 0;
   transition: opacity 450ms linear;
}

.card-11:hover .card-content > *:not(.card-title),
.card-11:focus-within .card-content > *:not(.card-title){
   opacity: 1;
   transition-delay: 12s0ms;

}
.card-title::after{
   transform: scaleX(0);
}

}


.info{
   margin-top: 60px;
}

.Smart-locks{
   background-color: var(--dark-blue);
   color: var(--white);
   padding: 50px;
}
.features{
   text-align: center;
   font-weight: var(--fw-medium);
   display: flex;
   justify-content: center;
   align-items: center;
}

.kaadas{
   font-size: var(--fs-450);
   text-align: center;
}

.kaadas-1{
   width: 100%;
}

.Spices{
   background-color: var(--Uranian-Blue);
   text-align:left;
   padding: 50px;
}


.PS{
   width: 300px;
   height: 300px;
}



.Air-Freshners{
   background-color: var(--peacock-blue);
   color: var(--white);
   padding: 50px;
}
/*Contact Page*/

.contact-details{
   font-size: var(--fs-body);
   font-weight: var(--fw-medium);
}
iframe{
   margin-top: 60px;
}

.subtitle-1{
   font-size: var(--fs-secondary-heading);
   font-weight: var(--fw-bold);
   
}

.even-columns h3{
   margin-top: 15px;
}


/*genral styling*/
body{
   text-rendering: optimizeSpeed;
   line-height: 1.5;
   font-size: var(--fs-body);
   font-family: var(--ff-body);
   color: var(--navy-blue);
}

.even-columns{
   display: grid;
   gap: 1rem;
}

@media (min-width: 50em){
.even-columns{
   grid-auto-flow: column;
   grid-auto-columns: 1fr;

}
}
/*social page*/
.socialpage{
   background-color: var(--navy-blue);
   color: var(--white);
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   font-size: var(--fs-secondary-heading);
   font-weight: var(--fw-medium);
   

}


/*footer naivation*/
footer{
   background-color: var(--navy-blue);
   display: flex;
   color: var(--white);
   margin-top: 0;
   padding: 30px;
   
}
.tag{
   margin-inline: auto;
}
.tag a{
   color: var(--white);
   text-decoration: none;
   font-weight: var(--fw-bold);
   font-size: 25px;
}
.social-list{
   display: flex;
   gap: 20px;
}
.social-list i{
   color: var(--white);
}

.social-list a:is(:hover, :focus) i{
   color: var(--golden-yellow);
}

.foot-nav{
   margin-inline: auto;
}

.footer-nav a{
   color: var(--white);
   text-decoration: none;
}

.footer-nav a:where(:hover, :focus){
   color: var(--golden-yellow);
}

.add-info{
   margin-inline: auto;
}
.prod-foot{
   background-color: var(--navy-blue);
   display: flex;
   color: var(--white);
   padding: 30px;
   margin-top: auto;
}
.cc{
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 10px;
}
.reflinks{
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 10px;
}
.reflinks a{
   color: var(--white);
   text-decoration: none;
}
.reflinks a:hover,
 .reflinks a:focus{
   text-decoration: underline;
 }

/* =========================================
   PRODUCT PAGE STYLES
========================================= */

/* Section spacing */
.product-section {
  margin-block: 4rem;
}

.product-section h2,
.product-section h3 {
  margin-bottom: 1rem;
  color: var(--navy-blue);
}

.export-product, .import-product {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.export-product h3, .import-product h3 {
  margin-bottom: 1rem;
  color: var(--dark-blue);
  border-bottom: 2px solid var(--golden-yellow);
  padding-bottom: 0.5rem;
}


/* Feature list styling */
.product-features {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: 0.5rem;
  line-height: 1.6;
}

.product-features li {
  margin-bottom: 0.5rem;
}

/* Product gallery grid */
.product-gallery {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.product-gallery figure {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.product-gallery img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.product-gallery figcaption {
  font-size: 0.9rem;
  font-weight: var(--fw-medium);
  text-align: center;
  color: var(--dark-blue);
}

/* Responsive grid adjustments */
@media (min-width: 40em) {
  .product-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .product-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Captions for grouped product galleries */
.gallery-caption {
  margin-top: 0.75rem;
  margin-bottom: 2rem;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  text-align: center;
  color: var(--dark-blue);
}

.about-hero {
   background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
               url('images/about-hero.jpg') center/cover no-repeat;
   color: var(--white);
   text-align: center;
   padding: 6rem 1rem;
   background-position: center bottom; /* keep ship visible */
}

@media (min-width: 1024px) {
   .about-hero {
      background-position: center 75%; /* shift up or down depending on your image */
   }
}

.about-hero h1 {
   font-size: var(--fs-600);
   margin-bottom: 0.5rem;
}
.about-hero .tagline {
   font-size: var(--fs-450);
   font-weight: var(--fw-medium);
   color: var(--golden-yellow);
}

.about-mission-vision {
   margin: 4rem auto;
   gap: 2rem;
}
.about-mission-vision h2 {
   color: var(--dark-blue);
   margin-bottom: 1rem;
}

.about-values {
   text-align: center;
   margin: 4rem auto;
}
.values-grid {
   display: grid;
   gap: 2rem;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   margin-top: 2rem;
}
.value-card {
   background: var(--Uranian-Blue);
   padding: 2rem;
   border-radius: 0.5rem;
}
.value-card i {
   font-size: 2rem;
   color: var(--navy-blue);
   margin-bottom: 1rem;
}
.value-card h3 {
   margin-bottom: 0.5rem;
   color: var(--dark-blue);
}

.about-cta {
   background: var(--navy-blue);
   color: var(--white);
   text-align: center;
   padding: 4rem 1rem;
   margin-top: 4rem;
}
.about-cta h2 {
   color: var(--golden-yellow);
   margin-bottom: 1rem;
}
.about-cta p {
   margin-bottom: 2rem;
}

/* Adjust full background section */
.home-full-bg {
   background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
   url('images/home-background 2.jpg') center center / cover no-repeat;
   min-height: 90vh; /* tighter to footer */
   display: flex;
   align-items: center;
   padding: 4rem 1rem;
}

/* Split ratio desktop */
.split-layout {
   display: grid;
   grid-template-columns: 60% 40%; /* text takes more space */
   gap: 3rem;
   align-items: center;
}

/* Text section */
.home-intro h1 {
   font-size: var(--fs-600);
   margin-bottom: 1rem;
}
.home-intro p {
   margin-bottom: 2rem;
   max-width: 600px;
   line-height: 1.6;
}
.home-intro .button {
   white-space: nowrap; /* prevent wrapping/duplication */
   font-size: 1rem;
}

/* Glass section smaller */
.services-glass {
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-radius: 1rem;
   padding: 1.5rem;
   color: var(--white);
   max-width: 400px;
}
.services-glass h2 {
   font-size: var(--fs-450);
   margin-bottom: 1rem;
}

/* Service cards */
.services-grid {
   display: grid;
   gap: 1rem;
}
.service-card {
   padding: 1rem;
   border-radius: 0.5rem;
   background: rgba(0, 0, 0, 0.25);
}

/* Responsive fixes */
@media (max-width: 900px) {
   .split-layout {
      grid-template-columns: 1fr;
      gap: 2rem;
   }
   .services-glass {
      margin-top: 2rem;
      max-width: 100%;
   }
}

@media (max-width: 500px) {
   .home-intro h1 {
      font-size: var(--fs-500);
   }
   .home-intro p {
      font-size: var(--fs-400);
   }
   .services-glass h2 {
      font-size: var(--fs-400);
   }
}

.home-intro h1,
.home-intro p {
   color: var(--white);
   text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* Contact Hero */
.contact-hero {
  /*background: linear-gradient(135deg, var(--Uranian-Blue), var(--golden-yellow));
  color: var(--dark-blue);*/
  text-align: center;
  padding: 4rem 1rem;
  /*border-bottom: 4px solid var(--navy-blue)*/;
}

.contact-hero h1 {
  font-size: var(--fs-600);
  margin-bottom: 1rem;
}
.contact-hero .tagline {
  font-size: var(--fs-450);
  /*color: var(--golden-yellow)*/;
}

/* Contact Details */
.contact-details-section {
  margin: 4rem auto;
  gap: 2rem;
}
.contact-info h2 {
  margin-bottom: 1rem;
  color: var(--dark-blue);
}
.contact-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}
.contact-list li {
  margin-bottom: 0.75rem;
  font-size: var(--fs-400);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-list i {
  color: var(--golden-yellow);
  font-size: 1.2rem;
}

/* Map */
.contact-map iframe {
  width: 100%;
  min-height: 350px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 768px) {
  .contact-hero {
    padding: 3rem 1rem;
  }
  .contact-map iframe {
    min-height: 250px;
  }
}