*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'Inter', sans-serif;
}
html{
scroll-behavior:smooth;
}
body{
background:#f5f5f7;
color:#111;
}
.card:hover,
.project:hover,
.price-card:hover{
transform: translateY(-10px);
transition: 0.3s;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 10%;
background:white;
position:sticky;
top:0;
}

header h1{
font-size:22px;
font-weight:700;
}

nav a{
margin-left:20px;
text-decoration:none;
color:#333;
font-weight:500;
}

.hero{
text-align:center;
padding:120px 20px;
background:white;
}

.hero h2{
font-size:56px;
margin-bottom:20px;
}

.hero p{
font-size:20px;
color:#555;
margin-bottom:30px;
}

.btn{
padding:14px 28px;
border-radius:30px;
text-decoration:none;
margin:10px;
display:inline-block;
}

.primary{
background:#0071e3;
color:white;
}

.secondary{
border:1px solid #0071e3;
color:#0071e3;
}

.section{
padding:80px 10%;
text-align:center;
}

.section h3{
font-size:36px;
margin-bottom:40px;
}

.services,
.portfolio,
.pricing{
display:flex;
gap:30px;
flex-wrap:wrap;
justify-content:center;
}

.card,
.project,
.price-card{
background:white;
padding:40px;
border-radius:20px;
width:260px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.price{
font-size:32px;
margin:20px 0;
}

.cta{
background:black;
color:white;
padding:100px 20px;
text-align:center;
}

footer{
text-align:center;
padding:30px;
background:#111;
color:#aaa;
}
h1 img {
    height: 40px;
}
header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-title{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
font-weight:700;
}

.logo-title img{
height:40px;
}

.page-title{
font-size:42px;
margin-bottom:10px;
}

.page-subtitle{
color:#666;
font-size:18px;
margin-bottom:40px;
}

.service-list{
list-style:none;
margin:20px 0;
}

.service-list li{
margin-bottom:8px;
color:#444;
}
/* MOBILE APP STYLE */

@media (max-width:768px){

header{
padding:15px 20px;
}

.hero{
padding:60px 20px;
}

.hero h2{
font-size:34px;
}

.hero p{
font-size:16px;
}

.services,
.portfolio,
.pricing{
flex-direction:column;
align-items:center;
}

.card,
.project,
.price-card{
width:100%;
max-width:350px;
}

nav{
display:none;
}

}
.mobile-nav{
display:none;
}

@media (max-width:768px){

.mobile-nav{
display:flex;
position:fixed;
bottom:0;
left:0;
width:100%;
background:white;
justify-content:space-around;
padding:15px 0;
box-shadow:0 -5px 20px rgba(0,0,0,0.1);
}

.mobile-nav a{
text-decoration:none;
color:#333;
font-weight:600;
}

body{
padding-bottom:70px;
}

}
/* PORTFOLIO GRID */

.portfolio-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
padding:40px 10%;

}

.portfolio-item{

background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.3s;

}

.portfolio-item:hover{

transform:translateY(-10px);

}

.portfolio-item img,
.portfolio-item video{

width:100%;
display:block;

}

.portfolio-info{

padding:20px;

}

.portfolio-info h3{

margin-bottom:10px;

}

.portfolio-info p{

color:#555;

}
.order-container{

display:flex;
justify-content:center;
padding:40px 10%;

}

.order-form{

background:white;
padding:40px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
width:100%;
max-width:500px;
display:flex;
flex-direction:column;
gap:15px;

}

.order-form input,
.order-form select,
.order-form textarea{

padding:12px;
border-radius:10px;
border:1px solid #ddd;
font-size:14px;

}

.order-form textarea{

height:120px;

}

.order-form button{

margin-top:10px;


}
/* ORDER PAGE */

.order-container{
display:flex;
justify-content:center;
padding:40px 10%;
}

.order-form{
background:#ffffff;
padding:40px;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
width:100%;
max-width:520px;
display:flex;
flex-direction:column;
gap:18px;
}

.order-form label{
font-size:14px;
font-weight:600;
color:#333;
}

.order-form input,
.order-form select,
.order-form textarea{
padding:14px;
border-radius:10px;
border:1px solid #ddd;
font-size:14px;
transition:0.2s;
outline:none;
}

.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus{
border-color:#0071e3;
box-shadow:0 0 0 3px rgba(0,113,227,0.1);
}

.order-form textarea{
min-height:120px;
resize:vertical;
}

.order-form button{
margin-top:10px;
font-size:16px;
padding:14px;
border-radius:30px;
cursor:pointer;
}
/* ORDER FORM STYLING */

.order-form{
max-width:520px;
margin:40px auto;
padding:35px;
background:#ffffff;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
display:flex;
flex-direction:column;
gap:16px;
}

.order-form label{
font-size:14px;
font-weight:600;
color:#333;
}

.order-form input,
.order-form select,
.order-form textarea{
width:100%;
padding:14px;
border-radius:10px;
border:1px solid #ddd;
font-size:14px;
font-family:inherit;
transition:all 0.2s ease;
}

.order-form textarea{
min-height:120px;
resize:vertical;
}

.order-form input:focus,
.order-form select:focus,
.order-form textarea:focus{
border-color:#0071e3;
box-shadow:0 0 0 3px rgba(0,113,227,0.15);
outline:none;
}

.order-form button{
margin-top:10px;
padding:14px;
border:none;
border-radius:30px;
font-size:16px;
font-weight:600;
cursor:pointer;
background:#0071e3;
color:white;
transition:0.2s;
}

.order-form button:hover{
background:#005bb5;
}