/* =====================================================
Dr. Aytən Seyidova - Professional Medical Website
STYLE.CSS - VİDEO BÖLMƏSİ ƏLAVƏ EDİLDİ
===================================================== */
/* Root Variables */
:root {
--primary-green: #406e47;
--primary-green-dark: #2d4f32;
--primary-green-light: #6b9971;
--green-accent: #45724d;
--green-light: #e8f2ea;
--white: #FFFFFF;
--cream: #F8FFF9;
--light-gray: #F8F8F8;
--gray: #707070;
--dark-gray: #333333;
--accent-mint: #8db892;
--accent-sage: #7ca982;
--accent-olive: #6b7c5d;
--gradient-green: linear-gradient(135deg, #45724d 0%, #406e47 100%);
--gradient-soft: linear-gradient(135deg, #6b9971 0%, #8db892 100%);
--gradient-elegant: linear-gradient(135deg, #e8f2ea 0%, #F8FFF9 100%);
--shadow-soft: 0 5px 20px rgba(64, 110, 71, 0.1);
--shadow-medium: 0 10px 30px rgba(64, 110, 71, 0.15);
--shadow-hover: 0 15px 40px rgba(64, 110, 71, 0.2);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p, h1, h2, h3, h4, h5, h6, span, div:not(.gallery-slide-image) {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
img, button, a, input, textarea, select {
user-select: auto;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: var(--dark-gray);
background-color: var(--white);
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
}
.green-text {
background: var(--gradient-green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
text-decoration: none;
transition: var(--transition);
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
width: 300px;
height: 300px;
}
.btn-green {
background: linear-gradient(135deg, #2d4f32 0%, #406e47 100%);
color: var(--white);
box-shadow: 0 5px 20px rgba(45, 79, 50, 0.3);
}
.btn-green:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(45, 79, 50, 0.4);
}
.btn-outline-green {
background: transparent;
color: #2d4f32;
border: 2px solid #2d4f32;
font-weight: 600;
}
.btn-outline-green:hover {
background: linear-gradient(135deg, #2d4f32 0%, #406e47 100%);
color: var(--white);
border-color: transparent;
transform: translateY(-3px);
}
/* Hero Section */
.hero-section {
min-height: 89vh;
max-height: 89vh;
position: relative;
display: flex;
align-items: center;
padding: 0;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
font-size: 0;
vertical-align: top;
}
.hero-section * {
font-size: initial;
vertical-align: initial;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
display: block;
line-height: 0;
}
.hero-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('images/hero-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
padding: 30px 0;
width: 100%;
height: 100%;
}
.hero-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-text .subtitle {
display: inline-block;
padding: 8px 20px;
background: transparent;
border-left: 3px solid #2d4f32;
color: #2d4f32;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 20px;
animation: slideInLeft 1.5s ease-out;
}
.hero-title {
font-size: clamp(2.3rem, 5vw, 3.8rem);
font-weight: 700;
margin-bottom: 20px;
line-height: 1.1;
color: #1e3520;
animation: slideInLeft 1.5s ease-out 0.2s both;
}
.hero-title .green-text {
    background: linear-gradient(135deg, #406e47 0%, #2d4f32 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: inherit; /* Eyni ölçüdə olsun */
    font-weight: inherit; /* Eyni qalınlıqda olsun */
    display: inline; /* Sətir daxilində qalsın */
}
.hero-description {
font-size: 1.125rem;
color: #406e47;
font-weight: 500;
margin-bottom: 30px;
animation: slideInLeft 1.5s ease-out 0.4s both;
}
.hero-buttons {
display: flex;
gap: 20px;
margin-bottom: 40px;
animation: slideInLeft 1.5s ease-out 0.6s both;
}
.hero-stats {
display: flex;
gap: 40px;
padding-top: 40px;
border-top: 2px solid #6b9971;
animation: fadeInUp 1.5s ease-out 0.8s both;
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, #2d4f32 0%, #406e47 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.875rem;
color: #45724d;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.hero-image {
position: relative;
animation: slideInRight 1.5s ease-out;
height: 100%;
display: flex;
align-items: stretch;
}
.image-wrapper {
position: relative;
width: 106%;
height: 100%;
max-height: 89vh;
border-radius: 0;
overflow: hidden;
background: transparent;
box-shadow: none;
border: none;
margin-left: auto;
margin-right: -6%;
display: block;
line-height: 0;
vertical-align: top;
}
.image-wrapper img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: right center;
background: transparent;
min-height: 89vh;
vertical-align: top;
}
.image-decoration {
display: none;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-subtitle {
display: inline-block;
padding: 8px 20px;
background: rgba(64, 110, 71, 0.1);
color: var(--primary-green);
font-size: 14px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 15px;
border-radius: 30px;
}
.section-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--dark-gray);
}
/* About Section */
.about-section {
padding: 100px 0;
background: var(--white);
margin-top: -10px;
position: relative;
z-index: 10;
}
.about-content {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 60px;
align-items: center;
}
.image-frame {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-medium);
max-width: 420px;
}
.image-frame img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s;
}
.image-frame:hover img {
transform: scale(1.05);
}
.about-bio {
margin-bottom: 30px;
}
.about-bio p {
margin-bottom: 15px;
color: var(--gray);
line-height: 1.8;
}
.about-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
background: var(--green-light);
border-radius: 10px;
transition: var(--transition);
}
.feature-item:hover {
transform: translateX(10px);
background: var(--gradient-soft);
}
.feature-item i {
font-size: 24px;
color: var(--primary-green);
}
/* Services Section */
.services-section {
padding: 80px 0;
background: var(--light-gray);
}
.services-section .container {
max-width: 1400px;
}
.services-grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.service-card {
background: var(--white);
border-radius: 15px;
padding: 0;
box-shadow: var(--shadow-soft);
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 0;
align-items: stretch;
overflow: hidden;
transition: var(--transition);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.service-card.text-image .service-text {
order: 1;
padding: 25px 30px;
}
.service-card.text-image .service-image {
order: 2;
}
.service-card.image-text {
grid-template-columns: 1fr 1.5fr;
}
.service-card.image-text .service-image {
order: 1;
}
.service-card.image-text .service-text {
order: 2;
padding: 25px 30px;
}
.service-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.service-text h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: var(--dark-gray);
}
.service-text p {
font-size: 0.9rem;
line-height: 1.5;
color: var(--gray);
}
.service-image {
overflow: hidden;
height: 100%;
min-height: 160px;
max-height: 180px;
}
.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.service-card:hover .service-image img {
transform: scale(1.05);
}
/* Certificates Section */
.certificates-section {
padding: 100px 0;
background: var(--white);
}
.certificate-card {
background: var(--white);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: var(--transition);
}
.certificate-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.certificate-card img {
width: 100%;
height: auto;
object-fit: contain;
    padding: 10px;
}
.certificate-card h4 {
padding: 20px;
text-align: center;
font-size: 1.1rem;
color: var(--dark-gray);
}
/* Gallery Section */
.gallery-section {
padding: 100px 0;
background: var(--light-gray);
}
.gallery-slider {
position: relative;
margin-top: 50px;
}
.gallery-slider .swiper {
padding: 0 80px;
}
.gallery-slide-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-medium);
transition: var(--transition);
height: 100%;
}
.gallery-slide-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.gallery-slide-image {
position: relative;
width: 100%;
height: 350px;
overflow: hidden;
}
.gallery-slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.gallery-slide-card:hover .gallery-slide-image img {
transform: scale(1.05);
}
.gallery-slide-info {
padding: 20px;
text-align: center;
background: white;
}
.gallery-slide-info h3 {
font-size: 1.2rem;
color: var(--primary-green);
margin-bottom: 10px;
font-weight: 600;
}
.gallery-slide-info p {
color: #666;
font-size: 0.9rem;
line-height: 1.6;
}
.gallery-slider .swiper-button-next,
.gallery-slider .swiper-button-prev {
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
box-shadow: var(--shadow-medium);
color: var(--primary-green);
transition: var(--transition);
}
.gallery-slider .swiper-button-next:after,
.gallery-slider .swiper-button-prev:after {
font-size: 20px;
font-weight: bold;
}
.gallery-slider .swiper-button-next:hover,
.gallery-slider .swiper-button-prev:hover {
background: var(--primary-green);
color: white;
transform: scale(1.1);
}
.gallery-slider .swiper-pagination {
display: none;
}

/* =====================================================
VİDEO BÖLMƏSİ - THUMBNAIL + MODAL
===================================================== */
.videos-section {
padding: 100px 0;
background: var(--white);
}

.videos-section .container {
max-width: 100%;
padding: 0 100px;
}

.videos-slider {
position: relative;
margin-top: 50px;
padding: 0;
}

.videos-slider .swiper {
padding: 0 60px;
overflow: visible;
}

/* Video Thumbnail Card */
.video-thumbnail-card {
position: relative;
background: #000;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-medium);
transition: var(--transition);
height: 100%;
cursor: pointer;
aspect-ratio: 9/16;
max-height: 500px;
}

.video-thumbnail-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}

.video-preview {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Play Overlay */
.play-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}

.video-thumbnail-card:hover .play-overlay {
background: rgba(0, 0, 0, 0.5);
}

.play-button {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.play-button i {
font-size: 24px;
color: var(--primary-green);
margin-left: 3px;
}

.video-thumbnail-card:hover .play-button {
transform: scale(1.15);
background: var(--primary-green);
}

.video-thumbnail-card:hover .play-button i {
color: white;
}

/* Video Modal */
.video-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
align-items: center;
justify-content: center;
padding: 20px;
animation: fadeIn 0.3s;
}

.video-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
}

.video-modal-content {
position: relative;
z-index: 10001;
max-width: 500px;
width: 100%;
animation: zoomIn 0.3s;
}

.video-modal-close {
position: absolute;
top: -50px;
right: 0;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: white;
font-size: 20px;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}

.video-modal-close:hover {
background: var(--primary-green);
border-color: var(--primary-green);
transform: rotate(90deg);
}

.video-modal-player {
position: relative;
background: #000;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-modal-player video {
width: 100%;
height: auto;
display: block;
max-height: 90vh;
}

/* Swiper Navigation */
.videos-slider .swiper-button-next,
.videos-slider .swiper-button-prev {
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
box-shadow: var(--shadow-medium);
color: var(--primary-green);
transition: var(--transition);
z-index: 100;
}

.videos-slider .swiper-button-prev {
left: 5px;
}

.videos-slider .swiper-button-next {
right: 5px;
}

.videos-slider .swiper-button-next:after,
.videos-slider .swiper-button-prev:after {
font-size: 20px;
font-weight: bold;
}

.videos-slider .swiper-button-next:hover,
.videos-slider .swiper-button-prev:hover {
background: var(--primary-green);
color: white;
transform: scale(1.1);
}

.videos-slider .swiper-pagination {
margin-top: 30px;
position: relative;
}

.videos-slider .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: var(--primary-green-light);
opacity: 0.5;
}

.videos-slider .swiper-pagination-bullet-active {
background: var(--primary-green);
opacity: 1;
}

/* Animations */
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}

/* Lightbox */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.3s;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.lightbox-content img {
width: 100%;
height: auto;
object-fit: contain;
}
.close-lightbox {
position: absolute;
top: -40px;
right: 0;
font-size: 40px;
color: white;
cursor: pointer;
transition: 0.3s;
}
.close-lightbox:hover {
color: var(--primary-green);
}
/* Blog Home Section */
.blog-home-section {
padding: 100px 0;
background: var(--white);
position: relative;
}
.blog-home-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(107, 153, 113, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(64, 110, 71, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.blog-home-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 60px;
}
.blog-home-card {
background: var(--white);
border-radius: 0;
overflow: hidden;
box-shadow: 0 10px 40px rgba(64, 110, 71, 0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.blog-home-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, transparent 0%, rgba(64, 110, 71, 0.02) 100%);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
z-index: 1;
}
.blog-home-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 60px rgba(64, 110, 71, 0.15);
}
.blog-home-card:hover::before {
opacity: 1;
}
.blog-card-image {
position: relative;
height: 220px;
overflow: hidden;
border-radius: 30px 0 30px 0;
background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blog-home-card:hover .blog-card-image img {
transform: scale(1.1);
}
.blog-category-overlay {
position: absolute;
top: 20px;
left: 20px;
background: linear-gradient(135deg, #2d4f32 0%, #406e47 100%);
color: var(--white);
padding: 6px 18px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(45, 79, 50, 0.3);
z-index: 2;
}
.blog-card-body {
padding: 25px;
position: relative;
}
.blog-title {
font-size: 1.25rem;
line-height: 1.4;
margin-bottom: 15px;
min-height: 56px;
}
.blog-title a {
color: var(--dark-gray);
text-decoration: none;
background: linear-gradient(to right, #406e47 0%, #406e47 100%) no-repeat;
background-size: 0% 2px;
background-position: left bottom;
transition: all 0.3s;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-title a:hover {
background-size: 100% 2px;
color: #406e47;
}
.blog-excerpt {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
font-size: 0.9rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-read-more {
display: inline-flex;
align-items: center;
gap: 8px;
color: #2d4f32;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
position: relative;
transition: all 0.3s;
}
.blog-read-more svg {
transition: transform 0.3s;
}
.blog-read-more::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #2d4f32 0%, #406e47 100%);
transition: width 0.3s;
}
.blog-read-more:hover {
color: #406e47;
}
.blog-read-more:hover svg {
transform: translateX(5px);
}
.blog-read-more:hover::after {
width: 100%;
}
.blog-view-all {
text-align: center;
margin-top: 50px;
}
/* Seminars Section */
.seminars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}
.seminar-card {
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: var(--transition);
cursor: pointer;
}
.seminar-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.seminar-image {
position: relative;
height: 250px;
overflow: hidden;
}
.seminar-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.seminar-card:hover .seminar-image img {
transform: scale(1.1);
}
.seminar-duration {
position: absolute;
bottom: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.95);
padding: 8px 16px;
border-radius: 25px;
font-size: 14px;
font-weight: 500;
color: var(--primary-green);
display: flex;
align-items: center;
gap: 6px;
}
.seminar-content {
padding: 25px;
text-align: center;
}
.seminar-content h3 {
font-size: 1.3rem;
color: var(--dark-gray);
margin-bottom: 10px;
}
.seminar-subtitle {
color: var(--gray);
font-size: 0.95rem;
}
/* Testimonials Section */
.testimonials-section {
padding: 100px 0;
background: var(--white);
}
.testimonial-card {
background: var(--light-gray);
padding: 40px;
border-radius: 20px;
position: relative;
}
.quote-icon {
font-size: 48px;
color: var(--primary-green);
opacity: 0.2;
margin-bottom: 20px;
}
.testimonial-text {
font-size: 1.1rem;
line-height: 1.8;
color: var(--gray);
margin-bottom: 30px;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 60px;
height: 60px;
background: var(--gradient-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 24px;
font-weight: 600;
}
.author-info h4 {
font-size: 1.1rem;
margin-bottom: 5px;
color: var(--dark-gray);
}
.rating {
display: flex;
gap: 5px;
}
.rating i {
color: #FFD700;
font-size: 14px;
}
/* FAQ Section */
.faq-section {
padding: 100px 0;
background: var(--light-gray);
}
.faq-accordion {
max-width: 800px;
margin: 0 auto;
}
.accordion-item {
background: var(--white);
border-radius: 15px;
margin-bottom: 20px;
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.accordion-header {
padding: 25px 30px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: var(--transition);
}
.accordion-header:hover {
background: var(--green-light);
}
.accordion-header h3 {
font-size: 1.125rem;
color: var(--dark-gray);
}
.accordion-header i {
font-size: 20px;
color: var(--primary-green);
transition: var(--transition);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content p {
padding: 0 30px 25px;
color: var(--gray);
line-height: 1.8;
}
.accordion-item.active .accordion-content {
max-height: 500px;
}
/* Appointment Section */
.appointment-section {
padding: 100px 0;
background: var(--white);
}
.appointment-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
}
.appointment-info {
display: grid;
gap: 20px;
}
.info-card {
background: var(--green-light);
padding: 25px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 20px;
transition: var(--transition);
}
.info-card:hover {
transform: translateX(10px);
background: var(--gradient-soft);
}
.info-card i {
font-size: 24px;
color: var(--primary-green);
width: 50px;
height: 50px;
background: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.info-card h3 {
font-size: 1rem;
color: var(--dark-gray);
margin-bottom: 5px;
}
.info-card p {
color: var(--gray);
font-size: 0.9rem;
}
.appointment-form {
background: var(--light-gray);
padding: 40px;
border-radius: 20px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
position: relative;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 15px 20px 15px 50px;
border: 2px solid transparent;
background: var(--white);
border-radius: 50px;
font-size: 16px;
transition: var(--transition);
}
.form-group textarea {
border-radius: 20px;
resize: none;
padding-top: 20px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-green);
}
.form-group i {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--primary-green);
font-size: 18px;
}
.form-group textarea ~ i {
top: 25px;
transform: none;
}
.btn-block {
width: 100%;
justify-content: center;
}
/* Animations */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.blog-home-card:hover {
animation: float 3s ease-in-out infinite;
}
/* =====================================================
RESPONSIVE DESIGN
===================================================== */
@media (min-width: 1920px) {
.container {
max-width: 1400px;
}
.hero-section {
min-height: 82vh;
max-height: 82vh;
}
.hero-title {
font-size: 3.6rem;
}
.hero-description {
font-size: 1.2rem;
}
.stat-number {
font-size: 2.5rem;
}
.hero-stats {
gap: 35px;
padding-top: 35px;
}
.image-wrapper {
width: 110%;
height: 100%;
max-height: 82vh;
margin-left: auto;
margin-right: -10%;
overflow: hidden;
}
.image-wrapper img {
min-height: 82vh;
object-fit: cover;
object-position: right center;
}
}
@media (min-width: 1600px) and (max-width: 1919px) {
.hero-section {
min-height: 80vh;
max-height: 80vh;
}
.hero-title {
font-size: 3.4rem;
}
.hero-description {
font-size: 1.15rem;
}
.stat-number {
font-size: 2.4rem;
}
.hero-stats {
gap: 32px;
padding-top: 32px;
}
.image-wrapper {
width: 108%;
height: 100%;
max-height: 80vh;
margin-left: auto;
margin-right: -8%;
overflow: hidden;
}
.image-wrapper img {
min-height: 80vh;
object-fit: cover;
object-position: right center;
}
}
@media (min-width: 1440px) and (max-width: 1599px) {
.hero-section {
min-height: 92vh;
max-height: 92vh;
}
.hero-title {
font-size: 3.4rem;
}
.hero-description {
font-size: 1.1rem;
}
.stat-number {
font-size: 2.3rem;
}
.stat-label {
font-size: 0.85rem;
}
.hero-stats {
gap: 35px;
}
.image-wrapper {
width: 106%;
height: 100%;
max-height: 92vh;
margin-left: auto;
margin-right: -6%;
overflow: hidden;
}
.image-wrapper img {
min-height: 92vh;
object-fit: cover;
object-position: right center;
}
}
@media (max-width: 1440px) {
.container {
max-width: 1200px;
}
}
@media (min-width: 1280px) and (max-width: 1439px) {
.hero-section {
min-height: 89vh;
max-height: 89vh;
}
.hero-content {
gap: 35px;
padding: 25px 0;
}
.hero-title {
font-size: 3rem;
}
.hero-description {
font-size: 1.05rem;
}
.stat-number {
font-size: 2.1rem;
}
.stat-label {
font-size: 0.8rem;
}
.hero-stats {
gap: 30px;
}
.image-wrapper {
width: 104%;
height: 100%;
max-height: 89vh;
margin-left: auto;
margin-right: -4%;
overflow: hidden;
}
.image-wrapper img {
min-height: 89vh;
object-fit: cover;
object-position: right center;
}
}
@media (max-width: 1280px) {
.hero-content {
gap: 30px;
padding: 25px 0;
}
.hero-title {
font-size: 2.6rem;
}
.stat-number {
font-size: 1.9rem;
}
.hero-stats {
gap: 30px;
}
}
@media (max-width: 1200px) {
.blog-home-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.hero-section {
min-height: 70vh;
max-height: 70vh;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 30px;
}
.hero-text {
order: 2;
}
.hero-image {
order: 1;
max-width: 400px;
margin: 0 auto;
}
.image-wrapper {
max-height: 45vh;
width: 100%;
margin-left: 0;
}
.hero-title {
font-size: 2.4rem;
}
.hero-buttons {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
.about-content {
grid-template-columns: 1fr;
gap: 40px;
}
.image-frame {
max-width: 100%;
margin: 0 auto;
}
.services-grid-layout {
grid-template-columns: 1fr;
gap: 20px;
}
.appointment-content {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 992px) {
.hero-section {
min-height: 65vh;
max-height: 65vh;
}
.hero-title {
font-size: 2.2rem;
}
.hero-description {
font-size: 0.95rem;
}
.btn {
padding: 12px 28px;
font-size: 15px;
}
.service-card {
grid-template-columns: 1fr !important;
}
.service-card .service-text {
padding: 25px;
order: 1 !important;
}
.service-card .service-image {
order: 2 !important;
min-height: 150px;
max-height: 170px;
}
.seminars-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 768px) {
.hero-section {
min-height: 60vh;
max-height: 60vh;
}
.hero-content {
gap: 25px;
}
.image-wrapper {
max-height: 38vh;
}
.hero-title {
font-size: 2rem;
}
.hero-description {
font-size: 0.9rem;
}
.hero-buttons {
flex-direction: column;
gap: 15px;
}
.btn {
width: 100%;
justify-content: center;
}
.hero-stats {
flex-wrap: wrap;
gap: 20px;
padding-top: 30px;
}
.stat-number {
font-size: 1.8rem;
}
.stat-label {
font-size: 0.75rem;
}
.form-row {
grid-template-columns: 1fr;
}
.about-features {
grid-template-columns: 1fr;
}
.seminars-grid {
grid-template-columns: 1fr;
}
.blog-home-section {
padding: 60px 0;
}
.blog-home-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.blog-card-image {
height: 200px;
}
.gallery-slider .swiper {
padding: 0 60px;
}
.gallery-slide-image {
height: 280px;
}
/* Video responsive */
.videos-section .container {
padding: 0 70px;
}
.videos-slider .swiper {
padding: 0 50px;
}
.video-thumbnail-card {
max-height: 450px;
}
.play-button {
width: 70px;
height: 70px;
}
.play-button i {
font-size: 28px;
}
.video-modal-content {
max-width: 90%;
}
.video-modal-close {
top: -45px;
width: 35px;
height: 35px;
font-size: 18px;
}
}
@media (max-width: 576px) {
.hero-section {
min-height: 55vh;
max-height: 55vh;
}
.image-wrapper {
max-height: 32vh;
}
.hero-title {
font-size: 1.8rem;
}
.stat-number {
font-size: 1.6rem;
}
.video-thumbnail-card {
max-height: 400px;
}
.play-button {
width: 60px;
height: 60px;
}
.play-button i {
font-size: 24px;
}
}
@media (max-width: 480px) {
.hero-section {
min-height: 52vh;
max-height: 52vh;
}
.image-wrapper {
max-height: 30vh;
}
.hero-title {
font-size: 1.6rem;
}
.hero-description {
font-size: 0.85rem;
}
.stat-number {
font-size: 1.5rem;
}
.stat-label {
font-size: 0.7rem;
}
.video-thumbnail-card {
max-height: 350px;
}
.play-button {
width: 50px;
height: 50px;
}
.play-button i {
font-size: 20px;
}
.video-modal-close {
top: -40px;
width: 30px;
height: 30px;
font-size: 16px;
}
}

/* ===== SCROLL FIX ===== */
html, body {
    overflow-x: hidden;
}

/* Sertifikat Lightbox - butun ekranlar */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}
.lightbox-content {
    position: relative;
    max-width: 90vw !important;
    max-height: 85vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-content img {
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
}
.close-lightbox {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 35px;
    color: white;
    cursor: pointer;
    z-index: 10002;
}