body{
   background-color: #FFFFFF;
}
.firstd{
    background-repeat: no-repeat;
    height: 25rem;
    margin-bottom: 7.5rem;
    animation: animate 60s ease-in-out infinite;
    background-size: cover;
    width: 100%;
}
 
#firp{
    font-size: 4.375rem;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    padding-top: 9.375rem;
    padding-bottom: 1.25rem;
}
#secp{
    font-size: 1.125rem;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}
#thrp{
    font-size: 3.75rem;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 0.625rem;
    font-weight: bolder;
    color: #006400;
}
#thrp b{
    color: #333333;
}
#forp{
    font-size: 1.563rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #222222;
    padding-bottom: 1rem;
    font-weight: bold;
}
#fifp{
    color: grey;
    font-size: 1.063rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 0.938rem;
}
#sixp{
    color: grey;
    font-size: 1.063rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 0.938rem;
}

#eitp{
    color: grey;
    font-size: 1.063rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 5rem;
}
.grid-container{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    background-image: url(/img/first2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 21.875rem;
    margin-left: 6.25rem;
    border-bottom-left-radius: 12.5rem;
    border-top-left-radius: 12.5rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-bottom: 6.25rem;
}

.grid-item{
    grid-row: 1/2;
    grid-column: 1/2;
    color: black;
}
.grid-item2{
    grid-row: 1/2;
    grid-column: 2/3;
    color: black;
}
.grid-item3{
    grid-row: 1/2;
    grid-column: 3/4;
    color: black;
}
.grid-item p{
    padding-left: 12.5rem;
}
.grid-item3 p{
    padding-right: 6.25rem;
}
#ninp{
    font-size: 6.25rem;
    padding-top: 6.25rem;
    color: #006400;
}
#tenp{
    font-size: 1.563rem;
    color: white;
}
#elep{
    font-size: 6.25rem;
    padding-left: 3.125rem;
    padding-top: 6.25rem;
    color: #006400;
}
#twep{
    font-size: 1.563rem;
    color: white;
}
#thtp{
    font-size: 6.25rem;
    padding-top: 6.25rem;
    color: #006400;
}
#foyp{
    font-size: 1.563rem;
    color: white;
}
#fiftnp{
    font-size: 1.5625rem;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 3.125rem;
    color: #006400;
}
#three{
    font-weight: bolder;
    color: #1D2A4D;
    font-size: larger;
}
#sixtnp{
    font-size: 1.563rem;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 2.5rem;
    font-weight: bold;
}
#sixtnp b{
    color: #006400;
}
#sevtnp{
    font-size: 1.125rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    margin-bottom: 2.5rem;
}
#eitnp{
    font-size: 1.563rem;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 2.5rem;
    font-weight: bold;
}
#eitnp b{
    color: #006400;
}
#nitnp{
    font-size: 1.125rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    margin-bottom: 2.5rem;
}
#twenp{
    font-size: 1.563rem;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 2.5rem;
    font-weight: bold;
}
#twenp b{
    color: #006400;
}
#twen1p{
    font-size: 1.125rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    margin-bottom: 2.5rem;
}
#twen2p{
    font-size: 2.5rem;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #006400;
    text-align: left;
    height: 4.375rem;
    font-weight: bolder;
    margin-bottom: 1.875rem;
    color: white;
    margin-left: 25rem;
    padding-left: 6.25rem;
}
#twen2p b{
    color: white;
}
#twen3p{
    font-size: 1.063rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-bottom: 2.5rem;
    text-align: center;
}
#twen4p{
    font-size: 2.5rem;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #006400;
    text-align: right;
    padding-right: 6.25rem;
    height: 4.375rem;
    padding-top: 0.4rem;
    font-weight: bolder;
    margin-bottom: 1.875rem;
    width: 56.25rem;
    color: white;
}
#twen4p b{
    color: white;
}
.grid-container2{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    margin-bottom: 4.375rem;
}
#twen5p{
    margin-bottom: 0.938rem;
    text-align: center;
}
#twen6p{
    font-size: 1.125rem;
    text-align: center;
    padding-bottom: 0.625rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}
#twen6p li{
    list-style-type: none;
}
#twen7p{
    font-size: 1.125rem;
    padding-bottom: 0.625rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
}
#twen8p{
    font-size: 1.125rem;
    padding-bottom: 0.625rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-weight: lighter;
    list-style-type: square;
}
#grid-item4{
    grid-column: 1/2;
    grid-row: 1/2;
}
#grid-item5{
    grid-column: 2/3;
    grid-row: 1/2;
}
#twen9p{
    font-size: 2.5rem;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(34,38,75,255);
    text-align: center;
    height: 4.375rem;
    padding-top: 1.25rem;
    margin-bottom: 3.75rem;
    font-weight: bold;
    color: rgba(133,3,69,255);
}
#twen9p b{
    color: rgb(57, 115, 221);
}
.grid-container3{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto;
}
#team{
    height: 9.375rem;
    width: 9.375rem;
    border-radius: 6.25rem;
}
#twen10p a{
    text-decoration: none;
    color: rgba(133,3,69,255);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: larger;
}
#twen10p a:hover{
    text-decoration: underline;
    color: rgb(57, 115, 221);
}
#thirty1p{
    font-size: large;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.grid-container4{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    margin-bottom: 6.25rem;
}


/* Footer BEgins------------------------- */
.footer_begins{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 340px;
    background-color: skyblue;
    padding-top: 6rem;
    padding-left: 3.65rem;
    background-color: rgba(34, 38, 75, 255);
     

}
.first_foot{
    grid-row: 1;
    grid-column: 1;
    color: green;
 }
 .first_foot h1{
    font-size: 2.3rem;
    color: brown;
}
.first_foot h3{
    color: brown;
}
.first_foot p{
    line-height: 1.5;
    color: white;
    font-size: 1rem;
}
.second_foot{
    grid-row: 1;
    grid-column: 2;
    line-height: 2.5;
}
.second_foot p{
    color: white;
    font-size: 1rem;
}
.second_foot h2{
    color: brown;
}
.second_foot p{
    font-size: 0.9rem;
}
.second_foot span{
    margin-left: -1rem;

}
.second_foot span a{
color:white ;
text-decoration: none;
}
.second_foot span i{
    margin: 0.8rem;
    font-size: 2.5rem;
    color: white;
}
.second_foot span i:hover{
    color: gray;
}
.foot{
    color: brown;
    font-size: 1.3rem;
}
.third_foot{
    grid-row: 1;
    grid-column: 3;
    line-height: 2;
}
.third_foot h2{
    color: brown;
}
.third_foot ul li{
    list-style-type: none;
}
.third_foot ul li a{
    color: white;
    text-decoration: none;
}
.third_foot ul li a:hover{
    text-decoration: underline;
}
.fourth_foot{
    grid-row: 1;
    grid-column: 4;
}
.fourth_foot h2{
    color: brown;
    line-height: 2;
}
.fourth_foot p{
    line-height: 1.5;
    color: white;
    font-size: 1rem;
}
.fourth_foot p b{
    color: gray;
    font-size: 0.9rem;
}
.fourth_foot input{
    background-color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: none;
}
.fourth_foot button{
    padding-top: 0.5rem;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
    padding-bottom: 0.5rem;
    border-bottom-right-radius: 5px ;
    border-top-right-radius: 5px ;
    margin-left: -6px;
    color: white;
    background-color: brown;
    border: none;
    font-weight: bold;
}
.fourth_foot button:hover{
    background-color:white ;
    color:brown ;
    border-left: outset;
    border-color: rgba(34, 38, 75, 255);
}
.fourth_foot button:active{
    position: relative;
    top: 1px;
}
.fourth_foot ::placeholder{
             color: gray;
}

.last_foot{
    display: grid;
    grid-template-rows: 4.5rem;
    grid-template-columns: 60% 40%;
    background-color: rgba(34, 38, 75, 255);
    border-top-style: outset;
    border-color: gray;
    padding-left: 3.65rem;
    padding-top: 2rem;
    border-width: 1.5px;
}
.first_copy{
    grid-row: 1;
    grid-column: 1;
}
.first_copy p{
    color: white;
}
.first_copy a{
    color: brown;
    text-decoration: none;
}
.first_copy a:hover{
    color: rgb(138, 58, 58);
    text-decoration: underline;
}
.second_copy{
    grid-column: 2;
    grid-row: 1;
    padding-left: 4rem;
}
.second_copy ul li{
    display: inline;
    margin: 1rem;
}
.second_copy a{
    color: white;
    text-decoration: none;
}
.second_copy a:hover{
    color: gray;
    text-decoration: underline;
}





                                            /* RESPONSIVENESS */



@media screen and (max-width: 771px) {
    #eitp{
    padding-bottom: 3.75rem;
    }
    .grid-container{
    display: grid;
    height: 12.5rem;
    margin-left: 6.25rem;
    margin-bottom: 3.125rem;
    }
    #ninp{
    font-size: 4.375rem;
    padding-top:3.125rem;
    }
    #tenp{
    font-size: 1.25rem;
    }
    #elep{
    font-size: 4.375rem;
    padding-left: 3.125rem;
    padding-top: 3.125rem;
    }
    #twep{
    font-size: 1.25rem;
    padding-left:2.1875rem;
    }
    #thtp{
    font-size: 4.375rem;
    padding-top: 3.125rem;
    padding-left:3.125rem;
    }
    #foyp{
    font-size: 1.25rem;
    padding-left:3.75rem;
    }
    #twen2p{
    margin-left: 12.5rem;
    }
    #twen4p{
    width: 43.75rem;      
    }
    #team{
    height: 7.5rem;
    width: 7.5rem;
    }
    #thirty1p{
    font-size: medium;
    }
}



@media screen and (max-width: 706px) {
    #fifp{
    font-size: 0.938rem;
    }
    #sixp{
    font-size: 0.938rem;
    }
    #sevp{
    font-size: 0.938rem;
    }
    #eitp{
    font-size: 0.938rem;
    }
    #sevtnp{
    font-size: 0.938rem;
    margin-bottom: 1.875rem;
    }
    #sixtnp{
    font-size: 1.25rem;
    margin-bottom: 1.875rem;
    }
    #eitnp{
    font-size: 1.25rem;
    margin-bottom: 1.875rem;
    }
    #nitnp{
    font-size: 0.938rem;
    margin-bottom: 1.875rem;
    }
    #twenp{
    font-size: 1.25rem;
    margin-bottom: 1.875rem;
    }
    #twen1p{
    font-size: 0.928rem;
    margin-bottom: 1.875rem;
    }
    #twen4p{
    width: 31.25rem;
    text-align: left;
    padding-right: 0;
    }
    #twen6p{
    font-size: 0.938rem;
    }
}


@media screen and (max-width: 600px) {
    #ninp{
    font-size: 3.125rem;
    padding-top:3.125rem;
    }
    #tenp{
    font-size: 0.938rem;
    }
    #elep{
    font-size: 3.125rem;
    padding-left: 3.125rem;
    padding-top: 3.125rem;
    }
    #twep{
    font-size: 0.938rem;
    padding-left:2.1875rem;
    }
    #thtp{
    font-size: 3.125rem;
    padding-top: 3.125rem;
    padding-left:3.125rem;
    }
    #foyp{
    font-size: 0.938rem;
    padding-left:3.75rem;
    }
    #twen5p{
    font-size: 1.25rem;
    margin-bottom: 0.625rem;
    }
    #twen7p{
    font-size: 0.938rem;
    padding-right: 0.313rem;
    }
    #twen8p{
    font-size: 0.938rem;
    padding-left: 0.313rem;
    }
    #twen8p li{
        list-style-type: none;
        line-height: 1.5;
    }
    #thirty1p{
    font-size: small;
    }
    #team{
    height: 6.25rem;
    width: 6.25rem;
    }
    #twen3p{
    font-size: 0.75rem;
    margin-bottom: 2.5rem;
    }
}

@media screen and (max-width: 555px) {
    #twen2p{
    font-size: 1.875rem;
    }
    #twen4p{
    font-size: 1.875rem;
    width: 25rem;
    }
    #ninp{
    font-size: 3.125rem;
    padding-top:3.125rem;
    padding-left: 9.375rem;
    }
    #tenp{
    font-size: 0.938rem;
    padding-left: 9.375rem;
    }
}


@media screen and (max-width: 695px) {
    #twen4p{
    padding-left: 3.125rem;
    }
}


@media screen and (max-width: 525px) {
    #ninp{
    padding-left: 6.25rem;
    }
    #tenp{
    padding-left: 6.25rem;
    }
}


@media screen and (max-width: 500px) {
    #twen2p{
    padding-left: 3.125rem;
    }
}


@media screen and (max-width: 500px) {
    #ninp{
    padding-left: 5rem;
    }
    #tenp{
    padding-left: 5rem;
    }
    #twen9p{
    font-size: 1.875rem;
    }
    #team{
    height: 5rem;
    width: 5rem;
    }
    #twen10p a{
    font-size: medium;
    }
}


@media screen and (max-width: 500px) {
    #ninp{
    padding-left: 3.75rem;
    }
    #tenp{
    padding-left: 3.75rem;
    }
    #twen2p{
    padding-left: 1.875rem;
    }
}


@media screen and (max-width: 430px) {
    #ninp{
    padding-left: 1.25rem;
    }
    #tenp{
    padding-left: 1.25rem;
    }
    .first{
    display: none;
    }
}


@media screen and (max-width: 425px) {
    #twen2p{
    padding-left: 0;
    }
}
@media screen and (max-width:512px){
    .second_foot span i{
        font-size:2rem;
    }
}
@media screen and (max-width:697px){
    .sixth_upper h4{
        font-size: 0.7rem
    }
}

@media screen and (max-width:695px){
    .last_foot{
         grid-template-rows: 4rem 3rem;
         grid-template-columns: auto;
    }
    .first_copy{
    grid-row: 1;
    grid-column: 1;
}
    .second_copy{
    grid-column: 1;
    grid-row: 2;
    padding-left: 0px;
}
}
@media screen and (max-width:728px){
    .chatroom_2{
        display:none;
    }
    .chatroom:hover{
        display: inline;
    }
}
@media screen and (max-width:619px){
    .upper_class{
        grid-template-columns: 7% 15% 15% 25% 10% 25%;
    }
}
@media screen and (max-width:506px){
    .fourth_foot input{
        width:5rem;
    }
}
@media screen and (max-width:955px){
    .footer_begins{
    display:grid;
    grid-template-columns: auto auto;
    grid-template-rows: 300px 300px;
    padding-left: 3rem;      
    }
    .first_foot{
        grid-row: 1;
        grid-column:1;
    }
    .second_foot{
        grid-row: 1;
        grid-column:2;
        }
    .third_foot{
        grid-row: 2;
        grid-column:1;
        }
.fourth_foot{
      grid-row: 2;
      grid-column:2;
         }
}

@media screen and (max-width:664px){
    .icons{
        grid-template-rows:24px 24px 20px;
        grid-template-columns:30% 50% auto;
    }
    .third{
        grid-row:2;
        grid-column: 2;
    }
   .reach_upper{
         grid-row:3;
         grid-column: 2; 
    }
}
@media screen and (max-width:859px){
    .second_upper{
        grid-row: 1;
        grid-column: 1;
    }
        
    }
    @media screen and (max-width:625px){
        .second_upper img{
           width:10rem;
        }
    }
    @media screen and (max-width:505px){
        .upper_class{
            grid-template-rows: 90px;
        }
    }
    @media screen and (max-width:627px){
        .all_nav span{
            font-size: 0.7rem;
        }
    }
    
    @media screen and (max-width:518px){
        .all_nav span{
            font-size: 0.6rem;
        }
    }