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

THE ENGINEERS GROUP STORE

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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:Arial,Helvetica,sans-serif;
background:#fff;
color:#222;

}

.container{

width:90%;
max-width:1400px;
margin:auto;

}

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

HERO

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

.hero{

position:relative;

background:
linear-gradient(
rgba(11,31,77,.55),
rgba(11,31,77,.55)
),
url("../images/bg.jpg");

background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size:cover;

background-position:center;

min-height:760px;

display:flex;

align-items:center;

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,

rgba(255,184,0,.25),

transparent 45%);

}

.hero-content{

display:flex;

align-items:center;

justify-content:space-between;

position:relative;

z-index:10;

gap:70px;

}

.hero-left{

flex:1;

}

.hero-tag{

display:inline-block;

padding:10px 24px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.15);

color:#FFC107;

border-radius:50px;

font-size:15px;

margin-bottom:25px;

backdrop-filter:blur(10px);

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.1;

color:white;

margin-bottom:20px;

}

.hero h1 span{

color:#FFC107;

}

.hero p{

font-size:22px;

color:#ddd;

line-height:1.8;

max-width:650px;

margin-bottom:40px;

}

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

BUTTONS

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

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

background:#FFC107;

padding:18px 45px;

color:#000;

font-weight:700;

font-size:18px;

border-radius:10px;

text-decoration:none;

transition:.3s;

box-shadow:0 15px 35px rgba(255,193,7,.35);

}

.btn-primary:hover{

transform:translateY(-5px);

background:white;

}

.btn-secondary{

padding:18px 45px;

border:2px solid white;

color:white;

border-radius:10px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.btn-secondary:hover{

background:white;

color:#0B1F4D;

}

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

BOOK IMAGE

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

.hero-right{

flex:1;

text-align:right;

}

.hero-right img{

max-width:680px;

width:100%;

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

filter:drop-shadow(0 35px 45px rgba(0,0,0,.45));

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

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

RESPONSIVE

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

@media(max-width:991px){

.hero{

padding:100px 0;

min-height:auto;

}

.hero-content{

flex-direction:column-reverse;

text-align:center;

}

.hero h1{

font-size:46px;

}

.hero p{

font-size:18px;

margin:auto;

margin-bottom:30px;

}

.hero-buttons{

justify-content:center;

}

.hero-right{

text-align:center;

}

.hero-right img{

max-width:430px;

}

}

@media(max-width:600px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.btn-primary,

.btn-secondary{

width:100%;

text-align:center;

}

}.hero{

position:relative;

background:
linear-gradient(
90deg,
rgba(11,31,77,.75) 0%,
rgba(11,31,77,.55) 40%,
rgba(11,31,77,.20) 100%
),
url("../images/bg.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

}