@import url('../font-files/bebas-font.css');
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bebas-font-family: "Bebas Neue", sans-serif;
    --bebas-book-font-family: "Bebas Neue Book", sans-serif;
    --albert-sans-font-family: "Albert Sans", sans-serif;
    --gray-color: #465254;
    --pink-color: #E71B27;


    --bg-gray-color-light: #F2F2F2;
}

body {
    font-size: 16px;
}



p {
    margin: 0;
}


/* first section */
.about-first-section {
    height: 70vh;
    background-color: #FFFFFF;
}

.about-first-section-white-bg {
    flex: 1;
    height: 100%;
    background-color: #FFFFFF;
}

.about-first-section-img-bg {
    flex: 1;
    clip-path: polygon(25% 0, 100% 0%, 100% 100%, 0% 100%);
    background-repeat: no-repeat;
    background-size: cover;

}

.about-first-section-content {
    width: 100%;
    height: inherit;
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.about-first-section-content {
    font-family: var(--albert-sans-font-family);
    font-size: 1.4em;
    padding-left: 7%;
}

.about-first-section-img-border {
    /*border: 2px solid var(--pink-color); */
    padding: .2em;
    width: 100%;
}

.about-first-section-img-border img {
    width: inherit;
}


/* second section */

.about-second-section {
    height: 70vh;
    background-color: #FFFFFF;
}

.about-second-section-gray-bg {
    flex: 1;
    clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
    background-color: var(--bg-gray-color-light);
    background-repeat: no-repeat;
    background-size: cover;
}

.about-second-section-white-bg {
    flex: 1;
}


.about-second-section-content {
    width: 100%;
    height: inherit;
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    font-family: var(--albert-sans-font-family);
    font-size: 1.4em;
}

.about-ref-logo {
    filter: grayscale(.5);
    opacity: .6;
    transition: all .3s ease-in;
    height: 50%;
}


.about-ref-logo:hover {
    filter: grayscale(0);
    opacity: 1;
}


.about-second-section-center-img {
    position: absolute;
    left: 37%;
    top: 40%;
    width: 8em;
}

.about-second-section-center-img img {
    width: 100%;
}


/* about third section */

.about-third-section {
    height: 70vh;
    background-color: #FFFFFF;
}

.about-third-section-red-bg {
    flex: 1;
    clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);
    background-color: var(--pink-color);
    background-repeat: no-repeat;
    background-size: cover;
}

.about-third-section-white-bg {
    flex: 1;
}

.about-third-section-content {
    width: 100%;
    height: inherit;
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    font-family: var(--albert-sans-font-family);
    font-size: 1.3em;
}

.about-third-section-title {
    font-size: .8em;
    justify-content: space-between;
    color: white;
    width: 70%;
}


/* about fourth section */

.about-fourth-section {
    height: 70vh;
    background-color: #FFFFFF;
}

.about-fourth-section-white-bg {
    flex: 1;
    background-repeat: no-repeat;
    background-size: cover;
}

.about-fourth-section-img-bg {
    flex: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.about-fourth-section-content {
    width: 100%;
    height: inherit;
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    font-family: var(--albert-sans-font-family);
    font-size: 1em;
}

.about-fourth-section-title {
    font-size: .8em;
    justify-content: space-between;
    color: white;
    width: 70%;
}


/* about end section */


.about-end-section {
    height: 50vh;
  }
.about-end-section-gray-bg {
    flex: 2;
    height: 100%;
    background-color: #f2f2f2;
    clip-path: polygon(0 0, 94% 0%, 75% 100%, 0% 100%);
  }

  
.about-end-section-white-bg {
    flex: 1;
  }
  

  .about-end-section-content {
    width: 100%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  


@media only screen and (max-width: 1200px) {
    body {
        font-size: 14px;
    }

    .about-first-section {
        height: 75vh;
    }

    .about-second-section-center-img img {
        width: 100%;
    }
    .about-third-section {
        height: 65vh;
        background-color: #FFFFFF;
    }

    .about-fourth-section {
        height: 65vh;
        background-color: #FFFFFF;
    }

    .about-end-section {
        height: 45vh;
      }
}

@media only screen and (max-width: 992px) {
    body {
        font-size: 12px;
    }

    .about-first-section {
        height: 60vh;
    }

    .about-second-section-center-img img {
        width: 100%;
    }

    .about-third-section {
        height: 60vh;
        background-color: #FFFFFF;
    }

    .about-fourth-section {
        height: 60vh;
        background-color: #FFFFFF;
    }

    .about-end-section {
        height: 40vh;
      }


}

@media only screen and (max-width: 768px) {
    body {
        font-size: 12px;
    }
    .about-first-section {
        height: 60vh;
    }

    .about-ref-logo {
        width: 85%;
        height: auto;
    }

    .about-second-section-center-img img {
        width: 100%;
    }

    .about-third-section {
        height: 55vh;
        background-color: #FFFFFF;
    }

    .about-fourth-section {
        height: 55vh;
        background-color: #FFFFFF;
    }

    .about-end-section {
        height: 35vh;
      }
}

@media only screen and (max-width: 576px) {
    body {
        font-size: 12px;
    }

    .about-first-section {
        height:55vh;
    }

    .about-second-section {
        height: 55vh;
    }
    .about-ref-logo {
        width: 85%;
        height: auto;
    }

    .about-second-section-center-img img {
        width: 100%;
    }

    .about-third-section {
        height: 50vh;
        background-color: #FFFFFF;
    }

    .about-fourth-section {
        height: 50vh;
        background-color: #FFFFFF;
    }

    .about-end-section {
        height: 30vh;
      }
}

@media only screen and (max-width: 468px) {
    body {
        font-size: 14px;
    }



    .about-ref-logo {
        width: 85%;
        height: auto;
    }

    .about-second-section-center-img img {
        width: 100%;
    }

    .about-third-section {
        height: 45vh;
        background-color: #FFFFFF;
    }

    .about-fourth-section {
        height: 45vh;
        background-color: #FFFFFF;
    }

    .about-end-section {
        height: 25vh;
      }

}

@media only screen and (max-width: 350px) {
    body {
        font-size: 14px;
    }


    .about-ref-logo {
        width: 85%;
        height: auto;
    }

    .about-third-section {
        height: 40vh;
        background-color: #FFFFFF;
    }

    .about-fourth-section {
        height: 40vh;
        background-color: #FFFFFF;
    }
}