@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playpen+Sans:wght@100..800&family=Sofadi+One&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: var(--primaryfont);
}

:root {
    --backgroundColor: rgb(20, 17, 150);
    --tertiaryColor: rgb(53, 87, 121);
    --secondaryColor: rgba(51, 9, 99, 0.945);
    --primaryfont: 'PT Serif', serif;
    --headingsfont: 'Playpen Sans', cursive;
    --secondaryfont: 'Sofadi One';
}

h1,
h2,
h3 {
    font-family: var(--headingsfont);
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: var(--tertiaryColor);
    align-items: center;
    font-family: var(--headingsfont);
    z-index: 15;
    background-color: transparent;
}

header>img {
    position: fixed;
    top: 0rem;
    left: -0.3rem;
    height: 3.4rem;
    border-radius: 0rem;
    margin: 0.8rem 1rem;
}


header>div {
    position: fixed;
    top: 0.95rem;
    right:  22%;
    width: fit-content;
    font-size: 0.9rem;
    font-weight: 550;
    background-color: white;
    height: 3rem;
    align-content: center;
    border-radius: 1rem;
    padding:  1px 8px;
}

.slidingText {
    display: none;
}

header>div>p>a {
    text-decoration: none;
    color: black;
    font-size: 0.9rem;
    animation: grow 3s infinite;
}

@keyframes grow {
    0% {
        font-size: 0.9rem;
    }

    50% {
        font-size: 1rem;
    }

    100% {
        font-size: 0.9rem;
    }
}

#menuBars::before {
    content: "≡";
}

#menuBars.show::before {
    content: "✖";
}

#menuBars {
    position: fixed;
    top: -0.5rem;
    right: 1rem;
    color: white;
    font-size: 4rem;
}

#menuBars.show {
    padding: 0 5px;
    font-size: 3rem;
    top: 0.2rem;
    right: 0.5rem;
}

.headerBackground {
    position: fixed;
    top: 0rem;
    width: 100%;
    height: 5rem;
    background-color: var(--tertiaryColor);
    z-index: 1;
}

/*------------    Main Section Styling   ----------*/

body {
    position: relative;
}

#menuItems {
    position: fixed;
    top: 0rem;
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    transition: grid-template-rows 0.9s ease-out;
    z-index: 13;
}

#menuItems.show {
    grid-template-rows: 1fr;
    z-index: 13;
    height: 100vh;
}

#menuItems>ul {
    overflow: hidden;
    padding: 0 2rem;
    background-color: rgba(206, 206, 228, 0.979);
}

#menuItems li {
    list-style-type: none;
    padding: 0.8rem 0 1.5rem 0;
    text-decoration-color: white;

}

#menuItems #firstElement {
    padding-top: 13rem;
}

#menuItems li>a {
    font-weight: 700;
    color: navy;
    text-decoration: none;
    font-size: 1.9rem;
}

#menuItems li a:hover {
    font-size: 2.1rem;
    text-decoration: none;
}

.partToHide.hide {
    display: none;
}

.divToHide.hide {
    display: none;
}
/*------------------- gradient card styling ----------------*/
.gradient {
    margin-top: 5rem;
    width: 100%;
    height: 16rem;
    background-image: linear-gradient(to bottom right, rgba(80, 119, 158, 0.829), rgba(255, 255, 255, 0.61));
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.gradient picture{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    overflow: hidden;
}

.gradient img {
    width: 100%;
    height: 16rem;
    transition: transform 0.5s ease-in-out;
    transform: scale(1.7);
    animation: zoom-out 3s forwards;
}

@keyframes zoom-out {
    0% {
        transform: scale(1.7);
    }
    100% {
        transform: scale(1);
    }
}

.slidetext {
    width: 70%;
    animation: slidein 6s ease-out infinite;
    font-size: 3.2rem;
    font-weight: 600;
    padding: 2rem 2rem;
    color: white;
    text-shadow: #f1f1f1;
}

@keyframes slidein {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    10% {
        transform: translateX(100%);
        opacity: 0;
    }

    30% {
        transform: translateX(0);
        opacity: 1;
    }

    85% {
        transform: translateX(0);
        opacity: 1;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/*------------    buy and sell Styling   ----------*/
.buyAndSell {
    position: sticky;
    top: 4.8rem;
    display: flex;
    background-image: linear-gradient(to bottom, var(--tertiaryColor), var(--tertiaryColor), white);
    padding: 0.2rem 0 0 0;
    width: 100%;
    height: 2.5rem;
    z-index: 5;
}

.buyAndSell>p {
    width: 20%;
    border: 1px solid black;
    background-color: white;
    text-align: center;
    font-size: 1rem;
}

.linkToSell {
    text-decoration: underline;
    color: navy;
}
/*------------    buy and sell buttons Styling   ----------*/
#buy,
#sell {
    font-family: var(--headingsfont);
    align-self: center;
    padding: 2px;
    border: 0;
    border-bottom: 0.8rem solid var(--tertiaryColor);
    background-color: rgb(204, 202, 202);
}

.buyAndSell>#buy.color,
.buyAndSell>#sell.color {
    background-color: white;
    border-radius: 20px 20px 0 0;
    border: 0;
    animation: none;
}

/*------------    buy and sell spaces Styling   ----------*/
.buyAndSell>#space.color {
    border-radius: 0 0 40px 0;
}


.buyAndSell>#space2.color {
    border-radius: 0 0 0 40px;
}

.buyAndSell>#space,
.buyAndSell>#space2 {
    background-color: var(--tertiaryColor);
    border: 0;

}

/*------------    buy and sell  center space Styling   ----------*/

.buyAndSell>#space1 {
    border: 0;
    background-color: var(--tertiaryColor);
}

.buyAndSell>#space1.right {
    border-radius: 0 0 40px 0;
}

.buyAndSell>#space1.left {
    border-radius: 0 0 0 40px;
}

.parentDivForBuy.hide {
    display: none;
}

.parentDivForSell {
    display: none;
}

.parentDivForSell.active {
    display: block;
}

/*------------    Intro section Styling   ----------*/

.intro>h1 {
    font-family: var(--primaryfont);
    font-size: 2.2rem;
    color: rgb(44, 42, 42);
    padding: 1.5rem 0 0;
    margin: 1rem 10px 0;
}

.intro>.liner {
    width: 15%;
    border: 3px solid var(--backgroundColor);
    margin-left: 10px;
    margin-bottom: 2rem;
}

.intro>p {
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0 10px 10px;
}

.intro span {
    font-weight: 600;
}


/*------------    flip cards Styling   ----------*/

.flipCards>h2 {
    margin: 3rem 0 -1rem;
    text-align: center;
    color: rgb(44, 42, 42);
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    margin: 3rem auto;
    width: 90%;
    height: 300px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateX(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: 20px;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: var(--tertiaryColor);
    color: white;
}

.flip-card-front>h2 {
    text-align: center;
    margin: 2rem 0;
}

.flip-card-front>p {
    font-size: 1.1rem;
    color: rgb(179, 174, 174);
    margin: 0 0 10px;
}

.flip-card-front li {
    list-style-type: none;
    padding: 0;
    color: gray;
}

/* Style the back side */
.flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateX(180deg);
}

.flip-card-back>img {
    width: 100%;
    height: 100%;
}

/*------------ about us section Styling   ----------*/

.aboutUs {
    margin: 3rem 0 0;
    padding: 2rem;
    background-color: rgb(53, 87, 121);
    font-size: 1.6rem;
    color: rgb(251, 251, 252);
}

.aboutUs>p {
    margin-bottom: 1.5rem;
}

.aboutUs a {
    font-size: 1.9rem;
    color: white;
    text-decoration: underline;
}

.aboutUs a:hover {
    color: navy;
}

/*------------ installation section Styling   ----------*/

.moveInSection {
    opacity: 1;
    margin: 1rem 1.5rem 3rem;
    font-size: 1.6rem;
    padding: 2rem 0 2rem;
    background-color: white;
    color: rgb(5, 5, 51);
    border-radius: 2rem;
}

#float {
    float: right;
    padding-right: 2rem;
}

.moveInSection>p {
    padding: 0 2rem;
    margin: 1.2rem 0 3rem;
}

.moveInSection span {
    font-weight: 600;
}

.container {
    background-color: rgb(247, 247, 250);
    padding: 2rem 0;
}

.sellingItems {
    font-family: var(--secondaryfont);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1rem;
    margin-bottom: 2rem;
    color: rgb(26, 25, 25);
    background-color: var(--tertiaryColor);
    color: white;
    transition: background-color 1s;
}

.sellingItems img {
    width: 100%;
    height: 17rem;
    border-radius: 2rem;
}

.sellingItems>p {
    font-weight: 500;
    padding: 1rem;
    margin-top: 1rem;
}

.sellingItems>p>span {
    color: white;
    font-weight: 600;
}

.technetwork {
    opacity: 1;
    width: 85%;
    margin: 5rem auto 8rem;
    font-weight: 600;
    border: 2px solid var(--tertiaryColor);
}

.technetwork img {
    width: 90%;
    height: 16rem;
    padding: 0 5% 0;
    border-radius: 2rem;
}

.technetwork a {
    font-weight: 600;
    padding: 5px 7px;
    margin-top: 5rem;
    background-color: var(--tertiaryColor);
    color: white;
    text-decoration: none;
    transition: background-color 1s, color 1s;
}

.technetwork a:hover {
    background-color: white;
    color: var(--tertiaryColor);
}


.moveInSection .button {
    font-family: var(--headingsfont);
    font-weight: 500;
    background-color: var(--tertiaryColor);
    margin: 2rem;
    border: 2px solid var(--tertiaryColor);
    border-radius: 15px;
    color: white;
}

.button:hover {
    background-color: white;
    color: var(--backgroundColor);
}

.fullImage img {
    width: 100%;
    height: 24rem;
}

.contactSection {
    width: 80%;
    font-size: 1.5rem;
    color: white;
    background-color: rgb(80, 119, 158);;
    margin: 7rem auto;
    padding: 2rem 1rem;
    border: 2px solid var(--tertiaryColor);
    border-radius: 25px;
}

.contactSection>p {
    padding: 0.5rem 1rem;
}

.contactSection p a {
    color: white
}

.contactSection p a:hover {
    color: navy;
}

.contactSection>p.different {
    background-color: white;
    color: black;
    font-weight: 700;
    border-radius: 25px;
    margin-top: 2rem;
    padding: 1rem 2rem;
}


/*------------ frequently asked questions Styling   ----------*/

.freqAsked h2 {
    margin: 5rem 0 1rem;
    text-align: center;
}

.freqAsked .question {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.freqAsked .question>p {
    max-width: 85%;
}

.freqAsked .question>span {
    font-size: 1.3rem;
}

.freqAsked .response {
    background-color: rgba(7, 107, 7, 0.932);
    color: white;
    display: grid;
    grid-template-rows: 0fr;
    font-size: 1.1rem;
}

.freqAsked .response>p {
    overflow: hidden;
}

.freqAsked .response.active {
    padding: 1rem 2rem;
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.5s ease-out;
}


/*------------ footer Styling   ----------*/
footer {
    margin-top: 0.5rem;
    padding: 2rem;
    background-color: var(--tertiaryColor);
    text-align: center;
}

footer h3 {
    color: rgb(214, 205, 205);
    font-size: 1.4rem;
    padding: 2rem 0 1rem;
}

footer p>a {
   color: rgb(214, 205, 205);
}

footer p {
    padding: 0.2rem 0;
    font-size: 1.2rem;
}

footer .copyright {
    color: rgb(214, 205, 205);;
    padding: 4rem 0 1rem;
    text-align: center;
    font-size: 1.4rem;
}


/*------------ contact page Styling   ----------*/
.heroImage {
    position: relative;
    margin-top: 4.8rem;
}

.heroImage img {
    width: 100%;
    height: 19rem;
}

.blue,
.purple {
    width: 80%;
    padding: 1rem;
    margin: 2rem auto;
    border-radius: 20px;
}

.blue {
    border: 2px solid var(--backgroundColor);
    background-color: rgb(244, 247, 248);
}

.purple {
    border: 2px solid var(--secondaryColor);
    background-color: rgba(252, 242, 252, 0.925);
}

.blue h2 {
    color: var(--backgroundColor);
    margin-bottom: 1rem;
    opacity: 0;
}

 .blue h2.animate {
    animation: flyIn 0.6s;
 }

 .blue h2.opacity {
    opacity: 1;
 }

 @keyframes flyIn {
    0% {
        transform: translateY(200%);
    }
    100% {
        transform: translateY(0%);
    }
 }


.blue .callButton {
    margin: 0 auto;
    width: fit-content;
    background-color: var(--backgroundColor);
    border-radius: 12px;
}

.blue .callButton a,
.purple .callButton a {
    padding: 1rem;
    color: white;
    font-size: 1.6rem;
}

.blue .callButton:hover {
    background-color: rgb(244, 247, 248);
    border: 2px solid var(--backgroundColor);
}

.blue .callButton a:hover {
    color: var(--backgroundColor);
}

.purple h2 {
    color: rgb(92, 6, 92);
    margin-bottom: 1rem;
    opacity: 0;
}

 .purple h2.animate {
    animation: flyIn 0.6s;
 }

 /*----- The fly In animation is defined above in the class '.blue' h2 styling -----*/

 .purple h2.opacity {
    opacity: 1;
 }

.purple .callButton {
    margin: 0 auto;
    width: fit-content;
    background-color: rgb(92, 6, 92);
    border-radius: 12px;
}

.purple .callButton:hover {
    background-color: rgb(252, 242, 252, 0.925);
    border: 2px solid rgb(92, 6, 92);
    ;
}

.purple .callButton a:hover {
    color: rgb(92, 6, 92);
    ;
}

.purple>p>a {
    color: rgb(92, 6, 92);
    ;
}


.blue p,
.purple p {
    padding: 0.5rem;
    font-size: 1.4rem;
}

.trapezoid {
    font-family: var(--secondaryfont);
    font-size: 2rem;
    text-align: center;
    padding-top: 3rem;
    position: absolute;
    bottom: 4px;
    border-bottom: 200px solid rgba(56, 214, 17, 0.938);
    border-right: 75px solid transparent;
    height: 0;
    width: 50%;
}

.heroImage P {
    font-family: var(--secondaryfont);
    color: white;
    width: 45%;
    font-size: 2.3rem;
    font-weight: 700;
    position: absolute;
    bottom: 2rem;
    padding: 0 0 0 1.5rem;
}

.secondImage {
    margin: 8rem 0 10rem;
    background-color: rgb(246, 250, 250);
    padding-bottom: 4rem;
}

.secondImage img {
    width: 100%;
    height: 15rem;
    opacity: 0;
    transition: opacity 2s;
}

.secondImage img.animate {
    opacity: 1;
}

.secondImage p {
    width: 70%;
    font-size: 1.7rem;
    margin: 0 auto;
    margin-top: 2rem;
}

.secondImage p span {
    font-weight: 600;
    color: rgb(11, 82, 11);
}

/*----- Sell Section Styling -----*/

.Slider {
    width: 90%;
    height: 18rem;
    overflow: hidden;
    white-space: nowrap;
    background-color: rgba(253, 250, 250, 0.671);
    margin: 2rem auto;
    border: 0;
}

.Slider img {
    width: 100%;
    height: 18rem;
    margin: 0;
    padding: 0;
    animation: slidestop 30s infinite;
    border: 0;
}

@keyframes slidestop {
    0% {
        transform: translateX(0%);
    }
    6% {
        transform: translateX(0%);
    }

    10% {
        transform: translateX(-101%);
    }

    20% {
        transform: translateX(-101%);
    }

    24% {
        transform: translateX(-202%);
    }

    40% {
        transform: translateX(-202%);
    }

    44% {
        transform: translateX(-303%);
    }

    60% {
        transform: translateX(-303%);
    }

    64% {
        transform: translateX(-404%);
    }

    80% {
        transform: translateX(-404%);
    }

    84% {
        transform: translateX(-505%);
    }

    100% {
        transform: translateX(-505%);
    }
}


.SliderTwo {
    width: 90%;
    height: 18rem;
    overflow: hidden;
    white-space: nowrap;
    background-color: rgba(253, 250, 250, 0.671);
    margin: 2rem auto;
    border: 0;
}

.SliderTwo img {
    width: 100%;
    height: 18rem;
    margin: 0;
    padding: 0;
    animation: slidestop 30s infinite;
    border: 0;
}


/*-------- Intro text styling for sell section---------*/

.introText {
    padding-top: 2rem;
    width: 85%;
    margin: 0 auto;
    font-size: 1.5rem;
}

.introText > p {
    padding-bottom: 15px;
}

.introText > p > span {
    color: green;
    font-weight: 800;
}

.contactCardToSell, .linkToContactPage {
    font-size: 1.4rem;
    width: 85%;
    margin: 80px auto;
    box-shadow: 4px 4px 11px gray;
    padding: 1rem 0;
}

.contactCardToSell > img {
    width: 100%;
    height: 200px;
}

.contactCardToSell > p {
    padding: 1rem;
}

.contactCardToSell > #toSellButton {
    font-weight: 800;
    width: fit-content;
    margin: 1rem auto;
    border: 2px solid grey;
    padding: 10px;
    background-color: rgb(248, 243, 243);
}

#toSellButton a{
    color: rgb(37, 54, 71);
    text-decoration: none;
}

.contactCardToSell > #toSellButton:hover {
   font-size: 1.6rem;
}

.linkToContactPage > p {
    font-weight: 500;
    padding: 2rem 1rem;
}

.linkToContactPage > p > a {
    color: navy;
}

/*--------- Technicians Page Styling ---------*/

.headingOne {
    margin: 4.8rem 0 0;
    padding: 2.5rem 0 0.3rem;
    text-align: center;
    text-decoration: underline;
    font-weight: 700;
    color: navy
}

.technicianIntroText {
    font-size: 1.6rem;
}


.technicianIntroText .bold {
    color: black;
    font-size: 1.6rem;
}

.privilegesSection h2 {
    width: 80%;
    padding: 1rem;
    margin: 130px auto 0;
    text-align: center;
    color: rgb(37, 54, 71);
    border: 2px solid rgb(37, 54, 71);
    border-radius: 20px;
}

.privileges {
    font-size: 1.3rem;
    width: 75%;
    margin: 3rem auto;
    padding: 3rem 5%;
    color: white;
    line-height: 2rem;
}

.privileges h3 {
    margin: 12px 0;
}

.privileges img {
    width: 20%;
}
.one, .four {
    background-color: rgba(41, 143, 15, 0.993);
}

.two {
    background-color: rgb(150, 111, 15);
}

.three {
    background-color: var(--backgroundColor);
}

.fulImage {
    margin-top: 4rem;
    width: 100%;
    height: 350px;
}

.joinUs {
    font-size: 1.4rem;
    width: 85%;
    margin: 40px auto 80px;
    box-shadow: 4px 4px 11px gray;
    text-align: center;
    padding-bottom: 1rem;
}

.joinUs > p {
    font-weight: 500;
    padding: 1.5rem 1rem;
}

.joinUs a {
    font-weight: 800;
    color: white;
    background-color: var(--tertiaryColor);
    padding: 1rem;
    border-radius: 15px;
    text-decoration: none;
    border: 2px solid rgb(37, 54, 71);
}

.joinUs a:hover {
    color: rgb(37, 54, 71);
    background-color: white;
}

/*----- about page styling ------*/

.increasedMarginTop {
    margin-top: 4.8rem;
    position: relative;
    height: 21rem;
    background-color: rgba(37, 54, 71, 0.61);
    overflow: hidden;
}

.increasedMarginTop .backgroundImage {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 21rem;
    transition: transform 0.5s ease-in-out;
    transform: scale(1.7);
    animation: zoom-out 3s forwards;
}

/*-------- the zoom-out animation is defined above in the css file
 in the index html gradient section styling---------*/

.increasedMarginTop p, .increasedMarginTop h1 {
    color: white;
    text-align: center;
}

.increasedMarginTop h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: rgb(27, 204, 3);
    padding: 1.5rem 0;
}

.increasedMarginTop p {
    width: 80%;
    font-size: 1.5rem;
    line-height: 2.3rem;
    font-weight: 600;
    margin: 0 auto;
}

/*---- Vision and Mision styling  -----*/

.flex {
    display: flex;
    justify-content: space-evenly;
}

.flex p {
    font-family: var(--headingsfont);
    font-size: 1.3rem;
    padding: 1rem 15%;
}

.flex p.active {
    border-bottom: 4px solid rgb(27, 204, 3);
}

.visionSection, .purposeSection {
    display: none;
    padding: 1.5rem 1.5rem;
}

.visionSection.active {
    display: block;
}

.purposeSection.active {
    display: block;
}

.visionSection p, .purposeSection p {
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.9rem;
}

.visionSection h2, .purposeSection h2 {
    color: rgb(46, 70, 95);
}

/*---------- Why Choose Us Styling ----------*/

.aboutSection {
    background-color:  rgba(247, 249, 252, 0.938);
    padding: 0 0 2rem;
}

.aboutSection h2{
    text-align: center;
    background-color: aqua;
    padding: 2rem 0;
    margin: 5rem 0 0;
    color: white;
    background-color: navy;
}

.featuresToChooseUs {
    font-size: 1.2rem;
    width: 80%;
    margin: 40px auto;
    box-shadow: 4px 4px 11px gray;
    padding: 1rem;
    text-align: center;
    line-height: 2rem;
    background-color: white;
}

.featuresToChooseUs h3 {
    font-size: 1.7rem;
    color: rgb(46, 70, 95);
    font-size: 1.5rem;
    margin: 1rem 0;
}

.featuresToChooseUs img {
    width: 100%;
    height: 200px;
}

/*----- Our Impact Section Styling ------*/
.ourImpact {
    position: relative;
    width: 95%;
    height: 700px;
    margin: 8rem auto 8rem;
    font-size: 1.5rem;
    background-color: rgba(46, 70, 95, 0.897);
    color: white;
    border-radius: 2rem;
}

.ourImpact img {
    position: absolute;
    width: 100%;
    height: 700px;
    z-index: -1;
    border-radius: 2rem;
}

.ourImpact p {
    padding: 1rem 1rem 3rem;
    font-weight: 600;
    line-height: 2.5rem;
    text-align: center;
}

.ourImpact h2 {
    padding: 2.2rem 1rem 0;
    color: goldenrod;
    text-align: center;
}

.ourImpact span {
    display: block;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 0.5rem;
    margin: 0.7rem 0 1.9rem;
}

.ourImpact .alignCenter {
    text-align: center;
    padding: 0;
}

#completedJobs, #noOfYears {
    font-size: 2.5rem;
    color: goldenrod;
    padding: 2px;
    margin: 0;
}

/*---------- Our Values Section --------*/
.aboutSection .values {
    background-color: rgb(255, 255, 255);
}
.values img {
    width: 20%;
}

.values p {
    font-size: 1.2rem;
}

.blue h3 {
    color: #141196;
}

.purple h3 {
    color: #5C065C;
}

.values h3 {
    opacity: 0;
 }

 .values h3.animate {
    animation: flyIn 0.6s;
 }

 .values h3.opacity {
    opacity: 1;
 }

 /*-------- the animation for flyIn is defined in the contact page styling -------*/

 


/*----------- pop out animation styling ----------*/

.growIn {
    opacity: 0;
    padding-top: 50px;
    transition: opacity 0.5s ease-out, padding-top 0.5s ease-out;
}

.growIn.animateTwo {
    opacity: 1;
    padding-top: 0;
}

.attributes a{
    display: block;
    margin: 1rem;
}