:root{
    --bg:#FAFAF7;
    --card:#ffffff;
    --accent: #C5A24A;
    --muted:#25437e;
    --textCol: #000058;
    --radius:12px;
    --shadow: 0 8px 30px rgba(11,110,253,0.06);
    --gap:16px;
    font-family: "Poppins";
}

html,body{height:100%;margin:0;background:var(--bg);color:#0f172a;font-family: "Poppins";}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.wrap{
    max-width:1100px;
    margin:20px auto;
    margin-top: 10px;
    padding:20px;
    box-sizing:border-box;
}

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}

.brand{
    display:flex;
    gap:12px;
    align-items:center;
}

.logo{
    width:56px;height:56px;border-radius:10px;
    background:linear-gradient(135deg,var(--accent), #f3d17c);
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
    box-shadow:0 6px 18px rgba(11,110,253,0.12);
    font-size:20px;
}

h1{font-size:20px;margin:0;}
p.lead{margin:6px 0 0 0;color:var(--muted);font-size:14px;}

/* Grid of pricing cards */
.grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:var(--gap);
    margin-top:18px;
}

.card{
    background:var(--card);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:200px;
}

.card .title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:16px;
}

.badge{
    background:#eef6ff;color:var(--accent);padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px;
}

.price{
    font-size:20px;font-weight:800;color: var(--textCol);
}

.muted{color:var(--muted);font-size:13px;}

ul.features{margin:8px 0 0 0;padding:0 0 0 18px;color: var(--textCol);}
ul.features li{margin:8px 0; font-size:14px;}

button.primary{
    background:var(--accent);
    color:#fff;border:0;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;
}

button.ghost{
    background:transparent;border:1px solid #e6e9ef;padding:10px 14px;border-radius:10px;cursor:pointer;color:var(--muted);
}

/* Additional info row */
.info{
    margin-top:22px;
    display:flex;
    gap:12px;
    align-items:flex-start;
    flex-wrap:wrap;
}

.info .note{
    background:#fff;padding:12px;border-radius:10px;box-shadow:0 6px 18px rgba(15,23,42,0.03);flex:1;min-width:220px;
}

.small{font-size:13px;color:var(--muted);}

/* Summary panel */
.summary{
    margin-top:22px;
    background:linear-gradient(180deg,#fff,#fbfdff);
    padding:14px;border-radius:10px;border:1px solid #eef6ff;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
}

.summary .left{display:flex;flex-direction:column;}
.summary .left b{color:var(--accent);font-size:15px;}
.summary .right{font-weight:700;color: var(--textCol);font-size:18px;}

/* Responsive */
@media (max-width:980px){
    .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:680px){
    header{flex-direction:column;align-items:flex-start;}
    .grid{grid-template-columns:1fr;}
    .summary{flex-direction:column;align-items:flex-start;gap:8px;}
}

#ham{
    display: none;
    height: 22px;
}

#hamdrop{
    position: absolute;
    right: 0px;
    top: 10px;
}

@media (max-width:768px) {
    body::-webkit-scrollbar{
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .section-container{
        flex-direction: column;
        justify-content: center;
        width: 90%;
    }

    #ham{
        display: flex;
        position: absolute;
        right: 0px;
        padding: 0;
        text-align: center;
    }

    #ham:hover{
        background: none;
    }

    #ham a{
        margin-top: 0px;
        margin-left: 10px;
        margin-right: 25px;
        border-radius: 10px;
        padding: 10px;
        transition: all 0.5s;
        font-size: 1.5rem;
    }

    #ham a:hover{
        background-color: #C5A24A;
    }

    #hamdrop{
        top: 45px;
    }

    #hamdrop p{
        margin: 0;
    }

    #services-container{
        display: none;
    }

    .navlink{
        display: none;
    }

    section{
        width: 100%;
        align-items: center;
    }
}