/* ===========================
   Omkar Murkunde Official Website
   style.css
=========================== */

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

body{

    font-family:Arial, Helvetica, sans-serif;

    background:linear-gradient(135deg,#0B3D91,#06142E);

    color:#ffffff;

    line-height:1.6;

}

/* Header */

header{

    background:rgba(0,0,0,0.30);

    position:sticky;

    top:0;

    backdrop-filter:blur(10px);

}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo h2{

    color:white;

}

nav ul{

    list-style:none;

    display:flex;

}

nav li{

    margin-left:20px;

}

nav a{

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

nav a:hover{

    color:#4FC3F7;

}

/* Hero */

.hero{

    text-align:center;

    padding:100px 20px;

}

.hero h1{

    font-size:48px;

    margin-bottom:20px;

}

.hero p{

    font-size:20px;

    max-width:700px;

    margin:auto;

    margin-bottom:35px;

}

/* Button */

.button{

    display:inline-block;

    background:#ffffff;

    color:#0B3D91;

    padding:15px 30px;

    border-radius:8px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.button:hover{

    background:#4FC3F7;

    color:#000;

}

/* Sections */

section{

    padding:60px 0;

}

section h2{

    text-align:center;

    margin-bottom:35px;

}

/* Cards */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}

.card{

    background:rgba(255,255,255,0.10);

    padding:25px;

    border-radius:12px;

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,0.18);

}

.card h3{

    margin-bottom:12px;

}

/* Contact */

.contact-preview{

    text-align:center;

}

.contact-preview a{

    color:#4FC3F7;

}

/* Footer */

footer{

    background:#04101F;

    text-align:center;

    padding:25px;

    margin-top:50px;

}

/* Mobile */

@media(max-width:768px){

header .container{

flex-direction:column;

}

nav ul{

flex-direction:column;

margin-top:20px;

}

nav li{

margin:10px 0;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:18px;

}

}