/*
Theme Name: Affluora.co Rebrand 3.0
Theme URI: http://affluora.co/
Author: Muhammad Zubair Khan
Author URI: http://zubair.rf.gd/
Description: A custom WordPress theme for Affluora.co.
Version: 1.0
*/

@import url(utils.css);

/* Announcement Bar */
.announcementBar {
    /* border: 3px solid red; */
    /* background: linear-gradient(to right, red -50%, #bf0000, #bf0000, red 150%); */
    font-family: var(--body-font);
    background: linear-gradient(to right, var(--accent2), var(--accent2));
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;

    .para {
        color: var(--accent9);
    }
}

/* Header section */
header {
    /* border: 1px solid red; */
    background-color: var(--accent9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10%;
    /* box-shadow: 0px 0px 180px var(--accent8); */

    /* * {
            border: 1px solid #bf0000;
        } */

    /* Logo lives here */
    .left img {
        /* border: 3px solid red; */
        /* pointer-events: none; */
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
    }

    .center {

        display: flex;
        align-items: center;
        justify-content: center;

        .navElement {
            /* border: 2px solid #bd0000; */
            font-size: 14px;
            font-family: var(--body-font);
            color: var(--clr3);
            text-decoration: none;
            transition: 0.2s;
            padding: 10px 15px;
        }

        .navElement:hover {
            color: white;
        }
    }
}

.hero {
    /* border: 1px solid salmon; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    min-height: 700px;
    max-height: fit-content;
    background-image: radial-gradient(circle at 50% 200%, var(--accent8) 30%, transparent 70%);
    /* border-bottom: 1px solid var(--transWhite2); */

    .heroHeading {
        text-align: center;
    }

    .description {
        text-align: center;
    }

    .buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
}


/* .featuredIn {

    .icons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 25px;

        .icon {
            padding: 7px;
            border-radius: 5px;
            border: 1px solid var(--transWhite2);

            img {
                height: 25px;
            }
        }
    }

} */

.repportSection {
    /* border: 2px solid red; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;

    h2 {
        /* font-size: 24px; */
    }

    .boxes {

        .box {
            width: auto;
            max-width: 300px;
        }
    }

    .logos {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;

        img {
            /* border: 2px solid #bf0000; */
            height: 30px;
        }
    }
}

.advancedFeatures {

    /* Advanced Features */
    .swiper {
        /* border: 2px solid red; */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* padding: 0px 50px; */

        .swiper-button-prev,
        .swiper-button-next {
            color: var(--accent2);
            text-shadow: 0px 0px 12px var(--accent);
        }

        .swiper-wrapper {
            /* border: 2px solid blue; */
            padding: 5px 0px;

            .swiper-slide {
                /* width: 300px; */
                height: 350px;
                background-color: var(--accent10);
                color: white;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
            }
        }
    }
}

/* .stressFreeSupport {

    .imageTextSection {
        border: 2px solid var(--accent);
        border-radius: 15px;
        padding: 25px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 50px;
        background: linear-gradient(to top, var(--accent8) -30%, transparent 80%);

        .imageSection {
            border: none;
            width: fit-content;
            background: none;

            img {
                height: 100%;
            }

        }

        .textSection {
            width: 70%;

            h2 {
                color: var(--accent2);
            }

            .para {
                color: var(--clr4)
            }
        }
    }
} */

.howItWorks {
    /* border: 1px solid limegreen; */

    .boxes {

        .box {
            /* width: 300px; */
            height: 250px;
            background-color: var(--accent10);
            color: white;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;

            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

    }
}

/* Reviews Section Here */
.whatOurUsersSay {

    .reviews {
        /* flex-direction: column; */

        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        max-width: 1500px;

        .review {
            border: 2px solid var(--accent8);
            min-height: fit-content;
            /* min-width: 100%; */
            padding: 25px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 25px;
            border-radius: 25px;
            /* background-color: var(--accent10); */
            background: linear-gradient(to bottom right, var(--accent10) -300%, transparent 90%);

            .leftSection {
                /* border: 2px solid orangered; */

                img {
                    height: 100px;
                }
            }

            .rightSection {
                display: flex;
                align-items: center;
                justify-content: flex-start;

                .reviewHeader {
                    /* border: 2px solid greenyellow; */
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;
                    gap: 15px;
                    flex-direction: column;
                    /* gap: 10px; */

                    h3 {
                        color: var(--accent2);
                        font-weight: 500;
                        letter-spacing: 2px;
                        text-transform: uppercase;
                    }

                    .rating {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 5px;

                        i {
                            /* border: 3px solid red; */
                            /* color: var(--accent1); */
                            font-size: 18px;
                            /* font-weight: 100; */
                            /* font-style: italic; */
                        }

                        .grey {
                            color: var(--accent8);
                        }

                        .pink {
                            color: var(--accent1);
                        }
                    }

                    .reviewText {
                        .paraItalic {
                            color: var(--clr5);
                        }
                    }
                }
            }
        }
    }

}

/* Frequently Asked Questions */
.faqs {
    /* border: 2px solid red; */
    padding: 0px 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;

    .faq {
        /* border: 2px solid var(--accent8); */
        /* background-color: var(--accent10); */
        border-radius: 25px;
        padding: 15px 10%;
        min-width: 80vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 15px;

        .faqHead {
            cursor: pointer;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: 0.3s;

            h3 {
                color: var(--clr5);
                font-size: 18px;
                font-weight: 300;
                letter-spacing: 0px;
            }

            i {
                /* border: 2px solid red; */
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                color: var(--clr5);
                padding: 10px 18px;
                transition: 0.2s;
            }

        }

        .faqHead:hover {
            h3 {
                color: var(--accent2);
            }

            i {
                color: var(--accent2);
            }
        }


        .para {
            font-size: 16px;
            /* border: 2px solid blue; */
            display: none;
            transition: 0.3s;
        }
    }
}

/* Contact Form Here */
.contactSection {
    background-color: var(--accent9);
    min-height: 100vh;

    h2 {}

    .contactForm {
        border: 2px solid var(--accent8);
        border-radius: 15px;
        background: linear-gradient(to right, var(--accent10) -1000%, var(--accent10) 30%);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-width: 100%;
        height: fit-content;
        padding: 35px;
        gap: 60px;
        display: flex;

        .leftSection {
            /* border: 2px solid red; */
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-around;
            gap: 25px;

            img {
                max-width: 300px;
                width: 100%;
            }


        }

        .rightSection {
            width: 50%;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .inputField {
                /* border: 2px solid red; */

                input::placeholder {
                    /* border: 2px solid var(--accent2); */
                    color: var(--transWhite2);
                    font-family: var(--body);
                    font-weight: 100;
                    font-size: 16px;
                    letter-spacing: 2px;
                }

                .submit {
                    border: 2px solid var(--accent8);
                    background-color: var(--accent1);
                    color: var(--clr5);
                    font-size: 18px;
                    text-transform: capitalize;
                    letter-spacing: 2px;
                }

                .submit:hover {
                    background-color: var(--accent2);
                }
            }
        }
    }
}

/* Get Demo Section - Call to Action */
.callToAction {
    /* border: 2px solid red; */
    padding: 80px 0%;

    h2,
    p {
        padding: 0px 10%;
    }

    .calendlyCode {
        width: 100%;
    }
}

/* Footer Here */
footer {
    /* border: 2px solid red; */
    /* border-top: 3px solid var(--accent1); */
    /* background-color: var(--accent10); */
    border-top: 1px solid var(--accent1);
    background: linear-gradient(to bottom, var(--accent) -500%, var(--accent10) 70%);
    padding: 0px 10%;

    .footerHead {
        border-bottom: 1px solid var(--accent);
        padding: 50px 0px;
        display: flex;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;

        .footerHeadLeft {
            /* border: 2px solid red; */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 25px;
            width: 250px;

            .logoContainer {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10px;
                text-decoration: none;

                .slogan {
                    border: 1px solid var(--accent);
                    border-radius: 7px 7px 0px 7px;
                    background-color: var(--accent);
                    width: 100%;

                    p {
                        color: var(--clr5);
                        font-weight: 300;
                        letter-spacing: 1px;
                        font-size: 15px;
                    }
                }
            }

            .footerLogo {
                /* border: 2px solid greenyellow; */
                height: 50px;
                transition: 0.2s;
            }
        }


        .footerHeadRight {

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 15px;
            /* border: 2px solid red; */
            /* max-width: 50%; */

            .footerLinks {
                display: flex;
                flex-direction: column;
                gap: 5px;

                p {
                    color: var(--clr5);
                    font-size: 14px;
                    padding-left: 2px;
                    text-align: justify;
                    /* text-align: justify; */
                }
            }

            .socialIcons {
                /* border: 2px solid red; */
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                /* gap: 25px; */
                color: var(--accent2);
                font-size: 18px;

                a {
                    /* border: 1px Solid deepskyblue; */
                    text-decoration: none;
                    color: var(--accent2);
                    width: 100%;

                    i {
                        /* border-radius: 1000px; */
                        /* background-color: var(--accent8); */
                        /* border: 1px solid var(--accent2); */
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 15px 0px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        transition: 0.3s;
                    }
                }

                i:hover {
                    transform: translateY(-5px);
                }
            }

            .newsLetter {
                display: flex;
                flex-direction: column;
                gap: 25px;

                .inputField {
                    /* border: 2px solid blue; */
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: right;
                    gap: 5px;

                    input {
                        max-width: 80%;
                        color: var(--clr5);
                        font-size: 16px;
                        font-family: var(--body-font);
                    }

                    input::placeholder {
                        color: var(--transWhite2);
                        font-family: var(--body-font);
                    }

                    input:focus {
                        outline: none;
                    }

                    .submit {
                        border-radius: 3px;
                        font-family: var(--body-font);
                        font-size: 16px;
                        background-color: var(--accent2);
                        color: var(--accent8);
                        width: 20%;
                        padding: 16px;
                        border: none;
                    }

                    .submit:hover {
                        background-color: var(--accent3);
                    }
                }
            }
        }
    }

    /* Copyright Text */
    .footerBottom {
        padding: 25px 0px;

        p {
            /* border: 1px solid red; */
            font-size: 14px;
            font-weight: 200;
            color: var(--clr5);

        }
    }

}

@media (max-width: 1023px) {
    .footerHead {
        flex-direction: column;

        .footerHeadLeft {
            width: 100%;
        }

        .footerHeadRight {
            max-width: 100%;
            align-items: center;
            justify-content: center;
        }
    }

    .faqs {
        .faq {
            padding: 15px 0%;
        }
    }
}

@media (max-width: 770px) {
    .contactSection {
        .contactForm {
            /* border: 2px solid red; */
            flex-direction: column;

            .leftSection,
            .rightSection {
                width: 100%;
            }
        }
    }
}

@media (max-width: 767px) {
    .review {
        flex-direction: column;
    }

    .contactSection {
        .contactForm {
            flex-direction: column;

            .leftSection,
            .rightSection {
                width: 100%;
            }
        }
    }

    .inputField {
        flex-direction: column;
    }
}

@media (max-width: 424px) {
    header {
        /* border: 2px solid red; */
        display: flex;
        align-items: center;
        justify-content: center;

        .left {

            a {

                img {
                    /* border: 2px solid pink; */
                    max-height: 30px
                }
            }
        }

    }
}