.header{ position: sticky; top: 0; z-index: 100; background: var(--c-white); border-bottom: 1px solid var(--c-border); box-shadow: 0 4px 24px #2c252214; transition: box-shadow 0.3s; }
.header .container .wrapper .logo {display: flex; align-items: center; gap: 6px; font-family: var(--ff-primary); font-size: 22px; font-weight: 700; color: var(--c-gold); white-space: nowrap;}
.header .container .wrapper{display: flex; justify-content: space-between;align-items: center;padding-block: 15px;}
.header .container .wrapper .collapsed  {display: flex; align-items: center; gap: 32px;}
.header .container .wrapper .collapsed a{font-size: 15px; font-weight: 500; color: var(--c-charcoal); position: relative; transition: color 0.2s;}
.header .container .wrapper  .collapsed a::after{content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background: var(--c-gold); transition: var(--menu-transition)}
.header .container .wrapper  .collapsed a:hover{color: var(--c-gold);}
.header .container .wrapper .collapsed a:hover::after{width: 100%;}
.header .container .wrapper .col-3{display: flex; align-items: center; gap: 14px;}
.menu-toggle {display: none;}
.menu-btn img {display: none;}
.menu-btn .cancel {display: none;}
.menu-btn.open .burger {display: none;}
.menu-btn.open .cancel {display: block;}
.collapsed li:last-child {display: none;}
header .container .wrapper .col-3> :nth-child(1){border: none; padding: 8px; border-radius: 8px; transition: background 0.2s;}
header .container .wrapper .col-3> :nth-child(1):hover{background-color: var(--c-surface);}
/* search */
.search_form form { width: 100%; display: flex; justify-content: center; align-items: center; height: 100%; padding: 0 25%; }
.search_form span { color: #fff; font-size: 45px; cursor: pointer; width: 100%; text-align: right; padding-right: 20px; position: absolute; z-index: 99999; }
.search_form.active {max-height: 100vh;}
.search_form { width: 100%; height: 100%; background-color: rgba(0, 0, 0, .9); position: fixed; top: 0; left: 0; right: 0; z-index: 99999; max-height: 0; overflow: hidden; transition: max-height .4s; }
.search_form form input { width: 85%; height: 60px; outline: 0; border: none; background-color: #fff; padding: 0 10px; font-size: 16px; color: #000; border-radius: 7px 0 0 7px; }
.search_form form button { width: 15%; background-color: var(--c-gold); outline: 0; border: none; height: 60px; font-weight: 700; transition: .3s; border-radius: 0 7px 7px 0; }
.wishing-text a{color : #f5b942}
p a{color : #f5b942}
@media only screen and (max-width: 1200px) {
    .header .container .wrapper .collapsed {gap: 20px;}

}
@media only screen and (max-width:1024px) {
    .btn-primary {padding: 10px 10px;}
    .header .container .wrapper .collapsed {gap: 15px;}
}
@media only screen and (max-width:992px) {
    .btn-primary {display: none;}
    .menu-btn img {display: block;}
    .collapsed{flex-direction: column; position: absolute; top: 66px; left: 0; width: 100%; background: white; padding: 20px; align-items: baseline !important; transform: translateY(-20px); opacity: 0; pointer-events: none; transition: all 0.3s ease; padding: 0px;}
    .collapsed li{width: 100%; border-bottom: solid 1px var(--c-border); padding-block: 12px; padding-inline: 24px;}
    .menu-toggle {display: block;}
    .collapsed.active {transform: translateY(0); opacity: 1; pointer-events: auto;}
    .header .container .wrapper .collapsed {gap: 0; height: calc(100vh - 66px); justify-content: start; align-items: start !important; overflow-y: auto;}
    .menu-btn {display: block;}
    .collapsed li:last-child {display: block !important;}
    .collapsed li:last-child a{color: var(--c-rose) !important;font-weight: 700 !important;}
}
/* footer */
footer {background: var(--c-charcoal); color: rgba(255, 255, 255, 0.75); padding-top: 64px;}
footer .container .wrapper{display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
footer .container .wrapper .col-about .logo{font-family: var(--ff-primary);font-size: 22px;font-weight: 700; color: var(--c-gold);}
footer .col-about > :nth-child(2) {font-size: var(--fs-sm);padding-top: 14px; line-height: var(--lh-p);color: rgba(255, 255, 255, 0.5);}
footer .col-about> :nth-child(3) {padding-top:20px;}
footer .container .wrapper ul{padding-left: 0px;}
.social-icon { width: 36px; height: 36px; border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: border-color 0.2s, background 0.2s; color: rgba(255, 255, 255, 0.6);}
.social-icons {display: flex; gap: 12px;}
.social-icon:hover {border-color: var(--c-gold); background: rgba(232, 151, 42, 0.1); color: var(--c-gold);}
footer .col-cat > :nth-child(1){font-family: var(--ff-primary);font-size: var(--fs-base); font-weight: 700; color: var(--c-white); padding-bottom: 18px;}
footer .col-cat > :nth-child(2){display: flex; flex-direction: column; gap: 10px;}
footer .col-cat  > :nth-child(2) a {    font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.55);transition: color 0.2s;}
footer .col-cat > :nth-child(2) a:hover {color: var(--c-gold);}
footer .container .copyright{ padding-block: 20px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.35);}

@media only screen and (max-width:768px) { 
    footer .container .wrapper{grid-template-columns: 1fr 1fr; gap: 32px;}
}
@media only screen and (max-width:576px){
.search_form form {padding:0 10px;}
}
@media only screen and (max-width:480px) {
     footer .container .wrapper{grid-template-columns: 1fr;}
}