/* Reset & Global Styles */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
}

h1 {
    padding-top: 10px;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f7f7f7;
    color: #333;
    padding-top: 120px; /* Pushes content down so it's not hidden under the fixed header */
}

/* ================= HEADER STYLES ================= */
header {
    display: flex;
    align-items: center; /* Keeps everything at the same height */
    justify-content: space-between; /* Spreads logo and nav apart */
    background-color: #20b4b9;
    padding: 15px 20px;
    height: 60px; /* Keeps header compact */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    overflow: visible;
}

/* ✅ Make Logo Bigger & Move It Down */
.logo {
    display: flex;
    align-items: center;
    position: relative; /* Allows controlled movement */
    z-index: 10; /* Ensures logo stays above other elements */
}

.logo img {
    height: 110px; /* ✅ Make the logo even bigger */
    width: auto; /* ✅ Maintain aspect ratio */
    transform: translateY(25px); /* ✅ Move logo downward into white space */
}

/* ✅ Move Navigation Slightly to the Left */
nav {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* ✅ Moves menu slightly left */
    margin-left: -50px; /* ✅ Adjust this value for fine-tuning */
}

/* ✅ Ensure Navigation Stays in Line */
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 30px; /* Adjusts spacing between menu items */
    align-items: center;
    margin: 0;
}

nav ul li {
    display: flex;
    align-items: center;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #f4f4f4;
}



/* Language Selector */
#lss {
    margin-right: 0px; /* Pushes it to the right */
}

#language-selector {
    gap: 10px;
    display: flex;
    align-items: center;
    color: white;
    font-size: 16px;
}

#language-selector label {
    font-weight: bold;
    font-size: 16px;
}

#language {
    box-shadow: 0px 1px 5px black;
    background-color:#ffffff;
    color:#00a3a3;
    margin-left: 5px;
    padding: 5px;
    border-radius: 5px;
    border: none;
}

/* ============= FOOTER STYLES ============= */
footer {
    background-color: #1d1d1d;
    padding: 20px;
    text-align: center;
}

/* ============= DROPDOWN MENU STYLES ============= */
.dropdownabout, .dropdownguide, .dropdownscient {
    position: relative;
    z-index: 1;
}

.dropdown-contentA, .dropdown-contentG, .dropdown-contentS {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #20b4b9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    min-width: 200px;
}

.dropdown-contentA a, .dropdown-contentG a, .dropdown-contentS a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.dropdown-contentA a:hover, 
.dropdown-contentG a:hover, 
.dropdown-contentS a:hover {
    background-color: #158e92;
}

.dropdownabout:hover .dropdown-contentA,
.dropdownguide:hover .dropdown-contentG,
.dropdownscient:hover .dropdown-contentS {
    display: block;
    opacity: 1;
}

/* ============= TYPOGRAPHY ============= */
h1 {
    font-family: 'Arial', sans-serif;
    font-size: 2.5em;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

/* Move h2 and p to the right in the about page */
.basebody h2 {
    margin-left: 25% !important; /* Moves h2 more to the right */
}

.basebody p {
    margin-left: 15% !important; /* Moves p slightly to the right */
}

/* Paragraph Styles */
p {
    font-family: 'Georgia', serif;
    font-size: 1.1em;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

/* ============= LIST & LINK STYLES ============= */
ul {
    list-style-type: disc;
    margin-left: 40px;
}

a {
    color: #0066cc;
    text-decoration: underline;
    transition: color 0.3s ease;
}

a:hover {
    color: #003366;
}

/* Style for the list in the "about" section */
#about ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 20px;
}

#about ul li {
    font-size: 1.1em;
    color: #555;
    line-height: 1.8;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

#about ul li::before {
    content: '•';
    color: #000;
    position: absolute;
    left: 0;
    font-size: 1.2em;
}

.about-container h2 {
    display: block !important;
    margin-left: 3% !important;
}

.about-container p {
    display: block !important;
    margin-left: 1% !important;
}

#aboutas-founders {
    padding-left: 10px;
    padding-bottom: 10px;
}

.membership-container h2 {
    display: block !important;
    margin-left: 3% !important;
}

.membership-container p {
    display: block !important;
    margin-left: 1% !important;
}

.membership-container h3 {
    display: block !important;
    margin-left: 2% !important;
}

/* ============= CAROUSEL STYLES ============= */
.carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #f7f7f7;
}

.carousel-track {
    display: flex;
    gap: 50px; /* ✅ Adds spacing between images */
    width: max-content; /* ✅ Ensures smooth looping */
    will-change: transform; /* ✅ Optimizes performance */
}

.carousel-img {
    object-fit: cover;
    display: flex;
    width: 600px;
    height: 600px;
    transition: transform 0.3s ease-in-out, 
                opacity 0.6s ease-in-out; /* ✅ Smooth fade effect */
}

.carousel-track {
    display: flex;
    gap: 50px; /* ✅ Adds spacing between images */
    width: max-content; /* ✅ Allows smooth looping */
    will-change: transform; /* ✅ Improves performance */
    transform: translateX(0); /* ✅ Ensures correct start position */
}

/* ============= FIX NAVIGATION OVERLAY ON CAROUSEL ============= */
.carousel img {
    max-width: 100%;
    display: block;
}

/* ============= ENSURE HEADER DOESN’T OVERLAY CAROUSEL ============= */
body {
    padding-top: 120px; /* ✅ Prevents carousel from being overlapped by fixed nav */
}

#homeh1 {
    color: #138588;
}

#aboutTitle {
    color: #138588;
}

#membershipTitle {
    color: #138588;
}

.membership-container h2, h3 {
    color: #0b5357 !important;

}

#aboutas-founders {
    color: #0b5357;
}

.about-container h2{
    color: #0b5357;
}

#becomemember {
    color: #0b5357;
    padding-bottom: 15px;
}

hr {
    border: none;
    height: 2px;
    background-color: #106b6e;
    margin: 4px 0;
}

li::marker {
    content: none; /* Hides the bullet point */
    display: none; /* Ensures no extra spacing */
}


#latestnews1 {
    padding-left: 20px;
    padding-top: 20px;
}

#news1 {
    display: block;
    margin-bottom: 400px;
}

.news-container {
    display: flex; /* ✅ Aligns items in a row */
    align-items: center; /* ✅ Ensures they are at the same height */
    gap: 20px; /* ✅ Adds spacing between image and text */
}

.news-image {
    padding-left: 20px;
    padding-top: 20px;
    width: 300px !important;
    height: 300px !important;
    object-fit: cover;
}

.news-title {
    padding-bottom: 0px;
    padding-right: 100px;
    font-size: 2em;
    font-weight: bold;
    color:#138588;
}

.news-text {
    padding-bottom: 0px;
}
    
.newsdiv h1, p {
    padding-left: 30px;
    padding-right: 30px;
}

.newsdiv h1 {
    color: #138588;
}


.newsdivimage img{
    padding-top: 30px;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 30px;
    width: 400px;
    height: 400px;
    object-fit: cover;
}

#pic2 {
    object-position: left !important;
}

#news3mainpic {
    object-fit: cover;
    object-position: left;
}


.formore {
    background-color: #efefef;
}

.formore h1 {
    color: #138588;
}

#becomemember a {
    color:#00a3a3;
    text-shadow: 0 1px 1px #0b5357;
}

#becomemember a:hover {
    color: #51dddd;
}

.click-here {
    text-decoration: none;
}

/* ============= HOME DROPDOWN MENU STYLES ============= */
.dropdownhome {
    position: relative;
    z-index: 1;
}

.dropdown-contentH {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #20b4b9; /* Same as other dropdowns */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    min-width: 200px;
}

.dropdown-contentH a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.dropdown-contentH a:hover {
    background-color: #158e92;
}

.dropdownhome:hover .dropdown-contentH {
    display: block;
    opacity: 1;
}

.divfooter h2, p {
    text-align: left;
}

.divfooter h2 {
    color: #2b919d;
}

.divfooter p {
    color: #bdbdbd;
}

.divfooter {
    display: flex;
    justify-content: space-between; /* Keeps sections on the same row */
    align-items: flex-start; /* Aligns text to the top */
    gap: 20px; /* Adds spacing between sections */
}

.divfootsection {
    display: flex;
    flex-direction: column; /* Keeps <h2> on top and <p> below */
}

.divfootersection h2, p {
    text-align: center;
}

#for_patients_h1 {
    color: #138588;
}

a {
    text-decoration: none;
    color: inherit;
}

.newsdiv h1, p {
    text-align: left;
}

#news16image {
    object-position: -100px;
}

#a19th1 {
    object-position: left;
}

#a19th2 {
    object-position: left;
}

#a19th3 {
    object-position: left;
}

.aboutas-container {
    display: flex;
    text-align: center;
}

#imgforicon1 {
    width: 100px;
    height: 100px;
    object-fit: cover;
    
    border-radius: 100px;
}

.for-text-as p {
    margin: 0;
}

#news20pic1 {
    object-position: right !important;
}

.executive-committee {
    display: flex;
    flex-wrap: wrap;
}

.executive-committee div {
    padding: 10px;
}

.aboutas-container {
    height: fit-content;
    width: 400px;
}

.jenaro img {
    object-position: top;
}

.levankobladze img {
    object-position: 0 -2px;
}

.anajibladze img {
    object-position: top;
    transform: scaleX(-1);
}

.eleneasanidze img {
    object-position: top;
}

#members1name {
    font-size: large;
    font-weight: bold;
    color: #0b5357;
}

#members2name {
    padding-top: 40px;
    font-size: large;
    font-weight: bold;
    color: #0b5357;
}

.mariamkharaishvili img {
    object-position: top;
}

.mananaurjumelashvili img {
    transform: scaleX(-1);
    object-fit: cover;
    object-position: center 20%;
}

.makajorbenadze img {
    object-fit: cover;
    object-position: center 30%;
}

.logo img {
    border-radius: 100px;
}

.davitasanidze img {
    filter: brightness(150%);
    object-fit: cover;
    object-position: 65% 100%;
}

.magdasamkharadze img{
    object-position: 0% 0%;
}

.executive-committee1 {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

.executive-committee1 div {
    padding: 10px;
}

.executive-committee1 .aboutas-container .for-text-as {
    width: 200px;
}

.workin-on-davita img {
    object-fit: cover;
    object-position: top;
}

#racxa4 {
    object-fit: contain;
    object-position: top;
}

#davitaijo {
    object-fit: cover;
    object-position: top;
}

#jenaroevents {
    object-fit: cover;
    object-position: bottom;
}

@media (max-width: 600px) {
    .logo {
      display: none;
    }

    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* ✅ prevent horizontal scroll */
      }
      

      #mainfooter {
        background-color: #000000 !important;
        width: 100%; /* ✅ use this instead of 100vw */
        margin: 0;
        padding: 0;
      }
      
      
      
      .divfooter {
        max-width: 600px;
        margin: 0 auto;
        padding: 16px 12px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      
      
      .divfootersection {
        margin-bottom: 16px;
        text-align: center;
      }
      
      .divfootersection h2 {
        font-size: 1rem;
        color: #00a3a3; /* or whatever teal you're using */
        margin: 0;
      }
      
      .divfootersection p {
        font-size: 0.95rem;
        margin: 4px 0 0;
      }
      

    body {
        padding-top: 50px;
    }

    main {
        max-width: 400px;
    }
  
    header {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      height: auto;
    }
  
    nav {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  
    nav ul {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto;
        white-space: nowrap;
        padding-left: 50px; /* ✅ prevents first item from clipping */
        scroll-padding-left: 10px; /* ✅ smoother left scroll if user drags */
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
      }
      
  
    nav ul li a {
      font-size: 10px;    /* smaller text */
      padding: 2px 4px;
      font-weight: 600;
    }
  
    #language-selector {
      font-size: 10px;
    }
  
    #language {
      font-size: 10px;
      padding: 2px 4px;
    }

    .news-container {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        padding-bottom: 50px;
    }

    .news-container div h1,p {
        padding: 0;
        margin: 0;
        padding: 5px;
        text-align: center;
    }
  }
  
  @media (min-width: 601px) and (max-width: 1024px) {
    .logo {
      display: none;
    }

    body {
        max-width: 1024px;
        padding: 0 12px;
        margin: 0 auto;
      }

    .divfooter {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        max-width: 900px;
    }

    .divfooter p, h2{
        font-size: 100%;
    }

    body {
        padding-top: 50px;
    }

    main {
        max-width: 900px;
    }
  
    header {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      height: auto;
    }
  
    nav {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  
    nav ul {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto;
        white-space: nowrap;
        padding-left: 50px; /* ✅ prevents first item from clipping */
        scroll-padding-left: 10px; /* ✅ smoother left scroll if user drags */
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
      }
      
  
    nav ul li a {
      font-size: 12px;    /* smaller text */
      padding: 2px 4px;
      font-weight: 600;
    }
  
    #language-selector {
      font-size: 10px;
    }
  
    #language {
      font-size: 10px;
      padding: 2px 4px;
    }

    .news-container {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        padding-bottom: 50px;
    }

    .news-container div h1,p {
        padding: 0;
        margin: 0;
        padding: 5px;
        text-align: center;
    }
  }
  @media (max-width: 1024px) {


    nav ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        gap: 0px;
        scroll-padding-left: 20px;
        scrollbar-width: none;
      }
      
      nav ul::-webkit-scrollbar {
        display: none;
      }
      
      nav ul > li {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0px;
        position: static;
        flex-shrink: 0;
      }
      
      /* Uniform link styles */
      nav ul li a,
      .dropdown-contentA a,
      .dropdown-contentG a,
      .dropdown-contentS a,
      .dropdown-contentH a {
        font-size: 12px;
        font-weight: 600;
        font-family: inherit;
        color: white;
        text-decoration: none;
        white-space: nowrap;
      }
      
      /* Inline dropdown children */
      .dropdown-contentA,
      .dropdown-contentG,
      .dropdown-contentS,
      .dropdown-contentH {
        display: contents !important;
        position: static;
        opacity: 1;
        box-shadow: none;
        padding: 0;
        background-color: transparent;
        min-width: unset;
      }
      
      .dropdownabout:hover .dropdown-contentA,
      .dropdownscient:hover .dropdown-contentS,
      .dropdownguide:hover .dropdown-contentG,
      .dropdownhome:hover .dropdown-contentH {
        display: contents;
      }

      #contactLink {
        padding-right: 15px;
      }
  }