:root{

    --primary:#97002D;
    --primary-dark:#850027;
    --gold:#D8B13F;
    --gold-dark:#C59C23;
    --bg:#F8F5F1;
    --text:#5D4A4A;
    --heading:#8B0027;
    --border:#E8DCCF;
    --white:#ffffff;
	--light-bg: #fdf8f0;
    --border-color: #e9decb;
    --yellow: #ffcc00;
	--maroon: #900526;
    --text-grey: #555;
    }
    
    *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
    
    body
	{
    font-family:'Inter',sans-serif;
    background:var(--white);
    color:var(--text);
    line-height:1.6;
    }
    
    .subscription-plan h1,.subscription-plan h2,.subscription-plan h3
	{
		font-family:'Cinzel',serif;
    }


/* hero-section */
.subscription-hero{padding:30px 0 20px;text-align:center;}
.subscription-hero h1{font-size:64px;color:var(--heading);margin-bottom:25px;line-height:1.1;font-weight:500;}
.subscription-hero p{font-size:24px;max-width:900px;margin:auto;}
.plan-toggle{margin:50px auto 40px;width:420px;height:70px;border:2px solid #E7D8C1;border-radius:50px;display:flex;align-items:center;justify-content:center;padding:8px;background:var(--bg);}
    
.plan-toggle button{flex:1;border:none;background:none;font-size:18px;cursor:pointer;}
.plan-toggle .active{background:var(--primary);color:white;border-radius:40px;padding: 8px 8px;height: 54px;}
.plan-toggle span{background:var(--gold);padding:5px 12px;border-radius:20px;margin-left:5px;font-size:14px;}
.hero-buttons{display:flex;justify-content:center;gap:20px;margin-top:30px;}

.btn-outline,
.btn-gold{display:flex;align-items:center;gap:10px;padding:16px 28px;text-decoration:none;font-size:16px;font-weight:600;border-radius:4px;transition:0.3s ease;}
.btn-outline{background:#fff;border:1px solid #D8B13F;color:#8B0027;}
.btn-gold{background:#D8B13F;color:#000;border:1px solid #D8B13F;}
.btn-outline i,
.btn-gold i{font-size:22px;line-height:1;}
.txt-gold {color: var(--gold);}

/* Pricing Table */
.pricing-section{padding:40px 0 40px;}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.pricing-card{background:#fff;border:1px solid #E8DCCF;border-radius:4px;padding:32px 28px;min-height:480px;position:relative;height:100%;}
.pricing-card h3{font-family:'Cinzel',serif; color:#8B0027; font-size:26px; margin-bottom:12px;}

.card-tagline{ font-size:15px; color:#5F4A4A; margin-bottom:28px;}
.label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#6B5A5A;margin-bottom:10px;}
.price{ font-size:30px; font-weight:300; color:#8B0027; line-height:1;}
.price span{font-size:20px;}
.free-price{color:#8B0027; font-size:56px; font-weight:300; margin-bottom:10px;}
.pricing-card hr{border:none;border-top:1px solid #E8DCCF;margin:24px 0;}
.renewal-price{color:#8B0027;font-size:38px;font-weight:300;margin-bottom:10px;}
.renewal-price span{font-size:16px;}

.card-text,
.price-block p,
.renewal p {font-size:14px; color:#6B5A5A; margin-top:8px;}

/* Featured Card */

.featured{background:#98002E; border:2px solid #D6B14A; color:#fff;}

.featured h3,
.featured .price,
.featured .renewal-price,
.featured .label{color:#fff;}

.featured p{color:#F3DCDC;}
.featured hr{border-color:rgba(255,255,255,.25);}
.featured .price {color: var(--gold);}
.featured .price span {color: #fff;}

.feature-name{font-weight:600;color:#4d3d3d;}
.success-icon{color:#2E7D32;font-size:18px;}
.danger-icon{color:#C62828;font-size:18px;}
.comparison-table small{color:#777;font-size:12px;}
.comparison-table td{vertical-align:top;line-height:1.6;}

.popular-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#D6B14A;color:#000;font-size:13px;font-weight:600;padding:7px 18px;border-radius:20px;}

/*.comparison-section{padding:90px 0;}*/
.section-title{text-align:center;margin-bottom:40px;}
.section-title h2{font-family:'Cinzel',serif;font-size:48px;color:#8B0027;}
.table-wrapper{overflow-x:auto;}
.comparison-table{width:100%;border-collapse:collapse;background:#fff;}
.comparison-table thead th{background:#8B0027;color:#fff;padding:18px;font-size:15px;font-weight:600;border:1px solid #7c0023;}
.comparison-table th:first-child{text-align:left;}
.comparison-table td{padding:18px;border:1px solid #eadfd4;text-align:center;font-size:14px;line-height:1.6;}
.comparison-table td:first-child{text-align:left;width:10%;font-weight:500;color:#4d3d3d;}
.comparison-table tbody tr:nth-child(even){background:#faf7f4;}

/* Business Column */
.business-col{background:#fff7f8;border-left:2px solid #98002E;border-right:2px solid #98002E;}

/* Icons */
.bi-check-lg{color:#2f7d32;font-size:18px;font-weight:700;}
.bi-x-lg{color:#b3261e;font-size:18px;font-weight:700;}

/* Hover */
.comparison-table tbody tr:hover{background:#f4efe9;}

/* Responsive */
@media(max-width:992px){
    .comparison-table{min-width:1200px;}
}

/* photography section css */
.photography-section{padding:50px 0;}
.photography-section .section-title{text-align:center;margin-bottom:20px;}
.photography-section .section-title h2{font-family:'Cinzel',serif;font-size:56px;color:#8B0027;margin-bottom:15px;}
.photography-section .section-title p{max-width:700px;margin:auto;font-size:18px;line-height:1.7;color:#665050;}
.photography-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px;}
.photo-card{background:#fff;border:1px solid #E8DCCF;padding:40px 35px;min-height:640px;position:relative;height:100%;}
.photo-card h3{font-family:'Cinzel',serif;color:#8B0027;font-size:32px;margin-bottom:20px;}
.photo-price{font-size:58px;line-height:1;color:#8B0027;margin-bottom:25px;}
.photo-price span{font-size:18px;font-weight:400;}
.card-desc{font-size:16px;line-height:1.8;margin-bottom:25px;color:#665050;}
.photo-card ul{list-style:none;padding:0;margin:0;}
.photo-card ul li{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;line-height:1.7;}
.photo-card ul li i{color:#8B0027;font-size:18px;margin-top:3px;}
.best-for{margin-top:40px;font-size:15px;color:#777;font-style:italic;}

/* Lifestyle Card */
.lifestyle{background:#98002E;color:#fff;border:2px solid #D6B14A;}
.lifestyle h3{color:#fff;}
.lifestyle .photo-price{color:#D6B14A;}
.lifestyle .card-desc{color:#fff;}
.lifestyle ul li{color:#fff;}
.lifestyle ul li i{color:#D6B14A;}
.lifestyle .best-for{color:#F3D6D6;}
.popular-choice{position:absolute;top:-18px;left:50%;transform:translateX(-50%);background:#D6B14A;color:#000;padding:8px 22px;border-radius:25px;font-size:14px;font-weight:600;}

/* Note Box */
.photo-note{margin-top:30px;background:#fff;border:1px solid #E8DCCF;padding:24px 28px;line-height:1.8;color:#665050;}
.photo-note strong{color:#333;}

/* Mobile */
@media(max-width:991px){
    .photography-grid{grid-template-columns:1fr;}
    .photo-card{min-height:auto;}
}

.services-section{padding:10px 0 60px;}
.services-section .section-title{text-align:center;margin-bottom:18px;}
.services-section .section-title h2{font-family:'Cinzel',serif;font-size:56px;color:#8B0027;margin-bottom:15px;}
.services-section .section-title p{font-size:18px;color:#665050;}

/* TABLE */
.services-table{width:100%;border-collapse:collapse;margin-top:40px;background:#fff;}
.services-table thead th{background:#98002E;color:#fff;padding:22px 18px;font-size:18px;text-align:left;border:1px solid #B1143F;}
.services-table tbody td{padding:22px 18px;border:1px solid #EFE2D4;font-size:16px;color:#463838;}
.services-table tbody tr:hover{background:#faf7f4;}
.services-table td:first-child{width:70px;text-align:center;font-weight:600;color:#98002E;}
.services-table td:last-child{color:#98002E;font-weight:600;}

/* NOTE BOX */
.services-note{margin-top:25px;background:#fff;border:1px solid #E8DCCF;padding:22px 28px;font-size:15px;line-height:1.8;color:#665050;}
.services-note strong{color:#333;}

/* FOOTER */
.services-footer{text-align:center;margin-top:70px;font-size:16px;color:#665050;}

/* MOBILE */
@media(max-width:991px){
    .table-responsive{overflow-x:auto;}
    .services-table{min-width:900px;}
}
/* =========================
   Responsive Improvements
========================= */

@media(max-width:1200px){
    .container{width:92%;}
    .subscription-hero h1{font-size:54px;}
    .subscription-hero p{font-size:21px;}
    .pricing-grid{grid-template-columns:repeat(2,1fr);}
    .photography-section .section-title h2,
    .services-section .section-title h2{font-size:48px;}
    .photo-price{font-size:50px;}
}

@media(max-width:991px){
    .subscription-hero{padding:70px 0 45px;}
    .subscription-hero h1{font-size:44px;}
    .subscription-hero p{font-size:18px;max-width:720px;}
    .pricing-section{padding:30px 0 30px;}
    .pricing-grid{grid-template-columns:repeat(2,1fr);gap:22px;}
    .pricing-card{min-height:auto;}
    .comparison-section{padding:40px 0;}
    .section-title h2{font-size:40px;}
    .photography-section{padding:40px 0;}
    .photography-grid{grid-template-columns:1fr;gap:24px;}
    .photo-card{min-height:auto;}
    .services-section{padding:40px 0 50px;}
}

@media(max-width:767px){
    .container{width:94%;}
    .subscription-hero{padding:55px 0 35px;}
    .subscription-hero h1{font-size:36px;margin-bottom:18px;}
    .subscription-hero p{font-size:16px;line-height:1.7;}
    .plan-toggle{width:100%;max-width:360px;height:auto;min-height:62px;margin:35px auto 28px;padding:6px;}
    .plan-toggle button{font-size:15px;padding:10px 8px;}
    .plan-toggle .active{height:auto;min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:8px 10px;}
    .plan-toggle span{font-size:11px;margin-left:0;padding:4px 8px;}
    .hero-buttons{flex-direction:column;align-items:stretch;gap:14px;margin-top:24px;}
    .btn-outline,
    .btn-gold{justify-content:center;width:100%;padding:14px 20px;}
    .pricing-grid{grid-template-columns:1fr;gap:20px;}
    .pricing-card{padding:28px 22px;}
    .pricing-card h3{font-size:24px;}
    .free-price{font-size:46px;}
    .price{font-size:34px;}
    .renewal-price{font-size:34px;}
    .popular-badge{top:-13px;font-size:12px;padding:6px 14px;white-space:nowrap;}
    .comparison-section{padding:55px 0;}
    .section-title{margin-bottom:28px;}
    .section-title h2,
    .photography-section .section-title h2,
    .services-section .section-title h2{font-size:34px;line-height:1.15;}
    .photography-section .section-title p,
    .services-section .section-title p{font-size:16px;}
    .photo-card{padding:32px 24px;}
    .photo-card h3{font-size:28px;}
    .photo-price{font-size:44px;}
    .card-desc{font-size:15px;line-height:1.7;}
    .photo-card ul li{font-size:15px;gap:10px;}
    .best-for{margin-top:28px;}
    .photo-note,
    .services-note{padding:20px 18px;font-size:14px;}
    .services-footer{margin-top:45px;font-size:14px;}
}

@media(max-width:480px){
    .subscription-hero h1{font-size:31px;}
    .subscription-hero p{font-size:15px;}
    .plan-toggle{max-width:320px;}
    .plan-toggle button{font-size:14px;}
    .pricing-card{padding:26px 20px;}
    .card-tagline{margin-bottom:22px;}
    .free-price{font-size:40px;}
    .price{font-size:30px;}
    .price span{font-size:16px;}
    .renewal-price{font-size:30px;}
    .section-title h2,
    .photography-section .section-title h2,
    .services-section .section-title h2{font-size:30px;}
    .comparison-table{min-width:1000px;}
    .comparison-table thead th,
    .comparison-table td{padding:14px 12px;font-size:13px;}
    .photo-card{padding:28px 20px;}
    .photo-card h3{font-size:25px;}
    .photo-price{font-size:38px;}
    .photo-price span{font-size:15px;}
    .popular-choice{font-size:12px;padding:7px 16px;white-space:nowrap;}
    .services-table{min-width:760px;}
    .services-table thead th{padding:16px 14px;font-size:15px;}
    .services-table tbody td{padding:16px 14px;font-size:14px;}
}
        .subscription-hero h1 {
            color: var(--maroon);
            font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
            margin-bottom: 10px;
        }

        .subscription-hero p {
            color: #555;
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            margin: 0 auto 40px auto;
            line-height: 1.5;
            max-width: 500px;
        }

        /* Toggle Container - Responsive */
        .plan-toggle {
            display: inline-flex;
            background-color: var(--light-bg);
            border: 2px solid var(--border-color);
            border-radius: 100px; /* High value for pill shape */
            padding: 6px;
            position: relative;
            width: 100%; /* Take full width of container */
            max-width: 450px; /* But don't exceed this on desktop */
            box-sizing: border-box;
        }

        .plan-toggle button {
            flex: 1; /* Ensures both buttons take equal 50% width */
            background: transparent;
            border: none;
            padding: 15px 10px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            border-radius: 100px;
            transition: all 0.3s ease;
            color: #333;
            position: relative;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }

        /* Active State */
        .plan-toggle button.active {
            background-color: var(--maroon);
            color: white;
        }

        /* Save Badge */
        .save-badge {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--yellow);
            color: #000;
            font-size: 11px;
            padding: 2px 10px;
            border-radius: 20px;
            border: 1px solid #ccc;
            white-space: nowrap;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* RESPONSIVE QUERIES */
        
        /* Tablets and Phones */
        @media (max-width: 480px) {
            .plan-toggle {
                max-width: 320px; /* Slimmer on small phones */
            }
            .plan-toggle button {
                padding: 12px 5px;
                font-size: 15px; /* Smaller text on mobile */
            }
            .save-badge {
                font-size: 10px;
                bottom: -12px;
            }
        }

        /* Very Small Screens */
        @media (max-width: 320px) {
            .plan-toggle button {
                font-size: 13px;
            }
        }
		
		.pricing-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            width: 100%;
			margin-bottom:50px;
        }

        /* Responsive Grid */
        @media (max-width: 1024px) {
            .pricing-container { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .pricing-container { grid-template-columns: 1fr; }
        }

        /* Card Outer Styling */
        .pricing-container .card {
            border: 3px solid var(--gold);
            border-radius: 45px;
            background: #fff;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 5px; /* Creates the space between gold border and maroon header */
            min-height: 600px;
			text-align:left;
        }

        /* THE MAROON HEADER SHAPE */
        .pricing-container .card-header:first-child {
            background-color: var(--maroon);
            color: white;
            text-align: center;
            padding: 25px 10px;
            /* This creates the "scooped" leaf effect seen in the screenshot */
            border-radius: 40px 40px 5px 110px; 
            margin-bottom: 20px;
			border-bottom-right-radius: 250px 75px;
			border-bottom-left-radius: 50px 50px;
			min-height: 150px;
        }

        .pricing-container .card-header h2 {
            margin: 0;
            font-size: 24px;
            letter-spacing: 1px;
			color:#fff;
        }

        .pricing-container .price {
            font-size: 28px;
            margin: 10px 0 0 0;
            font-weight: bold;
			color: #fff;
        }

        .pricing-container .price span {
            display: block;
            font-size: 14px;
            font-weight: normal;
            margin-top: -5px;
        }

        /* Body Content */
        .pricing-container .card-content {
            padding: 0 20px 20px 25px;
            flex-grow: 1;
            font-size: 14px;
            color: var(--text-dark);
            line-height: 1.4;
			display: flex;
			flex-direction: column;
        }

        .pricing-container .sub-title {
            color: var(--text-grey);
            font-weight: bold;
            margin-bottom: 10px;
            display: block;
        }

        .pricing-container .feature-list {
            list-style: none;
            padding: 0;
            margin: 0 0 20px 0;
        }
		/*

        .pricing-container .feature-list li {
            position: relative;
            padding-left: 15px;
            margin-bottom: 6px;
        }
        .pricing-container .feature-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            font-weight: bold;
        }
		*/

        .pricing-container .bold-label {
            font-weight: bold;
            display: block;
            margin: 15px 0 5px 0;
        }

        .pricing-container .bottom-note {
            font-size: 13px;
            color: var(--text-grey);
            margin-top: auto;
            padding-top: 20px;
        }

        /* Footer Button */
        .pricing-container .card-footer {
            padding: 20px;
            text-align: center;
        }

        .pricing-container .btn {
            display: block;
            width: 90%;
            margin: 0 auto;
            padding: 10px 0;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            font-size: 15px;
            transition: 0.3s;
        }

        /* Maroon Button for Growth/Business/Enterprise */
        .btn-maroon {
            background-color: var(--maroon);
            color: white;
            border: none;
        }
		
		.btn-maroon:hover, .btn-light:hover {
			background-color: #ffcc00;
		}

        /* Light Button for Freemium */
        .btn-light {
            background-color: #f8f8f8;
            color: #333;
            border: 1px solid #ddd;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
		.comparision-btn .btn
		{
			width: 300px;
		}
		.pricing-container .price span.plan-tag {
    margin-top: 5px;
}
.price-value {
    display: contents;
}

.recommeded-badge 
{
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--yellow);
    color: #000;
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    white-space: nowrap;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.plan-toggle button:hover {
    color: white;
    background-color: var(--maroon);
}