body {
    margin: 0;
    padding: 0;
    font-family: "Arial";
    background-color: #f8f6f4;
    overflow-x: hidden;
}

h1 {
    font-size: 36;
}

@font-face {
    font-family: "Canva Sans";
    src: url("../../fonts/Canva-Sans/Desktop/CanvaSans-Regular.otf")format("opentype")
}

@font-face {
    font-family: "Canva Sans Bold";
    src: url("../../fonts/Canva-Sans/Desktop/CanvaSans-Bold.otf")format("opentype")
}

.head {
    gap: 25px;
    align-items: center;
    display: flex;
    flex-direction: row;
}


    .head h1 {
        font-size: 36px;
        font-weight: normal;
        font-family: "Canva Sans Bold";
    }

.line {
    background-color: #0d55e4;
    height: 45px;
    width: 4px;
}

/*NAVIGATION NAVIGATION NAVIGATION NAVIGATION*/
/*blue=#0d55e4 red=#cd1112 lighter red=#cd1112*/
header {
    min-height: 95px;
}

nav {
    min-width: 100%;
    top: 0;
    position: fixed;
    display: flex;
    flex-direction: row;
    background-color: white;
    padding: 10px;
    z-index: 10000;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
}

.brand img {
    max-height: auto;
    max-width: 190px;
}

nav ul {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
    list-style-type: none;
    margin-left: auto;
    margin-right: 50px;
    overflow: hidden;
}

nav a {
    color: black;
    font-size: 14px;
    font-family: "Canva Sans Bold";
    text-decoration: none;
    padding: 4px;
    margin: 4px;
    white-space: nowrap;
}

li a.register {
    color: white;
    padding-left: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 20px;
    margin-left: 20px;
    background-color: #980f10;
    border-style: solid;
    border-width: 1px;
    border-color: #980f10;
}

li a.log-in {
    padding-left: 27px;
    padding-right: 27px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}

.menu-toggle {
    position: relative;
    right: 30px;
    border: none;
    background: none;
    display: none;
    font-size: 24px;
    cursor: pointer;
    margin-left: auto;
}

@media (max-width: 910px) {
    header {
        min-height: 100px;
    }

    nav {
        flex-wrap: wrap;
        margin: auto;
    }

    .menu-toggle {
        display: block;
    }

    nav ul {
        padding-right: 70px;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        margin: 0;
    }

        nav ul.active {
            max-height: 500px; /* enough to show items */
        }

    nav li {
        width: 100%;
    }

    nav a {
        display: block;
        width: 100%;
        padding: 10px;
    }

    li a.register {
        color: white;
        width: 100%;
        padding: 10px;
        margin: 4px;
        background-color: #980f10;
        border-width: 1px;
        border-color: #980f10;
    }

    li a.log-in {
        padding: 10px;
        border-style: solid;
        border-width: 1px;
        border-color: black;
    }
}
/*HERO HERO HERO HERO*/
.hero .text {
    padding: 70px;
    padding-top: 80px;
    margin: 0 144px 40px 0;
}


.hero .backdrop {
    width: 100%;
    overflow: hidden;
}

.hero h6 {
    font-size: 12px;
    font-weight: 90;
    font-family: "Arial";
    letter-spacing: 3px;
    margin: 0;
    padding: 0;
}

.hero a.underline {
    font-size: 58px;
    font-weight: 100;
    font-family: "Canva Sans Bold";
    margin: 0;
    padding: 0;
    text-decoration: underline solid #cd1112 3.5px;
}

.hero h1 {
    font-size: 58px;
    font-weight: 100;
    font-family: "Canva Sans Bold";
    line-height: 90%;
    margin: 0;
    padding: 0;
}

.hero p, a.link {
    text-align: justify;
    font-size: 16px;
    color: #f8f6f4;
}

.hero button {
    position: relative;
    top: 10px;
    background-color: #0d55e4;
    font-family: "Canva Sans Bold";
    border: none;
    color: white;
    padding: 20px 80px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

.hero {
    position: relative;
    height: 550px;
    color: white;
    overflow: hidden;
}

.hero .bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero .backdrop img {
    position: relative;
    min-width: 100%;
    right: 100px;
    filter: contrast(80%),saturate(200%);
    filter: brightness(40%);
    height: 100%;
}

.hero .rectangle {
    position: absolute;
    inset: 0;
    background-color: #0b2e74;
    opacity: 0.5;
}

.hero .text {
    position: relative;
    z-index: 1;
}

@media(max-width:955px) {
    .hero .text {
        padding: 30px;
        margin: 30px 0 0 0;
    }

    .hero h6 {
        display: none;
    }

    .hero p, a.link {
        margin-top: 30px;
        font-size: 12px;
        color: #f8f6f4;
    }

    .hero h1, .hero a.underline {
        font-size: 36px;
    }

    .hero {
        height: 400px;
    }
}

@media(max-width:460px) {
    .hero {
        height: 500px;
    }
}
/*HISTORY HISTORY FOUNDER FOUNDER VISION VISION*/

.founders-vision-history {
    background-color: #f8f6f4;
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 6%;
}

    .founders-vision-history img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.founders-vision, .history {
    padding: 40px;
}

.history {
    background-color: #f8f6f4;
}

.founders-vision-history p {
    position: relative;
    bottom: 20px;
    font-size: 16px;
    text-align: justify;
}

.founders-vision-history button {
    background-color: #980f10;
    position: relative;
    top: 10px;
    font-family: "Arial";
    font-weight: bold;
    border: none;
    color: white;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
}

@media(max-width:666px) {
    .founders-vision-history {
        background-color: #f8f6f4;
        display: block;
    }

        .founders-vision-history img {
            display: none;
        }

        .founders-vision-history h1 {
            font-size: 28px;
        }

        .founders-vision-history p {
            position: relative;
            bottom: 20px;
            font-size: 14px;
            text-align: justify;
        }

        .founders-vision-history .line {
            height: 35px;
        }
}


/*KEY INITIATIVES KEY INITIATIVES------------------------------------------------------------------------*/
.Key-Initiatives h1 {
    font-size: 40px;
    font-weight: normal;
    font-family: "Canva Sans Bold";
    text-align: center;
}

.Key-Initiatives p {
    position: relative;
    text-align: center;
    bottom: 31px;
}


/*GRID=====================================================*/
.fourplus1-grid .image-container {
    overflow: hidden;
}

    .fourplus1-grid .image-container img,
    .fourplus1-grid .image-container .gradient {
        transition: transform 0.5s ease;
    }

/* hover on box triggers zoom */
.fourplus1-grid .box1:hover img,
.fourplus1-grid .box2:hover img,
.fourplus1-grid .box3:hover img,
.fourplus1-grid .box4:hover img,
.fourplus1-grid .box5:hover img,
.fourplus1-grid .box1:hover .gradient,
.fourplus1-grid .box2:hover .gradient,
.fourplus1-grid .box3:hover .gradient,
.fourplus1-grid .box4:hover .gradient,
.fourplus1-grid .box5:hover .gradient {
    transform: scale(1.1);
}

.fourplus1-grid .image-container {
    overflow: hidden;
}

    .fourplus1-grid .image-container img {
        transition: transform 0.6s ease;
    }

    .fourplus1-grid .image-container:hover img {
        transform: scale(1.1);
    }

.fourplus1-grid {
    margin: 3em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "box-1 box-2 box-5"
        "box-3 box-4 box-5";
}

    .fourplus1-grid .caption {
        padding: 23px;
        bottom: 0;
    }


    .fourplus1-grid .item {
        width: 100%;
        height: 250px;
        object-fit: cover;
        overflow: hidden;
    }

    .fourplus1-grid > div {
        min-width: 0;
    }

    .fourplus1-grid .image-container {
        position: relative;
        width: 100%;
        height: 250px;
        overflow: hidden;
    }

    .fourplus1-grid img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        object-fit: cover;
    }

    .fourplus1-grid .gradient {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

    .fourplus1-grid .caption {
        padding: 23px;
        align-items: end;
        bottom: 0px;
    }

    .fourplus1-grid h3 {
        margin: 0;
        color: white;
        font-weight: normal;
        font-size: 30px;
        font-family: "Canva Sans Bold";
    }

    .fourplus1-grid a {
        color: white;
        font-size: 14px;
        font-weight: 100;
    }
    /*Grid style*/

    .fourplus1-grid .box1, .fourplus1-grid .box2, .fourplus1-grid .box3, .fourplus1-grid .box4, .fourplus1-grid .box5 {
        margin: 15px;
        padding: 0px;
    }

        .fourplus1-grid .box1 .gradient {
            background: linear-gradient(0deg, #6d3a05, transparent);
        }

        .fourplus1-grid .box2 .gradient {
            background: linear-gradient(0deg, #405b0e, transparent);
        }

        .fourplus1-grid .box3 .gradient {
            background: linear-gradient(0deg, #313949, transparent);
        }

        .fourplus1-grid .box4 .gradient {
            background: linear-gradient(0deg, #0d2149, transparent);
        }

        .fourplus1-grid .box5 .gradient {
            background: linear-gradient(0deg, rgb(94, 93, 93), transparent);
        }

    .fourplus1-grid .box1 {
        background: #6d3a05;
    }

    .fourplus1-grid .box2 {
        background: #405b0e;
    }

    .fourplus1-grid .box3 {
        background: #313949;
    }

    .fourplus1-grid .box4 {
        background: #0d2149;
    }

    .fourplus1-grid .box5 {
        background: rgb(94, 93, 93);
    }

        .fourplus1-grid .box5 .item {
            width: 100%;
            height: 800px;
            object-fit: cover;
            overflow: hidden;
        }

        .fourplus1-grid .box5 .image-container {
            position: relative;
            width: 100%;
            height: 800px;
        }

        .fourplus1-grid .box5 .caption {
            padding: 23px;
            position: relative;
            bottom: 0px;
        }


@media(max-width:880px) {
    .Key-Initiatives p {
        display: none;
    }

    .fourplus1-grid {
        display: block;
    }

        .fourplus1-grid > div {
            position: relative;
        }

        .fourplus1-grid .box5 .item,
        .fourplus1-grid .box5 .image-container {
            height: 250px;
        }
}
/*LKSDCKSHFKSOASISHFKSJFHSDFSJFHSIDUSA*/

section.advocacy {
    position: relative;
    bottom: 20px;
    min-height: 500px;
    padding: 0 4em 0 4em;
}

    section.advocacy p {
        position: relative;
        bottom: 20px;
    }

.advocacy div.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

    .advocacy div.container .parent {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

        .advocacy div.container .parent h3 {
            margin: 0;
        }

        .advocacy div.container .parent a {
            color: #980f10;
        }

        .advocacy div.container .parent img {
            height: auto;
            width: 70px;
            margin: 2em;
        }

.founders-vision-history h1 {
    font-size: 28px;
}

.founders-vision-history p {
    position: relative;
    bottom: 20px;
    font-size: 14px;
    text-align: justify;
}

@media(max-width:775px) {
    section.advocacy p {
        font-size: 14px;
        position: relative;
        bottom: 20px;
    }

    section.advocacy h1 {
        font-size: 28px;
    }

    section.advocacy .line {
        height: 30px;
    }

    .advocacy div.container .parent img {
        height: auto;
        width: 50px;
        margin: 1em;
    }

    section.advocacy h3, section.advocacy a {
        font-size: 12px;
    }

    section.advocacy {
        min-height: 250px;
    }
}

/*FOOTERRRRRRRRRRR*/

footer {
    background-color: #091120;
    display: flex;
    color: white;
    justify-content: space-between;
    padding: 30px;
}

footer .contact-information img {
    height: auto;
    width: 20px;
}

footer .contact-information {
    margin-right: 100px;
}

footer img {
    height: auto;
    margin: 0;
    width: 100px;
    align-items: center;
}

footer h3 {
    margin: 0;
    font-size: 15px;
}

footer a {
    margin-right: 10px;
}

footer p {
    font-size: 10px;
}
/*ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US */
section.page h2 {
    font-size: 14px;
    color: rgb(160, 160, 160);
}

section.page p {
    margin-bottom: 50px;
}

section.page .head {
    margin-left: 0;
}

article.vision {
    background-color: #980f10;
    color: white;
    height: 500px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
}

article.vision .head {
    margin-left: 0;
}

article.vision .line {
    background-color: white;
}

article.vision .text {
    width: 60%;
    padding: 50px;
}

article.vision img {
    height: auto;
    width: 40%;
    object-fit: cover;
}

article.vision .text h1 {
    margin: 0;
}

article.vision .text p {
    text-align: justify;
}

article.vision p {
    color: #f8f6f4;
}

.page .header {
    margin: 0 50px 0px 50px;
}

.page h2 {
    margin: 40px auto 20px 50px;
}

article.mission .head {
    margin-left: 0;
}

.page .header p {
    text-align: justify;
    width: 50%;
}

article.mission .text {
    margin: 50px 50px 0 50px;
}

article.mission .mission-text ul {
    position: relative;
    bottom: 20px;
    width: 45%;
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    padding: 50px;
}

article.mission .mission-text li a {
    font-weight: bold;
}

article.mission .mission-text li p {
    text-justify: justify;
    margin-top: 0;
}

article.mission p.bold {
    margin-top: 40px;
    font-weight: bold;
}

.mission-text {
    width: 100%;
    background-color: #f0eeed;
    display: flex;
}

.mission-text img {
    height: auto;
    width: 55%;
    object-fit: cover;
}

@media(max-width:755px) {
    section.page .header p {
        width: 100%;
    }
}

@media(max-width:460px) {
    section.page img {
        height: 0%;
        width: 0%;
    }

    article.vision .text {
        width: 100%;
        padding: 50px;
    }

    article.mission .mission-text ul {
        position: relative;
        bottom: 20px;
        width: 100%;
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
        padding: 50px;
    }
}

/*CORECORECOREVALUESCORECORECOREVALUESCORECORECOREVALUESCORECORECOREVALUESCORECORECOREVALUES*/
.core-values {
    color: #0d2149;
}

.head .circle {
    background-color: #980f10;
    border-radius: 50px;
    height: 9px;
    width: 9px;
}

.core-values .head {
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-values h1 {
    font-size: 36px;
}

.core-values .grid {
    margin: 0px 70px;
    display: grid;
    grid-template-columns: auto auto;
}

.core-values .card {
    margin: 20px;
    padding: 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
}

.core-values .card h4 {
    display: flex;
    justify-content: center;
}

.core-values .card div.line {
    background-color: #f0eeed;
    height: 2px;
    width: 90%;
    margin: 0 auto;
}

.core-values p {
    padding: 20px;
}


@media(max-width:530px) {
    .core-values .grid {
        margin: 0px 30px;
        display: grid;
        grid-template-columns: auto;
    }
}
/*BOARD OF DIRECTORS BOARD OF DIRECTORS BOARD OF DIRECTORS BOARD OF DIRECTORS*/
.directors .grid {
    margin: 40px;
    gap: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.directors .card {
    border: 1px solid rgb(221, 221, 221);
    height: 550px;
    background-color: white;
    width: 100%;
    overflow: hidden;
}

.directors .card img {
    height: 400px;
    object-fit: cover;
    width: 100%;
}

.directors h4 {
    font-size: 15px;
    font-weight: normal;
    padding: 0 20px;
    margin: 0;
}

.directors a {
    font-size: 15px;
    color: #980f10;
    padding: 0 20px;
    margin: 0;
}

.directors h3 {
    padding: 20px 20px;
    font-size: 20px;
    margin: 0;
}

.directors .head {
    margin: 40px;
}

.directors h1 {
    font-size: 36px;
}

@media(max-width:990px) {
    .directors {
        min-height: 2500px;
    }

    .directors .grid {
        margin: 40px;
        gap: 3%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .directors .card {
        border: 1px solid rgb(221, 221, 221);
        height: 550px;
        background-color: white;
        width: 100%;
        overflow: hidden;
    }

    .directors .card img {
        height: 400px;
        object-fit: cover;
        width: 100%;
    }
}

@media(max-width:500px) {
    .directors {
        min-height: 1670px;
    }

    .directors h3 {
        padding: 10px 10px;
        font-size: 14px;
        margin: 0;
    }

    .directors h4 {
        font-size: 14px;
        font-weight: normal;
        padding: 0 10px;
        margin: 0;
    }

    .directors a {
        font-size: 14px;
        color: #980f10;
        padding: 0 10px;
        margin: 0;
    }

    .directors .grid {
        margin: 40px;
        gap: 3%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .directors .card {
        border: 1px solid rgb(221, 221, 221);
        height: 340px;
        background-color: white;
        width: 100%;
        overflow: hidden;
    }

    .directors .card img {
        height: 200px;
        object-fit: cover;
        width: 100%;
    }
}

/*PURPOSE STATEMENT PURPOSE STATEMENT PURPOSE STATEMENT PURPOSE STATEMENT PURPOSE STATEMENT PURPOSE STATEMENT PURPOSE STATEMENT PURPOSE STATEMENT PURPOSE STATEMENT PURPOSE STATEMENT */
.purpose-statement {
    margin: 70px 0;
    background-color: #0d2149;
    color: #f8f6f4;
    display: flex;
    height: 300px;
    width: 100%;
}

.purpose-statement .line {
    background-color: white;
}

.purpose-statement h1 {
    font-size: 36px;
}

.purpose-statement .container {
    padding: 40px;
    width: 55%;
}

.purpose-statement img {
    width: 45%;
    object-fit: cover;
}

@media(max-width:800px) {
    .purpose-statement img {
        height: 0;
        width: 0;
    }

    .purpose-statement .container {
        padding: 40px;
        width: 100%;
    }

    .purpose-statement .container p {
        font-size: 16px;
        text-align: justify;
    }

    .purpose-statement .container h1 {
        font-size: 28px;
    }
}
/*JOIN US JOIN US JOIN US JOIN US JOIN US JOIN US JOIN US JOIN US JOIN US JOIN US JOIN US JOIN US */
section.join-us {
    margin: 30px 30px 60px 30px;
    display: flex;
    flex-direction: column;
}

.join-us p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.join-us button {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #980f10;
    border-style: none;
    margin: 0 auto;
    cursor: pointer;
    height: 55px;
    width: 200px;
    font-weight: bold;
    color: #f0eeed;
}

/*CONTACT US CONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT USCONTACT US*/

article.contact {
    width: 100%;
    height: 600px;
    display: flex;
}

.page .head {
    margin-left: 20px;
}

article.contact .contact-form {
    margin: 20px;
    padding: 20px;
    gap: 20px;
    background-color: #f1edea;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 80px 80px 1fr 50px;
    grid-template-areas:
        "box-1 box-2"
        "box-3 box-4"
        "box-5 box-5"
        "box-6 box-6";
    width: 60%;
}

article.contact .contact-form div {
    display: flex;
    flex-direction: column;
}

div.form-5 {
    width: 100%;
}

div.form-5 textarea {
    width: 100%;
    height: 100%;
    resize: none;
}

div.form-5 textarea::placeholder, .contact-form input {
    padding: 14px;
    font-size: 14px;
    font-family: Arial;
}

article.contact .contact-form input, textarea {
    box-sizing: border-box;
    padding: 20px;
    background-color: #dfdedb;
    border: none;
}

article.contact img {
    object-fit: cover;
    margin: 20px;
    width: 40%;
}

article.contact label {
    font-weight: bold;
    margin: 20px 0px 10px 0px;
}

article.contact button {
    border: none;
    color: white;
    background-color: #980f10;
    width: 160px;
    cursor: pointer;
}

@media(max-width:826px) {
    article.contact {
        width: auto;
        height: 600px;
        display: block;
    }

    article.contact img {
        width: 0;
        height: 0;
    }

    article.contact .contact-form {
        padding: 20px;
        width: auto;
    }
}

@media(max-width:500px) {
    article.contact {
        width: 100%;
        height: 800px;
    }

    article.contact .contact-form {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "box-1"
            "box-2"
            "box-3"
            "box-4"
            "box-5"
            "box-5"
            "box-6";
    }


    article.contact button {
        border: none;
        color: white;
        background-color: #980f10;
        width: 160px;
        height: 40px;
        cursor: pointer;
    }
}

/*INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION INVITATION */

section.invitation {
    margin: 100px 0 0 0;
    height: 300px;
}

section.invitation .parent {
    padding: 30px;
}

section.invitation .container {
    background-color: rgba(255, 255, 255, 0.8);
    width: 600px;
    padding: 20px 20px 20px 30px;
}

section.invitation p {
    position: relative;
    bottom: 20px;
    margin-top: 0;
}

.invitation img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 300px;
    z-index: -100;
}

.invitation button {
    position: relative;
    bottom: 10px;
    border: none;
    color: white;
    background-color: #980f10;
    height: 30px;
    width: 90px;
    cursor: pointer;
}

.invitation .line {
    padding: 0;
    align-items: end;
    height: 40px;
    background-color: #980f10;
}

article.article .page p {
    text-align: justify;
    font-size: 18px;
    margin: 0 50px 50px 80px;
}

button a {
    color: white;
    text-decoration: none;
}

.page h3 {
    margin-left: 4em;
}


@media(max-width:700px) {
    section.invitation .container {
        width: auto;
    }
}

@media(max-width:600px) {
    section.invitation .container {
        width: auto;
    }

    section.invitation h1 {
        font-size: 20px;
    }

    section.invitation .line {
        height: 24px;
        width: 2px;
    }

    section.invitation p {
        text-align: justify;
        margin: 10px 0 0 0;
    }
}
/*PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES AND PRODUCTS AND SERVICES*/
.products {
    padding: 50px;
    gap: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.products button {
    background-color: #d3d3d3;
    height: 250px;
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

.products button:hover {
    background-color: #c9c9c9;
}

.fade-text {
    opacity: 0;
    transform: translateY(15px);
    transition: all 1s ease;
}

.fade-text.show {
    opacity: 1;
    transform: translateY(0);
}

/*for tablets*/
@media screen and (max-width:640px) {
    .divMainContentWrapper 
    {
        width: calc(100% - 8px);
        padding: 0.2em;
    }

    .div-sec-wrapper 
    {
        width: calc(100% - 8px);
    }
}