<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>MCP Study and Immigration Consultant</title>
  <link rel="stylesheet" href="style.css" />
  <style>
 /* Hero Section */
    .hero-split {
      position: relative;
      background: url('./image/hero-image.PNG') no-repeat center center/cover;
      padding: 100px 20px;
      color: white;
      z-index: 1;
    }

    .hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* <-- Light white transparent overlay */
  z-index: 2;
}

    .hero-split .hero-grid {
      position: relative;
      z-index: 3;
    }

    /* Navbar */
    .navbar {
      background-color: #006400;
      padding: 15px 20px;
      color: white;
    }

    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }

    .nav-links {
      display: flex;
      gap: 20px;
      list-style: none;
    }

    .nav-links li a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    .menu-toggle {
      display: none;
      font-size: 28px;
      cursor: pointer;
    }

    /* Modal Styles */
    .modal {
      display: none;
      position: fixed;
      z-index: 999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background: #fff;
      padding: 2rem;
      border-radius: 10px;
      width: 90%;
      max-width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      position: relative;
    }

    .close-btn {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .read-more-btn {
      background-color: #006400;
      color: white;
      padding: 10px 20px;
      margin-top: 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    /* Footer */
    .footer {
      background-color: #f2f2f2;
      text-align: center;
      padding: 20px;
      font-size: 14px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #006400;
        margin-top: 10px;
      }

      .nav-links.active {
        display: flex;
      }

      .menu-toggle {
        display: block;
      }

      .hero-split {
        padding: 60px 15px;
        text-align: center;
      }

      .modal-content {
        width: 95%;
      }
    }

    @media (max-width: 480px) {
      .hero-split {
        padding: 40px 10px;
      }

      .read-more-btn {
        width: 100%;
      }

      .nav-links li a {
        padding: 10px;
        display: block;
      }
    }
    .top-header {
  background-color: #003c2d; /* dark green */
  color: white;
  padding: 10px 40px;
  font-size: 14px;
  font-weight: bold;
}

.top-header a {
  color: white;
  margin-left: 10px;
  text-decoration: none;
}

.top-header a:hover {
  color: #FFD700; /* gold on hover */
}
.top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
/* WhAT WE WORK */
.work-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  width: 250px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth effect */
}

.work-card:hover {
  transform: translateY(-8px);  /* lift up */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* stronger shadow on hover */
}

.what-we-work {
  position: relative;
  background-color: #f9f9f9;
  padding: 60px 20px;
  text-align: center;
  overflow: hidden; /* so pseudo-element doesn’t spill outside */

}
.what-we-work {
  background-color: #f9f9f9;
  padding: 60px 20px;
  text-align: center;

  background-image: url('whatwe.png'); /* make sure the path is correct */
  background-repeat: no-repeat;
  background-size: cover;            /* cover the entire container */
  background-position: center;
  background-attachment: fixed;      /* optional: keeps it in place on scroll */
  opacity: 1;                        /* keep fully visible */
}
.what-we-work::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.05); /* subtle grey shadow overlay */
  z-index: 0;
}

.what-we-work > * {
  position: relative;
  z-index: 1;
}


.what-we-work {
  position: relative;
}


.what-we-work h2 {
  font-size: 40px;
  color: white; /* matching your website theme */
  margin-bottom: 40px;
}

.work-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.work-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  width: 250px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-align: center;           /* ✨ center everything inside */
  display: flex;
  flex-direction: column;
  align-items: center;          /* ✨ center children horizontally */
}

.work-card i {
  font-size: 40px;       /* keep big icon */
  width: 40px;           /* if using img, control size */
  height: 40px;
  margin-bottom: 5px;    /* small space below icon */
  display: block;
  margin-top: 0px;       /* remove extra top margin */
}
.work-card h3 {
  font-size: 20px;
  margin-top: 5px;      /* keep small top margin */
  margin-bottom: 10px;
  color: #032b11;
}

.work-card p {
  font-size: 20px;            /* clean, readable size */
  color: #333;
  line-height: 1.6;           /* adds breathing space between lines */
  text-align: center;         /* centers the paragraph */
  margin-top: 10px;           /* adds spacing from heading */
  padding: 0 10px;            /* slight side padding for even look */
}

.work-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  width: 250px;
  min-height: 350px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center; /* centers the text */
}
/* CEO MESSAGE */
.ceo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 900px;
  margin: auto;
  background: rgb(239, 250, 245);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth effect */
}

.ceo-container:hover {
  transform: translateY(-8px); /* lift up on hover */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* stronger shadow on hover */
}

.ceo-message {
  background: #edfaf3; /* light background to stand out */
  margin: 40px auto;
  padding: 40px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  max-width: 1200px;
}

.ceo-container {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.ceo-photo img {
  width: 200px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.ceo-text {
  flex: 1;
}

.ceo-label {
  font-size: 16px;
  color: #004225; /* brand color */
  font-weight: bold;
  margin-bottom: 5px;
}

.ceo-name {
  font-size: 30px;
  margin: 0 0 15px 0;
  color: #333;
}

.ceo-text p {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 10px;
}
/*Services*/
.service-item {
  flex: 0 1 200px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth effect */
}

.service-item:hover {
  transform: translateY(-8px);  /* lift upwards */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);  /* add shadow */
}

.mcp-services-clean {
  background-color: #f0f4f2; /* soft background to separate section */
  padding: 60px 20px;
  text-align: center;
}

.mcp-services-clean h2 {
  font-size: 32px;
  color: #004225;
  margin-bottom: 40px;
}

.services-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 50px;
}
.service-item {
  flex: 0 1 200px;
}
.service-circle {
  background-color: white;           /* inner circle is white */
  border: 4px solid #004225;         /* dark green border */
  font-size: 60px;
  width: 150px;                      /* bigger size */
  height: 150px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-item h3 {
  font-size: 25px;     /* was 18px, now slightly bigger */
  color: #004225;
  margin-bottom: 8px;
}

.service-item p {
  font-size: 18px;     /* was 14px, now bigger for readability */
  color: #333;
  line-height: 1.5;
  max-width: 250px;     /* slightly wider if you like */
  margin: 0 auto;
}
.mcp-subtext {
  font-size: 16px;
  color: #333;
  max-width: 700px;
   margin: 2px auto 20px;  /* smaller top and bottom margin */
  line-height: 1.6;
}

/*MCP COUNTRIES*/
.mcp-countries {
  margin: 40px 0;  /* space above and below */
}

.represented-countries {
  background-color: white;  /* keep background white */
  padding: 40px 20px;
  text-align: center;
}

.represented-countries h2 {
  font-size: 40px;          /* bigger heading */
  color: #004225;           /* dark green color */
  margin-bottom: 70px;
}

.country-flags {
  display: flex;
  justify-content: center;
  gap: 70px;                /* space between flags */
  flex-wrap: wrap;
}

.country-flags img {
  width: 150px;            /* make flags bigger */
  height: 100px;
}
.country-flags img:hover {
  transform: scale(1.1);   /* this is the hover effect: flags smoothly zoom in */
}

.countries-content {
  background-color: white;
  max-width: 1000px;
  margin: 0 auto;              /* center the content */
  padding: 30px 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.countries-content img {
  width: 200px;
  height: auto;
  transition: transform 0.3s ease;
}

.countries-content img:hover {
  transform: scale(1.1);   /* smooth zoom on hover */
}
  /*COUNTRY CARDS HOVER EFFECT*/
 .country-cards-overlap .card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  width: 250px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.country-cards-overlap .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* TESTIMONIALS*/
.testimonials {
  background: linear-gradient(rgba(98, 90, 90, 0.8), rgba(114, 106, 106, 0.8)), 
              url('testimonial.png') center/cover no-repeat;
  padding: 60px 20px;
  text-align: center;
}
.testimonials h2 {
  font-size: 36px;         /* bigger heading */
  color:white;
  margin-bottom: 40px;
}

.testimonial-slider {
  max-width: 900px;        /* slightly wider */
  margin: 0 auto;
  position: relative;
}

.testimonial {
  display: none;
  background: white;
  border-radius: 12px;
  padding: 40px 30px;       /* more padding */
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.testimonial.active {
  display: block;
}

.testimonial p {
  font-size: 20px;         /* bigger text */
  color: #333;
  margin-bottom: 20px;
}

.testimonial h4 {
  font-size: 22px;         /* bigger name */
  color: #004225;
  margin-bottom: 8px;
}

.testimonial span {
  font-size: 16px;         /* bigger role */
  color: #777;
}
.student-country {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.student-country img {
  width: 24px;
  height: auto;
  border-radius: 3px;  /* small rounded corners */
}

.student-country span {
  font-size: 16px;
  color: #777;
}
/* ABOUT Section */
.about-hero {
  position: relative;
  background-image: url('about.png'); /* replace with your image */
  background-size: cover;
  background-position: center;
  height: 400px; /* adjust as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.about-overlay {
  background-color: rgba(0, 66, 37, 0.6); /* dark green overlay with opacity */
  padding: 40px;
  text-align: center;
  border-radius: 10px;
}

.about-overlay h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.about-overlay p {
  font-size: 18px;
}
/*ADDRESS*/
.office-addresses {
  background-color: #111; /* dark background like your reference */
  color: white;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 40px 20px;
}

.office {
  max-width: 300px;
  margin: 20px;
}

.office h3 {
  border-bottom: 2px solid #fff;
  padding-bottom: 8px;
  margin-bottom: 15px;
  font-size: 20px;
}

.office p {
  margin: 8px 0;
  font-size: 15px;
}

.office i {
  margin-right: 8px;
  color: #ffd700; /* golden icon like effect */
}
  </style>
</head>

<body>

<!-- Navbar -->
<nav class="navbar">
  <div class="container nav-container">
    <h1 class="logo">MCP CONSULTANTS</h1>
    <ul class="nav-links" id="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Study Abroad</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    <div class="menu-toggle" id="menu-toggle">&#9776;</div>
  </div>
</nav>

<!-- Main Content -->
<section class="hero-split">
  <div class="container hero-grid">
    <h2>Blog Articles</h2>

    <div>
      <h3>How to Prepare for Your Study Abroad Journey</h3>
      <p>Tips and insights to help you prepare for studying abroad...</p>
      <button class="read-more-btn" onclick="openModal('modal1')">Read More</button>
    </div>

    <div style="margin-top: 30px;">
      <h3>Immigration Tips for a Smooth Transition</h3>
      <p>Essential advice for navigating the immigration process...</p>
      <button class="read-more-btn" onclick="openModal('modal2')">Read More</button>
    </div>
  </div>
</section>

<!-- Modals -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <span class="close-btn" onclick="closeModal('modal1')">&times;</span>
    <h2>How to Prepare for Your Study Abroad Journey</h2>
    <ul>
      <li>Research your destination country and its culture.</li>
      <li>Ensure your passport and visa documents are ready.</li>
      <li>Arrange your accommodation before you arrive.</li>
      <li>Take care of financial planning (bank accounts, tuition fees, living costs).</li>
      <li>Pack essentials according to weather and university requirements.</li>
      <li>Connect with fellow students and university advisors online.</li>
    </ul>
    <p>Preparation reduces stress and ensures a smooth journey to your academic success!</p>
  </div>
</div>

<div id="modal2" class="modal">
  <div class="modal-content">
    <span class="close-btn" onclick="closeModal('modal2')">&times;</span>
    <h2>Immigration Tips for a Smooth Transition</h2>
    <ul>
      <li>Organize important documents like passports, visas, and certificates.</li>
      <li>Understand the immigration laws and requirements of your destination country.</li>
      <li>Secure health insurance coverage and know emergency contacts.</li>
      <li>Arrange your temporary or permanent accommodation early.</li>
      <li>Prepare a financial backup plan (bank cards, emergency funds).</li>
      <li>Learn basic language phrases if needed for better communication.</li>
    </ul>
    <p>Being well-prepared helps you settle quickly and confidently!</p>
  </div>
</div>

<!-- Footer -->
<footer class="footer">
  <p>&copy; 2025 MCP Study and Immigration Consultant. All rights reserved.</p>
</footer>

<!-- Scripts -->
<script>
  // Mobile Menu Toggle
  const toggle = document.getElementById('menu-toggle');
  const links = document.getElementById('nav-links');
  toggle.addEventListener('click', () => {
    links.classList.toggle('active');
  });

  // Modal Functions
  function openModal(modalId) {
    document.getElementById(modalId).style.display = 'flex';
  }

  function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
  }

  // Close modal on click outside
  window.onclick = function(event) {
    const modals = document.querySelectorAll('.modal');
    modals.forEach(function(modal) {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  }
</script>

</body>
</html>
