/* ----------------------------------

Template Name: UTH Technovation Challenge
Author: UTH
Description:
Version: 1.0

Main Font    : Kanit
Main Color   : #C9910E

-------------------------------------

[Typography]

Body copy:    15px 'Kanit', sans-serif
Header:     36px 'Teko', sans-serif
Input, textarea:  16px 'Kanit', sans-serif
Sidebar heading:  22px 'Teko', sans-serif

>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
        - Accordion
        - Tabs
    02. Preloader
    03 Navbar
        - Navbar Sidebar
        - Navbar Sticky
    04. Home Page
        - Dark Version
        - Light Version
    05. Services
        - Service Single
	06. About
    07. Project
        - Project Single
    08. Skill
    09. Experience
    10. Education
    10. CV/Resume
    12. Faq
    13. Progress
    14. Brand / Partner
    15. Pricing
    16. Blog
        - Single
    17. Error 404
    18. Footer
    19. PHP Contact Form
    20. Others

*/

/*
** General Styles for HTML tags
*/

/* Desktop and Mobile Navbar Brand Styles */
.navbar-brand {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	flex-shrink: 0;
}

.navbar-brand img {
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	max-width: none;
}

.navbar-brand span {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Mobile adjustments for navbar brand */
@media (max-width: 991px) {
	.navbar-header {
		display: flex;
		align-items: center;
		width: 100%;
		gap: 0;
	}
	
	.navbar-brand {
		gap: 4px;
		margin: 0 !important;
		padding: 0 10px 0 0 !important;
		flex-shrink: 0;
		order: 1;
	}
	
	.navbar-brand img {
		height: 28px;
		min-width: 28px;
		width: auto;
	}
	
	.navbar-toggle {
		margin-left: 8px;
		padding: 15px 8px;
		flex-shrink: 0;
		order: 2;
	}
	
	.mobile-menu-header {
		padding-bottom: 20px;
		border-bottom: 1px solid #e0e0e0;
	}
	
	.mobile-menu-header a {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		gap: 8px;
		flex-wrap: wrap;
	}
	
	.mobile-menu-header img {
		height: 35px;
		display: inline-block;
		vertical-align: middle;
	}
	
	.mobile-menu-header span {
		display: inline-block;
		vertical-align: middle;
	}
	
	/* Hide nav-right on mobile since we moved it to the menu */
	.nav-right {
		display: none !important;
	}
}

/* Partners Carousel Styles */
.partners-carousel {
	position: relative;
	padding: 40px 0;
	max-width: 100%;
	margin: 0 auto;
}

.partners-carousel .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	background: transparent;
}

.partners-carousel .partner-style-one-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.partners-carousel .partner-style-one-item img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
	filter: grayscale(0%);
	transition: all 0.3s ease;
}

.partners-carousel .partner-style-one-item img:hover {
	filter: grayscale(20%);
	transform: scale(1.05);
}

.partners-carousel .swiper-pagination-bullet {
	background: var(--color-primary);
	opacity: 0.5;
}

.partners-carousel .swiper-pagination-bullet-active {
	background: var(--color-primary);
	opacity: 1;
}

.partners-carousel .swiper-button-prev,
.partners-carousel .swiper-button-next {
	color: var(--color-primary);
	width: 40px;
	height: 40px;
	background: rgba(255, 105, 167, 0.1);
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
}

.partners-carousel .swiper-button-prev::after,
.partners-carousel .swiper-button-next::after {
	font-size: 16px;
}

.partners-carousel .swiper-button-prev {
	left: 10px;
}

.partners-carousel .swiper-button-next {
	right: 10px;
}

/* ==== Footer Social Styles ==== */
:root{
  --footer-bg: #0f0f0f;            /* por si no usas bg-dark */
  --footer-gold: #c5ad5b;          /* dorado de los círculos */
  --footer-gold-hover: #e1cf79;    /* hover más claro */
}

footer.bg-dark { background-color: var(--footer-bg) !important; }

/* Botones circulares dorados */
.footer-social .social-btn{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--footer-gold);
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease;
}
.footer-social .social-btn:hover{
  background: var(--footer-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  color: #fff;
}
.footer-social .social-btn i{ font-size: 16px; line-height: 1; }

/* Espaciado y orden en móvil */
@media (max-width: 991.98px){
  footer .footer-social { margin-bottom: .5rem; }
}