/*==================================================
  FEEDBACKSYSTEMS.IN
  Premium SaaS Design System
==================================================*/

:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#0f766e;
    --accent:#f59e0b;

    --dark:#0f172a;
    --dark2:#1e293b;

    --text:#334155;
    --text-light:#64748b;

    --bg:#f8fafc;
    --white:#ffffff;

    --border:#e2e8f0;

    --shadow-sm:0 5px 15px rgba(0,0,0,.05);
    --shadow:0 10px 35px rgba(0,0,0,.08);
    --shadow-lg:0 20px 60px rgba(0,0,0,.12);

    --radius:18px;

    --transition:.35s ease;
}

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    line-height:1.7;
}

/*==========================
SCROLLBAR
===========================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#edf2f7;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius:20px;
}

/*==========================
LINKS & IMAGES
===========================*/

a{
    text-decoration:none;
    transition:var(--transition);
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

/*==========================
CONTAINER & SECTIONS
===========================*/

.container{
    width:min(1280px,92%);
    margin:auto;
}

section{
    padding:90px 0;
    position:relative;
}

.section-title{
    font-size:48px;
    font-weight:800;
    color:var(--dark);
    text-align:center;
    margin-bottom:18px;
}

.section-title span{
    color:var(--primary);
}

.section-subtitle{
    width:min(760px,100%);
    margin:auto;
    text-align:center;
    color:var(--text-light);
    font-size:18px;
    margin-bottom:70px;
}

/*==========================
NAVBAR
===========================*/

.navbar{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    z-index:999;
    backdrop-filter:blur(14px);
    background:rgba(255,255,255,.82);
    border-bottom:1px solid rgba(255,255,255,.4);
    transition:.4s;
}

.navbar.scrolled{
    background:#fff;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.nav-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:82px;
}

/*==========================
LOGO
===========================*/

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo img{
    width:56px;
    border-radius:14px;
    box-shadow:var(--shadow-sm);
}

.logo-text h2{
    color:var(--dark);
    font-size:24px;
    font-weight:800;
}

.logo-text span{
    color:var(--primary);
}

.logo-text small{
    display:block;
    color:var(--text-light);
    font-size:12px;
    margin-top:2px;
}

/*==========================
MENU
===========================*/

.nav-links{
    display:flex;
    list-style:none;
    gap:34px;
}

.nav-links li a{
    color:var(--dark);
    font-weight:600;
    position:relative;
}

.nav-links li a:hover{
    color:var(--primary);
}

.nav-links li a.active{
    color:var(--primary);
}

.nav-links li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:3px;
    background:linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius:30px;
    transition:.35s;
}

.nav-links li a:hover::after,
.nav-links li a.active::after{
    width:100%;
}

/*==========================
BUTTONS
===========================*/

.nav-buttons{
    display:flex;
    gap:15px;
}

.btn-primary,
.btn-outline{
    padding:14px 26px;
    border-radius:50px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:.35s;
    border: none;
    cursor: pointer;
}

.btn-primary{
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    color:#fff;
    box-shadow:0 10px 25px rgba(37,99,235,.25);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(37,99,235,.35);
}

.btn-outline{
    border:2px solid var(--primary);
    color:var(--primary);
    background:#fff;
}

.btn-outline:hover{
    background:var(--primary);
    color:#fff;
}

/*==========================
MOBILE TOGGLE
===========================*/

.mobile-toggle{
    display:none;
    width:48px;
    height:48px;
    border:none;
    border-radius:12px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    font-size:20px;
}

.mobile-toggle:hover{
    background:var(--primary);
    color:#fff;
}

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

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    position:relative;
    padding-top:120px;
    background: linear-gradient(135deg,#f8fbff 0%,#eef5ff 45%,#ffffff 100%);
}

.hero::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:rgba(37,99,235,.08);
    top:-250px;
    right:-150px;
    filter:blur(10px);
    animation:floatBlob 12s infinite ease-in-out;
}

.hero::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(15,118,110,.08);
    left:-180px;
    bottom:-180px;
    animation:floatBlob2 15s infinite ease-in-out;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:70px;
}

.hero-content{
    position:relative;
    z-index:5;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 20px;
    border-radius:50px;
    background:#ffffff;
    box-shadow:var(--shadow-sm);
    color:var(--primary);
    font-weight:700;
    margin-bottom:30px;
}

.hero-badge i{
    color:var(--secondary);
}

.hero h1{
    font-size:64px;
    line-height:1.08;
    color:var(--dark);
    margin-bottom:25px;
    font-weight:800;
}

.hero h1 span{
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero p{
    font-size:19px;
    color:var(--text-light);
    margin-bottom:40px;
    max-width:620px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:45px;
}

.hero-tags span{
    padding:10px 18px;
    border-radius:30px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    font-size:14px;
    font-weight:600;
    color:var(--dark);
}

.hero-tags span i{
    color:var(--secondary);
    margin-right:6px;
}

/* RIGHT SIDE */

.hero-image{
    position:relative;
    z-index:5;
}

.dashboard{
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.12);
    border:1px solid rgba(255,255,255,.7);
}

.dashboard img{
    width:100%;
    display:block;
}

/* FLOATING CARDS */

.float-card{
    position:absolute;
    background:#fff;
    padding:16px 22px;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    gap:14px;
    animation:floatCard 6s infinite ease-in-out;
}

.float-card i{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    color:#fff;
    font-size:20px;
}

.float-card h4{
    color:var(--dark);
    font-size:16px;
}

.float-card small{
    color:var(--text-light);
}

.card1{ top:20px; left:-60px; }
.card2{ bottom:40px; right:-40px; animation-delay:2s; }
.card3{ top:50%; right:-70px; animation-delay:1s; }

/* HERO STATS - ADDED FOR INDEX.PHP */

.hero-stats{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}

.hero-stat{
    background:#fff;
    border-radius:18px;
    padding:22px;
    box-shadow:var(--shadow-sm);
    text-align:center;
}

.hero-stat h2{
    font-size:34px;
    color:var(--primary);
    font-weight:800;
    margin: 0;
}

.hero-stat p{
    margin: 0;
    font-size:14px;
    color: var(--text-light);
}

.scroll-down{
    position:absolute;
    left:50%;
    bottom:35px;
    transform:translateX(-50%);
    animation:bounce 2s infinite;
}

.scroll-down i{
    font-size:34px;
    color:var(--primary);
}

/* ANIMATIONS */

@keyframes floatBlob{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(35px); }
}

@keyframes floatBlob2{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-35px); }
}

@keyframes floatCard{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
}

@keyframes bounce{
    0%,100%{ transform:translate(-50%,0); }
    50%{ transform:translate(-50%,10px); }
}

/*=================================================
TRUSTED & LOGO SLIDER
=================================================*/

.trusted{
    background:#fff;
    padding:90px 0;
}

.section-heading{
    text-align:center;
    max-width:760px;
    margin:auto;
    margin-bottom:60px;
}

.section-tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:#eff6ff;
    color:#2563eb;
    font-weight:700;
    margin-bottom:20px;
}

.section-heading h2{
    font-size:46px;
    color:#0f172a;
    margin-bottom:18px;
}

.section-heading p{
    font-size:18px;
    color:#64748b;
}

.logo-slider{
    overflow:hidden;
    position:relative;
    margin-top:40px;
}

.logo-track{
    display:flex;
    width:max-content;
    animation:slideLogo 30s linear infinite;
}

.logo-item{
    width:220px;
    height:120px;
    background:#fff;
    margin:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.logo-item img{
    max-height:70px;
    max-width:140px;
    object-fit:contain;
    filter:grayscale(100%);
    transition:.4s;
}

.logo-item:hover img{
    filter:none;
    transform:scale(1.08);
}

@keyframes slideLogo{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
}

/*=================================================
STATISTICS
=================================================*/

.stats{
    background:#f8fafc;
}

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

.stat-card{
    background:#fff;
    padding:40px;
    text-align:center;
    border-radius:22px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.35s;
}

.stat-card:hover{
    transform:translateY(-10px);
}

.stat-card i{
    font-size:42px;
    color:#2563eb;
    margin-bottom:20px;
}

.stat-card h2{
    font-size:46px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:12px;
}

.stat-card p{
    font-size:17px;
    color:#64748b;
}

/*==================================================
WHY IFAMS FEATURES GRID
==================================================*/

.why-ifams{
    background:#ffffff;
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:28px;
}

.feature-card{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.4);
    border-radius:22px;
    padding:35px 30px;
    transition:.35s;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    position:relative;
    overflow:hidden;
}

.feature-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#2563eb,#0f766e);
}

.feature-card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,0,0,.12);
}

.feature-card i{
    width:70px;
    height:70px;
    border-radius:18px;
    background:linear-gradient(135deg,#2563eb,#0f766e);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:25px;
}

.feature-card h3{
    font-size:24px;
    color:#0f172a;
    margin-bottom:15px;
}

.feature-card p{
    color:#64748b;
    font-size:16px;
    line-height:1.8;
}

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

.dashboard-showcase{
    background:linear-gradient(180deg,#f8fbff,#ffffff);
}

.dashboard-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:30px;
}

.dashboard-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    transition:.4s;
}

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

.dashboard-card.large{
    grid-row:span 2;
}

.dashboard-card img{
    width:100%;
    display:block;
}

.dashboard-content{
    padding:28px;
}

.dashboard-content h3{
    font-size:24px;
    color:#0f172a;
    margin-bottom:12px;
}

.dashboard-content p{
    color:#64748b;
    line-height:1.8;
}

/*==================================================
MODULES (INDEX & BROCHURE)
==================================================*/

.modules{
    background:#ffffff;
    padding:100px 0;
}

.modules-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:70px;
}

.module-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.07);
    transition:.4s;
    border:1px solid #edf2f7;
    position:relative;
    overflow:hidden;
}

.module-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#2563eb,#0f766e);
}

.module-card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,0,0,.12);
}

.module-icon{
    width:80px;
    height:80px;
    border-radius:22px;
    background:linear-gradient(135deg,#2563eb,#0f766e);
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;
}

.module-icon i{
    color:#fff;
    font-size:32px;
}

/* Unified List Styling for Modules */
.module-card ul{
    list-style:none;
    margin-top:20px;
    padding:0;
}

.module-card ul li{
    padding:12px 0;
    border-bottom:1px dashed var(--border);
    color:var(--text-light);
    position:relative;
    padding-left:28px;
}

.module-card ul li:last-child{
    border:none;
}

.module-card ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:12px;
    color:var(--secondary);
    font-weight:700;
}

/*==================================================
WORKFLOW / TIMELINE - ADDED FOR INDEX.PHP
==================================================*/

.workflow{
    background: var(--bg);
}

.timeline{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.timeline-item{
    background: #fff;
    padding: 30px 25px;
    border-radius: 22px;
    box-shadow: var(--shadow);
    text-align: center;
    width: 160px;
    transition: .35s;
}

.timeline-item:hover{
    transform: translateY(-8px);
}

.timeline-icon{
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.timeline-item h3{
    font-size: 18px;
    color: var(--dark);
    margin-bottom: 8px;
}

.timeline-item p{
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.5;
}

.timeline-arrow{
    display: flex;
    align-items: center;
    padding-top: 30px;
    color: var(--primary);
    font-size: 20px;
}

/*==================================================
POWERFUL FEATURES GRID - ADDED FOR INDEX.PHP
==================================================*/

.power-features{
    background: #fff;
}

.power-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.power-card{
    background: var(--bg);
    padding: 30px 20px;
    border-radius: 18px;
    text-align: center;
    transition: .35s;
    cursor: default;
}

.power-card:hover{
    transform: translateY(-8px);
    background: #fff;
    box-shadow: var(--shadow);
}

.power-card i{
    font-size: 40px;
    color: var(--primary);
    margin-bottom: 15px;
}

.power-card h3{
    font-size: 16px;
    color: var(--dark);
    font-weight: 600;
}

/*==================================================
TESTIMONIALS - ADDED FOR INDEX.PHP
==================================================*/

.testimonials{
    background: var(--bg);
}

.testimonial-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-card{
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: var(--shadow);
    position: relative;
    transition: .35s;
}

.testimonial-card:hover{
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.quote{
    position: absolute;
    top: 25px;
    right: 30px;
    font-size: 40px;
    color: rgba(37,99,235,0.1);
}

.testimonial-card > p{
    font-size: 16px;
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 25px;
    font-style: italic;
}

.testimonial-user{
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-user img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
}

.testimonial-user h4{
    font-size: 16px;
    color: var(--dark);
    margin-bottom: 2px;
}

.testimonial-user span{
    font-size: 13px;
    color: var(--text-light);
}

/*==================================================
PRICING GRID - ENHANCED FOR INDEX.PHP
==================================================*/

.pricing{
    background: var(--bg);
}

.pricing-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: start;
}

.pricing-card{
    position: relative;
    padding: 45px 35px;
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: .35s;
    border: 2px solid transparent;
}

.pricing-card.featured{
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 25px 60px rgba(37,99,235,.15);
}

.pricing-card:hover{
    transform: translateY(-10px);
}

.pricing-card.featured:hover{
    transform: scale(1.05) translateY(-10px);
}

.popular{
    display: inline-block;
    padding: 8px 18px;
    background: var(--primary);
    color: #fff;
    border-radius: 25px;
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 600;
}

.pricing-card h3{
    font-size: 30px;
    margin-bottom: 20px;
    color: var(--dark);
}

.price{
    font-size: 48px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 30px;
}

.price span{
    font-size: 18px;
    color: var(--text-light);
    font-weight: 500;
}

.pricing-card ul{
    list-style: none;
    margin-bottom: 35px;
    text-align: left;
}

.pricing-card ul li{
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}

.pricing-card ul li:last-child{
    border: none;
}

.pricing-card ul li i{
    color: var(--secondary);
    font-size: 14px;
}

/*==================================================
FAQ SECTION - ADDED FOR INDEX.PHP
==================================================*/

.faq{
    background: #fff;
}

.faq-container{
    max-width: 800px;
    margin: 0 auto;
}

.faq-item{
    background: var(--bg);
    border-radius: 18px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: .35s;
    border: 1px solid transparent;
}

.faq-item.active,
.faq-item:hover{
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.faq-question{
    width: 100%;
    padding: 22px 25px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    font-family: inherit;
}

.faq-question i{
    transition: .35s;
    color: var(--primary);
}

.faq-item.active .faq-question i{
    transform: rotate(45deg);
}

.faq-answer{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-item.active .faq-answer{
    max-height: 300px;
}

.faq-answer p{
    padding: 0 25px 22px;
    color: var(--text-light);
    line-height: 1.8;
}

/*==================================================
CALL TO ACTION - ADDED FOR INDEX.PHP
==================================================*/

.cta{
    padding: 100px 0;
}

.cta-box{
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    padding: 80px 60px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.cta-box::before{
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    top: -100px;
    right: -100px;
}

.cta-box .section-tag{
    background: rgba(255,255,255,.2);
    color: #fff;
}

.cta-box h2{
    color: #fff;
    font-size: 42px;
    margin-bottom: 20px;
}

.cta-box p{
    color: rgba(255,255,255,.9);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 35px;
}

.cta-buttons{
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.cta .btn-primary{
    background: #fff;
    color: var(--primary);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.cta .btn-primary:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,.2);
}

.cta .btn-outline{
    border-color: #fff;
    color: #fff;
}

.cta .btn-outline:hover{
    background: #fff;
    color: var(--primary);
}


/*=========================================
ABOUT PAGE
=========================================*/

.about-hero{ padding-top:150px; }

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    margin-top:70px;
}

.about-image{
    width:100%;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.10);
}

.about-grid h3{ font-size:36px; margin-bottom:25px; color:#0f172a; }
.about-grid p{ margin-bottom:20px; font-size:18px; line-height:1.9; color:#64748b; }

.light{ background:#f8fafc; }

.story{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    margin-top:60px;
}

.story-box{
    background:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    position:relative;
}

.story-box::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:6px;
    background:linear-gradient(180deg,#2563eb,#0f766e);
    border-radius:10px;
}

.year{
    display:inline-block;
    padding:10px 18px;
    border-radius:30px;
    background:#2563eb;
    color:#fff;
    font-weight:700;
    margin-bottom:20px;
}

.story-box h3{ margin-bottom:20px; color:#0f172a; }
.story-box p{ line-height:1.8; color:#64748b; }

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

.mission-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    margin-top:60px;
}

.mission-card{
    background:#fff;
    padding:45px;
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    text-align:center;
}

.mission-icon{
    width:90px;
    height:90px;
    margin:auto;
    margin-bottom:25px;
    border-radius:22px;
    background:linear-gradient(135deg,#2563eb,#0f766e);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:34px;
    color:#fff;
}

.mission-card h3{ font-size:30px; margin-bottom:20px; color:#0f172a; }
.mission-card p{ font-size:17px; line-height:1.9; color:#64748b; }

/*=========================================
VALUES
=========================================*/

.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.value-card{
    background:#fff;
    padding:35px;
    text-align:center;
    border-radius:22px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.35s;
}

.value-card:hover{ transform:translateY(-10px); }
.value-card i{ font-size:42px; color:#2563eb; margin-bottom:20px; }
.value-card h3{ margin-bottom:15px; color:#0f172a; }

/*=========================================
WHY
=========================================*/

.why-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-top:60px;
}

.why-item{
    background:#fff;
    padding:25px 30px;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.06);
    font-size:18px;
    font-weight:600;
    color:#0f172a;
}

.why-item i{ color:#10b981; margin-right:12px; }

/*=========================================
TEAM
=========================================*/

.team-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.team-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.team-card:hover{ transform:translateY(-10px); }

.team-card img{
    width:150px;
    height:150px;
    object-fit:cover;
    border-radius:50%;
    margin:auto;
    margin-bottom:25px;
    border:6px solid #2563eb;
}

.team-card h3{ color:#0f172a; margin-bottom:10px; }
.team-card span{ color:#2563eb; font-weight:700; display:block; margin-bottom:15px; }

/*=========================================
TECH
=========================================*/

.tech-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.tech-card{
    background:#fff;
    padding:35px;
    text-align:center;
    border-radius:22px;
    box-shadow:0 15px 35px rgba(0,0,0,.06);
    transition:.35s;
}

.tech-card:hover{ transform:translateY(-10px); }
.tech-card i{ font-size:50px; color:#2563eb; margin-bottom:20px; }

/*=========================================
FEATURES PAGE
=========================================*/

.features-intro{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    margin-top:70px;
}

.intro-image img{
    width:100%;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.1);
}

.intro-content h3{ font-size:40px; margin-bottom:25px; color:#0f172a; }
.intro-content p{ font-size:18px; line-height:1.9; color:#64748b; margin-bottom:30px; }

.intro-content ul{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.intro-content li{ font-weight:600; color:#0f172a; }

/*=========================================
FEATURE MODULES
=========================================*/

.module-showcase{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:70px;
}

.feature-module{
    background:#fff;
    padding:35px;
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    transition:.35s;
    border:1px solid #edf2f7;
}

.feature-module:hover{
    transform:translateY(-10px);
    box-shadow:0 35px 60px rgba(0,0,0,.12);
}

.module-header{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:25px;
}

.feature-module h3{ font-size:24px; color:#0f172a; }

.feature-module ul{
    list-style:none;
    margin-top:20px;
}

.feature-module ul li{
    padding:12px 0;
    border-bottom:1px dashed #e2e8f0;
    color:#64748b;
    position:relative;
    padding-left:28px;
}

.feature-module ul li:last-child{ border:none; }

.feature-module ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:12px;
    color:#10b981;
    font-weight:700;
}

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

.analytics-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    margin-top:60px;
}

.analytics-image img{
    width:100%;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.analytics-item{
    display:flex;
    gap:20px;
    margin-bottom:35px;
}

.analytics-item i{
    font-size:42px;
    color:#2563eb;
    margin-top:5px;
    min-width:50px;
}

.analytics-item h3{ margin-bottom:10px; color:#0f172a; }

/*=========================================
COMMUNICATION
=========================================*/

.communication-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.communication-card{
    background:#fff;
    padding:35px;
    border-radius:22px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.35s;
}

.communication-card:hover{ transform:translateY(-10px); }
.communication-card i{ font-size:46px; color:#2563eb; margin-bottom:20px; }

/*=========================================
SECURITY
=========================================*/

.security-grid,
.multi-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.security-card,
.multi-item{
    background:#fff;
    padding:35px;
    border-radius:22px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.security-card i,
.multi-item i{
    font-size:46px;
    color:#2563eb;
    margin-bottom:20px;
}

/*=========================================
COMPARISON TABLE
=========================================*/

.comparison-table{
    margin-top:60px;
    overflow-x:auto;
}

.comparison-table table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.comparison-table th{
    background:#2563eb;
    color:#fff;
    padding:20px;
    text-align:left;
}

.comparison-table td{
    padding:18px 20px;
    border-bottom:1px solid #edf2f7;
}

.comparison-table tbody tr:hover{ background:#f8fafc; }

/*=========================================
STACK
=========================================*/

.stack-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.stack-item{
    background:#fff;
    padding:35px;
    text-align:center;
    border-radius:22px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.35s;
}

.stack-item:hover{ transform:translateY(-10px); }
.stack-item i{ font-size:50px; color:#2563eb; margin-bottom:20px; }

/*=========================================
DOCUMENTATION
=========================================*/

.doc-category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
    margin-top:60px;
}

.doc-category{
    background:#fff;
    padding:40px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.doc-category:hover{ transform:translateY(-10px); }
.doc-category i{ font-size:48px; color:#2563eb; margin-bottom:25px; }

.document-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
    margin-top:60px;
}

.document-card{
    background:#fff;
    padding:35px;
    border-radius:24px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.document-card:hover{ transform:translateY(-10px); }
.document-card i{ font-size:50px; color:#2563eb; margin-bottom:20px; }
.document-card h3{ margin-bottom:15px; color:#0f172a; }
.document-card p{ margin-bottom:25px; color:#64748b; line-height:1.8; }

/*=========================================
DOWNLOADS
=========================================*/

.download-list{
    max-width:900px;
    margin:60px auto 0;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.download-list a{
    display:flex;
    align-items:center;
    gap:20px;
    padding:22px 28px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.06);
    color:#0f172a;
    font-weight:600;
    transition:.35s;
}

.download-list a:hover{
    transform:translateX(10px);
    background:#2563eb;
    color:#fff;
}

.download-list i{
    font-size:26px;
    width:35px;
    text-align:center;
}

/*=========================================
VERSION TABLE
=========================================*/

.version-table{
    margin-top:60px;
    overflow-x:auto;
}

.version-table table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.version-table th{
    background:#2563eb;
    color:#fff;
    padding:18px;
    text-align:left;
}

.version-table td{
    padding:18px;
    border-bottom:1px solid #edf2f7;
}

.version-table tbody tr:hover{ background:#f8fafc; }

/*=========================================
SUPPORT
=========================================*/

.support-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:60px;
}

.support-card{
    background:#fff;
    padding:40px;
    text-align:center;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.support-card:hover{ transform:translateY(-10px); }
.support-card i{ font-size:50px; color:#2563eb; margin-bottom:25px; }
.support-card h3{ margin-bottom:15px; color:#0f172a; }
.support-card p{ color:#64748b; line-height:1.8; }

/*=========================================
DEMO PAGE
=========================================*/

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.benefit-card{
    background:#fff;
    padding:40px;
    text-align:center;
    border-radius:22px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.benefit-card:hover{ transform:translateY(-10px); }
.benefit-card i{ font-size:48px; color:#2563eb; margin-bottom:20px; }

.demo-form{
    background:#fff;
    padding:50px;
    border-radius:30px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    margin-top:60px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group.full{ grid-column:1/3; }
.form-group label{ margin-bottom:10px; font-weight:600; color:#0f172a; }

.form-group input,
.form-group select,
.form-group textarea{
    padding:16px;
    border:1px solid #dbe4ee;
    border-radius:12px;
    font-size:16px;
    outline:none;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.alert{
    padding:18px;
    margin-bottom:30px;
    border-radius:12px;
    font-weight:600;
}

.success{ background:#dcfce7; color:#166534; border-left:5px solid #16a34a; }
.error{ background:#fee2e2; color:#991b1b; border-left:5px solid #dc2626; }
.warning{ background:#fef3c7; color:#92400e; border-left:5px solid #f59e0b; }

/*=========================================
DEPLOYMENT
=========================================*/

.deployment-grid,
.service-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    margin-top:60px;
}

.deployment-card,
.service-card{
    background:#fff;
    padding:40px;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.deployment-card:hover,
.service-card:hover{ transform:translateY(-10px); }

.deployment-card i,
.service-card i{ font-size:50px; color:#2563eb; margin-bottom:20px; }
.deployment-card h3,
.service-card h3{ margin-bottom:20px; color:#0f172a; }

.deployment-card ul{ list-style:none; }
.deployment-card ul li{ padding:10px 0; border-bottom:1px solid #edf2f7; }
.deployment-card ul li:last-child{ border:none; }

/*=========================================
AMC
=========================================*/

.amc-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.amc-card{
    background:#fff;
    padding:35px;
    text-align:center;
    border-radius:22px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.amc-card:hover{ transform:translateY(-10px); }
.amc-card i{ font-size:50px; color:#2563eb; margin-bottom:20px; }
.amc-card h3{ margin-bottom:15px; color:#0f172a; }
.amc-card p{ color:#64748b; line-height:1.8; }

/*=========================================
CONTACT SALES
=========================================*/

.contact-sales{
    background:#2563eb;
    padding:60px;
    border-radius:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    color:#fff;
    margin-top:60px;
}

.contact-sales h2{ font-size:42px; margin-bottom:20px; }
.contact-sales p{ font-size:18px; opacity:.95; max-width:650px; }

.contact-sales .btn-outline{
    border-color:#fff;
    color:#fff;
    margin-left:15px;
}

.contact-sales .btn-outline:hover{
    background:#fff;
    color:#2563eb;
}

/*=========================================
POLICY PAGES
=========================================*/

.policy-container{
    max-width:1000px;
    margin:auto;
    background:#fff;
    padding:60px;
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.policy-container h2{
    font-size:30px;
    margin-top:40px;
    margin-bottom:20px;
    color:#0f172a;
}

.policy-container h2:first-child{ margin-top:0; }
.policy-container p{ font-size:17px; line-height:2; color:#64748b; margin-bottom:20px; }
.policy-container ul{ padding-left:25px; margin-bottom:30px; }
.policy-container li{ padding:8px 0; color:#475569; }

.policy-footer{
    margin-top:60px;
    padding:40px;
    background:linear-gradient(135deg,#2563eb,#0f766e);
    border-radius:20px;
    color:#fff;
    text-align:center;
}

.policy-footer h3{ font-size:32px; margin-bottom:20px; }
.policy-footer p{ font-size:18px; line-height:1.8; color:#fff; margin:0; }

/*=========================================
CONTACT PAGE
=========================================*/

.contact-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.contact-card{
    background:#fff;
    padding:40px;
    border-radius:22px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.contact-card:hover{ transform:translateY(-10px); }
.contact-card i{ font-size:50px; color:#2563eb; margin-bottom:20px; }
.contact-card h3{ margin-bottom:15px; color:#0f172a; }
.contact-card p{ color:#64748b; line-height:1.8; }

/*=========================================
SOCIAL CONTACT
=========================================*/

.social-contact{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.social-box{
    background:#fff;
    padding:35px;
    border-radius:20px;
    text-align:center;
    text-decoration:none;
    color:#0f172a;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.social-box:hover{
    transform:translateY(-10px);
    background:#2563eb;
    color:#fff;
}

.social-box i{
    font-size:48px;
    margin-bottom:15px;
    display:block;
}

/*=========================================
BROCHURE
=========================================*/

.brochure-preview{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    margin-top:60px;
}

.brochure-cover img{
    width:100%;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.1);
}

.brochure-content ul{ margin:30px 0; padding-left:25px; }
.brochure-content li{ padding:10px 0; }

.overview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    margin-top:60px;
}

.overview-grid img{
    width:100%;
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.feature-box{
    background:#fff;
    padding:35px;
    border-radius:22px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.feature-box:hover{ transform:translateY(-10px); }
.feature-box i{ font-size:48px; color:#2563eb; margin-bottom:20px; }
.feature-box h3{ margin-bottom:15px; color:#0f172a; }
.feature-box p{ color:#64748b; line-height:1.8; }

/*=========================================
BROCHURE GALLERY
=========================================*/

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:60px;
}

.gallery-grid img{
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    transition:.35s;
}

.gallery-grid img:hover{ transform:scale(1.04); }

.benefit-grid,
.download-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.benefit-item,
.download-card{
    background:#fff;
    padding:35px;
    text-align:center;
    border-radius:22px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
    text-decoration:none;
    color:#0f172a;
}

.benefit-item:hover,
.download-card:hover{ transform:translateY(-10px); }
.benefit-item i,
.download-card i{ font-size:48px; color:#2563eb; margin-bottom:20px; }


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

@media(max-width:992px){
    .about-grid,
    .story,
    .mission-grid,
    .office-grid{
        grid-template-columns:1fr;
    }

    .team-grid,
    .tech-grid,
    .values-grid,
    .support-services,
    .channel-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .why-grid{
        grid-template-columns:1fr;
    }
    
    /* Index Page Responsive */
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero h1 { font-size: 42px; }
    .hero p { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    .hero-tags { justify-content: center; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-card.large { grid-row: span 1; }
    
    .modules-grid { grid-template-columns: repeat(2, 1fr); }
    
    .timeline { flex-direction: column; align-items: center; }
    .timeline-arrow { transform: rotate(90deg); padding: 0; }
    
    .power-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonial-grid { grid-template-columns: 1fr; }
    
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .pricing-card.featured { transform: scale(1); }
    .pricing-card.featured:hover { transform: translateY(-10px); }
    
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
    .social-contact { grid-template-columns: repeat(2, 1fr); }
    .brochure-preview, .overview-grid { grid-template-columns: 1fr; }
    .feature-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .benefit-grid, .download-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:768px){
    .team-grid,
    .tech-grid,
    .values-grid,
    .support-services,
    .channel-grid,
    .contact-grid,
    .social-contact{
        grid-template-columns:1fr;
    }
    
    .office-map iframe{ height:320px; }
    
    /* Index Page Responsive */
    .hero h1 { font-size: 34px; }
    .section-heading h2 { font-size: 32px; }
    .features-grid { grid-template-columns: 1fr; }
    .modules-grid { grid-template-columns: 1fr; }
    .power-grid { grid-template-columns: 1fr 1fr; }
    .cta-box { padding: 50px 25px; }
    .cta-box h2 { font-size: 30px; }
    
    .features-intro { grid-template-columns: 1fr; }
    .module-showcase { grid-template-columns: 1fr; }
    .analytics-grid { grid-template-columns: 1fr; }
    .communication-grid { grid-template-columns: repeat(2, 1fr); }
    .security-grid, .multi-grid { grid-template-columns: 1fr; }
    .stack-grid { grid-template-columns: repeat(2, 1fr); }
    .doc-category-grid, .document-grid { grid-template-columns: repeat(2, 1fr); }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full { grid-column: 1; }
    .deployment-grid, .service-grid { grid-template-columns: 1fr; }
    .amc-grid { grid-template-columns: repeat(2, 1fr); }
    
    .gallery-grid { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .benefit-grid, .download-grid { grid-template-columns: 1fr; }
}
/*=========================================
FOOTER
=========================================*/

.footer {
    background: var(--dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 80px 0 30px;
}

.footer h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
}

.footer h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
}

.footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 10px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 50px;
}

.footer p {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 12px;
}

.footer p i {
    color: var(--primary);
    width: 20px;
    margin-right: 8px;
}

.footer ul {
    list-style: none;
}

.footer ul li {
    margin-bottom: 12px;
}

.footer ul li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    transition: .3s;
    display: inline-block;
}

.footer ul li a:hover {
    color: #fff;
    padding-left: 6px;
}

.footer ul li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
}

/* Social Icons */
.social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.social a {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    transition: .35s;
}

.social a:hover {
    background: var(--primary);
    transform: translateY(-4px);
}

/* Divider & Copyright */
.footer hr {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 40px 0 25px;
}

.copyright {
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}