/* =========================================================
PORTFOLIO HERO
========================================================= */

.portfolio-hero {
position: relative;


width: 100%;
min-height: 430px;

display: flex;
align-items: center;
justify-content: center;

overflow: hidden;

background-image: url("../images/portfolio/portfolio-main1.webp");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;


}

/* =========================================================
PORTFOLIO HERO OVERLAY
========================================================= */

.portfolio-hero-overlay {
position: absolute;
inset: 0;


background:
    linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.48) 0%,
        rgba(0, 0, 0, 0.72) 100%
    );

z-index: 1;


}

/* =========================================================
PORTFOLIO HERO CONTENT
========================================================= */

.portfolio-hero-content {
position: relative;
z-index: 2;


width: 100%;
max-width: 900px;

margin: 0 auto;

padding: 60px 20px;

text-align: center;

color: #ffffff;


}

/* =========================================================
HERO TITLE
========================================================= */

.portfolio-hero-content h1 {
margin: 0 0 16px;
padding: 0;


color: #ffffff;

font-size: 52px;
line-height: 1.1;

font-weight: 800;

letter-spacing: -1px;

text-shadow:
    0 3px 15px rgba(0, 0, 0, 0.45);


}

/* =========================================================
BREADCRUMB
========================================================= */

.breadcrumb {
display: flex;


align-items: center;
justify-content: center;

gap: 12px;

margin: 0;
padding: 0;

font-size: 15px;
line-height: 1.5;

font-weight: 500;


}

/* =========================================================
BREADCRUMB LINK
========================================================= */

.breadcrumb a {
color: #ffffff;


text-decoration: none;

transition:
    color 0.3s ease,
    opacity 0.3s ease;


}

/* =========================================================
BREADCRUMB LINK HOVER
========================================================= */

.breadcrumb a:hover {
color: #20a4ff;


opacity: 1;


}

/* =========================================================
BREADCRUMB TEXT
========================================================= */

.breadcrumb span {
color: rgba(255, 255, 255, 0.80);
}

/* =========================================================
CURRENT PAGE
========================================================= */

.breadcrumb span:last-child {
color: #20a4ff;


font-weight: 500;


}

/* =========================================================
PORTFOLIO SECTION
========================================================= */

.portfolio-section {
width: 100%;


padding: 80px 20px;

background: #000000;


}

/* =========================================================
PORTFOLIO CONTAINER
========================================================= */

.portfolio-container {
width: 100%;
max-width: 1450px;


margin: 0 auto;


}

/* =========================================================
PORTFOLIO GRID
========================================================= */

.portfolio-grid {
width: 100%;


display: grid;

grid-template-columns:
    repeat(3, minmax(0, 1fr));

gap: 22px;

align-items: stretch;


}

/* =========================================================
PORTFOLIO CARD
========================================================= */

.portfolio-card {
width: 100%;
min-width: 0;


background: #080808;

border: 1px solid #28485d;

border-radius: 16px;

overflow: hidden;

box-sizing: border-box;

box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.35);

transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;


}

/* =========================================================
PORTFOLIO CARD HOVER
========================================================= */

.portfolio-card:hover {
transform: translateY(-5px);


border-color: #3c6f8e;

box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.55);


}

/* =========================================================
CARD IMAGE WRAPPER
========================================================= */

.portfolio-image {
position: relative;


width: 100%;

height: 270px;

overflow: hidden;

background: #050505;

cursor: zoom-in;


}

/* =========================================================
CARD IMAGE
========================================================= */

.portfolio-card .portfolio-image img {
width: 100%;


height: 100%;

display: block;

object-fit: cover;

object-position: center;

margin: 0;
padding: 0;

cursor: zoom-in;

transition:
    transform 0.5s ease,
    filter 0.3s ease;


}

/* =========================================================
CARD IMAGE HOVER
========================================================= */

.portfolio-card:hover .portfolio-image img {
transform: scale(1.04);


filter: brightness(1.05);


}

/* =========================================================
CARD CONTENT
========================================================= */

.portfolio-content {
padding: 14px 18px 18px;


background: #080808;


}

/* =========================================================
CARD TITLE
========================================================= */

.portfolio-content h2 {
margin: 0;


padding: 0;

color: #ffffff;

font-size: 23px;

line-height: 1.3;

font-weight: 700;

letter-spacing: -0.3px;


}

/* =========================================================
CARD DESCRIPTION
========================================================= */

.portfolio-content p {
margin: 5px 0 0;


padding: 0;

color: #cbd5e1;

font-size: 16px;

line-height: 1.4;

font-weight: 500;


}

/* =========================================================
LOCATION
========================================================= */

.portfolio-location {
display: flex;


align-items: center;

gap: 8px;

margin-top: 14px;

color: #35b7ff;

font-size: 15px;

font-weight: 600;


}

/* =========================================================
LOCATION ICON
========================================================= */

.portfolio-location i {
color: #35b7ff;


font-size: 16px;


}

/* =========================================================
LOAD MORE WRAPPER
========================================================= */

.portfolio-load-more {
width: 100%;


display: flex;

align-items: center;

justify-content: center;

margin-top: 45px;


}

/* =========================================================
LOAD MORE BUTTON
========================================================= */

.load-more-btn {
border: 1px solid #20a4ff;


outline: none;

padding: 14px 34px;

background: #1598e5;

color: #ffffff;

border-radius: 8px;

font-size: 15px;

line-height: 1;

font-weight: 700;

cursor: pointer;

transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease;


}

/* =========================================================
LOAD MORE HOVER
========================================================= */

.load-more-btn:hover {
background: #0b82c8;


border-color: #35b7ff;

transform: translateY(-2px);

box-shadow:
    0 10px 25px rgba(21, 152, 229, 0.25);


}

/* =========================================================
LOAD MORE DISABLED
========================================================= */

.load-more-btn:disabled {
opacity: 0.65;


cursor: wait;

transform: none;

box-shadow: none;


}

/* =========================================================
HIDDEN PORTFOLIO CARDS
========================================================= */

.portfolio-card.portfolio-hidden {
 display: none !important;
}

/* =========================================================
NEWLY LOADED CARD ANIMATION
========================================================= */

.portfolio-card.portfolio-card-show {
animation:
portfolioCardShow 0.45s ease forwards;
}

@keyframes portfolioCardShow {


from {
    opacity: 0;

    transform:
        translateY(18px);
}

to {
    opacity: 1;

    transform:
        translateY(0);
}


}

/* =========================================================
IMAGE LIGHTBOX
========================================================= */

.portfolio-lightbox {
position: fixed;

inset: 0;

width: 100%;
height: 100%;

display: flex;

align-items: center;

justify-content: center;

padding: 30px;

box-sizing: border-box;

background:
    rgba(0, 0, 0, 0.92);

opacity: 0;

visibility: hidden;

pointer-events: none;

z-index: 99999;

transition:
    opacity 0.25s ease,
    visibility 0.25s ease;


}

/* =========================================================
ACTIVE LIGHTBOX
========================================================= */

.portfolio-lightbox.active {
opacity: 1;


visibility: visible;

pointer-events: auto;


}

/* =========================================================
LIGHTBOX CONTENT
========================================================= */

.lightbox-content {
position: relative;


width: auto;
max-width: 94vw;

max-height: 90vh;

display: flex;

align-items: center;

justify-content: center;


}

/* =========================================================
LIGHTBOX IMAGE
========================================================= */

.lightbox-content img {
display: block;


width: auto;

height: auto;

max-width: 94vw;

max-height: 88vh;

object-fit: contain;

border-radius: 8px;

background: #050505;

box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.65);

transform: scale(0.94);

transition:
    transform 0.25s ease;


}

/* =========================================================
ACTIVE LIGHTBOX IMAGE
========================================================= */

.portfolio-lightbox.active
.lightbox-content img {
transform: scale(1);
}

/* =========================================================
LIGHTBOX CLOSE BUTTON
========================================================= */

.lightbox-close {
position: absolute;


top: 20px;

right: 25px;

width: 48px;

height: 48px;

display: flex;

align-items: center;

justify-content: center;

padding: 0;

border: 1px solid
    rgba(255, 255, 255, 0.25);

outline: none;

border-radius: 50%;

background:
    rgba(255, 255, 255, 0.10);

color: #ffffff;

font-size: 34px;

line-height: 1;

font-weight: 300;

cursor: pointer;

z-index: 10;

transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;


}

/* =========================================================
CLOSE BUTTON HOVER
========================================================= */

.lightbox-close:hover {
background:
rgba(255, 255, 255, 0.20);


border-color:
    rgba(255, 255, 255, 0.45);

transform: rotate(90deg);


}

/* =========================================================
STOP BODY SCROLL
========================================================= */

body.portfolio-lightbox-open {
overflow: hidden;
}

/* =========================================================
CTA SECTION
========================================================= */

.portfolio-cta {
width: 100%;

padding: 75px 20px;

background:
    linear-gradient(
        135deg,
        #061d36 0%,
        #063d6f 100%
    );

color: #ffffff;


}

/* =========================================================
CTA WRAPPER
========================================================= */

.portfolio-cta-wrapper {
width: 100%;


max-width: 1250px;

margin: 0 auto;

display: flex;

align-items: center;

justify-content: space-between;

gap: 45px;


}

/* =========================================================
CTA CONTENT
========================================================= */

.portfolio-cta-content {
max-width: 650px;
}

/* =========================================================
CTA KICKER
========================================================= */

.portfolio-kicker {
display: inline-block;


margin-bottom: 12px;

color: #27a7ff;

font-size: 13px;

font-weight: 800;

letter-spacing: 1.5px;


}

/* =========================================================
CTA HEADING
========================================================= */

.portfolio-cta-content h2 {
margin: 0 0 15px;


color: #ffffff;

font-size: 34px;

line-height: 1.2;

font-weight: 800;


}

/* =========================================================
CTA DESCRIPTION
========================================================= */

.portfolio-cta-content p {
margin: 0;


color:
    rgba(255, 255, 255, 0.78);

font-size: 16px;

line-height: 1.7;


}

/* =========================================================
CTA BUTTONS
========================================================= */

.portfolio-cta-buttons {
display: flex;


align-items: center;

flex-wrap: wrap;

gap: 12px;

flex-shrink: 0;


}

/* =========================================================
COMMON CTA BUTTON
========================================================= */

.cta-btn {
display: inline-flex;


align-items: center;

justify-content: center;

min-height: 48px;

padding: 0 22px;

border-radius: 7px;

text-decoration: none;

font-size: 14px;

font-weight: 700;

transition:
    all 0.3s ease;

white-space: nowrap;


}

/* =========================================================
CTA ICON
========================================================= */

.cta-btn i {
margin-right: 8px;
}

/* =========================================================
BLUE CTA BUTTON
========================================================= */

.cta-btn-blue {
background: #1598e5;


color: #ffffff;


}

.cta-btn-blue:hover {
background: #0b82c8;


color: #ffffff;

transform: translateY(-2px);


}

/* =========================================================
WHATSAPP CTA BUTTON
========================================================= */

.cta-btn-whatsapp {
background: #25d366;


color: #ffffff;


}

.cta-btn-whatsapp:hover {
background: #1db954;


color: #ffffff;

transform: translateY(-2px);


}

/* =========================================================
CALL CTA BUTTON
========================================================= */

.cta-btn-call {
background: #ffffff;


color: #12304a;


}

.cta-btn-call:hover {
background: #f0f4f8;


color: #12304a;

transform: translateY(-2px);


}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {


/* HERO */

.portfolio-hero {
    min-height: 340px;

    background-position:
        center center;
}


.portfolio-hero-content {
    padding: 50px 20px;
}


.portfolio-hero-content h1 {
    font-size: 44px;

    margin-bottom: 15px;
}


.breadcrumb {
    font-size: 15px;

    gap: 10px;
}


/* GRID */

.portfolio-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* IMAGE */

.portfolio-image {
    height: 260px;
}


/* TITLE */

.portfolio-content h2 {
    font-size: 22px;
}


/* TEXT */

.portfolio-content p {
    font-size: 15px;
}


/* CTA */

.portfolio-cta-wrapper {
    flex-direction: column;

    align-items: flex-start;
}


.portfolio-cta-content {
    max-width: 100%;
}


.portfolio-cta-buttons {
    width: 100%;
}


/* LIGHTBOX */

.lightbox-content img {
    max-width: 92vw;

    max-height: 85vh;
}


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {


/* HERO */

.portfolio-hero {
    min-height: 290px;

    background-position:
        center center;
}


.portfolio-hero-content {
    padding: 45px 15px;
}


.portfolio-hero-content h1 {
    font-size: 36px;

    letter-spacing: -0.8px;

    margin-bottom: 14px;
}


.breadcrumb {
    font-size: 14px;

    gap: 9px;
}


/* SECTION */

.portfolio-section {
    padding: 60px 15px;
}


/* GRID */

.portfolio-grid {
    grid-template-columns: 1fr;

    gap: 22px;
}


/* CARD */

.portfolio-card {
    border-radius: 15px;
}


/* IMAGE */

.portfolio-image {
    height: 250px;
}


/* CONTENT */

.portfolio-content {
    padding: 18px 18px 21px;
}


/* TITLE */

.portfolio-content h2 {
    font-size: 21px;
}


/* DESCRIPTION */

.portfolio-content p {
    font-size: 15px;
}


/* LOAD MORE */

.portfolio-load-more {
    margin-top: 35px;
}


.load-more-btn {
    width: auto;

    min-width: 150px;

    padding:
        14px 28px;
}


/* LOCATION */

.portfolio-location {
    font-size: 14px;
}


/* CTA */

.portfolio-cta {
    padding: 55px 15px;
}


.portfolio-cta-content h2 {
    font-size: 28px;
}


.portfolio-cta-content p {
    font-size: 15px;
}


/* CTA BUTTONS */

.portfolio-cta-buttons {
    width: 100%;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;
}


.cta-btn {
    width: 100%;
}


/* LIGHTBOX */

.portfolio-lightbox {
    padding: 15px;
}


.lightbox-content {
    max-width: 96vw;

    max-height: 86vh;
}


.lightbox-content img {
    max-width: 96vw;

    max-height: 82vh;

    border-radius: 5px;
}


.lightbox-close {
    top: 12px;

    right: 14px;

    width: 42px;

    height: 42px;

    font-size: 30px;
}


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


/* HERO */

.portfolio-hero {
    min-height: 250px;

    background-position:
        center center;
}


.portfolio-hero-content {
    padding: 40px 12px;
}


.portfolio-hero-content h1 {
    font-size: 31px;

    margin-bottom: 12px;
}


.breadcrumb {
    font-size: 13px;

    gap: 8px;
}


/* SECTION */

.portfolio-section {
    padding: 50px 12px;
}


/* IMAGE */

.portfolio-image {
    height: 220px;
}


/* TITLE */

.portfolio-content h2 {
    font-size: 19px;
}


/* DESCRIPTION */

.portfolio-content p {
    font-size: 14px;
}


/* LOAD MORE */

.load-more-btn {
    width: 100%;

    max-width: 180px;
}


/* LOCATION */

.portfolio-location {
    font-size: 13px;
}


/* CTA */

.portfolio-cta {
    padding: 50px 12px;
}


.portfolio-cta-content h2 {
    font-size: 25px;
}


.portfolio-cta-content p {
    font-size: 14px;
}


/* LIGHTBOX */

.portfolio-lightbox {
    padding: 10px;
}


.lightbox-content img {
    max-width: 98vw;

    max-height: 78vh;
}


.lightbox-close {
    top: 10px;

    right: 10px;

    width: 40px;

    height: 40px;

    font-size: 28px;
}


}

/* =========================================================
VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

.portfolio-hero {
    min-height: 230px;
}


.portfolio-hero-content {
    padding: 35px 10px;
}


.portfolio-hero-content h1 {
    font-size: 28px;
}


.breadcrumb {
    font-size: 12px;

    gap: 7px;
}


.portfolio-image {
    height: 200px;
}


.portfolio-content h2 {
    font-size: 18px;
}


.portfolio-content p {
    font-size: 13px;
}


.load-more-btn {
    min-width: 150px;

    padding:
        13px 22px;

    font-size: 14px;
}


}