/* ==========================================
GOOGLE FONT
========================================== */

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

/* ==========================================
RESET
========================================== */

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

body{

    background:linear-gradient(180deg,#EAF8FF,#FFFDF5);

    color:#333;

}

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

.navbar{

    width:100%;

    height:80px;

    background:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 40px;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

    position:sticky;

    top:0;

    z-index:999;

}

.logo img{

    height:60px;

}

.navbar h2{

    color:#2196F3;

    font-size:28px;

}

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

.feedbackHero{

    padding:70px 20px;

    text-align:center;

    background:linear-gradient(135deg,#E3F2FD,#FFF8E1);

}

.feedbackHero h1{

    font-size:46px;

    color:#1976D2;

    margin-bottom:20px;

}

.feedbackHero p{

    max-width:700px;

    margin:auto;

    line-height:1.8;

    color:#555;

}

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

.feedbackSection{

    width:90%;

    max-width:700px;

    margin:60px auto;

}

#feedbackForm{

    background:white;

    padding:40px;

    border-radius:25px;

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

}

.inputBox{

    margin-bottom:25px;

}

.inputBox label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#1976D2;

}

.inputBox input,

.inputBox select,

.inputBox textarea{

    width:100%;

    padding:15px;

    border:2px solid #BBDEFB;

    border-radius:15px;

    font-size:16px;

    outline:none;

    transition:.3s;

}

.inputBox input:focus,

.inputBox select:focus,

.inputBox textarea:focus{

    border-color:#2196F3;

    box-shadow:0 0 10px rgba(33,150,243,.2);

}

textarea{

    resize:vertical;

}

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

.submitBtn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:40px;

    background:linear-gradient(45deg,#42A5F5,#2196F3);

    color:white;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.submitBtn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(33,150,243,.3);

}

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

footer{

    background:#2196F3;

    color:white;

    text-align:center;

    padding:25px;

    margin-top:60px;

}

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

@media(max-width:768px){

.navbar{

    height:70px;

    padding:0 15px;

}

.logo img{

    height:45px;

}

.navbar h2{

    font-size:20px;

}

.feedbackHero{

    padding:50px 20px;

}

.feedbackHero h1{

    font-size:32px;

}

#feedbackForm{

    padding:25px;

}

}