:root {
  /* Dark Gradients */
  --gradient-dark: linear-gradient(135deg, hsl(0 0% 0%), hsl(0 0% 8%));
  --gradient-gold: linear-gradient(135deg, hsl(0, 0%,0%), hsl(52, 100%, 5%));
  --reverse-gradient-dark: linear-gradient(135deg, hsl(0 0% 0%), hsl(0 0% 8%));
  --gradient-overlay: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9));
  --gradient-hero: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.8));

  /* Luxury Shadows */
  --shadow-luxury: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  --shadow-elegant: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  --shadow-subtle: 0 4px 15px -3px rgba(0, 0, 0, 0.3);

  /* Luxury Colors */
  --gold-accent: #d4af37;
  --gold-shine: rgba(212, 175, 55, 0.3);
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ==========================
   responsive.css (merged)
   Appended responsive overrides from responsive.css so only Style.css is required.
   Keep this block at the end to ensure media queries and !important overrides take effect.
   ========================== */

/* responsive.css - Mobile-first, clean overrides for mobile/tablet/iPad
   This file intentionally loaded after Style.css to safely override
   the original rules without mutating them. It focuses on accessibility,
   consistent spacing, and a predictable breakpoint system.

   Rules:
   - Keep all images, fonts and assets unchanged.
   - Use a small set of overrides to normalize layout across small screens.
   - Breakpoints: mobile (default), tablet @768px, iPad/large-tablet @1024px.
*/



/* Reset / small normalizations */
html, body {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* Mobile first layout adjustments (default) */
@media (max-width: 1023px) {
  /* Mobile / tablet scoped overrides: these will NOT affect large screens */
  .container, .M-hero-sec, .M-about-sec, .services-sec, .properties-sec, .why-us-sec, .ceo-sec, .get-in-touch-sec {
    
    box-sizing: border-box;
  }
/* Navigation: stable, accessible mobile menu */
/* .M-navsec {
  padding-left: var(--site-padding-mobile) !important;
  padding-right: var(--site-padding-mobile) !important;
  height: 64px;
} */

  .nav-logo-part { width: auto; }
  .nav-menu-sec { width: auto; }

/* Ensure mobile toggle is visible and usable */
  .mobile-menu-toggle { display: flex !important; }
  .mobile-menu-overlay { top: 64px !important; }

/* Ensure hamburger sits at the right side on mobile & tablet */
@media (max-width: 1023px) {
  

  .nav-logo-part {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* .nav-menu-sec {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  } */

  /* Force the hamburger to the right edge inside nav */
  

  /* Hide desktop links on mobile/tablet (keeps overlay links) */
  .nav-menu { display: none !important; }
}

/* Hero: center logo and reduce large min-heights for mobile */
  .M-hero-sec {
    padding-left: var(--site-padding-mobile) !important;
    padding-right: var(--site-padding-mobile) !important;
    min-height: 60vh !important;
  }
  .M-logo-sec { height: auto; padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .M-logo-sec img { max-width: 85% !important; height: auto !important; }

/* About section: simple stacked flow */
  .about-content-sec { flex-direction: column !important; padding-left: 0 !important; padding-right: 0 !important; }
  .header-col { width: 100% !important; border-right: none !important; border-bottom: 1px solid rgba(250,20,20,0.12) !important; padding-bottom: 1rem; }
  
  .profile-btn { width: 70% !important; }

/* Services: stack prism facets and show core inline */
  .crystal-prism-container { display: flex !important; flex-direction: column !important; align-items: center !important;  ; height: auto !important; }
  /* .prism-facets { width: 100% !important; max-width: 720px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 0 0 !important; } */
  .facet { position: relative !important; width: 100% !important; height: auto !important; margin: 0 !important; transform: none !important; }
  .facet-content { padding: 1rem !important; text-align: center !important; }
  .facet-text h3, .facet-text p { text-align: center !important; justify-content: center !important; }
  /* .prism-core { position: relative !important; width: 72px !important; height: 72px !important; margin: 0 auto !important; } */

/* Properties and locations: stacked cards */
  .locations-wraper, .locations-wraper-2 { flex-direction: column !important; gap: 12px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .location-wraper, .location-wraper-big { width: 100% !important; height: 260px !important; border-radius: 12px !important; }
  .location-over { padding: 4% !important; }
  .location-header { font-size: 1.25rem !important; }

/* Why Us (timeline): simple vertical list */
  .central-showcase { flex-direction: column !important; padding: 0 !important; gap: 12px !important; }
  .left-reasons, .right-reasons, .timeline-container { width: 100% !important; position: relative !important; }
  .timeline-line-vertical, .timeline-markers { display: none !important; }
  .reason-card { position: relative !important; width: 100% !important; height: auto !important; left: 0 !important; right: 0 !important; top: 0 !important; transform: none !important; padding: 1rem !important; margin-bottom: 8px !important; }

/* Partners: make logos responsive */
  .part-img-wraper { width: 33.333% !important; }
  .part-img-wraper img { width: 70% !important; height: auto !important; }

/* CEO card: single column */
  .card-content { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .image-container { width: 10rem !important; height: 10rem !important; margin: 0 auto 0.5rem auto !important; }
  .message-content { padding-left: 0 !important; }

/* Contact section: stacked */
  .get-sec-wraper { flex-direction: column !important; gap: 1rem !important; }
  .get-l, .get-r { width: 100% !important; }
  .get-ending-wraper { width: 90% !important; margin-left: 5% !important; }
  .get-contact-info, .get-work-hours { width: 90% !important; margin-left: 5% !important; }

/* Footer: single column */
  .footer-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  /* .social-icons { justify-content: center !important; } */

/* Accessibility improvements */
  .nav-link,  .nav-link { font-size: 1rem !important; padding: 0.6rem 0.2rem !important; }
  .nav-link { letter-spacing: 0.4px !important; }

} /* end @media (max-width:1023px) */

/* ------------------------------------------------------------------ */
/* Tablet breakpoint - up to iPad portrait (768px) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --site-padding-mobile: 24px; }
  .container { max-width: var(--max-content-width); margin: 0 auto; }

  .M-hero-sec { min-height: 75vh !important; padding-left: var(--site-padding-tablet) !important; padding-right: var(--site-padding-tablet) !important; }
  .M-logo-sec img { max-width: 60% !important; }

  /* About: two-column stacked with reduced heights */
  .about-content-sec { flex-direction: column !important; gap: 1.25rem !important; }
  .two-inside { flex-direction: column !important; }
  
   

  /* Services: show facets in two columns if space allows */
  /* .prism-facets { max-width: 1000px !important; display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; } */
  .facet { width: 100% !important; }

  /* Locations: side-by-side where possible */
  .locations-wraper, .locations-wraper-2 { flex-direction: row !important; gap: 12px !important; }
  .location-wraper { width: 49% !important; height: 320px !important; }

  /* Why us: two column flow with timeline removed */
  .central-showcase { flex-direction: row !important; gap: 12px !important; align-items: flex-start !important; }
  .left-reasons, .right-reasons { width: 45% !important; }
  .timeline-container { display: none !important; }

  .part-img-wraper { width: 12% !important; }

  .card-content { grid-template-columns: 1fr 1.5fr !important; }
  .image-container { width: 12rem !important; height: 12rem !important; }
}

/* Note: removed global desktop-level overrides so large-screen styles from
   `Style.css` remain authoritative. Tablet and iPad rules are handled in
   the iPad-specific block below that targets 768px–1023px. */

/* Final: small tweak to ensure overlay menu doesn't block footer on mobile */


/* ------------------------------------------------------------------ */
/* iPad-specific fixes (target common iPad widths to override large fixed heights
   and absolute positioning coming from the original Style.css). This block
   neutralizes problematic rules between tablet and desktop so the layout
   remains clean and predictable on iPad portrait and landscape. */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Turn off large sectional fixed heights */
  .services-sec, .services-relay, .properties-sec, .why-us-sec, .ceo-sec, .M-about-sec {
    height: auto !important;
    min-height: 0 !important;
  
  }

  /* Prism/facet: force a predictable grid and disable absolute transforms */
  .prism-facets {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* gap: 18px !important; */
    width: 100% !important;
    height: auto !important;
    align-items: start !important;
    margin: 0 auto !important;
    padding: 0 !important;
    
  }

  .facet,
  .facet-1, .facet-2, .facet-3, .facet-4, .facet-5, .facet-6 {
    position: relative !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
  }

  /* Make the prism core small and centered within the grid flow */
  .prism-core {
    position: relative !important;
    /* width: 72px !important;
    height: 72px !important; */
    /* margin: 0 auto 0.5rem auto !important; */
    inset: auto !important;
  }

  .prism-shadows { display: none !important; }

  /* Why-us timeline: use stacked cards instead of positioned timeline */
  .timeline-line-vertical, .timeline-markers { display: none !important; }
  .central-showcase { display: flex !important; flex-direction: column !important; gap: 16px !important; }
  .left-reasons, .right-reasons, .timeline-container { width: 100% !important; position: relative !important; }
  .reason-card { position: relative !important; width: 100% !important; transform: none !important; margin-bottom: 12px !important; }

  /* Location cards: reduce height and let background images cover */
  .location-wraper, .location-wraper-big { height: 300px !important; border-radius: 12px !important; }
  .location-over { padding: 4% !important; }

  /* Partners: fit logos in a row but allow wrapping */
  .M-parteners-wraper { height: auto !important; padding: 1rem 0 !important; }
  .partners-slide { width: 100% !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; animation: none !important; }
  .part-img-wraper { width: 22% !important; height: auto !important; }

  /* CEO card: keep single-column but increase spacing for tablet */
  .card-content { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  .image-container { width: 12rem !important; height: 12rem !important; }

  /* Ensure footer and contact sections do not get hidden */
  .footer-sec, .get-in-touch-sec { min-height: 0 !important; height: auto !important; }

  /* Minor nav polish for iPad */
  /* .M-navsec { height: 72px !important; padding-left: 24px !important; padding-right: 24px !important; } */

  /* Ensure hero background covers full area on iPad (avoid black bands) */
  .M-hero-sec {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    min-height: 70vh !important;
  }
}

/* End of responsive.css */

/* ------------------------------------------------------------------ */
/* Desktop footer restore -- ensure the footer uses the original
   desktop styles from Style.css when viewport >= 1024px. This
   compensates for the override stylesheet loading after Style.css. */
@media (min-width: 1024px) {
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    margin-bottom: 2rem !important;
  }

  .social-icons {
    display: flex !important;
    width: 70% !important;
    box-sizing: border-box !important;
    height: auto !important; /* allow natural height */
    margin-top: 5% !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  
  .social-icon-link {
    display: flex !important;
    opacity: 0.6 !important;
    justify-content: center !important;
    align-items: center !important;
    width: 10% !important;
    margin-right: 5% !important;
    
  }
  .social-icon-instagram{
    display: flex !important;
    opacity: 0.6 !important;
    justify-content: center !important;
    align-items: center !important;
    width: 12% !important;
    margin-right: 5% !important;
  }

  .social-icon-ins {
    display: flex !important;
    opacity: 0.6 !important;
    justify-content: center !important;
    align-items: center !important;
    width: 12% !important;
    margin-right: 5% !important;
  }

  .links-section, .contact-section {
    display: flex !important;
    flex-direction: column !important;
  }

  .links-list {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0 !important;
    margin-top: 2px !important;
  }

  .footer-link {
    position: relative !important;
    color: #a0a0a0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: inline-block !important;
  }

  .footer-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background-color: rgba(255, 247, 198,0.95) !important;
    transition: width 0.4s ease !important;
  }

  .footer-link:hover {
    text-decoration: none !important;
    color: rgba(255, 247, 198,0.95) !important;
  }

  .footer-link:hover::after {
    width: 100% !important;
  }
}

/* Desktop: 3-column footer layout and responsive sizes */
@media (min-width: 1024px) {
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; /* three sections side-by-side */
    gap: 2rem !important;
    align-items: start !important;
  }

  /* Responsive font sizing for footer headings and text */
  .section-title {
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem) !important;
  }

  .company-name {
    font-size: clamp(1.25rem, 1.2rem + 0.6vw, 1.75rem) !important;
  }

  .company-description, .contact-info, .links-list, .footer-bottom {
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1rem) !important;
    color: #a0a0a0 !important;
  }

  /* Social icons scale responsively and align left within the first column */
  .social-icons {
    display: flex !important;
    gap: 1rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  /* .social-icon-link img, .social-icon-ins img {
    width: clamp(28px, 1.5vw + 12px, 48px) !important;
    height: auto !important;
    display: block !important;
    opacity: 0.9 !important;
  } */

  /* Quick links column: left align and comfortable spacing */
  .links-section { padding-left: 0 !important; }
  .links-list { gap: 0.5rem !important; }
  .footer-link { color: #a0a0a0 !important; }

  /* Contact column sizing */
  .contact-section { padding-left: 0 !important; }

  /* Reduce footer padding a bit on very wide screens */
}


html {
  scroll-behavior: smooth;
}

.bg-gradient-dark {
  background: var(--gradient-dark);
}

.bg-reverse-gradient-dark {
  background: var(--reverse-gradient-dark);
}

.bg-gradient-gold {
  background: var(--gradient-gold);
}

.bg-gradient-overlay {
  background: var(--gradient-overlay);
}

.bg-gradient-hero {
  background: var(--gradient-hero);
}

.shadow-luxury {
  box-shadow: var(--shadow-luxury);
}

.font-white {
  font-family: "Raleway", sans-serif;
  color: rgba(255,255,255,1);
}

.M-font {
  font-family: "Raleway", sans-serif;
  /* font-family: 'Hatton', serif; */

}

.zero-m-p {
  margin: 0;
  padding: 0;
}

.flex-col-center {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.text-up {
  text-transform: uppercase;
}

.top-margin-s {
  margin-top: 10px;
}

/* font */
@font-face {
  font-family: 'Hatton';
  src: url('font/Hatton-Bold-700.otf') format('opentype');
       
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Hatton';
  src:  url('font/Hatton-Medium-500.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Hatton';
  src:  url('font/Hatton-Ultralight-200.otf') format('opentype'); 
  font-weight: 200;
  font-style: normal;
}


/* Hero Section */

.M-hero-sec {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  padding-left: 8%;
  padding-right: 8%;
  background-color: #000;
  background-image: url('imgs/Newcapitall.jpg');
  background-size: cover;
  background-position: -10%;
  background-repeat: no-repeat;
  animation: kenburns 15s ease-in-out infinite alternate;
  box-sizing: border-box;
}

.M-hero-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.5)
  );
}

.M-hero-sec::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.5)
  );
}

.gold {
  color: hsl(0, 0%, 60%);
  opacity: 0.8;
}

/* Navigation */

.M-navsec {
  display: flex;
  position: fixed;
  width: 100%;
  padding-left: 8%;
  padding-right: 8%;
  height: 67px;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  align-items: center;
  box-sizing: border-box;
  background: transparent;
  transition: background 0.3s ease;
}

  .M-navsec.scrolled {
    background: #000;
  }

.nav-logo-part {
  width: 30%;
  display: flex;
}

.nav-logo-text {
  color: rgba(255, 247, 198,0.6);
  font-family: "Raleway", sans-serif;
  font-size: 20px;
  font-weight: 600;
  padding: 0;
  margin: 0;
}

.nav-menu-sec {
  display: flex;
  justify-content: flex-end;
  width: 70%;
  height: 100%;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav-menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: flex;
  position: relative;
  margin-left: 7%;
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: capitalize;
  color: rgba(255, 247, 198,0.6);
  letter-spacing: 1px;
  opacity: 0.8;
  transition: color 0.2s ease;
  text-transform: uppercase;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgba(255, 247, 198,0.95);
  transition: width 0.3s ease;
}

.nav-link:hover {
  text-decoration: none;
  color: rgba(255, 247, 198,0.95);
}

.nav-link:hover::after {
  width: 100%;
}

/* Mobile Menu Toggle Button */


@media (max-width: 1024px) {
  /* .nav-menu-sec {
    justify-content: flex-end;
    align-items: center;
  }

  .nav-menu-sec nav {
    display: flex;
    align-items: center;
  } */

  .nav-menu { /* Hide desktop menu to use mobile overlay */
    display: none;
  }

 


}





.footer-sec,
.footer-grid,
.footer-bottom {
  position: relative;
  z-index: 20;
}

.M-hero-text-sec {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 85vh;
  padding-top: 6%;
  z-index: 50;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.M-logo-sec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 80%;

}
.hero-sec-h{
  font-family: hatton, serif;
  font-weight: 300;
  font-size: 1rem;
  color: rgba(255, 247, 198,0.95);
  letter-spacing: 20px;
  margin: 0;
  padding: 0;
}
.hero-sec-p{
  font-family: hatton, serif;
  font-weight: 200;
  font-size: 1.5rem;
  color: rgba(255, 247, 198,0.5);
  letter-spacing: 5px;
  margin: 0;
  padding: 0;
}
.hero-img-margin{
  margin-right: 2.5%;
  margin-bottom: 1.5%;
}
.hero-img-margin{
  margin-right: 2.5%;
  margin-bottom: 1.5%;
}

.M-logo-sec img {
  width: auto;
  height: auto;
  max-width: 75%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .M-logo-sec img {
    width: clamp(420px, 60vw, 1200px);

    max-width: none;
  }
}

@media (max-width: 1366px) {
  .M-logo-sec img {
    width: clamp(520px, 54vw, 1300px);
  }
}

@media (max-width: 1600px) {
  .M-logo-sec img {
    width: clamp(600px, 50vw, 1400px);
  }
}

@media (max-width: 1920px) {
  .M-logo-sec img {
    width: clamp(680px, 46vw, 1500px);
  }
}
  

.hero-sec-text-sec {
/* Nav background on scroll */
.M-navsec.scrolled {
  background: #000;
}
  display: flex;
  width: 100%;
  height: 60%;
  box-sizing: border-box;
  z-index: 30;
}

.hero-text {
  padding-top: 10%;
  font-family: "Raleway", sans-serif;
  color: rgba(255,255,255,1);
  font-size: 50px;
  font-weight: 500;
  text-transform: uppercase;
}

/* About Section */

.M-about-sec {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 112vh;
  padding-top: 4%;
  box-sizing: border-box;
}

.M-about-sec div > h1 {
  font-size: 60px;
  font-weight: 500;
}

.M-about-sec div > h2 {
  font-weight: 400;
  font-size: 24px;
  text-transform: uppercase;
  color: rgba(255, 247, 198,0.95);
}
.about-box-mob{
  display: none;
}

.M-about-sec div > h3 {
  font-size: 16px;
  text-transform: uppercase;
  color: rgba(255, 247, 198,0.5);
}

.about-content-sec {
  display: flex;
  width: 100%;
  height: 63%;
  box-sizing: border-box;
  padding-left: 8%;
  padding-right: 8%;
}
.about-box-ipad{
  display: none;
}

.two-inside {
  display: flex;
  width: 100%;
  height: 100%;
}

.header-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 30%;
  height: 100%;
  border-right: 1px solid rgba(250, 20, 20, 0.2);
}

.header-col p {
  color: rgba(255,255,255,1);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15%;
}

.about-para-sec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 5%;
}

.about-para {
  font-size: 14px;
  font-weight: 300;
  text-transform: capitalize;
  color: hsl(0 0% 60%);
  opacity: 0.8;
}
.about-box-update{
  display: none;
}

.about-box-cont {
  justify-content: center;
}

.padding-l-r {
  padding-left: 10%;
}

.flex-col {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.about-small-box-cont {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  width: 100%;
  height: 35%;
  margin: 8px;
}

.about-small-box {
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(153, 153, 153,0.4);
  border-radius: 6%;
  width: 41%;
  box-sizing: border-box;
  margin-right: 15px;
}

.small-box-head {
  display: flex;
  justify-content: center;
  color: rgba(255, 247, 198,0.95);
  font-size: 30px;
}

.small-box-underline {
  display: flex;
  justify-content: center;
  color: hsl(0, 0%, 60%);
  opacity: 0.8;
  font-size: 16px;
  font-weight: 400;
}

.profile-sec {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 13%;
  align-items: center;
  box-sizing: border-box;
}

.profile-btn {
  display: flex;
  width: 16%;
  border: 1px solid rgba(255, 247, 198,0.4);
  opacity: 0.8;
  padding: 1% 3%;
  font-weight: 300;
  justify-content: center;
  background-color: rgba(0,0,0,0.9);
  text-decoration: none;
  border-radius: 5px;
  box-sizing: border-box;
  color: rgba(255, 247, 198,0.95);
  transition: 0.2s ease-in-out;
}

.profile-btn:hover {
  text-decoration: none;
  color: rgba(255, 247, 198,0.6);
  border: 1px solid rgba(255, 247, 198,0.6);
}

/* Company Profile Modal */
.company-profile-modal {
  background: var(--gradient-gold);
  box-shadow: var(--shadow-luxury);
}

.company-profile-header {
  height: 40vh;
  position: relative;
  background-position: center;
  background-size: cover;
}

.company-profile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.company-profile-logo {
  width: 150px;
  margin-bottom: 1rem;
}

.company-profile-logo img {
  width: 100%;
}

.company-profile-title {
  font-family: hatton;
  color: rgba(255, 247, 198, 0.95);
  font-size: 5rem;
  font-weight: 200;
  margin: 0;
  text-align: center;
  letter-spacing: 5px;
}

.company-profile-subtitle {
  font-family: hatton;
  color: rgba(255, 247, 198, 0.6);
  font-size: 1.5rem;
  font-weight: 200;
  margin: 0;
  text-align: center;
  letter-spacing: 5px;
}

.company-profile-content {
  min-height: 60vh;
}

.company-profile-tabs {
  border-bottom: 1px solid rgba(255, 247, 198, 0.3);
  margin-bottom: 2rem;
}

.company-profile-tabs > li > a {
  color: rgba(255, 247, 198, 0.6);
  font-size: 1.2rem;
  font-weight: 200;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease;
}

.company-profile-tabs > li > a:hover {
  color: rgba(255, 247, 198, 0.95);
  border-color: rgba(255, 247, 198, 0.4);
}

.company-profile-tabs > .uk-active > a {
  color: rgba(255, 247, 198, 0.95);
  border-color: rgba(255, 247, 198, 0.95);
}

.company-profile-section {
  padding: 1rem 0;
}

.profile-section-heading {
  color: rgba(255, 247, 198, 0.95);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1rem;
  letter-spacing: 5px;
}

.section-divider {
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, rgba(255, 247, 198, 0.2), rgba(255, 247, 198, 0.8), rgba(255, 247, 198, 0.2));
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.section-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 247, 198, 0.8), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.section-text {
  color: hsl(0, 0%, 60%);
  opacity: 0.8;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* Vision Tab Styles */
.vision-highlights {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
}

.vision-highlight-item {
  width: 30%;
  text-align: center;
  padding: 1.5rem;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(153, 153, 153, 0.4);
  border-radius: 10px;
}

.highlight-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(255, 247, 198, 0.95);
  margin-bottom: 1rem;
}

.highlight-text {
  color: hsl(0, 0%, 60%);
  opacity: 0.8;
  font-size: 1.1rem;
}

/* Mission Tab Styles */
.mission-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.mission-pillar {
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(153, 153, 153, 0.4);
  border-radius: 10px;
  padding: 1.5rem;
}

.pillar-title {
  color: rgba(255, 247, 198, 0.95);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.pillar-text {
  color: hsl(0, 0%, 60%);
  opacity: 0.8;
  font-size: 1rem;
  line-height: 1.6;
}

/* Solutions Tab Styles */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.solution-card {
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(153, 153, 153, 0.4);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}

.solution-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 247, 198, 0.05) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.solution-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 247, 198, 0.6);
  box-shadow: var(--shadow-elegant);
}

.solution-card:hover::before {
  opacity: 1;
}

.solution-icon {
  color: rgba(255, 247, 198, 0.8);
  margin-bottom: 1rem;
}

.solution-title {
  color: rgba(255, 247, 198, 0.95);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.solution-text {
  color: hsl(0, 0%, 60%);
  opacity: 0.8;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Close Button Styling */
.uk-modal-close-full {
  background-color: rgba(0, 0, 0, 0.7);
  color: rgba(255, 247, 198, 0.8);
  border-radius: 50%;
  margin: 20px;
  transition: all 0.3s ease;
}

.uk-modal-close-full:hover {
  background-color: rgba(0, 0, 0, 0.9);
  color: rgba(255, 247, 198, 0.95);
  transform: rotate(90deg);
}







/* Responsive Adjustments */
@media (max-width: 960px) {
  .vision-highlights {
    flex-direction: column;
    gap: 1rem;
  }
  
  .vision-highlight-item {
    width: 100%;
    margin-bottom: 1rem;
  }
  
  .mission-pillars {
    grid-template-columns: 1fr;
  }
  
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .company-profile-title {
    font-size: 2rem;
  }
  
  .company-profile-subtitle {
    font-size: 1rem;
  }
  
  .solutions-grid {
    grid-template-columns: 1fr;
  }
  
  .company-profile-tabs > li > a {
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
  }
}

/* Services Section */

.m-m-section{
  display: flex;
  width: 100%;
  height: 100%;
  
  justify-content: flex-end;
}
.m-m-icon{
  display: flex;width: 15%;
  height: 100%;
  
}


.m-services-wrap{
            display: flex;
            position: relative;
            width: 100%;
            height: 120vh;
            box-sizing: border-box;
            background-image: url(imgs/map.jpg);
            background-size: 100% 100%;
            background-position: center;
        }
        .m-services-black{
            display: flex;
            position: relative;
            flex-direction: column;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.7)40%), linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.7)50%);
        }
        .m-services-header-wrap{
            display: flex;
            position: relative;
            flex-direction: column;
            width: 100%;
            height: 15%;
            
            justify-content: center;
            align-items: center;
        }
        .m-sec-header{
            font-family: 'Raleway', sans-serif;
            font-weight: 400;
            font-size: 1.50rem;
            color: rgba(255, 247, 198,0.9);
            letter-spacing: 2px;
        }
        .m-sec-subheader{
            font-family: 'Raleway', sans-serif;
            font-weight: 200;
            font-size: 1rem;
            color: rgba(255, 247, 198,0.9);
            opacity: 0.7;
            text-transform: uppercase;
        }
        .m-services-cards{
            display: flex;
            position: relative;
            width: 100%;
            height: 85%; 
        }
        .m-l-services{
            display: flex;
            flex-direction: column;
            width: 37%;
            height: 100%;
            justify-content: space-between;
            align-items: center;
            padding: 1% 2% 1% 5%;
        }
        .m-services-core{
            display: flex;
            position: relative; 
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 25%;
            height: 100%;
            
        }
        .m-service-core-mo{
            display: none;
        }
        .m-r-services{
            display: flex;
            flex-direction: column;
            width: 37%;
            height: 100%;
            justify-content: space-between;
            align-items: center;
            padding: 1% 5% 1% 2%;
        }
        .m-service-card{
            display: flex;
            flex-direction: column;
            width: 90%;
            height: 30%;
            border: 1px solid hsla(0, 0%, 60%,0.3);
            border-radius: 10px;
            padding: 4% 5%;
            box-sizing: border-box;
            backdrop-filter: blur(20px);
            transform-style: preserve-3d;
            transition: all 0.4s ease;
            box-shadow: 0px 4px 10px hsla(0, 0%, 60%, 0.2);
        }
        .m-service-num{
            font-family: 'Raleway', sans-serif;
            font-weight: 600;
            font-size: 2rem;
            color: rgba(255, 247, 198,0.95);
        }
        .m-service-header{
            font-family: 'Raleway', sans-serif;
            font-weight: 400;
            font-size: 1.3rem;
            color: rgba(255, 247, 198,0.9);
            margin-top: 2%;
            margin-bottom: 4%;
        }
        .m-service-subheader{
            font-family: 'Raleway', sans-serif;
            font-weight: 400;
            font-size: 0.9rem;
            color: hsl(0, 0%, 60%);
            opacity: 0.8;
        }
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(212, 175, 55, 1) 0%, transparent 30%, transparent 70%, rgba(212, 175, 55, 0.1) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .m-core{
            position: absolute;
            width: 7.5vw;
            height: 7.5vw;
            background: linear-gradient(145deg, hsla(0, 0%, 60%, 0.4), hsla(0, 0%, 60%, 0.3));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 20px hsla(0, 0%, 60%, 0.4), 0 0 40px hsla(0, 0%, 60%, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.2);
            z-index: 10;
            animation: corePulse 3s ease-in-out infinite;
        }
        .m-core-glow {
            position: absolute;
            width: 25%;
            height: 25%;
            background: radial-gradient(circle, hsla(0, 0%, 60%, 0.6), transparent 50%);
            border-radius: 50%;
            animation: glowExpand 2s ease-in-out infinite alternate;
        }
        .m-core-reflection {
            position: absolute;
            width: 50%;
            height: 50%;
            top: 25%;
            left: 25%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "Raleway", sans-serif;
            font-weight: bold;
            font-size: 3em;
            color: rgba(212, 175, 55, 0.3);
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
            animation: reflectionRotate 20s linear infinite;
        }
        .m-core-reflection::before {
            content: "M";
            font-family: 'Raleway', sans-serif;
            font-size: 2.8rem;
            font-weight: 600;
        }

        @keyframes corePulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 30px hsla(0, 0%, 60%, 0.4), 0 0 60px hsla(0, 0%, 60%, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.2);
            }

            50% {
                transform: scale(1.05);
                box-shadow: 0 0 45px hsla(0, 0%, 60%, 0.6), 0 0 90px hsla(0, 0%, 60%, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.3);
            }
        }

        @keyframes reflectionRotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }        
        }
        @keyframes glowExpand {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }

            100% {
                transform: scale(1.2);
                opacity: 0.6;
            }
        }
























.mobile-menu-sec{
  display: none;
}
.-mob-menu-section{
  display: none;
}

/* CEO SECTION */

.ceo-section {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.95) 50%, rgba(0, 0, 0, 0.92) 100%);
}

.container {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.content-wrapper {
  max-width: 1152px;
  margin: 0 auto;
}

/* Section Header */

.section-header {
  text-align: center;
  font-weight: 400;
  margin-bottom: 4rem;
}

.ceo-section-title {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 2rem;
  color: rgba(255, 247, 198,0.95);
}

.title-accent {
  color: rgba(255, 247, 198,0.6);
}

/* CEO Card */

.ceo-card {
  background: rgba(59, 76, 103, 0.5);
  border: 1px solid rgba(255, 247, 198,0.4);
  border-radius: 0.5rem;
  padding: 3rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

.ceo-card:hover {
  box-shadow: 0 0 40px rgba(200, 0, 0, 0.3);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(200, 0, 0, 0.1) 0%, transparent 50%, rgba(200, 0, 0, 0.1) 100%);
}

.card-content {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: center;
}

/* CEO Image Section */

.ceo-image-section {
  text-align: center;
}

.image-container {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
  width: 17rem;
  height: 17rem;
}

.image-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(200, 0, 0, 0.3) 0%, rgba(248, 250, 252, 0.3) 100%);
  border-radius: 50%;
  filter: blur(2rem);
}

.ceo-image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(248, 250, 252, 0.2);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  transition: transform 0.5s ease;
}

.ceo-more{
  display: none;
}

.ceo-image:hover {
  transform: scale(1.05);
}

.ceo-info h3 {
  font-size: 1.875rem;
  font-weight: 400;
  color: #f8fafc;
  margin-bottom: 0.5rem;
}

.ceo-title {
  color: rgba(250, 20, 20, 0.3);
  font-weight: 400;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.ceo-subtitle {
  color: #9ca3af;
}

/* CEO Message Section */

.message-container {
  position: relative;
}

.quote-open,
.quote-close {
  font-size: 4rem;
  color: rgba(248, 250, 252, 0.2);
  font-family: serif;
  position: absolute;
}

.quote-open {
  top: -1rem;
  left: -0.5rem;
}

.quote-close {
  bottom: -1rem;
  right: 0;
}

.message-content {
  padding-left: 2rem;
}

.message-highlight {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #9ca3af;
  margin-bottom: 2rem;
  font-style: italic;
}

.message-text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #9ca3af;
  margin-bottom: 2rem;
}

.signature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* .signature-name {
  font-size: 2.5rem;
  font-weight: 100;
  color: #f8fafc;
  font-family: "Allura", cursive;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 3px;
  text-transform: lowercase;
} */

.signature-title {
  color: rgba(250, 20, 20, 0.3);
  font-family: "Allura", cursive;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 1px;
  margin-top: 0.2rem;
  font-size: 1.5rem;
}

/* Action Section */

.action-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #475569;
  text-align: center;
}

.action-text {
  color: #9ca3af;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 1rem;
  padding: 1rem 2rem;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background-color: #ec4899;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #f8fafc;
  color: #0f172a;
}

.btn-outline {
  background-color: transparent;
  color: #f8fafc;
  border: 1px solid #f8fafc;
}

.btn-outline:hover {
  background-color: #f8fafc;
  color: #0f172a;
}

/* Responsive Design */

@media (max-width: 1024px) {
  .ceo-image {
    width: 16rem;
    height: 16rem;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2.5rem;
  }

  .card-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ceo-card {
    padding: 2rem;
  }

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

  .message-highlight {
    font-size: 1.125rem;
  }

  .message-text {
    font-size: 1rem;
  }
}

@media (max-width: 640px) {
  .section-title {
    font-size: 2rem;
  }

  .ceo-image {
    width: 12rem;
    height: 12rem;
  }

  .ceo-card {
    padding: 1.5rem;
  }

  .message-content {
    padding-left: 1rem;
  }

  .quote-open,
  .quote-close {
    font-size: 3rem;
  }
  .serv-num{
    font-size: 0.85rem;
  }
}



/* Responsive Design for Crystal Prism */

@media (max-width: 1024px) {
  .prism-facets {
    width: 100%;
    height: 550px;
  }

  .facet {
    width: 380px;
    height: 200px;
    /* margin: -100px 0 45px -190px; */
  }

  .facet-1 {
    transform: translateX(-430px) translateY(-220px);
    margin-bottom: 80px;
  }

  .facet-2 {
    transform: translateX(-430px) translateY(-20px);
    margin-bottom: 80px;
  }

  .facet-3 {
    transform: translateX(-430px) translateY(180px);
  }

  .facet-4 {
    transform: translateX(430px) translateY(-220px);
    margin-bottom: 80px;
  }

  .facet-5 {
    transform: translateX(430px) translateY(-20px);
    margin-bottom: 80px;
  }

  .facet-6 {
    transform: translateX(430px) translateY(180px);
  }
}

@media (max-width: 768px) {
  
 

  .crystal-prism-container {
    height: 95%;
  }

  .prism-facets {
    width: 100%;
    height: 550px;
  }

  .facet {
    width: 320px;
    height: 200px;
    /* margin: -100px 0 35px -160px; */
  }

  .facet-1 {
    transform: translateX(-380px) translateY(-200px);
    margin-bottom: 70px;
  }

  .facet-2 {
    transform: translateX(-380px) translateY(-30px);
    margin-bottom: 70px;
  }

  .facet-3 {
    transform: translateX(-380px) translateY(140px);
  }

  .facet-4 {
    transform: translateX(380px) translateY(-200px);
    margin-bottom: 70px;
  }

  .facet-5 {
    transform: translateX(380px) translateY(-30px);
    margin-bottom: 70px;
  }

  .facet-6 {
    transform: translateX(380px) translateY(140px);
  }

  .facet-content {
    padding: 25px;
  }

  .facet-icon {
    width: 70px;
    height: 50px;
  }

  .facet-icon img {
    width: 35px;
    height: 35px;
  }

  .facet-text h3 {
    font-size: 20px;
  }

  .facet-text p {
    font-size: 15px;
  }

  .prism-core {
    width: 90px;
    height: 90px;
  }
  .serv-num{
    font-size: 0.85rem;
  }
}

/* Animation Keyframes */

@keyframes corePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 30px hsla(0, 0%, 60%, 0.4), 0 0 60px hsla(0, 0%, 60%, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.2);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 45px hsla(0, 0%, 60%, 0.6), 0 0 90px hsla(0, 0%, 60%, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.3);
  }
}

@keyframes glowExpand {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

@keyframes reflectionRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes facetGlow {
  0% {
    opacity: 0;
    box-shadow: 0 0 20px hsla(0, 0%, 60%, 0.2);
  }

  100% {
    opacity: 1;
    box-shadow: 0 0 20px hsla(0, 0%, 60%, 0.3);
  }
}

/* Properties Section */

.properties-sec {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 230vh;
  background-color: rgba(0, 0, 0, 1);
  box-sizing: border-box;
}

.propeties-text-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 10%;
}

.Properties-header {
  color: rgba(255, 247, 198,0.95);
  font-size: 24px;
  font-weight: 400;
}

.Properties-para {
  color: rgba(255, 247, 198,0.6);
  opacity: 0.8;
  font-size: 16px;
  margin-top: 5px;
  text-transform: uppercase;
}

.locations-wraper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 33%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  box-sizing: border-box;
}
.locations-wraper-2{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 25%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  box-sizing: border-box;
}

.location-wraper {
  display: flex;
  width: 49%;
  height: 95%;
  border-radius: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

.location-wraper:hover {
  transform: scale(1.02);
}
.location-wraper-big{
  display: flex;
  width: 100%;
  height: 95%;
  border-radius: 20px;
  position: relative;
}
.location-wraper-big::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.25)15%);
  z-index: 1;
}
#explor{
  background-image: url("imgs/Egypt-1.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#newcapital {
  background-image: url("imgs/nc-no-text.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#heliopolis {
  background-image: url("imgs/east/hyde2.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#guna {
  background-image: url("imgs/guna.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#downtown {
  background-image: url("imgs/west/west.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.location-wraper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.25)35%);
  z-index: 1;
}

.location-over {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 5% 6%;
  box-sizing: border-box;
  border-radius: 20px;
  z-index: 20;
}
.link-glry{
  color: rgba(255, 247, 198,0.95);
  font-size: 25px;
  align-self: center;
  height: 70%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
}

.location-header {
  font-size: 38px;
  font-weight: 600;
}

.location-para {
  font-size: 14px;
  margin-top: 10px;
}

.location-header, .location-para {
  color: rgba(255, 247, 198,1);
}

/* Team Section */

.why-us-sec {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200vh;
  justify-content: center;
  align-items: center;
  padding: 5% 10%;
  box-sizing: border-box;
}
#why-us-header-sec{
  margin-bottom: 5%;
}

.why-us-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-grow: 1;
}

.why-us-intro {
  text-align: center;
  margin-bottom: 5%;
}

.why-us-para {
  font-size: 1.2em;
  line-height: 1.6;
  color: rgba(255, 247, 198, 0.9);
}
.why-us-h2{
  color: rgba(255, 247, 198,0.95);
  font-size: 24px;
  font-weight: 400;
}
.why-us-h3{
  color: rgba(255, 247, 198,0.6);
  opacity: 0.8;
  font-size: 16px;
  margin-top: 5px;
  text-transform: uppercase;
}

.central-showcase {
  position: relative;
  width: 100%;
  height: 800px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 20px 0;
}

.left-reasons {
  width: 35%;
  position: relative;
  height: 100%;
}

.timeline-container {
  width: 30%;
  position: relative;
  height: 100%;
}

.right-reasons {
  width: 35%;
  position: relative;
  height: 100%;
}

.timeline-line-vertical {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: rgba(255, 247, 198, 0.4);
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.marker {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  background: rgba(255, 247, 198, 0.95);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(255, 247, 198, 0.95);
  animation: pulse 2s infinite;
}

.marker-1 { top: 10%; }
.marker-2 { top: 26%; }
.marker-3 { top: 42%; }
.marker-4 { top: 58%; }
.marker-5 { top: 74%; }
.marker-6 { top: 90%; }

.left-reasons .reason-card {
  position: absolute;
  left: 20%;
}

.right-reasons .reason-card {
  position: absolute;
  right: 20%;
}

.reason-card {
  position: absolute;
  width: 389px;
  height: 100px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 247, 198, 0.3);
  border-radius: 12px;
  padding: 60px 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  text-align: center;
  transition: all 0.4s ease;
  opacity: 0;
  animation: fadeInCard 1s ease forwards;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.reason-card:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 8px 16px rgba(255, 247, 198, 0.3), 0 6px 12px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 247, 198, 0.8);
}

.reason-title {
  font-size: 1.1em;
  margin-bottom: 8px;
}

.reason-desc {
  font-size: 0.90em;
  line-height: 1.4;
  color: hsl(0, 0%, 60%);
  opacity: 0.8;
}

.cursive-title {
  font-family: "Raleway", sans-serif;
  font-size: 1em;
  color: rgba(255, 247, 198, 0.95);
  margin-bottom: 8px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.M-parteners-wraper{
  width: 100%;
  height: 25%;
  overflow: hidden;
  margin-top: 10%;
}

.partners-slider {
  width: 100%;
  height: 100%;
}

.partners-slide {
  display: flex;
  width: 200%;
  animation: slideRight 20s linear infinite;
}
.part-img-wraper{
  display: flex;
  width: 10%;
  height: 100%;
  justify-content: center;
  align-items: center;
  opacity: 0.3;
  transition: all 0.2s ease;
}
.part-img-wraper:hover{
  opacity: 0.6;
}
.part-img-wraper img {
  width: 56%;
}

@keyframes slideRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Positioning the cards aligned with the timeline markers */
.reason-1 { top: calc(10% + 10px); animation-delay: 0.5s; }
.reason-2 { top: calc(26% + 10px); animation-delay: 1s; }
.reason-3 { top: calc(42% + 10px); animation-delay: 1.5s; }
.reason-4 { top: calc(58% + 10px); animation-delay: 2s; }
.reason-5 { top: calc(74% + 10px); animation-delay: 2.5s; }
.reason-6 { top: calc(90% + 10px); animation-delay: 3s; }

@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(-50%) scale(0.8); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.2); }
}

.why-us-cta {
  margin-top: 5%;
}

.cta-btn {
  background: rgba(200, 20, 20, 0.2);
  color: rgba(255, 247, 198, 0.95);
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1em;
  transition: background 0.3s ease;
}

.cta-btn:hover {
  background: rgba(200, 20, 20, 0.4);
}


/* CEO Section */

.ceo-sec {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 160vh;
  background-color: rgba(0, 0, 0, 1);
}

.ceo-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('imgs/Newcapitall.jpg');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.85));
  z-index: 2;
}

.ceo-section .container {
  position: relative;
  z-index: 3;
  max-width: 1400px;
  margin: 0 auto;
}

.content-wrapper {
  width: 100%;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.ceo-section-title {
  color: rgba(255, 247, 198, 0.95);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.ceo-card {
  position: relative;
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));
  border: 1px solid rgba(255, 247, 198, 0.2);
  border-radius: 20px;
  padding: 3rem;
  backdrop-filter: blur(10px);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.05), transparent);
  border-radius: 20px;
  pointer-events: none;
}

.card-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}

.ceo-image-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.image-container {
  position: relative;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 247, 198, 0.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.image-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2), transparent 70%);
  animation: rotate 10s linear infinite;
  pointer-events: none;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ceo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ceo-info {
  text-align: center;
}

.ceo-name {
  color: rgba(255, 247, 198, 0.95);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}

.ceo-title {
  color: rgba(255, 247, 198, 0.7);
  font-size: 1rem;
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
}

.ceo-subtitle {
  color: rgba(255, 247, 198, 0.5);
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.ceo-message-section {
  display: flex;
  flex-direction: column;
}

.message-container {
  position: relative;
}

.quote-open,
.quote-close {
  font-size: 4rem;
  color: rgba(212, 175, 55, 0.3);
  font-family: Georgia, serif;
  line-height: 1;
}

.quote-open {
  position: absolute;
  top: -1rem;
  left: -1rem;
}

.quote-close {
  position: absolute;
  bottom: -2rem;
  right: 0;
}

.message-content {
  padding: 1rem 2rem;
}

.message-highlight {
  color: rgba(255, 247, 198, 0.95);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.message-text {
  color: rgba(255, 247, 198, 0.7);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.signature {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 247, 198, 0.2);
}

.signature-name {
  color: #f8fafc;
  font-family: "Allura", cursive;
  font-optical-sizing: auto;
  font-style: normal;
  text-transform: lowercase;
  color: rgba(255, 247, 198, 0.95);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 0.25rem;
}

.signature-title {
  color: rgba(255, 247, 198, 0.6);
  font-size: 1.2rem;
  letter-spacing: 1px;
}
/* get in touch */
.get-in-touch-sec{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 120vh;
  padding-top: 3%;
  box-sizing: border-box;
}
.get-header-sec{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 12%;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
}
.get-section-title{
  color: rgba(255, 247, 198,0.95);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
}
.btitlget-section-sue{
  color: rgba(255, 247, 198,0.6);
  opacity: 0.8;
  font-size: 14px;
  margin-top: 10px;
  text-transform: uppercase;
}
.get-sec-wraper{
  display: flex;
  width: 100%;
  height: 80%;
  box-sizing: border-box;
   margin-top: 3%;
}
.get-l{
  display: flex;
  flex-direction: column;
  width: 50%;
}
.get-r{
  display: flex;
  flex-direction: column;
  width: 50%;
}
.get-contact-info{
  display: flex;
  flex-direction: column;
  width: 75%;
  height: 53%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 247, 198,0.2);
  border-radius: 10px;
  margin-left: 5%;
  padding: 3% 5%;
  background-color: rgba(0, 0, 0, 0.70);
}
.get-work-hours{
  display: flex;
  flex-direction: column;
  width: 75%;
  height: 28%;
  margin-left: 5%;
  margin-top: 5%;
  padding: 3% 5%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 247, 198,0.2);
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.70);
  padding-left: 5%;
}
.get-info-header{
  color: rgba(255, 247, 198,0.95);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 3px;
  margin-bottom: 35px;
}
.get-address{
  display: flex;
  width: 100%;
  height: 35%;
}
.get-phone{
  display: flex;
  width: 100%;
  height: 20%;
  
}
.get-email{
  display: flex;
  width: 100%;
  height: 20%;
  
}
.get-icon{
  display: flex;
  width: 10%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.get-icon img{
  width: 30%;
}
.get-info{
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 100%;
  
}
.get-info h1{
  color: rgba(255, 247, 198,0.95);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2px;
  padding-bottom: 10px;
}
.get-info p{
  color: rgba(255, 247, 198,0.4);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
}
.get-hours h1{
  color: rgba(255, 247, 198,0.4);
  font-weight: 400;
  font-size: 16px;
}
#get-margin-top{
  margin-top: 8PX;
}
.get-ending-wraper{
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.7);
  width: 70%;
  height: 86.5%;
  border: 1px solid rgba(255, 247, 198,0.2);
  border-radius: 10px;
  margin-left: 20%;
  padding: 3% 5%;
}
.get-ending-wraper h1{
  color: rgba(255, 247, 198,0.95);
  font-size: 30px;
  font-weight: 200;
  font-family: hatton;
  letter-spacing: 5px;
  text-transform: uppercase;
}
.get-ending-wraper h2{
  color: rgba(255, 247, 198,0.6);
  font-size: 20px;
  font-weight: 400;
  font-family: hatton;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.get-logo{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 50%;

}
.get-ending-wraper p{
  color: rgba(255, 247, 198,0.3);
}
.get-logo img{
  width: 75%;

}
/* Footer Section */

.footer-sec {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 3%;
  box-sizing: border-box;
  height: 55h;
  background-color: rgba(10, 10, 10, 1);
}

.footer {
  background-color: #0a0a0a;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding: 3rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 2rem;
}

.social-icons{
  display: flex;
  width: 70%;
  box-sizing: border-box;
  height: 30%;
  margin-top: 5%;
  justify-content: flex-start;
}
.social-icon-link{
  display: flex;
  opacity: 0.6;
  justify-content: center;
  align-items: center;
  width: 15%;
  margin-right: 5%;

}
.social-icon-instagram{
    display: flex !important;
    opacity: 0.6 !important;
    justify-content: center !important;
    align-items: center !important;
    width: 12% !important;
    margin-right: 5% !important;
  }

.social-icon-ins{
  display: flex;
  opacity: 0.6;
  justify-content: center;
  align-items: center;
  width: 12%;
  margin-right: 5%;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
  }
}


/* Company Section */

.company-section {
  max-width: 100%;
}

.company-name {
  font-size: 1.5rem;
  font-weight: 400;
  color: rgba(255, 247, 198,0.95);
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
}

.company-description {
  color: #a0a0a0;
  line-height: 1.7;
  max-width: 28rem;
}

/* Links Section */

.links-section,
.contact-section {
  display: flex;
  flex-direction: column;
}

.section-title {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 247, 198,0.95);
  margin-bottom: 1rem;
  letter-spacing: 0.3px;
}

.links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  margin-top: 2px;
}

.footer-link {
  position: relative;
  color: #a0a0a0;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}
.footer-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgba(255, 247, 198,0.95);
  transition: width 0.4s ease;
}

.footer-link:hover {
  text-decoration: none;
  color: rgba(255, 247, 198,0.95);
}

.footer-link:hover::after {
  width: 100%;
}

.footer-link:hover {
  color: rgba(255, 247, 198,0.95);
}

/* Contact Section */

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #a0a0a0;
}

/* Footer Bottom */

.footer-bottom {
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  margin-top: 2rem;
  padding-top: 2rem;
  text-align: center;
  color: #a0a0a0;
}

/* Responsive Design */

@media (max-width: 768px) {
  .footer {
    padding: 2rem 0;
  }

  .footer-grid {
    gap: 2rem;
  }

  .company-name {
    font-size: 1.25rem;
  }

  .footer-bottom {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }

  .company-name {
    font-size: 1.1rem;
  }

  .company-description {
    font-size: 0.95rem;
  }
}

#about-header {
  color: rgba(255, 247, 198,0.6);
  margin-bottom: 2%;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  animation: smoothBounce 1s infinite;
}

.scroll-mouse {
  width: 24px;
  height: 40px;
  border: 2px solid #f8f6f0;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  position: relative;
}

.scroll-dot {
  width: 4px;
  height: 12px;
  background-color: #f8f6f0;
  border-radius: 2px;
  margin-top: 8px;
  animation: smoothPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Smoother Bounce Animation (matches Tailwind's bounce) */

@keyframes smoothBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateX(-50%) translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Smoother Pulse Animation */

@keyframes smoothPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Smotheer Scale Hero BG */

@keyframes kenburns {
  0% {
    background-size: 100% auto;
    background-position: center center;
  }

  100% {
    background-size: 125% auto;
    background-position: center center;
  }
}

/* ============================================
   COMPREHENSIVE RESPONSIVE DESIGN
   ============================================ */

/* Tablets and Below (768px) */
@media (max-width: 768px) {
  /* Navigation */
  /* .M-navsec {
    padding-left: 5%;
    padding-right: 5%;
  } */
  
  .nav-logo-text {
    font-size: 16px;
  }
  
  .nav-menu-sec nav {
    display: none;
  }
  
  
  
  /* Hero Section */
  .M-hero-sec {
    padding-left: 5%;
    padding-right: 5%;
    background-position: center center !important;
    background-repeat: no-repeat !important; /* prevent repeating image on small screens */
    background-size: cover !important; /* ensure it fills without tiling */
    background-attachment: scroll !important; /* avoid fixed behavior on mobile */
  }
  
  .M-logo-sec img {
    width: 90%;
  }
  
  /* About Section */
  .M-about-sec {
    height: auto;
    padding-bottom: 5%;
  }
  
  .M-about-sec div > h1 {
    font-size: 36px;
  }
  
  .M-about-sec div > h2 {
    font-size: 20px;
    text-align: center;
  }
  
  .M-about-sec div > h3 {
    font-size: 14px;
    text-align: center;
  }
  
  .about-content-sec {
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;
    height: auto;
  }
  
  .two-inside {
    flex-direction: column;
    margin-bottom: 2rem;
  }
  
  .header-col {
    flex-direction: row;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid rgba(250, 20, 20, 0.2);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
  }
  
  .header-col p {
    margin-bottom: 0;
    margin-right: 3%;
    font-size: 28px;
  }
  
  .about-para-sec {
    padding-left: 0;
    width: 100%;
  }
  
  #about-header {
    font-size: 24px;
    text-align: center;
  }
  
  .about-para {
    font-size: 16px;
    text-align: center;
  }
  
  .padding-l-r {
    padding-left: 0;
  }
  
  .about-box-cont{
    display: none;
    
  }
  .about-box-update{
    display: flex;
  }
  
  /* .about-small-box {
    width: 100%;
    margin-bottom: 1rem;
    padding: 1.5rem;
  } */
  
  .profile-btn {
    width: 50%;
    padding: 3% 5%;
    font-size: 14px;
  }
  
  /* Services Section */
  
  
  
  
 
  
  
  
  .crystal-prism-container {
    display: flex;
    flex-direction: column; /* stack core above facets on mobile */
    align-items: center;
    height: auto;
    min-height: 0; /* remove huge default to avoid huge gaps */
     /* tighten vertical spacing */
    gap: 1rem; /* space between core and facets */
  }
  
  .prism-facets {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    box-sizing: border-box;
    /* padding: 0 1rem; */
    height: auto;
    gap: 1rem;
    margin-top: 0.5rem; /* ensure clear separation from the core */
  }
  
  .facet {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }
  
  .facet-content {
    padding: 1.5rem;
  }
  
  .facet-text h3 {
    font-size: 18px;
    justify-content: center;
    text-align: center;
  }
  
  .facet-text p {
    font-size: 14px;
    text-align: center;
    justify-content: center;
  }
  
  /* Make the prism core visible on small screens and adapt its layout
     to the stacked (column) facet layout. Previously hidden to avoid
     overlap with full-width facets — we now show a smaller, centered
     core that sits inline with the facet column. */
  .prism-core {
    display: block;
    position: relative; /* flow with stacked facets */
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem auto; /* center and add space below */
    background: linear-gradient(145deg, hsla(0, 0%, 60%, 0.35), hsla(0, 0%, 60%, 0.2));
    border-radius: 50%;
    box-shadow: 0 0 12px hsla(0, 0%, 60%, 0.25), inset 0 0 6px rgba(255,255,255,0.12);
    z-index: 20;
    animation: corePulse 3s ease-in-out infinite;
  }

  /* Scale down inner glow and reflection for mobile */
  .prism-core .core-glow {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: glowExpand 2s ease-in-out infinite alternate;
  }

  .prism-core .core-reflection {
    /* use relative defaults for container flow; mobile override below centers the M */
    position: relative;
    width: 100%;
    height: 100%;
    top: auto;
    left: auto;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 6px rgba(212,175,55,0.35);
  }

  /* Mobile-only: absolutely center the letter inside the smaller core */
  .prism-core .core-reflection {
    /* absolutely fill the core and center with flexbox for pixel-perfect centering */
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    text-align: center;
  }

  /* ensure the pseudo-element itself doesn't introduce extra vertical gap */
  .prism-core .core-reflection::before {
    display: block;
    line-height: 1;
    margin: 0;
    padding: 0;
  }

  /* Footer social icons - scale and space for small screens */
  .social-icons {
    display: flex;
    /* justify-content: center;
    align-items: center; */
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0;
  }

  .social-icon-link,
  .social-icon-ins {
    width: auto !important;
    margin-right: 0.5rem;
    padding: 0.25rem;
    opacity: 0.9;
  }

  .social-icon-link img,
  .social-icon-ins img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
  }
  
  /* Properties Section */
  .properties-sec {
    height: auto;
    padding-bottom: 3rem;
  }
  
  .Properties-header {
    font-size: 28px;
    text-align: center;
    padding: 0 1rem;
  }
  
  .Properties-para {
    font-size: 14px;
    text-align: center;
    padding: 0 1rem;
  }
  
  .locations-wraper,
  .locations-wraper-2 {
    flex-direction: column;
    height: auto;
    padding: 1rem 5%;
    gap: 1rem;
  }
  
  .location-wraper,
  .location-wraper-big {
    width: 100%;
    height: 300px;
    margin-bottom: 1rem;
  }
  
  .location-header {
    font-size: 24px;
  }
  
  .location-para {
    font-size: 13px;
  }
  
  /* Why Us Section */
  .why-us-sec {
    height: auto;
    padding: 8% 5%;
  }
  
  .why-us-h2 {
    font-size: 28px;
    text-align: center;
  }
  
  .why-us-h3 {
    font-size: 14px;
    text-align: center;
  }
  
  .central-showcase {
    flex-direction: column;
    height: auto;
    gap: 2rem;
  }
  
  .left-reasons,
  .right-reasons,
  .timeline-container {
    width: 100%;
    height: auto;
  }
  
  .timeline-line-vertical {
    display: none;
  }
  
  .timeline-markers {
    display: none;
  }
  
  .reason-card {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
    margin-bottom: 1rem;
    padding: 1.5rem;
  }
  
  .reason-card:hover {
    transform: scale(1.02) !important;
  }
  
  .M-parteners-wraper {
    height: 150px;
  }
  .part-img-wraper{
  width: 25%;
  
}
.part-img-wraper:hover{
  opacity: 0.6;
}
.part-img-wraper img {
  width: 100%;
}
  
  /* CEO Section */
  .ceo-sec {
    height: auto;
  }
  
  .ceo-section {
    padding: 3rem 0;
  }
  
  .ceo-section-title {
    font-size: 28px;
  }
  
  .image-container {
    width: 12rem;
    height: 12rem;
  }
  
  .ceo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .card-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .ceo-section {
    padding: 2rem 1rem;
  }
  
  .ceo-card {
    padding: 2rem 1.5rem;
  }
  
  .ceo-section-title {
    font-size: 1.75rem;
    letter-spacing: 2px;
  }
  
  .message-highlight {
    font-size: 1.1rem;
  }
  
  .message-text {
    font-size: 0.95rem;
  }
  
  .quote-open,
  .quote-close {
    font-size: 2.5rem;
  }
  
  /* Get in Touch Section */
  .get-in-touch-sec {
    height: auto;
    padding: 5%;
  }
  
  .get-section-title {
    font-size: 28px;
    text-align: center;
  }
  
  .get-section-subtitle {
    font-size: 13px;
    text-align: center;
    padding: 0 1rem;
  }
  
  .get-sec-wraper {
    flex-direction: column;
    height: auto;
  }
  
  .get-l,
  .get-r {
    width: 100%;
  }
  
  .get-ending-wraper {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 2rem;
    padding: 5%;
  }
  
  .get-ending-wraper h1 {
    font-size: 24px;
  }
  
  .get-ending-wraper h2 {
    font-size: 16px;
  }
  
  .get-contact-info {
    width: 90%;
    margin-left: 5%;
    margin-top: 2rem;
  }
  
  .get-work-hours {
    width: 90%;
    margin-left: 5%;
  }
  
  .get-info-header {
    font-size: 20px;
  }
}

/* Mobile Devices (480px and below) */
@media (max-width: 480px) {
  /* Navigation */
  .nav-logo-text {
    font-size: 14px;
  }
  
  
  
  

  /* Improve visibility and X transform on smaller toggles */
  

  

  /* Make mobile overlay menu links more compact and reduce vertical gap */
 
  
  /* Hero Section */
  .M-hero-sec {
    padding-left: 3%;
    padding-right: 3%;
  }
  
  .M-logo-sec {
    height: auto;
    padding: 20px 0;
  }
  
  .M-logo-sec img {
    max-width: 90%;
    max-height: 200px;
    width: auto;
    height: auto;
  }
  
  /* About Section */
  .M-about-sec div > h1 {
    font-size: 28px;
  }
  
  .M-about-sec div > h2 {
    font-size: 18px;
  }
  
  .M-about-sec div > h3 {
    font-size: 12px;
  }
  
  .about-content-sec {
    padding-left: 3%;
    padding-right: 3%;
  }
  
  .header-col p {
    font-size: 24px;
    margin-right: 2%;
  }
  
  #about-header {
    font-size: 20px;
  }
  
  .about-para {
    font-size: 14px;
  }
  
  .small-box-head {
    font-size: 24px;
  }
  
  .small-box-underline {
    font-size: 14px;
  }
  
  .profile-btn {
    width: 70%;
    font-size: 13px;
  }
  
  /* Services Section */
  
  
  .services-par {
    font-size: 13px;
  }
  
  .facet-content {
    padding: 1rem;
  }
  
  .facet-text h3 {
    font-size: 16px;
  }
  
  .facet-text p {
    font-size: 13px;
  }
  
  /* Properties Section */
  .Properties-header {
    font-size: 24px;
  }
  
  .Properties-para {
    font-size: 13px;
  }
  
  .location-wraper,
  .location-wraper-big {
    height: 250px;
  }
  
  .location-header {
    font-size: 20px;
  }
  
  .location-para {
    font-size: 12px;
  }
  
  /* Why Us Section */
  .why-us-h2 {
    font-size: 24px;
  }
  
  .why-us-h3 {
    font-size: 12px;
  }
  
  .reason-title {
    font-size: 1em;
  }
  
  .reason-desc {
    font-size: 0.85em;
  }
  
  /* CEO Section */
  .ceo-section-title {
    font-size: 24px;
  }
  
  .image-container {
    width: 10rem;
    height: 10rem;
  }
  
  .ceo-info h3 {
    font-size: 1.5rem;
  }
  
  .message-highlight {
    font-size: 1rem;
  }
  
  .message-text {
    font-size: 0.95rem;
  }
  
  /* Get in Touch Section */
  .get-section-title {
    font-size: 24px;
    letter-spacing: 2px;
  }
  
  .get-section-subtitle {
    font-size: 12px;
  }
  
  .get-ending-wraper h1 {
    font-size: 20px;
    letter-spacing: 2px;
  }
  
  .get-ending-wraper h2 {
    font-size: 14px;
    letter-spacing: 2px;
  }
  
  .get-info-header {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  .get-info h1 {
    font-size: 14px;
  }
  
  .get-info p {
    font-size: 12px;
  }
  
  /* Footer */
  .company-name {
    font-size: 1rem;
  }
  
  .company-description {
    font-size: 0.9rem;
  }
  
  .social-icons {
    width: 100%;
  }
  
  .social-icon-link {
    width: 15%;
  }
  
  .social-icon-ins {
    width: 18%;
  }
  
  /* CEO Section - Extra small screens */
  .image-container {
    width: 10rem;
    height: 10rem;
  }
  
  .ceo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .ceo-section {
    padding: 1.5rem 0.75rem;
  }
  
  .ceo-card {
    padding: 1.5rem 1rem;
  }
  
  .ceo-section-title {
    font-size: 1.5rem;
    letter-spacing: 1.5px;
  }
  
  .ceo-name {
    font-size: 1.25rem;
  }
  
  .message-highlight {
    font-size: 1rem;
  }
  
  .message-text {
    font-size: 0.9rem;
  }
  
  .quote-open,
  .quote-close {
    font-size: 2rem;
  }
}

/* ipadahmed (1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .M-navsec {
    padding-left: 6%;
    padding-right: 6%;
  }
  
  .nav-link {
    margin-left: 5%;
    font-size: 13px;
  }
  
  .about-content-sec {
    padding-left: 6%;
    padding-right: 6%;
  }
  
  
  
  .why-us-sec {
    padding: 5% 8%;
  }
  
  .reason-card {
    width: 320px;
    font-size: 0.9em;
  }
  
  /* Fix for tablet layout issues */
  .M-about-sec {
    height: auto;
    min-height: 100vh;
    padding-bottom: 4%;
  }
  
  .about-content-sec {
    flex-direction: column;
    height: auto;
  }
  
  .two-inside {
    flex-direction: column;
    margin-bottom: 20px;
  }
  
  .header-col {
    flex-direction: row;
    width: 100%;
    height: auto;
    border-right: none;
    
    border-bottom: 1px solid rgba(250, 20, 20, 0.2);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
  }
  
  .header-col p {
    margin-right: 15px;
    margin-bottom: 0;
  }
  
  .about-para-sec {
    padding-left: 0;
    width: 100%;
  }
  
  /* Fix for crystal prism in tablet view */
  .crystal-prism-container {
    transform: scale(0.85);
    /* margin: 0 auto; */
  }
  
  /* Fix for location sections in tablet view */
  .location-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .btitlget-section-subtitle {
    font-size: 1rem;
    color: rgba(255, 247, 198,0.9);
}
}

/* ipadahmed */
@media (min-width: 768px) and (max-width: 900px) {
  /* Make sure section backgrounds always cover and don't leave empty areas */
  .services-sec,
  .properties-sec,
  .location-wraper,
  .location-wraper-big,
  .ceo-section,
  .M-about-sec {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* ensure there's enough height so the image has space to fill */
    min-height: 60vh;
    -webkit-background-size: cover !important;
  }

  /* For location wrappers, prefer explicit min-heights on tablet so images scale properly */
  .location-wraper,
  .location-wraper-big {
    min-height: 320px;
    height: auto;
  }

  /* Prevent background-attachment: fixed or parallax behaviors that can create gaps on iPad */
  .services-sec,
  .M-hero-sec,
  .ceo-section,
  .properties-sec {
    background-attachment: scroll !important;
  }

  /* === Tablet layout improvements for inner elements === */
  /* About section: stack columns, reduce huge heights, tighten paddings */
  .M-about-sec {
    min-height: 100vh;
    height: auto;
    padding: 4% 6%;
  }

  .about-content-sec {
    flex-direction: column;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
    gap: 1.5rem;
  }

  .two-inside {
    flex-direction: column;
  }

  .about-small-box-cont {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  /* Services: make prism stack and reduce the large fixed heights */
  

  .crystal-prism-container {
    height: auto;
    margin: 0 auto;
    /* padding: 1rem 0; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .prism-facets {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    /* gap: 1rem; */
  }

  .facet {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Properties: stack the location cards and reduce heights for tablet */
  .properties-sec {
    min-height: 140vh;
    height: auto;
    padding: 3% 4%;
  }

  .locations-wraper,
  .locations-wraper-2 {
    flex-direction: column;
    gap: 1rem;
    padding-left: 2%;
    padding-right: 2%;
  }

  .location-wraper,
  .location-wraper-big {
    width: 100%;
    min-height: 300px;
    height: auto;
  }

  .location-over {
    padding: 4% 5%;
  }

  /* Why-us: convert timeline layout to simple stacked cards on tablet */
  .central-showcase {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    height: auto;
  }

  .left-reasons, .right-reasons, .timeline-container {
    width: 100%;
    position: relative;
    height: auto;
  }

  .reason-card {
    position: relative !important;
    width: 100% !important;
    padding: 1.25rem !important;
    height: auto !important;
    transform: none !important;
  }

  /* CEO Section: reduce card padding and stack columns */
  .ceo-section {
    min-height: 100vh;
    padding: 2rem 1.5rem;
  }

  .card-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .image-container {
    width: 12rem;
    height: 12rem;
    margin: 0 auto;
  }

  /* Get in touch: stack columns */
  .get-sec-wraper {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0;
  }

  .get-l, .get-r {
    width: 100%;
  }
  .about-box-cont{
    display: none;
  }
  .about-box-ipad{
    display: flex;
    flex-direction: column;
    width: 95%;
    height: 300px;
    align-items: center;
    justify-content: center;
    align-self: center;
    
  }
  #about-header-sec h2{
    font-size: 1.2rem;
  }
  #about-header-sec h3{
    font-size: 0.9rem;
  }
  .header-col{
    margin: 40px 0;
  }
  .header-col p{
    font-size: 1rem;
  }
  .about-box-mob{
    display: none;
  }
  
  .small-box-head{
    font-size: 1rem;
    margin: 0;
    padding: 0;
  }
  .small-box-underline{
    font-size: 1rem;
    margin: 0;
    padding: 0;
  }

  
 
  
  .prism-core{
    margin-bottom: 50px;
    height: 100px;
    width: 100px;
    margin-top: -50px;
  }
  .core-reflection{
    font-size: 2em;
    font-weight: normal;
  }
  
  .social-icons{
    width: 50%;
  }

  .mobile-menu-sec{
        display: flex;
        width: 100%;
        height: 100%;
       
        justify-content: flex-end;
    }
    .M-navsec{
      padding-left: 5%;
      padding-right: 5%;
    }
	.mobile-menu-btn{
        display: flex;
        height: 100%;
        display: flex;
        width: 15%;
        justify-content: center;
        align-items: center;
    }
    .mobile-menu-btn a {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mobile-menu-btn a img{
        width: 60%;
    }

	.-mob-menu-section{
        position: absolute;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 0;
        top:67px;
        background-color: rgba(23, 23, 23, 1);
        overflow: hidden;
        transition: all ease-in-out 400ms;
        transition-delay: 100ms;
        z-index: 200;
        box-sizing: border-box;
    }
	.-mob-menu{
        display: flex;
        flex-direction: column;
        width: 100%;
        
        border-top: 2px solid rgba(230,221,209,0.1);
        
    }
	.-mob-nav-item{
        display: flex;
        width: 100%;
        padding: 4% 0;
        align-items: center;
        border-bottom: 1px solid rgba(230,221,209,0.1);
        transition: all ease-in-out 400ms;
    }
	.-mob-menu-first{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30%;
    }
    
  

}
@media (max-width: 450px) {
  .about-box-ipad{
    display: none;
  }
  .about-box-mob{
    display: flex;
    flex-direction: column;
    width: 95%;
    height: auto;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding-left: 15px;
  }
  .about-small-box-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 100%;
  }
  .about-small-box{
    width:45%;
    
  }
  .about-box-cont{
    display: none;
  }
}



@media (min-width: 768px) and (max-width: 900px) {
            .m-services-wrap{
                
                height: 100vh;
                
            }
            .m-services-cards{
                height: 100%;
            }
            .m-services-core{
                display: none;
            }
            .m-l-services, .m-r-services{
                width: 50%;
                justify-content: center;
            }
            .m-service-card{
            height: 20vh;
            width: 100%;
            margin-bottom: 3%;
        }
        .m-services-core-mo{
            display: flex;
            position: relative; 
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 20%;
            
        }
        .m-core-mo{
            position: absolute;
            width: 12vw;
            height: 12vw;
            background: linear-gradient(145deg, hsla(0, 0%, 60%, 0.4), hsla(0, 0%, 60%, 0.3));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 20px hsla(0, 0%, 60%, 0.4), 0 0 40px hsla(0, 0%, 60%, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.2);
            z-index: 10;
            animation: corePulse 3s ease-in-out infinite;
        }
        .m-core-glow-mo {
            position: absolute;
            width: 5%;
            height: 5%;
            background: radial-gradient(circle, hsla(0, 0%, 60%, 0.6), transparent 50%);
            border-radius: 50%;
            animation: glowExpand 2s ease-in-out infinite alternate;
        }
        .m-core-reflection-mo {
            position: absolute;
            width: 50%;
            height: 50%;
            top: 25%;
            left: 25%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "Raleway", sans-serif;
            font-weight: bold;
            font-size: 3em;
            color: rgba(212, 175, 55, 0.3);
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
            animation: reflectionRotate 20s linear infinite;
        }
        .m-core-reflection-mo::before {
            content: "M";
            font-family: 'Raleway', sans-serif;
            font-size: 2.8rem;
            font-weight: 600;
        }
        .mobile-menu-btn{
        display: flex;
        height: 100%;
        display: flex;
        width: 15%;
        justify-content: center;
        align-items: center;
    }
    .mobile-menu-btn a {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mobile-menu-btn a img{
        width: 60%;
    }

	.-mob-menu-section{
        position: absolute;
        display: flex;
        width: 100%;
        height: 0;
        top:67px;
        background-color: rgba(23, 23, 23, 1);
        overflow: hidden;
        transition: all ease-in-out 400ms;
        transition-delay: 100ms;
        z-index: 200;
        box-sizing: border-box;
    }
	.-mob-menu{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-top: 2px solid rgba(230,221,209,0.1);
    }
	.-mob-nav-item{
        display: flex;
        width: 100%;
        padding: 4% 0;
        align-items: center;
        border-bottom: 1px solid rgba(230,221,209,0.1);
        transition: all ease-in-out 400ms;
    }
	.-mob-menu-first{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30%;
    }
    .-mob-nav-link{
      display: flex;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: rgba(255, 247, 198,0.5);
      width: 100%;
      font-size: 14px;
      font-family: ralway,sans-serif;
    }
    .logo-item {
      display: flex;
      flex-direction: column;
      width: 100%;
    
      padding-top: 10%;
      
      list-style: none;
      margin-top: 30%;
      align-items: center;
      padding-right: 10%;
    }
    .logo-item h1{
      font-size: 2rem;
      font-family: hatton,sreif;
      font-weight: 200;
      color: rgba(255, 247, 198,0.9);
      letter-spacing: 8px;

      
        }

        .logo-item p{
      font-size: 0.5rem;
      font-family: hatton,sreif;
      font-weight: 200;
      color: rgba(255, 247, 198,0.6);
      letter-spacing: 5px;

        }

        }
        @media (max-width: 450px) {
        .m-services-wrap{
                
                height: 100vh;
                
            }
            .m-services-cards{
                height: 100%;
            }
            .m-services-core{
                display: none;
            }
            .m-l-services, .m-r-services{
                width: 50%;
                justify-content: center;
            }
            .m-service-card{
            height: 20vh;
            width: 100%;
            margin-bottom: 3%;
        }
        .m-services-core-mo{
            display: flex;
            position: relative; 
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 20%;
            
        }
        .m-core-mo{
            position: absolute;
            width: 25vw;
            height: 25vw;
            background: linear-gradient(145deg, hsla(0, 0%, 60%, 0.4), hsla(0, 0%, 60%, 0.3));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 20px hsla(0, 0%, 60%, 0.4), 0 0 40px hsla(0, 0%, 60%, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.2);
            z-index: 10;
            animation: corePulse 3s ease-in-out infinite;
        }
        .m-core-glow-mo {
            position: absolute;
            width: 5%;
            height: 5%;
            background: radial-gradient(circle, hsla(0, 0%, 60%, 0.6), transparent 50%);
            border-radius: 50%;
            animation: glowExpand 2s ease-in-out infinite alternate;
        }
        .m-core-reflection-mo {
            position: absolute;
            width: 50%;
            height: 50%;
            top: 25%;
            left: 25%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "Raleway", sans-serif;
            font-weight: bold;
            font-size: 3em;
            color: rgba(212, 175, 55, 0.3);
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
            animation: reflectionRotate 20s linear infinite;
        }
        .m-core-reflection-mo::before {
            content: "M";
            font-family: 'Raleway', sans-serif;
            font-size: 2.8rem;
            font-weight: 600;
        }
        .m-service-num{
            font-size: 0.9rem;
        }
        .m-service-header{
            font-size: 0.9rem;
        }
        .m-service-subheader{
            font-size: 0.6rem;
        }
        .m-service-card{
            justify-content: center;
        }
        .mobile-menu-sec{
        display: flex;
        width: 100%;
        height: 100%;
       
        justify-content: flex-end;
    }
     .M-navsec{
      padding-left: 5%;
      padding-right: 5%;
    }
	.mobile-menu-btn{
        display: flex;
        height: 100%;
        width: 25%;
        justify-content: center;
        align-items: center;
        
    }
    .mobile-menu-btn a {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mobile-menu-btn a img{
        width: 80%;
    }
    
    

	.-mob-menu-section{
        position: absolute;
        display: flex;
        width: 100%;
        height: 0;
        top:67px;
        background-color: rgba(23, 23, 23, 1);
        overflow: hidden;
        transition: all ease-in-out 400ms;
        transition-delay: 100ms;
        z-index: 200;
        box-sizing: border-box;
    }
	.-mob-menu{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-top: 2px solid rgba(230,221,209,0.1);
    }
	.-mob-nav-item{
        display: flex;
        width: 100%;
        padding: 3% 0;
        align-items: center;
        border-bottom: 1px solid rgba(230,221,209,0.1);
        transition: all ease-in-out 400ms;
    }
	.-mob-menu-first{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30%;
    }
    .-mob-nav-link{
      display: flex;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: rgba(255, 247, 198,0.5);
      width: 100%;
      font-size: 14px;
      font-family: ralway,sans-serif;
    }
    .-mob-nav-link:hover{
      color: rgba(255, 247, 198,0.9);
      text-decoration: none;
    }
    .M-parteners-wraper{
    height: 15%;
    }
    .small-box-underline{
      font-size: 0.65rem;
    }
    .about-small-box {
      padding-top: 25px;
      padding-bottom: 25px;
      /* margin-right: 15px; */
    }
    .company-profile-tabs > li > a {
      
      font-size: 0.7rem;
      font-weight: 200;
      padding: 0.5rem 0.2rem;
      transition: all 0.3s ease;
    }
    .remove-mob{
      height: 0;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    .ceo-more{
      display: flex;
      justify-content: center;
      width: 100%;

    }
     .ceo-more a{ 
      display: flex;
      justify-content: center;
      width: 50%;
      padding: 10px 100px;
      border: 1px solid rgba(255, 247, 198,0.1);
      color: rgba(255, 247, 198,0.5);
      font-family: 'Raleway', sans-serif;
      letter-spacing: 2px;
      font-size: 12px;
    }
    .ceo-more a:hover{
      text-decoration: none;
      color: rgba(255, 247, 198,0.9);
    }

     .logo-item {
      display: flex;
      flex-direction: column;
      width: 100%;
    
      padding-top: 10%;
      
      list-style: none;
      margin-top: 30%;
      align-items: center;
      padding-right: 10%;
    }
    .logo-item h1{
      font-size: 2rem;
      font-family: hatton,sreif;
      font-weight: 200;
      color: rgba(255, 247, 198,0.9);
      letter-spacing: 8px;

      
        }

        .logo-item p{
      font-size: 0.5rem;
      font-family: hatton,sreif;
      font-weight: 200;
      color: rgba(255, 247, 198,0.6);
      letter-spacing: 5px;

        }
      }