/* ==========================================================
   GMK İNŞAAT YAPI
   Premium Construction Theme
   Version : 1.0
========================================================== */

:root{

--primary:#0F172A;
--secondary:#C9A227;
--white:#ffffff;
--gray:#F4F6F9;
--text:#555;
--dark:#111827;
--radius:12px;
--transition:.35s ease;
--shadow:0 20px 50px rgba(0,0,0,.08);

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:#fff;
color:var(--text);
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1280px;
margin:auto;

}

/* ---------------- Loader ---------------- */

.loader{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
z-index:99999;

}

.building{

width:70px;
height:70px;
border:8px solid var(--secondary);
border-top-color:transparent;
border-radius:50%;
animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* ---------------- Header ---------------- */

header{

position:absolute;
top:0;
left:0;
width:100%;
padding:25px 0;
z-index:999;

}

.navbar{

width:90%;
max-width:1280px;
margin:auto;

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

}

.logo h2{

font-size:32px;
color:#fff;
font-weight:800;
letter-spacing:1px;

}

.logo span{

color:var(--secondary);

}

.navbar ul{

display:flex;
gap:40px;

}

.navbar ul li a{

color:#fff;
font-size:15px;
font-weight:500;
transition:.3s;

}

.navbar ul li a:hover{

color:var(--secondary);

}

.btn{

display:inline-block;
padding:15px 34px;
background:var(--secondary);
color:#fff;
border-radius:50px;
transition:.3s;
font-weight:600;

}

.btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 30px rgba(0,0,0,.2);

}

/* ---------------- Hero ---------------- */

.hero{

height:100vh;

background:url("../images/hero.jpg") center center/cover;

position:relative;

display:flex;
align-items:center;

}

.overlay{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(5,15,30,.72);

}

.hero-content{

position:relative;
z-index:10;
width:90%;
max-width:1280px;
margin:auto;

}

.hero h1{

font-size:72px;
line-height:1.1;
font-weight:800;
color:#fff;
max-width:850px;

}

.hero h1 span{

color:var(--secondary);

}

.hero p{

font-size:20px;
margin-top:30px;
max-width:650px;
line-height:1.9;
color:#ddd;

}

.hero-buttons{

margin-top:45px;
display:flex;
gap:20px;

}

.btn-outline{

padding:15px 34px;

border:2px solid #fff;

border-radius:50px;

color:#fff;

transition:.3s;

}

.btn-outline:hover{

background:#fff;
color:#000;

}

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

.about{

padding:120px 0;
background:#fff;

}

.about .container{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}

.about h5{

color:var(--secondary);
font-size:15px;
font-weight:700;
letter-spacing:4px;
margin-bottom:15px;

}

.about h2{

font-size:46px;
color:var(--primary);
margin-bottom:25px;
line-height:1.2;

}

.about p{

font-size:17px;
line-height:2;
color:#666;
margin-bottom:35px;

}

.about img{

border-radius:18px;
box-shadow:0 25px 60px rgba(0,0,0,.15);
transition:.5s;

}

.about img:hover{

transform:scale(1.03);

}


/*=====================================================
SERVICES
=====================================================*/

.services{

padding:120px 0;
background:#F7F9FC;
text-align:center;

}

.services h5{

color:var(--secondary);
font-size:15px;
letter-spacing:4px;

}

.services h2{

font-size:46px;
margin:15px 0 60px;
color:var(--primary);

}

.cards{

width:90%;
max-width:1280px;

margin:auto;

display:grid;

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

gap:30px;

}

.card{

background:#fff;

padding:45px 35px;

border-radius:18px;

box-shadow:0 20px 45px rgba(0,0,0,.06);

transition:.4s;

position:relative;

overflow:hidden;

}

.card:before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:5px;

background:var(--secondary);

transition:.4s;

}

.card:hover:before{

left:0;

}

.card:hover{

transform:translateY(-15px);

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.card i{

font-size:58px;

color:var(--secondary);

margin-bottom:30px;

}

.card h3{

font-size:24px;

color:var(--primary);

margin-bottom:15px;

}

.card p{

line-height:1.8;

color:#777;

}


/*=====================================================
COUNTER
=====================================================*/

.counter{

background:var(--primary);

padding:90px 5%;

display:grid;

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

text-align:center;

}

.counter div{

color:#fff;

}

.counter h2{

font-size:60px;

color:var(--secondary);

margin-bottom:10px;

}

.counter p{

font-size:18px;

letter-spacing:1px;

}


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

.projects{

padding:120px 0;

background:#fff;

text-align:center;

}

.projects h5{

color:var(--secondary);

letter-spacing:4px;

}

.projects h2{

font-size:46px;

margin:20px 0 60px;

color:var(--primary);

}

.project-grid{

width:90%;

max-width:1280px;

margin:auto;

display:grid;

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

gap:30px;

}

.project{

position:relative;

overflow:hidden;

border-radius:18px;

cursor:pointer;

}

.project img{

width:100%;

height:420px;

object-fit:cover;

transition:.6s;

}

.project:hover img{

transform:scale(1.12);

}

.project-info{

position:absolute;

bottom:-120px;

left:0;

width:100%;

padding:35px;

background:linear-gradient(transparent,#0F172A);

transition:.45s;

}

.project:hover .project-info{

bottom:0;

}

.project-info h3{

color:#fff;

font-size:28px;

}


/*=====================================================
CALL TO ACTION
=====================================================*/

.contact{

padding:130px 0;

background:url("../images/contact-bg.jpg") center center/cover;

position:relative;

}

.contact::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(15,23,42,.85);

}

.contact-box{

position:relative;

z-index:5;

width:90%;

max-width:1000px;

margin:auto;

text-align:center;

}

.contact-box h2{

font-size:50px;

color:#fff;

margin-bottom:35px;

line-height:1.3;

}


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

footer{

background:#08111F;

color:#fff;

}

.footer{

width:90%;

max-width:1280px;

margin:auto;

padding:80px 0;

display:grid;

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

gap:60px;

}

.footer h2{

font-size:34px;

margin-bottom:20px;

}

.footer h3{

margin-bottom:20px;

font-size:22px;

color:var(--secondary);

}

.footer a{

display:block;

margin-bottom:14px;

color:#ddd;

transition:.3s;

}

.footer a:hover{

color:var(--secondary);

padding-left:8px;

}

.footer p{

line-height:2;

color:#bbb;

}

.copyright{

padding:25px;

text-align:center;

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

color:#999;

}


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

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.hero-content{

animation:fadeUp 1s ease;

}

.card{

animation:fadeUp .8s ease;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#eee;

}

::-webkit-scrollbar-thumb{

background:var(--secondary);

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#ad8421;

}

/* Scroll Animation */

.hidden{

opacity:0;
transform:translateY(70px);
transition:1s;

}

.show{

opacity:1;
transform:translateY(0);

}

/* Sticky Header */

header.sticky{

position:fixed;
background:rgba(15,23,42,.95);
backdrop-filter:blur(15px);
padding:18px 0;
box-shadow:0 10px 30px rgba(0,0,0,.15);

}

/* Back To Top */

.backTop{

position:fixed;

right:35px;

bottom:35px;

width:55px;

height:55px;

background:#C9A227;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:22px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

.backTop.active{

opacity:1;

visibility:visible;

}

.backTop:hover{

transform:translateY(-6px);

}

.hero-video{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;

}

.hero-badge{

display:inline-block;
padding:10px 22px;
background:rgba(255,255,255,.15);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.2);
border-radius:50px;
color:#fff;
margin-bottom:25px;

}

.hero h1{

font-size:82px;
font-weight:800;
line-height:1.05;

}

.hero h1 span{

color:#D8B15A;

}

.hero p{

font-size:20px;
max-width:620px;
margin-top:30px;

}