/* ===================================
   REDA CONNECT PORTFOLIO
   PART 1
=================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#fff;
color:#111;
overflow-x:hidden;
}

img{
display:block;
max-width:100%;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

.container{
width:90%;
max-width:1380px;
margin:auto;
}

/*==========================
HEADER
==========================*/

header{
position:fixed;
top:0;
left:0;
width:100%;
height:92px;
background:rgba(255,255,255,.96);
backdrop-filter:blur(15px);
border-bottom:1px solid #ececec;
z-index:999;
transition:.35s;
}

header .container{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo img{
width:290px;
transition:.35s;
}

.logo:hover img{
transform:scale(1.02);
}

nav ul{
display:flex;
align-items:center;
gap:58px;
}

nav a{
font-size:20px;
font-weight:500;
position:relative;
transition:.3s;
}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:-10px;
width:0;
height:3px;
background:#111;
transition:.35s;
}

nav a:hover::after,
nav a.active::after{
width:100%;
}

.language-item{
display:flex;
align-items:center;
}

.language-select{
min-width:118px;
height:44px;
padding:0 14px;
border:1px solid #111;
border-radius:50px;
background:#fff;
color:#111;
font-family:'Poppins',sans-serif;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.language-select:hover,
.language-select:focus{
outline:none;
box-shadow:0 0 0 4px rgba(0,0,0,.08);
}

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

.hero{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding-top:120px;
position:relative;
}

.hero-content{
max-width:960px;
}

.hero-tag{
display:inline-block;
padding:10px 22px;
border:1px solid #111;
border-radius:50px;
font-size:14px;
font-weight:600;
letter-spacing:2px;
margin-bottom:35px;
text-transform:uppercase;
}

.hero h1{
font-size:84px;
font-weight:800;
line-height:1.05;
letter-spacing:-3px;
margin-bottom:30px;
}

.hero p{
font-size:26px;
line-height:1.8;
color:#666;
max-width:850px;
margin:auto;
}

.buttons{
display:flex;
justify-content:center;
gap:25px;
margin-top:55px;
flex-wrap:wrap;
}

.btn-black{
width:290px;
height:72px;
background:#111;
color:#fff;
border-radius:14px;
display:flex;
justify-content:center;
align-items:center;
gap:12px;
font-size:20px;
font-weight:500;
transition:.35s;
}

.btn-black:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.btn-white{
width:320px;
height:72px;
border:2px solid #111;
border-radius:14px;
display:flex;
justify-content:center;
align-items:center;
gap:12px;
font-size:20px;
font-weight:500;
transition:.35s;
background:#fff;
}

.btn-white:hover{
background:#111;
color:#fff;
}

.hero::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:1px;
background:#ececec;
}

/*==================================
PROJECTS
==================================*/

#projects{

padding:140px 0;

background:#fff;

}

#projects h2{

font-size:62px;

font-weight:700;

text-align:center;

margin-bottom:18px;

letter-spacing:-2px;

}

.subtitle{

text-align:center;

font-size:22px;

color:#666;

max-width:760px;

margin:0 auto 90px;

line-height:1.8;

}

.portfolio-grid{

width:90%;

max-width:1450px;

margin:auto;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:40px;

}

.project{

position:relative;

height:620px;

overflow:hidden;

border-radius:28px;

cursor:pointer;

background:#111;

}

.project img{

width:100%;

height:100%;

object-fit:cover;

transition:transform .8s ease;

}

.project::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

to top,

rgba(0,0,0,.92),

rgba(0,0,0,.45),

rgba(0,0,0,.08)

);

transition:.45s;

}

.project:hover img{

transform:scale(1.08);

}

.project-overlay{

position:absolute;

left:45px;

right:45px;

bottom:40px;

z-index:5;

color:#fff;

transform:translateY(30px);

opacity:0;

transition:.5s;

}

.project:hover .project-overlay{

opacity:1;

transform:translateY(0);

}

.project-overlay span{

display:inline-block;

font-size:14px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

padding:9px 18px;

border:1px solid rgba(255,255,255,.25);

border-radius:40px;

backdrop-filter:blur(12px);

margin-bottom:22px;

}

.project-overlay h3{

font-size:42px;

margin-bottom:18px;

font-weight:700;

letter-spacing:-1px;

}

.project-overlay p{

font-size:18px;

line-height:1.8;

color:#ececec;

margin-bottom:28px;

max-width:500px;

}

.project-overlay a{

display:inline-flex;

align-items:center;

gap:12px;

font-size:18px;

font-weight:600;

transition:.35s;

}

.project-overlay a:hover{

gap:22px;

}

.project-overlay a i{

transition:.35s;

}

.project:hover::after{

background:linear-gradient(

to top,

rgba(0,0,0,.96),

rgba(0,0,0,.55),

rgba(0,0,0,.15)

);

}

/*=============================
ABOUT PORTFOLIO
=============================*/

#about-portfolio{

padding:170px 0;

background:#fafafa;

}

#about-portfolio .container{

max-width:980px;

text-align:center;

}

#about-portfolio h2{

font-size:60px;

font-weight:700;

letter-spacing:-2px;

margin-bottom:35px;

}

#about-portfolio p{

font-size:24px;

line-height:2;

color:#666;

}

/*==================================
CONTACT CTA
==================================*/

#contact{

padding:170px 0;

background:#111;

color:#fff;

}

.contact-box{

max-width:950px;

margin:auto;

text-align:center;

}

.contact-box span{

display:inline-block;

font-size:15px;

font-weight:600;

letter-spacing:3px;

text-transform:uppercase;

border:1px solid rgba(255,255,255,.25);

padding:10px 22px;

border-radius:40px;

margin-bottom:30px;

}

.contact-box h2{

font-size:68px;

line-height:1.1;

margin-bottom:25px;

letter-spacing:-2px;

}

.contact-box p{

font-size:22px;

line-height:1.9;

color:#d8d8d8;

max-width:760px;

margin:auto;

margin-bottom:55px;

}

#contact .contact-box .buttons{

gap:80px;
margin-top:0;

}

#contact .contact-box .btn-black{

width:auto;
height:auto;
background:transparent;
color:#fff;
border-radius:0;
padding:8px 0;
font-size:22px;
font-weight:700;
box-shadow:none;
position:relative;
overflow:visible;

}

#contact .contact-box .btn-black::after{

content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#fff;
transition:.35s ease;

}

#contact .contact-box .btn-black:hover{

transform:translateY(-4px);
box-shadow:none;

}

#contact .contact-box .btn-black:hover::after{

width:100%;

}

#contact .contact-box .btn-black i{

font-size:21px;
transition:.35s ease;

}

#contact .contact-box .btn-black:hover i{

transform:translateX(6px) scale(1.12);

}

/*==================================
FOOTER
==================================*/

footer{

background:#000;

color:#fff;

padding:90px 0 35px;

}

.footer-content{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:70px;

align-items:flex-start;

}

.footer-logo img{

width:260px;

margin-bottom:25px;

}

.footer-logo p{

color:#bdbdbd;

font-size:17px;

line-height:1.9;

max-width:420px;

}

.footer-links h3,

.footer-social h3{

font-size:24px;

margin-bottom:25px;

}

.footer-links ul{

display:flex;

flex-direction:column;

gap:18px;

}

.footer-links a{

color:#bdbdbd;

transition:.35s;

}

.footer-links a:hover{

color:#fff;

padding-left:8px;

}

.socials{

display:flex;

gap:18px;

}

.socials a{

width:55px;

height:55px;

border:1px solid rgba(255,255,255,.15);

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

transition:.35s;

}

.socials a:hover{

background:#fff;

color:#111;

transform:translateY(-8px);

}

.footer-bottom{

margin-top:70px;

padding-top:30px;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

font-size:16px;

color:#8d8d8d;

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1100px){

nav ul{
gap:30px;
}

nav a{
font-size:18px;
}

.logo img{
width:240px;
}

.hero h1{

font-size:62px;

}

.portfolio-grid{

grid-template-columns:1fr;

}

.project{

height:520px;

}

.footer-content{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo p{

margin:auto;

}

.socials{

justify-content:center;

}

}

@media(max-width:768px){

header{

height:80px;

}

.logo img{

width:210px;

}

nav{

display:none;

}

.hero{

padding:140px 20px 90px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.buttons{

flex-direction:column;

align-items:center;

}

#contact .contact-box .buttons{
gap:28px;
}

.btn-black,

.btn-white{

width:100%;

max-width:320px;

}

.language-select{
min-width:108px;
height:40px;
font-size:15px;
}

#projects h2,

#about-portfolio h2,

.contact-box h2{

font-size:38px;

}

.subtitle,

#about-portfolio p,

.contact-box p{

font-size:18px;

}

.project{

height:420px;

}

.project-overlay{

left:25px;

right:25px;

bottom:25px;

}

.project-overlay h3{

font-size:30px;

}

.project-overlay p{

font-size:16px;

}

}

/*==========================
SCROLL ANIMATIONS
==========================*/

.project,
.contact-box,
#about-portfolio,
#projects h2,
.subtitle{

opacity:0;

transform:translateY(60px);

transition:1s ease;

}

.show{

opacity:1 !important;

transform:translateY(0) !important;

}

/*==========================
HOVER EFFECT
==========================*/

.project{

transition:.45s ease;

}

.project:hover{

transform:translateY(-12px);

}

.project img{

filter:brightness(.92);

}

.project:hover img{

filter:brightness(.75);

}

/*==========================
CUSTOM SCROLLBAR
==========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#fff;

}

::-webkit-scrollbar-thumb{

background:#111;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#444;

}

/*==========================
TEXT SELECTION
==========================*/

::selection{

background:#111;

color:#fff;

}

/*==========================
LOADING
==========================*/

body{

animation:fadeIn .8s ease;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

.hero-content{

animation:heroUp 1.1s ease;

}

@keyframes heroUp{

from{

opacity:0;

transform:translateY(80px);

}

to{

opacity:1;

transform:translateY(0);

}
}

.menu-toggle{
display:none;
}

@media (max-width:768px){

header .container{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
}

nav{
display:none;
}

.menu-toggle{
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
line-height:1;
cursor:pointer;
}

nav.active{
display:flex;
flex-direction:column;
position:absolute;
top:80px;
left:0;
width:100%;
background:#fff;
padding:30px;
}

nav.active ul{
flex-direction:column;
align-items:center;
gap:18px;
margin-left:0;
}

nav.active .language-item{
justify-content:center;
}

}

/* Portfolio contact links like the reference image */
#contact .contact-box .buttons{
display:flex;
justify-content:center;
align-items:center;
gap:95px;
margin-top:0;
}

#contact .contact-box .buttons .btn-black{
width:auto !important;
max-width:none !important;
height:auto !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
color:#fff !important;
font-size:22px;
font-weight:500;
line-height:1;
display:inline-flex;
align-items:center;
gap:12px;
}

#contact .contact-box .buttons .btn-black span{
display:inline;
font-size:22px;
font-weight:500;
letter-spacing:0;
text-transform:none;
border:0;
border-radius:0;
padding:0;
margin-bottom:0;
}

#contact .contact-box .buttons .btn-black::before,
#contact .contact-box .buttons .btn-black::after{
display:none !important;
}

#contact .contact-box .buttons .btn-black:hover{
background:transparent !important;
box-shadow:none !important;
transform:translateY(-3px);
}

#contact .contact-box .buttons .btn-black i{
font-size:22px;
transition:.25s ease;
}

#contact .contact-box .buttons .btn-black:hover i{
transform:scale(1.16);
}

@media(max-width:768px){
#contact .contact-box .buttons{
gap:26px;
}
}