:root{
    --navy:#04172d;
    --blue:#096e85;
    --gold:#d7b477;
    --gold-light:#f1d7a4;
    --white:#ffffff;
    --bg:#f8f7f3;
}


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


body{
    font-family: Georgia, serif;
    background:var(--bg);
    color:#222;
    overflow-x:hidden;
}



/* NAVBAR */

header{
    background:rgba(4,23,45,.85);
    backdrop-filter:blur(12px);
    padding:18px 8%;
    position:fixed;
    width:100%;
    z-index:20;
    border-bottom:1px solid rgba(215,180,119,.4);
}


.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}


.logo img{
    max-width: 200px;
    width:150px;
    /* filter:drop-shadow(0 0 12px #d7b477); */
}

.nav ul{
    display:flex;
    gap:35px;
    list-style:none;
}


.nav a{
    color:white;
    text-decoration:none;
    transition:.3s;
}


.nav a:hover{
    color:var(--gold);
}




/* HERO */
/* Desktop Header Buttons */
#nav-menu{
    display:flex;
    align-items:center;
    gap:35px;
    margin-left:auto;
}

.header-store{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:25px;
}
.header-store a{
    display:block;
    width:200px;       /* Increase button width */
}


.header-store img{
    width:100%;
    display:block;
}



/* Hide mobile buttons by default */

.mobile-store{
    display:none;
}

.mobile-store a{
    border:none !important;
    padding:0 !important;
}

.mobile-store img{
    width:100%;
    display:block;
}

.hero{

min-height:100vh;
padding:160px 8% 60px;
display:flex;
align-items:center;
justify-content:space-between;
background: radial-gradient(circle at top right, #096e8566, transparent 35%), linear-gradient(135deg, #04172d, #04172d) !important;
position:relative;
 overflow:hidden;
}



.hero:before{

content:"";
position:absolute;
width:486px;
height:486px;
border-radius:50%;
border:1px solid var(--gold);
right:-224px;
top:120px;
opacity:.3;
animation:pulse 5s infinite;
}
.hero-content,
.phone{
    position: relative;
    z-index: 2;
}
.hero:after{
content:"";
position:absolute;
width:486px;
height:486px;
border-radius:50%;
border:1px solid var(--gold);
left:-224px;
top:500px;
opacity:.3;
animation:pulse 5s infinite;
}

.hero-content{

color:white;
max-width:600px;
margin: 24px;
animation:slideLeft 1.2s ease;

}



.hero h1{

font-size:60px;
line-height:1.15;
font-family: Georgia, serif;
 font-size:64px;
}


.hero span{

color:var(--gold);
text-shadow:0 0 20px #d7b477;

}


.hero p{

font-size:20px;
margin:15px 0;
line-height:1.7;
color:#ddd;
padding-bottom: 35px;
font-family:Georgia, serif;
 font-size:27px;
}




/* .store{
max-width: 200%;
display:flex;
gap:20px;
}


.store img{

width: 100%;
transition:.3s;

} */

.store{
    display:flex;
    gap:0px;
        max-width:900px;

}

.store a{
    flex:1;
    display:flex;
}

.store img{
    width:100%;
    object-fit:contain;
}


.store img:hover{

transform:translateY(-6px);

}




/* PHONE */


.phone{
max-width: 600px;

width:100%;

/* animation:float 4s ease-in-out infinite; */
position:relative;

}




.phone-img{
width:100%;
border-radius:35px;

box-shadow:
0 25px 50px #0008;
border:2px solid var(--gold);
border-radius:40px;

animation:glow 3s infinite;

}




/* SECTIONS */


section{

padding:90px 8%;

}



.title{

text-align:center;
margin-bottom:50px;

}


.title h2{

font-size:40px;
color:var(--navy);

}


.title div{

width:90px;
height:4px;
background: radial-gradient(circle at top right, #d7b477, transparent 35%), linear-gradient(135deg, #04172d, #3f638b) !important;
margin:15px auto;
border-radius:20px;

}




/* ABOUT */


.about{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;

}



.about img{

width:100%;
border-radius:25px;

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

box-shadow:
0 20px 40px #096e8530;

animation:fadeUp 1s;

}




.about p{

line-height:1.8;
 text-align: justify;
 font-family: Georgia, serif;
 font-size:21px;
}




/* CONTACT */


.contact-box{

max-width:700px;
margin:12px;

padding:40px;

background:white;

border-radius:25px;

border:1px solid var(--gold);

box-shadow:
0 15px 40px #096e8520;

}



input,textarea{

width:100%;
padding:15px;

margin:10px 0;

border-radius:12px;

border:1px solid #ddd;

outline:none;
font-family: Georgia, serif;
 font-size:20px;
}



input:focus,
textarea:focus{

border-color:var(--gold);

}




.btn{

background:
linear-gradient(
135deg,
var(--gold),
#b78b45
);

color:white;

padding:14px 30px;

border-radius:30px;

border:none;

transition:.3s;
font-family: Georgia, serif;
 font-size:20px;
}



.btn:hover{

transform:translateY(-4px);

box-shadow:
0 10px 25px #d7b47788;

}





footer{

background:
linear-gradient(
135deg,
#04172d,
#06304b
);

color:white;

text-align:center;

padding:30px;

border-top:1px solid var(--gold);

}
/* 
.contact-wrapper{

display:column;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;

}



.contact-info{

display:flex;
flex-direction:column;
gap:20px;

} */

.contact-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:20px;
    width:100%;
    max-width:970px;
}

.info-card{
    width:100%;
display:flex;
gap:20px;
align-items:center;

background:white;

padding:25px;

border-radius:20px;

border:1px solid var(--gold);

box-shadow:
0 10px 30px #096e8520;

transition:.3s;

animation:fadeUp .8s;

}



.info-card:hover{

transform:translateY(-8px);

box-shadow:
0 15px 35px #d7b47755;

}



.icon{
width:55px;
height:55px;
color: #ffff;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background: radial-gradient(circle at top right, #096e8566, transparent 35%), linear-gradient(135deg, #04172d, #3f638b) !important;
font-size:25px;
}



.info-card h3{

color:var(--navy);
margin-bottom:8px;

}



.info-card p{

color:#666;
line-height:1.5;
font-family: Georgia, serif;
 font-size:20px;
}




.contact-box h3{

font-size:25px;
color:var(--navy);
margin-bottom:15px;

}


.menu-toggle{
    display:none;
    color:#d7b47788;
    font-size:32px;
    cursor:pointer;
    user-select:none;
}

.footer-links{
    margin-top:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.footer-links a{
    color:var(--gold);
    text-decoration:none;
    font-size:16px;
    transition:.3s;
}

.footer-links a:hover{
    color:var(--gold-light);
}

.footer-links span{
    color:rgba(255,255,255,.6);
}

/* Desktop */
/* 
.nav ul{
    display:flex;
    gap:35px;
    list-style:none;
} */





/* ===========================
   Privacy Policy
=========================== */

.policy-banner{
    padding:163px 0 51px;
    background:#04172d;
    color:#fff;
    text-align:center;
}

.policy-banner h1{
    margin:0;
    font-size:35px;
    font-weight:700;
}

.policy-banner p{
    margin-top:10px;
    color:#d7b477;
    font-size:15px;
}

.policy-section{
    padding:60px 0;
    background:#f8f8f8;
}

.policy-card{
    max-width:1200px;
    margin:auto;
    background:#fff;
    padding:45px;
    border-radius:10px;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.policy-card h2{
    margin:35px 0 15px;
    padding-bottom:10px;
    font-size:22px;
    color:#04172d;
    border-bottom:1px solid #ececec;
}

.policy-card p{
    color:#555;
    line-height:1.9;
    margin-bottom:18px;
}

.policy-card ul{
    margin:0 0 20px 20px;
    padding:0;
}

.policy-card li{
    margin-bottom:10px;
    color:#555;
    line-height:1.8;
}

.policy-card strong{
    color:#04172d;
}

.policy-card a{
    color:#096e85;
    text-decoration:none;
}

.policy-card a:hover{
    text-decoration:underline;
}



@media (min-width:769px) and (max-width:1200px){

    .policy-banner{
        padding:116px 5px 30px;
    }

}

@media (max-width:768px){

    .policy-banner{
        padding:130px 20px 45px;
    }

    .policy-banner h1{
        font-size:22px;
    }

    .policy-section{
        padding:40px 15px;
    }

    .policy-card{
        padding:25px;
    }

    .policy-card h2{
        font-size:20px;
    }

}

/* end Privacy Policy */




/* ANIMATIONS */
@keyframes float{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-18px);
}

}



@keyframes pulse{

0%{
transform:scale(1);
opacity:.3;
}

50%{
transform:scale(1.2);
opacity:.7;
}

100%{
transform:scale(1);
opacity:.3;
}

}




@keyframes slideLeft{

from{
opacity:0;
transform:translateX(-50px);
}

to{
opacity:1;
transform:translateX(0);
}

}



@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}



@keyframes glow{

0%,100%{
box-shadow:0 0 10px #d7b477;
}

50%{
box-shadow:0 0 30px #d7b477;
}

}



/* MOBILE */
@media(min-width: 320px) and (max-width: 499px){
.header-store{
    display:none;
    }
.info-card{
padding:2px;
}
    .store {
        gap: 0px;
    }
section {
    padding: 31px 5%;
}
    .logo img {
        width: 81px !important;
    }
      
.info-card p{
 font-size:16px;
}
.icon{
padding: 13px;
margin: 8px;

}
}
@media(min-width: 500px) and (max-width: 1200px){
    .header-store{
    display:none;
    }
    .phone{
    width:100% !important;
    }
    .logo img {
         width: 91px;
    }
    .hero-content {
    max-width: 650px;
    }
}
@media(max-width:1201px){
    .hero-content {
    max-width: 650px;
    }
    #nav-menu{
    display:none;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    flex-direction:column;
    align-items:center;
    background:rgba(4,23,45,.97);
    padding:20px 0;
}

#nav-menu.active{
    display:flex;
}
    .header-store{
    display:none;
}

.mobile-store{
    display:flex !important;
    justify-content:center;
    align-items:center;
    gap:12px;
    padding:20px;
    width:100%;
}

.mobile-store a{
    width:140px;
}

.mobile-store img{
    width:100%;
    height:auto;
}


    .contact-wrapper{

grid-template-columns:1fr;

}
.menu-toggle{
    display:block;
}

.nav ul{
    position:absolute;
    top:80px;
    left:0;
    width:100%;

    background:rgba(4,23,45,.97);

    flex-direction:column;
    align-items:center;
    gap:0;

    display:none;

    padding:20px 0;
}

.nav ul.active{
    display:flex;
}

.nav ul li{
    width:100%;
    text-align:center;
}

.nav ul li a{
    display:block;
    padding:18px;
    border-bottom:1px solid rgba(255,255,255,.08);
}


.hero{

flex-direction:column;
text-align:center;
gap:50px;

}


.hero h1{

font-size:40px;

}


.store{

justify-content:center;

}
    .logo img {
        width: 100px !important;
    }





.about{

grid-template-columns:1fr;

}
.hero:before {
   
    width: 368px;
    height: 388px;
    top: 498px;
    animation: pulse 5s infinite;
}
}