@import url('base.css');

section.pw-hero-mode-two {
    width: 100%;
    height: 100%;
    background-color: black;
}

    section.pw-hero-mode-two .pw-hero-mode-two-container {
        width: 100%;
        height: 100%;
        min-height: 548px;
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 24px 0;
        gap: 24px;
        align-items: center;
        align-content: center;
    }

        section.pw-hero-mode-two .pw-hero-mode-two-container .caption {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            padding: 24px;
        }

        section.pw-hero-mode-two .pw-hero-mode-two-container .icon {
            width: 64px;
            height: 64px;
            display: grid;
            place-content: center;
            place-items: center;
        }

            section.pw-hero-mode-two .pw-hero-mode-two-container .icon path {
                stroke: white;
            }

        section.pw-hero-mode-two .pw-hero-mode-two-container .caption h1 {
            font-family: Sen-Bold;
            font-size: 48px;
            font-style: normal;
            font-weight: 800;
            line-height: 120%;
            color: white;
        }

        section.pw-hero-mode-two .pw-hero-mode-two-container .caption p {
            color: #FFF;
            font-family: Sen-Regular;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 130%;
        }

        section.pw-hero-mode-two .pw-hero-mode-two-container .caption span {
            color: #FFF;
            font-family: AnekLatin-Regular;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
        }

        section.pw-hero-mode-two .pw-hero-mode-two-container .image,
        section.pw-hero-mode-two .pw-hero-mode-two-container .image img {
            width: 100%;
            height: 100%;
        }

            section.pw-hero-mode-two .pw-hero-mode-two-container .image img {
                object-fit: cover;
            }


/******************************************** TWO COL*/
section.pw-2-col-v2 {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    padding: 48px 0;
    background: var(--reeves-section-grey-one);
}

    section.pw-2-col-v2.alt {
        background: var(--reeves-section-grey-two);
    }

    section.pw-2-col-v2 .pw-2-col-v2-container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
    }

        section.pw-2-col-v2 .pw-2-col-v2-container > div {
            color: black;
        }

            section.pw-2-col-v2 .pw-2-col-v2-container > div * {
                color: black;
            }

        section.pw-2-col-v2 .pw-2-col-v2-container .text {
            padding: 24px;
            max-width: 520px;
            margin: 0px auto;
            order: 2;
        }

            section.pw-2-col-v2 .pw-2-col-v2-container .text ul {
                margin: 0;
                list-style-type: none;
                display: grid;
                gap: 0;
            }

            section.pw-2-col-v2 .pw-2-col-v2-container .text ul li{
               width:100%;
               height:100%;
            }


                section.pw-2-col-v2 .pw-2-col-v2-container .text ul li a {
                    padding: 12px 32px;
                    width: 100%;
                    height: 100%;
                    display: grid;
                    grid-template-columns: auto 24px;
                    text-decoration: none;
                    font-family: AnekLatin-Regular;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 150%;
                    transform-style: preserve-3d;
                    will-change: auto;
                    perspective: 1000px;
                    align-items: center;
                }

                    section.pw-2-col-v2 .pw-2-col-v2-container .text ul li a icon {
                        width: 24px;
                        height: 24px;
                        display: grid;
                        place-content: center;
                        place-items: center;
                        position: relative;

                    }
              

                section.pw-2-col-v2 .pw-2-col-v2-container .text a span {
                    color: inherit !important;
                    padding-inline: 12px;
                }

                section.pw-2-col-v2 .pw-2-col-v2-container .text a icon {
                    display: inline;
                    width: 32px;
                    height: 32px;
                    display: grid;
                    place-content: center;
                    place-items: center;
                }


                section.pw-2-col-v2 .pw-2-col-v2-container .text li a:hover {
                    color: var(--reeves-primary);
                }


                    section.pw-2-col-v2 .pw-2-col-v2-container .text li a:hover icon {
                        transform: rotateX(360deg);
                        transition: all .7s linear;
                    }

            section.pw-2-col-v2 .pw-2-col-v2-container .text .topic {
                font-family: Sen-Regular;
                font-size: 20px;
                font-style: normal;
                font-weight: 500;
                line-height: 120%; /* 24px */
                letter-spacing: 2px;
                text-transform: uppercase;
            }

            section.pw-2-col-v2 .pw-2-col-v2-container .text h2 {
                font-family: Sen-Regular;
                font-size: 40px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%; /* 48px */
                margin-bottom: 32px;
            }

            section.pw-2-col-v2 .pw-2-col-v2-container .text p {
                color: var(--Dark, #333);
                font-family: Sen-Regular;
                font-size: 24px;
                font-style: normal;
                font-weight: 400;
                line-height: 130%; /* 31.2px */
               margin-bottom:24px;
            }


        section.pw-2-col-v2 .pw-2-col-v2-container .image {
            padding: 20px 0;
            position: relative;
            min-height: 390px;
        }

            section.pw-2-col-v2 .pw-2-col-v2-container .image img {
                width: 100%;
                height: calc(100% - 48px);
                object-fit: cover;
                position: absolute;
                top: 24px;
                left: 24px;
                max-height: 340px;
                max-width: 474px;
                z-index: 1;
            }


        section.pw-2-col-v2 .pw-2-col-v2-container.reverse .image-container::after {
            content: '';
            position: absolute;
            top: 50%;
            left: -4px;
            transform: translateY(-50%);
            width: 388px;
            height: 100%;
            border: 4px solid var(--reeves-red);
            z-index: 0;
        }



    section.pw-2-col-v2 .reverse .image .image-container {
        width: 498px;
        height: 388px;
        margin: 0px auto;
        position: relative;
    }


/******************************************** TWO COL END*/


section.pw-cta.single-cat {
    background: #FAFAFA;
}

@media only screen and (max-width:1024px) {

    section.pw-hero-mode-two .pw-hero-mode-two-container {
        grid-template-columns: 1fr;
    }

        section.pw-hero-mode-two .pw-hero-mode-two-container .caption {
            padding: 0px;
        }

        section.pw-hero-mode-two .pw-hero-mode-two-container .image img {
            order: 1;
        }

        section.pw-hero-mode-two .pw-hero-mode-two-container .caption-container {
            order: 2;
        }

        section.pw-hero-mode-two .pw-hero-mode-two-container .caption h1 {
            font-size: 34px;
        }

        section.pw-hero-mode-two .pw-hero-mode-two-container .caption p {
            font-size: 20px;
        }

        section.pw-hero-mode-two .pw-hero-mode-two-container .caption span {
            font-size: 16px;
        }


    section.pw-2-col-v2 .pw-2-col-v2-container .image {
        margin-left: -150px;
    }
}

@media only screen and (max-width:834px) {
   
    section.pw-2-col .pw-2-col-container .text .topic {
        font-size: 18px !important;
    }

    section.pw-2-col .pw-2-col-container .text h2 {
        font-size: 28px !important;
    }

    section.pw-2-col .pw-2-col-container .text p {
        font-size: 20px !important;
    }

    section.pw-2-col .pw-2-col-container .text ul li {
        font-size: 20px !important;
        min-height: 32px;
    }

    section.pw-2-col .pw-2-col-container .text {
        padding: 24px 0;
    }

    section.pw-2-col {
        padding: 56px 0;
    }
}

@media only screen and (max-width:768px) {
    section.pw-2-col-v2 .pw-2-col-v2-container .text .topic {
        margin-bottom: 8px;
    }

    section.pw-2-col-v2 .pw-2-col-v2-container {
        grid-template-columns: 1fr !important;
        max-width: unset;
    }

        section.pw-2-col-v2 .pw-2-col-v2-container .text {
            order: 2;
        }

    section.pw-2-col-v2 .reverse .image .image-container {
        width: 100%;
        height: 240px;
    }

    section.pw-2-col-v2 .pw-2-col-v2-container .image {
        margin-left: unset;
        min-height: unset;
    }

    section.pw-2-col-v2 .reverse .image .image-container {
        height: auto;
    }

    section.pw-2-col-v2 .pw-2-col-v2-container .image img {
        width: calc(100% - 16px);
        height: auto;
        min-height: auto;
        max-height: unset;
        object-fit: cover;
        position: absolute;
        top: 24px;
        max-width: unset;
        left: 16px;
    }


    section.pw-2-col-v2 .pw-2-col-v2-container.reverse .image-container::after {
        top: 40px;
        height: 216px;
        transform: translateY(0%);
        width: 60%;
    }

    section.pw-2-col-v2 .pw-2-col-v2-container.alt .text {
        order: 2;
    }

    section.pw-2-col-v2 .pw-2-col-v2-container.alt .image {
        order: 1;
        margin-right: 0;
    }


    section.pw-2-col-v2 .pw-2-col-v2-container .image {
        margin-bottom: 24px;
    }

    section.pw-2-col-v2 .pw-2-col-v2-container {
        gap: 52px;
    }


        section.pw-2-col-v2 .pw-2-col-v2-container .text {
            width: 100%;
            padding: 0;
        }

        section.pw-2-col-v2 .pw-2-col-v2-container .image img {
            position: relative;
            object-fit: contain;
        }

    section.pw-2-col-v2 .alt .image .image-container {
        height: 100%;
    }

    section.pw-2-col-v2 .reverse .image .image-container, section.pw-2-col-v2 .alt .image .image-container {
        width: 100%;
    }

    section.pw-2-col-v2 .pw-2-col-v2-container.reverse .image-container::after {
        height: calc(100% - 10px) !important;
    }

    section.pw-2-col-v2 .pw-2-col-v2-container.reverse .image-container::after, section.pw-2-col-v2 .pw-2-col-v2-container.alt .image-container::after {
        top: 40px;
        height: calc(100% - 10px) !important;
        transform: translateY(0%);
        width: 70%;
    }

    section.pw-2-col-v2 .pw-2-col-v2-container .text h2 {
        font-size: 28px !important;
        margin-bottom: 20px;
    }

    section.pw-2-col-v2 {
        padding: 50px 0;
    }

        section.pw-2-col-v2 .pw-2-col-v2-container .image {
            padding: 0;
        }
}