/* =====================================================
   BASE RESET & GLOBAL RULES
===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--para-color);
  background-color: var(--white-color);
  line-height: 1.6;
}

/* =====================================================
   THEME VARIABLES (CHANGE ONLY THIS SECTION)
===================================================== */
:root {
  /* Fonts */
  --font-primary: 'Poppins', sans-serif;
  --font-heading: 'Poppins', sans-serif;

  
    /* ===== Backgrounds ===== */
    --bg-color: #ffffff;
    --white-color: #ffffff;
    --dark-color: #0F2A52;
    --black-dark-color:#221F20;
    --supporting-color: #F3F3F3;

    /* ===== Brand Colors (Logo Based) ===== */
    --heading-color: #16356F;        /* Logo Navy Blue */
    --sub-heading:  #1F7FBF;         /* Sea / Supporting Blue */
    --para-color: #4A5568;           /* Soft readable text */

    /* ===== Accent / CTA (Logo Orange) ===== */
    --btn-bg-color: #F28C28;
    --btn-hover-color: #D9731F;
    --circle-color: #F28C28;

    /* ===== Header & Footer ===== */
    --header-color: #16356F;
    --footer-background-color: #0F2A52;

    /* ===== Supporting UI Colors ===== */
    --supporting-color: #EAF2FB;     /* Light blue section bg */

    /* ===== Shadows ===== */
    --btn-box-shadow: rgba(242, 140, 40, 0.35) 0px 10px 25px;
    --box-shadow: rgba(15, 42, 82, 0.08) 0px 6px 24px 0px,
                  rgba(15, 42, 82, 0.08) 0px 0px 0px 1px;

    --box-shadow-hover-color: rgba(15, 42, 82, 0.25) 0px 20px 40px -10px;

    --image-shadow: rgba(31, 127, 191, 0.25) 0px 8px 24px;

    /* ===== Gradient (Hero / CTA Sections) ===== */
    --gradient: linear-gradient(90deg, #0F2A52 0%, #0A1F3D 30%, #020617 70%);
}


/* =====================================================
   TYPOGRAPHY SYSTEM
===================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading-color);
  letter-spacing: 0.3px;
}
h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--sub-heading);
  letter-spacing: 0.3px;
}
h1 { font-size: 3.2rem; font-weight: 700; }
h2 { font-size: 2.8rem; font-weight: 600; }
h3 { font-size: 2.4rem; font-weight: 600; }
h4 { font-size: 2.2rem; font-weight: 500; }
h5 { font-size: 2rem;  font-weight: 500; }
h6 { font-size: 1.8rem; font-weight: 400; }

p, li, a {
  font-size: 1.8rem;
  color: var(--para-color);
}

a {
  text-decoration: none;
}

/* =====================================================
   LAYOUT SYSTEM
===================================================== */
.container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.grid {
  display: grid;
  gap: 2rem;
}

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

/* =====================================================
   HERO / COMMON IMAGE
===================================================== */
.hero-image {
  width: 100%;
  height: 45rem;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: var(--white-color);
}

/* =====================================================
   BUTTONS
===================================================== */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background-color: var(--sub-heading);
  color: white;
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
  transition: all 0.3s ease;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}

.btn a{
    color: white;
   
}

.btn:hover {
  background-color: var(--header-color);
  color: white;
}

/* =====================================================
   CARD / BOX
===================================================== */
.card {
  background-color: var(--white-color);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--box-shadow);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: var(--box-shadow-hover);
}

/***** all page common image *****/
.commonImage {
    width: 100%;
    height:450px;
    /* background: linear-gradient(to right, rgba(0,0,0,0.3)),url(../images/common\ image\ 05\   	final.jpg); */
    background-image: linear-gradient(to right, rgba(0,0,0,0.6)),url(../images/commonImage.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: start;
    align-items: flex-end;       
    z-index: 1;
}

.commonImage h2{
    color: var(--white-color);
    
}

.commonImageContactUs{
  width: 100%;
    height:45rem;
    /* background: linear-gradient(to right, rgba(0,0,0,0.3)),url(../images/common\ image\ 05\   	final.jpg); */
    background-image: linear-gradient(to right, rgba(0,0,0,0.6)),url(../images/contactusImage.jpg);
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    display: flex;
    justify-content: start;
    align-items: flex-end;       
    z-index: 1;
}

.commonImageContactUs h2{
    color: var(--white-color);
    
}

.commonImageRoadService{
  width: 100%;
    height:45rem;
    /* background: linear-gradient(to right, rgba(0,0,0,0.3)),url(../images/common\ image\ 05\   	final.jpg); */
    background-image: linear-gradient(to right, rgba(0,0,0,0.6)),url(../images/roadserice\ comman\ image.jpg);
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    display: flex;
    justify-content: start;
    align-items: flex-end;       
    z-index: 1;   
}
.commonImageRoadService h2{
    color: white;
}

.commonImageAirService{ 
    width: 100%;
        height:45rem;
        /* background: linear-gradient(to right, rgba(0,0,0,0.3)),url(../images/common\ image\ 05\   	final.jpg); */
        background-image: linear-gradient(to right, rgba(0,0,0,0.6)),url(../images/commonAirFright.jpg);
        background-size: 100% 100%; 
        background-repeat: no-repeat;
        display: flex;
        justify-content: start;
        align-items: flex-end;       
        z-index: 1;   
}
.commonImageAirService h2{
    color: white;
}

.commonImageRailService{    
    width: 100%;
        height:45rem;
        /* background: linear-gradient(to right, rgba(0,0,0,0.3)),url(../images/common\ image\ 05\   	final.jpg); */
        background-image: linear-gradient(to right, rgba(0,0,0,0.6)),url(../images/common\ rail\ frieght.png);
        background-size: 100% 100%; 
        background-repeat: no-repeat;
        display: flex;
        justify-content: start;
        align-items: flex-end;       
        z-index: 1;   
}
.commonImageRailService h2{
    color: white;
}

.commonImageSeaService{ 
    width: 100%;
        height:45rem;
        /* background: linear-gradient(to right, rgba(0,0,0,0.3)),url(../images/common\ image\ 05\   	final.jpg); */
        background-image: linear-gradient(to right, rgba(0,0,0,0.6)),url(../images/common\ sea\ freight.jpg);
        background-size: 100% 100%; 
        background-repeat: no-repeat;
        display: flex;
        justify-content: start;
        align-items: flex-end;       
        z-index: 1;   
}
.commonImageSeaService h2{
    color: white;
}
/***** End all page common image *****/

/***** resuseable code  *****/ 
.section-common-heading h1{    
    color: var(--heading-color);    
}
.section-common-heading h1 {    
    color: #0b2c5f;
    position: relative;
}

.section-common-heading h1::after {
    content: "";
    width: 70px;
    height: 4px;
    background: var(--btn-bg-color);
    display: block;
    margin: 12px auto 0;
    border-radius: 2px;
}

.section-common-subheading h2{
    color: var(--sub-heading);    
}

.section-common-subheading h3{
    color: var(--sub-heading);    
    text-align: center;
}

.section-common-subheading p{
        
    text-align: justify;
}
.section-common-heading p{
    text-align: center;
}

.section-common-title{
    font-size: 2rem;
    margin: 2.4rem 0 1.2rem 0;
    font-weight: 600;
}


/***** End resuseable code  *****/


/***** common box section layout *****/  

.borderStyle{    
    padding: 1rem;
    box-shadow: var(--box-shadow);
   
}

.borderStyle.active {
  background: var(--gradient); 
  color: #fff;
  transition: transform 0.3s linear;
  -webkit-transition: transform 0.3s linear;
  -moz-transition: transform 0.3s linear;
  -ms-transition: transform 0.3s linear;
  -o-transition: transform 0.3s linear;
}

.borderStyle.active i {
  color: white;
}
.borderStyle active h3{
    color: white;
}

.borderStyle.active p {
  color: white;
}

.borderStyle:hover {
  transform: translateY(-3px);
 
}
.boxicon .fa-user-tie,
 .boxicon .fa-sign-hanging,
 .boxicon .fa-brands,
 .boxicon .fa-chart-line,
 .boxicon .fa-microphone,
 .boxicon .fa-print,
 .boxicon .fa-solid{
     padding-bottom: 2rem;
     font-size: 5rem;
     color: var(--heading-color);
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .iconbox .fa-truck-fast,
 .iconbox .fa-shield-halved,
 .iconbox .fa-tags,
 .iconbox .fa-headset{
     /* padding-bottom: 2rem;
     font-size: 5rem; */
     color: var(--heading-color);
     display: flex;
     justify-content: center;
     align-items: center;
 }

/***** End common box section layout *****/

/***** header section *****/ 

.header{
    position: fixed;    
    z-index: 1000;
    width: 100%;   
    box-shadow: 1px 2px 15px 2px var(--supporting-color);    
    padding: 0 1rem;   
    /* background: red; */
   }

 .nav-item {    
    text-transform: capitalize;
    padding: 5px 15px;       
    font-weight: 600;   

 }


.nav-link {
    color: white;
    font-weight: 600;
    font-size: 2.2rem;
}

.nav-link:hover{
    color: var(--circle-color);
}
.header.scrolled {
    background-color: #F7FAFF;
    box-shadow: 0 6px 20px rgba(15,42,82,0.15);
    transition: background-color 0.3s ease;    
    color:var(--btn-bg-color);
   
}
.header.scrolled .nav-link,
.header.scrolled .nav-item {
    color: var(--btn-bg-color);   /* Dark Blue */
    font-weight: 600;
    color: #16356F;
}
.header.scrolled .nav-link:hover {
    color: var(--btn-hover-color);  
    font-weight: 600;
}

.navbar-toggler{
    border: none;
    outline: none;
    font-size: 2.4rem;
    color:white;  
    
}

.navbar-toggler .nav-item .nav-link{
   border-bottom: 2rem solid var(--header-color);
}
/* Hamburger icon color → black */
.navbar-toggler-icon {
  width: 1.5em;
  height: 1.5em;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/* Hover effect (optional) */
.navbar-toggler:hover .navbar-toggler-icon {
  opacity: 0.7;
}

.headerBtn{
    background-color: var(--btn-bg-color);
    color: var(--white-color);
    padding: 0.8rem 1.5rem;
    font-size: 2rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    box-shadow: var(--btn-box-shadow);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    /* background-color: var(--dark-color); */
}

.headerBtn:hover{
    background-color: var(--btn-hover-color);
    color: white;
}
/***** End header section *****/

/***** footer section *****/  
.footer{
    color: var(--white-color);
    position:relative;
    padding: 2rem 1rem;
    border-top: 0.6rem solid var(--btn-bg-color);   
    /* background: linear-gradient(90deg, #0F2A52 0%, #0A1F3D 30%, #020617 70%);   */
     background: var(--gradient);
    
   
}

.socialMedia {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;  
    
}

 .socialIcon{
    width: 4rem;
    height: 4rem;
    padding: 0.8rem;
  }

.socialMedia {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    font-size: 2rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}
.socialIcon{
    padding: 0.8rem;
    background-color: var(--heading-color);
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    transition: transform ease-in 0.3s ;
    -webkit-transition: transform ease-in 0.3s ;
    -moz-transition: transform ease-in 0.3s ;
    -ms-transition: transform ease-in 0.3s ;
    -o-transition: transform ease-in 0.3s ;
}

.socialIcon:hover{
    transform: translateY(-1rem);
    -webkit-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    -ms-transform: translateY(-1rem);
    -o-transform: translateY(-1rem);
}


.footerheading h3{
    color: var(--heading-color);
    font-weight: 600;
}

.footerheading p{
    font-size: 1.8rem;
    font-weight: 500;
}

.footerLastSection{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 0.2rem solid white;
    padding: 0.5rem 0;
}

.userRequiredForm {
  font-size: 2rem;
  
  color: #ffffff;
  animation: glowPulse 2.2s ease-in-out infinite;
}
.userRequiredForm a{
    color: white;
    font-weight: 800;
}
@keyframes glowPulse {
  0% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(124, 197, 54, 0);
  }
  50% {
    transform: scale(1.05);
    text-shadow: 
      0 0 10px rgba(124, 197, 54, 0.7),
      0 0 20px rgba(124, 197, 54, 0.4);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(124, 197, 54, 0);
  }
}

/***** End footer section *****/

/***** hero section start *****/  

.main {
  position: relative;
  width: 100%;
  height: 100vh;  
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
 background:
  linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.45) 40%,
    rgba(0, 0, 0, 0.15) 70%,
    rgba(0, 0, 0, 0.0) 100%
  ),
  url("../images/hero section 03 ship dark blue.png");
  background-repeat: no-repeat;
  background-size: cover;
 
 
}

.hero-section {   
  width: 100%;
  padding: 2rem;
  /* background-color: rgba(15, 42, 82, 0.3); */
  text-align: left;
  }


.hero-section h1 {
  font-size: 5.2rem;
  color: white;
  font-weight: 800;
  margin-bottom: 1rem;
  width: 80%;
}


.hero-section p {
  color: var(--para-color);
  font-weight: 400;
  margin-bottom: 3rem;
  max-width: 120rem;
}

.dual-button{
    display: flex;    
    /* padding: 1rem 1rem; */
    background-color: transparent;
   
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    font-weight: bold;     
    gap: 2rem;
    
    
  }

.left-btn{
    border: none;
    outline: none;
    padding:0.8rem 1.6rem;
    border-radius: 2rem;
    font-weight: 600;    
    background: var(--dark-color);
    color: var(--white-color);
    transition: background 0.3s linear;
    cursor: pointer;
    font-size: 2rem;
    
}
.left-btn:hover{
    background: var(--heading-color);
    color: white;
    
    
}

.right-btn{
    border: none;
    outline: none;
   padding: 0.8rem 1.6rem;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    font-weight: 600;
    background-color:var(--btn-bg-color);
    color:var(--white-color);
    transition: background 0.3s linear;
    -webkit-transition: background 0.3s linear;
    -moz-transition: background 0.3s linear;
    -ms-transition: background 0.3s linear;
    -o-transition: background 0.3s linear;
    /* border: 0.2rem solid  white; */
    font-size: 2rem;
}

.right-btn a{
  color: white;
}
.right-btn:hover{
   background-color: var(--btn-hover-color);
   color: white;
    
}

.fa-solid{
    font-size: 1.8rem;
    color: var(--white-color);
    font-weight: 600;
    margin-right: 1rem;
}
/***** end hero section*****/  


/***** start home page about us *****/ 
.aboutusHomepageImage{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutusHomepageImage img{
    width: 100%;
    height: auto;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    box-shadow: var(--box-shadow);
    padding: 0;
}

.aboutusHomepagecontent p{
    text-align: justify;
    margin-bottom: 3rem;
}

.point {
  font-size: 1.6rem;
  color: var(--para-color);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 1rem;
  font-family: outfit, sans-serif;
  
}

.point i {
  font-size: 2.4rem;
  color: var(--btn-bg-color);
  background: var(--supporting-color);
  padding: 0.8rem;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.homePageAboutBtn{
    margin-top: 1.5rem;
}


/***** End home page about us *****/ 
/***** home page our services *****/  

.grid {
    display: grid;
    gap: 30px;
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Card Design */
.card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    text-align: center;
    padding-bottom: 25px;
    transition: all 0.4s ease;
    position: relative;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Image Style */
.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card:hover img {
    transform: scale(1.08);
}

/* Card Content */
.card h3 {
    font-size: 20px;
    margin: 20px 0 10px;
    color: #0b2c5f;
}

.card p {
    font-size: 14px;
    color: #555;
    padding: 0 20px;
    margin-bottom: 20px;
}

/***** End home page our services *****/
/***** home page why choose us  *****/ 
.whychooseusParent{    
  
    display: grid;      
    place-items: center;
    gap: 2rem; 
    
}

.whychooseusBox{
    width: 28rem;
    height:auto;
    padding: 1.5rem 1rem;
    /* border: 0.1rem solid gray; */
    border-radius: 1rem ;
    -webkit-border-radius: 1rem ;
    -moz-border-radius: 1rem ;
    -ms-border-radius: 1rem ;
    -o-border-radius: 1rem ;   
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

        
}

.whychooseusBox:hover{
     transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
     -webkit-transform: translateY(-5px);
     -moz-transform: translateY(-5px);
     -ms-transform: translateY(-5px);
     -o-transform: translateY(-5px);
}

.iconbox{
    width: 4rem;
    height: 4rem;
    background-color: var(--supporting-color);
    display: flex;
    justify-content: center;
    align-items: center;

}

.fa-solid{
    font-size: 2rem;
    /* color: var(--sub-heading); */
    color: white;
}
.whychooseusContent{
    padding: 1rem 0;
}

.whychooseusContent h3{
    color: var(--heading-color);
}

/***** End  home page why choose us *****/

/***** how we work *****/ 
.how-work {
    padding: 2rem 0;
    background: var(--gradient);
}

.work-title {
    text-align: center;
    font-size: 34px;
    color: white;
    margin-bottom: 5rem;
    position: relative;
}

.work-title::after {
    content: "";
    width: 80px;
    height: 4px;
   
    background:var(--btn-bg-color);
    display: block;
    margin: 15px auto 0;
    border-radius: 3px;
}

/* Wrapper */
.work-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    position: relative;
}

/* Connecting Line */
.work-wrapper::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 5%;
    width: 90%;
    height: 4px;
    background: var(--btn-bg-color);
    z-index: 0;
}

/* Card */
.work-card {
    background: #fff;
    padding: 40px 25px 30px;
    border-radius: 16px;
    text-align: center;
    width: 23%;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    z-index: 1;
}

.work-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

/* Step Number */
.step-number {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--btn-bg-color);
    color: #fff;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
}

/* Icon */
.work-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0b2c5f, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 20px;
    font-size: 30px;
    color: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.work-card h4 {
    margin-bottom: 10px;
    color: #0b2c5f;
}

.work-card p {
    font-size: 14px;
    color: #555;
}



/***** End how we work *****/

/***** industries we serve *****/ 
.industries {
    padding: 4rem 0;
    background: var(--white-color);
}

.industry-title {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}

.industry-title::after {
    content: "";
    width: 5rem;
    height: 0.3rem;
    background: var(--btn-bg-color);
    display: block;
    margin: 1rem auto 0;
    border-radius: 0.3rem;
}

/* Grid */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 3rem;
}

/* Card */
.industry-card {
    background: var(--white-color);
    padding: 3rem 2rem;
    border-radius: 1.2rem;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: 0.4s ease;
}

.industry-card i {
    font-size: 3.5rem;
    color: var(--heading-color);
    margin-bottom: 1.5rem;
    transition: 0.3s ease;
}

.industry-card h4 {
    margin-top: 1rem;
}

/* Hover Effect */
.industry-card:hover {
    transform: translateY(-1rem);
    box-shadow: var(--box-shadow-hover-color);
}

.industry-card:hover i {
    color: var(--btn-bg-color);
}

/***** End industries we serve *****/

/***** NATIONWIDE COVERAGE *****/ 
.nationwide {
    position: relative;
    background: url("../images/nationwide\ coverage\ 2.png") center center / cover no-repeat;
    
    min-height: 45rem;   /* fixed balanced height */
    padding: 6rem 2rem;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* Dark overlay */
.nationwide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* Content above overlay */
.nationwide-content {
    position: relative;
    z-index: 2;
    max-width: 85rem;
}


/* Heading */
.nationwide h2 {
    color: white;
    margin-bottom: 2rem;
}

/* Paragraph */
.nationwide p {
    color: var(--white-color);
    margin-bottom: 2.5rem;
}

/* Cities */
.city-list {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--btn-bg-color);
}

.city-list span {
    color: var(--btn-bg-color);
    margin: 0 1rem;
}



/***** End NATIONWIDE COVERAGE *****/
/***** global coverage *****/ 
.global-reach {
    position: relative;
    background: url("../images/global\ research.png") center center / cover no-repeat;
    
    min-height: 45rem;
    padding: 6rem 2rem;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* Dark overlay */
.global-reach::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* Content */
.global-content {
    position: relative;
    z-index: 2;
    max-width: 85rem;
}

.global-reach h2 {
    color: var(--white-color);
    margin-bottom: 2rem;
}

.global-reach p {
    color: var(--white-color);
    margin-bottom: 2.5rem;
}

.global-areas {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--btn-bg-color);
}

.global-areas span {
    color: var(--white-color);
    margin: 0 1rem;
}


/***** End global coverage *****/
/***** our clients *****/ 
.our-clients {
    padding: 3rem 0;
    background: var(--white-color);
    background-color: var(--supporting-color);
}

/* Grid */
.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 4rem;
    align-items: center;
    /* margin-top: 5rem; */
}

/* Logo Box */
.client-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    transition: 0.4s ease;
}

.client-logo img {
    max-width: 100%;
    max-height: 6rem;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: 0.4s ease;
}

/* Hover Effect */
.client-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}


/***** End our clients *****/


/***** call to action *****/ 
.cta-section {
    position: relative;
    background: url("../images/call\ to\ action\ 2.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 8rem 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 55rem;
    overflow: hidden;
}

/* Dark overlay */
.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1;
}

/* Content above overlay */
.cta-content {
    position: relative;
    z-index: 2;
}

.cta-section h2 {
    color: var(--white-color);
    margin-bottom: 3rem;
}


/***** End call to action *****/

/***** state section *****/ 
.company-stats {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 
                url('../images/state\ image.jpg') center/cover no-repeat;
    padding: 80px 0;
    
}

.stat-box {
    padding: 20px;
    transition: 0.3s ease;
}

.stat-box h2 {
    font-size: 42px;
    font-weight: 700;
    color: var(--btn-bg-color);
}

.stat-box p {
    font-size: 16px;
    margin-top: 10px;
    letter-spacing: 0.5px;
}

.stat-box:hover {
    transform: translateY(-5px);
}


/***** End state section *****/


/***** about us *****/ 
 
.missionVisionParent{
    display: flex;
    justify-content: center;
    align-items: center;    
    flex-wrap: wrap; 
   
}
.missionBox{
  background-color: white;
  padding: 5rem;
  /* width: 50rem;
  height: auto; */
  box-shadow: var(--box-shadow);
  border: none;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
 
  
}

.howWeWorkImg img {
    max-width: 100% !important;
    width: 100%;
    height: auto;
    display: block;
}

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

.howWeWork img{
  width: 100%;
  height: auto; 
  
}
.aboutCompanyPremium {
  padding: 80px 0;
}

.aboutTag {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: var(--heading-color);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 15px;
}

.aboutCompanyDesc {
  font-size: 1.8rem;
  /* line-height: 1.9; */
  color: var(--para-color);
  margin-bottom: 1.5rem;
  text-align: justify;
  font-family: outfit;
}

.aboutTrustPoints {
  margin-top: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.aboutTrustPoints div {
  background: #f4f6f8;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
}

.companySnapshot {
  background: linear-gradient(135deg, #0f2a44, #123b66);
  color: #ffffff;
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.companySnapshot h3 {
  margin-bottom: 25px;
  font-size: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 10px;
}

.snapshotItem {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 15px;
}

.snapshotItem strong {
  font-weight: 600;
}

/***** End about us *****/

/***** contact us *****/ 
.getInTouch {   
  width: 100%;
  height: auto;
  

 
 }
 .getInTouchBox{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1rem;
 }

 

 .getInTouchIcon{
  width: 5rem;
  height: 5rem;
  background: var(--supporting-color);
  display: flex;
  justify-content: center;  
  align-items: center;
  margin-bottom: 1rem;
  
 }
 .getInTouchIcon i{
  font-size: 3rem;
  color: var(--heading-color);
 
 }
 
 .getIntouchContent{
  width: 38rem;
  border-top: 0.5rem solid var(--btn-bg-color);
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  background-color: white;
  box-shadow: var(--box-shadow);  
  
}

 .contactusimage {
  display: flex;
  justify-content: center; 
  align-items: center;     
  height: 100%          
}

.contactusimage img {
  width: 100%;
  height: auto;
  /* box-shadow: var(--box-shadow); */
  border-radius: 2rem;
  padding: 1rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
   /* box-shadow: var(--box-shadow); */
}


.homepageContactUs {
  width: 100%;
 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;     
  padding: 3rem 1.5rem;   
  /* box-shadow: var(--box-shadow); */
}

.col-sm-6 .homepageContactUsForm{
    background-color: var(--black-dark-color);
    padding: 2rem;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
}


.form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}


.form-row .single{
    grid-template-columns: 1fr;

}

  input, textarea, select{
      width:100%;
      padding: 1rem 1.2rem;
      /* border:1px solid var(--purple-color); */
      /* border-radius:1rem; */
      font-size: 1.6rem;
      margin-bottom: 1rem;
      border: none;
      background-color: white;
      box-shadow: var(--box-shadow);
}
    input:focus, textarea:focus, select:focus{
      border-color:var(--purple-color);
      outline:none;
      box-shadow:0 0 0 3px rgba(75,47,201,0.15);
      box-shadow: 0 0 0 3px rgba(255,140,0,0.2);
    }
    textarea{
      min-height:100px;
      resize:none;
    }
     .form-row.single{
      grid-template-columns:1fr;
    }    

/***** End contact us *****/


/***** road transport  *****/ 
.hero {
  background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
  url('https://images.unsplash.com/photo-1601582585289-6f5b4f5b0e65') center/cover;
  color: white;
  text-align: center;
  padding: 140px 20px;
}

.hero h1 {
  font-size: 45px;
  margin-bottom: 15px;
}

.hero p {
  font-size: 18px;
  opacity: 0.9;
}

/* ================= ABOUT ================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.about-grid img {
  width: 100%;
  border-radius: 15px;
  box-shadow: var(--box-shadow);
}

h2 {
  color: var(--heading-color);
  margin-bottom: 15px;
}

p {
  color: var(--para-color);
  line-height: 1.7;
}

/* ================= FEATURES ================= */
.grid{
    place-items: center;
}
.features {
  background: var(--supporting-color);
}

.roadServiceImage{
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: var(--box-shadow);
}

.roadServiceImage img{
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: var(--box-shadow);
}

.feature-grid-4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px;
  text-align: center;
}

.feature-box {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: var(--box-shadow);
  transition: 0.3s;
}

.feature-box:hover {
  transform: translateY(-8px);
}

.feature-box h4 {
  color: var(--sub-heading);
  margin-bottom: 10px;
}

/* ================= PROCESS ================= */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px;
  text-align: center;
}

.process-step {
  padding: 20px;
}

.process-step span {
  display: inline-block;
  background: var(--btn-bg-color);
  color: white;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  margin-bottom: 15px;
  font-weight: bold;
}

/* ================= CTA ================= */
.cta {
  background: var(--gradient);
  color: white;
  text-align: center;
  padding: 70px 20px;
}

.btn {
  display: inline-block;
  padding: 12px 25px;
  background: var(--btn-bg-color);
  color: white;
  border-radius: 30px;
  font-weight: 600;
  margin-top: 20px;
  transition: 0.3s;
}

.btn:hover {
  background: var(--btn-hover-color);
}
 /***** End road transport  *****/

/* =====================================================
   RESPONSIVE BREAKPOINTS
===================================================== */

/* --------- ≤ 1400px --------- */
@media (max-width: 1400px) {
  html { font-size: 60%; }
}

/* --------- ≤ 1200px --------- */
@media (max-width: 1200px) {
  html { font-size: 58%; }
  .container { padding: 1.5rem; }
}

/* --------- ≤ 992px (Tablet Landscape) --------- */
@media (max-width: 992px) {
  html { font-size: 56%; }

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

  .work-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .work-wrapper::before {
        display: none;
    }

    .work-card {
        width: 80%;
        margin-bottom: 30px;
    }
    .nationwide-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .nationwide-map img {
        width: 28rem;
        margin-bottom: 3rem;
    }
  .whychooseusParent {
        grid-template-columns: repeat(2, 1fr);
    }
    .client-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------- ≤ 768px (Tablet Portrait) --------- */
@media (max-width: 768px) {
  html { font-size: 54%; }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  h1 { font-size: 2.8rem; }
  h2 { font-size: 2.4rem; }

 .main{
    height: auto;              /* ❌ 100vh hata diya */
    min-height: 60vh;          /* 👈 compact hero */
    padding: 7rem 0 5rem;      /* top-bottom spacing */
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.45) 60%,
        rgba(0,0,0,0.25) 100%
      ),
      url("../images/hero section 03 ship dark blue.png");
    background-size: cover;
    background-position: center;
  }

  .hero-section{
    text-align: center;        /* mobile me better */
    padding: 1.5rem;
  }

  .hero-section h3{
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }

  .hero-section h1{
    font-size: 3.2rem;
    width: 100%;
    line-height: 1.2;
  }

  .dual-button{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .left-btn,
  .right-btn{
    font-size: 1.4rem;
    padding: 0.6rem 1rem;
    white-space: nowrap;
  }
   .section-common-heading h1 {
        font-size: 2.6rem;
    }
   .nationwide {
        padding: 6rem 2rem;
    }

    .nationwide h2 {
        font-size: 2.4rem;
    }

    .city-list {
        line-height: 3rem;
    }
     .global-reach {
        min-height: 40rem;
        padding: 5rem 2rem;
    }
     .client-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
     .cta-section {
        padding: 6rem 2rem;
        min-height: 32rem;
    }

    .cta-section h2 {
        font-size: 2.4rem;
    }
    .client-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .getInTouchBox{
    justify-content: center;
  }

  .getIntouchContent{
    width: 100%;
    max-width: 40rem;
    text-align: center;
  }

  .getInTouchIcon{
    margin-left: auto;
    margin-right: auto;
  }


}

/* --------- ≤ 576px (Mobile) --------- */
@media (max-width: 576px) {
  html { font-size: 52%; }

  h1 { font-size: 2.4rem; }
  h2 { font-size: 2.1rem; }

  p, li, a { font-size: 1.5rem; }

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

 .main{
    min-height: 52vh;   /* aur compact */
    padding: 6rem 0 4rem;
  }

  .hero-section h1{
    font-size: 2.6rem;
  }

  .hero-section h3{
    font-size: 1.2rem;
  }
  .whychooseusParent {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .whychooseusBox {
        width: 100%;
    }
     .client-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

/* --------- ≤ 400px (Small Mobile) --------- */
@media (max-width: 400px) {
  html { font-size: 50%; }
}


.main1{
  width: 100%;
  height: 100vh;
  /* background-color: blue; */
}

.main2{
  width: 100%;
  height: 100vh;
  /* background-color: green; */
}