/* =====================================
   AGPS INTERNATIONAL
   PREMIUM WEBSITE
====================================== */

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

html{
    scroll-behavior:smooth;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
}

.hero-container{

display:flex;

justify-content:space-between;

align-items:center;

gap:80px;

height:100%;

}

/* ==========================
TOP BAR
========================== */

.top-bar{
/* position:fixed; */
/* top:10; */
padding-left: 15px;
left:0;
width:100%;
z-index:9999;

background:rgba(0,0,0,.55);

backdrop-filter:blur(12px);
    left:0;
    width:100%;
    z-index:999;

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

    padding:12px 10px;

}

.top-bar .container{

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

}

.top-bar span{

margin-right:25px;
font-size:14px;
color:#ddd;

}

.top-bar i{

color:#E4B043;
margin-right:8px;

}

/* ==========================
NAVBAR
========================== */

header{
    position: fixed;
    top: 45px;              /* Below the top bar */
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    transition: all .35s ease;
}

.navbar{
    width: 92%;
    max-width: 1400px;

    height: 82px;

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

    padding: 0 38px;

    border-radius: 50px;

    background: rgba(10,10,10,.90);
    backdrop-filter: blur(18px);

    border: 1px solid rgba(214,166,55,.25);

    transition: all .35s ease;
}

.logo h2{

font-family:'Bebas Neue',sans-serif;

font-size:42px;

letter-spacing:2px;

color:#fff;

}

.nav-menu{

display:flex;
gap:35px;

}

.nav-menu a{

color:white;

font-size:15px;

font-weight:500;

transition:.3s;

}

.nav-menu a:hover{

color:#E4B043;

}

.quote-btn{

background:#E4B043;

padding:14px 32px;

border-radius:40px;

color:black;

font-weight:700;

transition:.4s;

}

.quote-btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 40px rgba(228,176,67,.45);

}

.menu-btn{

display:none;

font-size:24px;

cursor:pointer;

}

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

.hero{
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding-top:180px;
}

.hero video{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

}

.overlay{

position:absolute;

width:100%;
height:100%;

/* background:linear-gradient(rgba(0,0,0,.72),
rgba(0,0,0,.82)); */

}

.hero-content{

position:relative;

z-index:5;

text-align:center;

width:900px;

}

.small-title{

letter-spacing:5px;

color:#E4B043;

margin-bottom:20px;

font-size:15px;

}

.hero h1{

font-family:"Bebas Neue",sans-serif;

font-size:110px;

line-height:.9;

letter-spacing:2px;

margin-bottom:25px;

}

.hero h1 span{

display:block;

color:#E4B043;

}

.hero p{

font-size:22px;

color:#d9d9d9;

margin-bottom:45px;

}

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

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

}

.btn-gold{

padding:18px 45px;

background:#E4B043;

color:black;

font-weight:700;

border-radius:50px;

transition:.4s;

}

.btn-gold:hover{

transform:translateY(-5px);

box-shadow:0 15px 40px rgba(228,176,67,.45);

}

.btn-outline{

padding:18px 45px;

border:2px solid white;

border-radius:50px;

color:white;

transition:.4s;

}

.btn-outline:hover{

background:white;

color:black;

}

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

.scroll{

/* position:absolute; */

bottom:40px;

left:50%;

transform:translateX(-50%);

text-align:center;

z-index:10;

}

.mouse{

width:34px;

height:58px;

border:2px solid white;

border-radius:30px;

margin:auto;

display:flex;

justify-content:center;

}

.wheel{

width:5px;

height:12px;

background:#E4B043;

margin-top:10px;

border-radius:50px;

animation:scroll 1.4s infinite;

}

@keyframes scroll{

0%{

opacity:0;

transform:translateY(0);

}

100%{

opacity:1;

transform:translateY(18px);

}

}

.scroll p{

margin-top:12px;

font-size:12px;

letter-spacing:4px;

}

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

@media(max-width:992px){

.nav-menu{

display:none;

}

.menu-btn{

display:block;

}

.hero h1{

font-size:75px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

}

@media(max-width:768px){

.top-bar{

display:none;

}

header{

top:20px;

}

.hero h1{

font-size:55px;

}

.hero-content{

width:90%;

}

.quote-btn{

display:none;

}

}
/*=============================
NAVBAR STICKY
=============================*/

.navbar.sticky{

background:#0c0c0c;

border:1px solid rgba(228,176,67,.35);

box-shadow:0 15px 40px rgba(0,0,0,.5);

transition:.4s;

}


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

@media(max-width:992px){

.nav-menu{

position:absolute;

top:95px;

left:0;

width:100%;

background:#101010;

flex-direction:column;

padding:30px;

display:none;

border-radius:25px;

}

.nav-menu.active{

display:flex;

}

}


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

.hero h1{

text-shadow:

0 0 15px rgba(228,176,67,.20),

0 0 30px rgba(228,176,67,.15);

}


/*=============================
BUTTON ANIMATION
=============================*/

.btn-gold{

position:relative;

overflow:hidden;

}

.btn-gold::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:rgba(255,255,255,.35);

transform:skewX(-25deg);

transition:.7s;

}

.btn-gold:hover::before{

left:120%;

}


/*=============================
VIDEO ZOOM
=============================*/

.hero video{

animation:zoomVideo 25s linear infinite;

}

@keyframes zoomVideo{

0%{

transform:scale(1);

}

100%{

transform:scale(1.12);

}

}


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

.hero-content{

transition:.2s;

}


/*=============================
GOLD LINE
=============================*/

.navbar::after{

content:"";

position:absolute;

bottom:-2px;

left:0;

width:0;

height:2px;

background:#E4B043;

transition:.7s;

}

.navbar:hover::after{

width:100%;

}


/*=============================
SCROLL SMOOTH
=============================*/

section{

scroll-margin-top:120px;

}
/*=========================
LOGO
==========================*/

.logo{

display:flex;
flex-direction:column;

}

.logo h2{

font-size:44px;

line-height:1;

letter-spacing:5px;

}

.logo span{

font-size:11px;

letter-spacing:6px;

color:#E4B043;

margin-top:-5px;

}

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

.hero-container{
    width:90%;
    max-width:1400px;
    margin:auto;

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

    gap:70px;

    position:relative;
    z-index:5;
}

.hero-left{

flex:1;

padding-top:40px;

}

/* .hero-right{

flex:1;

display:flex;

justify-content:center;

align-items:center;

} */

/* .hero-right img{

width:100%;

max-width:620px;

object-fit:contain;

} */

.hero-tag{

color:#E4B043;

font-size:15px;

letter-spacing:4px;

margin-bottom:20px;

}

.hero-description{

font-size:22px;

line-height:1.8;

max-width:620px;

margin-top:30px;

color:#d0d0d0;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}


}

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

@media(max-width:1100px){

.hero-container{

flex-direction:column;

text-align:center;

}

.hero-left{

width:100%;

}

/* .hero-right{

width:100%;

margin-top:60px;

} */

.hero-description{

margin:auto;

margin-top:25px;

}

}
.hero-background{
    position:absolute;
    inset:0;
    background:url("./assets/images/gearbox1.png") center center/cover no-repeat;
    z-index:-3;
}
/* Logo */
.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo-icon{
    width:65px;
    height:65px;
    object-fit:contain;
}

.logo-text{
    padding: 33px 20px 20px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.logo h2{
    font-family:'Bebas Neue', sans-serif;
    font-size:52px;
    color:#ffffff;
    line-height:0.9;
    letter-spacing:3px;
    margin:0;
}

.logo span{
    margin-top:6px;
    color:#d6a637;
    font-size:13px;
    letter-spacing:7px;
    font-weight:600;
}
.logo-icon{
    width:72px;
    transition:.4s;
    filter:drop-shadow(0 0 12px rgba(214,166,55,.35));
}

.logo:hover .logo-icon{
    transform:rotate(-4deg) scale(1.06);
    filter:drop-shadow(0 0 18px rgba(214,166,55,.65));
}
/*=============================
/*==============================
 PREMIUM STATS
===============================*/

.stats{

    padding:90px 0;

    background:#050505;

    background-image:
    radial-gradient(circle at top,#3a2a08 0%,transparent 35%),
    radial-gradient(circle at bottom,#161616 0%,transparent 45%);

    position:relative;

    overflow:hidden;

}

.stats::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:url("assets/images/rock-texture.png");

opacity:.05;

pointer-events:none;

}

.stats-container{

width:90%;

max-width:1450px;

margin:auto;

display:grid;

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

gap:26px;

position:relative;

z-index:2;

}

.stat-box{

background:linear-gradient(180deg,#111,#090909);

border:1px solid rgba(212,166,55,.45);

border-radius:18px;

padding:45px 20px;

text-align:center;

position:relative;

overflow:hidden;

transition:.45s;

box-shadow:

0 0 0 1px rgba(255,194,70,.05),

inset 0 1px 0 rgba(255,255,255,.04),

0 20px 60px rgba(0,0,0,.45);

}

.stat-box::before{

content:"";

position:absolute;

top:-70%;

left:-40%;

width:180%;

height:180%;

background:radial-gradient(circle,rgba(212,166,55,.12),transparent 60%);

transform:rotate(20deg);

}

.stat-box::after{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(90deg,transparent,#d4a637,transparent);

opacity:.8;

}

.stat-box:hover{

transform:translateY(-12px);

border-color:#d4a637;

box-shadow:

0 25px 70px rgba(212,166,55,.18);

}

.stat-icon{

font-size:38px;

color:#d4a637;

margin-bottom:28px;

}

.stat-box h2{

display:flex;

justify-content:center;

align-items:flex-end;

gap:4px;

margin:0;

font-family:'Bebas Neue',sans-serif;

font-size:88px;

line-height:1;

font-weight:700;

color:#D4A637;

text-shadow:0 0 25px rgba(212,166,55,.25);

}

.stat-box h2 span:last-child{

font-size:60px;

margin-bottom:8px;

}

.line{

width:65px;

height:2px;

background:#d4a637;

margin:22px auto;

}

.stat-box p{

color:#fff;

font-size:18px;

letter-spacing:1.5px;

font-weight:500;

margin:0;

}

@media(max-width:1100px){

.stats-container{

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

}

}

@media(max-width:700px){

.stats-container{

grid-template-columns:1fr;

}

}

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

.about{

padding:15px;

background:#080808;

position:relative;

overflow:hidden;

}

.about::before{

content:"";

position:absolute;

top:-250px;

right:-150px;

width:500px;

height:500px;

background:radial-gradient(#d4a63733,transparent);

filter:blur(90px);

}

.about-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image{

position:relative;

}


.about-image::after{

content:"";

position:absolute;

top:25px;

left:25px;

width:100%;

height:100%;

border:1px solid rgba(212,166,55,.25);

border-radius:20px;

z-index:-1;

}

/*==============================
FLOATING EXPERIENCE BADGE
==============================*/

.experience-box{

position:absolute;
left:40px;
bottom:40px;

background:rgba(10,10,10,.92);

padding:22px 30px;

border-radius:18px;

border:1px solid rgba(212,166,55,.4);

backdrop-filter:blur(10px);

box-shadow:
0 20px 40px rgba(0,0,0,.45),
0 0 30px rgba(212,166,55,.12);

animation:floatBadge 5s ease-in-out infinite;

z-index:20;

}

@keyframes floatBadge{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

}

.experience-box h2{

font-size:60px;

font-family:'Bebas Neue',sans-serif;

color:#d4a637;

margin:0;

}

.experience-box span{

color:#fff;

font-size:15px;

letter-spacing:1px;

}

.section-tag{

display:inline-block;

color:#d4a637;

font-size:14px;

letter-spacing:3px;

margin-bottom:20px;

}

.about-content h2{

font-size:48px;

font-weight:700;

line-height:1.2;

margin-bottom:25px;

color:#fff;

}

.about-content h2 span{

color:#d4a637;

}

.about-content p{

font-size:17px;

line-height:1.9;

color:#bdbdbd;

margin-bottom:25px;

}

.about-features{

display:grid;

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

gap:18px;

margin:40px 0;

}

.feature{

display:flex;

align-items:center;

gap:12px;

color:#fff;

font-size:16px;

}

.feature i{

color:#d4a637;

font-size:18px;

}

@media(max-width:991px){

.about-container{

grid-template-columns:1fr;

}

.about-features{

grid-template-columns:1fr;

}

}
.about-image{

overflow:hidden;

border-radius:22px;

position:relative;

}

.about-image img{

width:100%;

display:block;

transition:transform .8s ease;

}

.about-image:hover img{

transform:scale(1.06);

}
.about-image::before{

content:"";

position:absolute;

top:0;

left:-150%;

width:60%;

height:100%;

background:linear-gradient(

120deg,

transparent,

rgba(255,255,255,.22),

transparent

);

transform:skewX(-25deg);

transition:1.2s;

z-index:10;

}

.about-image:hover::before{

left:170%;

}
/*=============================
PRODUCTS
==============================*/

.products{

padding:15px;

background:#050505;

position:relative;

overflow:hidden;

}

.products-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.product-card{

height:420px;

border-radius:22px;

overflow:hidden;

position:relative;

cursor:pointer;

border:1px solid rgba(212,166,55,.18);

transition:.45s;

box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.product-card img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.product-card .overlay{

position:absolute;

inset:0;

background:linear-gradient(
180deg,
rgba(0,0,0,.05),
rgba(0,0,0,.85)
);

}

.product-content{

position:absolute;

left:35px;

bottom:35px;

z-index:5;

}

.product-content span{

color:#D4A637;

letter-spacing:2px;

font-size:14px;

text-transform:uppercase;

}

.product-content h3{

margin:12px 0;

font-size:34px;

color:white;

}

.product-content a{

color:white;

text-decoration:none;

font-weight:600;

transition:.4s;

}

.product-card:hover img{

transform:scale(1.12);

}

.product-card:hover{

transform:translateY(-10px);

border-color:#D4A637;

box-shadow:0 30px 80px rgba(212,166,55,.18);

}

.product-card::before{

content:"";

position:absolute;

top:0;

left:-150%;

width:50%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transform:skewX(-20deg);

transition:1s;

z-index:3;

}

.product-card:hover::before{

left:170%;

}

.product-content a:hover{

color:#D4A637;

padding-left:10px;

}

@media(max-width:992px){

.products-grid{

grid-template-columns:1fr;

}

}
/*=============================
BRANDS
==============================*/

.brands{

padding:15px ;

background:#080808;

overflow:hidden;

position:relative;

}

.brands-slider{

margin-top:60px;

overflow:hidden;

position:relative;

}

.brands-track{

display:flex;

gap:35px;

width:max-content;

animation:brandScroll 30s linear infinite;

}

.brand-card{

width:220px;

height:120px;

display:flex;

justify-content:center;

align-items:center;

background:rgba(255,255,255,.03);

border:1px solid rgba(212,166,55,.15);

border-radius:18px;

backdrop-filter:blur(10px);

transition:.4s;

}

.brand-card img{

width: auto;
    height: auto;

filter:grayscale(100%) brightness(.9);

transition:100s;

}

.brand-card:hover{

transform:translateY(-8px);

border-color:#D4A637;

box-shadow:0 20px 40px rgba(212,166,55,.15);

}

.brand-card:hover img{

filter:grayscale(0%) brightness(1);

transform:scale(1.08);

}

@keyframes brandScroll{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

.product-card{
    position:relative;
    overflow:hidden;
}

.product-slider{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.product-slider img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .8s ease-in-out;
}

.product-slider img.active{
    opacity:1;
}

/*=============================
WHY CHOOSE AGPS
=============================*/

.why-us{

padding:15px;

background:#050505;

position:relative;

overflow:hidden;

}

.section-desc{
    padding-top: 10px;

/* max-width:700px; */

/* margin:25px auto 70px; */

/* text-align:left; */

font-size:18px;

line-height:2.2;

color:#b8b8b8;

}

.why-grid{

display:grid;

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

gap:30px;

}

.why-card{

background:linear-gradient(180deg,#111,#090909);

border:1px solid rgba(212,166,55,.15);

border-radius:20px;

padding:40px 30px;

text-align:left;

position:relative;

overflow:hidden;

transition:.45s;

}

.why-card::before{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:220%;

height:220%;

background:radial-gradient(circle,rgba(212,166,55,.10),transparent 70%);

transition:.6s;

}

.why-card:hover::before{

top:-40%;

left:-40%;

}

.why-card:hover{

transform:translateY(-12px);

border-color:#D4A637;

box-shadow:0 25px 60px rgba(212,166,55,.18);

}

.why-icon{

width:85px;

height:85px;

margin:auto;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:rgba(212,166,55,.10);

border:1px solid rgba(212,166,55,.30);

margin-bottom:25px;

font-size:34px;

color:#D4A637;

transition:.4s;

}

.why-card:hover .why-icon{

transform:rotateY(180deg) scale(1.08);

background:#D4A637;

color:#111;

}

.why-card h3{

color:#fff;

font-size:24px;

margin-bottom:18px;

}

.why-card p{

color:#bdbdbd;

line-height:1.8;

}

@media(max-width:991px){

.why-grid{

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

}

}

@media(max-width:600px){

.why-grid{

grid-template-columns:1fr;

}

}

/*=========================
INDUSTRIES
=========================*/

.industries{

padding:15px;

background:#080808;

}

.industry-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.industry-card{

height:420px;

border-radius:25px;

overflow:hidden;

position:relative;

cursor:pointer;

border:1px solid rgba(212,166,55,.18);

transition:.5s;

}

.industry-card img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.industry-overlay{

position:absolute;

inset:0;

background:linear-gradient(

180deg,

rgba(0,0,0,.1),

rgba(0,0,0,.88)

);

}

.industry-content{

position:absolute;

left:35px;

bottom:35px;

right:35px;

z-index:2;

}

.industry-content i{

font-size:40px;

color:#D4A637;

margin-bottom:18px;

}

.industry-content h3{

font-size:34px;

color:white;

margin-bottom:15px;

}

.industry-content p{

color:#ddd;

line-height:1.7;

margin-bottom:25px;

}

.industry-content a{

color:#D4A637;

text-decoration:none;

font-weight:600;

transition:.4s;

}

.industry-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 80px rgba(212,166,55,.18);

}

.industry-card:hover img{

transform:scale(1.1);

}

.industry-card::before{

content:"";

position:absolute;

top:0;

left:-150%;

width:45%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.22),

transparent

);

transform:skewX(-25deg);

transition:1s;

z-index:3;

}

.industry-card:hover::before{

left:170%;

}

.industry-content a:hover{

padding-left:10px;

}

@media(max-width:991px){

.industry-grid{

grid-template-columns:1fr;

}

}

/*==================================
GLOBAL
===================================*/

/*==================================
GLOBAL LOCATIONS
===================================*/

.locations{

padding:15px;

background:#050505;

position:relative;

overflow:hidden;

}

.locations::before{

content:"";

position:absolute;

width:600px;

height:600px;

left:-250px;

top:-250px;

background:radial-gradient(circle,#D4A63715,transparent);

filter:blur(90px);

}

.locations-grid{

display:grid;

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

gap:40px;

margin-top:70px;

}

.location-card{

background:#0b0b0b;

border-radius:25px;

overflow:hidden;

border:1px solid rgba(212,166,55,.18);

transition:.45s;

box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.location-card:hover{

transform:translateY(-12px);

border-color:#D4A637;

box-shadow:0 25px 60px rgba(212,166,55,.18);

}

.map{

height:300px;

overflow:hidden;

}

.map iframe{

width:100%;

height:100%;

border:none;

filter:grayscale(100%) invert(90%) contrast(90%);

transition:.6s;

}

.location-card:hover iframe{

filter:none;

transform:scale(1.03);

}

.location-content{

padding:35px;

}

.location-content h3{

color:#fff;

font-size:30px;

margin-bottom:15px;

}

.location-content p{

color:#cfcfcf;

line-height:1.8;

margin-bottom:10px;

}

.office-info{

margin:25px 0;

display:flex;

flex-wrap:wrap;

gap:20px;

}

.office-info span{

display:flex;

align-items:center;

gap:10px;

color:white;

}

.office-info i{

color:#D4A637;

}

@media(max-width:992px){
    

.locations-grid{

grid-template-columns:1fr;

}

}

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

.contact{

padding:15px;

background:#080808;

}

.contact-wrapper{

display:grid;

grid-template-columns:380px 1fr;

gap:60px;

margin-top:70px;

}

.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}

.info-box{

display:flex;

align-items:center;

gap:20px;

background:#111;

padding:25px;

border-radius:18px;

border:1px solid rgba(212,166,55,.15);

transition:.4s;

}

.info-box:hover{

transform:translateX(10px);

border-color:#D4A637;

}

.info-box i{

width:65px;

height:65px;

border-radius:50%;

background:#D4A637;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

color:#111;

}

.info-box h4{

color:#fff;

margin-bottom:8px;

}

.info-box p{

color:#bbb;

}

.contact-form{

background:#111;

padding:45px;

border-radius:25px;

border:1px solid rgba(212,166,55,.15);

}

.input-group{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:20px;

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:18px;

background:#1a1a1a;

border:1px solid #333;

border-radius:12px;

color:#fff;

font-size:16px;

outline:none;

transition:.3s;

margin-bottom:20px;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:#D4A637;

box-shadow:0 0 15px rgba(212,166,55,.2);

}

.contact-form textarea{

resize:none;

}

.contact-form button{

margin-top:10px;

}

@media(max-width:991px){

.contact-wrapper{

grid-template-columns:1fr;

}

.input-group{

grid-template-columns:1fr;

}

}

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

.footer{

background:#030303;

padding:90px 15px 30px;

border-top:1px solid rgba(212,166,55,.15);

position:relative;

}

.footer::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:2px;

background:linear-gradient(90deg,transparent,#D4A637,transparent);

}

.footer-top{

display:grid;

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

gap:50px;

padding-bottom:60px;

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

}

.footer-logo{

width:80px;

margin-bottom:20px;

}

.footer-about h3{

color:#fff;

margin-bottom:15px;

}

.footer-about p{

color:#bdbdbd;

line-height:1.8;

margin-bottom:25px;

}

.footer-social{

display:flex;

gap:15px;

}

.footer-social a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

border:1px solid rgba(212,166,55,.25);

border-radius:50%;

color:#D4A637;

transition:.4s;

text-decoration:none;

}

.footer-social a:hover{

background:#D4A637;

color:#111;

transform:translateY(-5px);

}

.footer-links h4{

color:#fff;

margin-bottom:25px;

font-size:20px;

}

.footer-links a,

.footer-links p{

display:block;

color:#bdbdbd;

text-decoration:none;

margin-bottom:15px;

transition:.3s;

}

.footer-links a:hover{

color:#D4A637;

padding-left:8px;

}

.footer-links i{

color:#D4A637;

margin-right:10px;

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:30px;

flex-wrap:wrap;

gap:20px;

}

.footer-bottom p{

color:#888;

}

.footer-bottom a{

color:#D4A637;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.footer-bottom a:hover{

letter-spacing:1px;

}

@media(max-width:991px){

.footer-top{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:600px){

.footer-top{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}

.footer-office{

    margin-bottom:30px;

    padding-bottom:20px;

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

}

.footer-office:last-of-type{

    border-bottom:none;

    margin-bottom:20px;

}

.footer-office h5{

    color:#D4A637;

    font-size:17px;

    margin-bottom:15px;

    font-weight:600;

}

.footer-office p{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:12px;

    color:#bdbdbd;

    line-height:1.6;

}

.footer-office i{

    color:#D4A637;

    min-width:18px;

    margin-top:3px;

}

.footer-website a{

    color:#bdbdbd;

    text-decoration:none;

    transition:.3s;

}

.footer-website a:hover{

    color:#D4A637;

}

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

@media (max-width:768px),(max-width:480px){
    .scroll{

right:15px;

bottom:20px;

transform:scale(.8);

}

.hero{
    min-height:100vh;
    text-align:center;
}

.hero-container{
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hero-left{
    width:100%;
    max-width:100%;
    margin:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.hero-tag{
    justify-content:center;
    text-align:center;
    margin-bottom:20px;
}

.hero h1{
    font-size:42px;
    line-height:1.2;
}

.hero-description{
    max-width:100%;
    margin:20px auto;
    font-size:16px;
    line-height:1.8;
}

.hero-buttons{
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

}

/* ==========================
   MOBILE HERO BACKGROUND
========================== */

@media (max-width:768px){

.hero{

    min-height:100vh;
    overflow:hidden;

}

.hero-background{

    background-size:115%;
    background-position:center top;
}

}

/* =====================================================
   MOBILE RESPONSIVE (768px)
===================================================== */

@media screen and (max-width:768px){

/* HERO */

.hero{
    min-height:auto;
    padding:160px 20px 100px;
    text-align:center;
    overflow:hidden;
}

.hero-container{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-left{
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:5;
}

.hero-background{
    background:url("./assets/images/gearbox1.png") no-repeat;
    background-size:cover;
    background-position:70% center;
}

/* .overlay{
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.20),
        rgba(0,0,0,.45),
        rgba(0,0,0,.75),
        #000 100%
    );
} */

.hero-tag{
    font-size:14px;
    letter-spacing:4px;
    line-height:1.6;
    text-align:center;
    margin-bottom:25px;
}

.hero h1{
    font-size:54px;
    line-height:1.05;
    margin-bottom:20px;
}

.hero h1 span{
    display:block;
    color:#d4af37;
}

.hero-description{
    font-size:17px;
    line-height:1.8;
    max-width:100%;
    margin:25px auto;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
    width:100%;
    align-items:center;
}

.hero-buttons a{
    width:240px;
    text-align:center;

}

/* SCROLL */

.scroll{
    right:15px;
    bottom:25px;
    transform:scale(.8);
}

}

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

@media screen and (max-width:480px){

.hero{

    padding:145px 18px 80px;

}

.hero h1{

    font-size:42px;

}

.hero-tag{

    font-size:13px;
    letter-spacing:3px;

}

.hero-description{

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

}

.hero-buttons a{

    width:220px;

}

.scroll{

    transform:scale(.7);
    right:10px;

}

}

/* MOBILE NAVBAR */

.navbar{

    height:70px;
    padding:0 15px;

}

.logo img{

    width:45px;

}

.logo h2{

    font-size:38px;

}

.logo span{

    font-size:11px;
    letter-spacing:4px;


}

.info-box a{
    color:#bbb;
    text-decoration:none;
    transition:.3s;
}

.info-box a:hover{
    color:#D4A637;
}