body {margin:0;padding:0;font-family:'Poppins',sans-serif;background:#fff;}
header {width:100%;background:#fff;display:flex;justify-content:space-between;
align-items:center;padding:20px 6%;position:fixed;top:0;left:0;z-index:999;
box-shadow:0 2px 8px rgba(0,0,0,0.08);}
nav a {margin-left:28px;text-decoration:none;color:#1a1a1a;font-weight:500;}
nav a:hover {color:#d2b071;}
.logo {font-size:22px;font-weight:700;color:#d2b071;}
.spacer {height:110px;}

/* HERO */
.hero {
    position:relative;width:100%;height:90vh;
    background:url('https://images.pexels.com/photos/3862132/pexels-photo-3862132.jpeg')
    center/cover no-repeat;
    display:flex;align-items:center;padding-left:8%;
}
.hero::before {
    content:'';position:absolute;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.55);
}
.hero-content {position:relative;z-index:2;color:#fff;max-width:600px;}
.hero-content p {letter-spacing:4px;font-size:18px;color:#d2b071;}
.hero-content h1 {font-size:46px;font-weight:700;line-height:1.3;}
.hero-content h1 span {color:#d2b071;}
.hero-btn {display:inline-block;margin-top:25px;padding:14px 32px;background:#d2b071;
color:#000;font-weight:600;border-radius:6px;text-decoration:none;}
.hero-btn:hover {background:#fff;color:#000;}

/* SECTION */
.two-col {display:flex;gap:40px;padding:60px;}
.left {flex:1;}
.left h2 {font-size:32px;color:#c8a46b;margin-bottom:20px;}
.left p {font-size:16px;line-height:1.6;color:#333;}
.btn {display:inline-block;margin-top:20px;padding:12px 24px;background:#c8a46b;
color:#fff;text-decoration:none;border-radius:6px;}

.card {flex:1;background:#fff;border-radius:10px;overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.card-header {padding:15px;font-weight:600;}
.card-img {height:320px;background-size:cover;background-position:center;
position:relative;overflow:hidden;}

.overlay {
    position:absolute;bottom:-130%;left:0;width:100%;padding:25px;
    background:rgba(0,0,0,0.55);color:#fff;
    transition:bottom 0.75s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-img:hover .overlay {bottom:0;}

.small-btn {display:inline-block;margin-top:12px;padding:8px 16px;
background:#c8a46b;color:#fff;text-decoration:none;border-radius:4px;}

/* TECHNOLOGY SERVICES SECTION */
.services-heading {
    text-align: center;
    padding: 70px 20px 40px;
}
.services-subtitle {
    font-size: 12px;
    letter-spacing: 4px;
    font-weight: 500;
    color: #7a7a7a;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.services-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
}
.services-text {
    font-size: 16px;
    color: #555;
    max-width: 600px;
    margin: 15px auto 0;
    line-height: 1.6;
}

/* SUPPORTED PLATFORMS SLIDER */
.supported-platforms {
    text-align: center;
    padding: 50px 0;
}
.platform-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #1a1a1a;
}
.platform-slider {
    overflow: hidden;
    width: 100%;
}
.platform-track {
    display: flex;
    animation: scroll 22s linear infinite;
}
.platform-track img {
    height: 55px;
    margin: 0 45px;
    opacity: 0.9;
    transition: opacity 0.3s, transform 0.3s;
}
.platform-track img:hover {
    opacity: 1;
    transform: scale(1.12);
}
@keyframes scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* SERVICE ENQUIRY SECTION */
.service-enquiry {
    padding: 60px 0;
    background: #fff;
}

.service-wrapper {
    width: 90%;
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}

/* Left Image */
.service-image {
    background: url('https://images.pexels.com/photos/1181354/pexels-photo-1181354.jpeg') center/cover no-repeat;
    min-height: 540px;
}

/* Right Form */
.service-form {
    background: #f6f8fc;
    padding: 40px 50px;
}

.service-form h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-form p {
    font-size: 15px;
    margin-bottom: 25px;
}

form input,
form select {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 18px;
}

.check-holder {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.submit-btn {
    width: 130px;
    padding: 12px;
    background: #d2b071;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.submit-btn:hover {
    background: #c4a060;
}