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

html {
    scroll-behavior: smooth;
}

body {
    background: #ffffff;
    color: #182033;
    font-family: 'Poppins', sans-serif;
}


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

.top-header {
    width: 100%;
    min-height: 80px;
    padding: 8px 3.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #d9e1eb;
    background: #fff;
}


/* LOGO */

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

.india-logo {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    position: relative;

    background:
        linear-gradient(
            to bottom,
            #ff8c00 0 33%,
            white 33% 66%,
            #168b3d 66% 100%
        );

    border: 2px solid #ddd;

    display: flex;
    justify-content: center;
    align-items: center;
}

.chakra {
    width: 25px;
    height: 25px;

    border-radius: 50%;
    background: #143f7d;

    color: white;

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

    font-size: 16px;
}

.site-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
}

.site-title span {
    color: #123b78;
}

.site-title b {
    color: #f04d1c;
}

.tagline {
    color: #244b87;
    font-size: 16px;
    margin-top: 3px;
}

.date-time {
    color: #07387e;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-time i {
    color: #159447;
    font-size: 22px;
}


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

.navbar {
    width: 100%;
    background: linear-gradient(
        90deg,
        #052967,
        #003d8e,
        #052967
    );

    min-height: 49px;
}

.nav-container {
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 2.5%;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-size: 15px;
    padding: 14px 27px;
    height: 49px;

    display: flex;
    align-items: center;

    transition: 0.3s;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(0, 0, 0, 0.20);
}

.nav-link i {
    margin-right: 10px;
    font-size: 18px;
}


/* OTHER SERVICES */

.other-services {
    position: relative;
    margin-left: auto;
}

.other-services button {
    height: 38px;
    min-width: 196px;

    border: none;
    border-radius: 10px;

    background: #ffbd00;
    color: #043b85;

    font-weight: 700;
    font-size: 15px;

    cursor: pointer;

    margin-right: 15px;
}

.other-services button i {
    margin-left: 25px;
}

.dropdown {
    position: absolute;
    top: 43px;
    left: 0;

    width: 196px;

    background: white;
    border-radius: 8px;

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

    display: none;
    z-index: 99;
}

.dropdown a {
    display: block;
    padding: 11px 15px;

    text-decoration: none;
    color: #123c78;

    border-bottom: 1px solid #eee;
}

.dropdown a:hover {
    background: #f2f6ff;
}

.other-services:hover .dropdown {
    display: block;
}


/* SEARCH */

.search-btn {
    width: 55px;
    color: white;
    font-size: 22px;
    text-align: center;
}


/* ================= MAIN ================= */

.main-container {
    width: 96%;
    max-width: 1500px;
    margin: auto;
}


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

.aadhaar-hero {
    margin-top: 14px;

    min-height: 255px;

    border: 1px solid #ff8d8d;
    border-radius: 12px;

    background:
        linear-gradient(
            110deg,
            #fffaf3,
            #fff4f4
        );

    display: flex;
    align-items: center;

    padding: 18px 35px;

    overflow: hidden;
}


/* LEFT AADHAAR SYMBOL */

.hero-left {
    width: 29%;
    text-align: center;
}

.aadhaar-symbol {
    width: 220px;
    height: 130px;

    margin: auto;

    position: relative;
}

.aadhaar-arc {
    position: absolute;

    width: 180px;
    height: 120px;

    left: 20px;
    bottom: 0;

    border-radius: 100% 100% 0 0;

    border: 12px solid #df1725;
    border-bottom: 0;

    transform: rotate(-5deg);
}

.aadhaar-arc::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 85px;

    left: 12px;
    bottom: 0;

    border-radius: 100% 100% 0 0;

    border: 10px solid #df1725;
    border-bottom: 0;
}

.aadhaar-dot {
    position: absolute;

    width: 20px;
    height: 20px;

    background: #df1725;

    border-radius: 50%;

    bottom: 8px;
    left: 82px;
}

.mera {
    color: #db1824;
    font-size: 36px;
    font-weight: 800;
}

.pehchaan {
    color: #252d3d;
    font-size: 22px;
    font-weight: 600;
}


/* HERO CONTENT */

.hero-content {
    width: 48%;
    text-align: center;
}

.hero-content h1 {
    color: #d91926;

    font-size: 48px;
    line-height: 48px;

    font-weight: 800;
}

.hero-content h2 {
    color: #06366f;

    font-size: 50px;
    line-height: 52px;

    font-weight: 800;
}

.hero-content p {
    margin-top: 10px;

    font-size: 17px;
    line-height: 24px;

    color: #283040;
}

.hero-button {
    display: inline-flex;

    align-items: center;
    gap: 15px;

    margin-top: 12px;

    padding: 11px 22px;

    color: white;
    text-decoration: none;

    border-radius: 8px;

    font-weight: 700;
    font-size: 17px;

    background:
        linear-gradient(
            90deg,
            #7020d8,
            #f1162c
        );
}

.hero-button:hover {
    transform: translateY(-2px);
}


/* AADHAAR CARD */

.aadhaar-card {
    width: 29%;

    background: white;

    border-radius: 13px;

    overflow: hidden;

    box-shadow:
        0 3px 12px rgba(0,0,0,.22);

    border: 1px solid #ddd;
}

.card-top {
    height: 45px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 5px 20px;

    color: #008f43;

    background: white;
}

.card-top span {
    color: #111;
    font-size: 25px;
}

.card-body {
    display: flex;
    align-items: center;

    padding: 7px 12px;

    gap: 10px;
}

.person-photo {
    width: 60px;
    height: 70px;

    background: #ddd;

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

    color: #555;

    font-size: 35px;
}

.person-info {
    display: flex;
    flex-direction: column;

    font-size: 10px;
    gap: 5px;
}

.qr {
    margin-left: auto;

    font-size: 28px;
    color: #111;
}

.aadhaar-number {
    text-align: center;

    border-top: 2px solid #e11;

    font-size: 19px;
    font-weight: 800;

    padding: 4px;
}

.card-bottom {
    text-align: center;

    background: #f3f3f3;

    padding: 4px;

    font-weight: 600;
}


/* ================= SECTION HEADING ================= */

.section-heading {
    margin: 17px 0;

    display: flex;
    align-items: center;

    gap: 18px;
}

.section-heading span {
    height: 2px;
    flex: 1;

    background:
        linear-gradient(
            90deg,
            #ff7633,
            #f62d90
        );
}

.section-heading h2 {
    white-space: nowrap;

    color: #073575;

    font-size: 29px;

    font-weight: 800;
}

.section-heading h2 i {
    color: #164b96;
    margin-right: 10px;
}

.heading-arrow {
    color: #e50019;
    font-size: 22px;
}


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

.services-grid {
    display: grid;

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

    gap: 15px;
}

.service-card {
    min-height: 220px;

    border: 1px solid;
    border-radius: 11px;

    text-align: center;

    padding: 10px 12px;

    transition: .25s;
}

.service-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 7px 18px rgba(0,0,0,.15);
}

.service-icon {
    width: 72px;
    height: 72px;

    margin: 0 auto 6px;

    border-radius: 50%;

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

    color: white;

    font-size: 32px;

    background:
        linear-gradient(
            145deg,
            #1782e8,
            #0752c7
        );
}

.text-icon {
    font-weight: 800;
    font-size: 28px;
}

.service-card h3 {
    font-size: 19px;

    font-weight: 800;

    line-height: 24px;
}

.service-card p {
    font-size: 15px;

    line-height: 22px;

    min-height: 48px;

    margin: 4px 0 8px;
}

.card-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-width: 150px;

    padding: 8px 15px;

    color: white;
    text-decoration: none;

    border-radius: 6px;

    font-weight: 700;
}

.card-button:hover {
    opacity: .85;
}


/* CARD COLORS */

.blue {
    background: #f1f7ff;
    border-color: #368ef5;
}

.blue h3 {
    color: #0665cf;
}

.blue .card-button,
.blue .service-icon {
    background: #0873e4;
}


.green {
    background: #f0fff6;
    border-color: #43c878;
}

.green h3 {
    color: #0c9c3b;
}

.green .card-button,
.green .service-icon {
    background: #0caf43;
}


.orange {
    background: #fff8ef;
    border-color: #ff8a32;
}

.orange h3 {
    color: #ed6810;
}

.orange .card-button,
.orange .service-icon {
    background: #fa730d;
}


.purple {
    background: #faf3ff;
    border-color: #a05df3;
}

.purple h3 {
    color: #6617ce;
}

.purple .card-button,
.purple .service-icon {
    background: #7115d4;
}


.pink {
    background: #fff3f8;
    border-color: #ff3181;
}

.pink h3 {
    color: #ef0060;
}

.pink .card-button,
.pink .service-icon {
    background: #ed0062;
}


.red {
    background: #fff2f3;
    border-color: #ff4a51;
}

.red h3 {
    color: #e51d29;
}

.red .card-button,
.red .service-icon {
    background: #ed1b24;
}


.cyan {
    background: #eefbff;
    border-color: #28bddc;
}

.cyan h3 {
    color: #009bbb;
}

.cyan .card-button,
.cyan .service-icon {
    background: #09a7c4;
}


.yellow {
    background: #fffaf0;
    border-color: #ffad21;
}

.yellow h3 {
    color: #ef9200;
}

.yellow .card-button,
.yellow .service-icon {
    background: #f59c00;
}


.teal {
    background: #effbfc;
    border-color: #23abb6;
}

.teal h3 {
    color: #00838b;
}

.teal .card-button,
.teal .service-icon {
    background: #07989c;
}


.indigo {
    background: #f1f5ff;
    border-color: #456bf4;
}

.indigo h3 {
    color: #153ec8;
}

.indigo .card-button,
.indigo .service-icon {
    background: #2147d8;
}


.violet {
    background: #faf2ff;
    border-color: #9b4ee8;
}

.violet h3 {
    color: #7613c9;
}

.violet .card-button,
.violet .service-icon {
    background: #7412ca;
}


.brown {
    background: #fff5f0;
    border-color: #ed6e43;
}

.brown h3 {
    color: #91320e;
}

.brown .card-button,
.brown .service-icon {
    background: #8d381b;
}


/* ================= INFO SECTION ================= */

.second-heading {
    margin-top: 20px;
}

.info-grid {
    display: grid;

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

    gap: 15px;
}

.info-box {
    min-height: 115px;

    border: 1px solid;

    border-radius: 10px;

    display: flex;

    align-items: center;

    padding: 10px 18px;

    gap: 15px;
}

.info-icon {
    min-width: 75px;
    height: 75px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 38px;
}

.info-box h3 {
    font-size: 18px;
}

.info-box p {
    font-size: 13px;
    line-height: 19px;
}

.blue-info {
    background: #f1f8ff;
    border-color: #72b9f5;
}

.blue-info h3 {
    color: #0b55aa;
}

.blue-info .info-icon {
    color: #0753a9;
}


.green-info {
    background: #f0fff4;
    border-color: #74d698;
}

.green-info h3 {
    color: #148f3c;
}

.green-info .info-icon {
    color: #148f3c;
}


.yellow-info {
    background: #fffaf0;
    border-color: #f3c358;
}

.yellow-info h3 {
    color: #e68c00;
}

.yellow-info .info-icon {
    color: #e68c00;
}


/* ================= BOTTOM INFO ================= */

.bottom-info {
    display: grid;

    grid-template-columns:
        1.4fr .95fr;

    gap: 15px;

    margin-top: 13px;
}

.notice-box,
.helpline-box {
    min-height: 105px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    padding: 12px 20px;

    gap: 20px;
}

.notice-box {
    border: 1px solid #ff6670;

    background: #fff0f1;
}

.notice-icon {
    color: #e51d2a;
    font-size: 55px;
}

.notice-box h3 {
    color: #dd2029;
    font-size: 18px;
}

.notice-box p {
    font-size: 13px;
    line-height: 19px;
}


.helpline-box {
    border: 1px solid #6798e6;

    background: #f0f5ff;

    justify-content: center;

    text-align: center;
}

.headphone {
    color: #08478e;
    font-size: 55px;
}

.helpline-box h3 {
    color: #0a4390;
    font-size: 18px;
}

.helpline-box strong {
    color: #08418a;
    font-size: 34px;
    line-height: 30px;
}

.helpline-box p {
    color: #08418a;
}


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

.footer {
    margin-top: 12px;

    min-height: 82px;

    padding: 10px 4%;

    background:
        linear-gradient(
            90deg,
            #032660,
            #002d73,
            #032660
        );

    color: white;

    display: grid;

    grid-template-columns:
        20% 60% 20%;

    align-items: center;
}


/* FOOTER LOGO */

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-aadhaar {
    text-align: center;
    color: #e31928;
}

.footer-aadhaar div {
    color: #e31928;
    font-size: 40px;
    line-height: 30px;
}

.footer-aadhaar strong {
    color: #e31928;
}


/* FOOTER CENTER */

.footer-center {
    text-align: center;
}

.footer-center p {
    font-size: 13px;
    margin: 3px;
}


/* SOCIAL */

.social-area {
    text-align: center;
}

.social-area > span {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
}

.social-icons {
    display: flex;

    justify-content: center;

    gap: 10px;
}

.social-icons a {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #1680dc;

    color: white;

    display: flex;

    align-items: center;
    justify-content: center;

    text-decoration: none;
}

.social-icons a:hover {
    transform: scale(1.1);
}


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

@media (max-width: 1000px) {

    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .aadhaar-hero {
        flex-wrap: wrap;
    }

    .hero-left {
        width: 30%;
    }

    .hero-content {
        width: 70%;
    }

    .aadhaar-card {
        width: 70%;
        margin: 15px auto 0;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 750px) {

    .top-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .navbar {
        overflow-x: auto;
    }

    .nav-container {
        width: max-content;
        padding-left: 0;
    }

    .nav-link {
        padding: 13px 18px;
    }

    .other-services {
        margin-left: 0;
    }

    .main-container {
        width: 94%;
    }

    .aadhaar-hero {
        flex-direction: column;
        padding: 20px 10px;
    }

    .hero-left,
    .hero-content,
    .aadhaar-card {
        width: 100%;
    }

    .hero-content h1 {
        font-size: 34px;
        line-height: 38px;
    }

    .hero-content h2 {
        font-size: 38px;
        line-height: 42px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-heading h2 {
        font-size: 21px;
    }

    .bottom-info {
        grid-template-columns: 1fr;
    }

    .footer {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 20px;
    }

}


@media (max-width: 480px) {

    .services-grid {
        grid-template-columns: 1fr;
    }

    .site-title {
        font-size: 26px;
    }

    .tagline {
        font-size: 13px;
    }

    .date-time {
        font-size: 12px;
    }

    .section-heading span {
        display: none;
    }

    .section-heading {
        justify-content: center;
    }

    .section-heading h2 {
        white-space: normal;
        text-align: center;
    }

    .hero-content p {
        font-size: 14px;
    }

    .notice-box {
        flex-direction: column;
        text-align: center;
    }

}