/* ==========================================
   STELLOR IT SERVICES
   Premium Digital Agency Landing Page CSS
   White + Red + Blue Theme
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');


:root {

    --black: #062B5C;
    --yellow: #D71920;
    --white: #ffffff;
    --light: #F8F8F5;
    --text: #444;
    --border: #E8E8E8;

    --blue: #1565F9;

    --heading: 'Manrope', sans-serif;
    --body: 'DM Sans', sans-serif;

}


/* ==========================================
   RESET
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {

    font-family: var(--body);
    color: var(--text);
    background: #fff;
    line-height: 1.6;

}


img {

    max-width: 100%;
    display: block;

}


a {

    text-decoration: none;

}


.container {

    width: 90%;
    max-width: 1200px;
    margin: auto;

}


h1,
h2,
h3 {

    font-family: var(--heading);
    color: var(--black);

}


/* ==========================================
   HEADER
========================================== */

.header {

    padding: 25px 0;
    background: #fff;

}


.header-inner {

    display: flex;
    align-items: center;
    justify-content: space-between;

}


.logo img {

    width: 170px;

}


nav {

    display: flex;
    gap: 35px;

}


nav a {

    font-size: 15px;
    font-weight: 600;
    color: var(--black);

}


nav a:hover {

    color: var(--yellow);

}


/* ==========================================
   PRIMARY BUTTON
========================================== */

.primary-btn {

    background: var(--yellow);
    color: #fff;

    padding: 14px 30px;

    border-radius: 50px;

    font-weight: 600;

    display: inline-block;

    transition: .3s;

}


.primary-btn:hover {

    background: var(--blue);
    color: #fff;

}


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

.hero {

    padding: 80px 0;

    background: #fafafa;

}


.hero-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 60px;

}


.hero-left h1 {

    font-size: 58px;

    line-height: 1.1;

    font-weight: 800;

    margin-bottom: 25px;

}


.hero-left h1 span {

    background: var(--yellow);

    color: #fff;

    padding: 5px 15px;

}


.hero-text {

    font-size: 18px;

    max-width: 560px;

    margin-bottom: 35px;

}


/* ==========================================
   HERO SMALL CARDS
========================================== */

.hero-small-cards {

    display: flex;

    gap: 20px;

    margin-top: 40px;

}


.small-card {

    background: #fff;

    padding: 22px 30px;

    border-radius: 18px;

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

}


.small-card h3 {

    font-size: 34px;

    margin: 0;

    color: var(--yellow);

}


/* ==========================================
   HERO RIGHT
========================================== */

.hero-right {

    position: relative;

}


.hero-image-box {

    height: 520px;

    background: #e9e9e9;

    border-radius: 35px;

    overflow: hidden;

}


.hero-image-box img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}


/* ==========================================
   FLOATING CARDS
========================================== */

.floating-card {

    position: absolute;

    background: #fff;

    padding: 20px;

    border-radius: 18px;

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

}


.card-one {

    top: 80px;

    left: -40px;

}


.card-two {

    bottom: 80px;

    right: -40px;

}


/* ==========================================
   COMPANIES
========================================== */

.companies {

    padding: 70px 0;

    text-align: center;

}


.companies h2 {

    font-size: 38px;

}


.company-logos {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 50px;

    margin-top: 40px;

}


.company-logos img {

    width: 120px;

    opacity: .7;

}


/* ==========================================
   SERVICES
========================================== */

.services {

    padding: 90px 0;

    background: #fff;

}


.services h2 {

    font-size: 42px;

    text-align: center;

}


.section-desc {

    text-align: center;

    max-width: 650px;

    margin: 20px auto 50px;

}


.service-grid {

    display: grid;

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

    gap: 25px;

}


.service-box {

    padding: 35px;

    border-radius: 25px;

    background: #fff;

    border: 1px solid var(--border);

    transition: .3s;

}


.service-box:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 50px rgba(0,0,0,.08);

    border-color: var(--blue);

}


.service-icon {

    width: 60px;

    height: 60px;

    background: var(--light);

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

}


.service-icon img {

    width: 35px;

    height: 35px;

}


.service-box h3 {

    font-size: 23px;

    margin-bottom: 15px;

}


/* ==========================================
   GROWTH SECTION
========================================== */

.growth-section {

    padding: 90px 0;

    background: #fafafa;

}


.growth-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}


/* ==========================================
   RED HIGHLIGHT CARD
========================================== */

.yellow-card {

    background: var(--yellow);

    padding: 35px;

    border-radius: 25px;

}


.yellow-card h3 {

    color: #fff;

}


.yellow-card p {

    color: #fff;

}


/* ==========================================
   DASHBOARD
========================================== */

.dashboard-box {

    margin-top: 30px;

    height: 250px;

    background: #ddd;

    border-radius: 25px;

    overflow: hidden;

}


.dashboard-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* ==========================================
   GROWTH RIGHT
========================================== */

.growth-right h2 {

    font-size: 42px;

}


/* ==========================================
   ANALYTICS CARDS
========================================== */

.analytics-cards {

    display: flex;

    gap: 20px;

    margin-top: 35px;

}


.analytics-card {

    background: #fff;

    padding: 20px;

    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(0,0,0,.07);

}


.analytics-card h3 {

    font-size: 32px;

    color: var(--yellow);

}


/* ==========================================
   FAQ
========================================== */

.faq-section {

    padding: 90px 0;

}


.faq-section h2 {

    text-align: center;

    font-size: 42px;

    margin-bottom: 40px;

}


.faq-box {

    max-width: 850px;

    margin: 20px auto;

    padding: 25px;

    border: 1px solid var(--border);

    border-radius: 20px;

}


.faq-box h3 {

    font-size: 20px;

    margin-bottom: 10px;

}


/* ==========================================
   CTA
========================================== */

.cta-section {

    background: var(--black);

    color: #fff;

    padding: 80px 0;

    text-align: center;

}


.cta-section h2 {

    color: #fff;

    font-size: 44px;

}


.cta-section p {

    margin: 20px 0 30px;

    color: #fff;

}


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

.footer {

    background: #031A38;

    color: #fff;

    padding: 25px;

    text-align: center;

}


.footer p {

    color: #fff;

}


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

@media(max-width:992px) {


    .hero-grid,
    .growth-grid {

        grid-template-columns: 1fr;

    }


    .service-grid {

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

    }


    nav {

        display: none;

    }


    .hero-left h1 {

        font-size: 42px;

    }


}


@media(max-width:600px) {


    .service-grid {

        grid-template-columns: 1fr;

    }


    .hero-left h1 {

        font-size: 34px;

    }


    .hero-small-cards,
    .analytics-cards {

        flex-direction: column;

    }


    .floating-card {

        display: none;

    }


}