/*====================================================
  GOOGLE FONT
====================================================*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/*====================================================
  ROOT VARIABLES
====================================================*/
:root{

    --primary:#FFD100;
    --secondary:#111111;
    --dark:#000000;
    --white:#ffffff;
    --gray:#f6f6f6;
    --text:#5d5d5d;

    --radius:18px;

    --shadow:
        0 20px 60px rgba(0,0,0,.12);

    --transition:.35s ease;

}

/*====================================================
  RESET
====================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Outfit',sans-serif;

    color:var(--secondary);

    background:var(--white);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    max-width:100%;

    display:block;

}

ul{

    list-style:none;

}

a{

    text-decoration:none;

}

.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}

/*====================================================
 TYPOGRAPHY
====================================================*/

h1{

    font-size:72px;

    line-height:1.05;

    font-weight:800;

}

h2{

    font-size:52px;

    font-weight:700;

}

h3{

    font-size:28px;

}

p{

    color:var(--text);

    font-size:18px;

}

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

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

background:var(--primary);

color:#000;

border-radius:50px;

font-weight:700;

transition:.35s;

box-shadow:0 12px 40px rgba(255,209,0,.35);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 18px 50px rgba(255,209,0,.45);

}

.btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

border:2px solid var(--primary);

border-radius:50px;

color:#fff;

transition:.35s;

}

.btn-outline:hover{

background:var(--primary);

color:#000;

}

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

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

padding:22px 0;

z-index:999;

transition:.35s;

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

backdrop-filter:blur(18px);

}

.navbar .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-size:32px;

font-weight:800;

color:#fff;

}

.logo span{

color:var(--primary);

}

.menu{

display:flex;

gap:42px;

}

.menu a{

color:#fff;

font-weight:500;

position:relative;

}

.menu a::after{

content:'';

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:var(--primary);

transition:.35s;

}

.menu a:hover::after{

width:100%;

}

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

.menu-btn{

display:none;

flex-direction:column;

cursor:pointer;

gap:6px;

}

.menu-btn span{

width:28px;

height:3px;

background:#fff;

}

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

.hero{

height:100vh;

background:#000;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

top:-300px;

right:-300px;

width:700px;

height:700px;

background:var(--primary);

border-radius:50%;

opacity:.08;

}

.hero::after{

content:"";

position:absolute;

left:-200px;

bottom:-200px;

width:500px;

height:500px;

background:var(--primary);

border-radius:50%;

opacity:.06;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

position:relative;

z-index:2;

}

.badge{

display:inline-block;

padding:10px 22px;

background:rgba(255,209,0,.12);

border:1px solid rgba(255,209,0,.4);

border-radius:50px;

color:var(--primary);

margin-bottom:30px;

font-weight:600;

}

.hero h1{

color:#fff;

margin-bottom:30px;

}

.hero h1 span{

color:var(--primary);

}

.hero p{

color:#ddd;

max-width:620px;

margin-bottom:40px;

font-size:20px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:60px;

}

.hero-stats{

display:flex;

gap:50px;

}

.hero-stats h3{

color:var(--primary);

font-size:42px;

}

.hero-stats p{

color:#aaa;

font-size:15px;

}

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

.hero-image{

position:relative;

height:600px;

}

.circle{

position:absolute;

border-radius:50%;

background:var(--primary);

filter:blur(30px);

opacity:.20;

animation:float 7s infinite ease-in-out;

}

.circle1{

width:180px;

height:180px;

top:50px;

left:100px;

}

.circle2{

width:250px;

height:250px;

right:0;

top:160px;

}

.circle3{

width:120px;

height:120px;

bottom:50px;

left:0;

}

.floating-card{

position:absolute;

background:#fff;

padding:30px;

border-radius:18px;

box-shadow:var(--shadow);

font-weight:700;

transition:.35s;

}

.floating-card:hover{

transform:translateY(-10px);

}

.card1{

top:30px;

left:30px;

}

.card2{

right:40px;

top:220px;

}

.card3{

bottom:40px;

left:160px;

}

@keyframes float{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-25px);

}

}

.menu.active {
    display: flex;
}

.navbar.sticky {
    background: #111;
    padding: 16px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.section-title,
.about-grid,
.feature,
.card,
.service,
.contact-box,
.hero-content,
.hero-image {
    opacity: 0;
    transform: translateY(50px);
    transition: all .8s ease;
}

.menu a.active {
    color: #FFD100;
}

.scroll-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: #FFD100;
    color: #111;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 999;
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
}

.btn-primary {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    transform: scale(0);
    animation: ripple .6s linear;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}
/*==============================
MOBILE MENU
==============================*/

@media (max-width:991px){

.menu-btn{
    display:flex;
    z-index:1001;
}

.menu{

    position:fixed;

    top:80px;

    left:-100%;

    width:100%;

    height:calc(100vh - 80px);

    background:#111;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding-top:60px;

    gap:35px;

    transition:.4s ease;

}

.menu.active{
    left:0;
}

.menu a{
    font-size:22px;
}

.hero{

    height:auto;

    padding:140px 0 80px;

}

.hero-grid{

    grid-template-columns:1fr;

    gap:60px;

}

.hero-content{

    text-align:center;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-stats{

    justify-content:center;

    flex-wrap:wrap;

}

.hero-image{

    height:420px;

}

.card1{

    left:20px;
    top:20px;

}

.card2{

    right:20px;
    top:160px;

}

.card3{

    left:80px;
    bottom:20px;

}

.about-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.services-grid{

    grid-template-columns:1fr 1fr;

}

.compliance-grid{

    grid-template-columns:1fr;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

}


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

@media (max-width:768px){

h1{

    font-size:46px;

}

h2{

    font-size:34px;

}

p{

    font-size:16px;

}

.navbar{

    padding:16px 0;

}

.logo{

    font-size:26px;

}

.hero{

    padding-top:120px;

}

.hero-image{

    height:340px;

}

.floating-card{

    padding:18px;

    font-size:15px;

}

.hero-stats{

    gap:20px;

}

.hero-stats h3{

    font-size:28px;

}

.services-grid{

    grid-template-columns:1fr;

}

.btn-primary,
.btn-outline{

    width:100%;

}

.hero-buttons{

    flex-direction:column;

}

}


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

@media (max-width:576px){

.container{

    width:92%;

}

h1{

    font-size:38px;

}

h2{

    font-size:30px;

}

.hero{

    padding-top:110px;

}

.hero-image{

    display:none;

}

.badge{

    font-size:14px;

}

.hero p{

    font-size:16px;

}

.hero-stats{

    flex-direction:column;

    gap:18px;

}

.feature{

    flex-direction:column;

    text-align:center;

}

.contact-card{

    padding:30px 20px;

}

footer{

    text-align:center;

}

}