body{
  background:#eef5ff;
  background-image:url("../images/background-1.png");

  background-size:1300px auto;   /* increase width */
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;

  min-height:100vh;
  padding:40px 20px;
}
.blue-area{
padding-bottom:60px;

background:
linear-gradient(
rgba(255,255,255,.88),
rgba(255,255,255,.95)
),

background-size:cover;
background-position:center;
background-repeat:no-repeat;
}.hero{height:370px;background:linear-gradient(rgba(0,20,50,.75),rgba(0,20,50,.85)),url("../images/hero.jpg");background-size:cover;background-position:center;background-repeat:no-repeat;color:white;text-align:center;padding-top:45px;position:relative}
.tag{display:inline-block;background:#ffffff35;padding:8px 22px;border-radius:25px;font-size:13px}
.hero h1{font-size:42px;line-height:1.15;margin:25px 0 10px}
.hero h2{font-size:20px;font-weight:400}
.buttons{margin-top:25px}
.buttons button,.primary-btn{padding:13px 24px;margin:5px;border-radius:7px;border:0;color:white;font-weight:600;cursor:pointer}
.primary-btn{background:var(--green)}
.secondary-btn{background:#063c78;border:1px solid white!important}
.hero p{margin-top:20px;font-size:14px}

/*==================== BENEFITS BAR ====================*/
.benefits{width:90%;margin:-45px auto 0;background:white;position:relative;padding:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px;border-radius:18px;box-shadow:0 15px 40px rgba(0,0,0,.15);z-index:5}

.benefits div{background:rgba(255,255,255,.85);padding:15px 12px;text-align:center;border-radius:14px;border:1px solid #d9f3e7;transition:.3s;font-weight:600;color:#063c78;font-size:14px}

.benefits div:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,184,120,.25);border-color:#00b878}

.benefits span{display:inline-flex;width:55px;height:55px;align-items:center;justify-content:center;background:#eafff5;border-radius:50%;font-size:26px;margin-bottom:12px}

.benefits h3{font-size:17px;color:#063c78;margin-bottom:6px}

.benefits p{font-size:13px;color:#666}
@media(max-width:800px){
.benefits{width:90%;grid-template-columns:1fr}
}

/*==================== WHY SECTION ====================*/
.Why-choose-progecad{padding:60px 35px;text-align:center;color:#222;background:white}
.Why-choose-progecad h2{font-size:30px;margin-bottom:35px;color:#063c78}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/*==================== CARD BASE (WHY SECTION OLD) ====================*/
.card{background:white;color:#222;padding:25px;border-radius:15px;text-align:left;transition:.3s;line-height:1.5;font-weight:500;position:relative;overflow:hidden;border:1px solid transparent;font-size:15px}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,0.15);border:1px solid #00b878}
.icon{width:40px;height:40px;border-radius:50%;background:#eafff5;color:#00b878;display:flex;align-items:center;justify-content:center;font-size:20px}
.card h3{margin:15px 0 8px}
.card p{font-size:14px;color:#555}

/*==================== ABOUT SECTION ====================*/
.about{padding:70px 40px;display:grid;grid-template-columns:1.3fr .7fr;gap:50px;background:#eef6ff}
.about h2{color:#063c78;font-size:32px;margin-bottom:20px}
.about p{color:#555;line-height:1.7;margin-bottom:18px}
.price-card{background:white;padding:35px;border-radius:20px;box-shadow:0 20px 50px #0002}
.price-card h3{color:#063c78}
.price-card h2{color:#00b878;margin:20px 0}

/*==================== WHY PROGECAD SECTION ====================*/
/* MAIN WRAPPER */
.progecad-benefits{
  padding:90px 40px;
  background:#fff;
}

/* CENTER CONTAINER */
.progecad-wrapper{
  max-width:1100px;
  margin:auto;
}

/* HEADER */
.progecad-header{
  text-align:center;
  margin-bottom:30px;
}

.progecad-header h2{
  font-size:32px;
  color:#063c78;
  font-weight:800;
}

.progecad-header p{
  color:#666;
  margin-top:10px;
}

/* TEXT CONTENT */
.progecad-content{
  text-align:center;
  max-width:850px;
  margin:0 auto 40px;
}

.progecad-content p{
  font-size:16px;
  color:#555;
  line-height:1.8;
  margin-bottom:15px;
}

/* FEATURES ROW */
.progecad-features{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:15px;
}

/* CARD STYLE */
.progecad-card{
  background:linear-gradient(135deg,#ffffff,#f0fff8);
  border:1px solid #dceee7;
  padding:12px 18px;
  border-radius:30px;
  font-size:14px;
  color:#063c78;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  transition:.3s;
}

/* HOVER */
.progecad-card:hover{
  transform:translateY(-4px);
  border-color:#00b878;
  box-shadow:0 10px 25px rgba(0,184,120,0.15);
}

/* RESPONSIVE */
@media(max-width:600px){
  .progecad-header h2{
    font-size:26px;
  }

  .progecad-content p{
    font-size:15px;
  }
}

/*==================== CLIENTS ====================*/
.clients{padding:70px 40px;background:#f7fbff;text-align:center}
.clients h2{color:#063c78}
.client-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:35px}
.client-grid div{height:90px;background:white;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid #ddd;padding:20px}
.client-grid img{max-width:100%;max-height:45px}

/*==================== RESPONSIVE ====================*/
@media(max-width:800px){
body{padding:15px}
.address{padding:7px 20px}
.header{height:auto;padding:15px;flex-wrap:wrap;gap:15px}
nav{display:none}
.hero{height:420px}
.hero h1{font-size:30px}
.benefits{width:90%;flex-direction:column;gap:15px}
.cards,.feature-grid{grid-template-columns:1fr}
.about{grid-template-columns:1fr;padding:40px 20px}
.client-grid{grid-template-columns:repeat(2,1fr)}
}

/*==================== SECTION COMMON ====================*/
/*================ BENEFITS PREMIUM SECTION ================*/
.benefit-section{padding:70px 40px;background:white}.benefit-section h2{text-align:center;font-size:32px;color:#063c78;margin-bottom:45px}.benefit-list{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;max-width:1000px;margin:auto}.benefit-item{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,#ffffff,#f0fff8);padding:25px;border-radius:18px;border:1px solid #dceee7;box-shadow:0 12px 30px rgba(0,0,0,.08);transition:.35s}.benefit-item:hover{transform:translateY(-8px);box-shadow:0 20px 45px rgba(0,184,120,.25);border-color:#00b878}.benefit-item span{min-width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#064b94;color:white;font-size:20px;font-weight:800}.benefit-item h3{color:#063c78;font-size:18px;margin-bottom:8px}.benefit-item p{color:#555;font-size:14px;line-height:1.5}@media(max-width:800px){benefit-section{padding:40px 20px}.benefit-list{grid-template-columns:1fr}}

/*==================== GRID SYSTEM ====================*/
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:25px;margin-top:30px}

/*==================== SCROLL BOX ====================*/
.scroll-box{max-height:200px;overflow:auto;background:white;padding:15px;border-radius:10px;box-shadow:0 10px 20px #0001}

/*==================== TWO COLUMN ====================*/
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px}
/*==================== PRICING SECTION (COMPACT) ====================*/
.pricing{padding:60px 40px;text-align:center;background:linear-gradient(180deg,#eef6ff,#ffffff)}

/* heading smaller + tighter */
.pricing h2{font-size:28px;font-weight:800;color:#063c78;margin-bottom:30px;position:relative;display:inline-block}

.pricing h2::after{content:"";position:absolute;bottom:-10px;left:25%;width:50%;height:3px;background:linear-gradient(90deg,#00b878,#064b94);border-radius:10px}

/* price box smaller + tighter */
.price-box{background:white;width:360px;margin:auto;padding:30px 25px;border-radius:16px;box-shadow:0 15px 40px rgba(0,0,0,0.12);transition:all .3s ease;position:relative;overflow:hidden;border:1px solid #eee}

/* hover */
.price-box:hover{transform:translateY(-6px);box-shadow:0 25px 60px rgba(0,0,0,0.18);border-color:#00b878}

/* text scaling down */
.price-box h3{font-size:14px;color:#666;margin-bottom:8px;letter-spacing:1px;text-transform:uppercase}

.price-box h1{font-size:34px;color:#00b878;margin:10px 0;font-weight:800}

.price-box p{color:#555;font-size:14px;margin-bottom:18px}

/* button compact */
.price-box .primary-btn{background:#064b94}

.price-box .primary-btn:hover{transform:scale(1.05);box-shadow:0 15px 30px rgba(0,184,120,0.4)}

/* badge smaller */
.price-box::before{content:"MOST POPULAR";position:absolute;top:12px;right:-45px;background:#00b878;color:white;padding:5px 45px;transform:rotate(45deg);font-size:10px;font-weight:700}


/*==================== PRODUCT SECTION ====================*/
.product-section{
  padding:90px 40px;
  background:linear-gradient(180deg,#eef6ff,#ffffff);
}

.product-container{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:50px;
  align-items:start;
}

/* LEFT SIDE */
.product-info h2{
  font-size:32px;
  color:#063c78;
  margin-bottom:10px;
}

.product-info h3{
  font-size:20px;
  color:#00b878;
  margin-bottom:20px;
}

.product-info p{
  color:#555;
  line-height:1.7;
  margin-bottom:18px;
}

/*==================== PRODUCT SECTION ====================*/
.product-section{
  padding:90px 40px;
  background:linear-gradient(180deg,#f5f9ff,#ffffff);
}

.product-container{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:50px;
  align-items:center;
}

/* LEFT TEXT */
.product-info h2{
  font-size:32px;
  color:#063c78;
  margin-bottom:10px;
}

.product-info h3{
  font-size:20px;
  color:#00b878;
  margin-bottom:20px;
}

.product-info p{
  color:#555;
  line-height:1.7;
  margin-bottom:18px;
}

/*==================== IMAGE SIDE ====================*/
.product-image{
  display:flex;
  justify-content:center;
  align-items:center;
}

/* image wrapper (NOT a box design) */
.image-wrapper{
  width:100%;
  max-width:420px;
  padding:10px;
}

/* IMAGE STYLE */
.image-wrapper img{
  width:100%;
  height:auto;
  border-radius:18px;
  transition:0.4s ease;
  box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

/* hover effect */
.image-wrapper img:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 30px 70px rgba(0,184,120,0.25);
}

/* RESPONSIVE */
@media(max-width:900px){
  .product-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  .image-wrapper{
    margin:auto;
  }
}


/*==================== TESTIMONIAL SECTION ====================*/
.testimonials{
  padding:90px 40px;
  background:linear-gradient(180deg,#f5f9ff,#ffffff);
}

/* container */
.testimonials .container{
  max-width:1100px;
  margin:auto;
}

/* header */
.section-header{
  text-align:center;
  margin-bottom:50px;
}

.section-header h2{
  font-size:32px;
  color:#063c78;
  font-weight:800;
}

.section-header p{
  color:#666;
  margin-top:8px;
}

/* grid */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

/* card */
.testimonial-card{
  background:linear-gradient(135deg,#ffffff,#f0fff8);
  border:1px solid #dceee7;
  border-radius:18px;
  padding:30px 25px;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  transition:0.3s ease;
  position:relative;
  overflow:hidden;
}

/* hover effect */
.testimonial-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(0,184,120,0.25);
  border-color:var(--green);
}

/* quote symbol */
.quote{
  font-size:60px;
  color:rgba(0,184,120,0.15);
  position:absolute;
  top:10px;
  right:15px;
  font-weight:bold;
}

/* text */
.testimonial-card p{
  font-size:15px;
  color:#555;
  line-height:1.7;
  margin-bottom:20px;
}

/* author */
.testimonial-card h4{
  font-size:14px;
  color:#063c78;
  font-weight:700;
}

/* responsive */
@media(max-width:900px){
  .testimonial-grid{
    grid-template-columns:1fr;
  }
}

/*==================== UPDATES SECTION ====================*/
.updates-section{
  padding:90px 40px;
  background:linear-gradient(180deg,#f5f9ff,#ffffff);
}

.updates-container{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

/* BOX */
.updates-box{
  background:white;
  border-radius:18px;
  padding:25px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  border:1px solid #e6eef7;
}

/* HEADER BASE */
.updates-header{
  margin-bottom:20px;
}

.updates-header h2{
  font-size:22px;
  font-weight:800;
}

.updates-header p{
  font-size:13px;
  color:#666;
  margin-top:5px;
}

/* GREEN HEADER */
.updates-header.green h2{
  color:#00b878;
}

/* BLUE HEADER */
.updates-header.blue h2{
  color:#064b94;
}

/*==================== ORDERS LIST ====================*/
.order-list{
  list-style:none;
  max-height:350px;
  overflow:auto;
  padding-right:5px;
}

.order-list li{
  padding:12px 10px;
  margin-bottom:8px;
  background:linear-gradient(135deg,#ffffff,#f0fff8);
  border-left:3px solid #00b878;
  border-radius:10px;
  font-size:14px;
  color:#333;
  display:flex;
  justify-content:space-between;
  gap:10px;
  transition:.3s;
}

.order-list li span{
  font-size:12px;
  color:#064b94;
  white-space:nowrap;
}

/* hover */
.order-list li:hover{
  transform:translateX(5px);
  box-shadow:0 10px 25px rgba(0,184,120,0.15);
}

/*==================== UPDATES ITEMS ====================*/
.update-item{
  padding:15px;
  margin-bottom:15px;
  border-radius:12px;
  background:linear-gradient(135deg,#ffffff,#f0f6ff);
  border:1px solid #d6e6ff;
  transition:.3s;
}

.update-item:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 30px rgba(0,123,255,0.15);
}

.update-item h3{
  font-size:15px;
  color:#064b94;
  margin-bottom:8px;
}

.update-item p{
  font-size:13px;
  color:#555;
  line-height:1.6;
}

/* BUTTON */
.update-btn{
  width:100%;
  margin-top:10px;
  padding:12px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  color:white;
  background:linear-gradient(90deg,#00b878,#064b94);
  transition:.3s;
}

.update-btn:hover{
  transform:scale(1.03);
  box-shadow:0 15px 30px rgba(0,184,120,0.25);
}

/* RESPONSIVE */
@media(max-width:900px){
  .updates-container{
    grid-template-columns:1fr;
  }
}

/*==================== NEWS TIMELINE ====================*/
.news-timeline{
  padding:90px 40px;
  background:linear-gradient(180deg,#ffffff,#f5f9ff);
}

/* HEADER */
.news-header{
  text-align:center;
  margin-bottom:60px;
}

.news-header h2{
  font-size:34px;
  color:#064b94;
  font-weight:800;
}

.news-header p{
  color:#666;
  margin-top:8px;
}

/* TIMELINE WRAPPER */
.timeline{
  max-width:900px;
  margin:auto;
  position:relative;
  padding-left:30px;
}

/* vertical line */
.timeline::before{
  content:"";
  position:absolute;
  left:10px;
  top:0;
  width:2px;
  height:100%;
  background:linear-gradient(#00b878,#064b94);
  opacity:0.4;
}

/* ITEM */
.timeline-item{
  position:relative;
  margin-bottom:40px;
  display:flex;
}

/* DOT */
.timeline-dot{
  width:14px;
  height:14px;
  background:linear-gradient(135deg,#00b878,#064b94);
  border-radius:50%;
  position:absolute;
  left:-7px;
  top:5px;
  box-shadow:0 0 0 4px rgba(0,184,120,0.15);
}

/* CONTENT BLOCK */
.timeline-content{
  background:linear-gradient(135deg,#ffffff,#f0f6ff);
  border:1px solid #d6e6ff;
  border-radius:14px;
  padding:20px 22px;
  margin-left:25px;
  transition:.3s;
}

/* hover */
.timeline-content:hover{
  transform:translateX(8px);
  box-shadow:0 15px 35px rgba(0,123,255,0.15);
  border-color:#00b878;
}

/* DATE (GREEN ACCENT) */
.date{
  display:inline-block;
  font-size:12px;
  color:#00b878;
  font-weight:700;
  margin-bottom:8px;
  padding:4px 10px;
  background:rgba(0,184,120,0.08);
  border-radius:20px;
}

/* TITLE (BLUE ACCENT) */
.timeline-content h3{
  font-size:16px;
  color:#064b94;
  margin-bottom:8px;
}

/* TEXT */
.timeline-content p{
  font-size:14px;
  color:#555;
  line-height:1.6;
}

/* RESPONSIVE */
@media(max-width:768px){
  .timeline{
    padding-left:20px;
  }
}

/*==================== FAQ SECTION ====================*/
.faq-section{
  padding:90px 40px;
  background:linear-gradient(180deg,#f5f9ff,#ffffff);
}

/* HEADER */
.faq-header{
  text-align:center;
  margin-bottom:50px;
}

.faq-header h2{
  font-size:34px;
  color:#064b94;
  font-weight:800;
}

.faq-header p{
  color:#666;
  margin-top:8px;
}

/* CONTAINER */
.faq-container{
  max-width:900px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:15px;
}

/* FAQ ITEM */
.faq-item{
  background:linear-gradient(135deg,#ffffff,#f0f6ff);
  border:1px solid #d6e6ff;
  border-radius:14px;
  overflow:hidden;
  transition:.3s;
}

/* QUESTION */
.faq-question{
  width:100%;
  padding:18px 20px;
  border:none;
  background:transparent;
  text-align:left;
  font-size:15px;
  font-weight:600;
  color:#063c78;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

/* hover */
.faq-question:hover{
  color:#00b878;
}

/* ANSWER */
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
  padding:0 20px;
}

.faq-answer p{
  padding:15px 0;
  font-size:14px;
  color:#555;
  line-height:1.6;
}

/* ACTIVE STATE (for JS toggle) */
.faq-item.active{
  border-color:#00b878;
  box-shadow:0 15px 35px rgba(0,184,120,0.15);
}

.faq-item.active .faq-answer{
  max-height:200px;
}

/* ICON rotate effect */
.faq-question span{
  color:#064b94;
  font-size:18px;
  transition:.3s;
}

.faq-item.active .faq-question span{
  transform:rotate(45deg);
  color:#00b878;
}

/* CTA */
.faq-cta{
  text-align:center;
  margin-top:30px;
}

.faq-cta .primary-btn{
  background:#00b878;
  padding:14px 26px;
  border-radius:10px;
  box-shadow:0 15px 30px rgba(0,184,120,0.25);
}
.faq-cta .primary-btn:hover{
  background:#064b94;
}


/*==================== EXPLORE SECTION ====================*/

.explore-section{
  padding:90px 40px;
  background:
  linear-gradient(180deg,#ffffff,#f5f9ff);
}


.explore-header{
  text-align:center;
  margin-bottom:55px;
}


.explore-header h2{
  font-size:34px;
  color:#064b94;
  font-weight:800;
}


.explore-header p{
  color:#666;
  margin-top:10px;
  font-size:15px;
}


/* GRID */

.explore-grid{
  max-width:1100px;
  margin:auto;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}



/* CARD */

.explore-card{

  background:
  linear-gradient(145deg,#ffffff,#eef6ff);

  border-radius:22px;

  padding:32px 28px;

  border:1px solid #dce9f7;

  position:relative;

  overflow:hidden;

  transition:.35s ease;

  box-shadow:
  0 15px 35px rgba(0,0,0,.08);
}



/* top glow */

.explore-card::before{

content:"";

position:absolute;

width:140px;
height:140px;

right:-60px;
top:-60px;

background:
linear-gradient(135deg,#00b878,#064b94);

opacity:.12;

border-radius:50%;

}



/* hover */

.explore-card:hover{

transform:translateY(-10px);

border-color:#00b878;

box-shadow:
0 25px 60px rgba(0,184,120,.18),
0 20px 50px rgba(6,75,148,.12);

}




/* ICON */


.explore-icon{

width:58px;
height:58px;

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

border-radius:16px;

background:
linear-gradient(135deg,#00b878,#064b94);

color:white;

font-size:26px;

margin-bottom:20px;

box-shadow:
0 12px 25px rgba(0,184,120,.25);

}



/* TITLE */

.explore-card h3{

font-size:19px;

color:#064b94;

margin-bottom:12px;

}



/* TEXT */

.explore-card p{

font-size:14px;

line-height:1.6;

color:#555;

margin-bottom:20px;

}



/* LINK */

.explore-card a{

text-decoration:none;

font-weight:700;

font-size:14px;

color:#00b878;

transition:.3s;

}


.explore-card a:hover{

color:#064b94;

}



/* RESPONSIVE */

@media(max-width:900px){

.explore-grid{
grid-template-columns:1fr;
}

}