@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');


:root {
    /* ძირითადი ფერი (Primary Color) - Contract Builder-ის ცისფერი */
    --primary-color: #38AAB7;
    /* მეორადი ფერი (Secondary Color) - Award Approvals-ის მწვანე */
    --secondary-color: #4CAF50;
    /* ღია ფონი */
    --light-bg-color: #E1F5FE; /* მსგავსი ღია ცისფერი */
    /* ღია ჰოვერის ფერი */
    --light-hover-color: #58C5D3; /* ღია ცისფერი ჰოვერისთვის */
    /* ახალი ფერები ფოტოსთვის */
    --map-background: #F0F8FF; /* აღარ გამოვიყენებთ, ფონზე იქნება გრადიენტი */
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --dark-text: #333;
    --light-text: #666;
    --blue-highlight: #3B7CFB;
    --hero-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--light-hover-color) 100%);
}

/* ძირითადი სტილები */
@font-face {
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    src: url('/fonts/bpg-paragraph-chveulebrivi-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

  @font-face {
    font-family: 'Noto-Regular'; /* ფონტის სახელი */
    src: url('/fonts/Noto-Regular.ttf') format('truetype'); /* ფონტის ფაილის მისამართი */
    font-weight: normal;
    font-style: normal;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* შეიცვალა გრადიენტი ახალ ფერებზე */
    background-image: linear-gradient(to bottom, var(--light-hover-color), var(--primary-color));
}

body {
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* შეიცვალა ფონი ღია ცისფერზე */
   
    color: #333;
    line-height: 1.6;
}

/* ჰედერი */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    background-color: transparent;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 10;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 100px;
    width: auto;
}

.auth-nav {
    display: flex;
    align-items: center;
}

.auth-nav a,
.search-btn {
    
    margin-left: 20px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-family: "Noto-Regular", sans-serif;
    transition: color 0.3s ease;
    font-feature-settings: 'case' on;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 1em;
}

.auth-nav a:hover,
.search-btn:hover {
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
}

/* ==================================================
                 ახალი HERO MAP სექცია
   ================================================== */
.hero-map-section {
    position: relative;
    /* გავზარდეთ სიმაღლე, რომ ეკრანის ბოლომდე გაიშალოს */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding ამოღებულია, რადგან ჰედერი გამჭვირვალეა */
    padding: 0 50px;
    overflow: hidden;
    background: var(--hero-gradient); 
    /* ჰედერის სიმაღლეზე დაბლა ჩამოწევა */
    padding-top: 120px; 
    box-sizing: border-box;
    padding-bottom: 190px;
}

.map-overlay-card {
    position: relative;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
    padding: 40px;
    width: 100%;
    max-width: 1000px;
    /* პოზიციის რეგულირება, რომ მოხვდეს ეკრანის ცენტრში ჰედერის ქვემოთ */
    margin-top: 0; 
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(5px);
}

/* ფილტრები */
.map-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    position: absolute;
    top: -40px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 90%;
    max-width: 900px;
    flex-wrap: wrap;
}

.transport-btn {
    background-color: transparent;
    color: var(--light-text);
    border: none;
    padding: 10px 15px;
    border-radius: 10px;
    font-family: "Noto-Regular", sans-serif;
    font-feature-settings: 'case' on;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.9em;
}

.transport-btn i {
    margin-right: 5px;
}

.transport-btn.active {
    background-color: var(--primary-color);
    color: #fff;
}

.filter-input,
.filter-select {
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    font-size: 0.9em;
    flex-grow: 1;
    min-width: 150px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filter-input[type="date"] {
    color: var(--dark-text);
}

.filter-search-btn {
     font-family: 'Noto-Regular'; 
     font-feature-settings: 'case' on;
    background-color: var(--blue-highlight);
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-search-btn:hover {
    background-color: #306de5;
}

/* რუკა და მარშრუტის ვიზუალი */
.shipment-map-visual {
    position: relative;
    width: 100%;
    height: 400px; 
    overflow: hidden;
    border-radius: 15px;
    margin-top: 50px;
    /* ფონი გავხადე უფრო ნეიტრალური, რომ გრადიენტი კარგად გამოჩნდეს */
    background-color: rgba(255, 255, 255, 0.5); 
}

.world-map-image {
    width: 100%;
    height: 100%;
    /* გამოვიყენე რუკის ვიზუალიზაცია ცისფერი კონტურებით */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500"><path fill="%23FFFFFF" stroke="%23B0D9FF" stroke-width="1" d="M30 400 L50 350 L100 370 L150 300 L250 350 L300 300 L350 350 L400 300 L500 350 L550 300 L600 350 L650 300 L700 350 L750 300 L800 350 L850 300 L900 350 L950 300 L970 350 L950 400 Z M500 50 L550 70 L600 50 L650 70 L700 50 L750 70 L800 50 L850 70 L900 50 Z M100 100 L150 120 L200 100 L250 120 L300 100 L350 120 L400 100 L450 120 Z" opacity="0.8"/></svg>') repeat-x center center/contain; 
    opacity: 0.9;
}

.shipment-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dotted-line-svg {
    position: absolute;
    top: 5%;
    left: 10%;
    width: 80%;
    height: 90%;
}

.start-point, .end-point {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--blue-highlight);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    box-shadow: 0 0 10px rgba(59, 124, 251, 0.8);
}

/* პოზიციები (მიახლოებით) */
.start-point {
    top: 60%;
    left: 20%;
    transform: translate(-50%, -50%);
}

.end-point {
    top: 25%;
    right: 15%;
    transform: translate(-50%, -50%);
}

/* შედეგის ბარათი */
.result-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 20px 30px;
    width: 90%;
    max-width: 900px;
    position: absolute;
    bottom: -80px; 
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 2fr 3fr 2fr 1.5fr;
    gap: 20px;
    align-items: center;
    border: 1px solid #f0f0f0;
}

.shipper-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-right: 1px solid #eee;
    padding-right: 20px;
}

.logo-name {
    font-family: 'Noto-Regular';
    font-feature-settings: 'case' on;
    display: flex;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--secondary-color); /* მწვანე ლოგო */
}

.logo-icon {
    font-size: 1.5em;
    margin-right: 10px;
    color: var(--secondary-color);
}

.container-type {
    font-size: 0.9em;
    color: var(--light-text);
}

.route-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-right: 1px solid #eee;
}

.route-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9em;
    color: var(--dark-text);
}

.route-tracker {
    position: relative;
    width: 60%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tracker-line {
    width: 100%;
    height: 5px;
    background-color: var(--primary-color);
    border-radius: 5px;
    opacity: 0.6;
    position: relative;
}

.route-tracker .fa-ship {
    position: absolute;
    color: var(--primary-color);
    background-color: #fff;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    padding: 5px;
    font-size: 1.2em;
    top: 50%;
    left: 50%; /* გემის პოზიცია */
    transform: translate(-50%, -50%);
    z-index: 2;
}

.shipping-metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9em;
    color: var(--light-text);
    border-right: 1px solid #eee;
    padding-right: 20px;
}

.metric i {
    color: var(--primary-color);
    margin-right: 5px;
}

.booking-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.valid-until {
    font-size: 0.8em;
    color: var(--light-text);
}

.price-book {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.price {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--dark-text);
}

.book-now-btn {
    background-color: var(--blue-highlight);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    font-size: 1em;
    transition: background-color 0.2s;
}

.book-now-btn:hover {
    background-color: #306de5;
}


/* სექციები */
.section-padding {
    padding: 80px 50px;
    text-align: center;
}

.services-section {
    background-color: #fff;
    /* გავასწორეთ margin-top, რომ შედეგის ბარათი არ გადაფაროს სერვისების სექციას */
    margin-top: 150px; 
}

.get-started-section,
.contact-section {
    background-color: #fff;
}

.why-us-section {
    /* შეიცვალა ფონი ღია ცისფერზე */
    background-color: var(--light-bg-color);
}

.section-title {
     font-family: 'Noto-Regular'; 
    font-size: 2.5em;
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin-bottom: 50px;
    font-feature-settings: 'case' on;
}

.card-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.card {
    /* შეიცვალა ფონი ღია ცისფერზე */
    background-color: var(--light-bg-color);
    padding: 30px;
    border-radius: 12px;
    width: 250px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.card .icon {
    font-size: 3em;
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin-bottom: 15px;
}

.card h3 {
    
    font-family: 'Noto-Regular';
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin-top: 0;
    font-feature-settings: 'case' on;
}

h3 {
    font-family: 'Noto-Regular';
    
    font-feature-settings: 'case' on;
}

/* „რატომ ჩვენ?“ სექცია */
.why-us-items {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.why-us-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 200px;
    text-align: center;
}

.why-us-item .icon {
    font-size: 4em;
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* „დაიწყე ახლა“ სექცია */
.step-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-bottom: 50px;
}

.step {
    position: relative;
    /* შეიცვალა ფონი და ჩარჩო */
    background: var(--light-bg-color);
    border: 2px solid var(--primary-color);
    border-radius: 14%;
    width: 100px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
    color: var(--primary-color);
    transition: all 0.3s ease;
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
}

.step:hover {
    /* შეიცვალა მწვანე ცისფერზე */
    background-color: var(--primary-color);
    color: #fff;
    transform: scale(1.1);
}

.step-info {
    margin-top: 15px;
    max-width: 150px;
}

.step-line {
    width: 200px;
    height: 2px;
    /* შეიცვალა მწვანე ცისფერზე */
    background-color: var(--primary-color);
}

.get-started-button {
    margin-top: 50px;
    padding: 15px 40px;
    /* შეიცვალა მწვანე ცისფერზე */
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-family: 'Noto-Regular'; /* ფონტის სახელი */
    font-feature-settings: 'case' on;
}

.get-started-button:hover {
    /* შეიცვალა ღია მწვანე ღია ცისფერზე */
    background-color: var(--light-hover-color);
    transform: translateY(-2px);
}

/* პოპაპის სტილები */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-overlay.active {
    display: flex;
}

.popup-content {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    width: 350px;
    text-align: center;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.popup-overlay.active .popup-content {
    transform: translateY(0);
    opacity: 1;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2em;
    font-weight: bold;
    cursor: pointer;
    color: #ccc;
    transition: color 0.2s;
}

.close-btn:hover {
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
}

.popup-logo {
    margin-bottom: 20px;
}

/* პოპაპის ლოგოს ანიმაცია */
.popup-logo img {
    height: 80px;
    opacity: 0;
    animation: fadeInLogo 0.6s ease-in-out 0.3s forwards;
}

@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.popup-content h2 {
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin-bottom: 25px;
    font-feature-settings: 'case' on;
}

/* შეყვანის ველები ხატულებით */
.input-with-icon {
    position: relative;
    margin-bottom: 15px;
}

.input-with-icon i {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    font-size: 1.2em;
}

.popup-content input {
    width: 90%;
    padding: 12px 12px 12px 45px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    font-size: 1em;
    box-sizing: border-box;
    outline: none;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ანიმაციური ჩარჩო მაუსის მიტანის და ფოკუსის დროს */
.popup-content input:hover {
    /* შეიცვალა ღია მწვანე ღია ცისფერზე */
    border-color: var(--light-hover-color);
}

.popup-content input:focus {
    /* შეიცვალა მწვანე ცისფერზე */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(56, 170, 183, 0.3); /* ცისფერის გამჭვირვალე ვერსია */
}

.popup-content input::placeholder {
    color: #aaa;
}

.popup-button {
    width: 90%;
    padding: 12px;
    /* შეიცვალა მწვანე ცისფერზე */
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    transition: background-color 0.2s;
}

.popup-button:hover {
    /* შეიცვალა ღია მწვანე ღია ცისფერზე */
    background-color: var(--light-hover-color);
}

/* სერჩის პოპაპის სტილები */
.search-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* შეიცვალა გრადიენტი ცისფერ ტონებზე */
    background: linear-gradient(135deg, rgba(225, 245, 254, 0.95), rgba(179, 229, 252, 0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

.search-popup.active {
    opacity: 1;
    visibility: visible;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.search-popup.active .search-content-wrapper {
    animation: fadeInScale 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.search-popup-close {
    position: absolute;
    top: 30px;
    right: 50px;
    font-size: 3.5em;
    color: #333;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
}

.search-popup-close:hover {
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    transform: rotate(90deg) scale(1.1);
}

.search-content-wrapper {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -100px;
}

.search-popup-form {
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    padding: 15px 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.search-popup-form:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.search-popup-form:focus-within {
    background: rgba(255, 255, 255, 0.7);
    /* შეიცვალა მწვანე ცისფერზე */
    border-color: var(--primary-color);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

.search-popup-input {
    width: 100%;
    border: none;
    padding: 10px 0;
    font-size: 2.5em;
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    outline: none;
    background: transparent;
    color: #333;
}

.search-popup-input::placeholder {
    color: rgba(51, 51, 51, 0.6);
}

.search-popup-icon {
    font-size: 2.5em;
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin-right: 15px;
}

/* რეკომენდაციები სერჩში */
.search-suggestions-container {
    width: 100%;
    text-align: left;
    margin-top: 40px;
    color: #333;
}

.search-suggestions-container h3 {
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin-bottom: 25px;
    font-feature-settings: 'case' on;
    font-size: 1.8em;
}

.suggestion-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.suggestion-card {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.suggestion-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.suggestion-card img {
    height: 150px;
    width: 100%;
    object-fit: cover;
    display: block;
}

.suggestion-card-content {
    padding: 20px;
}

.suggestion-card-content h4 {
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin: 0 0 10px 0;
    font-feature-settings: 'case' on;
    font-size: 1.3em;
}

.suggestion-card-content p {
    font-size: 1em;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

/* Services Page Styles */
.services-hero-section {
    /* შეიცვალა მწვანე ფერი გრადიენტზე */
    background: linear-gradient(rgba(56, 170, 183, 0.8), rgba(56, 170, 183, 0.8)), url('https://images.pexels.com/photos/386009/pexels-photo-386009.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1') no-repeat center center/cover;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.services-hero-section h1 {
    font-size: 4em;
    margin: 0;
    font-feature-settings: 'case' on;
}

.service-card {
    /* შეიცვალა ფონი ღია ცისფერზე */
    background-color: var(--light-bg-color);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.service-card .icon-container {
    font-size: 4em;
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin-bottom: 20px;
}

.icon {
    font-size: 4em;
}

.service-card h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 1em;
    color: #555;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.services-page-section {
    background-color: #fff;
}

.service-cards-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

/* Typing effect for hero section text - ფერები არ შეეხება */
#animated-title,
#animated-text {
    overflow: hidden;
    border-right: .15em ;
    animation:
        typing 3.5s steps(40, end) forwards,
}

#animated-title {
    animation-delay: 0s;
}

#animated-text {
    animation-delay: 2s;
}

#animated-text.finished-typing {
    border-right: none;
    animation: none;
    max-width: 500px;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #fff; }
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4) 70%, transparent);
    color: #fff;
    text-align: left;
    transform: translateY(60%);
    transition: transform 0.4s ease-out;
    box-sizing: border-box;
}

.gallery-item:hover .image-overlay {
    transform: translateY(0);
}

.image-overlay h3 {
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    margin-top: 0;
    margin-bottom: 10px;
    font-feature-settings: 'case' on;
    font-size: 1.6em;
}

.image-overlay p {
    font-size: 0.9em;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s;
}

.gallery-item:hover .image-overlay p {
    opacity: 1;
    transform: translateY(0);
}

.contact-section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.contact-section-content h2 {
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin-bottom: 0;
}

.contact-section-content p {
    max-width: 600px;
    margin-bottom: 20px;
}

.contact-form-container {
    width: 100%;
    max-width: 500px;
    text-align: left;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    /* შეიცვალა მწვანე ცისფერზე */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(56, 170, 183, 0.1); /* ცისფერის გამჭვირვალე ვერსია */
}

.submit-button {
    /* შეიცვალა მწვანე ცისფერზე */
    background-color: var(--primary-color);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    /* შეიცვალა ღია მწვანე ღია ცისფერზე */
    background-color: var(--light-hover-color);
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-info-list li {
    font-size: 1.1em;
    color: #555;
    display: flex;
    align-items: center;
}

.contact-info-list li .icon {
    font-size: 1.2em;
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    margin-right: 15px;
}

/* ფუტერი */
.main-footer {
    /* შეიცვალა მწვანე ცისფერზე */
    background-color: var(--primary-color);
    color: #fff;
    padding: 60px 50px 20px;
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-section {
    flex: 1;
    min-width: 250px;
}

.footer-logo img {
    height: 80px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-info p {
    margin-top: 15px;
    font-weight: 300;
    line-height: 1.6;
}

.footer-links h4,
.footer-social h4,
.footer-contact h4,
.footer-subscribe h4 {
    font-family: 'Noto-Regular'; /* ფონტის სახელი */
    font-size: 1.4em;
    margin-bottom: 20px;
    font-feature-settings: 'case' on;
    position: relative;
}

.footer-links ul,
.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a,
.footer-contact a {
    color: #fff;
    text-decoration: none;
    line-height: 2.2;
    transition: color 0.3s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
    /* შეიცვალა ღია მწვანე ღია ცისფერზე */
    color: var(--light-bg-color);
}

.social-icons a {
    color: #fff;
    font-size: 1.5em;
    margin-right: 20px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    /* შეიცვალა ღია მწვანე ღია ცისფერზე */
    color: var(--light-bg-color);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-form input[type="email"] {
    padding: 12px;
    border-radius: 5px;
    border: none;
    font-family: "BPG ParaGraph Chveulebrivi", sans-serif;
}

.contact-form button {
    padding: 12px 20px;
    background-color: #fff;
    /* შეიცვალა მწვანე ცისფერზე */
    color: var(--primary-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
     font-family: 'Noto-Regular'; /* ფონტის სახელი */
     font-feature-settings: 'case' on;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.contact-form button:hover {
    /* შეიცვალა ღია მწვანე ღია ცისფერზე */
    background-color: var(--light-bg-color);
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
}

.footer-bottom p {
    font-size: 0.9em;
    font-weight: 300;
    opacity: 0.8;
}

/* მედია ქუერი მცირე ეკრანებისთვის - ფერები არ შეეხება */
@media (max-width: 1024px) {
    /* რესფონსივი დიდი ეკრანისთვისაც */
    .map-filters {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        box-shadow: none;
        border: none;
    }
    .hero-map-section {
        /* სიმაღლე ავტომატურად დარეგულირდება შიგთავსის მიხედვით */
        min-height: auto; 
        padding: 50px 20px;
        padding-top: 120px;
    }

    .map-overlay-card {
        padding: 20px;
        /* მობილურზე პოზიცია სტატიკურია */
        margin-top: 0; 
    }
    
    .filter-input, .filter-select, .transport-btn, .filter-search-btn {
        width: 100%;
        flex-grow: 1;
        min-width: unset;
        margin-bottom: 5px;
    }

    .result-card {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 15px;
        position: static;
        transform: none;
        margin-top: 50px;
    }

    .shipper-info,
    .route-details,
    .shipping-metrics {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-right: 0;
        padding-bottom: 15px;
    }
    
    .shipping-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .route-details {
        flex-direction: column;
        gap: 10px;
    }

    .route-tracker {
        width: 80%;
    }
}


@media (max-width: 768px) {
    .main-header {
        padding: 20px;
    }

    .section-padding {
        padding: 50px 20px;
    }

    .card-container,
    .why-us-items {
        flex-direction: column;
        align-items: center;
    }

    .step-container {
        flex-direction: column;
        gap: 20px;
    }

    .step-line {
        width: 2px;
        height: 50px;
    }

    .main-footer {
        padding: 40px 20px 20px;
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .footer-section {
        min-width: 100%;
        margin-bottom: 30px;
    }

    .footer-section:last-child {
        margin-bottom: 0;
    }

    .social-icons {
        display: flex;
        justify-content: center;
    }

    .search-popup-close {
        top: 20px;
        right: 20px;
        font-size: 2em;
    }

    .search-popup-input {
        font-size: 1.5em;
    }

    .search-content-wrapper {
        width: 95%;
        margin-top: -50px;
    }

    .search-popup-form {
        padding: 10px 20px;
    }

    /* Hero Map სექციის რესფონსივი */
    .hero-map-section {
        padding: 20px 10px;
        padding-top: 120px;
    }

    .map-filters {
        gap: 5px;
    }
    
    .transport-btn, .filter-input, .filter-select {
        font-size: 0.8em;
        padding: 8px 10px;
    }

    .shipment-map-visual {
        height: 300px;
    }
    
    .shipping-metrics {
        grid-template-columns: 1fr;
        border-bottom: 1px solid #eee;
    }
    
    .price-book {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding-top: 15px;
    }
    
    .book-now-btn {
        padding: 8px 15px;
    }
}