/* ===================================
   CSS Variables
   =================================== */
:root {
    --main: #00386C;
    --main-hover: #004C8C;
    --cta: #DCF959;
    --cta-hover: #C0DF35;
    --secondary: #F7F8FC;
    --bckg: #E5F3FF;
    --txt: #1F2B72;
    --txt-light: #FFFFFF;
    --accent-blue: #ffffff1a;
}

/* ===================================
   Global Styles
   =================================== */
body * {
    font-family: 'Sora', sans-serif;
}

main {
    float: left;
    width: 100%;
    position: relative;
    z-index: 9;
    background-color: var(--txt-light);
}

section, footer {
    float: left;
    width: 100%;
}

.dd-wrap {
    display: flex;
    flex-wrap: wrap;
}

a, a:hover {
    transition: .5s ease;
    text-decoration: none;
}
.dd-left {
    padding-left: 50px;
}
.dd-right {
    padding-right: 50px;
}

/* ===================================
   Typography
   =================================== */
.dd-title {
    color: var(--main);
    font-size: 44px;
    font-style: normal;
    font-weight: 500;
    line-height: 52px;
    letter-spacing: -0.5px;
}

.dd-title span {
    color: #787C98;
}

.dd-pretitle {
    color: var(--main);
    font-family: "Roboto Mono";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 27.9px;
    letter-spacing: 2.1px;
}

.dd-subtitle {
    color: var(--main);
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
}

.dd-subtitle span {
    color: #787C98;
}

/* ===================================
   Buttons
   =================================== */
.dd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
	text-transform: uppercase;
    padding: 22px 40px;
    transition: .3s ease;
    cursor: pointer;
}

.main-btn {
    background-color: var(--cta);
    color: var(--txt);
    border: 2px solid var(--cta);
}

.main-btn:hover {
    background-color: var(--cta-hover);
	border: 2px solid var(--cta-hover);
    color: var(--txt);
}

.secondary-btn {
    background-color: var(--main);
    color: var(--txt-light);
}

.secondary-btn:hover {
    background-color: var(--main-hover);
    color: var(--txt-light);
}

.outline-btn {
    background-color: transparent;
    color: var(--txt-light);
    border: 2px solid var(--txt-light);
}

.outline-btn:hover {
    background-color: var(--accent-blue);
    color: var(--txt-light);
}

/* ===================================
   Responsive
   =================================== */
@media screen and (max-width: 1600px) {
    .dd-title {
        font-size: 38px;
        line-height: 48px;
    }
}

@media screen and (max-width: 1199px) {
    .dd-left {
        padding-left: 30px;
    }

    .dd-right {
        padding-right: 30px;
    }

    .dd-title {
        font-size: 35px;
        line-height: 45px;
    }
}

@media screen and (max-width: 767px) {
    .dd-title {
        font-size: 28px;
        line-height: 35px;
    }
}