@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


body {
    font-family: "Raleway", sans-serif;
}

.header-section {
    background-image: url(../assets/background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}

.header-section .header-img {
    max-width: 675.89px;
    object-fit: contain;
    width: 100%;
    margin-bottom: -40%;
    margin-left: auto;
    margin-right: auto;
}

.header-section h1 {
    max-width: 817px;
    width: 100%;
    font-size: 64px;
    font-weight: 700;
    line-height: 75.14px;

}

.header-section span {
    font-size: 24px;
    font-weight: 600;
}

.header-section p {
    max-width: 619px;
    width: 100%;
    font-size: 22px;
    font-weight: 400;
}

.header-section .btn {
    color: #069696;
    border: 2px solid #069696;
    border-radius: 20px;
    font-weight: 600;
}

.header-section .btn:hover {
    background-color: #069696;
    color: #ECF7F7;
}
.hero{
    margin-top: 120px;
}
.navbar{
    position: fixed;
    min-width: 100%;
    top: 0;
    z-index: 999;
    background-color: #F2F9F9;
    padding-top: 18px;
    padding-bottom: 18px;
}
.navbar .navbar-brand {
  flex-shrink: 0;
  margin: 0 30px;
}
.navbar .navbar-brand img {
    max-width: none;
    width: 450px;
    height: auto;
    display: block;
}

.navbar .nav-item {
    color: #1C1C1C !important;
    font-size: 15px;
    font-weight: 600;
}

.navbar .navbar-toggler {
    border: 1px solid #ECF7F7 !important;
}

.navbar .navbar-toggler:focus {
    box-shadow: none;
}

.navbar .active {
    color: #069696 !important;
    font-weight: 600;
}

.navbar .navbar-collapse {
    flex-grow: unset;
}

.navhidden {
    display: none !important;
}

.color-heading {
    color: #069696;

}

.navbar .nav-link {
    position: relative;
}

.company {
    margin-top: 250px;
    position: relative;
}

.company::before {
    position: absolute;
    content: '';
    bottom: 0;
    width: 100%;
    height: 300px;
    background: #ECF7F7;
    z-index: -1;
}

.company span {
    font-size: 18px;
    font-weight: 600;
}

.company h2 {
    max-width: 1004px;
    width: 100%;
    font-size: 44px;
    font-weight: 700;
}

.company p {
    max-width: 1004px;
    width: 100%;
    font-size: 15px;
    font-weight: 400;
}

.Service {
    background: #ECF7F7;
}

.Service span {
    font-size: 18px;
    font-weight: 600;
}

.Service h2 {
    max-width: 1004px;
    width: 100%;
    font-size: 44px;
    font-weight: 700;
}

.Service p {
    max-width: 1004px;
    width: 100%;
    font-size: 15px;
    font-weight: 400;
}

.Service .service-card {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 25px;
    transition: all 0.7s;
    cursor: pointer;
    text-decoration: none;
    height: 300px;
}

.Service .service-card .hidden {
    visibility: hidden;
}

.Service .service-card:hover {
    border: 1px solid #030808;
}

.Service .service-card h4 {
    font-size: 22px;
    font-weight: 600;
    color: #000000;
    text-decoration: none !important;
}

.Service .service-card:hover .hidden {
    visibility: visible;
}

.Service .service-card .circle {
    width: 131px;
    height: 131px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 11px 0 #00000026;

}

.Service .service-card .circle img {
    width: 56px;
}

.Service .service-card h4 {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    margin-top: 20px;
}

.Project span {
    font-size: 18px;
    font-weight: 600;
}

.Project h2 {
    max-width: 1004px;
    width: 100%;
    font-size: 44px;
    font-weight: 700;
}

.Project .project-text-card h2 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 25px;
}

.Project .project-text-card p {
    font-size: 15px;
    font-weight: 400;
    width: 90%;
}


.Project .project-circle-card .circle-card {
    max-width: 380px;
    height: 100%;
    border-radius: 50%;
}

.Project .project-circle-card .circle-card img {
    width: 100%;
    height: 100%;
}


/* Footer section start */
.Footer {
    background-color: #ECF7F7;
}
.contact-footer{
    margin-top: 120px;
}
.Footer .form-cont {
    box-shadow: 0 0 16px 0 #00000040;
    background-color: #ffff;
    border-radius: 55px;
    padding: 70px;
}

.Footer .form-cont span {
    font-size: 18px;
    font-weight: 600;
}

.Footer .form-cont h2 {
    max-width: 1004px;
    width: 100%;
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 50px;
}

.Footer .form-cont .form-floating {
    background-color: #F3F3F3 !important;
    border-radius: 14px;

    display: flex;
    /* justify-content: center; */
    align-items: center;
    overflow: hidden;
}

.Footer .form-cont .form-floating label {
    z-index: 1111;
}

.Footer .form-cont .form-floating input {
    width: 100%;
    outline: none;
    height: 50px;
    background-color: transparent;
    margin-top: 13px;
    padding-left: 18px;
    padding-top: 5px;
}

.Footer .form-cont .form-floating textarea {
    height: 111px;
    /* width: 100%;
    background-color: transparent; */
    width: 100%;
    outline: none;
    background-color: transparent;
    margin-top: 13px;
    padding-top: 1.5rem;
    padding-left: 1rem;
    resize: none;
    border: none;
    /* outline: none; */
}

.Footer .form-cont .form-floating textarea::placeholder{
    color: #D0D0D0;
    background-color: transparent;
    /* ps */

}
.Footer .form-cont .form-floating input::placeholder {
    color: #D0D0D0;
    background-color: transparent;
    padding: 1rem 0;

}

.Footer .form-cont .form-floating .form-select {
    background-image: url(../assets/select-arrow.svg);
}

.Footer .form-cont .form-floating input,
.Footer .form-cont .form-floating .form-select,
.Footer .form-cont .form-floating .form-control {
    background-color: #F3F3F3;
    border: none;
    z-index: 111 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #000000 !important;
}

.Footer .form-cont .form-floating textarea {
    height: 161px;
}

.Footer .form-cont .form-floating label {

    font-size: 15px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    padding: 10px 1rem .75rem;
}

.Footer .form-cont .btn-green {
    font-size: 18px;
    background: #089491;
    color: #fff;
    font-weight: 700;
    border-radius: 14px !important;
    border: 2px solid #089491;

}

.Footer .form-cont .btn-green:hover {
    color: #089491;
    background-color: transparent;
}

.Footer h4 {
    font-size: 24px;
    font-weight: 600;
    color: #000000;
}
.Footer ul{
    padding: 0;
    list-style: none;
}
.Footer ul li,
.under-f-logo {
    font-weight: 500;
}

.f-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.under-f-logo {
    width: 100%;
    max-width: 360px;
    margin: 16px auto 20px;
    text-align: center;
    line-height: 1.6;
}

.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 0;
    margin: 0;
    position: static;
}
.copyright {
    font-weight: 600;
    letter-spacing: 3px;
    padding-top: 12px;
}

.form-floating>.form-select~label::after {
    background-color: unset !important;
}

.form-floating>.form-control:focus~label::after,
.form-floating>.form-select:focus~label::after {
    all: unset !important;
    background-color: unset !important;
    padding: 1rem .75rem;
}

.form-floating>.form-select {
    padding-top: 5px;
    height: 50px;
}

/* Responsiveness */
@media screen and (max-width: 767px) {
    .header-section {
        height: fit-content;
    }
    .contact-footer{
        margin-top: 80px;
    }
    .navbar .navbar-brand img {
        max-width: 140px;
    }
    .under-f-logo{
        min-width: 100%;
    }
    .main-row-1{
        margin-top: -40px;
    }
    .header-section h1 {
        font-size: 20px;
        line-height: initial;
    }

    .header-section span {
        font-size: 16px;
    }

    .header-section p {
        font-size: 14px;
    }

    .header-section .header-img {
        margin-bottom: -30%;
    }

    .company h2,
    .Service h2,
    .Project h2 {
        font-size: 20px;
    }
    .Project .project-text-card h2 {
        font-size: 20px;
        margin-bottom: 5px;
    }
    .Footer .form-cont h2{
        font-size: 20px;
        margin-bottom: 20px;
    }
    .Footer .form-cont{
        padding: 20px 10px 0 10px;
        border-radius: 10px;
    }
   .Footer .form-cont img{
    display: block;
}
    .f-left{
        text-align: center;
        margin-top: -60px;
    }
    .social-list{
        position: relative;
        left: 0;
    }
    .or-1{
        order: 2;
    }
    .or-2{
        order: 1;
    }
    .company p,
    .Service p {
        font-size: 12px;
    }
    .Service .service-card{
        gap: 0;
        height: auto;
    }
    .company {
        margin-top: 100px;
    }

    .company::before {
        height: 106px;
    }
    .Footer .form-cont .form-floating input {
        height: 42px;
    }

    .form-floating>.form-select {
        height: 42px;
    }
    .navhidden{
        display: block !important;
    }
}


@media (min-width: 768px) and (max-width: 991px) {
    .under-f-logo{
        min-width: 100%;
    }
    .header-section h1{
        font-size: 26px;
        line-height: initial;
    }
    .header-section p{
        font-size: 18px;
    }
    .company h2,
    .Service h2,
    .Project h2 {
        font-size: 24px;
    }

    .company{
        margin-top: 60px;
    }
    .navhidden {
        display: block !important;
    }
    .Footer .form-cont h2 {
        font-size: 25px;
        margin-bottom: 30px;
    }

    .reverse {
        display: flex;
        flex-direction: column-reverse !important;
    }
    .Footer ul li{
        font-size: 14px;
    }

}

@media (min-width: 992px) and (max-width: 1199px) {
    .company{
        margin-top: 200px;
    }
}
@media (min-width: 1400px) {
    .company{
        margin-top: 250px;
    }
}
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.skiptranslate {
    display: none !important;
    visibility: hidden !important;
}

/* Google sometimes adds top spacing when their bar loads */
body {
    top: 0px !important;
}

/* Hide their dropdown and badge */
#google_translate_element {
    display: none;
}

.goog-logo-link,
.goog-te-gadget span {
    display: none !important;
}

.goog-te-gadget {
    font-size: 0 !important;
}

.field-error { 
  color: #e11d48; 
  font-size: .85rem; 
  margin: 4px 0 12px 4px; 
  min-height: 1em;        /* păstrează spațiul chiar și când nu e eroare */
}
input.is-invalid { border: 1px solid #e11d48 !important; }
input.is-valid   { border: 1px solid #10b981 !important; }
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
/* intl-tel-input: să ocupe toată lățimea */
/* === Phone input (intl-tel-input) – versiune curată, fără duplicări === */

.field-error { 
  color: #e11d48; 
  font-size: .85rem; 
  margin: 4px 0 12px 4px; 
  min-height: 1em;
}

input.is-invalid { border: 1px solid #e11d48 !important; }
input.is-valid   { border: 1px solid #10b981 !important; }

button[disabled] { 
  opacity: .6; 
  cursor: not-allowed; 
}

/* 1) Wrapperul pluginului să ocupe toată lățimea */
.iti { 
  width: 100%; 
}

/* 2) Dropdown-ul să fie mereu deasupra oricărui element din formular */
.iti__country-list {
  z-index: 99999 !important;
  position: absolute !important;
}

/* 3) Câmpul de telefon: containerul nu taie dropdown-ul și are strat în față */
.phone-field,
.phone-field .iti { 
  position: relative !important;
  overflow: visible !important;
  z-index: 9999 !important;
}

/* 4) Prevenim tăierea din containerele din footer/contact */
.Footer,
.Footer .form-cont,
.Footer .row,
.Footer .mb-3,
.Footer .form-floating {
  overflow: visible !important;
}

/* 5) Spațiu pentru prefixul separat (+40 etc.) */
.phone-field .form-control {
  padding-left: 4.5rem !important;  /* ajustează 4.0–5.0rem dacă vrei */
}

/* 6) Elemente sub câmpul de telefon să NU iasă peste dropdown */
.Footer select,
.Footer textarea,
.Footer .btn {
  position: relative;
  z-index: 1 !important;
}

/* (opțional) Dacă vrei ca lista țărilor să se deschidă în sus (drop-up):
.phone-field .iti__country-list {
  bottom: calc(100% + 6px);
  top: auto !important;
}
*/

.phone-field .iti.separate-dial-code input {
  padding-left: 7rem !important; /* mută textul puțin mai la dreapta */
}


/* opțional: ajustează pentru mobil */
@media (max-width: 575.98px) {
  .phone-field .iti.separate-dial-code input {
    padding-left: 4.8rem !important;
  }
}
.nav-link .notranslate {
  color: inherit;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: inherit;
}
.current-page {
  font-weight: 600;
  color: black;
}
.lang-active {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}
/* === Accessibility Floating Button === */
#accessibility-toggle {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  height: 54px;
  width: 58px;
  padding: 0 18px 0 12px;

  background: #0aa3ad;
  color: #fff;
  border: none;
  border-radius: 14px 0 0 14px;
  cursor: pointer;

  overflow: hidden;
  white-space: nowrap;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);

  transition: width 0.3s ease, background 0.3s ease;
}

/* Hover → se extinde */
#accessibility-toggle:hover {
  width: 220px;
  background: #088c95;
}

/* Icon */
#accessibility-toggle .acc-icon {
  min-width: 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 20px;
}

/* Text */
#accessibility-toggle .acc-text {
  opacity: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

/* Text apare la hover */
#accessibility-toggle:hover .acc-text {
  opacity: 1;
}

/* Mic efect la hover */
#accessibility-toggle:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

#accessibility-panel {
  position: fixed;
  top: 50%;
  right: -320px;
  transform: translateY(-50%);
  width: 300px;
  background: #ffffff;
  border-radius: 16px 0 0 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  z-index: 10000;
  transition: right 0.3s ease;
  overflow: hidden;
  padding: 0;
}

#accessibility-panel.open {
  right: 0;
}

.accessibility-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: #0aa3ad;
  color: #fff;
}

.accessibility-header h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

#accessibility-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.accessibility-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
}

.accessibility-option {
  width: 100%;
  border: none;
  border-radius: 10px;
  background: #f3f3f3;
  color: #222;
  padding: 12px 14px;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}

.accessibility-option:hover {
  background: #e9e9e9;
}

/* === DARK MODE REFINED === */

body.dark-mode {
  background-color: #1b1d21;
  color: #e8e8e8;
}

/* zone principale */
body.dark-mode .navbar {
  background-color: #202328 !important;
}

body.dark-mode .header-section,
body.dark-mode .company,
body.dark-mode .Service,
body.dark-mode .Project,
body.dark-mode .Footer {
  background-color: #1b1d21 !important;
}

/* fundaluri speciale */
body.dark-mode .company::before {
  background: #23262b;
}

/* titluri */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #f3f4f6 !important;
}

/* text */
body.dark-mode p,
body.dark-mode li,
body.dark-mode label,
body.dark-mode small {
  color: #d1d5db !important;
}

/* navbar links */
body.dark-mode .navbar .nav-link {
  color: #d1d5db !important;
}

body.dark-mode .navbar .nav-link.active,
body.dark-mode .navbar .active {
  color: #11b3b3 !important;
}

/* headings color */
body.dark-mode .color-heading {
  color: #20c7c7 !important;
}

/* butoane */
body.dark-mode .btn {
  color: #f5f5f5;
  border-color: #11b3b3;
}

body.dark-mode .header-section .btn {
  background-color: transparent;
  color: #20c7c7;
  border-color: #20c7c7;
}

body.dark-mode .header-section .btn:hover {
  background-color: #20c7c7;
  color: #111827;
}

/* servicii */
body.dark-mode .Service .service-card {
  background-color: transparent;
}

body.dark-mode .Service .service-card h4 {
  color: #f3f4f6;
}

body.dark-mode .Service .service-card:hover {
  border-color: #20c7c7;
}

body.dark-mode .Service .service-card .circle {
  background-color: #2a2e35 !important;
}

/* formular */
body.dark-mode .Footer .form-cont {
  background-color: #23262b;
  box-shadow: 0 0 16px rgba(0,0,0,0.35);
}

body.dark-mode .Footer .form-cont .form-floating,
body.dark-mode .Footer .form-cont .form-floating input,
body.dark-mode .Footer .form-cont .form-floating .form-select,
body.dark-mode .Footer .form-cont .form-floating .form-control,
body.dark-mode .Footer .form-cont .form-floating textarea {
  background-color: #2f343b !important;
  color: #f3f4f6 !important;
}

body.dark-mode .Footer .form-cont .form-floating label {
  color: #d1d5db !important;
}

body.dark-mode .Footer .form-cont .form-floating input::placeholder,
body.dark-mode .Footer .form-cont .form-floating textarea::placeholder {
  color: #9ca3af !important;
}

/* telefon */
body.dark-mode .Footer .d-flex.align-items-center[style*="background:#F3F3F3"] {
  background: #2f343b !important;
}

body.dark-mode .Footer input,
body.dark-mode .Footer textarea,
body.dark-mode .Footer select {
  border: none !important;
  box-shadow: none !important;
}

/* footer */
body.dark-mode .Footer .nav-link,
body.dark-mode .Footer h4,
body.dark-mode .Footer ul li,
body.dark-mode .under-f-logo,
body.dark-mode .copyright {
  color: #d1d5db !important;
}

/* accessibility */
body.dark-mode #accessibility-panel {
  background: #23262b;
}

body.dark-mode .accessibility-header {
  background: #0aa3ad;
  color: #fff;
}

body.dark-mode .accessibility-option {
  background: #2f343b;
  color: #f3f4f6;
}

body.dark-mode .accessibility-option:hover {
  background: #3a4048;
}
/* ===================== */
/* LOGO */
 /* ===================== */

.logo {
  width: 450px;
  height: auto;
  display: block;
}
.footer-row {
  align-items: flex-start;
}

.f-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#footer-logo,
.footer-logo {
  width: 320px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.under-f-logo {
  width: 100%;
  max-width: 360px;
  margin: 16px auto 20px;
  text-align: center;
  line-height: 1.6;
}

.social-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
  position: static;
}

.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-right h4 {
  margin-bottom: 20px;
}

.footer-right ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.footer-right ul li {
  margin-bottom: 10px;
}

.footer-right .nav-link {
  padding-left: 0;
}

.footer-right h4 {
  margin-bottom: 20px;
}

.footer-right ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.footer-right ul li {
  margin-bottom: 10px;
}

.footer-right .nav-link {
  padding-left: 0;
}
body.dark-mode .Footer .phone-field label {
  color: #f3f4f6 !important;
}

body.dark-mode .Footer .phone-field .form-control {
  background-color: #2f343b !important;
  color: #f3f4f6 !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .Footer .phone-field .form-control::placeholder {
  color: #9ca3af !important;
}

body.dark-mode .Footer .phone-field .iti__selected-country,
body.dark-mode .Footer .phone-field .iti__selected-dial-code {
  background-color: #2f343b !important;
  color: #f3f4f6 !important;
}

body.dark-mode .Footer .phone-field .iti {
  background-color: #2f343b !important;
  border-radius: 6px;
}



.contact-form-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.contact-form-col {
  flex: 0 0 58%;
  max-width: 58%;
}

.contact-img-col {
  flex: 0 0 42%;
  max-width: 42%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-form-row {
  display: flex;
  align-items: flex-start;
}

.contact-form-col {
  flex: 0 0 70%;
  max-width: 70%;
  position: relative;
  z-index: 2;
}

.contact-img-col {
  flex: 0 0 30%;
  max-width: 30%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.contact-img {
  width: 420px;
  max-width: none;
  height: auto;
  object-fit: contain;
  margin-top: 120px;
}

@media screen and (max-width: 991px) {
  .contact-form-row {
    flex-wrap: wrap;
  }

  .contact-form-col,
  .contact-img-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .contact-img-col {
    justify-content: center;
  }

  .contact-img {
    width: 320px;
    margin-top: 40px;
  }
}
body.dark-mode .sitemap-card {
  background-color: #23262b !important;
  color: #f3f4f6 !important;
}

body.dark-mode .sitemap-card .list-group-item {
  background-color: #2f343b !important;
  color: #f3f4f6 !important;
  border-color: #3a4048 !important;
}

body.dark-mode .sitemap-card .list-group-item:hover {
  background-color: #3a4048 !important;
  color: #ffffff !important;
}

body {
  padding-top: 50px;
}



.privacy-content {
  padding-top: 120px;
}