/*
Theme Name: Caducs_galaxy

Description: caducs new costum design.
Version: 1.0
Text Domain: my-caducs-theme
Tags: custom
*/
/* ====================== */
/* LIVE SEARCH RESULTS    */
/* ====================== */
#live-search-results {
  position: absolute;
  top: 110%; /* just below input */
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1vw;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  padding: 0.5vw 0;
}
.elementor-element .e-con-inner {
  display: contents; /* makes wrapper "disappear" */
}

#live-search-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#live-search-results li {
  padding: 0.8vw 1.5vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease;
}

#live-search-results li:last-child {
  border-bottom: none;
}

#live-search-results a {
  text-decoration: none;
  font-size: 1.2vw;
  color: #fffbed;
  display: block;
}

#live-search-results li:hover {
  background: rgba(255, 255, 255, 0.08);
}

#live-search-results a:hover {
  color: #FAA73D; /* same gradient tone */
}

/* "No results" style */
#live-search-results p {
  padding: 1vw;
  margin: 0;
  font-size: 1.1vw;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* ====================== */
/* FONT FACE DEFINITIONS  */
/* ====================== */
@font-face {
    font-family: 'MyFont';
    src: url('font/molgan-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ====================== */
/* BASE STYLES            */
/* ====================== */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    scroll-behavior: smooth;
    font-family: 'MyFont', sans-serif;
    background-color: black;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.fullscreen-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
}

.mask-container {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}
.bottom-half-visible {
    width: 110vw;
    height: auto;
}

.top-centered-image {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110vw;
    height: auto;
    z-index: 3;
    pointer-events: none;
    transition: transform 0.05s linear, opacity 0.1s ease-out;
    opacity: 1;
}

#starCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    opacity: 0.3;
}
section {
    padding: 4.465vh 3.229vw 4.465vh 3.229vw !important;
    gap: 0px !important;
}
.overlay {
    position: fixed;
    flex-direction: column;
    justify-content: start;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding:2vh 1vw;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.overlay.active {
    display: flex;
}
.search-wrapper {
  width: 45vw;
  height: 4.57vw;
  margin-bottom: 5.859vh;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4vw;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  padding: 0 2vw;
  margin-top: 0px;
  margin-left: 25vw;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.overlay h2 {
    font-size: 3vw;
    cursor: pointer;
    position: fixed;
    right: 4vw;
  width: 2vw;
  height: 1vw;
  margin-bottom: 5.859vh;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2vw;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 2vw;
  margin: 0px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-weight:bold;
    background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #FAA73D, #FDD248);
}
.search-wrapper input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 16px;
  font-family: 'Space Grotesk', sans-serif;
}

.search-wrapper img{
    width: 2vw;
    height: 2vw;
    
}
/* ====================== */
/* HEADER & NAVIGATION    */
/* ====================== */
#upbar, main, footer {
    position: relative;
    z-index: 9;
}

#upbar {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    isolation: isolate; /* creates its own stacking context */

}

.header-left {
    display: flex;
    margin-top: 2.604166vw;
    margin-left: 8.38vw;
    align-items: center;
}

.header-left img {
    width: 5.57vw;
    height: auto;          /* ensures proportional scaling */
}

.popup-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 30vw;
    height: 100vh;
    padding: 0px 5vw;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
    transition: right 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
}

.popup-menu.active {
    right: 0;
    /* Slide in */
}

.popup-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.popup-menu ul {
    list-style: none;
    padding: 0;
}

.popup-menu ul li {
    margin-bottom: 15px;
}

.popup-menu ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 18px;
}



/* Default: hide hamburger */
.menu-toggle {
    display: none;
    position: fixed;
    gap: 3.47772vw;
    padding: 1.5vw 3.125vw;
    color: white;
    right: 3.125vw;
    z-index: 10;
}

.menu-toggle img {
    width: 4.166vw;
    cursor: pointer;

}

.header-center ul {
    padding: 0 10px;
    display: flex;
    position: fixed;
    transform: translateX(-50%);
    gap: 1.822vw;
    height: 4.57vw;
    list-style: none;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.66666666666vw;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-items: center;
    align-items: center;
    margin-top: 2vw;
    z-index: 99;
}
.header-center.unactive{
    display: none;
}
.header-center a {
    text-decoration: none;
    color: white;
    font-size: 1.966666666666vw;
    font-weight: 400;
}

.header-center a.active {
    color: orange;
}

.header-center a:hover {
    color: orange;
}

.header-right {
    margin-right: 8.40625vw;
    margin-top: 3.2291vw;
        display: flex;

}

.header-right img {
    height: 1.875vw !important;
        cursor:pointer;

}

/* ====================== */
/* HOME SECTION           */
/* ====================== */
#Home {
    padding: 0px;
    padding: 0px 2vw;
    display: flex;
    justify-content: space-between;
    align-items: start;
}


#homeSection h1 {
    font-size: 3.334vw;
    margin-bottom: 0;
}

#Home img {
    width: 35.479vw;
}

#contacts {
    display: flex;
    flex-direction: column;
    position: fixed;
    gap: 1vh;
    bottom: 1vh;
    right: 1vw;
}

.section p {
    color: rgba(255, 255, 255, 0.724);
    font-family: "Space Grotesk", sans-serif;
    padding: 5.8593vh 0px;
    font-size: 1.666666666666vw;
    font-weight: 400;
    margin: 0;
    text-align: start;
}



/* ====================== */
/* CONTENT SECTIONS       */
/* ====================== */

.content-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.7708vw;
    padding: 1.5625vw;

    margin: 2.25vh 0px !important;
}

.content-row {
    display: flex;
    gap: 4.427vw;
    align-items: center;
        align-items: stretch; /* Changed from 'center' to make children stretch full height */
}
.content-row.features{
    gap: 1vw;
}

.content-text {
    width: 45.5729vw;
}

.content-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2.29166vw;
    border-radius: 1vw;
}

.content-images img {
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

/* Container should hide overflow for zoom effect */
.content-images {
    overflow: hidden;
}

.content-images img:hover {
    transform: scale(1.1); /* Zoom in slightly */
}


.content-title {
    font-size: 2.67vw;
    font-weight: 400;
    color: #fffbed;
    margin-bottom: 3.125vw;
    width: 45.572vw;
}

.content-description {
    font-size: 1.26vw;
    font-family: "Space Grotesk", sans-serif;
    text-align: start;
    font-weight: 400;
    color: rgba(255, 251, 237, 0.77);
    margin-top: 0px;
}

/* ====================== */
/* FEATURES GRID          */
/* ====================== */
.features-grid4 {
    display: flex;
    margin-bottom: 2.25vh;
    gap: 1.093775vw;
}

.feature-card {
    display: flex;
    gap: 1.1979vw;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 1.531vw;
    padding: 1.302vw;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-card:hover {
    transform: translateY(-5px);
}
.features-grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.045vw;
    width: 100%;
}
.feature-card2 {
    display: flex;
    gap: 1.1979vw;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 1.531vw;
    padding: 1.302vw;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.feature-card2.summary {
    display: flex
;
    flex-direction: column;
    align-items: center;
}
.feature-card-summary-row {
    width: 100%;
    display: grid
;
    grid-template-columns: 1.5fr 1fr;
    flex: 1;
    justify-content: space-between;
    align-content: space-between;
}
.right-job, .left-job {
    display: flex
;
    flex-direction: column;
    gap: 2vw;
}
.right-job .feature-card2-job, .left-job .feature-card2-job {
    display: flex
;
    gap: 1vw;
}
.feature-card2.job {
    display: inline-block;
}
.feature-card2.summary h2 {
    color: #FFFBEDC4;
    font-size: 2.5vw;
    font-weight: 100;
}
.feature-content h4 {
    font-size: 2vw;
    color: #FFFBED;
    font-weight: 200;
}
.feature-content ul li {
    font-size: 1.26vw;
    font-family: "Space Grotesk", sans-serif;
    text-align: start;
    font-weight: 400;
    color: rgba(255, 251, 237, 0.77);
    margin-top: 0px;
}
#full-image {
    width: 100%;
    height: 100%;
}
.feature-icon.job {
    height: 4vw;
    width: 4vw;
}
.feature-icon {
    width: 3.3333vw;
    flex-shrink: 0;
}
.feature-content.job p {
    font-size: 1.577vw;
    color: #FFFBED;
    font-weight: bold;
}

.feature-content h3 {
    font-size: 1.577vw;
    font-weight: 400;
    color: #fffbed;
    margin-bottom: 0.677vw;
    margin-top: 0px;
}

.feature-content p {
    font-size: 0.8757vw;
    font-family: "Space Grotesk", sans-serif;
    margin: 0px;
    font-weight: 400;
    color: rgba(255, 251, 237, 0.77);
}

/* ====================== */
/* SERVICES SECTION       */
/* ====================== */

.section-title {
    font-size: 3.333vw;
    font-weight: 400;
    color: #fffbed;
    margin: 2.25vh 0px !important;
    margin-top: 0px;
    text-align: center;
}

.section-description {
    font-size: 1.6666vw;
    font-weight: 400;
    color: rgba(255, 251, 237, 0.77);
    margin-top: 0px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: "Space Grotesk", sans-serif;
    width: 79.42vw;
    margin: 2.25vh auto !important;
}

#dev_languages {
    display: block;
    width: 80.130vw;
    margin:2.25vh auto;
    
}
.services-grid {
    display: grid;
    margin: 2.25vh 0px;
    grid-template-columns: 30.3125vw 30.3125vw 30.3125vw;
    gap: 1.19791vw;
}

.image-wrapper {
    position: relative;
    display: flex
;
    flex-direction: column;
    align-items: center;
}
.image-container {
    position: relative;
    overflow: visible;
    width: 29.55185vw;
    height: 19.5296vw;
}
.image-container img {
    border-radius: 2vw !important;
    border-radius: 0;
    object-fit: fill !important;
    height: 100% !important;
    max-width: 100% !important;
}
.service-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.8229vw;
    padding: 0.677vw 0.677vw 2.08333vw 0.6777vw;
    transition: transform 0.3s ease;
}


.service-content {
    display: flex;
    flex-direction: column;
    gap: 2.08333vw;
    align-items: center;
}

.service-image {
    width: 29.010vw;
    object-fit: cover;
}

.service-info {
    display: flex;
    flex-direction: column;
}

.service-title {
    font-size: 1.875vw;
    font-weight: 400;
    color: #fffbed;
    margin: 0px;
    text-align: center;
}

.service-description {
    font-size: 1.21614vw;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    color: rgba(255, 251, 237, 0.77);
    margin: 1.40625 0px;
    text-align: center;
}

.service-btn {
    font-family: 'Inter', sans-serif;
    font-size: 1.04166vw;
    font-weight: 600;
    color: #fffbed;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.041666vw;
    text-decoration: none;
    display: inline-flex;
    transition: all 0.3s ease;
    justify-content: center;
    align-items: center;
    width: 8.26666666vw;
    height: 3.177vw;
}

.service-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* ====================== */
/* STATS SECTION          */
/* ====================== */
.stats {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: 21.35vw 21.35vw 21.35vw 21.35vw;
    gap: 2.708vw;
    margin: 2.25vh 0px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 1.458333vw;
    padding: 1.302vw;
    text-align: center;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: scale(1.05);
}

.stat-number {
    font-size: 6.666vw;
    font-weight: 400;
    color: #fffbed;
    margin-bottom: 3px;
}

.stat-label {
    font-size: 2.5vw;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    color: #fffbed;
}
.services-grid-wrapper {
    overflow-x: auto;       /* enables horizontal scrolling */
    width: 100%;            /* prevent it from exceeding viewport */
        scrollbar-width: none;    /* Firefox */

}
.services-grid-wrapper::-webkit-scrollbar {
    display: none;            /* Chrome, Edge, Safari */
}

.services-grid.horizontal {
    display: flex;
    flex-wrap: nowrap;      /* keep all cards in one row */
    gap: 3.85416vw;
    box-sizing: border-box;
}

.service-card.horizontal{
    flex: 0 0 30.3125vw;   /* fixed card width, no shrinking */
}

/* ====================== */
/* PORTFOLIO SECTION      */
/* ====================== */
.portfolio {
    text-align: center;
    margin: 11.71875vh 0;
}

.portfolio-slider {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.portfolio-images {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 77.8229vw;
    margin:2.25vh 0px;
}

.imageButton {
    display: flex;
    margin-top: 5.9041vh;
    width: 77.8229vw;
    justify-content: flex-start;
    padding-left: calc((77.8229vw - totalImageWidth) / 2);
}

.activeImageButton {
    width: 7.770833vw;
    height: 1.849vw;
    border-radius: 3.0833vw;
    border: 0;
    background: linear-gradient(to left, #FAA73D, #FDD248);
    cursor: pointer;
    transition: width 0.4s ease-in-out;
}

.unactiveImageButton {
    width: 3.0828vw;
    height: 1.849vw;
    border: 0;
    border-radius: 3.0833vw;
    background: linear-gradient(to left, #FAA73D, #FDD248);
    cursor: pointer;
    transition: width 0.4s ease-in-out;
}

.portfolio-side {
            cursor: pointer; 
    width: 15.4109vw !important;
    height: 37.708333vw !important;
    border-radius: 3.0208vw !important;
    object-fit: cover;
    transition: width 0.4s ease-in-out;
    display: block;
}

.portfolio-side.active {
    width: 37.708333vw !important;
}
.content-card-transparent {
    background: transparent;
    padding: 0px 1.5625vw;
    border: none;
    margin: 2.25vh 0px !important
}
.content-card-transparent.features{
padding: 0px;
}
/* ====================== */
/* TESTIMONIALS SECTION   */
/* ====================== */
.testimonials {
    display: flex;
    flex-direction: column;
    margin: 0;
    margin-top: 11.71875vh;
}

.testimonials-grid {
    display: grid;
    margin: 2.25vh 0px;
    grid-template-columns: 46.25vw 46.25vw;
    gap: 1.145vw;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.04);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.7708vw;
    padding: 3.5vw 3.02088vw 3.02088vw 3.02088vw;
    position: relative;
}

.testimonial-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3.0208vw;
}

.testimonial-profile {
    display: flex;
}

.testimonial-avatar {
    width: 9.375vw;
    height: 9.375vw;
    margin-right: 3.0208vw;
}

.testimonial-info h4 {
    font-size: 2.2395vw;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 1.04166vw;
}

.testimonial-info p {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.875vw;
    font-weight: 400;
    margin-top: 0;
    color: rgba(255, 255, 255, 0.5);
}

.testimonial-quote {
    width: 4.7vw;
    height: 3.75vw !important;
}

.testimonial-text {
    font-size: 1.875vw;
    font-weight: 400;
    text-align: start;
    color: rgba(255, 255, 255, 0.8);
    margin: 0px;
    font-family: "Space Grotesk", sans-serif;
}

/* ====================== */
/* CONTACT SECTION        */
/* ====================== */
.contact {
    margin-bottom: 255px;
}

.contact-info {
    display: grid;
    grid-template-columns: 18.2125vw 19.2185vw 28.2291vw 24.2708vw;
    gap: 1.30208vw;
    margin-bottom: 5.8593vh;
}

.contact-location {
    height: 3.4078125vw;
    display: flex;
    gap: 1.15vw;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 1.5317vw;
    padding: 2.30208vw;
}

.contact-location img {
    width: 3.33vw;
}

.contact-location span {
    font-size: 1.25vw;
    font-weight: 400;
    color: #fffbed;
    flex: 1;
    text-align: left;
}

.contact-icon {
    cursor: pointer;
    width: 6.875vw;
    height: 4.375vw;
    backdrop-filter: blur(2px) saturate(180%);
    border-radius: 2vw;

}

.contact-form {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2.29166vw;
    margin: 0px auto;
    width: 56.1458vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5vw 0px;
}

.form-row {
    display: flex;
    justify-content: start;
    gap: 3.125vw;
    margin-bottom: 12px;
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    font-size: 1.35625vw;
    font-weight: 400;
    line-height: 32px;
    color: #fffbed;
    display: block;
}

.form-group input,
.form-group textarea {
    width: 47.99vw;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.9375vw;
    padding: 0.78125vw;
    color: #fffbed;
    font-size: 0.9375;
    outline: 0;
}

.form-group select {
    width: 47.62vw;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-position: left 9.5vw center;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 1.01718vw;
    padding: 0.78125vw;
    color: #fffbed;
    font-size:1rem;
    outline: 0px;
}

#firstName,
#lastName {
    width: 21.6vw;
    margin-bottom: 0px;
    outline: none;
}

.form-group select option {
    background-color: rgba(39, 39, 39, 0.836);
    border: 0px;
    color: #fffbed;
}

.form-group textarea {
    height: 11.71875vh;
    resize: vertical;
}

.phone-input {
    display: flex;
    gap: 1.19791vw;
}

.country-picker {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9375vw;
    width: 9.4932vw;
}

.country-picker span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375vw;
    font-weight: 700;
    line-height: 24px;
    color: #fffbed;
}

.country-picker img {
    width: 1.5625vw;
    height: 1.5625vw;
}

.checkbox-group {
    align-self: flex-start;
    display: flex;
    align-items: center;
    max-width: 47.99vw;
    margin-left: 3vw;
}

.checkbox-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.04166vw;
    height: 1.04166vw;
    border: 1px solid #d9d9d9;
    border-radius: 0.3vw;
    background-color: #ffffff;
    position: relative;
    cursor: pointer;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.checkbox-group input[type="checkbox"]:checked {
    background: linear-gradient(to right,#FAA73D,#FDD248);
    border-color: #FDD248;
}

.checkbox-group input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    width: 0.3vw;
    height: 0.6vw;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

.checkbox-group input[type="checkbox"]:checked::before {
    opacity: 1;
}

.checkbox-group label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375vw;
    font-weight: 400;
    color: #fffbed;
    flex: 1;
}

.submit-btn {
    font-family: 'Inter', sans-serif;
    align-self: flex-start;
    margin-left: 3vw;
    margin-top: 30px;
    font-size: 1.145833vw;
    font-weight: 400;
    color: #fffbed;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.1458vw;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 13.6979vw;
    height: 4.1177vw;
}

#phone {
    width: 37.276vw;
}

.submit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* ====================== */
/* FOOTER SECTION         */
/* ====================== */
.footer {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 0;
    margin-top: 9vh;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 58px;
}

.footer-stars {
    width: 338px;
    height: 318px;
}

.footer-center {
    display: flex;
    flex-direction: column;
    gap: 3.515625vh;
    align-items: center;
}

.footer-nav {
    display: flex;
    gap: 3.7583333vw;
    align-items: center;
}

.footer-nav a {
    font-size: 1.0416vw;
    font-weight: 400;
    line-height: 25px;
    color: #fffbed;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-nav a:hover {
    opacity: 0.7;
}

.footer-social {
    display: flex;
    gap: 1.0552vw;
    align-items: center;
}

.footer-social img {
    width: 2.6041vw;
    height: 2.6041vw;
    transition: opacity 0.3s ease;
}

.footer-social img:hover {
    opacity: 0.7;
}

.footer-logo {
    width: 4.479166vw;
    height: 4.0416vw;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding: 0px 3.645vw;
    box-sizing: border-box;
    /* includes padding in width calculation */
    align-items: start;
    width: 100vw;
    font-size: 0.9375vw;
}

.footer-copyright {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 24px;
    color: #fffbed;
}

.footer-legal {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 24px;
    color: #fffbed;
}

.footer-legal a {
    background: linear-gradient(270deg, #faa73d 0%, #fdd248 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration:line-through;
}
.content-text.features{
    width: 40vw;
}
.content-text.careers {
    display: flex
;
    flex-direction: column;
    text-align: center;
    width: 100%;
    align-items: center;
}
.availible-careers {
display: flex
;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    gap: 4vw;
    font-size: 1.26vw;
}
.career-tab.active-career-tab
{
    background: linear-gradient(to left, #FAA73D, #FDD248);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.career-tab {
        cursor: pointer;
    color: #FFFBED;
    font-weight: 100;
}
.content-description.careers {
    margin: 0px 9vw;
    text-align: center;
}
.offers span {
    font-family: 'Space Grotesk', sans-serif;
 
    color: #FFFBED;
}
.offers h5 {
    color: #FFFBEDC4;
    font-size: 1.25vw;
    font-weight: 200;
}
.career-details {
    background: linear-gradient(to right, #FDD248, #FAA73D);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    cursor: pointer;
}
.offers {
    display: flex
;
    gap: 1.822vw;
    width: 43.42vw;
    height: 4.57vw;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.66666666666vw;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-content: space-evenly;
    align-items: center;
    margin-top: 1.04166vw;
    padding-left: 1.822vw;
    z-index: 10;
}
.offers {
    display: flex;
    gap: 1.822vw;
    width: 43.42vw;
    /* remove fixed height so it grows with content */
    min-height: 4.57vw;
    height: auto;

    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.66666666666vw;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-content: space-evenly;
    align-items: center;
    margin-top: 1.04166vw;
    padding: 0.8vw 1.822vw; /* give breathing room inside */
    z-index: 10;

    /* allow wrapping if one element is too long */
    flex-wrap: wrap;
    text-align: center;
}
[dir="rtl"] .menu-toggle {
    flex-direction: row-reverse;
    right: auto;        /* unset original right */
    left: 3.125vw;      /* position from left side */
    width: auto;        /* shrink to content */
}

.offers h5 {
    color: #FFFBEDC4;
    font-size: 1.1vw;
    font-weight: 200;
    margin: 0;
    flex: 1;                /* makes each column take equal width */
    word-wrap: break-word;  /* breaks long words instead of overflowing */
}
.offers .job-title {
    flex: 2; /* give job title more space than others */
    color: #FFFBED;
}
.job-title{
    display: flex
;
    justify-content: space-between;
    margin-bottom: 2vw;
}
.section-title.job{
margin: auto 0px !important;
}
/* ====================== */
/* BUTTONS                */
/* ====================== */
.btn {
    margin: 0 1.71875vw 0 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.8229vw;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    color: rgba(255, 255, 255, 0.886);
    text-decoration: none;
    font-size: 1.966666666666vw;
        transition: all 0.3s ease;
    width: 17.9vw;
    height: 4.57vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn.job{
    cursor: pointer;
    margin: 0px;
    background: rgba(255, 255, 255, 0.04);
    width: 13.75vw;
    height: 4.941666vw;
    border-radius: 1.6406vw;
    border: 1px solid rgba(255, 255, 255, 0.1);
    top: 0;
}
.feature-content h3 {
    margin: 0 0 0.677vw;
}
.feature-content p{
    margin: 0;
}
.content-text.features{
        width: 100%;
    }
.btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}
.btn-main {
    display: block;
    text-align: center;
    transition: transform 0.3s 
ease;
    width: 100%;
}
.hover-description {
    display: block;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s 
ease, max-height 0.6s 
ease, margin-top 0.3s 
ease;
    text-align: center;
    color: #fffbed77;
    font-size: 1vw;
    font-family: "Space Grotesk", sans-serif;
    width: 100%;
    padding: 0;
    margin: 0;
    transform: translateY(-10px);
}
.btn:hover .hover-description {
    opacity: 1;
    max-height: 100vh;
    margin-top: 1.5vh;
    transform: translateY(0);
}
.btn.wrapper{
    position: relative;
    border: none;
    border-radius: 3vh;
    color: white;
    cursor: pointer;
    z-index: 1;
    transition: all 0.4s 
ease;
    width: 75%;
    font-family: 'Myfont';
    font-size: 2vw;
    font-weight: lighter;
    top: -4vh;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5vh 2vw;
    overflow: hidden;
    box-sizing: border-box;
    height: auto;
    min-height: 4vh;
}
/* ====================== */
/* SECTION STYLES         */
/* ====================== */
.section h1 {
    text-align: start;
    color: white;
    font-weight: 400;
    margin: 0px;
}
/* ====================== */
/* RTL SPECIFIC STYLES    */
/* ====================== */


/* Header adjustments for RTL */
[dir="rtl"] #upbar {
    flex-direction: row-reverse;
}

[dir="rtl"] .header-center a {
font-size: 1.6666vw;
}

[dir="rtl"] .header-center {
    order: 0;
}
[dir="rtl"] .header-right{
    flex-direction: row-reverse;
}

[dir="rtl"] .header-center ul {
transform: translateX(-73vw);
}
[dir="rtl"] .testimonial-avatar{
    margin-left: 3.0208vw;
    margin-right: 0px;
}
/* Content adjustments */
[dir="rtl"] .search-wrapper {
    margin-right: 25vw;
}

[dir="rtl"] .content-text {
    text-align: right;
}

[dir="rtl"] .content-description,
[dir="rtl"] .feature-content p,
[dir="rtl"] .service-description,
[dir="rtl"] .testimonial-text {
    text-align: right;
}

/* Form adjustments */
[dir="rtl"] .form-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .checkbox-group {
    margin-right: 3vw;
    margin-left: 0;
}

[dir="rtl"] .submit-btn {
    margin-right: 3vw;
    margin-left: 0;
}

/* Footer adjustments */
[dir="rtl"] .footer-nav {
    flex-direction: row-reverse;
}

[dir="rtl"] .footer-bottom {
    flex-direction: row-reverse;
}

/* Contact adjustments */
[dir="rtl"] .contact-info {
    direction: ltr; /* Keep contact info LTR even in RTL */
}


/* Mobile menu adjustments */
[dir="rtl"] .popup-menu {
    right: auto;
    left: -100%;
}

[dir="rtl"] .popup-menu.active {
    left: 0;
    right: auto;
}

/* Image positioning adjustments */
[dir="rtl"] #Home img {
    margin-right: 0;
    margin-left: 7vw;
}

[dir="rtl"] #homeSection {
    margin-left: 0;
    margin-right: 9.453vw;
}

/* Contact icons positioning */
[dir="rtl"] #contacts {
    right: auto;
    left: 1vw;
}
.feature-content.features p {
    font-size: 1.577vw;
    color: #FFFBED;
    font-weight: bold;
}
.menu-toggle.unactive{
    display: none;
}
#upbar.unactive{
   width: 0;
}
.search-layout {
    display: flex
;
    gap: 3.593vw;
}
.category-link.active {
    color: orange;
}

.category-link {
    text-decoration: none;
    color: white;
    font-size: 1.466666666666vw;
    font-weight: 400;
}
.blog-sections {
    margin-bottom: 5.859vh;
    display: flex
; padding: 0.5vw ;
    gap: 1.822vw;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.822916vw;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-content: space-evenly;
    align-items: center;
    z-index: 10;
}
.service-imageBig {
    width: 100%;
    height: 47.64625vh;
}
.services-grid1 {
    grid-template-columns: repeat(1, 1fr);
    text-align: start;
    flex-direction: column;
    gap: 5.859vh;
    display: flex
;
}
.search-left {
    width: 65%;
}
.search-right {
    width: 30%;
}
.posts-switch {
    display: flex
;
    color: white;
    align-items: center;
    justify-content: end;
    gap: 1.442708333333333vw;
    margin-right: 0.35vw;
}
.posts-switch p {
    padding: 1.07vw 2.7vw;
    border-radius: 1vw;
    background-color: #FFFFFF0A;
    border: 2px solid #FFFFFF1A;
    font-weight: bolder;
    cursor: pointer;
    font-size: 2vw;
}
.posts-switch p a{

    color: #ffffff;

}
#starCanvas {
  pointer-events: none;
}

.search-blog {
    height: 4.57vw;
    margin-bottom: 5.859vh;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.822916vw;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex
;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
#search_icon{
    width: 1.75vw;
    height: 1.75vw;
}
#search-blog-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 16px;
    font-family: 'Space Grotesk', sans-serif;
}
#form_search{
width: 100%;
    display: flex
;
}
.service-card.custom-card {
    display: flex
;
    flex-direction: column;
    gap: 2.08333vw;
    align-items: center;
}
#last-posts {
    font-size: 2.5vw;
    color: #FFFBED;
    font-weight: 400;
}
.latest-posts {
    display: grid
;
    gap: 2.343vh;
}
.post {
    display: flex
;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.041666vw;
    padding: 10px;
}
.post img {
    width: 16vw;
}
.post-info {
    padding-left: 1vw;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #FFFBED;
}
.post-info h4 a {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5vw;
    font-weight: lighter;
        color: #FFFBED;

}
.post-info p {
    font-size: 0.9vw;
    color: #FFFBED77;
}


.manu-toggle{
    display: none;
}
.service-card.custom-card img{
width: 100%;
}
.service-info.blog{
    width: 100%;
}
.service-content img{
    border-radius: 1.8229vw !important;
}

/* Show only logo + hamburger on mobile */
@media (max-width: 768px) {
        .service-card {
        border-radius: 5vw;
    }
    .service-btn.blog{
        font-family: 'Inter', sans-serif;
    font-size: 1.04166vw;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.041666vw;
    text-decoration: none;
    display: inline-flex
;
    transition: all 0.3s 
ease;
    justify-content: center;
    align-items: center;
            margin-left: 1.041666vw;
        font-size: 3vw;
        width: 20.1736vw !important ;
        height: 10vw !important;
        padding: 1.5vw 0px;
        font-weight: lighter;
        border-radius: 3vw;
    }
        .service-imageBig {
        border-radius: 5vw !important;
        height: auto !important;
    }

        .search-layout {
        flex-direction: column;
    }
        .search-left {
        width: 100%;
    }
        .blog-sections {
        display: grid
;
        grid-template-columns: 1fr 1fr 2fr 1fr;
        height: auto;
        padding: 2vw;
        border-radius: 4vw;
        box-sizing: border-box;
        margin-bottom: 4vw;
        
    }
        .posts-switch p {
        border-radius: 1.91vw;
        font-size: 3.13vw;
        padding: 1.4vw 4vw;
    }
        .search-right {
        width: 100%;
    }
        .search-blog {
        display: none;
    }
        .service-description {
        font-size: 2.777vw;
        font-weight: lighter;
    }
        .service-btn {
        font-size: 3vw;
        width: 20.1736vw;
        height: 5vw;
        padding: 1.5vw 0px;
        font-weight: lighter;
        border-radius: 3vw;
    }    #last-posts {
        font-size: 6.5vw;
        text-align: center;
    }
        .post {
        gap: 10vw;
        border-radius: 6vw;
    }    .post-info {
        width: 50%;
        align-items: start;
    }
    .post-info p {
        font-size: 3vw;
    }    .post-info h4 a{
        font-size: 3vw;
    }    .post img {
        width: 35vw;
        height: 20vw !important;
    }
        .service-card.custom-card {
        border-radius: 5vw;
    }
        .category-link {
        font-size: 3.1458vw;
    }
    .menu-toggle.unvisible{
            display: none;
    }
    .menu-toggle {
        display: block;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 3.2986vw;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        color: rgba(255, 255, 255, 0.886);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3.47772vw;
        margin: 7.125vw 3.125vw 0px 0;
    }
.search-wrapper{
    height: 7vw;
}
.search-wrapper input{
    width: 17vw;
    font-size: 12px;
}
    .features-grid4 {
        display: grid;
        /* Only this one */
        grid-template-columns: repeat(2, 1fr);
        /* Two columns */
        gap: 1.093775vw;
        margin: 2vw 0px;
    }
    .overlay h2{
        padding: 3vw;
    }
        .content-row {
padding: 3.47vw 0px;
flex-direction: column;
    }
     .content-text{
    width: 100%;
 }
 .content-title{
    width: 100%;
 }
 .feature-icon{
    width: 5vw;
 }
 .content-images img{
    width: 100%;
 }
 .content-title, .content-description{
    text-align: center;
 }
.menu-pages ul{
    text-align: center;display: none;flex-direction: column !important;
    font-size: 5vw !important;
    margin-top: 5vh !important;
    gap: 3vh !important;
}
.menu-pages ul li a{
        color: #FFFBED;
text-decoration: none;
}
    .feature-card.transparent{
        width: auto;
        border-radius: 2.61vw;
    }
.menu-pages ul  li a:hover{
    color: #FAA73D;
    cursor: pointer;
}
.content-card-transparent {
    margin-bottom: 4.1666vw;
    padding: 0px;
}
    .feature-card {
        width: 43.105vw;
    border-radius: 2.61vw;
    }

    #whatsapp,
    #callUs {
        width: 21.11vw;
        height: 15.088333vw;
          border-radius: 7vw;

    }
.services-grid{
    grid-template-columns: repeat(2,1fr);
    margin-top: 2vh;
}
.service-image{
    width: 100%;
}
.service-btn{
    border-radius: 2vw;
    font-weight: 400;
}
    .checkbox-group label {
        font-size: 1.2725vw;
    }

    .form-group select {
        width: 66.15615vw;
            font-size: 3vw;

    }

    .country-picker {
        width: 12.7222vw;
    }

    .section-title {
        font-size: 4.16666vw;

    }

    .checkbox-group {
        max-width: 66.1458vw;
    }

    #firstName,
    #lastName {
        width: 30.987vw;
    }
   section{
    padding: 4.1666vh 3.229vw 0 !important;
   }
.content-description.careers {
    margin: 0px;
}
    .availible-careers h4 {
        font-size: 3.472vw;
    }
        .offers h5 {
        font-size: 2.43vw;
    }
        .offers {
        width: auto;
        height: 10vw;
        border-radius: 4vw;
    }
.ele
   .content-title{
    font-size: 3.472vw;
    margin-top: 0px;
}
.feature-card2{
    border-radius: 2.61vw;
}
    .section p {
        font-size: 2.5vw;
        padding: 1.7578vh 0;
        font-weight: lighter;
    }
    .section h1 {
        font-size: 6vw;
    }
    #Home img {
        width: 30vw;
    }
    .section-description {
        font-size: 2.5833vw;
    }
 #dev_languages{
    margin: 0 auto;
 }
    .content-description {
        font-size: 1.736vw;
    }

    .form-group input,
    .form-group textarea {
        width: 66.145vw;

    }

    .contact-form {
        width: 75.24vw;
    }

    #phone {
        width: 41.7311vw;
    }

    .form-group #Home {
        padding: 0px;
        margin-top: 24px;
    }

    .header-left {
        margin-top: 1.7361vw;
        margin-left: 4.6875vw;
    }

    .header-left img {
        width: 15.592vw;
    }
    .feature-card-summary-row {
        grid-template-columns: 1fr;
        gap: 2vw;
    }
.content-description{
    font-size: 3vw;
}
.content-title{
    font-size: 4vw;
}

    .section-title {
        margin-bottom: 2vh;
        font-size: 6vw;
    }
    .service-title{
        font-size: 5vw;
    }
    .service-description{
        font-size: 3vw;        
    }
        .service-title.horizontal{
        font-size: 2.736vw;
    }
        .service-description.horizontal{
        font-size: 1.5vw;
    }
        .services-grid.horizontal{
        padding: 0px 3vw;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .service-content.horizontal{
        width: 38.713125vw;
    }
    .service-btn{
margin-top: auto;
        width: 18vw;
        height: 6vw;
        font-size: 2.5vw;
    }
    .service-content{
height: 100%;
    }
    .service-info{
height: 100%;
    }
   #homeSection h1{
    font-size: 4vw;
   }
   .country-picker{
    width: 22.7222vw;
    height: 3vh;
   }

   .checkbox-group label {
    font-size: 2vw;
   }
   .checkbox-group input[type="checkbox"]{
    height: 2vw;
    width: 2vw;
   }
   .country-picker span {
    font-size: 3vw;
   }
   .section p {
            font-size: 2.5vw;

   }
    .section-description {
        padding: 0 0 12px 0px;
    }

    .section-description {
        margin-bottom: 0px;
        font-size: 3vw;
    }

    .feature-content h3 {
        font-size:3vw;
    }

    .content-card {
        margin-bottom: 3vh;
        border-radius: 4vw;
    }
.search-wrapper img{
    height: 4vw;
    width: 4vw;
}
    .portfolio {
        margin: 24px 0px;
    }

    .testimonials {
        margin-top: 24px;
    }

    .contact {
        margin-top: 3vh;
        margin-bottom: 9vh;
    }
    .testimonial-text{
        font-size: 3vw;
    }
    .testimonial-profile{
        align-items: start;
    }
    .testimonial-info p {
        font-size: 2.5vw;
    }
    .testimonial-info h4{
        font-size: 3vw;
    }
.contact-location span{
font-size: 1.4888vw;
}
.feature-card2.summary {
    display: flex
;
    flex-direction: column;
    align-items: center;
}
    .features-grid2.features{
        grid-template-columns: 2.5fr 1fr;
        margin: 2vh 0;
        gap: 3vw 1vw;
    }
.features-grid2.features .feature-card2:nth-of-type(3),
.features-grid2.features .feature-card2:nth-of-type(4) {
    grid-column: span 2;
}
    .features-grid2.features {
        grid-template-columns: 2.5fr 1fr;
        margin: 2vh 0;
        gap: 3vw 1vw;
    }
        .feature-content.features h3 {
        font-size: 2vw;
    color: #FFFBEDC4;

}
.contact-icon {
        width: 21.11vw;
        height: 15.088333vw;
        border-radius: 7vw;
}
    .btn.job{
        width: 26vw;
        padding: 3.5vw 2vw;
        border-radius: 3vw;
        font-size: 3.5vw;
    }
    .feature-content ul li{
        font-size: 2.4vw;
    }
    .feature-content h4 {
        font-size: 4.1666vw;
    }
.content-images{
    border-radius: 4vw;
}
    .feature-content p {
        font-size: 2vw;
    }

    .form-group label {
        font-size: 3vw;
    }

    .header-center,
    .header-right {
        display: none;
    }
   .submit-btn{
    margin-top: 2vh;
   }
    .footer-nav {
        flex-direction: column;
        gap: 3.791469194312796vh;
    }

    .footer-nav a {
        font-size: 4.2986vw;

    }

    .footer-social img {
        width: 8.94444vw;
        height: 8.9444vw;
    }

    .footer .footer-bottom {
        flex-direction: column;
    }

    .footer-copyright,
    .footer-legal {
        font-size: 2.2986vw
    }
   .footer-logo{
    width: 15vw;
    height: 13vw;
   }
    .footer-center {
        gap: 3.791469194312796vh;
    }

    .footer-log {
        width: 15.052vw;
        height: 14.052vw;
    }
    /* Header stays at normal layer */
.custom-header {
    position: relative; /* can be static too */
    z-index: 10;        /* low value */
}

/* Fixed menu toggle */
#menu-toggle-wrapper {
    position: fixed;
    top: 1.94vw;
    right: 2vw;
    z-index: 10000; /* very high to appear above everything */
    display: flex;
    justify-content: flex-end;
}
#upbar{
        width: 30vw;
}
}

.overlay-active-header {
    opacity: 0;
    pointer-events: none; /* disable clicks while overlay active */
}
.search-wrapper form {
  display: flex;
  align-items: center;   /* makes button & input aligned vertically */
  gap: 8px;              /* space between icon and text */
}

.search-wrapper form button {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;         /* keeps the img centered inside button */
  align-items: center;
  justify-content: center;
}

.search-wrapper form button img {
  display: block;
}

.search-wrapper form input {
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
  font-size: 16px;
}

.search-wrapper form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.features-grid.topImage {
    display: grid
;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.593775vw;
    margin: 20px 2.5vw;
}
.feature-card-column-top-image {
    display: flex
;
    flex-direction: column;
    text-align: center;
    gap: 1.1979vw;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 1.531vw;
    padding: 1.302vw;
    transition: transform 0.3s 
ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.content-text.transparent {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.7708vw;
    padding: 1.5625vw;
}
.features-grid-column {
    display: grid
;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.045vw;
    width: 100%;
}
.content-images.transparent {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.7708vw;
    padding: 1.5625vw;
    box-sizing: border-box;
}
.feature-card-column {
    display: flex
;
    gap: 1.1979vw;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 1.531vw;
    padding: 1.302vw;
    transition: transform 0.3s 
ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.content-colum {
    display: flex
;
    flex-direction: column;
    gap: 1vw;
    flex: 1;
}

.content-row.transparent {
    gap: 1.045vw;
}
.content-images.transparent img {
    width: 100%;
    height: 100%;
    border-radius: 2vw;
    object-fit: cover;
    object-position: center;
}
.content-text.transparent h3{
    width: 40vw;
}