@charset "utf-8";
 :root {
            --academic-blue: #346a99;
            --growth-green: #66A33E;
            --silver-gray: #f4f4f4;
            --white: #ffffff;
        }

        body { font-family: Times New Roman, sans-serif; margin: 0; padding: 0; overflow-x: hidden; }

        /* --- NAVIGATION & DROPDOWN --- */
        header {
            background: var(--white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 5%;
            border-bottom: 3px solid var(--academic-blue);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .logo img { height: 100px; }

        .nav-links { display: flex; list-style: none; margin: 0; padding: 0; }

        .nav-links li { position: relative; }

        .nav-links a {
            display: block;
            padding: 15px 20px;
            color: var(--academic-blue);
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
            text-transform: uppercase;
        }

        .nav-links a:hover { color: var(--growth-green); }

        /* Dropdown Style */
        .dropdown-content {
            display: none;
            position: absolute;
            background: var(--white);
            min-width: 200px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            border-top: 2px solid var(--growth-green);
        }

        .dropdown-content a {
            padding: 12px 16px;
            text-transform: none;
            border-bottom: 1px solid #eee;
        }

        .nav-links li:hover .dropdown-content { display: block; }

        /* --- MOBILE MENU BUTTON --- */
        .menu-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 5px;
        }

        .menu-toggle span {
            width: 25px;
            height: 3px;
            background: var(--academic-blue);
        }

        /* --- SLIDER AREA --- */
        .slider-container {
           position: relative;
    width: 100%;
    /* განსაზღვრავს გვერდების პროპორციას (სიგანე / სიმაღლე) */
    /* 16/7 ნიშნავს, რომ სიგანეზე 16 ერთეულზე სიმაღლე იქნება 7 */
    aspect-ratio: 16 / 7; 
    
    /* მინიმალური სიმაღლე, რომ მობილურზე ძალიან არ დაპატარავდეს */
    min-height: 250px; 
    
    overflow: hidden;
    background: #000;
        }

        .slides {
            display: flex;
            width: 300%;
            height: 100%;
            animation: slideAnimation 15s infinite;
        }

        .slide {
            width: 100.33%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0.8;
        }

        /* სურათების ჩანაცვლება აქ შეგიძლიათ */
        .slide1 { background-image: url('img/GaireLogo1.jpg'); }
		.slide2 { background-image: url('img/GAIRE_Logo.jpg'); }
        .slide3 { background-image: url('img/GaireLogo2.jpg');}

        @keyframes slideAnimation {
            0% { transform: translateX(0); }
            33% { transform: translateX(0); }
            38% { transform: translateX(-33.33%); }
            66% { transform: translateX(-33.33%); }
            71% { transform: translateX(-66.66%); }
            100% { transform: translateX(-66.66%); }
        }

        .slider-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            z-index: 10;
            width: 80%;
        }

        .slider-text h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        }

        /* --- RESPONSIVE DESIGN --- */
        @media (max-width: 992px) {
            .menu-toggle { display: flex; }
            .nav-links {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 70px;
                right: 0;
                background: var(--white);
                width: 100%;
                border-top: 1px solid #000;
            }
            .nav-links.active { display: flex; }
            .dropdown-content { position: static; box-shadow: none; padding-left: 20px; }
            .slider-text h1 { font-size: 1.8rem; }
        }


			.text-container {
				width: 80%;           /* ან ფიქსირებული, მაგ: 600px */
				max-width: 800px;     /* კარგია რესპონსიულობისთვის */
				
				text-alig: left;
				margin-left: auto;    /* ავტომატური დაშორება მარცხნიდან */
				margin-right: auto;   /* ავტომატური დაშორება მარჯვნიდან */

				/* მოკლე ჩანაწერი იგივეა: margin: 0 auto; */

				padding: 20px;        /* შიდა დაშორება ტექსტისთვის */
				background-color: #f9f9f9; /* ვიზუალური ეფექტისთვის */
			}
			.highlight-blue {
			color: var(--academic-blue);
			font-weight: bold; /* სურვილისამებრ, რომ უფრო გამოიკვეთოს */
			}
			.highlight-green {
			color: var(--growth-green);
			font-weight: bold; /* სურვილისამებრ, რომ უფრო გამოიკვეთოს */
			}

			ul.a {list-style-type: circle;}
			ul.b {list-style-type: square;}
			ol.c {list-style-type: upper-roman;}
			ol.d {list-style-type: lower-alpha;}


		footer {
            background: var(--academic-blue);
            color: var(--white);
            padding: 3rem 10%;
            text-align: center;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            text-align: left;
        }

        footer a {
            color: var(--silver-gray);
            text-decoration: none;
        }


		section {
            padding: 4rem 10%;
        }

        .about-brief {
            background: var(--silver-gray);
            text-align: center;
        }

        .section-title {
            color: var(--academic-blue);
            border-bottom: 2px solid var(--growth-green);
            display: inline-block;
            margin-bottom: 2rem;
        }

		.btn-main {
            background: var(--growth-green);
            color: var(--white);
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: 0.3s;
        }

        .btn-main:hover {
            background: #558a33;
        }



    /* აკორდეონის კონტეინერი */
    .accordion-container {
        width: 100%;
        max-width: 900px;
        margin: 20px auto;
        text-align: left; /* რომ ღილაკები არ დაიპრესოს შუაში */
    }

    /* ღილაკის სტილი - ეს გახდის მას მთელ სიგანეზე */
    .accordion-header {
        background-color: #346a99; /* თქვენი აკადემიური ლურჯი */
        color: white;
        cursor: pointer;
        padding: 15px 20px;
        width: 100%; /* აი ეს გახდის მთელ სტრიქონზე */
        border: none;
        text-align: left;
        outline: none;
        font-size: 18px;
        font-weight: bold;
        display: block;
        margin-bottom: 2px;
    }

    /* პანელი, რომელიც თავიდან დამალულია */
    .accordion-panel {
        padding: 0 20px;
        background-color: white;
        max-height: 0; /* აი ეს მალავს ტექსტს */
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        border-left: 3px solid #71a542; /* მწვანე აქცენტი */
    }

    .active {
        background-color: #71a542 !important; /* გახსნისას გახდეს მწვანე */
    }


	.flex-container {
		display: flex;
		align-items: center; /* ვერტიკალური გაცენტრება */
		gap: 40px;           /* დაშორება სურათსა და ტექსტს შორის */
		margin: 40px 0;
		padding: 20px;
	}

	.image-column {
		flex: 1;             /* იკავებს ხელმისაწვდომი სივრცის ნაწილს */
	}

	.image-column img {
		width: 100%;         /* სურათი ავსებს თავის ბლოკს */
		height: auto;
		border-radius: 8px;  /* ოდნავ მომრგვალებული კუთხეები (სურვილისამებრ) */
		box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* მსუბუქი ჩრდილი */
	}

	.text-column {
		flex: 1;             /* იკავებს მეორე ნახევარს */
	}

	/* მობილური ვერსიისთვის: რომ სურათი და ტექსტი ერთმანეთის ქვეშ დალაგდეს */
	@media (max-width: 768px) {
		.flex-container {
			flex-direction: column;
			text-align: center;
		}
	}