/* ==========================================================
IZININDO
Premium Corporate Legal Website
Part 1
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap');

:root{

--primary:#0A3D91;
--secondary:#174EA6;
--accent:#D4AF37;
--gold:#F5C451;

--dark:#0B1220;
--dark2:#111827;
--light:#ffffff;
--gray:#f5f7fb;
--gray2:#d9d9d9;

--text:#374151;
--heading:#0F172A;

--radius:18px;
--radius2:28px;

--shadow:
0 10px 40px rgba(0,0,0,.08);

--shadow-hover:
0 25px 70px rgba(10,61,145,.18);

--transition:.35s ease;

--container:1280px;

}

/* ================================================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

font-size:16px;

line-height:1.9;

color:var(--text);

background:#fff;

overflow-x:hidden;

}

/* ================================================= */

::selection{

background:var(--primary);

color:#fff;

}

::-webkit-scrollbar{

width:11px;

}

::-webkit-scrollbar-track{

background:#efefef;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--primary),
var(--secondary)
);

border-radius:50px;

}

/* ================================================= */

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:.3s;

}

ul{

list-style:none;

}

.container{

width:min(92%,var(--container));

margin:auto;

}

/* ================================================= */

h1{

font-family:"Playfair Display",serif;

font-size:64px;

font-weight:800;

line-height:1.15;

color:#fff;

}

h2{

font-family:"Playfair Display",serif;

font-size:44px;

line-height:1.25;

margin-bottom:20px;

color:var(--heading);

}

h3{

font-size:24px;

font-weight:700;

color:var(--heading);

margin-bottom:15px;

}

p{

margin-bottom:18px;

}

/* ================================================= */

.btn-primary{

display:inline-flex;

align-items:center;

gap:10px;

padding:18px 38px;

border-radius:999px;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:#fff;

font-weight:600;

box-shadow:var(--shadow);

transition:var(--transition);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:var(--shadow-hover);

}

.btn-secondary{

display:inline-flex;

align-items:center;

gap:10px;

padding:18px 38px;

border-radius:999px;

border:2px solid #fff;

color:#fff;

font-weight:600;

backdrop-filter:blur(15px);

transition:var(--transition);

}

.btn-secondary:hover{

background:#fff;

color:var(--primary);

}

/* ================================================= */

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

transition:.4s;

background:rgba(8,18,36,.45);

backdrop-filter:blur(20px);

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

}

.navbar{

height:95px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo img{

height:64px;

}

.menu{

display:flex;

gap:40px;

}

.menu a{

font-weight:500;

color:#fff;

position:relative;

}

.menu a::after{

content:"";

position:absolute;

left:0;

bottom:-10px;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}

.menu a:hover::after{

width:100%;

}

.mobile-menu{

display:none;

font-size:28px;

color:#fff;

cursor:pointer;

}

/* ================================================= */

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

}

.hero-bg{

position:absolute;

inset:0;

z-index:-3;

}

.hero-bg img{

width:100%;

height:100%;

object-fit:cover;

transform:scale(1.08);

}

.hero-overlay{

position:absolute;

inset:0;

z-index:-2;

background:

linear-gradient(
90deg,
rgba(4,18,40,.92),
rgba(4,18,40,.55)
),

linear-gradient(
180deg,
rgba(0,0,0,.25),
rgba(0,0,0,.45)
);

}

.hero::before{

content:"";

position:absolute;

width:900px;

height:900px;

right:-220px;

top:-220px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(212,175,55,.25),
transparent 70%
);

filter:blur(20px);

animation:blob1 10s infinite alternate;

}

.hero::after{

content:"";

position:absolute;

left:-260px;

bottom:-260px;

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(255,255,255,.08),
transparent 70%
);

animation:blob2 12s infinite alternate;

}

.hero-grid{

display:grid;

grid-template-columns:1.2fr .9fr;

align-items:center;

gap:80px;

padding-top:120px;

padding-bottom:80px;

}

.badge{

display:inline-flex;

align-items:center;

gap:12px;

padding:12px 24px;

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

backdrop-filter:blur(20px);

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

border-radius:999px;

margin-bottom:30px;

color:#fff;

font-weight:600;

}

.hero p{

font-size:18px;

color:rgba(255,255,255,.92);

max-width:760px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-top:35px;

margin-bottom:35px;

flex-wrap:wrap;

}

.hero-features{

display:grid;

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

gap:16px;

margin-top:30px;

}

.hero-features div{

padding:18px;

border-radius:14px;

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

backdrop-filter:blur(12px);

color:#fff;

display:flex;

align-items:center;

gap:12px;

}

.hero-features i{

color:var(--gold);

}

/* ================================================= */

.hero-image{

position:relative;

}

.hero-image img{

border-radius:28px;

box-shadow:

0 35px 90px rgba(0,0,0,.28);

}

.floating-card{

position:absolute;

left:-35px;

bottom:60px;

background:#fff;

padding:22px;

width:270px;

display:flex;

gap:18px;

align-items:center;

border-radius:18px;

box-shadow:var(--shadow);

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

}

.floating-card.second{

left:auto;

right:-25px;

bottom:260px;

animation-delay:2s;

}

.floating-card i{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

border-radius:50%;

color:#fff;

}

.floating-card p{

margin:0;

font-size:14px;

}

/* ================================================= */

.section-title{

max-width:850px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:12px 24px;

border-radius:999px;

background:#EEF4FF;

color:var(--primary);

font-weight:600;

margin-bottom:25px;

}

section{

padding:110px 0;

}

/* ================================================= */

.scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:

linear-gradient(
90deg,
var(--gold),
var(--primary)
);

z-index:100000;

}

/* ================================================= */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

@keyframes blob1{

from{

transform:translate(0,0);

}

to{

transform:translate(-80px,80px);

}

}

@keyframes blob2{

from{

transform:translate(0,0);

}

to{

transform:translate(60px,-60px);

}

}

/* ================================================= */

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

}

.hero-image{

order:-1;

}

.menu{

display:none;

}

.mobile-menu{

display:block;

}

h1{

font-size:48px;

}

}

@media(max-width:768px){

h1{

font-size:38px;

}

h2{

font-size:32px;

}

.hero-features{

grid-template-columns:1fr;

}

.floating-card{

display:none;

}

.btn-primary,
.btn-secondary{

width:100%;

justify-content:center;

}

}

/* ==========================================================
PART 2
Partner • About • Statistics • Why Us • Timeline
Services • Industries
==========================================================*/


/*==============================
PARTNER
==============================*/

.partners{

background:#fff;

padding:60px 0;

border-top:1px solid #f1f1f1;

border-bottom:1px solid #f1f1f1;

}

.partners h3{

text-align:center;

margin-bottom:45px;

font-size:20px;

font-weight:600;

color:#64748B;

}

.partner-grid{

display:grid;

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

gap:45px;

align-items:center;

}

.partner-grid img{

height:42px;

margin:auto;

filter:grayscale(100%) opacity(.55);

transition:.4s;

}

.partner-grid img:hover{

filter:none;

transform:scale(1.08);

}





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

.about{

background:#fff;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image{

position:relative;

}

.about-image img{

width:100%;

border-radius:30px;

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

}

.about-content h3{

margin-bottom:25px;

}

.about-list{

margin-top:35px;

display:grid;

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

gap:18px;

}

.about-list div{

padding:18px;

border-radius:14px;

background:#F8FAFC;

display:flex;

gap:12px;

align-items:center;

font-weight:500;

transition:.3s;

}

.about-list div:hover{

background:#EEF4FF;

transform:translateY(-5px);

}

.about-list i{

color:var(--primary);

font-size:20px;

}





/*==============================
STATISTICS
==============================*/

.statistics{

background:

linear-gradient(

135deg,

#F8FBFF,

#EEF4FF

);

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-card{

background:#fff;

padding:45px 30px;

text-align:center;

border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

}

.stat-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:

linear-gradient(

90deg,

var(--gold),

var(--primary)

);

}

.stat-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow-hover);

}

.stat-card i{

font-size:42px;

margin-bottom:25px;

color:var(--primary);

}

.stat-card h3{

font-size:42px;

margin-bottom:10px;

color:var(--primary);

}





/*==============================
WHY US
==============================*/

.why-us{

background:#fff;

}

.why-grid{

display:grid;

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

gap:30px;

}

.why-card{

background:#fff;

padding:40px;

border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

border:1px solid #F2F2F2;

}

.why-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.why-card i{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:#fff;

font-size:28px;

margin-bottom:25px;

}





/*==============================
TIMELINE
==============================*/

.process{

background:#F8FAFC;

}

.timeline{

max-width:900px;

margin:auto;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

left:35px;

top:0;

bottom:0;

width:4px;

background:

linear-gradient(

180deg,

var(--primary),

var(--gold)

);

}

.timeline-item{

display:flex;

gap:35px;

margin-bottom:55px;

position:relative;

}

.timeline-icon{

min-width:70px;

height:70px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:#fff;

font-size:24px;

z-index:2;

box-shadow:0 15px 35px rgba(10,61,145,.18);

}

.timeline-content{

background:#fff;

padding:35px;

border-radius:22px;

box-shadow:var(--shadow);

flex:1;

}





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

.services{

background:#fff;

}

.services-grid{

display:grid;

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

gap:35px;

}

.service-card{

background:#fff;

border-radius:26px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

position:relative;

}

.service-card:hover{

transform:translateY(-14px);

box-shadow:var(--shadow-hover);

}

.service-card img{

height:230px;

width:100%;

object-fit:cover;

transition:.6s;

}

.service-card:hover img{

transform:scale(1.08);

}

.service-card i{

position:absolute;

top:195px;

right:25px;

width:70px;

height:70px;

border-radius:50%;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:28px;

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

}

.service-card h3{

padding:35px 30px 10px;

}

.service-card p{

padding:0 30px 35px;

}





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

.industries{

background:

linear-gradient(

135deg,

#F9FBFF,

#F3F7FF

);

}

.industry-grid{

display:grid;

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

gap:30px;

}

.industry-card{

background:#fff;

padding:35px;

border-radius:22px;

text-align:center;

transition:.35s;

box-shadow:var(--shadow);

}

.industry-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow-hover);

}

.industry-card i{

font-size:42px;

margin-bottom:20px;

color:var(--primary);

}





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

@media(max-width:1100px){

.partner-grid{

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

}

.stats-grid{

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

}

.why-grid{

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

}

.services-grid{

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

}

.industry-grid{

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

}

.about-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.partner-grid,

.stats-grid,

.why-grid,

.services-grid,

.industry-grid{

grid-template-columns:1fr;

}

.about-list{

grid-template-columns:1fr;

}

.timeline::before{

display:none;

}

.timeline-item{

flex-direction:column;

}

.timeline-icon{

margin:auto;

}

}

/* ==========================================================
PART 3
Gallery • CTA • Testimonial • FAQ
Contact • Map • Footer
==========================================================*/

/*==============================
FEATURE BANNER
==============================*/

.feature-banner{

position:relative;

overflow:hidden;

min-height:600px;

display:flex;

align-items:center;

justify-content:center;

}

.feature-banner img{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

transform:scale(1.08);

}

.feature-banner .overlay{

position:absolute;

inset:0;

background:

linear-gradient(

120deg,

rgba(8,20,48,.88),

rgba(8,20,48,.45)

);

backdrop-filter:blur(2px);

}

.banner-content{

position:relative;

z-index:2;

max-width:760px;

color:#fff;

}

.banner-content h2{

color:#fff;

font-size:52px;

}

.banner-content p{

font-size:18px;

opacity:.95;

margin-bottom:35px;

}





/*==============================
ADVANTAGES
==============================*/

.advantages{

background:#fff;

}

.advantage-grid{

display:grid;

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

gap:35px;

}

.advantage-grid>div{

padding:40px;

border-radius:24px;

background:#fff;

box-shadow:var(--shadow);

transition:.35s;

}

.advantage-grid>div:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.advantage-grid i{

font-size:42px;

color:var(--primary);

margin-bottom:20px;

}





/*==============================
GALLERY
==============================*/

.gallery{

background:#F8FAFC;

}

.gallery-grid{

display:grid;

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

gap:22px;

}

.gallery-grid img{

width:100%;

height:320px;

object-fit:cover;

border-radius:22px;

transition:.5s;

box-shadow:var(--shadow);

}

.gallery-grid img:hover{

transform:scale(1.04);

}





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

.cta{

position:relative;

overflow:hidden;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:#fff;

text-align:center;

}

.cta::before{

content:"";

position:absolute;

width:650px;

height:650px;

background:

radial-gradient(circle,

rgba(255,255,255,.18),

transparent 70%

);

top:-260px;

right:-180px;

border-radius:50%;

}

.cta::after{

content:"";

position:absolute;

width:550px;

height:550px;

background:

radial-gradient(circle,

rgba(212,175,55,.18),

transparent 70%

);

left:-200px;

bottom:-220px;

border-radius:50%;

}

.cta .container{

position:relative;

z-index:2;

}

.cta h2{

color:#fff;

font-size:48px;

}

.cta p{

max-width:820px;

margin:0 auto 40px;

font-size:18px;

opacity:.95;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}





/*==============================
TESTIMONIAL
==============================*/

.testimonial{

background:#fff;

}

.testimonial-grid{

display:grid;

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

gap:35px;

}

.testimonial-card{

padding:40px;

border-radius:24px;

background:#fff;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

}

.testimonial-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.quote{

font-size:46px;

color:var(--gold);

margin-bottom:25px;

}

.client{

display:flex;

align-items:center;

gap:18px;

margin-top:30px;

}

.client img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

}





/*==============================
FAQ
==============================*/

.faq{

background:#F8FAFC;

}

.faq-list{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:20px;

}

.faq-item{

padding:30px;

background:#fff;

border-radius:18px;

box-shadow:var(--shadow);

transition:.3s;

}

.faq-item:hover{

transform:translateX(8px);

}

.faq-item h3{

margin-bottom:15px;

}





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

.contact{

background:#fff;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:start;

}

.info-box{

display:flex;

gap:20px;

margin-top:30px;

padding:25px;

background:#F8FAFC;

border-radius:18px;

}

.info-box i{

font-size:26px;

color:var(--primary);

margin-top:6px;

}

.contact-form{

background:#fff;

padding:40px;

border-radius:24px;

box-shadow:var(--shadow);

}

.contact-form form{

display:flex;

flex-direction:column;

gap:18px;

}

.contact-form input,

.contact-form textarea{

padding:18px;

border:1px solid #ddd;

border-radius:14px;

font-family:inherit;

font-size:15px;

transition:.3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:var(--primary);

outline:none;

box-shadow:0 0 0 4px rgba(10,61,145,.08);

}





/*==============================
MAP
==============================*/

.map iframe{

width:100%;

height:520px;

border:0;

display:block;

}





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

footer{

background:#091423;

color:#CBD5E1;

padding-top:90px;

}

.footer-grid{

display:grid;

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

gap:45px;

padding-bottom:60px;

}

.footer-logo{

height:70px;

margin-bottom:25px;

}

footer h3{

color:#fff;

margin-bottom:25px;

}

footer ul{

display:flex;

flex-direction:column;

gap:14px;

}

footer a{

color:#CBD5E1;

}

footer a:hover{

color:#fff;

}

footer p{

margin-bottom:16px;

}

.copyright{

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

padding:28px 0;

text-align:center;

font-size:15px;

}





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

.floating-whatsapp{

position:fixed;

right:30px;

bottom:30px;

width:68px;

height:68px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

background:#25D366;

color:#fff;

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

z-index:999;

animation:pulse 2s infinite;

}

.back-to-top{

position:fixed;

right:32px;

bottom:120px;

width:54px;

height:54px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:18px;

cursor:pointer;

box-shadow:var(--shadow);

opacity:0;

visibility:hidden;

transition:.35s;

}

.back-to-top.show{

opacity:1;

visibility:visible;

}





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

@keyframes pulse{

0%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(37,211,102,.5);

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

transform:scale(1);

}

}





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

@media(max-width:1100px){

.advantage-grid,

.gallery-grid,

.testimonial-grid,

.footer-grid,

.contact-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.advantage-grid,

.gallery-grid,

.testimonial-grid,

.footer-grid,

.contact-grid{

grid-template-columns:1fr;

}

.banner-content h2{

font-size:36px;

}

.cta h2{

font-size:34px;

}

.contact-form{

padding:28px;

}

.floating-whatsapp{

width:60px;

height:60px;

font-size:30px;

right:20px;

bottom:20px;

}

.back-to-top{

right:20px;

bottom:95px;

}

}

/* Javascript Helper */

.reveal{

opacity:0;

transform:translateY(60px);

transition:.8s;

}

.visible{

opacity:1;

transform:none;

}

.header.scrolled{

background:rgba(8,18,36,.95);

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

}

.menu a.active{

color:var(--gold);

}

.menu.show{

display:flex;

position:absolute;

top:95px;

left:0;

width:100%;

padding:30px;

background:#0B1220;

flex-direction:column;

gap:25px;

}

/* Ripple */

.btn-primary,
.btn-secondary{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/* FAQ */

.faq-item{

cursor:pointer;

}

.faq-item.open{

border-left:5px solid var(--primary);

}

/* Lightbox */

.lightbox{

position:fixed;

inset:0;

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

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

}

.lightbox img{

max-width:90%;

max-height:90%;

border-radius:15px;

}

/* Partner */

.partner-grid{

overflow:hidden;

}

/* Loader */

.preloader.hide{

opacity:0;

visibility:hidden;

transition:.6s;

}

/* ===============================
Image Lazy
===============================*/

.img-lazy{

opacity:0;

transform:translateY(30px);

transition:all .7s ease;

}

.img-loaded{

opacity:1;

transform:none;

}

/* ===============================
Header Hide
===============================*/

.nav-hide{

transform:translateY(-100%);

}

/* ===============================
Button Press
===============================*/

.pressed{

transform:scale(.96)!important;

}

/* ===============================
Copy Email
===============================*/

.copy-email{

cursor:pointer;

}

.copy-email.copied{

color:var(--accent);

}

/* ==========================================================
MEGA LOGO
==========================================================*/

.logo-hero{

display:flex;

justify-content:center;

align-items:center;

margin-bottom:50px;

animation:fadeUp 1.2s ease;

}

.logo-hero img{

width:min(34vw,420px);

height:auto;

filter:
drop-shadow(0 30px 60px rgba(0,0,0,.28));

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

transition:.4s;

}

.logo-hero img:hover{

transform:scale(1.03);

}

.footer-grid>div:first-child{

text-align:center;

}

.footer-logo{

width:min(28vw,320px);

height:auto;

display:block;

margin:auto;

margin-bottom:30px;

filter:
drop-shadow(0 20px 45px rgba(255,255,255,.08));

}

@keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

@media(max-width:768px){

.logo-hero img{

width:70vw;

}

.footer-logo{

width:65vw;

}

}