/* Base reset */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:#111;
  line-height:1.6;
  background:#fff;
}

/* Global containers */
.i2g-container{
  width:90%;
  max-width:1100px;
  margin:0 auto;
}

.i2g-section{
  padding:72px 0;
}

/* Gutenberg alignment support */
.alignwide{
  width:95%;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
}

.alignfull{
  width:100%;
  margin-left:0;
  margin-right:0;
}

/* Header */
.i2g-header{
  position:sticky;
  top:0;
  z-index:9999;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
  transition: box-shadow .25s ease, transform .25s ease;
}
.i2g-header.is-shrunk{ box-shadow:0 10px 30px rgba(0,0,0,.08); }

.i2g-header-inner{
  width:90%;
  max-width:1400px;
  margin:0 auto;
  padding:18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  transition: padding .25s ease;
}
.i2g-header.is-shrunk .i2g-header-inner{ padding:10px 0; }

.i2g-logo a{ display:inline-flex; align-items:center; text-decoration:none; color:inherit; }

/* Menu */
.i2g-nav-toggle{
  display:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}

.i2g-menu{ display:flex; gap:26px; align-items:center; list-style-type: none;}
.i2g-menu a{ text-decoration:none; color:#111; }
.i2g-menu a:hover{ opacity:.75; }

/* Mobile slide-down */
@media (max-width: 900px){
  .i2g-nav-toggle{ display:inline-flex; align-items:center; gap:8px; }

  .i2g-menu-wrap{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.06);
    overflow:hidden;
    max-height:0;
    transition:max-height .28s ease;
  }

  .i2g-header.is-open .i2g-menu-wrap{ max-height:60vh; }

  .i2g-menu{
    width:90%;
    max-width:1400px;
    margin:0 auto;
    padding:14px 0 18px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
}

/* ================================
   HERO SECTION
================================ */

.hero {
  height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:40px;
  background:
    linear-gradient(135deg, rgba(26,35,126,.85), rgba(233,30,99,.75)),
    url('/wp-content/themes/i2g-agency-pro/assets/images/hero.jpeg') center/cover no-repeat;
}

.hero h1 {
  font-size:48px;
  font-weight:700;
}

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

.hero-buttons {
  display:flex;
  justify-content:center;
  gap:20px;
}

.btn-primary {
  background:#ff2d8d;
  color:#fff;
  padding:14px 28px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.btn-primary:hover {
  background:#e0006a;
}

.btn-secondary {
  border:2px solid #fff;
  padding:14px 28px;
  border-radius:6px;
  color:#fff;
  text-decoration:none;
}

.btn-secondary:hover {
  background:#fff;
  color:#333;
}


/* ================================
   SERVICES
================================ */

.services {
  background:#f7f7f7;
  text-align:center;
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:30px;
  margin-top:40px;
}

.service-card {
  background:#fff;
  padding:40px 25px;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  transition:.3s;
}

.service-card:hover {
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.1);
}

.service-card h3 {
  color:#1a237e;
}

.service-card p {
  margin-top:10px;
}


/* ================================
   AI SECTION
================================ */

.ai-highlight {
  background:#1a237e;
  color:#fff;
  text-align:center;
}

.ai-highlight p {
  color:#ddd;
  max-width:700px;
  margin:auto;
}

.ai-highlight .btn-primary {
  margin-top:30px;
}


/* ================================
   PROCESS SECTION
================================ */

.process-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px;
  text-align:center;
}

.process-step {
  padding:20px;
}

.process-step h3 {
  color:#ff2d8d;
}

.process-number {
  font-size:36px;
  font-weight:700;
  margin-bottom:10px;
}


/* ================================
   CTA SECTION
================================ */

.cta-section {
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg,#1a237e,#ff2d8d);
}

.cta-section h2 {
  font-size:36px;
}

.cta-section p {
  color:#eee;
  margin-bottom:30px;
}


/* ================================
   CASE STUDIES
================================ */

.case-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  margin-top:40px;
}

.case-card {
  background:#fff;
  border-radius:8px;
  padding:30px;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.case-card strong {
  color:#ff2d8d;
}


/* ================================
   MOBILE
================================ */

@media (max-width:768px){

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

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

.hero-buttons{
  flex-direction:column;
}

.homepage-section{
  padding:60px 20px;
}

}

.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

/* Service Card */
.service-card {
  background:#fff;
  padding:25px;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  overflow:hidden; /* prevents overflow */
  text-align:center;
}

/* Image container */
.service-card img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  border-radius:6px;
  margin-bottom:15px;
}

.page-hero{
background:#111;
color:#fff;
padding:120px 20px;
text-align:center;
}

.page-hero h1{
font-size:48px;
margin-bottom:20px;
}

.page-hero p{
font-size:20px;
max-width:600px;
margin:auto;
}

.ai-hero{
background: linear-gradient(135deg, rgba(26,35,126,.85), rgba(233,30,99,.75)),
	url('/wp-content/themes/i2g-agency-pro/assets/images/ai-integration.jpg') center/cover no-repeat;
color:white;
padding:120px 20px;
text-align:center;
}

.ai-hero h1{
font-size:48px;
margin-bottom:20px;
}

.ai-hero p{
font-size:20px;
max-width:700px;
margin:auto;
}

.seo-hero{
background: linear-gradient(135deg, rgba(26,35,126,.85), rgba(233,30,99,.75)),
	url('/wp-content/themes/i2g-agency-pro/assets/images/seo.jpg') center/cover no-repeat;
color:white;
padding:120px 20px;
text-align:center;
}

.seo-hero h1{
font-size:48px;
margin-bottom:20px;
}

.seo-hero p{
font-size:20px;
max-width:700px;
margin:auto auto 40px;
}

.web-dev-hero{
background: linear-gradient(135deg, rgba(26,35,126,.85), rgba(233,30,99,.75)),
	url('/wp-content/themes/i2g-agency-pro/assets/images/3d-laptop-floating-software-interface.jpg') center/cover no-repeat;
color:white;
padding:120px 20px;
text-align:center;
}

.web-dev-hero h1{
font-size:48px;
margin-bottom:20px;
}

.web-dev-hero p{
font-size:20px;
max-width:700px;
margin:auto;
}

.button-fix{
	margin: 50px auto;
}

.webdev-hero{
background:linear-gradient(135deg,#1a237e,#ff2d8d);
color:white;
padding:120px 20px;
text-align:center;
}

.services-section{
padding:100px 20px;
background:#f7f7f7;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.service-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.process-section{
padding:100px 20px;
background:white;
}

.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.tech-grid{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content:center;
margin-top:30px;
}

.tech-grid span{
background:#eee;
padding:10px 18px;
border-radius:20px;
}

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

.app-hero{
background: linear-gradient(135deg, rgba(26,35,126,.85), rgba(233,30,99,.75)),
	url('/wp-content/themes/i2g-agency-pro/assets/images/app-development.jpg') center/cover no-repeat;
color:white;
padding:120px 20px;
text-align:center;
}

.app-hero h1{
font-size:48px;
margin-bottom:20px;
}

.app-hero p{
font-size:20px;
max-width:700px;
margin: 0 auto 40px;
}

/* ===============================
WHY CHOOSE US
=============================== */

.why-i2g{
padding:100px 20px;
background:#ffffff;
text-align:center;
}

.why-i2g h2{
font-size:36px;
margin-bottom:20px;
}

.why-intro{
max-width:700px;
margin:auto;
margin-bottom:50px;
color:#555;
}

.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.why-box{
background:#f7f7f7;
padding:35px;
border-radius:10px;
transition:all .3s ease;
}

.why-box:hover{
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,.1);
}

.why-icon{
font-size:40px;
margin-bottom:15px;
}

.why-box h3{
margin-bottom:10px;
color:#1a237e;
}

.why-box p{
color:#666;
}


/* ===============================
HOSPITALITY HIGHLIGHT
=============================== */

.hospitality-highlight{
padding:100px 20px;
background:#111;
color:white;
}

.hospitality-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.hospitality-text h2{
font-size:36px;
margin-bottom:20px;
}

.hospitality-text p{
color:#ccc;
margin-bottom:25px;
}

.hospitality-features{
list-style:none;
padding:0;
margin-bottom:30px;
}

.hospitality-features li{
margin-bottom:10px;
padding-left:20px;
position:relative;
}

.hospitality-features li::before{
content:"✓";
position:absolute;
left:0;
color:#ff2d8d;
font-weight:bold;
}

.hospitality-image img{
width:100%;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.4);
}


/* ===============================
CASE STUDIES
=============================== */

.case-studies{
padding:100px 20px;
background:#f7f7f7;
text-align:center;
}

.case-studies h2{
font-size:36px;
margin-bottom:50px;
}

.case-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.case-card{
background:white;
padding:35px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
transition:.3s;
}

.case-card:hover{
transform:translateY(-5px);
box-shadow:0 12px 25px rgba(0,0,0,.1);
}

.case-card h3{
margin-bottom:10px;
color:#1a237e;
}

.case-card strong{
color:#ff2d8d;
font-size:20px;
}


/* ===============================
FINAL CTA
=============================== */

.homepage-cta{
padding:100px 20px;
background:linear-gradient(135deg,#1a237e,#ff2d8d);
color:white;
text-align:center;
}

.homepage-cta h2{
font-size:38px;
margin-bottom:20px;
}

.homepage-cta p{
max-width:600px;
margin:auto;
margin-bottom:30px;
color:#eee;
}


/* ===============================
BUTTONS
=============================== */

.btn-primary{
background:#ff2d8d;
color:white;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
font-weight:600;
display:inline-block;
transition:.3s;
}

.btn-primary:hover{
background:#e0006a;
}


/* ===============================
CONTAINER
=============================== */

.container{
max-width:1200px;
margin:auto;
width:90%;
}


/* ===============================
RESPONSIVE
=============================== */

@media (max-width:768px){

.hospitality-grid{
grid-template-columns:1fr;
text-align:center;
}

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

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

}

.project-form{
padding:20px 20px 0;
background:#f7f7f7;
text-align:center;
}

.project-form h2{
font-size:36px;
/* margin-bottom:10px; */
}

.project-form p{
margin-bottom:20px;
color:#555;
}

.form-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
/* gap:20px; */
/* margin-bottom:20px; */
}

.project-form input,
.project-form select,
.project-form textarea{
width:100%;
padding:14px;
border:1px solid #ddd;
border-radius:6px;
font-size:15px;
}

.project-form textarea{
/* margin-bottom:20px; */
}

.project-form button{
padding:14px 30px;
border:none;
border-radius:6px;
cursor:pointer;
}

/* ========================
FOOTER
======================== */

.site-footer{
background:#111;
color:#ddd;
padding:60px 20px;
}

.footer-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:40px;
}

.footer-col h4{
margin-bottom:15px;
color:#fff;
}

.footer-tagline{
margin-bottom:10px;
color:#bbb;
}

.footer-copyright{
font-size:14px;
color:#777;
}


/* Footer menu */

.footer-menu{
list-style:none;
padding:0;
}

.footer-menu li{
margin-bottom:8px;
}

.footer-menu a{
color:#ddd;
text-decoration:none;
}

.footer-menu a:hover{
color:#ff2d8d;
}


/* Social */

.footer-social{
list-style:none;
padding:0;
}

.footer-social li{
margin-bottom:8px;
}

.footer-social a{
color:#ddd;
text-decoration:none;
}

.footer-social a:hover{
color:#ff2d8d;
}


/* MOBILE */

@media (max-width:768px){

.footer-grid{
grid-template-columns:1fr;
text-align:center;
}

}

/* HEADER */

.site-header{
background:#000;
position:sticky;
top:0;
z-index:999;
}

.nav-container{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
}

/* LOGO */

.logo a{
color:black;
font-size:22px;
font-weight:bold;
text-decoration:none;
}


/* MAIN MENU */

.main-menu{
list-style:none;
display:flex;
gap:30px;
margin:0;
padding:0;
}

.main-menu li{
position:relative;
}

.main-menu a{
color:darkblue;
text-decoration:none;
padding:10px 15px;
display:block;
}

.main-menu a:hover{
color:#ff2d8d;
}


/* DROPDOWN */

.sub-menu{
display:none;
position:absolute;
top:100%;
left:0;
background:#111;
list-style:none;
padding:0;
margin:0;
min-width:200px;
}

.sub-menu li{
width:100%;
}

.sub-menu a{
padding:10px 15px;
color:#ddd;
}

.menu-item-has-children:hover .sub-menu{
display:block;
}


/* MOBILE MENU BUTTON */

.menu-toggle{
display:none;
background:none;
border:none;
font-size:26px;
color:darkblue;
cursor:pointer;
}


/* MOBILE */

@media (max-width:900px){

.menu-toggle{
display:block;
}

.main-navigation{
display:none;
width:100%;
}

.main-navigation.active{
display:block;
}

.main-menu{
flex-direction:column;
background:#000;
margin-top:15px;
}

.main-menu li{
border-bottom:1px solid #222;
}

.sub-menu{
position:relative;
background:#111;
}

}

/* =====================
NAVIGATION
===================== */

.site-header{
background:#000;
position:sticky;
top:0;
z-index:999;
}

.main-navigation{
display:flex;
align-items:center;
}

.main-menu{
list-style:none;
display:flex;
gap:25px;
margin:0;
padding:0;
}

.main-menu li{
position:relative;
}

.main-menu a{
color:darkblue;
text-decoration:none;
padding:12px 15px;
display:block;
font-weight:500;
}

.main-menu a:hover{
color:#ff2d8d;
}


/* =====================
DROPDOWN MENU
===================== */

.sub-menu{
display:none;
position:absolute;
top:100%;
left:0;
background:#111;
list-style:none;
padding:0;
margin:0;
min-width:200px;
border-radius:4px;
box-shadow:0 8px 20px rgba(0,0,0,.4);
}

.sub-menu li{
width:100%;
}

.sub-menu a{
padding:10px 15px;
color:#ddd;
}

.sub-menu a:hover{
background:#1a237e;
color:pink;
}

/* SHOW DROPDOWN */

.menu-item-has-children:hover .sub-menu{
display:block;
}


/* =====================
MOBILE MENU
===================== */

.menu-toggle{
display:none;
background:none;
border:none;
font-size:26px;
color:darkblue;
cursor:pointer;
}


/* MOBILE LAYOUT */

@media (max-width:900px){

.menu-toggle{
display:block;
}

.main-navigation{
display:none;
width:100%;
}

.main-navigation.active{
display:block;
}

.main-menu{
flex-direction:column;
background:#000;
width:100%;
}

.main-menu li{
border-bottom:1px solid #222;
}

.sub-menu{
position:relative;
box-shadow:none;
}

}

.about-hero{
padding:120px 20px;
background: linear-gradient(135deg, rgba(26,35,126,.85), rgba(233,30,99,.75)),
	url('/wp-content/themes/i2g-agency-pro/assets/images/about_us.jpg') center/cover no-repeat;
color:white;
text-align:center;
}

.about-hero h1{
font-size:48px;
margin-bottom:15px;
}

.about-hero-sub{
max-width:700px;
margin:auto;
}

.about-intro,
.about-mission,
.about-services,
.about-values{
	    padding: 40px 20px 40px;
    background: white;
    text-align: center;
}

.about-mission h2,
.about-services h2 {
	font-size: 36px;
}

.about-service-list{
	list-style-type: none;
}

.about-hospitality{
	padding: 40px 20px 100px;
    background: #111;
    color: white;
    text-align: center;
}
.about-hospitality h2 {
	    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
}
/* .about-values{
padding:50px 20px 100px;
background:#f7f7f7;
}

.about-values h2{
	text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
} */

.values-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
	    text-align: center;
}

.value-box{
/* background:#f7f7f7;
padding:30px;
border-radius:8px; */
	background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}

.value-box h3{
	    margin-bottom: 10px;
    color: #1a237e;
}

.value-box p{
	    color: #666;
}

.about-cta{
padding:100px 20px;
text-align:center;
background:linear-gradient(135deg, #1a237e, #ff2d8d);
color:white;
}

.services-intro{
	padding-top: 20px;
	text-align: center;
}

.services-hero{
padding:120px 20px;
text-align:center;
background:linear-gradient(135deg,#1a237e,#ff2d8d);
color:white;
}

.services-grid-section{
	padding: 20px 0;
}

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.service-card{
background:#f7f7f7;
padding:30px;
border-radius:8px;
transition:.3s;
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.service-link{
color:#ff2d8d;
font-weight:bold;
text-decoration:none;
}

.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.process-step{
background:white;
padding:25px;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.services-cta{
padding:100px 20px;
text-align:center;
background:linear-gradient(135deg, #1a237e, #ff2d8d);
color:white;
}

/* =========================
AI INTRO
========================= */

.ai-intro{
padding:40px 20px 90px;
background:#fff;
}

.ai-intro h2{
font-size:36px;
margin-bottom:20px;
text-align:center;
}

.ai-intro p{
max-width:800px;
margin:auto;
text-align:center;
color:#555;
line-height:1.6;
}


/* =========================
AI SOLUTIONS GRID
========================= */

.ai-solutions{
padding:40px 20px 90px;
background:#f7f7f7;
}

.ai-solutions h2{
text-align:center;
	font-size:36px;
margin-bottom:50px;
}

.ai-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.ai-box{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
transition:.3s;
}

.ai-box:hover{
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,.1);
}

.ai-box h3{
margin-bottom:10px;
color:#1a237e;
}

.ai-box p{
color:#666;
}


/* =========================
AI USE CASES
========================= */

.ai-use-cases{
padding:40px 20px 80px;
background:white;
}

.ai-use-cases h2{
text-align:center;
	font-size:36px;
margin-bottom:30px;
}

.ai-use-list{
max-width:600px;
margin:auto;
list-style:none;
padding:0;
}

.ai-use-list li{
padding:10px 0;
border-bottom:1px solid #eee;
color:#555;
}

.ai-use-list li:before{
content:"✓ ";
color:#ff2d8d;
font-weight:bold;
}


/* =========================
AI HOSPITALITY
========================= */

.ai-hospitality{
padding:40px 20px 100px;
background:#111;
color:white;
text-align:center;
}

.ai-hospitality h2{
	font-size:36px;
margin-bottom:20px;
}

.ai-hospitality p{
max-width:700px;
margin:auto;
margin-bottom:30px;
color:#ddd;
}


/* =========================
AI PROCESS
========================= */

.ai-process{
padding:40px 20px 90px;
background:#f7f7f7;
}

.ai-process h2{
text-align:center;
	font-size: 36px;
margin-bottom:50px;
}

.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.process-step{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.process-step h3{
margin-bottom:10px;
color:#1a237e;
}

.process-step p{
color:#666;
}


/* =========================
AI CTA
========================= */

.ai-cta{
padding:40px 20px 100px;
text-align:center;
background:linear-gradient(135deg,#1a237e,#ff2d8d);
color:white;
}

.ai-cta h2{
margin-bottom:15px;
font-size:36px;
}

.ai-cta p{
margin-bottom:25px;
color:#eee;
}


/* =========================
BUTTON
========================= */

.btn-primary{
background:#ff2d8d;
color:white;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
font-weight:600;
display:inline-block;
transition:.3s;
}

.btn-primary:hover{
background:#e0006a;
}


/* =========================
CONTAINER
========================= */

.container{
max-width:1200px;
margin:auto;
width:90%;
}


/* =========================
RESPONSIVE
========================= */

@media (max-width:768px){

.ai-hero h1{
font-size:32px;
}

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

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

}

/* =========================
SEO INTRO
========================= */

.seo-intro{
padding:40px 20px 90px;
background:#fff;
text-align:center;
}

.seo-intro h2{
margin-bottom:20px;
font-size:36px;
}

.seo-intro p{
max-width:800px;
margin:auto;
color:#555;
line-height:1.6;
}


/* =========================
SEO SERVICES GRID
========================= */

.seo-services{
padding:40px 20px 100px;
background:#f7f7f7;
}

.seo-services h2{
text-align:center;
	font-size:36px;
margin-bottom:50px;
}

.seo-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.seo-box{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
transition:.3s;
}

.seo-box:hover{
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,.1);
}

.seo-box h3{
margin-bottom:10px;
color:#1a237e;
}

.seo-box p{
color:#666;
}


/* =========================
SEO BENEFITS
========================= */

.seo-benefits{
padding:40px 20px 80px;
background:white;
text-align:center;
}

.seo-benefits h2{
	font-size:36px;
}

.seo-benefit-list{
max-width:600px;
margin:auto;
list-style:none;
padding:0;
}

.seo-benefit-list li{
padding:12px 0;
border-bottom:1px solid #eee;
}

.seo-benefit-list li:before{
content:"✓ ";
color:#ff2d8d;
font-weight:bold;
}


/* =========================
SEO HOSPITALITY
========================= */

.seo-hospitality{
padding:40px 20px 100px;
background:#111;
color:white;
text-align:center;
}

.seo-hospitality h2{
	font-size:36px;
}

.seo-hospitality p{
max-width:700px;
margin:auto;
margin-bottom:30px;
color:#ddd;
}


/* =========================
SEO PROCESS
========================= */

.seo-process{
padding:40px 20px 100px;
background:#f7f7f7;
}

.seo-process h2{
text-align:center;
	font-size:36px;
margin-bottom:50px;
}

.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.process-step{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.process-step h3{
margin-bottom:10px;
color:#1a237e;
}


/* =========================
SEO CTA
========================= */

.seo-cta{
padding:40px 20px 100px;
background:linear-gradient(135deg,#1a237e,#ff2d8d);
text-align:center;
color:white;
}

.seo-cta h2{
	font-size:36px;
}

.seo-cta p{
margin-bottom:25px;
color:#eee;
}


/* BUTTON */

.btn-primary{
background:#ff2d8d;
color:white;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
font-weight:600;
display:inline-block;
transition:.3s;
}

.btn-primary:hover{
background:#e0006a;
}

/* =========================
APP INTRO
========================= */

.app-intro{
padding:40px 20px;
background:#fff;
text-align:center;
}

.app-intro h2{
font-size:34px;
margin-bottom:20px;
}

.app-intro p{
max-width:800px;
margin:auto;
color:#555;
line-height:1.6;
}


/* =========================
APP TYPES GRID
========================= */

.app-types{
padding:50px 20px 100px;
background:#f7f7f7;
}

.app-types h2{
text-align:center;
	font-size: 36px;
margin-bottom:50px;
}

.app-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.app-box{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
transition:.3s;
}

.app-box:hover{
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,.1);
}

.app-box h3{
margin-bottom:10px;
color:#1a237e;
}

.app-box p{
color:#666;
}


/* =========================
APP FEATURES
========================= */

.app-features{
padding:40px 20px 90px;
background:white;
text-align:center;
}

.app-feature-list{
max-width:600px;
margin:auto;
list-style:none;
padding:0;
}

.app-feature-list li{
padding:12px 0;
border-bottom:1px solid #eee;
}

.app-feature-list li:before{
content:"✓ ";
color:#ff2d8d;
font-weight:bold;
}


/* =========================
APP HOSPITALITY
========================= */

.app-hospitality{
padding:40px 20px 100px;
background:#111;
color:white;
text-align:center;
}

.app-hospitality p{
max-width:700px;
margin:auto;
margin-bottom:30px;
color:#ddd;
}


/* =========================
APP PROCESS
========================= */

.app-process{
padding:40px 20px 100px;
background:#f7f7f7;
}

.app-process h2{
text-align:center;
margin-bottom:50px;
}

.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.process-step{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.process-step h3{
margin-bottom:10px;
color:#1a237e;
}


/* =========================
APP CTA
========================= */

.app-cta{
padding:40px 20px 100px;
background:linear-gradient(135deg,#1a237e,#ff2d8d);
text-align:center;
color:white;
}

.app-cta p{
margin-bottom:25px;
color:#eee;
}


/* BUTTON */

.btn-primary{
background:#ff2d8d;
color:white;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
font-weight:600;
display:inline-block;
transition:.3s;
}

.btn-primary:hover{
background:#e0006a;
}

/* =========================
SERVICES HERO
========================= */

.services-hero{
padding:120px 20px;
background: linear-gradient(135deg, rgba(26,35,126,.85), rgba(233,30,99,.75)),
	url('/wp-content/themes/i2g-agency-pro/assets/images/services.jpg') center/cover no-repeat;
color:white;
text-align:center;
position:relative;
overflow:hidden;
}

.services-hero h1{
font-size:44px;
margin-bottom:15px;
}

.services-hero p{
max-width:700px;
margin:auto;
font-size:18px;
color:#eee;
line-height:1.6;
}

/* subtle background effect */

.services-hero::after{
content:"";
position:absolute;
top:-200px;
left:-200px;
width:500px;
height:500px;
background:rgba(255,255,255,0.05);
border-radius:50%;
}

.services-hero::before{
content:"";
position:absolute;
bottom:-200px;
right:-200px;
width:500px;
height:500px;
background:rgba(255,255,255,0.05);
border-radius:50%;
}

/* =========================
WEB DEV INTRO
========================= */

.webdev-intro{
padding:40px 20px 90px;
background:#fff;
text-align:center;
}

.webdev-intro h2{
font-size:36px;
margin-bottom:20px;
}

.webdev-intro p{
max-width:800px;
margin:auto;
color:#555;
line-height:1.6;
}


/* =========================
WEB DEV TYPES
========================= */

.webdev-types{
padding:40px 20px 100px;
background:#f7f7f7;
}

.webdev-types h2{
text-align:center;
	font-size:36px;
margin-bottom:50px;
}

.webdev-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.webdev-box{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
transition:.3s;
}

.webdev-box:hover{
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,.1);
}

.webdev-box h3{
margin-bottom:10px;
color:#1a237e;
}

.webdev-box p{
color:#666;
}


/* =========================
WEB DEV FEATURES
========================= */

.webdev-features{
padding:40px 20px 90px;
background:white;
text-align:center;
}

.webdev-features h2{
	font-size:36px;
}
.webdev-feature-list{
max-width:600px;
margin:auto;
list-style:none;
padding:0;
}

.webdev-feature-list li{
padding:12px 0;
border-bottom:1px solid #eee;
}

.webdev-feature-list li:before{
content:"✓ ";
color:#ff2d8d;
font-weight:bold;
}


/* =========================
WEB DEV HOSPITALITY
========================= */

.webdev-hospitality{
padding:40px 20px 100px;
background:#111;
color:white;
text-align:center;
}

.webdev-hospitality h2{
	font-size:36px;
}
.webdev-hospitality p{
max-width:700px;
margin:auto;
margin-bottom:30px;
color:#ddd;
}


/* =========================
WEB DEV PROCESS
========================= */

.webdev-process{
padding:40px 20px 100px;
background:#f7f7f7;
}

.webdev-process h2{
text-align:center;
	font-size:36px
margin-bottom:50px;
}

.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.process-step{
background:white;
padding:30px;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.process-step h3{
margin-bottom:10px;
color:#1a237e;
}

.process-step p{
color:#666;
}


/* =========================
WEB DEV CTA
========================= */

.webdev-cta{
padding:40px 20px 100px;
background:linear-gradient(135deg,#1a237e,#ff2d8d);
text-align:center;
color:white;
}

.webdev-cta h2{
	font-size:36px;
}

.webdev-cta p{
margin-bottom:25px;
color:#eee;
}


/* =========================
BUTTON
========================= */

.btn-primary{
background:#ff2d8d;
color:white;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
font-weight:600;
display:inline-block;
transition:.3s;
}

.btn-primary:hover{
background:#e0006a;
}


/* =========================
CONTAINER
========================= */

.container{
max-width:1200px;
margin:auto;
width:90%;
}


/* =========================
RESPONSIVE
========================= */

@media (max-width:768px){

.webdev-hero h1{
font-size:32px;
}

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

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

}

/* =========================
   ABOUT PAGE BASE
========================= */

.about-page{
  max-width:1100px;
  margin:0 auto;
  padding:60px 20px;
}

/* =========================
   MISSION / INTRO
========================= */

.about-intro{
      padding: 40px 20px;
    background: white;
    text-align: center;
}

.about-intro p{
  font-size:18px;
  line-height:1.7;
  max-width:700px;
  color:var(--text);
	margin: auto;
}

/* =========================
   STATS SECTION
========================= */

.about-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  padding:80px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.stat{
  text-align:left;
}

.stat h3{
  font-size:32px;
  margin-bottom:5px;
  background:linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.stat p{
  color:var(--muted);
}

/* =========================
   VALUES SECTION
========================= */

.about-values{
/*   display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:50px; */
  padding:40px 0 80px;
	    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
	    background: #f7f7f7;
}

.about-values h2{
	font-size: 36px;
	    text-align: center;
    margin-bottom: 50px;
}

.value{
  border-top:2px solid var(--border);
  padding-top:20px;
  transition:all .3s ease;
}

.value:hover{
  border-top:2px solid;
  border-image:linear-gradient(90deg, var(--blue), var(--pink)) 1;
}

.value h4{
  font-size:20px;
  margin-bottom:10px;
}

.value p{
  color:var(--muted);
}

/* =========================
   TEAM SECTION
========================= */

.about-team{
  padding:80px 0;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.team-member{
  text-align:center;
}

.team-member img{
  width:100%;
  border-radius:16px;
  margin-bottom:15px;
}

.team-member h5{
  margin:0;
  font-size:18px;
}

.team-member span{
  font-size:14px;
  color:var(--muted);
}

/* =========================
   CTA SECTION
========================= */

.about-cta{
  padding:100px 0;
  text-align:center;
  border-top:1px solid var(--border);
}

.about-cta h2{
  font-size:32px;
  margin-bottom:20px;
}

.about-cta p{
  color:var(--muted);
  margin-bottom:30px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 992px){

  .about-stats{
    grid-template-columns:1fr;
  }

  .about-values{
    grid-template-columns:1fr;
  }

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

}

@media(max-width: 600px){

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



}