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;

  /* Start lower + include your -15px visual offset */
  transform: translateY(55px) scale(0.985);
  filter: blur(6px);

 animation: fadeUp 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;

  will-change: transform, opacity, filter;
  display: inline-block;
}

@keyframes fadeUp {
  to {
    opacity: 1;

    /* Ends slightly higher, mimicking margin-top: -15px */
    transform: translateY(-15px) scale(1);
    filter: blur(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:21px"] {
    font-size: 16px !important;
    line-height: 1.35em !important;
    margin-top:20px !important;
  }

  /* CTA block spacing — kill the negative margin that pulls button into subtext */
  div[style*="margin-top:-44px"] {
    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:272px"][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:272px"][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:272px"][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:272px"][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:272px"][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:272px"][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:272px"][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:272px"][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:281px"] {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  } 
  div[style*="margin-top:60px"][style*="justify-content:center"],
  div[style*="margin-top:120px"][style*="display:flex"] {
    display: none !important;
  }
  #AD_pca_lm1, #AD_pca_lm2, #AD_pca_lm3, #AD_pca_lm4 {
    display: none !important;
  }

}
#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;
   
}

#AD_pca_lm4 {
  transition: transform 0.3s ease;
}

#AD_pca_lm4:hover {
  transform: rotate(8deg) !important;
   
}
 
/* ============================================================
   MEGATECH PHOTOS — RESPONSIVE SYSTEM v3
   Desktop (>900px): ZERO changes to nav or layout.
   box-sizing fix ONLY inside media queries, never globally.
   ============================================================ */
 
/* ── Hamburger button (hidden on desktop, shown ≤900px) ── */
#nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0 14px;
  height: 64px;
  background: none;
  border: none;
  flex-shrink: 0;
}
#nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #222;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
#nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
 
/* ── Compact auth (hidden on desktop, shown ≤900px) ── */
#nav-compact-auth {
  display: none;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
  margin-top: 13.5px;
  align-self: flex-start;
}
#nav-compact-auth a { text-decoration: none; }
 
/* Match EXACTLY the original nav buttons */
#nav-compact-login {
  width: 110px;
  height: 37px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
  background: rgb(37,173,229);
  transition: opacity 0.15s;
}
#nav-compact-signup {
  width: 117px;
  height: 37px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
  background: rgb(37,173,229);
  transition: opacity 0.15s;
}
#nav-compact-login:hover,
#nav-compact-signup:hover { opacity: 0.6; }
 
/* ── Drawer animation ── */
@keyframes drawerSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
/* ── Drawer panel ── */
#nav-mobile-drawer {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
  z-index: 999999999;
  padding: 12px 16px 20px;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
#nav-mobile-drawer.open {
  display: flex;
  animation: drawerSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#nav-mobile-drawer a.drawer-link,
#nav-mobile-drawer button.drawer-link {
  display: block;
  width: 100%;
  text-align: left;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #1a1a1a;
  padding: 12px 12px;
  cursor: pointer;
  border-radius: 9px;
  text-decoration: none;
  background: none;
  border: none;
  transition: background 0.15s, color 0.15s;
}
#nav-mobile-drawer a.drawer-link:hover,
#nav-mobile-drawer button.drawer-link:hover {
  background: rgb(37,173,229);
  color: white;
}
#nav-mobile-drawer .nav-drawer-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 8px 4px;
}
 
/* ════════════════════════════════════════════════════════════
   ≤ 900px  — hamburger ON, desktop nav links OFF
   box-sizing scoped here so desktop is NEVER affected
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  *, *::before, *::after { box-sizing: border-box; }
 
  /* Show injected elements */
  #nav-hamburger      { display: flex !important; }
  #nav-compact-auth   { display: flex !important; }
 
  /* Hide desktop nav links + original login block */
  #djdX_XXXxxasadsds > div > a:not(:first-child),
  #djdX_XXXxxasadsds > div > button#dkdX__XXXDD_Dxx,
  #djdX_XXXxxasadsds > div > div[style*="margin-top:13.5px"] {
    display: none !important;
  }
 
  /* Nav bar: logo left, [compact-auth][hamburger] right */
  #djdX_XXXxxasadsds {
    overflow: visible !important;
  }
  #djdX_XXXxxasadsds > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    height: 64px !important;
    overflow: visible !important;
    gap: 0 !important;
  }
 
  /* Logo: vertically centered */
  #dkd_Xxx {
    width: 150px !important;
    margin-top: 0 !important;
    display: block !important;
    align-self: center !important;
  }
 
  /* Right group wrapper */
  #nav-right-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
  }
 
  /* Compact auth: vertically centered, match original button vertical pos */
  #nav-compact-auth {
    align-self: center !important;
    margin-top: 0 !important;
    align-items: center !important;
  }
 
  /* ── Hero ── */
  img[src*="home_page_banner_updated"] { display: none !important; }
  .fade-up {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 12px !important;
    margin-top: 0 !important;
  }
  .fade-up > div[style*="width:1350px"],
  .fade-up > div[style*="width:1277px"] {
    margin-top: 28px !important;
  }
  .fade-up > div br { display: none !important; }
  .fade-up > div div[style*="font-size:21px"] {
    font-size: 16px !important;
    line-height: 1.35em !important;
    margin-top: 20px !important;
  }
  .fade-up > div > div[style*="margin-top:-44px"] { margin-top: 20px !important; }
  h1[style*="font-size: 60px"], h1[style*="font-size:60px"] {
    font-size: clamp(26px, 5.5vw, 42px) !important;
  }
  .trustpilot-badge { margin-top: 60px !important; }
 
  /* ── Cards ── */
  div[style*="display:flex"][style*="justify-content:center"] { flex-wrap: wrap !important; }
  #ddD_DCCCCC, #dd_Ppsss_shared, #D_Ddccaaddd, #D_Ddcc_otherPdd, #DJDD__DD {
    margin-left: 0 !important;
    margin-top: 22px !important;
  }
  div[style*="width:395px"], div[style*="width:390px"], div[style*="width:432px"],
  div[style*="width:410px"], div[style*="width:365px"], div[style*="width:360px"] {
    width: min(420px, 90vw) !important;
    margin-left: 0 !important;
  }
  .dkd_Dcacsdd {
    width: min(420px, 90vw) !important;
    margin-left: 0 !important;
    margin-top: 20px !important;
  }
 
  /* ── Headings ── */
  h2 { font-size: clamp(24px, 6vw, 40px) !important; }
 
  /* ── Share section ── */
  #_D_imfff { display: none !important; }
  #D_DDDDDa { margin-left: 0 !important; font-size: clamp(28px, 7vw, 46px) !important; }
  #d_DDDDDaa { margin-left: 0 !important; font-size: 16px !important; }
  #d_DDDDDaa br { display: none !important; }
 
  /* ── Country list ── */
  .D_DDccca { flex-wrap: wrap !important; gap: 16px !important; justify-content: center !important; }
  #dkd_Dddadd { margin-left: 0 !important; }
  #dddD_DCCAC { margin-left: 0 !important; }
 
  /* ── Photo stack: hide entirely on mobile ── */
  div[style*="margin-top:60px"][style*="justify-content:center"] {
    display: none !important;
  }
  #AD_pca_lm1, #AD_pca_lm2, #AD_pca_lm3, #AD_pca_lm4 {
    display: none !important;
  }
  #AD_pca_lm1, #AD_pca_lm2, #AD_pca_lm3 { margin-left: 0 !important; }
 
  /* ── FAQ / misc ── */
  #dd_otherPdD, #_PpsdddSHhar, #_DSADDSSDADSAD { width: 92vw !important; }
 
  /* ── Footer ── */
  div[style*="height:272px"], div[style*="height:60px"], div[style*="height:240px"] {
    height: auto !important;
  }
  #djdjX_Pxpx {
    position: static !important;
    margin: 0 auto 14px !important;
    display: block !important;
    width: 140px !important;
  }
  div[style*="color:black"][style*="margin-left:281px"] {
    margin-left: 0 !important;
    text-align: center !important;
    margin-top: 10px !important;
  }
  div[style*="font-weight:bold"][style*="font-size:14px"][style*="display:flex"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-left: 0 !important;
  }
  div[style*="height:272px"][style*="background-color:white"][style*="display:flex"],
  div[style*="height:272px"][style*="background-color:#F7F7F7"][style*="display:flex"] {
    height: auto !important;
    padding: 18px 12px !important;
  }
  div[style*="height:272px"] div[style*="margin-left:88px"] { margin-left: 0 !important; }
  div[style*="height:60px"][style*="background-color:white"],
  div[style*="height:60px"][style*="background-color:#F7F7F7"] {
    height: auto !important;
    padding: 12px !important;
  }
  div[style*="height:60px"] > div[style*="margin-left:-"] { margin-left: 0 !important; }
  div[style*="margin-top:35px"][style*="display:flex"] {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  div[style*="height:240px"] > div {
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 0 !important;
  }
  div[style*="margin-left:243px"],
  div[style*="margin-left:260px"] { margin-left: 0 !important; }
  #djd____pssmsm { display: none !important; }
  #_DddkdD_Dldsssss br { display: none; }
  .ddd_amkd { margin-top: 20px !important; }
  .D_DDccca { display: block !important; }
  #dkd_Dddadd { margin-left: 0 !important; margin-top: 55px !important; }
}
 
/* ── 501–680px: both buttons visible but nav gets tight —
      shrink logo + buttons just enough to prevent clipping.
      680px+ has plenty of room so this never fires there. ── */
@media (max-width: 680px) and (min-width: 501px) {
  #dkd_Xxx { width: 120px !important; }
  #nav-compact-login  { width: 90px !important; font-size: 14px !important; }
  #nav-compact-signup { width: 96px !important; font-size: 14px !important; }
  #djdX_XXXxxasadsds > div { padding: 0 10px !important; }
}

/* ── ≤500px: hide Log in, keep Sign up only ── */
@media (max-width: 500px) {
  #nav-compact-login { display: none !important; }
  #dkd_Xxx { width: 130px !important; }
}
 
/* ── ≤380px: very small phones ── */
@media (max-width: 380px) {
  h1 { font-size: 22px !important; }
  h2 { font-size: 20px !important; }
  .fade-up > div[style*="width"] { width: 96vw !important; }
  div[style*="width:395px"], div[style*="width:390px"], div[style*="width:432px"],
  div[style*="width:410px"], div[style*="width:365px"], div[style*="width:360px"],
  .dkd_Dcacsdd { width: 96vw !important; margin-left: 0 !important; }
  #dkd_Xxx { width: 115px !important; }
  #nav-compact-signup { width: 100px !important; font-size: 14px !important; }
}
/* ════════════════════════════════════════════════════════════
   SMALL-DESKTOP NAV FIX — 901px to 1400px
   Above 1400px: zero changes. Below 901px: hamburger drawer.
   In the 901–1400px range we flip from "centered group" to
   "logo + nav buttons on the LEFT, auth buttons on the RIGHT".
   ════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1400px) {
  /* Side padding so items don't touch the screen edges */
  #djdX_XXXxxasadsds > div {
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }
  /* Push auth block flush right.
     auto margin beats parent's inline justify-content:center. */
  #djdX_XXXxxasadsds > div > div[style*="margin-left:273px"] {
    margin-left: auto !important;
  }
  /* Tighten the 40px gap between logo and the first nav button */
  #djdX_XXXxxasadsds > div > a > button[style*="margin-left:40px"] {
    margin-left: 14px !important;
  }
}

/* ── Narrow desktops 901–1130px: original button widths won't fit
      with the left/right split, so collapse widths + logo here.
      Below 901px the hamburger drawer takes over. ── */
@media (min-width: 901px) and (max-width: 1130px) {
  /* Drop fixed widths on nav text buttons */
  #djdX_XXXxxasadsds > div > a > button#dkdX__XXXDD_Dxx,
  #djdX_XXXxxasadsds > div > button#dkdX__XXXDD_Dxx {
    width: auto !important;
    padding: 0 10px !important;
    font-size: 16px !important;
  }
  /* Logo a touch smaller */
  #dkd_Xxx { width: 150px !important; }
  /* Even less margin between logo and first nav button */
  #djdX_XXXxxasadsds > div > a > button[style*="margin-left:40px"] {
    margin-left: 6px !important;
  }
  /* Tighter container padding */
  #djdX_XXXxxasadsds > div {
    padding: 0 12px !important;
  }
}
/* ════════════════════════════════════════════════════════════
   HERO RESPONSIVE — 901px to 1400px
   Above 1400px: zero changes (original 1350px text + 570px
   banner at margin-left:785px fits fine).
   In this range we re-anchor the banner from the right edge,
   left-align the hero text, and clamp the headline so it
   physically can't enter banner space.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1400px) {
  /* Left-align the hero so the banner has the right side to itself.
     !important beats inline justify-content:center. */

 
  /* Scale the headline down with viewport so it fits the new width.
     At 1400px clamp returns 49px (no diff). At 901px it returns 34px. */
  h1[style*="font-size: 60px"], h1[style*="font-size:60px"] {
    font-size: clamp(34px, 3.6vw, 60px) !important;
  }
  /* Re-anchor banner from the right edge + scale it with viewport.
     Override inline margin-left:785px and inline width:570px. */
  img[src*="home_page_banner_updated"] {
    margin-left: 0 !important;
    margin-top: 130px !important;
    left: auto !important;
    right: 30px !important;
    width: clamp(320px, 32vw, 460px) !important;
  }
}

/* ── Below 1100px the banner has no useful space left.
      Hide it and let the headline take the full row.
      Existing ≤900px rules already handle hamburger + banner hide. ── */
@media (min-width: 901px) and (max-width: 1100px) {
  img[src*="home_page_banner_updated"] {
    display: none !important;
  }
  .fade-up {
    justify-content: center !important;
  }
  /* Re-center the inner text block so text-align:center works relative to full width */
  .fade-up > div {
    text-align: center !important;
    width: 92vw !important;
    max-width: 820px !important;
  }
}
/* ════════════════════════════════════════════════════════════
   FAQ RESPONSIVE — 901px to 1400px
   Question rows (915px) + answer bodies (789px) are pixel-fixed.
   We make them fluid in this range while pinning max-width to the
   original values so >1400px is byte-identical.
   The ≤900px block already handles mobile.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1400px) {
  /* Question row: shrink with viewport, never larger than original */
  #fdfdfDibvD > div > div[onclick] {
    width: calc(100vw - 60px) !important;
    max-width: 915px !important;
  }
  /* Answer body: same idea, keeping the original 126px-narrower ratio */
  #fdfdfDibvD #tetetfc {
    width: calc(100vw - 186px) !important;
    max-width: 789px !important;
  }
}
/* ════════════════════════════════════════════════════════════
   HERO CENTERING — always center headline, subtext, and CTA
   Only the 1101–1400px range shifts left to make room for the
   visible banner image; everything else is dead-center.
   ════════════════════════════════════════════════════════════ */
 
/* Base: force center on all screens */
.fade-up {
  display: flex !important;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.fade-up > div {
  text-align: center !important;
}
 
/* Only left-shift when the banner is actually on screen */
@media (min-width: 1101px) and (max-width: 1400px) {
  .fade-up > div {
    text-align: left !important;
  }
}
 
/* Mobile: give the inner block a sensible fluid width so
   text-align:center is relative to the full viewport */
@media (max-width: 900px) {
  .fade-up {
    padding: 0 16px !important;
  }
  .fade-up > div {
    width: 100% !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  /* Kill the negative margin that pulls the button into the subtext */
  div[style*="margin-top:-44px"] {
    margin-top: 20px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PHOTO CARD STAGGERED POP-IN ANIMATIONS
   Card 1 (#AD_pca_lm1) is visible immediately on load.
   Cards 2–4 appear one by one, scaling from 0 → full size.
   Each card keeps its original rotation throughout.
   ════════════════════════════════════════════════════════════ */

@keyframes photoCard2Pop {
  from {
    opacity: 0;
    scale: 0.01;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes photoCard3Pop {
  from {
    opacity: 0;
    scale: 0.01;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes photoCard4Pop {
  from {
    opacity: 0;
    scale: 0.01;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

#AD_pca_lm2 {
  animation: photoCard2Pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

#AD_pca_lm3 {
  animation: photoCard3Pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
}

#AD_pca_lm4 {
  animation: photoCard4Pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.56s both;
}
   .carousel-outer {
      width: 1365px;
      max-width: 100%;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
 padding-bottom: 30px;
      margin-bottom: -30px;
     margin-top:10px;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .carousel-track {
      display: flex;
      align-items: flex-start;
      width: max-content;
      animation: scroll-left 28s linear infinite;
    }

    .carousel-track:hover {
      animation-play-state: paused;
    }

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

    .card-wrap {
      flex-shrink: 0;
      padding: 20px 11px;
    }
    #AD_pca_lm_Dddas {
  transition: transform 0.3s ease;
}

#AD_pca_lm_Dddas:hover {
  transform: rotate(2.5deg) !important;

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

#AD_pca_lm_Dddas2:hover {
  transform: rotate(-2.5deg) !important;

}
@media (max-width: 1015px) {
  div[style*="width:1016px"] {
    display: none !important;
  }
}
#dkd_pdddd:hover {
  opacity:0.7;
}
@media (max-width: 900px) {
  div[style*="width:432px"] div[style*="width:350px"] {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}