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

html,
body{
    width:100%;
    overflow-x:hidden;
      padding-top: 30px;
}
.site-header{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
        position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 1000;
    background: #fff;
    padding: 10px 5%;
    border-bottom: 1px solid #eee;
}
.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
    gap:8px;
    flex-shrink:0;
}

.logo-icon{
    font-size:34px;
    color:#011F7B;
}

.logo-name{
    height:36px;
    width:auto;
    display:block;
}




/* ===========================
   NAVIGATION
=========================== */
.main-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    flex:1;
}

.main-nav a{
    text-decoration:none;
    color:#000;
    font-family:general;
    font-size:15px;
    font-weight:600;
    padding:10px 14px;
    border-radius:10px;
    transition:.3s;
}

.main-nav a:hover{
    background:#f5a623;
}

/* ===========================
   RIGHT SIDE
=========================== */

.header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-shrink:0;
}

.login-icon{
    width:46px;
    height:46px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#000;
    border-radius:50%;
    transition:.3s;
}

.login-icon:hover{
    background:#f3f3f3;
}

.login-icon i{
    font-size:28px;
}

/* Hide menu button on desktop */
.menu-toggle{
    display:none;
}
@media (max-width:768px){

.menu-toggle{
    display:block;
    background:none;
    border:none;
    font-size:28px;
    cursor:pointer;
    z-index:1001;
}
.login-icon{
    margin-right: -70px;
}

.main-nav{
    position:absolute;
    top:75px;
    left:0;
    width:100%;
    background:#fff;
    display:none;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:25px 0;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.main-nav.active{
    display:flex;
}

}


@font-face {
    font-family: "clash";
    src: url("fonts/clash.otf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-size: medium;
}

@font-face {
    font-family: "aurora";
    src: url("fonts/aurora.otf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "general";
    src: url("fonts/general.otf") format("truetype");
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: "neue";
    src: url("fonts/neue.otf") format("truetype");
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: "general";
    src: url("fonts/general.otf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

.contact-section{
position:relative;

min-height:100vh;

padding:50px 4.5%;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

background-color: #09090B;
}

/* Blurred light */

.overlay{

position:absolute;

right:-150px;

top:-80px;

width:650px;

height:900px;

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

filter:blur(90px);

border-radius:50%;
}

.container{

position:relative;

width:100%;

max-width:1300px;

display:grid;

grid-template-columns:1fr 1.2fr;

gap:100px;

color:#fff;

z-index:2;
}

/* LEFT */

.left h1{
font-family: clash;
font-size:55px;

font-weight:500;

margin-bottom:35px;
}

.left p{
font-size:17px;
font-family: general;
line-height:1.7;

width:420px;

opacity:.9;
}

.line{

width:120px;

height:2px;

background:#fff;

margin:50px 0;
}

.info{

display:flex;

flex-direction:column;

gap:24px;
}

.info div{

display:flex;

align-items:center;
font-family: general;
gap:18px;

font-size:18px;
}

.info i{
font-family: general;
font-size:22px;
}

/* RIGHT */

form{

display:flex;

flex-direction:column;

gap:20px;
}

label{

font-size:20px;
font-family: general;
margin-bottom:6px;
}

input,

textarea{

width:100%;
height: auto;
background:rgba(255,255,255,.18);

border:none;

border-bottom:2px solid rgba(255,255,255,.8);

padding:18px 20px;

color:#fff;

font-size:18px;

outline:none;
border-radius: 12px;

backdrop-filter:blur(8px);

box-shadow:0 15px 25px rgba(0,0,0,.25);
}

input::placeholder,

textarea::placeholder{

color:#ddd;
}

textarea{

height:130px;

resize:none;
}

.row{

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;
}

.button2{

margin-top:20px;

align-self:flex-end;

width:180px;

height:50px;

background:white;
border-radius: 28px;

color:black;

font-size:19px;

border:none;

cursor:pointer;

letter-spacing:1px;
font-family: general;
transition:.3s;

display:flex;

justify-content:center;

align-items:center;

gap:10px;
}

.button2:hover{

background:black;

color:white;
}

@media(max-width:950px){

.container{

grid-template-columns:1fr;

gap:60px;
}

.left p{

width:100%;
}

.row{

grid-template-columns:1fr;
}

.button2{

width:100%;
}
}

.footer-bottom{
    background-color: #09090B;
    height: 50PX;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.footer-bottom p{

    font-family: general;
    color:#b7c0d4;
    font-size: 14px;
}


.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;

    width:50px;
    height:50px;

    background:#25D366;
    color:#fff;

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

    border-radius:50%;

    font-size:25px;

    text-decoration:none;

    box-shadow:0 12px 30px rgba(37,211,102,.35);

    z-index:9999;

    transition:.3s ease;
}

.whatsapp-float:hover{
    transform:scale(1.1);
    box-shadow:0 18px 40px rgba(37,211,102,.45);
}

.whatsapp-float i{
    line-height:1;
}

@media(max-width:768px){

    

.whatsapp-float{
    width: 45px;
    height:45px;

    right:18px;
    bottom:18px;

    font-size:30px;
}

}

@keyframes whatsappPulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.5);
    }
    70%{
        box-shadow:0 0 0 16px rgba(37,211,102,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

.whatsapp-float{
    animation:whatsappPulse 2s infinite;
}