body {
  user-select: none;
}
button {
  outline:none;
}


@keyframes play {

    0% {
        transform: scale(1);
    }
    15% {
        box-shadow: 0 0 0 2px rgba(128, 233, 56, 0.4);
    }
    25% {
        box-shadow: 0 0 0 4px rgba(128, 233, 56, 0.4), 0 0 0 8px rgba(128, 233, 56, 0.2);
    }
    25% {
        box-shadow: 0 0 0 6px rgba(128, 233, 56, 0.4), 0 0 0 10px rgba(128, 233, 56, 0.2);
    }

}
html {
  scroll-behavior: smooth;
}



body {
margin: 0;
padding: 0;
}

a:link {
    text-decoration: none;
}

 #skype {
    color:#33CCFF;
  }

#whatsapp {
  color:rgb(65,255,0);
}

#insta {
  color:#FF00CD
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color:rgb(255,215,0);
}

li {
  display: inline;
 color:rgb(255,215,0);
}

#dkd_Xxx:hover {
  opacity:0.7;
}

 @keyframes opcSIDD {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

#DkdkD_wygd:hover {
      text-decoration:underline !important;
}
#dkd_XXLXX:hover {
    opacity:0.7;
}
#dkdX_xxxxx:hover {
        text-decoration:underline !important;
}
#djdjX_Xxx:hover {
          text-decoration:underline !important;
}
#dkdkX_Xpxc:hover {
      text-decoration:underline !important;
}
#DkdkdX_Xx:hover {
     opacity:0.7;
}

#dkdX__XXXDD_Dxx:hover {
    background-color:rgb(37, 173, 229) !important;
  color:white !important;
}



#insta-btn {
  width:40px;
  height:40px;
  color:white;
    background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
   border-radius:8px;
  cursor:pointer;
  border:none;
  font-size:28px;
}
#insta-btn:hover {
 opacity:0.7;
}
#twitter-btn {
  width:40px;
  height:40px;
  color:white;
   background:#1DA1F2;
  border-radius:8px;
  cursor:pointer;
  border:none;
  font-size:24px;
}
#twitter-btn:hover {
opacity:0.7;
}

#facebook-btn {
  width:40px;
  height:40px;
  color:white;
  background:#4867AA;
  border-radius:8px;
  cursor:pointer;
  border:none;
  font-size:24px;
}
#facebook-btn:hover {
 opacity:0.7;
}
#linkedin-btn {
  width:40px;
  height:40px;
  color:white;
  background:#0077B5;
  border-radius:8px;
  cursor:pointer;
  border:none;
  font-size:24px;
}
#linkedin-btn:hover {
opacity:0.7;
}
#youtube-btn {
  width:40px;
  height:40px;
  color:white;
  background:#CD201F;
  border-radius:8px;
  cursor:pointer;
  border:none;
  font-size:24px;
}
#youtube-btn:hover {
opacity:0.7;
}

#dkdkX_XXX:hover {
    text-decoration:underline;
}

 

br {
        user-select: none; /* For modern browsers */
            -webkit-user-select: none; /* For Safari */
            -moz-user-select: none; /* For Firefox */
}

#dkdX_XP:hover {
      text-decoration:underline;
}
#djdjX_Pxpx:hover {
  opacity:0.7 !important;
}







form:invalid button {
    pointer-events: none;
    opacity: 0.7;
  }
#dajsda_XX:hover {
   opacity:0.7 !important; 
}
#dkdkdX___SpspsssZZ:hover {
  opacity:0.6 !important;
}
#dkdD_DDS:hover {
    opacity:0.6 !important;
}




.language {
    position: relative;
    display: inline-block;
  }

  .language-content {
    display: none;
    position: absolute;
    background-color: white;
    width: 287px;
    margin-top:-449px;
    justify-content: initial;
    text-align:initial;
        font-size: 17px;
    overflow: auto;
    box-shadow: 0 0 13px rgb(0, 0, 0, 0.4);
    z-index: 100;
    border-radius: 5px;
    letter-spacing:0px !important;
    height: 400px;
    margin-left: 0px;
    overflow: scroll;
    overflow-x: hidden;
  }
  .language-content img {
    border-radius:2.5px;
    margin-top:3px;
        float:right;
  }
  .language-content a {
        margin-left:5px; 
    margin-right:5px;
    margin-top:5px;
    margin-bottom:5px;
    border-radius:5px;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bold;
    display: block;
    
    cursor: pointer;
  }

  .language-content a:hover {
    background: #ddd;
  }

  .show {
    display: block;
    animation:opcSIDD 0.6s forwards;
  }

   .language-content::-webkit-scrollbar {
    width: 0.40em;
    /* for vertical scrollbars */
    height:0.40em;
    /* for horizontal scrollbars */
    border-radius: 5px;
    cursor:pointer;
  }

   .language-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
  }

   .language-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
        cursor:pointer;
  }
   .language-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
  }
#dkdkX_XPX:hover {
    opacity:0.7;
}
#dsjdddd_Ckxcdd:hover {
  background:#ddd;
}
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  margin-top:-15px;
  animation: fadeUp 0.8s ease-out forwards;
  will-change: transform, opacity; /* prevents layout shift */
  display: inline-block; /* isolate movement */
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#djkadsA_D:hover {
    text-decoration: underline;
}
input[type="text"]::placeholder {
  color:#aab7c4;
}

/* ===== NAV + HERO mobile fixes ===== */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: visible; }


@media (max-width: 900px) {
  /* NAV: allow wrapping and remove "desktop spacing" */
  img { max-width: 100%; height: auto; }
    #djd____pssmsm { display: none !important; }
  #djdX_XXXxxasadsds { 
    overflow-y:hidden;
    overflow-x:scroll;
    top:0px !important; 
  }
  #djdX_XXXxxasadsds > div {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 12px !important;
  }

  /* Logo size */
  #dkd_Xxx {
    width: 150px !important;
    margin-top: 6px !important;
  }

  /* Nav buttons: stop fixed width feeling */
  button#dkdX__XXXDD_Dxx {
    width: auto !important;
    height: 44px !important;
    padding: 0 10px !important;
    font-size: 15px !important;
  }

  /* Remove huge login block push */
  #djdX_XXXxxasadsds > div > div[style*="margin-left:400px"] {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: 6px !important;
  }

  /* HERO: stack layout + kill fixed width */
  .fade-up {
    flex-direction: column !important;
    margin-top:0px !important;
    align-items: flex-start !important;
    padding: 0 12px !important;
  }
    .trustpilot-badge { 
      margin-top:75px !important;
    }

  /* Main hero text block (currently width:1277px) */
  .fade-up > div {
    width: 92vw !important;
    margin-top: 28px !important;
    font-size: clamp(30px, 8vw, 42px) !important;
  }

    .fade-up > div br {
      display:none;
    }


  /* Hero logo */
  .fade-up > div img[src*="megatech_photos_logo.svg"] {
    width: 170px !important;
  }

  /* Hero subtext */
  .fade-up > div div[style*="font-size:20px"] {
    font-size: 16px !important;
    line-height: 1.35em !important;
    margin-top:20px !important;
  }

  /* CTA block spacing */
  .fade-up > div > div[style*="margin-top:-48px"] {
     margin-top: 20px !important;
  }

  /* Banner image: stop absolute positioning (this is the big one) */
  img[src*="home_page_banner_updated"] {
    display:none;
  }


    /* Any big 2–3 column rows: stack */
  div[style*="display:flex"][style*="justify-content:center"] {
    flex-wrap: wrap !important;
  }

  /* Comparison cards: stack vertically */
  div[style*="How does Megatech photos compare"] + div {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  div[style*="height:552px"][style*="width:365px"] {
    width: 92vw !important;
    margin-left: 0 !important;
  }

  /* Make entire FAQ container fluid */
  #fdfdfDibvD > div > div[onclick] {
    width: 92vw !important;
  }

  /* Remove left margin on title */
  #fdfdfDibvD div[style*="font-size:20px"] {
    margin-left: 16px !important;
    padding-right: 40px !important; /* space for icon */
  }

  /* Make answer width fluid */
  #fdfdfDibvD #tetetfc {
    width: 92vw !important;
    padding: 0 16px !important;
    margin-top: 10px !important;
    font-size: 15px !important;
    line-height: 1.4em !important;
    word-break: break-word;
  }

  /* Fix icon float behavior on small screens */
  #fdfdfDibvD #dad_pd i {
    float: none !important;
    position: absolute;
    right: 16px;
    margin-top: -26px !important;
  }

  /* Make parent relative so icon positioning works */
  #fdfdfDibvD div[onclick] {
    position: relative;
  }
  #dd_otherPdD {
     width: 92vw !important;
  }

    #_PpsdddSHhar {
     width: 92vw !important;
  }
     #_DSADDSSDADSAD {
     width: 92vw !important;
  }

  /* Headings scale down a bit */
  h2 { font-size: clamp(26px, 6vw, 42px) !important; }
   h1 { font-size: clamp(35px, 7vw, 42px) !important; }

  #ddD_DCCCCC {
    margin-left:0px !important;
    margin-top:20px !important;
  }
  #DJDD__DD {
    margin-top:25px !important;
  }
  #dd_Ppsss_shared {
     margin-top:20px !important;
     margin-left:0px !important;
  }
  #D_Ddccaaddd {
       margin-top:25px !important;
     margin-left:0px !important;
  }
     #D_Ddcc_otherPdd {
     margin-top:35px !important;
     margin-left:0px !important;
  }
  #_D_imfff {
    display:none;
  }
  #D_DDDDDa {
    margin-left:0px !important;
  }
  #d_DDDDDaa {
        margin-left:0px !important;
    text-align:center;
  }
  #d_DDDDDaa br {
    display:none;
  }
    /* Footer containers: allow wrapping + stack */
  div[style*="height:215px"][style*="background-color:#F7F7F7"][style*="display:flex"][style*="justify-content:center"],
  div[style*="height:60px"][style*="background-color:#F7F7F7"][style*="display:grid"][style*="justify-content:center"],
  div[style*="height:240px"][style*="background-color:#F7F7F7"][style*="display:flex"][style*="justify-content:center"] {
    height: auto !important;
    padding: 18px 12px !important;
  }

  /* ===== Columns section (Explore/Resources/Solutions/Help/Company) ===== */
  div[style*="height:215px"][style*="background-color:#F7F7F7"][style*="display:flex"][style*="justify-content:center"] > div  {
   width: 100% !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    justify-content: flex-start !important;
   text-align:center;
  }

  /* Remove desktop spacing between columns */
  div[style*="height:215px"][style*="background-color:#F7F7F7"] div[style*="margin-left:88px"] {
    margin-left: 0 !important;
  }

  /* Make each column take half width on mobile, then wrap */
  div[style*="height:215px"][style*="background-color:#F7F7F7"] > div > div {
    width: calc(50% - 12px) !important;
    min-width: 150px !important;
  }

  /* ===== Social + contact + language block section ===== */
  /* Kill the huge negative margin wrapper */
  div[style*="height:60px"][style*="background-color:#F7F7F7"] > div[style*="margin-left:-660px"] {
    margin-left: 0 !important;
  }

  /* Remove desktop centering offsets */
  div[style*="margin-left:243px"],
  div[style*="margin-left:260px"] {
    margin-left: 0 !important;
  }

  /* Social icons row */
  div[style*="margin-top:35px"][style*="display:flex"] {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

    /* Social icons row */



  /* Contact row: stack + wrap so it doesn't overflow */
  div[style*="margin-top:11px"][style*="display:flex"] {
    justify-content: center !important;
    margin-top: 12px !important;
  }
  div[style*="fa-envelope"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    line-height: 1.4em !important;
  }

  /* Language dropdown: full width */
  #dkdkX_XPX {
    width: 92vw !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 16px !important;
  }
  #mylanguage {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 92vw !important;
    max-width: 420px !important;
  }

  /* ===== Bottom bar (logo + links + copyright) ===== */
  div[style*="height:240px"][style*="background-color:#F7F7F7"] > div {
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 0 !important;
  }

  /* Logo: remove absolute + desktop margin */
  #djdjX_Pxpx {
    position: static !important;
    margin: 0 auto 12px auto !important;
    display: block !important;
  }

  /* Links row: wrap and center */
  div[style*="font-weight:bold"][style*="font-size:13px"][style*="display:flex"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  /* Copyright: remove margin-left:220px and center */
  div[style*="color:black"][style*="margin-left:220px"] {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }
  #_DddkdD_Dldsssss br {
   display:none;
  }
  .ddd_amkd {
    margin-top:20px !important;
  }
    #djdX_XXXxxasadsds{    
    overflow: visible !important;
   
  }  
  #djdX_XXXxxasadsds > div {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
  }
    #carousel-container {
vertical-align:text-bottom; line-height:1em;
  }
    .D_DDccca {
    display:block !important;
  }
  #dkd_Dddadd {
    margin-left:0px !important;
      margin-top:55px !important;
  }
    #dddD_DCCAC {
    margin-left:0px !important;
  }

  /* Footer containers: allow wrapping + stack */
  div[style*="height:215px"][style*="background-color:white"][style*="display:flex"][style*="justify-content:center"],
  div[style*="height:60px"][style*="background-color:white"][style*="display:grid"][style*="justify-content:center"],
  div[style*="height:240px"][style*="background-color:white"][style*="display:flex"][style*="justify-content:center"] {
    height: auto !important;
    padding: 18px 12px !important;
  }

  /* ===== Columns section (Explore/Resources/Solutions/Help/Company) ===== */
  div[style*="height:215px"][style*="background-color:white"][style*="display:flex"][style*="justify-content:center"] > div  {
   width: 100% !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    justify-content: flex-start !important;
   text-align:center;
  }

  /* Remove desktop spacing between columns */
  div[style*="height:215px"][style*="background-color:white"] div[style*="margin-left:88px"] {
    margin-left: 0 !important;
  }

  /* Make each column take half width on mobile, then wrap */
  div[style*="height:215px"][style*="background-color:white"] > div > div {
    width: calc(50% - 12px) !important;
    min-width: 150px !important;
  }

  /* ===== Social + contact + language block section ===== */
  /* Kill the huge negative margin wrapper */
  div[style*="height:60px"][style*="background-color:white"] > div[style*="margin-left:-725px"] {
    margin-left: 0 !important;
  }

  /* Remove desktop centering offsets */
  div[style*="margin-left:243px"],
  div[style*="margin-left:260px"] {
    margin-left: 0 !important;
  }

  /* Social icons row */
  div[style*="margin-top:35px"][style*="display:flex"] {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  /* Contact row: stack + wrap so it doesn't overflow */
  div[style*="margin-top:11px"][style*="display:flex"] {
    justify-content: center !important;
    margin-top: 12px !important;
  }
  div[style*="fa-envelope"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    line-height: 1.4em !important;
  }



  /* ===== Bottom bar (logo + links + copyright) ===== */
  div[style*="height:240px"][style*="background-color:white"] > div {
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 0 !important;
  }



  /* Links row: wrap and center */
  div[style*="font-weight:bold"][style*="font-size:14px"][style*="display:flex"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  /* Copyright: remove margin-left:220px and center */
  div[style*="color:black"][style*="margin-left:261px"] {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  } 
  div[style*="margin-top:120px"][style*="display:flex"] {
  display:none !important;
  }

  .googlephotos {
    margin-left:0px !important;
  }
  #vsffff {
    display:none;
  }

}
#h1 {
  color:rgb(37, 173, 229);
  font-family:sans-serif;
  font-weight:bold;
  font-size:175px;
  text-align:center;
  height:50px;
  margin-top:175px;
}

#h1_2 {
  margin-left:40px;
  color:black;
  text-align:center;
  font-family:sans-serif;
  font-weight:bold;
  padding-top:35px;
  font-size:37px;
}

#h1_3 {
    margin-left:40px;
  color:black;
  font-family:sans-serif;
  font-weight:bold;
  text-align:center;
  padding-top:10px;
}

#button {
  width:200px;
  height:60px;
  background-color:rgb(37, 173, 229);
  border:none;
  cursor:pointer;
  color:white;
  font-family:sans-serif;
  font-weight:bold;
  font-size:28px;
      margin-left:0px;
  border-radius:13px;
  margin-top:45px;
}
#button:hover {
  opacity:0.7;
}
  .trustpilot-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
        margin-top:105px;
  }
  .stars {
    display: flex;
    gap: 4px;
  }
  .star {
    width: 36px;
    height: 36px;
    position: relative;
    overflow: hidden;
  }
  .star .bg {
    position: absolute;
    inset: 0;
    background: #dcdce6;
  }
  .star .fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #00b67a;
  }
  .star svg {
    width: 20px;
    height: 20px;
    fill: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }
  .logo span {
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #191919;
    letter-spacing: -0.5px;
  }
   #counter {
font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: clamp(70px, 18vw, 70px);
    color: rgb(37,173,229);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }
#djdX_XXXxxasadsds {
  z-index: 5000 !important;
}

#AD_pca_lm1 {
  transition: transform 0.3s ease;
}

#AD_pca_lm1:hover {
  transform: rotate(-4deg) !important;

}
#AD_pca_lm2 {
  transition: transform 0.3s ease;
}

#AD_pca_lm2:hover {
  transform: rotate(-1deg) !important;

}

#AD_pca_lm3 {
  transition: transform 0.3s ease;
}

#AD_pca_lm3:hover {
  transform: rotate(1deg) !important;
   
}