/* ===============================
   VEDA GROUP WEBSITE CSS
   Desktop + Tablet + Mobile Responsive
================================ */

/* Root Color */
:root {
    --primary-color: #003366;
    --secondary-color: #e0f7fa;
    --text-color: #333333;
    --white: #ffffff;
}


/* General */
*{
    box-sizing:border-box;
}

body {
    font-family: Arial, sans-serif;
    margin:0;
    padding:0;
    background:var(--white);
    color:var(--text-color);
}

img{
    max-width:100%;
    height:auto;
}


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

.hero-section {

    background-color:var(--secondary-color);
    padding:20px;
    text-align:center;
    border-bottom:3px solid var(--primary-color);

}


.hero-section h1{

    color:var(--primary-color);
    font-size:40px;
    margin:10px 0;

}


.logo img{

    width:150px;
    max-width:100%;
    height:auto;

}



/* ===============================
        NAVIGATION
================================ */

nav ul{

    list-style:none;
    padding:0;
    margin:20px 0;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;

}


nav ul li{

    display:block;

}


nav ul li a{

    text-decoration:none;
    color:var(--primary-color);

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

    padding:10px 15px;
    border-radius:5px;

    display:block;

}


nav ul li a:hover{

    background:var(--primary-color);
    color:white;

}



/* ===============================
        BUTTON
================================ */


button{

    background:var(--primary-color);
    color:white;

    padding:12px 20px;

    border:none;
    border-radius:5px;

    cursor:pointer;

    font-size:16px;

}


button:hover{

    background:#004a99;

}




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


.services-section{

    padding:40px 20px;
    background:#f9f9f9;
    text-align:center;

}



.services-grid{

    display:grid;

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

    gap:20px;

    margin-top:20px;

}



.service-card{

    background:white;

    padding:30px;

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

    border-radius:10px;

    transition:.3s;

}


.service-card:hover{

    background:var(--primary-color);
    color:white;

    transform:translateY(-8px);

}




/* ===============================
        FORM STYLE
================================ */


form{

    width:100%;
    max-width:700px;
    margin:auto;

}



input,
select,
textarea{

    width:100%;

    padding:12px;

    margin-bottom:12px;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:16px;

}



/* ===============================
        SIDEBAR
================================ */


.sidebar{

    width:220px;

    height:100vh;

    background:var(--primary-color);

    color:white;

    position:fixed;

    padding-top:20px;

}


.sidebar ul{

    list-style:none;

    padding:0;

}


.sidebar ul li a{

    color:white;

    display:block;

    padding:12px 20px;

    text-decoration:none;

}


.sidebar ul li a:hover{

    background:#004a99;

}



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


@media(max-width:992px){


.hero-section h1{

    font-size:32px;

}


nav ul{

    gap:8px;

}


.services-grid{

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

}


}




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


@media(max-width:768px){


.hero-section{

    padding:15px;

}


.hero-section h1{

    font-size:24px;

}


.logo img{

    width:100px;

}



nav ul{

    flex-direction:column;

    width:100%;

}



nav ul li{

    width:100%;

}



nav ul li a{

    background:var(--primary-color);

    color:white;

    text-align:center;

}



.services-grid{

    grid-template-columns:1fr;

}



.service-card{

    padding:20px;

}



button{

    width:100%;

}



}



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


@media(max-width:480px){


.hero-section h1{

    font-size:20px;

}


.logo img{

    width:80px;

}


input,
select,
textarea{

    font-size:14px;

}


}