/*------------------------------------------------------------------
[Table of contents]

1. h1
2. h2
3. h3
4. h4
5. p
6. get-started-btn
7. padding-top
8. padding-bottom
9. dotted-img

-------------------------------------------------------------------*/

h1 {
    font-size: 70px;
    color: var(--primary--color);
    line-height: 70px;
}

h2 {
    font-size: 50px;
    line-height: 50px;
}

h3 {
    font-size: 36px;
}

h4 {
    font-size: 24px;
    line-height: 50px;
}

p {
    font-size: 18px;
    line-height: 26px;
    color: var(--text-color);
}

h3 {
    font-size: 36px;
    color: var(--primary--color);
    line-height: 40px;
}

.get-started a {
    padding: 17px 51px 16px 52px;
    background: var(--accent-color);
    display: inline-block;
    font-weight: 500;
    font-size: 18px;
    color: var(--secondary--color);
    text-decoration: none;
    box-shadow: 1px 1px 30px 0px rgb(0 0 0 / 20%);
    border-radius: 0 30px 30px 30px;
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out;
}

.get-started a:hover {
    background: var(--text-color);
    transform: translateY(-8px);
}

.padding-top {
    padding-top: 120px;
}

.padding-bottom {
    padding-bottom: 120px;
}

.generic a {
    padding: 15px 49px 14px 50px;
    display: inline-block;
    font-weight: 500;
    font-size: 18px;
    text-decoration: none;
    border: 2px solid var(--text-color);
    border-radius: 0 30px 30px 30px;
    color: var(--text-color);
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out;
}

.generic a:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: var(--secondary--color);
    transform: translateY(-8px);
}

.genric-heading h2,
.help-right-con h3 {
    font-weight: 700;
    margin-bottom: 28px;
    display: inline-block;
}

.genric-heading h2 span::after,
.help-right-con h3 span::after,
.work-portfolio-box-content h3::after,
.testimonials-content h2 span:after,
.project-con h2 span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 6px;
    background: #b5d3e3;
    bottom: 4px;
    left: 0;
    z-index: -1;
}

.genric-heading p {
    font-weight: 400;
}

.genric-heading {
    margin-bottom: 76px;
}

.dotted-img::before {
    content: "";
    width: 916px;
    height: 659px;
    background: url(../image/dotted-img.png) no-repeat top left;
    background-size: cover;
    position: absolute;
    top: 0;
    left: -495px;
    z-index: -1;
}

.overflow {
    overflow: hidden;
}