/* ===========================
   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
=========================== */

body{
    background:#f4f9ff;
}

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

.navbar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 8%;

    background:#0077b6;

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

}

.logo{
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo img{
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
}

.logo h2{
    color: white;
    font-size: 36px;
    font-weight: 700;
}

/* ===========================
SEARCH
=========================== */

.search-box input{

    width:280px;

    padding:10px;

    border:none;

    outline:none;

    border-radius:30px;

}

/* ===========================
BUTTONS
=========================== */

.nav-buttons button{

    padding:10px 22px;

    border:none;

    border-radius:30px;

    cursor:pointer;

    margin-left:10px;

    font-size:15px;

    transition:.3s;

}

#loginBtn{

    background:white;

    color:#0077b6;

}

#signupBtn{

    background:#00b4d8;

    color:white;

}

.nav-buttons button:hover{

    transform:scale(1.08);

}

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

.hero{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:70px 8%;

}

.hero-image img{

    width:520px;

    height:430px;

    object-fit:cover;

    border-radius:25px;

}

.hero-text{

    width:50%;

}

.hero-text h1{

    font-size:50px;

    color:#023e8a;

    margin-bottom:20px;

}

.hero-text p{

    font-size:18px;

    color:#555;

    margin-bottom:30px;

    line-height:30px;

}

#exploreBtn{

    padding:14px 28px;

    border:none;

    background:#0077b6;

    color:white;

    border-radius:30px;

    cursor:pointer;

    transition:.3s;

}

#exploreBtn:hover{

    background:#023e8a;

}

.hero-image{

    width:45%;

}


.hero-image img{
    width: 520px;
    height: 400px;
    object-fit: contain;
    border-radius: 20px;
}

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

.services{

    padding:60px 8%;

    text-align:center;

}

.services h2{

    color:#023e8a;

    margin-bottom:40px;

}

.service-container{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.card{

    width:250px;

    background:white;

    border-radius:15px;

    padding:25px;

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

    transition:.3s;

}

.card:hover{

    transform:translateY(-10px);

}

.card img{

    

width:90px;

height:90px;

object-fit:contain;

margin-bottom:15px;

}



.card h3{

    color:#0077b6;

    margin-bottom:10px;

}

.card p{

    color:#555;

}

/* ===========================
ABOUT
=========================== */

.about{

    padding:60px 10%;

    text-align:center;

}

.about h2{

    color:#023e8a;

    margin-bottom:20px;

}

.about p{

    line-height:30px;

    color:#555;

}

/* ===========================
FEATURES
=========================== */

.features{

    padding:60px 8%;

    text-align:center;

}

.features h2{

    color:#023e8a;

    margin-bottom:35px;

}

.feature-box{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

.feature{

    width:250px;

    background:#0077b6;

    color:white;

    padding:20px;

    border-radius:10px;

    transition:.3s;

}

.feature:hover{

    background:#023e8a;

}

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

footer{

    margin-top:60px;

    background:#023e8a;

    color:white;

    text-align:center;

    padding:35px;

}

footer h3{

    margin-bottom:10px;

}

footer p{

    margin-top:8px;

}

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

@media(max-width:992px){

.hero{

flex-direction:column;

text-align:center;

}

.hero-text{

width:100%;

}

.hero-image{

width:80%;

margin-top:40px;

}

.search-box{

display:none;

}

}

@media(max-width:768px){

.navbar{

flex-direction:column;

gap:20px;

}

.logo{

flex-direction:column;

}

.hero-text h1{

font-size:35px;

}

.card{

width:100%;

}

.feature{

width:100%;

}

}