/* === BASE STYLES === */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

body {

    font-family: 'Poppins', sans-serif;

    background-color: #f6f9f6;

    color: #f5f5f5;

    line-height: 1.6;

    scroll-behavior: smooth;

}

section {

    padding: 80px 20px;

    text-align: center;

}

h2 {

    font-size: 32px;

    color: #ffd700;

    margin-bottom: 30px;

}

/* === HEADER === */

.header {

    background-color: #000;

    color: #ffd700;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 30px;

    position: sticky;

    top: 0;

    z-index: 1000;

}

.logo {

    font-size: 24px;

    font-weight: 600;

}

.logo {

    display: flex;

    align-items: center;

    gap: 10px;

}

.logo-img {

    height: 40px;

    width: auto;

}

nav ul {

    list-style: none;

    display: flex;

    gap: 20px;

}

nav ul li a {

    text-decoration: none;

    color: #f5f5f5;

    font-weight: 500;

    transition: color 0.3s;

}

nav ul li a:hover {

    color: #ffd700;

}

.menu-icon {

    display: none;

    font-size: 28px;

    cursor: pointer;

    color: #ffd700;

}

/* === HERO SECTION === */

.hero {

    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)),

        url('../images/hero.jpg') no-repeat center center/cover;

    color: white;

    padding: 120px 20px;

}

.hero h1 {

    font-size: 36px;

    margin-bottom: 15px;

}

.hero p {

    font-size: 18px;

}

/* === CARDS === */

.card-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 20px;

    margin-top: 20px;

}

.card {

    background: #1a1a1a;

    padding: 25px;

    border-radius: 15px;

    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.1);

    max-width: 250px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.card:hover {

    transform: translateY(-15px);

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

}

.card img {

    width: 100%;

    height: 180px;

    object-fit: cover;

    border-radius: 10px;

    margin-bottom: 15px;

}

.card h3 {

    color: #ffd700;

    margin-bottom: 10px;

}

.card1 {

    color: #0a0a0a;

    margin-bottom: 10px;

}

.card2 {

    background: #1a1a1a;

    padding: 25px;

    border-radius: 15px;

    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.1);

    max-width: 300px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.about-highlights {

    list-style: none;

    padding: 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 20px;

    margin-top: 20px;

}

.about-highlights li {

    font-size: 16px;

    color: #080808;

    background: #ffd700;

    padding: 10px 20px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    gap: 10px;

}

/* === FORM === */

form {

    max-width: 500px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 15px;

}

form input,
form button {

    padding: 14px;

    font-size: 16px;

    border-radius: 6px;

    border: none;

}

form input {

    background: #222;

    color: #fff;

    border: 1px solid #444;

}

form select {

    background: #222;

    color: #fff;

    border: 1px solid #444;

    padding: 14px;

    font-size: 16px;

    border-radius: 6px;

}

form button {

    background: linear-gradient(90deg, #ffd700, #e6c200);

    color: #000;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.3s ease;

}

form button:hover {

    background: linear-gradient(90deg, #e6c200, #ffd700);

}

.contact-us-section {

    background-color: #f6f9f6;

    color: #fff;

    padding: 60px 20px;

    text-align: center;

}

.contact-us-section h2 {

    font-size: 32px;

    color: #ffd700;

    margin-bottom: 30px;

}

.contact-info {

    font-size: 16px;

    color: #080808;

    line-height: 1.8;

}

.contact-info i {

    margin-right: 10px;

}

.contact-info a {

    color: #ffd700;

    text-decoration: none;

}

.contact-info a:hover {

    text-decoration: underline;

}

/* === FOOTER === */

.footer {

    background: #000;

    color: #fff;

    text-align: center;

    padding: 15px 10px;

}

.footer-content {

    max-width: 800px;

    margin: 0 auto;

}

.footer .social-links {

    margin-bottom: 20px;

}

.footer .social-links a {

    color: #d4af37;

    font-size: 24px;

    margin: 0 10px;

    transition: color 0.3s;

}

.footer .social-links a:hover {

    color: #fff;

}

.industries-section {

    padding: 60px 20px;

    background: #f9f9f9;

    text-align: center;

}

.industries-grid {

    display: grid;

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

    gap: 30px;

    max-width: 1000px;

    margin: 0 auto;

}

.industry {

    background: #fff;

    padding: 20px;

    border-radius: 12px;

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

    transition: transform 0.3s;

}

.industry:hover {

    transform: translateY(-5px);

}

.industry i {

    font-size: 36px;

    color: #d4af37;

    margin-bottom: 10px;

}

.industry h3 {

    font-size: 18px;

    margin: 0;

}

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

@media (max-width: 768px) {

    nav ul {

        display: none;

        flex-direction: column;

        background: #000;

        position: absolute;

        top: 60px;

        right: 0;

        width: 100%;

        text-align: center;

        padding: 20px;

    }

    nav ul.show {

        display: flex;

    }

    .menu-icon {

        display: block;

    }

    .card-container {

        flex-direction: column;

        align-items: center;

    }

    .hero h1 {

        font-size: 28px;

    }

    h2 {

        font-size: 26px;

    }

}