*,
*::after,
*::before {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    font-family: var(--font-text);
    background-color: black;
}

body::before {
    display: block;
    content: '';
    height: 70px;
}

:root {
    --white: #eeeeee;
    --blue: #4e4feb;

    --font-heading: "Libre Baskerville";
    --font-text: "Montserrat";
    --font-ioweb: "Alegreya Sans SC";
}


.heading-font {
    font-family: var(--font-heading);
}

.brand-font-family {
    font-family: var(--font-ioweb);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
}


.btn-primary {
    background-color: var(--blue);
}

nav {
    background-color: var(--white);
}

.why-website-card {
    background-color: var(--white);
    border: none;
}

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

.bg-color-blue {
    background-color: #4e4feb;
    color: #eeeeee;
}

.ioweb-description {
    justify-content: flex-start;
}

.customer-contact-form {
    width: 85%;
}

/* curved footer */
.curved-contact {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.curved-contact svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

.shape-fill {
    fill: white;
}


/* border to template images */
img.white-border {
    border: 5px solid #eeeeee;
}

img.yellow-border {
    border: 5px solid #FFED00;
}

img.green-border {
    border: 5px solid #AAC8A7;
}

img.orange-border {
    border: 5px solid #F0E3CA;
}


/* opacity change on hover */
.temp-img {
    transition: ease-out 0.1s;
}

.temp-img:hover {
    opacity: 0.6;
    transform: translate(0, -4px);
}


/* pricing features gap */
.pricing-features li {
    padding-top: 10px;
}

.temp-icon {
    bottom: 2px;
    right: 20px;
}


@media screen and (min-width: 768px) {

    .why-website-card {
        border-bottom: none;
        border-right: 1px solid lightgrey;
    }

    .customer-contact-form {
        width: 50%;
    }

    .view-icon {
        visibility: hidden;
    }

    .price-plan {
        border-bottom: none !important;
    }

    .temp-icon {
        visibility: hidden;
    }
}

@media(min-width: 576px) {
    .temp-icon {
        visibility: hidden;
    }
}