.banner {
    background: url(./images/0.jpg) center/cover no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    place-content: center;
    position: relative;

    @media(max-width: 1600px) {
        height: 100vh;
    }
}

.banner::after {
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";

    background-color: #000000ba;


    width: 100%;
    height: 100%;
}


.banner .content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.banner .content h1 {
    color: #fff;
    font-size: 70px;
    margin-bottom: 5rem;
    

    @media(max-width: 1440px) {
        font-size: 45px;
        margin: 0 auto;
        margin-bottom: 3rem;
    }

    span {
        color: #f7b629;
    }


}

.banner .content p {
    color: #fff;
    margin-bottom: 3rem !important;
    font-size: 1.4rem;
 
    font-weight: 200;
}
    @media(max-width: 1600px) {
        .banner .content p {
        font-size:1.2rem !important;
         width: 100%;
        max-width: 90%;
        margin: 1rem auto 2rem auto !important;

    }
}
 

.banner .cta-container {
    display: flex;
    justify-content: center;
    gap: 5rem;

    .cta {
        font-weight: 600;
        letter-spacing: .2rem;

        @media(max-width: 1440px) {
            font-size: 15px;
        }

        &:nth-child(1) {
            background-color: #f7b629;
        }

        &:nth-child(2) {
            background-color: #fff;
        }
    }

}


.offerings {
    .content {
        h2 {
            font-size: 50px;
            text-align: center;
            font-weight: normal;
            margin-bottom: 2rem;

            @media(max-width: 1440px) {}
        }

        .card-container {
            display: flex;
            justify-content: center;
            gap: 10rem;

            .card {
                border: 3px solid #2b2b2b;
                padding: 1.5rem;
                border-radius: 1rem;
                position: relative;
                background-color: #fff;

                h3 {
                    font-size: 40px;
                    margin-bottom: 30px;
                                  font-weight: normal;
                }

                li {
                    font-size:1.3rem;
                    margin-left: 50px;
                    margin-bottom: 20px;

                    &:last-child {
                        margin-bottom: 0px;
                    }
                }

                .image {
                    height: 15rem;
                    margin-top: 4rem;

                    img {
                        object-fit: cover;
                    }
                }

                &::after {
                    content: '';
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 100%;
                    height: 100%;
                    background-color: #f7b629;
                    border: 3px solid #2b2b2b;
                    border-radius: 1rem;
                    z-index: -1;
                    margin-top: 1.5rem;
                    margin-left: 1.5rem;
                }
            }
        }
    }
}


.how-it-works {
    .content {
        h2 {
            text-align: center;
            margin-bottom: 5rem;
            font-size: 50px;
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5rem;

            @media(max-width: 1024px){
                grid-template-columns: repeat(2, 1fr);
                gap: 3rem;
            }

            .card {

                padding: 2rem;
                background-color: #dcdcdc;
                border: 3px solid #4b4b4b;
                border-radius: 1rem;

                @media(max-width: 1024px){
                    &:nth-of-type(3){
                        grid-area: 2/1/3/3;
                    }
                }


                h3 {
                    font-size: 35px;
                    font-weight: 700;
                    margin-bottom: 2rem;
                    text-align: center;
                    @media(max-width: 1024px){
                        font-size: 25px;
                    }
                        @media(max-width: 1600px){
                        font-size: 2rem;
                    }
                }
ul{
    padding-left: 0;
}
                li {
                    font-size: 1.3rem;
                    list-style: decimal;
                    margin-left: 2rem;
                    margin-bottom: 3rem;
         @media(max-width: 1600px){
                                    font-size: 1.2rem;
                    list-style: decimal;
                    margin-left: 2rem;
                    margin-bottom: 1rem;
                    }
                    @media(max-width: 1024px){
                        font-size: 18px;
                    }

                    &:last-child {
                        margin-bottom: 0rem;
                    }

                }

                .image {
                    height: 15rem;
                    margin-bottom: 3rem;

                    img {
                        object-fit: cover;
                    }
                }

                p {
                    font-size:1.3rem;
                    display: block;
                    @media(max-width:1600px){
                font-size: 1.2rem;

                    }
                    margin-bottom: 1rem !important;
                }

                .cta {
                    display: flex;
                    justify-content: center;
                    background-color: #2b2b2b;
                    color: #fff;

                }

                &:last-child {
                    background-color: transparent;
                    border: none;
                }
            }
        }
    }
}

.our-services {
    .content {
        h2 {
            text-align: center;
            margin-bottom: 2rem;
            font-size: 4.5rem;
            text-transform: uppercase;
            font-weight: normal;
            letter-spacing: 0.1em;

            @media(max-width: 1024px){
                font-size: 35px;
            }
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4rem;
 
            margin: 0 auto;
            @media(max-width: 1024px){
                grid-template-columns: repeat(3, 1fr);
            }

            .card {
                background-color: #ffffff;
                padding: 2rem;
                border-radius: 1rem;
                text-align: center;
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                border: 2px solid #f7b629;
                height: 450px;
  @media(max-width: 1440px) {
                       height: 380px;
                    }
                      @media(max-width: 720px) {
                       height: auto;
                    }
                .image {
                    margin-bottom: 2rem;
                    height: 5rem;

                    @media(max-width: 1440px) {
                        height: 3.5rem;
                    }

                    svg {
                        height: 100%;
                        width: 100%;
                    }
                }

                h4 {

                    font-weight: normal;
                    font-size: 20px;
                    width: 100%;
                    max-width: 250px;
                    margin: 0 auto;
                    margin-bottom: 1rem;
margin-top: 1rem;
                    @media(max-width: 1440px) {
                        font-size: 12px;
                    }

                }

                hr {
                    display: inline-block;
                    height: 5px;
                    width: 30%;
                    background-color: #2b2b2b;
                    border: none;
                    margin-bottom: 1rem;
                }

                p {
                    font-weight: 300;

                    @media(max-width: 1440px) {
                        font-size: 10px;
                        margin-top: auto;

                    }
                }

                &::after {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    background-color: #f7b629;
                    content: "";
                    height: 80%;
                    width: 100%;
                    border-radius: 1rem;
                    margin-top: 5.2rem;
                    margin-left: 1rem;
                    z-index: -1;

                    @media(max-width: 1440px){
                        margin-top: 4rem;
                        margin-left: 1rem;
                    }
                }
            }
        }

    }

}

.explore {
    .content {
        background-color: #393434;
        text-align: center;
        padding: 50px;
        border-radius: 2rem;

        h2 {
            color: #fff;
            font-size: 50px;
            margin-bottom: 1rem !important;
            font-weight: 400 !important;
            letter-spacing: 0.1em !important;
           @media(max-width: 1024px){
            font-size: 40px;
            margin-bottom: 1rem !important;
           }
        }

        p {
            color: #fff;
          
            font-size: 16px;
            font-weight: 300;
            width: 100%;
            max-width: 85rem;
            margin: 0 auto;
            margin-bottom: 3rem;
            @media(max-width: 1024px){
                font-size: 18px;
                margin-bottom: 2rem !important;
               }
        }

        .cta {
            background-color: #f7b629;
            color: black;
            font-weight: 600;
            letter-spacing: .2rem;
            font-size: 1.3rem;
            
            @media(max-width: 1024px){
                
                padding: 1rem 2rem;
               }
        }
    }
}




@media (max-width: 1440px) {






    .offerings {
        .content {

            .card-container {
                display: flex;
                justify-content: center;
                gap: 5rem;

                .card {
                    h3 {
                        font-size: 20px;
                    }

                    ul {
                        li {
                            font-size: 20px;
                            margin-bottom: .5rem;
                        }
                    }

                    .image {
                        height: 10rem;
                        margin-top: 2rem;
                    }
                }
            }
        }
    }

   


}



@media (max-width: 767px) {



    .banner .cta-container {
        gap: 1rem !important;
    }

    .banner .content h1 {
        margin-bottom: 1rem;
    }

    .banner .content p {
        margin-bottom: 2.5rem;
    }

    .banner .cta-container {
        flex-direction: column;
        gap: 2rem;

        .cta {
            justify-content: center;
        }
    }

    section.offerings .card-container {
        flex-direction: column;
    }

    section.how-it-works .card-container {
        display: flex !important;
        flex-direction: column;
    }

    section.our-services .card-container {
        display: flex !important;
        flex-direction: column;
    }

  

    footer {
        .content {
            flex-direction: column;

            .bratara-logo {
                width: 100%;
            }

            .bratara-info {
                width: 100%;
            }
        }

        .copy-right {
            flex-direction: column-reverse;
            gap: 4rem;

            ul {
                flex-wrap: wrap;
                gap: 1rem;
            }
        }
    }

}