/*********************************************************************************

	Template Name: Naha Civan - Photography Portfolio Bootstrap 5 Template
	Description: A perfect template to build beautiful and unique photography/portfolio websites. It comes with nice and clean design.
	Version: 1.0

	Note: This is custom css.

**********************************************************************************/
/**************************************************************

	STYLESHEET INDEXING
	|
	|
	|___ Google Fonts
	|___ Section Styles
	|___ Custom Colors (Magic Studio)
	|
	|
	|___ END STYLESHEET INDEXING

***************************************************************/
/**************************************
    Google Fonts
***************************************/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


/**************************************
    Section Styles
***************************************/

.section {
	height: auto !important;
	overflow-y: clip;
}

.portfolio-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
	flex-wrap: wrap;
	row-gap: 10px;
}

/**************************************
    Custom Colors - Magic Studio
    Couleurs du client: #92DFF4 (bleu clair) et #117E9C (bleu foncé)
***************************************/

/* Variables CSS pour les couleurs */
:root {
	--color-primary: #92DFF4;
	--color-secondary: #117E9C;
	--color-primary-hover: #7dd0e8;
	--color-secondary-hover: #0e6a82;
}

/* Liens */
a {
	color: var(--color-secondary);
}

a:visited {
	color: var(--color-secondary);
}

a:hover,
a:active,
a:focus {
	color: var(--color-primary);
}

a:link:hover {
	color: var(--color-primary);
}

/* Boutons */
.button,
.button:link,
.button:visited {
	background: var(--color-secondary);
	color: #ffffff;
}

.button:hover,
.button:active {
	background: var(--color-primary);
	color: #ffffff;
}

.button[data-content]::before {
	background: var(--color-primary);
}

/* Bouton readmore */
.readmore-button,
.readmore-button:visited,
.readmore-button:link {
	color: var(--color-secondary);
}

.readmore-button:hover,
.readmore-button:active {
	color: var(--color-primary);
}

/* Barre verticale (vertical-bar) */
span.vertical-bar::before {
	background: var(--color-primary);
}

/* Navigation */
nav.main-navigation ul li:hover > a {
	color: var(--color-primary);
}

nav.main-navigation ul li ul {
	border-top: 3px solid var(--color-primary);
}

nav.main-navigation ul li ul li a::before {
	background: var(--color-primary);
}

nav.main-navigation ul li ul li a:hover {
	color: var(--color-primary);
}

/* Input focus */
input:focus,
input:active,
button:focus,
button:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
	border-color: var(--color-primary);
	outline-color: var(--color-primary);
}

/* Portfolio filters */
.portfolio-tabs button.is-checked,
.portfolio-tabs button:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/* Portfolio items hover */
.portfolio:hover .portfolio-content h5 a,
.portfolio:hover .portfolio-content h6 a {
	color: var(--color-primary);
}

/* Contact form */
.nahacivan-form-input input:focus,
.nahacivan-form-input textarea:focus {
	border-color: var(--color-primary);
}

/* Footer links */
.footer-social-links a:hover {
	color: var(--color-primary);
}

/* Testimonial borders */
.testimonial-border-topleft,
.testimonial-border-topright,
.testimonial-border-bottomleft,
.testimonial-border-bottomright {
	border-color: var(--color-primary);
}

/* Breadcrumb links */
.cr-breadcrumb a:hover {
	color: var(--color-primary);
}

/* Section title accents */
.section-title h2 {
	color: var(--color-secondary);
}

/* Hero slider buttons */
.hero-slide-text .button {
	background: var(--color-secondary);
}

.hero-slide-text .button:hover {
	background: var(--color-primary);
}

/* Photo gallery zoom button */
.portfolio-zoom-button:hover {
	background: var(--color-primary);
	color: #ffffff;
}

/* Active navigation item */
nav.main-navigation ul li.active > a {
	color: var(--color-primary);
}

/* Contact info links */
.contact-info a:hover {
	color: var(--color-primary);
}

/* Contrôle des images pour éviter qu'elles dépassent */
.g-photo-image img,
.g-photo-thumbs img,
.about-image img,
.testimonial-image img,
.portfolio-details-images img {
	max-width: 100%;
	height: auto;
	display: block;
}
.hero-single-slide {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}