/*
Theme Name: Energy Visualization
Author: Portalworks
Version: 1.0
*/

@font-face {
    font-family: "Ambit";
    src: url("assets/fonts/Ambit/Ambit-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Ambit";
    src: url("assets/fonts/Ambit/Ambit-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

:root {
    --primary-font: "Ambit", sans-serif;
    --lighter-background: #F5EFE7;
    --darker-background: #DFCDB6;
    --text-color: #000000;
}

.landscape {
    width: 1920px;
    height: 1080px;
}

.bg-lighter {
    background-color: var(--lighter-background);
}

.bg-darker {
    background-color: var(--darker-background);
}

.header {
    height: 137px;
}

.title, .section-title, .subtitle {
    font-family: var(--primary-font);
    font-weight: 700;
    line-height: 113%;
    color: var(--text-color);
}

.title {
    font-size: 48px;
}

.section-title {
    font-size: 32px;
}

.text {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 24px;
    line-height: 113%;
    color: var(--text-color);
}

.logo {
    max-width: 131px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heading {
    padding-left: 60px;
    padding-right: 81px;
}

.date {
    font-family: var(--primary-font);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.05px;
    color: var(--text-color);
}

.time {
    font-family: var(--primary-font);
    font-size: 64px;
    line-height: 1;
    color: var(--text-color);
}

.left-content {
    width: 644px;
    border-right: 8px solid white;
}

.right-content {
    width: 1276px;
}

.calculations, .actual-content {
    height: 850px;
}

.section-heading {
    height: 93px;
}

.actual-content {
    padding: 65px 50px 30px 45px;
}

.sun {
    width: 200px;
    height: 200px;
}

.panel {
    width: 253px;
    height: 142px;
    margin-top: -30px;
    margin-right: 38px;
}

.actual-content img {
    max-width: 100%;
    max-height: 100%;
}

.sun:after {
    content: url("assets/images/line-right.png");
    position: absolute;
    top: 50%;
    left: 212px;
    width: 107px;
    height: 3px;
}

.current-energy {
    max-width: 390px;
    margin-top: 23px;
    margin-left: 12px;
}

.building {
    width: 243px;
    height: 122px;
    margin-top: 48px;
    margin-right: 13px;
}

.building:after {
    content: url("assets/images/line.png");
    position: absolute;
    top: -100%;
    left: 50%;
    width: 107px;
    height: 3px;
}

.tower {
    max-width: 146px;
    max-height: 211px;
    width: auto;
    height: auto;
    object-fit: contain;
    bottom: 30px;
}

.tower:after {
    content: url("assets/images/line-left.png");
    position: absolute;
    top: 66px;
    left: 100%;
    width: 107px;
    height: 3px;
    margin-left: 39px;
}

.bottom-part {
    border-top: 8px solid white;
}

.top-part {
   padding: 45px 23px 23px 75px;
   height: 390px;
}

.co2-total {
    max-width: 400px;
}

.top-part-image {
    width: 220px;
    height: 147px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-part-image img {
    max-width: 100%;
    max-height: 100%;
}

.bottom-part {
    padding: 50px 35px 50px 35px;
	height: 460px;
}

.title-bottom {
    max-width: 908px;
}

.appliances {
    height: 235px;
    background-image: url("/wp-content/uploads/2025/03/Vector-1.png");
    background-repeat: no-repeat;
    background-position: center 35px;
}

#appliances {
    width: fit-content;
    gap: 17px;
    left: 50%;
    transform: translateX(-50%);
}

.appliance:before {
    top: -215px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.appliance {
    width: auto;
    height: auto;
}

.disclaimer {
	font-size: 16px;
}