

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

.footer{

background:
radial-gradient(circle at top right,
rgba(30, 100, 56, 0.08),
transparent 35%),

linear-gradient(180deg,#3d6e55,#152e26);

color:#fff;

margin-top:100px;

overflow:hidden;

}

/*==================================================
                NEWSLETTER
==================================================*/

.footer-newsletter{

padding:80px 0;

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

}

.newsletter-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

gap:60px;

}

.newsletter-left{

max-width:550px;

}

.newsletter-left span{

display:inline-block;

padding:8px 18px;

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

border-radius:50px;

font-size:14px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

}

.newsletter-left h2{

font-size:48px;

font-weight:800;

line-height:1.2;

margin-bottom:18px;

}

.newsletter-left p{

font-size:18px;

line-height:1.9;

color:#CBD5E1;

}

.newsletter-form{

display:flex;

background:#fff;

padding:8px;

border-radius:60px;

width:520px;

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

}

.newsletter-form input{

flex:1;

border:none;

outline:none;

padding:0 22px;

font-size:16px;

background:none;

}

.newsletter-form button{

border:none;

background:#22C55E;

color:#fff;

padding:16px 32px;

border-radius:50px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.newsletter-form button:hover{

background:#16A34A;

transform:scale(1.03);

}

/*==================================================
                MAIN
==================================================*/

.footer-main{

padding:80px 0;

}

.footer-grid{

display:grid;

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


gap:60px;

}

.footer-brand{

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:8px;
margin-bottom:25px;

}

/* .footer-brand img {
    mix-blend-mode: multiply !important;
  filter: contrast(1) !important;
} */

.footer-logo-icon{
width:95px;
height:95px;
object-fit:contain;
display:block;
border-bottom: -8px;

}

.footer-logo-text{
width:190px;
height:auto;
object-fit:contain;
display:block;

}

/*=====================================
        FOOTER LOGO DARK
=====================================*/

#footer-logo-icon,
#footer-logo-text{

    filter:
        brightness(0.55)
        contrast(1.25)
        saturate(1.3);

    transition:all .35s ease;

    background:transparent !important;

}

.footer-brand:hover #footer-logo-icon,
.footer-brand:hover #footer-logo-text{

    filter:
        brightness(0.75)
        contrast(1.3)
        saturate(1.4);

}



.footer-company p{

font-size:17px;

line-height:2;

color:#CBD5E1;

max-width:350px;

margin:0 auto;


}

/*==================================================
                TITLES
==================================================*/

.footer-grid h3{

font-size:26px;

margin-bottom:28px;

font-weight:700;

position:relative;

}

.footer-grid h3::after{

content:"";

width:45px;

height:4px;

background:#22C55E;

display:block;

margin-top:12px;

border-radius:50px;

}

/*==================================================
                LINKS
==================================================*/

.footer-grid ul{

padding:0;

margin:0;

list-style:none;

}

.footer-grid li{

margin-bottom:16px;

}

.footer-grid a{

color:#D1D5DB;

text-decoration:none;

font-size:17px;

transition:.35s;

display:inline-block;

}

.footer-grid a:hover{

color:#4ADE80;

transform:translateX(8px);

}

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

.footer-contact li{

display:flex;

align-items:flex-start;

gap:12px;

line-height:1.8;

font-size:16px;

color:#D1D5DB;

}

.footer-contact i{

font-size:22px;

color:#4ADE80;

margin-top:3px;

}

/*==================================================
                SOCIAL
==================================================*/

.footer-social{

display:flex;

gap:16px;

margin-top:35px;

}

.footer-social a{

width:52px;

height:52px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

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

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

backdrop-filter:blur(10px);

font-size:22px;

transition:.35s;

}

.footer-social a:hover{

background:#22C55E;

color:#fff;

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(34,197,94,.30);

}

/*==================================================
                TRUST
==================================================*/

.footer-trust{

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

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

padding:30px 0;

}

.trust-grid{

display:grid;

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

gap:20px;

}

.trust-grid div{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

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

padding:18px;

border-radius:14px;

font-weight:700;

transition:.35s;

}

.trust-grid div:hover{

background:#22C55E;

transform:translateY(-4px);

}

/*==================================================
                COPYRIGHT
==================================================*/

.footer-bottom{

padding:28px 0;

}

.footer-bottom-flex{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

}

.footer-bottom p{

color:#94A3B8;

}

.footer-bottom-links{

display:flex;

gap:25px;

}

.footer-bottom-links a{

color:#CBD5E1;

text-decoration:none;

transition:.3s;

}

.footer-bottom-links a:hover{

color:#4ADE80;

}

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

@media(max-width:1200px){

.footer-grid{

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

}

.newsletter-form{

width:100%;

}

}

@media(max-width:992px){

.newsletter-wrapper{

flex-direction:column;

text-align:center;

}

.newsletter-form{

max-width:650px;

}

.footer-grid{

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

gap:45px;

}

.trust-grid{

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

}

}

@media(max-width:768px){

.footer{

margin-top:70px;

}

.footer-newsletter{

padding:60px 0;

}

.newsletter-left h2{

font-size:36px;

}

.newsletter-form{

flex-direction:column;

padding:20px;

border-radius:24px;

gap:15px;

}

.newsletter-form input{

height:52px;

border:1px solid #E5E7EB;

border-radius:12px;

}

.newsletter-form button{

width:100%;

border-radius:12px;

}

.footer-main{

padding:60px 0;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-company p{

margin:0 auto;

}

.footer-grid h3::after{

margin-left:auto;

margin-right:auto;

}

.footer-social{

justify-content:center;

}

.footer-contact li{

justify-content:center;

text-align:left;

}

.trust-grid{

grid-template-columns:1fr;

}

.footer-bottom-flex{

flex-direction:column;

text-align:center;

}

.footer-brand{

align-items:center;
text-align:center;

}

.footer-company{

text-align:center;

}

}

/*==================================================
                AMAZON STORE
==================================================*/

.amazon-store{

margin-top:35px;

width:100%;

}

.amazon-label{

color:#CBD5E1;

font-size:14px;

font-weight:700;

letter-spacing:1px;

margin-bottom:14px;

text-transform:uppercase;

}

.amazon-card{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 20px;

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

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

backdrop-filter:blur(12px);

border-radius:18px;

text-decoration:none;

transition:.35s;

color:#fff;

}

.amazon-left{

display:flex;

align-items:center;

gap:16px;

}

.amazon-icon{

width:48px;

height:48px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#FF9900;

color:#fff;

font-size:28px;

}

.amazon-card h4{

margin:0;

font-size:18px;

font-weight:700;

color:#fff;

}

.amazon-card small{

display:block;

margin-top:3px;

font-size:13px;

color:#CBD5E1;

}

.amazon-card>i{

font-size:26px;

transition:.35s;

}

.amazon-card:hover{

transform:translateY(-5px);

background:#22C55E;

box-shadow:0 20px 40px rgba(34,197,94,.25);

}

.amazon-card:hover>i{

transform:translateX(6px);

}