/*====================================================
 AVKAY.ORG
 Professional Style Sheet
 Part 1
 Developed for:
 www.avkay.org

 Author : ChatGPT
 Version : 1.0

======================================================*/


/*====================================================
 1. GOOGLE FONT
=====================================================*/

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


/*====================================================
 2. CSS VARIABLES
=====================================================*/

:root{

    --primary:#1565C0;
    --primary-dark:#0D4711;

    --secondary:#009688;

    --accent:#FFC107;

    --background:#F5F8FC;

    --white:#ffffff;

    --text:#333333;

    --light-text:#666666;

    --border:#d9d9d9;

    --shadow:
    0 8px 20px rgba(0,0,0,.12);

    --radius:12px;

    --transition:.35s ease;

}


/*====================================================
 3. RESET
=====================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}


/*====================================================
 4. BODY
=====================================================*/

body{

font-family:'Poppins',sans-serif;

background:var(--background);

color:var(--text);

line-height:1.7;

font-size:16px;

}


/*====================================================
 5. LINKS
=====================================================*/

a{

text-decoration:none;

color:var(--primary);

transition:var(--transition);

}

a:hover{

color:var(--primary-dark);

}


/*====================================================
 6. HEADINGS
=====================================================*/

h1{

font-size:42px;

font-weight:700;

margin-bottom:20px;

}

h2{

font-size:34px;

margin-bottom:18px;

}

h3{

font-size:28px;

margin-bottom:16px;

}

h4{

font-size:22px;

margin-bottom:14px;

}

h5{

font-size:18px;

margin-bottom:12px;

}

p{

margin-bottom:15px;

}


/*====================================================
 7. SEARCH AREA
=====================================================*/

form{

display:flex;

justify-content:flex-end;

align-items:center;

gap:10px;

margin:15px;

}

#search-box{

width:280px;

padding:12px 16px;

border-radius:30px;

border:1px solid var(--border);

outline:none;

font-size:15px;

transition:var(--transition);

background:white;

}

#search-box:focus{

border-color:var(--primary);

box-shadow:0 0 12px rgba(21,101,192,.30);

}

form button{

padding:12px 25px;

border:none;

border-radius:30px;

background:var(--primary);

color:white;

cursor:pointer;

font-weight:600;

transition:var(--transition);

}

form button:hover{

background:var(--primary-dark);

transform:translateY(-2px);

}


/*====================================================
 8. HEADER
=====================================================*/

header{

background:linear-gradient(135deg,
var(--primary),
var(--primary-dark));

padding:35px;

border-radius:15px;

box-shadow:var(--shadow);

margin-bottom:25px;

color:white;

}

header img{

max-width:100%;

border-radius:12px;

}

header a{

color:white;

font-weight:600;

}

header a:hover{

color:var(--accent);

}


/*====================================================
 9. PANELS
=====================================================*/

.w3-panel{

border-radius:12px;

box-shadow:var(--shadow);

padding:18px;

margin-top:15px;

margin-bottom:15px;

}


/*====================================================
10. MARQUEE
=====================================================*/

marquee{

font-size:18px;

font-weight:600;

color:pale-blue;

padding:8px;

}


/*====================================================
11. BUTTONS
=====================================================*/

.w3-button{

border-radius:8px;

transition:var(--transition);

font-weight:500;

}

.w3-button:hover{

transform:translateY(-3px);

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

}


/*====================================================
12. TOP NAVIGATION
=====================================================*/

.w3-bar{

background:var(--primary)!important;

border-radius:10px;

overflow:hidden;

box-shadow:var(--shadow);

}

.w3-bar .w3-button{

padding:14px 18px;

color:white!important;

}

.w3-bar .w3-button:hover{

background:var(--accent)!important;

color:#222!important;

}


/*====================================================
13. SIDEBAR
=====================================================*/

.w3-sidebar{

background:#202124!important;

width:280px;

box-shadow:var(--shadow);

}

.w3-sidebar .w3-button{

color:white;

padding:15px;

}

.w3-sidebar .w3-button:hover{

background:var(--primary)!important;

}


/*====================================================
14. DROPDOWN MENU
=====================================================*/

.w3-dropdown-content{

border-radius:10px;

box-shadow:var(--shadow);

overflow:hidden;

}

.w3-dropdown-content a{

padding:12px;

font-size:15px;

}


/*====================================================
15. IMAGES
=====================================================*/

img{

max-width:100%;

height:auto;

border-radius:12px;

transition:var(--transition);

}

img:hover{

transform:scale(1.02);

}


/*====================================================
16. CARDS
=====================================================*/

.w3-card,
.w3-card-4{

border-radius:12px;

box-shadow:var(--shadow)!important;

transition:var(--transition);

}

.w3-card:hover,
.w3-card-4:hover{

transform:translateY(-6px);

}


/*====================================================
17. SECTION SPACING
=====================================================*/

.w3-row-padding{

padding-top:25px;

padding-bottom:25px;

}

.w3-container{

padding-left:18px;

padding-right:18px;

}


/*====================================================
18. HORIZONTAL RULE
=====================================================*/

hr{

border:none;

height:3px;

background:linear-gradient(
to right,
var(--primary),
var(--accent));

margin:40px 0;

}


/*====================================================
19. FOOTER
=====================================================*/

footer{

margin-top:40px;

padding:25px;

background:var(--primary-dark);

color:white;

font-size:15px;

text-align:center;

border-radius:12px 12px 0 0;

}


/*====================================================
20. SMALL SCREEN
=====================================================*/

@media(max-width:768px){

form{

flex-direction:column;

align-items:stretch;

}

#search-box{

width:100%;

}

header{

padding:20px;

text-align:center;

}

h1{

font-size:30px;

}

h2{

font-size:26px;

}

.w3-sidebar{

width:240px;

}

}

.search-container{
    width:350px;
    margin:auto;
    position:relative;
}

#searchBox{
    width:100%;
    padding:10px;
    border:1px solid #999;
    border-radius:20px;
    font-size:16px;
    outline:none;
}

#searchResults{
    list-style:none;
    margin:0;
    padding:0;
    border:1px solid #ddd;
    border-top:none;
    background:white;
}

#searchResults li{
    padding:10px;
}

#searchResults li:hover{
    background:#f2f2f2;
}

#searchResults a{
    text-decoration:none;
    color:#333;
}