/*
Theme Name:		 Health & Co 2026
Theme URI:		 #
Description:	 Beautiful theme for Health & Co medical centres.
Author:			 Classic Informatics
Author URI:		 https://www.classicinformatics.com/
Template:		 twentythirteen
Version:		 1.0.0
Text Domain:	 health-and-co-2026
*/

img {
    --radius: 0px;

    border-radius: var(--radius);
}

/* Typography */
h2 {
    margin: 0 0 32px 0;
    font-family: var(--hc-font-display);
    font-size: 56px;
    font-weight: 500;
    line-height: 1.01;
}

h3 {
    margin: 0 0 24px 0;
    font-family: var(--hc-font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.01;
}

p {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

strong {
    font-weight: 700;
}

/* Color classes */
.c-white { color: #fff; }
.c-black { color: #000; }
.c-transparent { color: transparent; }
.c-blue { color: var(--hc-color-blue); }


/* Utility classes */
.t-center { text-align: center; }
.t-right { text-align: right; }



.hc-section {
    width: 100%;
    padding: 80px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hc-section__inner {
    width: min( calc( 100% - 32px ), var( --hc-container-width ) );
    margin: 0px auto;
}

.hc-section__row {
	--gap: 20px;

	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}

.hc-section__col {
	--width: 50%;
	--align-items: flex-start;
	--justify-content: flex-start;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: var(--align-items);
	justify-content: var(--justify-content);

	flex: 0 0 calc(var(--width) - (var(--gap) / 2));
	max-width: calc(var(--width) - (var(--gap) / 2));
}

.hc-section__heading {
    margin: 0 0 32px 0;
    font-family: var(--hc-font-display);
    font-size: 56px;
    font-weight: 500;
    line-height: 1.01;
}

.hc-section__heading h2 {
    margin: 0;
}

.hc-section__heading--center {
    text-align: center;
}

.hc-section__heading--right {
    text-align: right;
}

/* Responsive */
@media (max-width: 900px) {
    h2,
    .hc-section__heading {
        font-size: clamp(34px, 6vw, 48px);
    }

    h3 {
        font-size: 28px;
    }

    .hc-section {
        padding: 56px 0;
    }
}

@media (max-width: 767px) {
    .hc-section__row {
        gap: min(var(--gap), 32px);
    }

    .hc-section__col {
        flex-basis: 100%;
        max-width: 100%;
    }

    .hc-section__col img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    h2,
    .hc-section__heading {
        font-size: 34px;
        margin-bottom: 24px;
    }

    h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .hc-section {
        padding: 44px 0;
    }
}