* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: Arial, sans-serif;

}



body {

  line-height: 1.6;

  background: #f4f8fb;

}



.container {

  width: 90%;

  max-width: 1200px;

  margin: auto;

}



/* HEADER */

.header {

  background: #f3f3f3;

  color: #0a3d62;

  padding: 8px 0;

}



.nav-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.logo {

  font-size: 22px;

  font-weight: bold;

}



.nav a {

  color: #0a3d62;

  text-decoration: none;

  margin-left: 20px;

}

.world-map-section {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 60px 5%;

    background: #ffffff;

}



/* Left Text */

.map-text {

    width: 45%;

}



.map-text h2 {

    font-size: 32px;

    margin-bottom: 10px;

}



.map-text p {

    font-size: 18px;

}



/* Right Image */

.map-image {

    width: 50%;

    text-align: right;

}



.map-image img {

    width: 100%;

    max-width: 600px;

}



/* ���� 576px se niche */

@media (max-width: 576px) {

    .world-map-section {

        flex-direction: column;

        padding: 0;

    }



    .map-text {

        display: none; /* Text hide */

    }



    .map-image {

        width: 100%;

        text-align: center;

    }



    .map-image img {

        width: 100%;

        height: auto;

    }

}

.menu-toggle {

  display: none;

  font-size: 26px;

  cursor: pointer;

}



/* HERO */

.hero {

  background: url('./home\ page.png') no-repeat center center/cover;

 

  position: relative;

}

.about{

     background: url('./banner.png') no-repeat center center/cover;

       

  position: relative;

}

.products{

    background: url('./images1.png') no-repeat center center/cover!important; 

    

  position: relative;

}



.hero {

  height: 90vh;   /* ya 85vh */

  display: flex;

  align-items: center;

}



.about,

.products {

  padding: 80px 0;

}

.hero-overlay {

  background: rgba(0,0,0,0.5);

  height: 100%;

  display: flex;

  align-items: center;

  width: 100%;

}



.hero-content {

  color: white;

  max-width: 600px;

}



.hero h1 {

  font-size: 42px;

  margin-bottom: 20px;

}



.hero p {

  margin-bottom: 20px;

}



.hero-buttons button {

  padding: 10px 20px;

  margin-right: 10px;

  border: none;

  cursor: pointer;

  border-radius: 4px;

}



.btn-primary {

  background: #1abc9c;

  color: white;

}



.btn-secondary {

  background: white;

  color: #0a3d62;

}



/* PRODUCTS */

.products {

  padding: 60px 0;

  background: white;

}



.section-title {

  text-align: center;

  margin-bottom: 40px;

  font-size: 28px;

}



.product-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}



.card {

  background: rgba(134, 188, 228, 0.1) !important;

  padding: 20px;

  border-radius: 8px;

  text-align: center;

}



/* SERVICES */

.services {

  padding: 80px 0;

  background: url("assets/background.png") no-repeat center center/cover;

  /* Agar background image alag hai to uska naam yaha dal dena */

}



.section-title {

  text-align: center;

  font-size: 28px;

  margin-bottom: 40px;

  font-weight: 600;

}



.service-grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 20px;

}



.service-card {

  background: rgba(255, 255, 255, 0.1);

  padding: 25px;

  border-radius: 12px;

  text-align: center;

  transition: 0.3s ease;

  box-shadow: 0 4px 15px rgba(0,0,0,0.08);

}



.service-card img {

  width: 80px;

  margin-bottom: 15px;

}



.service-card h4 {

  font-size: 16px;

  margin-bottom: 10px;

  font-weight: 600;

}



.service-card p {

  font-size: 13px;

  color: #555;

}



.service-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 8px 25px rgba(0,0,0,0.15);

}



.services-btn {

  text-align: center;

  margin-top: 40px;

}



.btn-view {

  background: #2daae1;

  color: white;

  padding: 10px 25px;

  border-radius: 6px;

  text-decoration: none;

  font-weight: 500;

}



.btn-view:hover {

  background: #1b8ec5;

}



@media (max-width: 1200px) {

  .service-grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



@media (max-width: 768px) {

  .service-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 480px) {

  .service-grid {

    grid-template-columns: 1fr;

  }

}



/* FOOTER */

        h1,

        h2,

        h3,

        h4,

        h5,

        h6 {}

        a,

        a:hover,

        a:focus,

        a:active {

            text-decoration: none;

            outline: none;

        }

        

        a,

        a:active,

        a:focus {

            color: #013a91;

            text-decoration: none;

            transition-timing-function: ease-in-out;

            -ms-transition-timing-function: ease-in-out;

            -moz-transition-timing-function: ease-in-out;

            -webkit-transition-timing-function: ease-in-out;

            -o-transition-timing-function: ease-in-out;

            transition-duration: .2s;

            -ms-transition-duration: .2s;

            -moz-transition-duration: .2s;

            -webkit-transition-duration: .2s;

            -o-transition-duration: .2s;

        }

        

        ul {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        img {

    max-width: 100%;

    height: auto;

}

       





.main-footer{

    position:relative;

    padding:110px 0px 0px;

    background-color: #f4f5f7;

    background-repeat:repeat-x;

    background-position:right bottom;

}



.main-footer .footer-widget{

    position:relative;

    margin-bottom:40px;

}



.main-footer .widgets-section{

    position:relative;

    padding-bottom:60px;

}


.main-footer .footer-widget h2{

    position:relative;

    font-size:22px;

    font-weight:600;

    color:#161c42;

    line-height:1.2em;

    margin-bottom:30px;

    margin-top:25px;

    text-transform:capitalize;

}



.main-footer .about-widget{

    position:relative;

}



.main-footer .about-widget .logo {

    position: relative;

    margin-bottom: 15px;

    width: 210px;

}

.main-footer .about-widget .text{

    position:relative;

}



.main-footer .about-widget .text p{

    position:relative;

    color:#022d65;

    font-size:15px;

    line-height:1.7em;

    margin-bottom:20px;

}



.main-footer .about-widget .text p:last-child{

    margin-bottom:0px;

}



/* Footer List */



.main-footer .footer-list{

    position:relative;
padding-left:1px;
   

}



.main-footer .footer-list li{

    position:relative;

    margin-bottom:17px;

}



.main-footer .footer-list li a{

    position:relative;

    color:#012a60;

    font-size:15px;

    padding-left:15px;

    -webkit-transition:all 300ms ease;

    -ms-transition:all 300ms ease;

    -o-transition:all 300ms ease;

    -moz-transition:all 300ms ease;

    transition:all 300ms ease;

    text-decoration: none;

}



.main-footer .footer-list li a:hover{

    text-decoration:underline;

    color:#ff6666;

}



.main-footer .footer-list li a:before{

    position:absolute;

    content:'\f105';

    left:0px;

    top:0px;

    color:#8a8d91;

    font-weight:800;

    font-family: 'Font Awesome 5 Free';

}



/*Gallery Widget*/



.main-footer .gallery-widget{

    position:relative;

    max-width:350px;

}



.main-footer .gallery-widget .images-outer{

    position:relative;

    margin:0px -3px;

}



.main-footer .gallery-widget .image-box{

    position:relative;

    float:left;

    width:33.333%;

    padding:0px 5px;

    margin-bottom:10px;

}



.main-footer .gallery-widget .image-box img{

    position:relative;

    display:block;

    width:100%;

    border-radius:4px;

    -webkit-transition:all 300ms ease;

    -ms-transition:all 300ms ease;

    -o-transition:all 300ms ease;

    -moz-transition:all 300ms ease;

    transition:all 300ms ease;

}



.main-footer .gallery-widget .image-box img:hover{

    opacity:0.70;   

}



/* Info List */



.main-footer .info-list{

    position:relative;

}



.main-footer .info-list li{

    position:relative;

    color:#8a8d91;

    font-size:15px;

    line-height:1.8em;

    margin-bottom:12px;

}



.main-footer .info-widget .social-links{

    position:relative;

    float:left;

    padding:15px 0px;

}



.main-footer .info-widget .social-links li{

    position:relative;

    margin-right:8px;

    display:inline-block;

}



.main-footer .info-widget .social-links li:last-child{

    margin-right:0px;

}



.main-footer .info-widget .social-links li a{

    position:relative;

    color: #ffffff;

    width:50px;

    height:50px;

    line-height:50px;

    text-align:center;

    border-radius:50%;

    display:inline-block;

    -webkit-transition:all 300ms ease;

    -moz-transition:all 300ms ease;

    -ms-transition:all 300ms ease;

    -o-transition:all 300ms ease;

    transition:all 300ms ease;

}



.main-footer .info-widget .social-links li.google a{

    background-color:#dd4b39;

}



.main-footer .info-widget .social-links li.facebook a{

    background-color:#4a6fbe;

}



.main-footer .info-widget .social-links li.twitter a{

    background-color:#55acee;

}



.main-footer .info-widget .social-links li.instagram a{

    background-color:#ea4c89;

}



.main-footer .info-widget .social-links li.vimeo a{

    background-color:#1ab7ea;

}



.main-footer .footer-bottom{

    position:relative;

    padding:20px 0px;

    border-top:1px solid #e5e5e5;

}



.main-footer .footer-bottom .footer-nav{

    position:relative;

    text-align:right;

}



.main-footer .footer-bottom .footer-nav li{

    position:relative;

    padding-right:10px;

    margin-right:10px;

    line-height:1.1em;

    display:inline-block;

    border-right:1px solid #8a8d91;

}



.main-footer .footer-bottom .footer-nav li:last-child{

    padding-right:0px;

    margin-right:0px;

    border-right:none;

}



.main-footer .footer-bottom .footer-nav li a{

    position:relative;

    color:#8a8d91;

    font-size:15px;

    -webkit-transition:all 300ms ease;

    -moz-transition:all 300ms ease;

    -ms-transition:all 300ms ease;

    -o-transition:all 300ms ease;

    transition:all 300ms ease;

}



.main-footer .footer-bottom .footer-nav li a:hover{

    color:#ff6666;

    text-decoration:underline;

}

/* RESPONSIVE */

@media(max-width: 992px) {

  .product-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .service-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media(max-width: 768px) {

  .nav {

    position: absolute;

    top: 60px;

    right: 0;

    background: #0a3d62;

    flex-direction: column;

    width: 200px;

    display: none;

  }



  .nav a {

    padding: 10px;

    display: block;

  }



  .menu-toggle {

    display: block;

  }



  .product-grid,

  .service-grid {

    grid-template-columns: 1fr;

  }



  .hero h1 {

    font-size: 28px;

  }

}



/* about us content  */



.heros{

    background:

        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),

        url("./home page.png") center/cover no-repeat;



    padding:80px 10%;

    text-align:center;

}



.heros h1{

    font-size:42px;

    color:#ffffff;

    margin-bottom:20px;

}



.heros p{

    max-width:900px;

    margin:auto;

    font-size:18px;

    color: white;

}



/* ===== GENERAL SECTION ===== */



.section{

    padding:20px 10%;

}



.section-title{

    text-align:center;

    margin-bottom:50px;

}



.section-title h2{

    font-size:32px;

    color:#0a4f75;

    margin-bottom:10px;

}



.section-title p{

    color:#666;

}



/* ===== TWO COLUMN LAYOUT ===== */



.two-col{

    display:flex;

    align-items:center;

    gap:50px;

    margin-bottom:60px;

}



.two-col img{

    width:100%;

    border-radius:12px;

}



.two-col .text{

    flex:1;

}



.two-col .image{

    flex:1;

}



/* ===== LIST STYLE ===== */



ul{

    list-style:none;

}



ul li{

    margin-bottom:12px;

    padding-left:20px;

    position:relative;

}






/* ===== BOX GRID ===== */



.grid{

    display:grid;

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

    gap:30px;

}



.card{

    background:#eaf8ff;

    padding:30px;

    border-radius:12px;

    box-shadow:0 5px 20px rgba(0,0,0,0.05);

    transition:0.3s;

}



.card:hover{

    transform:translateY(-5px);

}



.card h3{

    color:#0a4f75;

    margin-bottom:15px;

}



/* ===== MISSION VISION ===== */



.sectionspoint {

    display: flex;

    justify-content: space-between;

    gap: 60px;

    padding: 80px 8%;

    background: #f4fbff;

}



/* LEFT SIDE */

.left-side {

    width: 55%;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.mv-box {

    background: #d8f1ff;

    padding: 40px;

    border-radius: 16px;

}



/* RIGHT SIDE */

.right-side {

    width: 40%;

}



.section-title {

    font-size: 32px;

    color: #0a4f75;

    margin-bottom: 25px;

}



.why-list {

    list-style: none;

    padding: 0;

}



.why-list li {

    margin-bottom: 15px;

    position: relative;

    padding-left: 28px;

    font-size: 16px;

}



.why-list li::before {

    content: "✔";

    position: absolute;

    left: 0;

    color: #1da1f2;

    font-weight: bold;

}



/* ���� Responsive */

@media (max-width: 992px) {

    .sectionspoint {

        flex-direction: column;

    }



    .left-side,

    .right-side {

        width: 100%;

    }

}



/* ===== FOOTER ===== */



.footer{

    background:#0a4f75;

    color:#fff;

    text-align:center;

    padding:20px;

    margin-top:50px;

}



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



@media(max-width:768px){



    .two-col{

        flex-direction:column;

    }



    .hero h1{

        font-size:30px;

    }



    .section{

        padding:50px 6%;

    }

}





.section h2{

    font-size:34px;

    color:#0a4f75;

    margin-bottom:50px;

    text-align:center;

    position:relative;

}



.section h2::after{

    content:"";

    width:60px;

    height:4px;

    background:linear-gradient(90deg,#1da1f2,#0a4f75);

    display:block;

    margin:15px auto 0;

    border-radius:10px;

}



/* CATEGORY TITLE */

.category{

    margin-bottom:70px;

}



.category-title{

    font-size:26px;

    color:#0a4f75;

    margin-bottom:35px;

    padding-left:18px;

    border-left:6px solid #1da1f2;

    font-weight:600;

}



/* GRID */

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

    gap:30px;

}



/* CARD DESIGN */

.card{

    background:#ffffff;

    padding:30px;

    border-radius:18px;

    box-shadow:0 8px 30px rgba(0,0,0,0.05);

    transition:all 0.35s ease;

    position:relative;

    overflow:hidden;

}



/* Top Accent Line */

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#1da1f2,#0a4f75);

}



/* Hover Effect */

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 40px rgba(0,0,0,0.08);

}



/* CARD TITLE */

.card h3{

    font-size:19px;

    margin-bottom:18px;

    color:#0a4f75;

    font-weight:600;

}



/* LIST */

.card ul{

    list-style:none;

    padding:0;

}



.card ul li{

    margin-bottom:10px;

    padding-left:26px;

    position:relative;

    font-size:14px;

    color:#444;

}



/* Modern Check Icon */

.card ul li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#1da1f2;

    font-weight:bold;

}



/* WIDE CARD (For Packaging & Closeout Full Width) */

.grid-full{

    display:grid;

    grid-template-columns:1fr;

}



/* FOOTER */

.footer{

    background:linear-gradient(90deg,#0a4f75,#08364f);

    color:#fff;

    text-align:center;

    padding:28px;

    margin-top:80px;

    font-size:14px;

}



/* RESPONSIVE */

@media(max-width:768px){

    .section h2{

        font-size:26px;

    }



    .category-title{

        font-size:22px;

    }

}





.contact-section{

    padding:80px 8%;

    display:flex;

    gap:50px;

}



/* LEFT INFO */



.contact-info{

    flex:1;

}



.contact-info h2{

    font-size:28px;

    color:#0a4f75;

    margin-bottom:25px;

}



.info-box{

    background:#ffffff;

    padding:25px;

    border-radius:16px;

    box-shadow:0 8px 25px rgba(0,0,0,0.05);

    margin-bottom:20px;

    transition:0.3s;

}



.info-box:hover{

    transform:translateY(-5px);

}



.info-box h4{

    margin-bottom:8px;

    color:#1da1f2;

}



/* RIGHT FORM */



.contact-form{

    flex:1;

    background:#ffffff;

    padding:40px;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(0,0,0,0.06);

}



.contact-form h2{

    margin-bottom:25px;

    color:#0a4f75;

}



.form-group{

    margin-bottom:18px;

}



.form-group input,

.form-group textarea{

    width:100%;

    padding:14px;

    border-radius:10px;

    border:1px solid #dceeff;

    outline:none;

    font-size:14px;

    transition:0.3s;

}



.form-group input:focus,

.form-group textarea:focus{

    border-color:#1da1f2;

    box-shadow:0 0 0 3px rgba(29,161,242,0.1);

}



textarea{

    resize:none;

    height:120px;

}



/* BUTTON */



.btn{

    background:linear-gradient(90deg,#1da1f2,#0a4f75);

    color:#fff;

    padding:14px 30px;

    border:none;

    border-radius:30px;

    cursor:pointer;

    font-size:14px;

    transition:0.3s;

}



.btn:hover{

    opacity:0.9;

}



/* FOOTER */



.footer{

    background:linear-gradient(90deg,#0a4f75,#08364f);

    color:#fff;

    text-align:center;

    padding:25px;

    margin-top:60px;

}



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



@media(max-width:992px){

    .contact-section{

        flex-direction:column;

    }

}



@media(max-width:768px){

    .page-title h1{

        font-size:26px;

    }



    .contact-form{

        padding:25px;

    }

}





.section h2{

    text-align:center;

    font-size:32px;

    color:#0a4f75;

    margin-bottom:50px;

    position:relative;

}



.section h2::after{

    content:"";

    width:60px;

    height:4px;

    background:linear-gradient(90deg,#1da1f2,#0a4f75);

    display:block;

    margin:15px auto 0;

    border-radius:10px;

}



/* ================= GRID ================= */



.services-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}



/* ================= CARD ================= */



.service-card{

    background:#ffffff;

    padding:30px;

    border-radius:18px;

    box-shadow:0 8px 30px rgba(0,0,0,0.05);

    transition:0.3s;

    position:relative;

}



.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#1da1f2,#0a4f75);

    border-radius:18px 18px 0 0;

}



.service-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,0,0,0.08);

}



.service-card p{

    font-size:14px;

    color:#444;

}



/* ================= COMMITMENT ================= */



.commitment{

    margin-top:80px;

    background:linear-gradient(135deg,#d8f1ff,#eaf8ff);

    padding:50px;

    border-radius:20px;

    text-align:center;

}



.commitment h3{

    font-size:26px;

    color:#0a4f75;

    margin-bottom:20px;

}



.commitment p{

    max-width:900px;

    margin:auto;

    font-size:15px;

    color:#333;

}