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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#fff;
    color:#111;
}


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

.top-header{
    min-height:80px;

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

    padding:8px 35px;

    border:1px solid #ddd;
    background:#fff;
}

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

.logo-circle{
    width:58px;
    height:58px;

    border-radius:50%;

    background:
    linear-gradient(
        to bottom,
        #ff7417 0 33%,
        white 33% 66%,
        #138808 66% 100%
    );

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

    border:2px solid #ddd;
}

.logo-circle span{
    color:#173b8f;
    font-size:28px;
}

.logo-text h1{
    font-size:34px;
    color:#17356e;
}

.logo-text h1 span{
    color:#f15b22;
}

.logo-text p{
    color:#163b7c;
    font-size:17px;
}

.datetime{
    color:#123a78;
    font-size:14px;
    font-weight:bold;
}


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

.navbar{
    background:
    linear-gradient(
        90deg,
        #063276,
        #082e6e,
        #06255e
    );

    display:flex;
    align-items:center;

    min-height:50px;

    padding-left:25px;
}

.navbar > a{
    color:white;
    text-decoration:none;

    padding:16px 28px;

    font-size:16px;

    display:block;
}

.navbar > a:hover{
    background:#164b91;
}

.navbar .active{
    background:#092d69;
}


/* DROPDOWN */

.services-dropdown{
    margin-left:auto;
    margin-right:110px;

    position:relative;
}

.services-btn{
    background:#ffbf00;

    color:#092d69;

    border:none;
    border-radius:10px;

    padding:11px 30px;

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

    cursor:pointer;
}

.dropdown-content{
    display:none;

    position:absolute;

    right:0;
    top:47px;

    width:210px;

    background:white;

    box-shadow:0 5px 15px #777;

    z-index:100;

    border-radius:5px;

    overflow:hidden;
}

.dropdown-content a{
    color:#12376d;

    padding:12px 15px;

    background:white;

    text-decoration:none;

    display:block;
}

.dropdown-content a:hover{
    background:#eee;
}

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


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

.container{
    width:96%;
    max-width:1500px;

    margin:auto;
}


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

.hero{
    margin-top:14px;

    min-height:285px;

    border:1px solid #ff7b9c;

    border-radius:13px;

    background:
    linear-gradient(
        110deg,
        #fff4f7,
        #fff,
        #fff1f7
    );

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

    padding:25px;
}

.pan-logo{
    text-align:center;
    width:25%;
}

.pan-circle{
    width:120px;
    height:120px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #4320de,
        #20108e
    );

    color:white;

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

    margin:auto;

    font-size:52px;
    font-weight:bold;
}

.pan-logo h2{
    color:#c51d1d;

    margin-top:10px;

    font-size:32px;
}

.pan-logo p{
    font-size:19px;
    margin-top:5px;
}

.pan-logo h3{
    margin-top:15px;
    line-height:1.5;
    color:#17233b;
}


.hero-middle{
    width:40%;
    text-align:center;
}

.hero-middle h1{
    font-size:55px;

    color:#c51d1d;

    line-height:1;
}

.hero-middle h1 span{
    color:#092d69;
}

.hero-middle p{
    font-size:18px;

    margin:15px 0;

    line-height:1.6;
}

.official-btn{
    display:inline-block;

    background:
    linear-gradient(
        90deg,
        #5720cb,
        #f11c27
    );

    color:white;

    text-decoration:none;

    padding:12px 20px;

    border-radius:8px;

    font-weight:bold;

    font-size:17px;
}


/* PAN CARD */

.pan-card-demo{
    width:30%;
}

.pan-card{
    height:205px;

    border-radius:12px;

    padding:15px;

    background:
    linear-gradient(
        135deg,
        #dceaff,
        #a9bdf0
    );

    box-shadow:0 5px 12px #999;

    color:#102a5c;

    position:relative;
}

.pan-top{
    display:flex;
    justify-content:space-between;

    font-size:12px;
}

.pan-top span{
    text-align:right;
}

.small-title{
    margin:12px 0;

    font-size:12px;
}

.pan-card p{
    font-size:11px;
    margin:7px 0;
}

.pan-photo{
    position:absolute;

    right:12px;
    top:75px;

    width:72px;
    height:85px;

    background:#ddd;

    border:2px solid white;

    display:flex;

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

    font-size:35px;

    color:#666;
}

.pan-number{
    position:absolute;

    left:15px;
    bottom:20px;

    font-size:20px;

    font-weight:bold;
}


/* =====================================
   SECTION TITLE
===================================== */

.section-title{
    margin:25px 0 15px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;
}

.section-title > span{
    height:1px;

    flex:1;

    background:
    linear-gradient(
        90deg,
        #ff4b00,
        #ff0080
    );
}

.section-title h2{
    color:#123575;

    font-size:28px;

    white-space:nowrap;
}

.section-title h2 b{
    color:#e60000;
}


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

.services-grid{
    display:grid;

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

    gap:14px;
}

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

    border:1px solid;

    border-radius:12px;

    padding:14px;

    text-align:center;

    background:#fff;

    transition:.3s;
}

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

    box-shadow:
    0 5px 15px #bbb;
}

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

    border-radius:50%;

    margin:auto;

    display:flex;

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

    font-size:36px;

    color:white;

    font-weight:bold;
}

.service-card h3{
    margin-top:8px;

    font-size:20px;
}

.service-card p{
    margin:6px 0 12px;

    line-height:1.5;

    min-height:48px;
}

.card-btn{
    display:inline-block;

    color:white;

    text-decoration:none;

    padding:7px 28px;

    border-radius:5px;

    font-weight:bold;
}


/* =====================================
   CARD COLORS
===================================== */

.blue{
    border-color:#5aa0ff;
    background:#f5f9ff;
}

.blue .service-icon,
.blue .card-btn{
    background:#1476dc;
}

.blue h3{
    color:#0966c6;
}


.green{
    border-color:#55c987;
    background:#f5fff8;
}

.green .service-icon,
.green .card-btn{
    background:#13ad37;
}

.green h3{
    color:#07952b;
}


.orange{
    border-color:#ff9d4b;
    background:#fff9f4;
}

.orange .service-icon,
.orange .card-btn{
    background:#ff7510;
}

.orange h3{
    color:#e75d00;
}


.purple{
    border-color:#a65dff;
    background:#fcf7ff;
}

.purple .service-icon,
.purple .card-btn{
    background:#6415c9;
}

.purple h3{
    color:#5d13bd;
}


.pink{
    border-color:#ff4d9b;
    background:#fff6fa;
}

.pink .service-icon,
.pink .card-btn{
    background:#ed0968;
}

.pink h3{
    color:#db075e;
}


.red{
    border-color:#ff6666;
    background:#fff6f6;
}

.red .service-icon,
.red .card-btn{
    background:#e71919;
}

.red h3{
    color:#d91515;
}


.cyan{
    border-color:#4ccbe4;
    background:#f3fcff;
}

.cyan .service-icon,
.cyan .card-btn{
    background:#08abc7;
}

.cyan h3{
    color:#0797b2;
}


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

.yellow .service-icon,
.yellow .card-btn{
    background:#f39800;
}

.yellow h3{
    color:#ed8700;
}


.teal{
    border-color:#37b8c0;
    background:#f2ffff;
}

.teal .service-icon,
.teal .card-btn{
    background:#058d97;
}

.teal h3{
    color:#087b83;
}


.indigo{
    border-color:#6187ff;
    background:#f5f7ff;
}

.indigo .service-icon,
.indigo .card-btn{
    background:#214edc;
}

.indigo h3{
    color:#173fba;
}


.violet{
    border-color:#bd67ff;
    background:#fbf5ff;
}

.violet .service-icon,
.violet .card-btn{
    background:#6914d4;
}

.violet h3{
    color:#5d0fbf;
}


.brown{
    border-color:#b8795a;
    background:#fff8f4;
}

.brown .service-icon,
.brown .card-btn{
    background:#88401f;
}

.brown h3{
    color:#793618;
}


/* =====================================
   INFORMATION
===================================== */

.info-grid{
    display:grid;

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

    gap:15px;
}

.info-box{
    border:1px solid #b5d4ff;

    border-radius:10px;

    padding:13px;

    display:flex;

    gap:12px;

    align-items:center;

    background:#f6fbff;
}

.info-icon{
    font-size:42px;

    color:#124e9c;
}

.info-box h3{
    color:#1450a0;

    margin-bottom:5px;
}

.info-box p{
    font-size:14px;

    line-height:1.4;
}


/* =====================================
   NOTICE
===================================== */

.notice-grid{
    display:grid;

    grid-template-columns:
    1.2fr 1fr;

    gap:15px;

    margin-top:15px;
}

.notice{
    border:1px solid #ff8585;

    background:#fff4f4;

    border-radius:10px;

    padding:15px;

    display:flex;

    align-items:center;

    gap:15px;
}

.notice-icon{
    font-size:48px;

    color:#d00000;
}

.notice h3{
    color:#d00000;

    margin-bottom:4px;
}

.notice p{
    line-height:1.5;
}

.help{
    border:1px solid #6d9cff;

    background:#f1f6ff;

    border-radius:10px;

    padding:15px;

    text-align:center;
}

.help h3{
    color:#174697;

    font-size:20px;
}

.help p{
    line-height:1.7;
}


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

footer{
    margin-top:10px;

    background:
    linear-gradient(
        90deg,
        #061e54,
        #082c72,
        #061d50
    );

    color:white;

    text-align:center;

    padding:16px;
}

.footer-logo{
    width:60px;
    height:60px;

    border-radius:50%;

    border:2px solid white;

    display:flex;

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

    margin:auto;

    font-weight:bold;

    font-size:20px;
}

footer h3{
    margin-top:5px;
}

footer p{
    margin:6px;

    font-size:14px;
}

.social{
    margin-top:8px;
}

.social a{
    display:inline-flex;

    width:38px;
    height:38px;

    border-radius:50%;

    background:#1672db;

    color:white;

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

    margin:3px;

    text-decoration:none;

    font-weight:bold;
}


/* =====================================
   TABLET
===================================== */

@media(max-width:900px){

    .top-header{
        padding:10px;

        flex-direction:column;

        gap:10px;

        text-align:center;
    }

    .logo-text h1{
        font-size:28px;
    }

    .navbar{
        flex-wrap:wrap;

        padding:0;
    }

    .navbar > a{
        padding:12px 15px;

        font-size:14px;
    }

    .services-dropdown{
        margin:5px auto;
    }

    .hero{
        flex-direction:column;

        gap:25px;

        text-align:center;
    }

    .pan-logo,
    .hero-middle,
    .pan-card-demo{
        width:100%;
    }

    .hero-middle h1{
        font-size:40px;
    }

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

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

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


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

@media(max-width:550px){

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

    .section-title{
        gap:8px;
    }

    .section-title h2{
        font-size:18px;
    }

    .logo-area{
        flex-direction:column;
    }

    .navbar{
        flex-direction:column;

        width:100%;
    }

    .navbar > a{
        width:100%;

        text-align:center;
    }

    .services-dropdown{
        margin:8px auto;
    }

    .hero-middle h1{
        font-size:34px;
    }

    .hero-middle p{
        font-size:15px;
    }

    .pan-card{
        width:100%;
    }

    .datetime{
        font-size:12px;
    }
}