body{

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

background:#ffffff;

color:#222;

}



.navbar-brand{

font-size:32px;

font-weight:bold;

}



.nav-link{

font-weight:600;

margin-right:10px;

}



.hero{

padding:80px 0;

background:linear-gradient(180deg,#ffffff,#eef3ff);

}



.hero h1{

font-size:60px;

font-weight:800;

line-height:1.2;

}



.hero h1 span{

color:#5b4bff;

}



.hero p{

margin-top:25px;

font-size:20px;

color:#666;

}



.search-box{

margin-top:40px;

display:flex;

background:white;

padding:8px;

border-radius:50px;

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

}



.search-box input{

border:none;

outline:none;

flex:1;

padding-left:20px;

}



.search-box button{

border:none;

background:#5b4bff;

color:white;

padding:14px 35px;

border-radius:40px;

}



.tags{

margin-top:25px;

}



.tags span{

display:inline-block;

background:#eef3ff;

padding:10px 20px;

margin:5px;

border-radius:40px;

font-size:14px;

font-weight:bold;

}



.hero-image{

max-width:100%;

animation:float 4s infinite ease-in-out;

}



@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}



@media(max-width:992px){

.hero{

text-align:center;

}



.hero h1{

font-size:42px;

}



.search-box{

display:block;

}



.search-box input{

width:100%;

padding:15px;

}



.search-box button{

width:100%;

margin-top:10px;

}



.hero-image{

margin-top:40px;

}

}



@media(max-width:576px){

.hero h1{

font-size:34px;

}



.hero p{

font-size:17px;

}

}