File Manager

✏️ Edit File: /home/rla105zs937x/public_html/mcloudbim.com/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCloud BIM Consultant</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --gold: #C9A24A;
    --gold-light: #E2C47A;
    --gold-dark: #A07830;
    --dark: #1A1A1A;
    --dark2: #242424;
    --dark3: #2E2E2E;
    --dark4: #383838;
    --gray: #888;
    --light-gray: #BDBDBD;
    --white: #F5F3EE;
  }

* { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { background: var(--dark); color: var(--white); font-family: 'Barlow', sans-serif; overflow-x: hidden; }
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: var(--dark); }
  ::-webkit-scrollbar-thumb { background: var(--gold); }

/* ── NAV ── */
  nav {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    padding: 0 5%;
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
    background: rgba(26,26,26,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201,162,74,0.15);
    transition: all 0.3s;
  }
  nav.scrolled { height: 60px; background: rgba(20,20,20,0.98); }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .logo-icon {
    width: 40px; height: 40px; background: var(--gold);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; color: var(--dark);
  }
  .logo-text { line-height: 1; }
  .logo-text span:first-child { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 2px; color: var(--gold); }
  .logo-text span:last-child { display: block; font-size: 9px; letter-spacing: 3px; color: var(--light-gray); text-transform: uppercase; margin-top: 1px; }

.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
  .nav-links > li { position: relative; }
  .nav-links a {
    color: var(--light-gray); text-decoration: none;
    font-size: 13px; font-weight: 500; letter-spacing: 1.5px;
    text-transform: uppercase; transition: color 0.3s;
    position: relative; display: flex; align-items: center; gap: 5px;
  }
  .nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1px; background: var(--gold); transition: width 0.3s;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a:hover::after { width: 100%; }

/* SUBMENU */
  .has-submenu > a .arrow { font-size: 9px; transition: transform 0.3s; }
  .has-submenu:hover > a .arrow { transform: rotate(180deg); }

.submenu {
    position: absolute; top: calc(100% + 16px); left: 50%;
    transform: translateX(-50%);
    background: var(--dark2);
    border: 1px solid rgba(201,162,74,0.2);
    border-top: 2px solid var(--gold);
    min-width: 240px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: all 0.25s ease;
    transform: translateX(-50%) translateY(-8px);
    list-style: none;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  }
  .has-submenu:hover .submenu {
    opacity: 1; visibility: visible; pointer-events: all;
    transform: translateX(-50%) translateY(0);
  }
  .submenu li { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .submenu li:last-child { border-bottom: none; }
  .submenu a {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; color: var(--light-gray);
    font-size: 12px; letter-spacing: 1.5px;
    transition: all 0.2s;
  }
  .submenu a::after { display: none; }
  .submenu a:hover { background: rgba(201,162,74,0.08); color: var(--gold); padding-left: 28px; }
  .submenu a .sub-icon { font-size: 16px; width: 24px; text-align: center; }
  .submenu a .sub-label { flex: 1; }
  .submenu a .sub-arrow { font-size: 10px; color: var(--gold-dark); }

.btn-quote {
    padding: 10px 24px; background: transparent; border: 1px solid var(--gold);
    color: var(--gold); font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; text-decoration: none; cursor: pointer;
    transition: all 0.3s;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  }
  .btn-quote:hover { background: var(--gold); color: var(--dark); }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
  .hamburger span { display: block; width: 26px; height: 2px; background: var(--gold); transition: all 0.3s; }

/* ── HERO ── */
  #hero { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: center; overflow: hidden; }
  .hero-bg { position: absolute; inset: 0; background: url('https://media.faro.com/-/media/Project/FARO/FARO/FARO/Resources/GeoSlam-Resource-Library/BIM-Article_Image-2.jpeg') center/cover; }
  .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(26,26,26,0.97) 40%, rgba(26,26,26,0.75) 70%, rgba(201,162,74,0.12) 100%); }
  .hero-grid-overlay {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(201,162,74,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(201,162,74,0.04) 1px, transparent 1px);
    background-size: 60px 60px; pointer-events: none;
  }
  .hero-content { position: relative; z-index: 2; padding: 0 8%; max-width: 780px; }
  .hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; animation: fadeUp 0.8s ease both; }
  .hero-eyebrow span { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 4px; color: var(--gold); text-transform: uppercase; }
  .eyebrow-line { width: 40px; height: 1px; background: var(--gold); }
  .hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(48px, 7vw, 88px); font-weight: 300; line-height: 1.0; color: var(--white); animation: fadeUp 0.8s 0.1s ease both; }
  .hero-title em { font-style: normal; color: var(--gold); font-weight: 600; }
  .hero-tagline { font-size: 16px; font-weight: 300; color: var(--light-gray); margin: 22px 0 36px; line-height: 1.7; max-width: 520px; animation: fadeUp 0.8s 0.2s ease both; }
  .hero-btns { display: flex; gap: 16px; flex-wrap: wrap; animation: fadeUp 0.8s 0.3s ease both; }
  .btn-primary { padding: 16px 36px; background: var(--gold); color: var(--dark); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s; clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%); }
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
  .btn-secondary { padding: 16px 36px; background: transparent; border: 1px solid rgba(201,162,74,0.4); color: var(--white); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all 0.3s; clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%); }
  .btn-secondary:hover { border-color: var(--gold); color: var(--gold); }
  .hero-stats { position: absolute; bottom: 48px; right: 8%; display: flex; gap: 48px; z-index: 2; animation: fadeUp 0.8s 0.4s ease both; }
  .stat { text-align: center; }
  .stat-num { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 600; color: var(--gold); line-height: 1; }
  .stat-label { font-size: 11px; letter-spacing: 2px; color: var(--gray); text-transform: uppercase; margin-top: 4px; }
  .hero-scroll { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: fadeUp 0.8s 0.5s ease both; }
  .scroll-text { font-size: 10px; letter-spacing: 3px; color: var(--gray); text-transform: uppercase; }
  .scroll-line { width: 1px; height: 50px; background: linear-gradient(var(--gold), transparent); animation: scrollPulse 1.8s ease-in-out infinite; }

/* ── SECTION COMMONS ── */
  section { padding: 100px 8%; }
  .section-header { margin-bottom: 60px; }
  .section-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .section-eyebrow span { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 4px; color: var(--gold); text-transform: uppercase; }
  .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 4.5vw, 56px); font-weight: 300; line-height: 1.1; color: var(--white); }
  .section-title em { font-style: italic; color: var(--gold); }
  .section-desc { margin-top: 16px; max-width: 560px; font-size: 15px; color: var(--gray); line-height: 1.8; }

/* ── SERVICES ── */
  #services { background: var(--dark2); position: relative; overflow: hidden; }
  #services::before { content: 'BIM'; position: absolute; right: -2%; top: 50%; transform: translateY(-50%); font-family: 'Cormorant Garamond', serif; font-size: 280px; font-weight: 700; color: rgba(201,162,74,0.03); pointer-events: none; line-height: 1; }
  .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .service-card { position: relative; overflow: hidden; background: var(--dark3); padding: 52px 40px; transition: all 0.4s; cursor: pointer; text-decoration: none; display: block; }
  .service-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--gold); transition: width 0.4s; }
  .service-card:hover { background: var(--dark4); transform: translateY(-4px); }
  .service-card:hover::before { width: 100%; }
  .service-img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 32px; filter: grayscale(30%); transition: filter 0.4s; }
  .service-card:hover .service-img { filter: grayscale(0%); }
  .service-num { font-family: 'Cormorant Garamond', serif; font-size: 13px; color: var(--gold-dark); letter-spacing: 3px; margin-bottom: 16px; }
  .service-name { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: var(--white); margin-bottom: 20px; }
  .service-list { list-style: none; }
  .service-list li { font-size: 14px; color: var(--light-gray); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
  .service-list li::before { content: ''; width: 20px; height: 1px; background: var(--gold); flex-shrink: 0; }
  .service-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); transition: gap 0.3s; }
  .service-card:hover .service-cta { gap: 14px; }

/* ── PROJECTS ── */
  #projects { background: var(--dark); }
  .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 3px; }
  .project-card { position: relative; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
  .project-card:first-child { grid-column: span 2; aspect-ratio: auto; }
  .project-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; filter: brightness(0.75); }
  .project-card:hover .project-img { transform: scale(1.06); filter: brightness(0.5); }
  .project-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,26,26,0.9) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; transition: all 0.4s; }
  .project-type { font-size: 10px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; margin-bottom: 6px; }
  .project-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--white); }
  .project-hover-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s; padding: 12px 28px; background: var(--gold); color: var(--dark); font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); }
  .project-card:hover .project-hover-btn { opacity: 1; }

/* ── ABOUT ── */
  #about { background: var(--dark2); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .about-img-wrap { position: relative; }
  .about-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(20%); }
  .about-img-frame { position: absolute; top: -16px; left: -16px; right: 16px; bottom: 16px; border: 1px solid rgba(201,162,74,0.3); pointer-events: none; }
  .about-badge { position: absolute; bottom: -20px; right: -20px; width: 110px; height: 110px; background: var(--gold); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--dark); }
  .about-badge span:first-child { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 700; line-height: 1; }
  .about-badge span:last-child { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: center; line-height: 1.2; }
  .about-text .section-header { margin-bottom: 36px; }
  .about-desc { font-size: 15px; color: var(--light-gray); line-height: 1.9; margin-bottom: 36px; }
  .about-info { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
  .info-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px; background: var(--dark3); border-left: 3px solid var(--gold); }
  .info-icon { font-size: 18px; }
  .info-label { font-size: 10px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; margin-bottom: 3px; }
  .info-value { font-size: 15px; color: var(--white); font-weight: 500; }

/* ── WHY US ── */
  #whyus { background: var(--dark); text-align: center; }
  .whyus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 60px; }
  .why-card { background: var(--dark2); padding: 48px 32px; transition: all 0.4s; position: relative; overflow: hidden; }
  .why-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201,162,74,0.08), transparent); opacity: 0; transition: opacity 0.4s; }
  .why-card:hover { transform: translateY(-6px); }
  .why-card:hover::after { opacity: 1; }
  .why-icon { width: 64px; height: 64px; margin: 0 auto 24px; background: rgba(201,162,74,0.1); border: 1px solid rgba(201,162,74,0.3); display: flex; align-items: center; justify-content: center; font-size: 26px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
  .why-title { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 1px; color: var(--white); margin-bottom: 12px; text-transform: uppercase; }
  .why-desc { font-size: 14px; color: var(--gray); line-height: 1.7; }

/* ── CONTACT ── */
  #contact { background: var(--dark2); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .contact-intro { font-size: 15px; color: var(--gray); line-height: 1.8; margin-bottom: 40px; }
  .contact-items { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
  .contact-item { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--dark3); border-left: 3px solid var(--gold); }
  .contact-item-icon { font-size: 20px; }
  .contact-item-label { font-size: 10px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
  .contact-item-val { font-size: 15px; color: var(--white); margin-top: 2px; }
  .whatsapp-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: #25D366; color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: all 0.3s; }
  .whatsapp-btn:hover { background: #1ebe5d; transform: translateY(-2px); }
  .contact-form { background: var(--dark3); padding: 48px; }
  .form-title { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: var(--white); margin-bottom: 32px; }
  .form-group { margin-bottom: 20px; }
  .form-group label { display: block; font-size: 10px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
  .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px 16px; background: var(--dark); border: 1px solid rgba(255,255,255,0.1); color: var(--white); font-family: 'Barlow', sans-serif; font-size: 14px; outline: none; transition: border-color 0.3s; appearance: none; }
  .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--gold); }
  .form-group textarea { min-height: 100px; resize: vertical; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .btn-submit { width: 100%; padding: 16px; background: var(--gold); color: var(--dark); font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.3s; }
  .btn-submit:hover { background: var(--gold-light); transform: translateY(-2px); }

/* ── FOOTER ── */
  footer { background: #111; padding: 64px 8% 32px; border-top: 1px solid rgba(201,162,74,0.15); }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 52px; }
  .footer-brand .logo { margin-bottom: 20px; }
  .footer-tagline { font-size: 14px; color: var(--gray); line-height: 1.8; max-width: 280px; margin-bottom: 24px; }
  .footer-social { display: flex; gap: 12px; }
  .social-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(201,162,74,0.3); color: var(--gold); font-size: 16px; text-decoration: none; transition: all 0.3s; }
  .social-btn:hover { background: var(--gold); color: var(--dark); border-color: var(--gold); }
  .footer-col h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--gold); text-transform: uppercase; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(201,162,74,0.2); }
  .footer-links { list-style: none; }
  .footer-links li { margin-bottom: 10px; }
  .footer-links a { font-size: 14px; color: var(--gray); text-decoration: none; transition: color 0.3s; display: flex; align-items: center; gap: 8px; }
  .footer-links a::before { content: '→'; font-size: 11px; color: var(--gold-dark); }
  .footer-links a:hover { color: var(--gold); }
  .footer-contact-item { display: flex; gap: 10px; margin-bottom: 14px; }
  .footer-contact-item span:first-child { color: var(--gold); font-size: 15px; }
  .footer-contact-item span:last-child { font-size: 14px; color: var(--gray); line-height: 1.5; }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  .footer-bottom p { font-size: 13px; color: var(--gray); }
  .footer-bottom span { color: var(--gold); }

/* ── ANIMATIONS ── */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes scrollPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

/* ── MOBILE NAV ── */
  .mobile-nav { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(26,26,26,0.98); flex-direction: column; align-items: center; justify-content: center; gap: 36px; }
  .mobile-nav.open { display: flex; }
  .mobile-nav a { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--white); text-decoration: none; transition: color 0.3s; }
  .mobile-nav a:hover { color: var(--gold); }
  .mobile-nav .mobile-sub { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .mobile-nav .mobile-sub a { font-size: 18px; color: var(--gold-dark); }
  .mobile-close { position: absolute; top: 24px; right: 8%; font-size: 32px; color: var(--gold); cursor: pointer; background: none; border: none; }

/* ── RESPONSIVE ── */
  @media (max-width: 1100px) { .whyus-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; } .projects-grid { grid-template-columns: 1fr 1fr; } .project-card:first-child { grid-column: span 2; } #about { grid-template-columns: 1fr; gap: 48px; } #contact { grid-template-columns: 1fr; gap: 48px; } .hero-stats { display: none; } }
  @media (max-width: 768px) { section { padding: 72px 6%; } .nav-links { display: none; } .btn-quote { display: none; } .hamburger { display: flex; } .projects-grid { grid-template-columns: 1fr; } .project-card:first-child { grid-column: span 1; } .whyus-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .contact-form { padding: 28px; } .form-row { grid-template-columns: 1fr; } }
  .logo img{
  height:80px;
  width:auto;
}
</style>
</head>
<body>

<div class="mobile-nav" id="mobileNav">
  <button class="mobile-close" id="mobileClose">✕</button>
  <a href="#hero" onclick="closeMob()">Home</a>
  <div class="mobile-sub">
    <a href="service-3d-design.html" onclick="closeMob()">3D Design</a>
    <a href="service-construction.html" onclick="closeMob()">Construction</a>
    <a href="service-consulting.html" onclick="closeMob()">Consulting</a>
  </div>
  <a href="#projects" onclick="closeMob()">Projects</a>
  <a href="#about" onclick="closeMob()">About</a>
  <a href="#contact" onclick="closeMob()">Contact</a>
</div>

<nav id="navbar">
  <a href="#hero" class="logo">

<img src="images/mcloudlogo.png" alt="MCloud Logo" style="height:80px;">
</a>
  <ul class="nav-links">
    <li><a href="#hero">Home</a></li>
    <li class="has-submenu">
      <a href="#services">Services <span class="arrow">▾</span></a>
      <ul class="submenu">
        <li><a href="service-3d-design.html"><span class="sub-icon">🏛️</span><span class="sub-label">3D Design</span><span class="sub-arrow">→</span></a></li>
        <li><a href="service-construction.html"><span class="sub-icon">🏗️</span><span class="sub-label">Construction Design</span><span class="sub-arrow">→</span></a></li>
        <li><a href="service-consulting.html"><span class="sub-icon">📐</span><span class="sub-label">BIM Consulting</span><span class="sub-arrow">→</span></a></li>
      </ul>
    </li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <a href="#contact" class="btn-quote">☎ Get Quote</a>
  <button class="hamburger" id="hamburger"><span></span><span></span><span></span></button>
</nav>

<section id="hero">
  <div class="hero-bg"></div>
  <div class="hero-grid-overlay"></div>
  <div class="hero-content">
    <div class="hero-eyebrow"><div class="eyebrow-line"></div><span>Building Information Modeling</span></div>
    <h1 class="hero-title">MCloud<br><em>BIM</em><br>Consultant</h1>
    <p class="hero-tagline">We Build Your Dream with BIM Technology — Professional services in 3D Design, Construction Design, and Elevation Design using advanced BIM workflow.</p>
    <div class="hero-btns">
      <a href="#projects" class="btn-primary">View Projects</a>
      <a href="#contact" class="btn-secondary">Contact Us</a>
    </div>
  </div>
  <div class="hero-stats">
    <div class="stat"><div class="stat-num">150+</div><div class="stat-label">Projects</div></div>
    <div class="stat"><div class="stat-num">5+</div><div class="stat-label">Years</div></div>
    <div class="stat"><div class="stat-num">98%</div><div class="stat-label">Satisfaction</div></div>
  </div>
  <div class="hero-scroll"><span class="scroll-text">Scroll</span><div class="scroll-line"></div></div>
</section>

<section id="services">
  <div class="section-header reveal">
    <div class="section-eyebrow"><div class="eyebrow-line"></div><span>What We Offer</span></div>
    <h2 class="section-title">Our <em>Core</em> Services</h2>
    <p class="section-desc">We deliver precise, efficient, and modern design solutions using industry-leading BIM technology for every project.</p>
  </div>
  <div class="services-grid">
    <a href="service-3d-design.html" class="service-card reveal">
      <img class="service-img" src="https://cdn.cadcrowd.com/3d-models/a0/03/a00396e7-a74e-4f1e-a0d4-202c2bcedf78/gallery/de1f1548-411f-4930-ba00-1e95c4669e16/medium.jpg" alt="3D Design" loading="lazy">
      <div class="service-num">01</div>
      <div class="service-name">3D Design</div>
      <ul class="service-list">
        <li>Architectural Modeling</li>
        <li>Interior Visualization</li>
        <li>Exterior Render</li>
      </ul>
      <div class="service-cta">Explore Service →</div>
    </a>
    <a href="service-construction.html" class="service-card reveal" style="transition-delay:0.1s">
      <img class="service-img" src="https://www.dlubal.com/en/webimage/009627/2419738/01-en-png-png.png?hash=a73e90e5fc33d9e51a50f53d7467f99627bfb32d&mw=360" alt="Construction Design" loading="lazy">
      <div class="service-num">02</div>
      <div class="service-name">Construction Design</div>
      <ul class="service-list">
        <li>Structural BIM Modeling</li>
        <li>Shop Drawings</li>
        <li>Construction Documentation</li>
      </ul>
      <div class="service-cta">Explore Service →</div>
    </a>
    <a href="service-consulting.html" class="service-card reveal" style="transition-delay:0.2s">
      <img class="service-img" src="https://cdn.prod.website-files.com/64a483b190bfff9cdf96e93b/66c30aa584cf141eed8db53a_Graton_View02_opt2%20%282%29.webp" alt="BIM Consulting" loading="lazy">
      <div class="service-num">03</div>
      <div class="service-name">BIM Consulting</div>
      <ul class="service-list">
        <li>BIM Strategy & Planning</li>
        <li>Workflow Optimization</li>
        <li>Standards & Compliance</li>
      </ul>
      <div class="service-cta">Explore Service →</div>
    </a>
  </div>
</section>

<section id="projects">
  <div class="section-header reveal">
    <div class="section-eyebrow"><div class="eyebrow-line"></div><span>Portfolio</span></div>
    <h2 class="section-title">Featured <em>Projects</em></h2>
  </div>
  <div class="projects-grid">
    <div class="project-card reveal">
      <img class="project-img" src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/3eb00b160602743.63b7134ea72e7.jpg" alt="Modern Villa" loading="lazy">
      <div class="project-overlay"><div class="project-type">Elevation Design</div><div class="project-name">Modern Villa</div></div>
      <span class="project-hover-btn">View Project</span>
    </div>
    <div class="project-card reveal" style="transition-delay:0.1s">
      <img class="project-img" src="https://i.pinimg.com/736x/2f/e9/ae/2fe9aeff3defb483436bec480e71296c.jpg" alt="Residential House" loading="lazy">
      <div class="project-overlay"><div class="project-type">3D Design</div><div class="project-name">Residential House</div></div>
      <span class="project-hover-btn">View Project</span>
    </div>
    <div class="project-card reveal" style="transition-delay:0.15s">
      <img class="project-img" src="https://live.staticflickr.com/2929/14197554143_82701e8511_b.jpg" alt="Commercial Building" loading="lazy">
      <div class="project-overlay"><div class="project-type">BIM Model</div><div class="project-name">Commercial Building</div></div>
      <span class="project-hover-btn">View Project</span>
    </div>
    <div class="project-card reveal" style="transition-delay:0.2s">
      <img class="project-img" src="https://s3.divcom.com/www.geoweeknews.com/images/02ee36fa1262c3625218096776f57dd9.jpg" alt="Duplex House" loading="lazy">
      <div class="project-overlay"><div class="project-type">Architectural Visualization</div><div class="project-name">Duplex House</div></div>
      <span class="project-hover-btn">View Project</span>
    </div>
    <div class="project-card reveal" style="transition-delay:0.25s">
      <img class="project-img" src="https://www.ny-engineers.com/hubfs/Webp-Images/bim-3dmodeling.webp" alt="Office Complex" loading="lazy">
      <div class="project-overlay"><div class="project-type">Construction Design</div><div class="project-name">Office Complex</div></div>
      <span class="project-hover-btn">View Project</span>
    </div>
  </div>
</section>

<section id="about">
  <div class="about-img-wrap reveal">
    <img class="about-img" src="https://media.faro.com/-/media/Project/FARO/FARO/FARO/Resources/GeoSlam-Resource-Library/BIM-Article_Image-2.jpeg" alt="About MCloud BIM">
    <div class="about-img-frame"></div>
    <div class="about-badge"><span>5+</span><span>Years Exp.</span></div>
  </div>
  <div class="about-text reveal" style="transition-delay:0.15s">
    <div class="section-header">
      <div class="section-eyebrow"><div class="eyebrow-line"></div><span>About Us</span></div>
      <h2 class="section-title">Building the <em>Future</em></h2>
    </div>
    <p class="about-desc">MCloud BIM Consultant specializes in Building Information Modeling (BIM), architectural visualization, and construction design. Our goal is to deliver accurate, efficient, and modern design solutions for residential and commercial projects using the latest BIM workflow and tools.</p>
    <div class="about-info">
      <div class="info-row"><div class="info-icon">📍</div><div class="info-content"><div class="info-label">Location</div><div class="info-value">Olaiyur, Trichy – 620021, Tamil Nadu</div></div></div>
      <div class="info-row"><div class="info-icon">📞</div><div class="info-content"><div class="info-label">Phone</div><div class="info-value">+91 98848 63422</div></div></div>
      <div class="info-row"><div class="info-icon">🌐</div><div class="info-content"><div class="info-label">Website</div><div class="info-value">mcloudbim.com</div></div></div>
    </div>
    <a href="#contact" class="btn-primary" style="display:inline-block">Work With Us</a>
  </div>
</section>

<section id="whyus">
  <div class="section-header reveal">
    <div class="section-eyebrow" style="justify-content:center"><div class="eyebrow-line"></div><span>Why Choose Us</span><div class="eyebrow-line"></div></div>
    <h2 class="section-title">What Sets Us <em>Apart</em></h2>
  </div>
  <div class="whyus-grid">
    <div class="why-card reveal"><div class="why-icon">⚙️</div><div class="why-title">Modern BIM Workflow</div><div class="why-desc">We use the latest BIM software and methodologies to ensure every project meets international standards.</div></div>
    <div class="why-card reveal" style="transition-delay:0.1s"><div class="why-icon">📐</div><div class="why-title">Accurate Models</div><div class="why-desc">Precision construction models with zero tolerance for errors — your project data is always reliable.</div></div>
    <div class="why-card reveal" style="transition-delay:0.2s"><div class="why-icon">⚡</div><div class="why-title">Fast Delivery</div><div class="why-desc">We respect deadlines. Our streamlined process ensures timely delivery without compromising quality.</div></div>
    <div class="why-card reveal" style="transition-delay:0.3s"><div class="why-icon">🏆</div><div class="why-title">Professional Quality</div><div class="why-desc">Every design is crafted with meticulous attention to detail by experienced BIM professionals.</div></div>
  </div>
</section>

<section id="contact">
  <div class="contact-info reveal">
    <div class="section-header">
      <div class="section-eyebrow"><div class="eyebrow-line"></div><span>Get In Touch</span></div>
      <h2 class="section-title">Start Your <em>Project</em></h2>
    </div>
    <p class="contact-intro">Ready to bring your architectural vision to life? Contact us today and let's discuss how BIM technology can transform your next project.</p>
    <div class="contact-items">
      <div class="contact-item"><div class="contact-item-icon">📞</div><div class="contact-item-text"><div class="contact-item-label">Phone</div><div class="contact-item-val">+91 98848 63422</div></div></div>
      <div class="contact-item"><div class="contact-item-icon">📍</div><div class="contact-item-text"><div class="contact-item-label">Location</div><div class="contact-item-val">Olaiyur, Trichy – 620021</div></div></div>
    </div>
    <a href="https://wa.me/919884863422" class="whatsapp-btn" target="_blank">💬 Chat on WhatsApp</a>
  </div>
  <div class="contact-form reveal" style="transition-delay:0.15s">
    <div class="form-title">Send Us a Message</div>
    <div class="form-row">
      <div class="form-group"><label>Your Name</label><input type="text" placeholder="Full name"></div>
      <div class="form-group"><label>Phone</label><input type="tel" placeholder="+91 XXXXX XXXXX"></div>
    </div>
    <div class="form-group"><label>Email Address</label><input type="email" placeholder="your@email.com"></div>
    <div class="form-group"><label>Service Required</label>
      <select><option value="">Select a service</option><option>3D Design</option><option>Construction Design</option><option>BIM Consulting</option><option>Elevation Design</option></select>
    </div>
    <div class="form-group"><label>Project Details</label><textarea placeholder="Tell us about your project…"></textarea></div>
    <button class="btn-submit" onclick="handleSubmit(event)">Send Message →</button>
  </div>
</section>

<footer>
  <div class="footer-grid">
    <div class="footer-brand">
      <a href="#hero" class="logo"><div class="logo-icon">BIM</div><div class="logo-text"><span>MCloud</span><span>BIM Consultant</span></div></a>
      <p class="footer-tagline">Professional BIM services for residential and commercial projects. Building the future with precision and innovation.</p>
      <div class="footer-social">
        <a href="https://wa.me/919884863422" class="social-btn" title="WhatsApp">💬</a>
        <a href="#" class="social-btn" title="Instagram">📸</a>
        <a href="#" class="social-btn" title="YouTube">▶</a>
      </div>
    </div>
    <div class="footer-col"><h4>Services</h4>
      <ul class="footer-links">
        <li><a href="service-3d-design.html">3D Design</a></li>
        <li><a href="service-construction.html">Construction Design</a></li>
        <li><a href="service-consulting.html">BIM Consulting</a></li>
        <li><a href="#services">Elevation Design</a></li>
      </ul>
    </div>
    <div class="footer-col"><h4>Navigation</h4>
      <ul class="footer-links">
        <li><a href="#hero">Home</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <div class="footer-col"><h4>Contact</h4>
      <div class="footer-contact-item"><span>📍</span><span>Olaiyur, Trichy – 620021, Tamil Nadu</span></div>
      <div class="footer-contact-item"><span>📞</span><span>+0431 2300375</span></div>
      <div class="footer-contact-item"><span>📞</span><span>+91 93637 63422</span></div>
      <div class="footer-contact-item"><span>🌐</span><span>mcloudbim.com</span></div>
    </div>
  </div>
  <div class="footer-bottom">
    <p>© 2025 <span>MCloud BIM Consultant</span>. All rights reserved.</p>
    <p>Designed with <span>♦</span> in Trichy, Tamil Nadu</p>
  </div>
</footer>

Batal

⬅ Naik ke public_html 9 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁.well-known	dir	—	2026-03-28 07:48	📂 Buka
📁Mcloud	dir	—	2026-03-12 11:36	📂 Buka
📁cgi-bin	dir	—	2026-03-28 07:47	📂 Buka
📁images	dir	—	2026-03-14 08:10	📂 Buka
📁shop	dir	—	2026-07-17 08:07	📂 Buka
🌐index.html	html	36.9 KB	2026-03-14 08:21	✏️ Edit 👁️ View
🌐service-3d-design.html	html	28 KB	2026-03-11 10:02	✏️ Edit 👁️ View
🌐service-construction.html	html	29.1 KB	2026-03-11 10:02	✏️ Edit 👁️ View
🌐service-consulting.html	html	31.3 KB	2026-03-11 10:03	✏️ Edit 👁️ View