*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Arial, Helvetica, sans-serif, Gill sans;
}

body{
background:#f5f5f5;
color:#111;
padding-left:20px;
padding-right:20px;
margin:0;

}

/* NAVBAR */

.navbar {

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

max-width:1200px;
margin:15px auto;

padding:0px 20px;

background:white;
border-radius:80px;

box-shadow:0 6px 20px rgba(0,0,0,0.05);

}

.nav-links{
    flex:1;
    display:flex;
    justify-content:center;
}
.nav-links ul {
    display:flex;
    gap:52px;

    list-style:none;
    padding:0;
    margin:0;
    
}

.logo img{
height:100px;
max-height:100px;
width:auto;
display:block;
}


nav ul{
display:flex;
list-style:none;
gap:30px;
}

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

@media (max-width:768px){

.nav-links{
display:none;
position:absolute;
top:80px;
left:0;
width:100%;
background:white;
padding:20px 0;
}

.nav-links ul{
flex-direction:column;
align-items:center;
gap:20px;
}

.nav-links.active{
display:flex;
}

.hamburger{
display:flex;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.hamburger span{
width:25px;
height:3px;
background:black;
display:block;
}

.cta-button{
display:none;
}

}
/* HERO SECTION */

.hero{
text-align:center;
padding:35px 25px;
max-width:800px;
margin:80px auto;

}

.brand{
color:#3b82f6;
font-weight:bold;
}

.highlight{
color:#3b82f6;
font-weight:bold;
}

.cta{
display:inline-block;
margin-top:40px;
padding:15px 30px;
border:none;
background:#2563eb;
color:white;
border-radius:30px;
font-size:16px;
font-weight:bold;
cursor:pointer;
text-decoration:none;

}

.cta-button{

background:#2563eb;
color:white;
padding:12px 20px;
border-radius:30px;
font-weight:bold;
text-decoration:none;

}

.work{

max-width:1100px;
margin:80px auto;

text-align:center;

padding:0 20px;

}
.work h2{

font-size:28px;

margin-bottom:20px;

}

.work-description{

max-width:600px;

margin:0 auto 40px;

font-size:16px;

color:#555;

}

.work-grid{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

.work-grid img{

width:100%;

border-radius:12px;

}

@media (min-width:768px){

.work-grid{

grid-template-columns:repeat(3,1fr);

}

}
@media (min-width:768px){

.hero h1{
font-size:56px;
line-height:1.6;
max-width:1000px;
margin:auto;

}

.hero-text{
font-size:19px;
line-height:1.6;
color:#555;
padding: 15pxpx 15px;
margin-top:35px;
margin-bottom:30px;

}

}

/*PRICING*/

.pricing{

max-width:1100px;
margin:80px auto;

display:flex;
gap:30px;
justify-content:center;

padding:0 20px;

}
.plan{

background:white;
padding:40px 30px;

border-radius:16px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);

text-align:center;
flex:1;

display:flex;
flex-direction:column;

min-height:420px;

}
.price{

font-size:26px;
font-weight:700;

margin-top:10px;

color:#2f66d8;

}
.plan-button{

display:inline-block;
margin-top:20px;

padding:12px 24px;

background:#2f66d8;
color:white;

border-radius:15px;

text-decoration:none;
font-weight:600;

}

.popular{
    border:3px solid #2f66d8;
    transform:scale(1.05);
}

.popular-badge{

background:#2f66d8;
color:white;

padding:6px 12px;

border-radius:20px;

font-size:12px;
font-weight:600;

display:inline-block;

margin-bottom:15px;

}

.features {
list-style-type: none;
padding-left: 0;
margin: 25px 0;
flex-grow:1;
}

.features li {
margin: 10px 0;
font-size: 14px;
color: #555;
}

.features li::before {
content: "✓ ";
color: #2f66d8;
font-weight: bold;
margin-right: 6px;
}

.pricing-image {
  max-width: 860px;
  margin: 40px auto;
  padding: 0 20px;
}

.pricing-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .pricing-image {
    padding: 0 15px;
    margin: 30px auto;
  }

  .pricing-image img {
    height: 80px; /* much thinner on mobile */
    border-radius: 14px;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width:768px){

.pricing{
flex-direction:column;
}

}

/*COMPANY*/

.hero,
.mission,
#contact{

max-width:900px;
margin:80px auto;

text-align:center;

padding:0 20px;

}

.founder{

max-width:1000px;
margin:80px auto;
padding:0 20px;

}

.founder-container{

display:flex;
align-items:center;
gap:40px;

}

.founder-image img{

width:220px;
border-radius:10%;

}

.founder-text h3{

margin-top:5px;
color:#2f66d8;

}

.founder-text p{

line-height:1.6;
margin-top:10px;

}

@media (max-width:768px){

.founder-container{

flex-direction:column;
text-align:center;

}

}

#contact a{
display:inline-block;
margin-top:20px;
}

.meeting-button{

display:inline-block;
margin-top:20px;
padding:12px 28px;

text-decoration:none;
font-weight:600;

color:#2f66d8;

border:2px solid #2f66d8;
border-radius:30px;

transition:0.3s;

}

.meeting-button:hover{

background:#2f66d8;
color:white;

}


/* FOOTER */


.footer{
background:#0f172a;
color:white;
padding:60px 20px;
margin-top:100px;
}


.footer-container{
max-width:1100px;
margin:auto;

display:flex;
justify-content:space-between;
align-items:flex-start;
gap:60px;
}


.footer-links ul{
list-style:none;
padding:0;
margin:0;

display:flex;
flex-direction:column;
gap:10px;
}


.footer-links a{
color:white;
text-decoration:none;
}

.footer-links a:hover{
color:#2f66d8;
}


.footer h3,
.footer h4{
margin-bottom:12px;
}


.footer-bottom{
text-align:center;
margin-top:40px;
font-size:14px;
color:#bbb;
}


@media (max-width:768px){

.footer-container{
flex-direction:center;
text-align:center;
gap:30px;
}

}