/*!
Theme Name: Blocksy
Theme URI: https://creativethemes.com/blocksy/
Author: CreativeThemes
Author URI: https://creativethemes.com
Description: Blocksy is a blazing fast and lightweight WordPress theme built with the latest web technologies. It was built with the Gutenberg editor in mind and has a lot of options that makes it extendable and customizable. You can easily create any type of website, such as business agency, shop, corporate, education, restaurant, blog, portfolio, landing page and so on. It works like a charm with popular WordPress page builders, including Elementor, Beaver Builder, Visual Composer and Brizy. Since it is responsive and adaptive, translation ready, SEO optimized and has WooCommerce built-in, you will experience an easy build and even an increase in conversions.
Version: 2.0.90
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Copyright: (c) 2019 CreativeThemes.
Requires at least: 6.5
Requires PHP: 7.0
Tested up to: 6.7
Text Domain: blocksy
Blocksy Minimum Companion Version: 2.0.74-beta1
Tags: blog, e-commerce, wide-blocks, block-styles, grid-layout, one-column, two-columns, three-columns, four-columns, right-sidebar, left-sidebar, translation-ready, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments, buddypress, rtl-language-support, news
*/

.footer-left ul,
.nav-menu ul li {
    list-style: none
}

.contact-info a,
.nav-menu ul li a,
a:focus,
a:hover {
    text-decoration: none
}

.content-section-center .content,
.email-section .inner,
.feature-box,
.navigation-dots {
    text-align: center
}

:root {
    --primary: #db0632;
    --dark-primary: #9a0124;
    --secondary: #d3e2fd;
    --darkBlue: #1a3048;
    --success: #76bd1d;
    --white: #ffffff;
    --warning: #e67d3c;
    --danger: #c8444b;
    --light: #f5f5f5;
    --body: #f2f3f9;
    --light-blue: #eef5ff;
    --light-beige: #fdf6ec;
    --light-cyan: #eefaff;
    --light-purple: #f6f1ff;
    --light-green: #eaffea;
    --light-primary: #fff7f8;
}

body {
    font-family: Poppins, sans-serif;
    background-color: var(--body);
    color: var(--darkBlue);
    top: 0 !important
}

.top-bar {
    padding: 10px 0;
    background: var(--white)
}

.logo img {
    max-height: 77px
}

.slider-section {
    position: relative;
    padding: 10px 0 5px
}

.slider {
    position: relative;
    width: 100%;
    max-height: 500px;
    overflow: hidden
}

.slides .slide {
    display: none;
    position: relative;
    width: 100%
}

.slide img {
    width: 100%;
    height: auto
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5
}

.navigation-dots {
    margin-top: 10px
}

.navigation-dots .manual-btn {
    height: 12px;
    width: 12px;
    display: inline-block;
    background-color: var(--secondary);
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color .3s
}

.navigation-dots .manual-btn.active {
    background-color: var(--primary)
}

.content-section {
    padding: 60px 0;
    background-color: var(--white);
    border-bottom: 1px solid var(--light)
}

.light-bg {
    background: hsl(86.63deg 73.39% 42.75% / 18%)
}

.light-orange {
    background-color: rgb(230 125 59 / 15%)
}

.content h2 {
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 600
}

.content li,
.content p {
    color: var(--darkBlue);
    font-size: 1.1rem;
    line-height: 32px
}

.content-section-center h3,
.panel-section .panel-heading .title .panel-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary)
}

.content-section-center,
.email-section {
    padding: 30px 0
}

.content-section-center .content h2 {
    font-size: 3rem
}

.content-section-center .content p {
    font-size: 1.3rem
}

.content-section-center ul {
    padding-left: 20px
}

ul.contact-info {
    list-style-type: none;
    padding: 0
}

ul.contact-info li {
    font-size: 1.1rem
}

.contact-info a:hover {
    text-decoration: underline
}

ul {
    text-align: left
}

ul li {
    margin-bottom: 10px
}

.next,
.prev {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -29px;
    padding: 16px;
    color: var(--white) !important;
    font-weight: 700;
    font-size: 30px;
    transition: .6s;
    border-radius: 0 3px 3px 0;
    user-select: none;
    text-decoration: none !important;
    background-color: rgba(0, 0, 0, .2);
    opacity: 0
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px
}

.slider:hover .next,
.slider:hover .prev {
    opacity: 1
}

.footer {
    padding: 40px 0;
    font-family: Arial, sans-serif
}

.footer-left ul {
    padding: 0
}

.footer-left li {
    margin-bottom: 15px;
    font-size: 14px
}

.footer-left strong {
    color: #333
}

#mc_embed_signup form {
    margin: 0;
    max-width: 500px
}

#mc_embed_signup .mc-field-group {
    padding-bottom: 1%
}

#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
    background: 0 0
}

#mc_embed_signup .button {
    margin-bottom: 0;
    border-radius: 30px;
    height: 42px;
    margin-left: 10px
}

#mc_embed_signup .mc-field-group input {
    padding: 8px 9px;
    border-radius: 25px
}

.email-section .inner {
    max-width: 500px;
    margin: 0 auto
}

.email-section .inner h5,
.feature-box-container,
.feature-box-container .col-md-2 {
    margin-bottom: 20px
}

.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.goog-logo-link,
.goog-te-gadget .VIpgJd-ZVi9od-l4eHX-hSRGPd,
body>.skiptranslate {
    display: none !important
}

.goog-te-combo {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: .375rem .75rem;
    font-size: 1rem;
    color: #495057;
    cursor: pointer
}

.goog-te-gadget .goog-te-combo {
    margin: 0
}

.goog-te-combo:hover {
    background-color: #f8f9fa
}

#google_translate_element {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

#mce-responses {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important
}

.nav-menu ul {
    display: flex;
    gap: 20px
}

.nav-menu ul li a {
    color: #333;
    font-weight: 700;
    padding: 5px 10px
}

.nav-menu ul li a.active,
.nav-menu ul li a:hover {
    color: var(--primary)
}

.menu-toggle {
    display: none;
    background: 0 0;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin-left: 15px
}

.feature-box {
    padding: 15px;
    border-radius: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9e9e9;
    cursor: pointer
}

.feature-box h6 {
    font-weight: 700;
    margin-bottom: 0;
    color: var(--darkBlue)
}

.light-blue {
    background-color: var(--light-blue)
}

.light-beige {
    background-color: var(--light-beige)
}

.light-cyan {
    background-color: var(--light-cyan)
}

.light-purple {
    background-color: var(--light-purple)
}

.light-green {
    background-color: var(--light-green)
}

.light-red {
    background-color: var(--light-primary)
}

a:focus,
a:hover {
    outline: 0
}

#accordion .panel {
    border: none;
    border-radius: 5px;
    box-shadow: none;
    margin-bottom: 10px;
    background: 0 0
}

#accordion .panel-heading {
    padding: 0;
    border: none;
    border-radius: 5px;
    background: 0 0;
    position: relative
}

#accordion .panel-body {
    padding: 20px 30px;
    background: rgba(0, 0, 0, .1);
    font-size: 15px;
    color: #fff;
    line-height: 28px;
    border-top: none;
    border-radius: 5px
}

.panel-section {
    padding: 25px;
    margin-bottom: 25px !important
}

.panel-section.light-blue {
    background: var(--light-blue) !important
}

.panel-section.light-beige {
    background-color: var(--light-beige) !important
}

.panel-section.light-cyan {
    background-color: var(--light-cyan) !important
}

.panel-section.light-purple {
    background-color: var(--light-purple) !important
}

.panel-section.light-green {
    background-color: var(--light-green) !important
}

.panel-section.light-red {
    background-color: var(--light-primary) !important
}

.panel-section .panel-heading .title p {
    line-height: 28px
}

.panel-section .panel-heading .title .panel-title {
    margin-bottom: 13px
}

.panel-section .panel-collapse {
    border-top: 1px solid #1a304833
}

.panel-section .panel-collapse .panel-body {
    padding: 0 !important;
    background: 0 0 !important
}

.panel-section .panel-collapse .panel-body a,
.panel-section .panel-collapse .panel-body h2,
.panel-section .panel-collapse .panel-body p {
    color: var(--darkBlue);
    font-size: 1rem
}

.panel-section .panel-collapse .panel-body p {
    margin-bottom: 18px
}

.panel-section .panel-collapse .panel-body h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 28px;
    margin-bottom: 13px
}

.panel-section .panel-collapse .panel-body .sc {
    margin-top: 28px
}

.panel-section .panel-collapse .panel-body .sc h2 {
    margin-bottom: 0;
    margin-top: 0
}

.panel-section .panel-collapse .panel-body a,
.panel-section .panel-collapse .panel-body a h2 {
    color: var(--primary);
    margin-bottom: 0
}

.panel-section .panel-collapse .panel-body .sc a h2 {
    margin-top: 0;
    margin-bottom: 13px
}

.panel-section .panel-heading {
    align-items: start
}

.panel-section .panel-toggle-btn {
    background-color: var(--primary);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    min-width: 30px;
    min-height: 30px;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    padding-top: 2px;
    color: var(--white)
}

@media (max-width:768px) {

    .content-section-center h3,
    .next,
    .panel-section .panel-heading .title .panel-title,
    .prev {
        font-size: 22px
    }

    .content-section-center .content h2 {
        font-size: 2rem
    }

    .content-section-center .content p {
        font-size: 1.1rem
    }

    .content h2 {
        font-size: 20px
    }

    .content a,
    .content li,
    .content li strong,
    .content p {
        font-size: 14px;
        line-height: 24px
    }

    .logo img {
        max-height: 60px
    }

    .next,
    .prev {
        padding: 10px
    }

    .slider-section {
        padding: 5px 0 0
    }

    .navigation-dots {
        margin-top: 0
    }

    .navigation-dots .manual-btn {
        height: 8px;
        width: 8px;
        margin: 0 2px
    }

    .footer-left {
        width: 100%;
        margin-bottom: 20px
    }

    .menu-toggle {
        display: block
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 77px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
        padding: 10px;
        border-radius: 5px;
        width: 95%;
        left: 0;
        right: 0;
        margin: 0 auto
    }

    .nav-menu.active {
        display: block;
        z-index: 1
    }

    .nav-menu ul {
        flex-direction: column;
        gap: 10px
    }

    .nav-menu ul li {
        text-align: center
    }

    .panel-section .panel-toggle-btn {
        width: 25px;
        height: 25px;
        min-width: 25px;
        min-height: 25px
    }
}



.circle-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 350px;
    align-items: center;
    padding-top: 25px
}

.circle {
    border: 5px solid var(--primary);
    border-radius: 50%;
    width: 190px;
    height: 190px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 10px;
    font-size: 14px;
    padding: 10px;
    color: var(--primary);
}

/* Zig-Zag Effect */
.circle:nth-child(odd) {
    align-self: flex-start;
}

.circle:nth-child(even) {
    align-self: flex-end;
}

@media (max-width: 600px) {
    .circle {}
}