/*==================================================
BMS HARYANA MEMBERSHIP PORTAL
Version : 1.0
Theme : Orange Government
==================================================*/

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

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#f6f6f6;

color:#333;

overflow-x:hidden;

}

/*==============================
TOP BAR
==============================*/

.topbar{

width:100%;

background:#ef6c00;

padding:10px 0;

color:#fff;

font-size:15px;

font-weight:600;

}

.topbar .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.topbar a{

color:#fff;

text-decoration:none;

margin-left:20px;

transition:.3s;

}

.topbar a:hover{

color:#ffd54f;

}

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

header{

background:linear-gradient(135deg,#ff9800,#ef6c00);

padding:25px 0;

position:relative;

overflow:hidden;

}

header::before{

content:"";

position:absolute;

width:350px;

height:350px;

background:rgba(255,255,255,.08);

border-radius:50%;

left:-120px;

top:-120px;

}

header::after{

content:"";

position:absolute;

width:420px;

height:420px;

background:rgba(255,255,255,.06);

border-radius:50%;

right:-150px;

bottom:-200px;

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

z-index:10;

}

.logo img{

width:120px;

height:120px;

background:#fff;

padding:8px;

border-radius:50%;

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

}

.title{

text-align:center;

color:#fff;

}

.title h1{

font-size:42px;

font-weight:800;

margin-bottom:8px;

}

.title p{

font-size:22px;

margin-bottom:10px;

}

.title span{

background:#fff;

padding:10px 25px;

border-radius:50px;

color:#ef6c00;

font-weight:700;

display:inline-block;

}

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

nav{

background:#fff;

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

}

nav ul{

display:flex;

justify-content:center;

list-style:none;

}

nav ul li{

margin:0;

}

nav ul li a{

display:block;

padding:18px 25px;

font-weight:700;

color:#444;

text-decoration:none;

transition:.4s;

}

nav ul li a:hover{

background:#ff9800;

color:#fff;

}

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

.hero{

padding:80px 0;

background:#fffaf3;

position:relative;

}

.hero::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:80px;

background:#ff9800;

clip-path:ellipse(75% 100% at 50% 0);

}

.hero-text{

padding-top:40px;

}

.hero-text h4{

font-size:24px;

color:#ef6c00;

font-weight:700;

margin-bottom:15px;

}

.hero-text h1{

font-size:65px;

font-weight:900;

line-height:65px;

}

.hero-text h2{

font-size:55px;

font-weight:700;

margin-bottom:25px;

}

.hero-text p{

font-size:20px;

line-height:35px;

margin-bottom:35px;

}

.join{

display:inline-block;

background:#ff9800;

padding:15px 35px;

border-radius:50px;

text-decoration:none;

color:#fff;

font-weight:700;

margin-right:15px;

transition:.4s;

}

.join:hover{

background:#ef6c00;

transform:translateY(-5px);

}

.verify{

display:inline-block;

background:#222;

padding:15px 35px;

border-radius:50px;

text-decoration:none;

color:#fff;

font-weight:700;

transition:.4s;

}

.verify:hover{

transform:translateY(-5px);

}

/*==============================
MEMBER CARD
==============================*/

.card-box{

background:#fff;

padding:20px;

border:8px solid #ff9800;

border-radius:25px;

box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.card-box img{

width:100%;

display:block;

}

/*==============================
FEATURE BOX
==============================*/

.feature{

padding:70px 0;

}

.box{

background:#fff;

border-top:6px solid #ff9800;

border-radius:18px;

padding:35px 20px;

text-align:center;

transition:.4s;

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

height:220px;

}

.box:hover{

transform:translateY(-10px);

}

.box i{

font-size:55px;

color:#ff9800;

margin-bottom:20px;

}

.box h4{

font-size:22px;

font-weight:700;

color:#333;

}

.feature a{

text-decoration:none;

}

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

footer{

background:#1d1d1d;

padding:25px 0;

text-align:center;

color:#fff;

font-size:17px;

margin-top:50px;

}

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

@media(max-width:991px){

header .container{

flex-direction:column;

text-align:center;

}

.logo img{

margin-bottom:20px;

}

.title h1{

font-size:30px;

}

.title p{

font-size:18px;

}

nav ul{

flex-direction:column;

}

.hero-text{

text-align:center;

}

.hero-text h1{

font-size:45px;

}

.hero-text h2{

font-size:35px;

}

.join,
.verify{

display:block;

margin:10px auto;

width:220px;

}

}
/*=========================================
        PREMIUM PVC MEMBER CARD
=========================================*/

.member-card{
    width:100%;
    max-width:360px;
    margin:auto;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:3px solid #ff9800;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    font-family:'Segoe UI',sans-serif;
}

/* Header */

.card-top{

    background:linear-gradient(90deg,#ff6f00,#ff9800,#ffb300);

    color:#fff;

    display:flex;

    align-items:center;

    padding:12px;

}

.union-logo{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#fff;

    padding:4px;

    margin-right:10px;

}

.union-title h5{

    margin:0;

    font-size:16px;

    font-weight:700;

    line-height:22px;

}

.union-title small{

    display:block;

    font-size:10px;

    color:#fff;

}

.sub-title{

    margin-top:4px;

    font-size:11px;

    font-weight:bold;

}

/* Strip */

.member-strip{

    background:#d84315;

    color:#fff;

    text-align:center;

    font-size:15px;

    font-weight:bold;

    padding:8px;

    letter-spacing:1px;

}

/* Body */

.card-body-area{

    display:flex;

    padding:12px;

    align-items:flex-start;

    justify-content:space-between;

}

/* Photo */

.photo-box{

    width:95px;

}

.photo-box img{

    width:90px;

    height:110px;

    border:3px solid #ff9800;

    border-radius:8px;

    object-fit:cover;

}

/* Details */

.member-info{

    flex:1;

    margin-left:10px;

}

.member-info table{

    font-size:12px;

}

.member-info td{

    padding:2px;

}

.member-info td:first-child{

    font-weight:bold;

    color:#d84315;

}

/* QR */

.qr-box{

    text-align:center;

}

.qr-box canvas{

    width:70px!important;

    height:70px!important;

}

.qr-box small{

    display:block;

    margin-top:4px;

    font-size:10px;

    color:#666;

}

/* Footer */

.footer-strip{

    background:#ff9800;

    color:#fff;

    text-align:center;

    padding:8px;

    font-weight:bold;

    font-size:13px;

}

.card-bottom{

    background:#fff8e1;

    text-align:center;

    font-size:11px;

    padding:8px;

    color:#444;

}

.card-bottom div{

    margin:2px 0;

}