/* Grid layout: 4 columns, 2 rows (total 8 posts) */
.post-list-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 80px auto;
}

/* Card style */
.post-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.post-item:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.post-item img {
    width: 100%;
/*     height: 150px; */
/*     object-fit: cover; */
    display: block;
	padding: 20px;
}

.post-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-content h2 {
    font-size: 18px;
    margin: 0 0 10px;
    flex-shrink: 0;
}

.post-content h2 a {
    text-decoration: none;
    color: #000;
}

.post-content p {
    margin: 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-content a.read-more {
    margin-top: 15px;
    text-decoration: none;
    font-weight: 500;
}

.read-more {
    background-color: #027264;
    color: white !important;
    padding: 4px 10px;
    font-size: 18px;
    width: max-content;
    box-shadow: 0 4px 10px rgba(70, 40, 40, 0.3);
}
.post-content a.read-more:hover {
    text-decoration: underline;
}

.wrapper { 
    max-width: 1300px; 
    margin: 0 auto; 
}

.pagination {
    text-align: center;
    margin: 30px 0;
    display: flex;          /* Use flex to keep them in a neat line */
    justify-content: center; /* Centers the flex items */
    gap: 5px;               /* Consistent spacing between items */
}

/* Target both links and the current span */
.pagination a, 
.pagination span {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #0073aa;
    display: inline-block; /* Ensures padding/borders apply correctly */
}

/* Style for the active page (which is a span) */
.pagination .current {
    background: #027264;
    color: #fff;
    border-color: #027264;
}

.pagination a:hover {
    background: #005177;
    color: #fff;
    border-color: #005177;
}

/* Responsive: 2 columns on tablets, 1 column on mobile */
@media (max-width: 1024px) {
    .post-list-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .post-list-container {
        grid-template-columns: 1fr;
    }
}

 .floating-btn {
			position: fixed;
			bottom: 20px;
			/* Align with left edge of 1300px wrapper */
			left: calc((100vw - 1300px) / 2 + 20px); 
			background-color: #00796b;
			color: white;
			padding: 9px 15px;
			border-radius: 50px;
			text-decoration: none;
			font-size: 18px;
			width: max-content;
			font-weight: bold;
			box-shadow: 0 4px 10px rgba(70, 40, 40, 0.3);
			z-index: 9999;
			transition: 0.3s;
			border: 2px solid #fff;
		}

		.floating-btn:hover {
			background-color: #d3f9e9;
			color: #333;
		}

		/* Mobile responsiveness for screens narrower than wrapper */
		@media (max-width:1300px) {
			.floating-btn {
				left: 20px; /* Small padding from the screen left */
				width: auto;
			}
		}

		@media (max-width:430px) {
			.floating-btn {
				width: 80%; /* Full width on very small screens */
				text-align: center;
			}
		}


        .table-note-paragraph {
            padding: 30px;
            border-top: 1px solid #00796b4a;
        }



        .flex-container-2 {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .flex-container-2>section {
            flex: 1 1 45%;
            min-width: 300px;
        }


        @media (max-width: 575px) {
            .gallery {
                flex: 1 1 160px !important;
                min-width: 160px;
            }

        }

        @media (min-width: 1024px) {
            .flex-container-2 {
                flex-wrap: nowrap;
            }
        }

        @media (max-width: 1023px) {
            .flex-container-2>section {
                flex: 1 1 100%;
            }
        }

        @media (max-width: 600px) {
            .flex-container-2>section {
                flex: 1 1 100%;
            }
        }


        #gallery {
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        #gallery .section-title h2 {
            text-align: left;
            margin-bottom: 20px;
            font-family: Arial, sans-serif;
        }


        @media (min-width: 890px) {
            #gallery .gallery {
                display: flex;
                overflow-x: auto;
                gap: 15px;
                padding-bottom: 10px;
                scroll-behavior: smooth;
                justify-content: center;
            }
        }




        @media (max-width: 890px) {

            #gallery {
                display: flex;
                flex-direction: column;
                width: 100%;

            }

        }






        #gallery .gallery {
            display: flex;
            overflow-x: auto;
            gap: 15px;
            padding-bottom: 10px;
            scroll-behavior: smooth;
            justify-content: center;
        }


        #gallery .gallery::-webkit-scrollbar {
            display: none;
        }

        #gallery .gallery {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }


        #gallery .gallery-item {
            flex: 0 0 auto;
            width: 250px;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.3s;
        }

        #gallery .gallery-item img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Hover effect */
        #gallery .gallery-item:hover {
            transform: scale(1.05);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            #gallery .gallery-item {
                width: 180px;
            }
        }

        @media (max-width: 480px) {
            #gallery .gallery-item {
                width: 140px;
            }
        }





        .description {
            padding: 80px 0%;

        }

        .description p {
            color: #555;
            font-size: 16px;
            line-height: 1.8;
            max-width: 100%;
            margin: 0 auto;
        }

        @media(max-width:768px) {
            .description {
                padding: 50px 5%;
                /* margin: 15px 0; */
            }

            .description p {
                font-size: 14px;
            }
        }

        /* .why-buy {
            padding: 80px 10%;

        } */

        .why-buy h1 {
            font-size: 36px;
            color: #006156;
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

        .why-buy h1::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 80px;
            height: 4px;
          background-color: #00796b ;
            border-radius: 2px;
        }

        .why-buy p {
            color: #555;
            margin: 15px 0;
            font-size: 16px;
            line-height: 1.8;
        }

        .why-buy ul {
            margin: 25px 0 25px 25px;
            list-style: none;
        }

        .why-buy ul li {
            margin-bottom: 12px;
            color: #555;
            padding-left: 25px;
            position: relative;
        }

        .why-buy ul li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #00796b;
            font-weight: 700;
        }

        @media(max-width:768px) {
            .why-buy {
                padding: 50px 5%;
                margin: 15px 0;
            }

            .why-buy h1 {
                font-size: 26px;
            }
        }



        .hero {
          background-color: #00796b ;
            color: white;
            padding: 100px 10%;
            text-align: center;
            position: relative;
            overflow: hidden;
			width: 100%;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 500px;
            height: 500px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }

        .hero h1 {
            font-size: 42px;
            margin-bottom: 25px;
            font-weight: 700;
            letter-spacing: -1px;
            position: relative;
            z-index: 1;
        }

        .hero p {
            max-width: 750px;
            margin: auto;
            font-size: 16px;
            line-height: 1.9;
            position: relative;
            z-index: 1;
        }

        .hero button {
            margin-top: 40px;
            padding: 15px 40px;
            border: none;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            color: #333;
            border-radius: 50px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
            position: relative;
            z-index: 1;
        }

        .hero button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(255, 215, 0, 0.4);
        }

        .section-title {
            text-align: left;
            margin-bottom: 60px;
        }

        .section-title h2 {
            font-size: 36px;
            color: #006156;
            font-weight: 700;
            position: relative;
            display: inline-block;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 35%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
          background-color: #00796b ;
            border-radius: 2px;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
		 #features {
			margin-bottom: 50px;
        }

        .feature-card {
            background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
            padding: 15px;
            border-radius: 16px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
            border: 1px solid rgba(102, 126, 234, 0.1);
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #00796b 0%, #d3f9e9 100%);
        }

        .feature-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px rgba(102, 126, 234, 0.25);
        }

        .feature-card h4 {
            margin-bottom: 15px;
            color: #00796b;
            font-size: 20px;
            font-weight: 600;
        }

        .feature-card p,
        .feature-card ul {
            color: #555;
			padding:10px;
        }

        .content-text {
            max-width: 100%;
            margin: auto;
        }

        .content-text h4 {
            margin-top: 35px;
            color: #00796b;
            font-size: 22px;
            font-weight: 600;
        }

        .content-text ul {
            margin: 20px 0 20px 25px;
        }

        .content-text ul li {
            margin-bottom: 10px;
            color: #555;
        }

        .table-wrapper {
            overflow-x: auto;
            margin-top: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
        }

        table th,
        table td {
            padding: 20px;
            text-align: left;
        }

        table th {
          background-color: #00796b ;
            color: white;
            font-weight: 600;
        }

        table tr {
            transition: all 0.3s ease;
        }

        table tr:nth-child(even) {
            background: rgba(102, 126, 234, 0.05);
        }

        table tr:hover {
            background: rgba(102, 126, 234, 0.1);
        }

        table td {
            color: #006156;
        }

		.faq {
			max-width: 100%;
		}

		.faq-item {
			padding:0;
			background: white;
			margin-bottom: 20px;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
			transition: all 0.3s ease;
			border-left: 4px solid #00796b;
		}

		.faq-item:hover {
			box-shadow: 0 12px 35px rgba(102, 126, 234, 0.2);
		}

		.faq-question {
			margin:0 !important;
			font-size:20px !important;
			padding: 15px 20px;
			cursor: pointer;
			background-color: #00796b;
			color: white !important;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: all 0.3s ease;
		}

		.faq-question::after {
			content: '+';
			font-size: 24px;
			font-weight: 300;
			transition: transform 0.3s ease;
		}

		.faq-item.active .faq-question::after {
			transform: rotate(45deg);
		}

		.faq-item p {
			max-height: 0;
			overflow: hidden;
			padding: 0 20px;
			background: #f9fbff;
			color: #555;
			line-height: 1.8;
			opacity: 0;
			transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
		}

		.faq-item.active p {
			padding: 20px;
			max-height: 500px; /* adjust if needed */
			opacity: 1;
		}

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

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



        @media(max-width:768px) {
          

            .hero {
                padding: 60px 5%;
            }

            .hero h1 {
                font-size: 28px;
            }

           .section{
        max-width: 100%;
        padding: 30px 15px;
        margin-bottom: 50px;
    }
            .section-title h2 {
                font-size: 26px;
            }

            .features {
                grid-template-columns: 1fr;
            }

        }



   

        .flex-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }


        .description {
            flex: 1 1 300px;
            min-width: 300px;
        }

        /* Gallery styling */
        .gallery {
            flex: 1 1 300px;
            min-width: 300px;
            overflow: hidden;
            position: relative;
        }

        .gallery-item {
            width: 100%;
            display: none;
            /* hide all by default */
        }

        .gallery-item img {
            width: 100%;
            display: block;
        }

        /* Section title */
        .section-title h2 {
            margin-bottom: 10px;
        }

        /* Desktop: flex items in a row */
        @media (min-width: 1024px) {
            .flex-container {
                flex-wrap: nowrap;
            }
        }