/* =========================
   GTS THEME VARIABLES
   ========================= */

/* -------- Light Theme -------- */
:root {
  /* Backgrounds */
  --bg: #ffffff;
  --bg-soft: #f7f7f7;
  --bg-gray: #f9fafb;

  /* Text */
  --text-main: #1a1a1a;
  --text-muted: #6b6b6b;
  --text-light: #9ca3af;

  /* Brand Accent */
  --primary: #d32f2f;        /* GTS Red - Professional */
  --primary-hover: #b71c1c;
  --primary-soft: rgba(211, 47, 47, 0.08);

  /* UI */
  --border: #e5e5e5;
  --shadow: rgba(0, 0, 0, 0.08);
  --shadow-hover: rgba(229, 57, 53, 0.15);
  
  /* Legacy support */
  --brand-red: #d32f2f;
}

/* -------- Dark Theme -------- */
[data-theme="dark"] {
  /* Backgrounds */
  --bg: #0f0f0f;
  --bg-soft: #1a1a1a;
  --bg-gray: #121212;

  /* Text */
  --text-main: #f5f5f5;
  --text-muted: #b3b3b3;
  --text-light: #6b7280;

  /* Brand Accent */
  --primary: #ef5350;        /* Professional red for dark mode */
  --primary-hover: #e53935;
  --primary-soft: rgba(239, 83, 80, 0.12);

  /* UI */
  --border: #2a2a2a;
  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-hover: rgba(255, 107, 107, 0.2);
  
  /* Legacy support */
  --brand-red: #ef5350;
}

/* Theme utility classes */
.bg-theme { background-color: var(--bg) !important; }
.bg-theme-soft { background-color: var(--bg-soft) !important; }
.bg-theme-gray { background-color: var(--bg-gray) !important; }
.text-theme { color: var(--text-main) !important; }
.text-theme-muted { color: var(--text-muted) !important; }
.text-theme-light { color: var(--text-light) !important; }
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.border-theme { border-color: var(--border) !important; }

/* Smooth theme transitions */
body, header, footer, .theme-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Override Tailwind colors with theme variables */
.bg-white { background-color: var(--bg) !important; }
.bg-gray-50 { background-color: var(--bg-soft) !important; }
.bg-gray-100 { background-color: var(--bg-gray) !important; }
.text-gray-900 { color: var(--text-main) !important; }
.text-gray-700 { color: var(--text-muted) !important; }
.text-gray-600 { color: var(--text-muted) !important; }
.text-gray-500 { color: var(--text-light) !important; }
.text-gray-400 { color: var(--text-light) !important; }
.border-gray-200 { border-color: var(--border) !important; }
.border-gray-300 { border-color: var(--border) !important; }

/* Primary color overrides */
.bg-red-600, .bg-red-50 { background-color: var(--primary-soft) !important; }
.text-red-600 { color: var(--primary) !important; }
.border-red-600 { border-color: var(--primary) !important; }
.hover\:bg-red-700:hover { background-color: var(--primary-hover) !important; }
.hover\:bg-red-600:hover { background-color: var(--primary) !important; }
.hover\:text-red-600:hover { color: var(--primary) !important; }
.hover\:border-red-600:hover { border-color: var(--primary) !important; }

/* Gradient overrides */
.bg-gradient-to-br.from-gray-50.to-gray-100,
.bg-gradient-to-r.from-gray-50.to-gray-100 {
  background: linear-gradient(to bottom right, var(--bg-soft), var(--bg-gray)) !important;
}

/* small helpers to complement Tailwind where needed */
.sticky-top-custom{ position: sticky; top: 0; z-index: 50; }

/* ensure mobile menu covers full width cleanly */
#mobileMenu{ background: white; }

/* fallback for logo spacing */
img[alt="GTS"]{ display: inline-block; }

/* accessible focus styles */
/* a:focus, button:focus{ outline: 3px solid rgba(212,57,57,0.15); outline-offset: 2px; } */

/* Professional navbar shadow */
header.sticky{ box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Smooth dropdown animations */
.group:hover > div[class*="absolute"] {
  animation: slideDown 0.2s ease-out;
}

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

/* Enhanced chatbot button styling */
.chatbot-btn {
	background: transparent;
	border-color: var(--primary);
	color: var(--primary);
	transition: all 0.3s ease;
}

.chatbot-btn:hover {
	background: var(--primary) !important;
	color: white !important;
	box-shadow: 0 4px 12px var(--shadow-hover);
}

.chatbot-btn-mobile, .chatbot-btn-mobile:focus{
	background: transparent;
	border-color: var(--primary);
	color: var(--primary);
	transition: all 0.3s ease;
}

.chatbot-btn-mobile:hover{ 
	background: var(--primary) !important; 
	color: white !important; 
	border-color: var(--primary);
	box-shadow: 0 4px 12px var(--shadow-hover);
}

/* Icon-based hamburger with better styling */
.hamburger-btn{ 
	background: transparent; 
	border: none; 
	box-shadow: none; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center;
	transition: all 0.2s ease;
}

.hamburger-btn i{ 
	font-size: 1.6rem; 
	color: var(--text-main); 
	transition: color 0.2s ease, transform 0.2s ease;
}

.hamburger-btn.open i{ 
	color: var(--primary);
	transform: rotate(90deg);
}

/* Smooth mobile menu appearance */
#mobileMenu{ 
	transition: max-height 0.3s ease, opacity 0.2s ease; 
	overflow: hidden;
}

#mobileMenu.hidden{ 
	max-height: 0; 
	opacity: 0;
}

#mobileMenu:not(.hidden){ 
	max-height: 1000px; 
	opacity: 1;
}

/* Topbar hover effects */
.topbar-item {
	transition: all 0.2s ease;
}

/* Footer Styles - Professional & Theme-Aware */
.footer-link {
	display: inline-block;
	position: relative;
	transition: all 0.3s ease;
}

.footer-link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary);
	transition: width 0.3s ease;
}

.footer-link:hover::after {
	width: 100%;
}

.footer-social-icon {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social-icon:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 12px var(--shadow-hover);
}

/* Newsletter Form Styles */
.newsletter-input::placeholder {
	color: var(--text-light);
	opacity: 0.6;
}

.newsletter-btn {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Language selector styles */
.lang-btn{ color: var(--text-muted); background: transparent; border: none; transition: background .12s ease, color .12s ease; }

.lang-btn-mobile{ 
	color: var(--text-muted); 
	background: transparent; 
	border: none; 
	cursor: pointer;
	transition: all 0.2s ease; 
}

.lang-btn-mobile:hover{
	color: var(--text-main);
}

/* Back to top button */
#backToTop{ transition: opacity .18s ease, transform .12s ease; }
#backToTop:hover{ transform: translateY(-3px) }

/* Chatbot styles */
#chatbotContainer { z-index: 60; }
#chatbotContainer .shadow-lg { box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
#chatbotContainer .messages-container, #messagesContainer { 
  background: var(--bg-soft); 
  scroll-behavior: smooth;
}

/* Smooth scrollbar */
#messagesContainer::-webkit-scrollbar {
  width: 6px;
}

#messagesContainer::-webkit-scrollbar-track {
  background: transparent;
}

#messagesContainer::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

#messagesContainer::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.3);
}

/* Chatbot messages */
.chatbot-message { 
  display: flex; 
  margin-bottom: 1rem;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chatbot-message .bubble { 
  max-width: 85%; 
  padding: 0.75rem 1rem; 
  border-radius: 16px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
  font-size: 0.9rem; 
  line-height: 1.5; 
  word-wrap: break-word;
  position: relative;
}

.chatbot-message.bot { justify-content: flex-start; }
.chatbot-message.bot .bubble { 
  background: var(--bg); 
  color: var(--text-main); 
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border);
}

.chatbot-message.user { justify-content: flex-end; }
.chatbot-message.user .bubble { 
  background: var(--primary); 
  color: #fff; 
  border-bottom-right-radius: 4px;
}

.chatbot-message .meta { 
  display: block; 
  font-size: 0.7rem; 
  color: var(--text-light); 
  margin-top: 0.25rem;
  opacity: 0.7;
}

/* Chatbot button options */
.chatbot-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0;
  animation: buttonsSlideIn 0.4s ease-out;
}

@keyframes buttonsSlideIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chatbot-option-btn {
  background: var(--bg);
  color: var(--text-main);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}

.chatbot-option-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.chatbot-option-btn:hover {
  background: var(--bg-soft);
  border-color: var(--primary);
  transform: translateX(4px);
  box-shadow: 0 4px 12px var(--primary-soft);
}

.chatbot-option-btn:hover::before {
  opacity: 1;
}

.chatbot-option-btn:active {
  transform: translateX(4px) scale(0.98);
}

/* Mobile responsiveness for chatbot */
@media (max-width: 640px) {
  #chatbotContainer {
    right: 1rem;
    bottom: 1rem;
    width: calc(100vw - 2rem);
  }
  
  .chatbot-option-btn {
    font-size: 0.8rem;
    padding: 0.6rem 0.85rem;
  }
  
  .chatbot-message .bubble {
    max-width: 90%;
    font-size: 0.85rem;
  }
}

/* Typing indicator */
.typing-bubble {
  padding: 0.6rem 1rem !important;
}

.typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-light);
  opacity: 0.4;
  animation: typingDot 1.4s infinite;
}

.typing-dots span:nth-child(1) {
  animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDot {
  0%, 60%, 100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-6px);
  }
}

/* Enhanced chatbot link styles */
.chatbot-message .bubble a,
.chatbot-message .bubble a.chatbot-link {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 500;
  transition: all 0.2s ease;
}

.chatbot-message.bot .bubble a:hover,
.chatbot-message.bot .bubble a.chatbot-link:hover {
  color: var(--primary-hover);
  text-decoration: none;
}

.chatbot-message.user .bubble a {
  color: #fff;
  text-decoration: underline;
}

/* Strong text in chatbot */
.chatbot-message .bubble strong {
  font-weight: 600;
  color: var(--text-main);
}

.chatbot-message.user .bubble strong {
  color: #fff;
}

/* Typing indicator */
.chatbot-typing { display:inline-block; padding:6px 10px; background: var(--bg); border-radius:10px; box-shadow:0 3px 8px var(--shadow); }
.chatbot-typing .dot { display:inline-block; width:6px; height:6px; background: var(--text-light); border-radius:50%; margin-right:4px; animation: blink 1s infinite; }
.chatbot-typing .dot:nth-child(1) { animation-delay: 0s; }
.chatbot-typing .dot:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing .dot:nth-child(3) { animation-delay: 0.4s; margin-right: 0; }
@keyframes blink { 0%{opacity:.2} 50%{opacity:1} 100%{opacity:.2} }

/* Input area adjustments */
#chatInput{ border:1px solid var(--border); }
#chatSendBtn{ background: var(--primary); border:none; font-weight: 500; }
#chatSendBtn:hover{ background: var(--primary-hover); }

/* Responsive: make chatbot a full-width bottom sheet on small screens */
@media (max-width: 640px) {
	#chatbotContainer { right: 0 !important; left: 0 !important; bottom: 0 !important; width: 100% !important; padding: 0 0.5rem; }
	#chatbotContainer > div { border-radius: 12px 12px 0 0; height: 68vh; max-height: 88vh; }
	#messagesContainer { padding-right: 0.5rem; padding-left: 0.5rem; }
	#chatbotContainer .p-3 { padding-left: 0.5rem; padding-right: 0.5rem; }
	#chatSendBtn { padding-left: 0.9rem; padding-right: 0.9rem; }
}

/* Desktop: slightly wider chatbot on laptop/large screens */
@media (min-width: 1024px) {
	#chatbotContainer { width: 26rem !important; }
	#chatbotContainer > div { height: 34rem; }
}

/* (logo badge removed) */

/* Hero Pattern */
.hero-pattern { 
	background-image: radial-gradient(circle at 2px 2px, var(--primary) 1px, transparent 1px);
	background-size: 32px 32px;
	opacity: 0.06;
}

/* Hero Carousel */
.hero-carousel-container { position: relative; overflow: hidden; }
.hero-carousel { position: relative; height: 100%; }
.carousel-slide { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	pointer-events: none;
}
.carousel-slide.active { opacity: 1; pointer-events: auto; }

/* Carousel Dots */
.carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}
.carousel-dot:hover { background: rgba(255,255,255,0.6); }
.carousel-dot.active { 
	width: 28px; 
	border-radius: 5px;
	background: #fff;
}

[data-theme="dark"] .carousel-dot {
	background: rgba(255,255,255,0.3);
}
[data-theme="dark"] .carousel-dot:hover {
	background: rgba(255,255,255,0.5);
}

/* Hero Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-in {
	animation: fadeIn 0.8s ease-out;
}

.animate-slide-up {
	animation: slideUp 0.8s ease-out;
}

.animate-slide-up:nth-child(2) {
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.animate-slide-up:nth-child(3) {
	animation-delay: 0.4s;
	animation-fill-mode: both;
}

/* Service Card Styles - 4 Column Layout */
.service-card {
	background: var(--bg);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px var(--shadow);
	transition: all 0.3s ease;
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.service-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 32px var(--shadow-hover);
}

.service-card .overflow-hidden {
	overflow: hidden;
	position: relative;
}

.service-card img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.service-card:hover img {
	transform: scale(1.08);
}

.service-card .p-6 {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.service-card .p-6 > span {
	display: inline-block;
	width: fit-content;
	font-size: 0.7rem;
	padding: 0.35rem 0.75rem;
	margin-bottom: 0.75rem;
}

.service-card h3 {
	font-size: 1.05rem;
	line-height: 1.3;
	margin-bottom: 0.5rem;
}

.service-card .p-6 p {
	flex-grow: 1;
	font-size: 0.825rem;
	line-height: 1.5;
	margin-bottom: 0.875rem;
}

.service-card a {
	font-size: 0.825rem;
	font-weight: 600;
	margin-top: auto;
}

.service-card a svg {
	transition: transform 0.3s ease;
}

.service-card:hover a svg {
	transform: translateX(4px);
}

@media (max-width: 1024px) {
	.service-card img {
		height: 200px;
	}
	
	.service-card h3 {
		font-size: 1.1rem;
	}
	
	.service-card .p-6 {
		padding: 1.5rem;
	}
}

/* Testimonial Cards - Grid Layout */
.testimonial-card {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.5rem;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px var(--shadow);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px var(--shadow-hover);
	border-color: var(--primary);
}

/* Legacy Testimonial Carousel */
.testimonial-container { position: relative; }
.testimonial-wrapper { display: flex; }
.testimonial-slide { flex: 0 0 100%; }
.testimonial-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--border);
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}
.testimonial-dot:hover { background: var(--text-light); }
.testimonial-dot.active { 
	width: 28px; 
	border-radius: 5px;
	background: var(--primary);
}

/* Gallery Grid Styles */
.gallery-grid { min-height: 400px; }
.gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 1;
	transition: all 0.3s ease;
}
.gallery-item.col-span-2 { aspect-ratio: 2/1; }
.gallery-item.row-span-2 { aspect-ratio: 1; }
.gallery-item:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 20px var(--shadow-hover);
	box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.gallery-item img {
	transition: transform 0.4s ease;
}
.gallery-item:hover img {
	transform: scale(1.1);
}

/* Mobile responsiveness for gallery */
@media (max-width: 1024px) {
	.gallery-item.col-span-2 { grid-column: span 1; }
	.gallery-item.row-span-2 { grid-row: span 1; }
}

/* Client Logo Cards */
.client-logo-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	transition: all 0.3s ease;
	min-height: 70px;
}

@media (min-width: 640px) {
	.client-logo-card {
		padding: 1rem;
		min-height: 85px;
	}
}

.client-logo-card:hover {
	box-shadow: 0 4px 16px var(--shadow-hover);
	transform: translateY(-3px);
	border-color: var(--primary);
}

.client-logo {
	width: 100%;
	max-width: 120px;
	height: 40px;
	object-fit: contain;
	transition: all 0.3s ease;
}

@media (min-width: 640px) {
	.client-logo {
		max-width: 140px;
		height: 50px;
	}
}

.client-logo-card:hover .client-logo {
	transform: scale(1.05);
}

/* Client Counter Card - Same style as logo cards */
.client-counter-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem 1rem;
	background: linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 100%);
	border: 2px solid var(--primary);
	border-radius: 8px;
	transition: all 0.3s ease;
	min-height: 85px;
	position: relative;
	overflow: hidden;
}

.client-counter-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, var(--primary-soft) 0%, transparent 70%);
	opacity: 0.3;
	transition: opacity 0.3s ease;
}

.client-counter-card:hover {
	box-shadow: 0 8px 24px var(--shadow-hover);
	transform: translateY(-3px) scale(1.02);
	border-color: var(--primary-hover);
}

.client-counter-card:hover::after {
	opacity: 0.5;
}

.client-counter-card > div {
	position: relative;
	z-index: 1;
}

/* Legacy support */
.client-logo-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: var(--bg);
	border-radius: 12px;
	transition: all 0.3s ease;
}

.client-logo-tile:hover {
	box-shadow: 0 4px 16px var(--shadow);
	transform: translateY(-2px);
}

/* About Page - Core Values */
.core-value-card {
	background: var(--bg);
	padding: 2rem;
	border-radius: 16px;
	box-shadow: 0 2px 8px var(--shadow);
	transition: all 0.3s ease;
}

.core-value-card:hover {
	box-shadow: 0 8px 24px var(--shadow-hover);
	transform: translateY(-4px);
}

/* About Page - Founder Cards */
.founder-card {
	transition: transform 0.3s ease;
}

.founder-card:hover {
	transform: translateY(-8px);
}

/* About Page - Branch Tabs */
.branch-tab {
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	color: var(--text-muted);
	background: transparent;
	border-radius: 0.5rem;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
}

.branch-tab:hover {
	color: var(--text-main);
	background: var(--bg-soft);
}

.branch-tab.active {
	color: white;
	background: var(--primary);
}

.branch-content {
	display: none;
	animation: fadeIn 0.4s ease;
}

.branch-content.active {
	display: block;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* About Hero - Floating Animation */
@keyframes float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
}

.animate-float {
	animation: float 3s ease-in-out infinite;
}

/* About Hero - Text Gradient Animation */
@keyframes gradient {
	0%, 100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

.bg-clip-text {
	-webkit-background-clip: text;
	background-clip: text;
	background-size: 200% auto;
}

/* About Hero Carousel */
.about-carousel {
	position: relative;
	width: 100%;
}

.about-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}

.about-slide.active {
	opacity: 1;
}

.about-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.about-dot.active {
	width: 32px;
	border-radius: 5px;
	background: white;
}

.about-prev:hover,
.about-next:hover {
	transform: translateY(-50%) scale(1.1);
}