.sf-weather-container {
    display: flex;
    gap: 8px;
    margin: 22px 0;
    width: 100%;
}

.sf-weather-box {
    flex: 1;
    display: flex;
    background: var(--sf-dark-blue);
    height: 280px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
}

.sf-weather-box p {
    color: var(--sf-white);
}

.sf-weather-box:nth-child(2) {
    flex: 2;
    display: flex;
    padding: 12px 16px 12px 28px;
}

.sf-weather-box:nth-child(2) > div:nth-child(2) {
    flex: 1;
}

.sf-weather-box:nth-child(1) {
    flex-direction: column;
    gap: 56px;
}

.sf-weather-box:nth-child(3) {
    flex-direction: column;
    justify-content: start;
    padding: 8px 12px;
    max-width: 340px;
}

.sf-weather-datetime-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.sf-weather-country-title {
    font-size: clamp(17px, 3vw, 30px);
    font-weight: 700;
}

.sf-weather-time {
    font-size: clamp(37px, 4.5vw, 80px);
    font-weight: 700;
}

.sf-weather-date {
    font-size: clamp(10px, 1.2vw, 16px);
    font-weight: 400;
}

.sf-weather-forecast-title {
    font-size: clamp(13px, 1.5vw, 24px);
    font-weight: 700;
    margin-bottom: 4px;
}

.sf-weather-forecast-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline-end: 12px;
}

.sf-weather-forecast-item-info {
    display: flex;
    justify-content: space-between;
}

.sf-weather-forecast-item img {
    width: 45px;
}

.sf-weather-forecast-temp {
    font-family: "Poppins", serif;
    font-size: clamp(12px, 1.3vw, 18px);
    font-weight: 600;
}

.sf-weather-forecast-date {
    font-family: "Poppins", serif;
    font-size: clamp(10px, 0.8vw, 14px);
    font-weight: 600;
    flex: 1;
    text-align: end;
}

.sf-weather-forecast-temp-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0.8;
}

.sf-current-weather-temp-container {
    display: flex;
    flex-direction: column;
}

.sf-current-weather-sunrise-container img {
    width: 40px;
}

.sf-current-weather-temp {
    font-size: clamp(38px, 4vw, 68px);
    font-weight: 700;
}

.sf-current-weather-feels {
    font-size: clamp(12px, 1.2vw, 17px);
    font-weight: 700;
    opacity: 0.8;
    margin-bottom: 20px;
    margin-top: 6px;
}

.sf-current-weather-feels span {
    font-size: clamp(14px, 1.6vw, 23px);
}

.sf-current-weather-sunrise-container {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.sf-current-weather-sunrise-time-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.sf-current-weather-sunrise-title,
.sf-current-weather-sunrise-time {
    font-family: "Poppins", serif;
    font-weight: 600;
}

.sf-current-weather-sunrise-title {
    font-size: clamp(10px, 1.1vw, 17px);
}

.sf-current-weather-sunrise-time {
    font-size: clamp(8px, 0.8vw, 14px);
}

.sf-current-weather-general-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-inline-start: 30px;
}

.sf-current-weather-general-container > img {
    width: clamp(100px, 20vw, 175px);
}

.sf-current-weather-general-container > p {
    font-size: clamp(14px, 1.5vw, 25px);
    font-weight: 700;
    text-align: center;
}

.sf-current-weather-details-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.sf-current-weather-details-container > div {
    display: flex;
    width: 100%;
    gap: 14px;
}

.sf-current-weather-details-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 96px;
    gap: 12px;
}

.sf-current-weather-details-item > img {
    width: clamp(28px, 3vw, 50px);
}

.sf-current-weather-details-item > p {
    font-family: "Poppins", serif;
    text-align: center;
}

.sf-current-weather-details-value {
    font-size: clamp(12px, 1.2vw, 17px);
    font-weight: 600;
}

.sf-current-weather-details-title {
    font-size: clamp(9px, 1vw, 14px);
    font-weight: 500;
    margin-top: 6px;
}

@media screen and (max-width: 1200px) {
    .sf-weather-container {
        flex-wrap: wrap;
    }
    .sf-weather-box {
        order: 2;
    }
    .sf-weather-box:nth-child(2) {
        order: 1;
        min-width: 100%;
    }
    .sf-current-weather-details-item {
        width: 82px;
    }
    .sf-weather-box:nth-child(3) {
        justify-content: center;
    }
}

@media screen and (max-width: 800px) {
    .sf-current-weather-sunrise-container img {
        width: 32px;
    }
    .sf-current-weather-details-item {
        width: 72px;
    }
}

@media screen and (max-width: 680px) {
    .sf-current-weather-details-container > div {
        gap: 0;
    }
    .sf-current-weather-details-item {
        width: 63px;
    }
    .sf-current-weather-general-container {
        padding-inline-start: 0;
    }
    .sf-current-weather-sunrise-container img {
        width: 23px;
    }
    .sf-weather-box {
        height: 205px;
    }
    .sf-weather-box:nth-child(2) {
        height: fit-content;
    }
    .sf-current-weather-general-container {
        gap: 4px;
    }
    .sf-weather-forecast-item img {
        width: 34px;
    }
    .sf-weather-box:nth-child(1) {
        gap: 32px;
    }
}

@media screen and (max-width: 480px) {
    .sf-weather-box:nth-child(2) {
        padding: 10px 6px 10px 16px;
    }
    .sf-weather-box {
        height: 184px;
    }
    .sf-weather-box:nth-child(2) {
        height: fit-content;
    }
    .sf-weather-forecast-item img {
        width: 28px;
    }
    .sf-weather-box:nth-child(3) {
        padding: 4px 8px;
    }
    .sf-weather-forecast-item {
        padding-inline-end: 2px;
    }
    .sf-weather-forecast-temp-container {
        flex: 0.6;
    }
    .sf-weather-forecast-temp {
        font-size: 9px;
    }
}

@media screen and (max-width: 440px) {
    .sf-weather-forecast-date {
        font-size: 8px;
    }
}

@media screen and (max-width: 380px) {
    .sf-current-weather-general-container > img {
        width: 80px;
    }
    .sf-current-weather-details-item {
        width: 53px;
    }
    .sf-weather-forecast-item img {
        width: 24px;
    }
    .sf-weather-box:nth-child(1),
    .sf-weather-box:nth-child(3)
    {
        height: 168px;
    }
    .sf-weather-container {
        gap: 5px;
    }
}