*{
 margin: 0;
    padding: 0;
    
}
    
#homesection{
 background: rgb(54,138,4);
background: rgb(103,48,155);
background: linear-gradient(0deg, rgba(103,48,155,0.7413559173669468) 9%, rgba(123,5,186,0.53687412464986) 38%, rgba(32,36,31,0.3744091386554622) 100%),url(scouts.jpg);
    background-size: cover;
    background-position: center; 
    height: 100vh; 
  
   
}


.logo{
 width: 360px;  
position: absolute ;
top: 3%;
    margin-left: 9px;
    left: 20px;
}


#nav{
 position: absolute;
    right: .1px;
    top: 9%;
background: rgb(141,36,161);
background: linear-gradient(90deg, rgba(141,36,161,1) 0%, rgba(119,71,133,0.8772102591036415) 53%, rgba(143,4,170,0.3421962535014006) 100%);
    border-bottom-left-radius: 10px;
    border-top-left-radius: 5px;
}
    
nav li{
    display:inline-block;
margin: 16px;
}  

.navlinks li a { 
 transition: all 3.0s ease 0s;    
    
}

nav ul li a {
    
    color: white;
     font-size: 20px;
    font-family: 'DM Sans', sans-serif;
text-decoration: none; 
margin: 2px;
    padding: 10px;

}

.navlinks li a { 
 transition: all 3.0s ease 0s;    
    
}

.navlinks li a:hover {   
color:darkorange; 
text-decoration: overline;
}

.hometext{
    color: white;
    text-align: center;
    text-overflow: clip;
    padding-top: 15.5%;
    padding-left:2%;
    font-size: 78px;
font-family: 'Grape Nuts', cursive;

}


.findmore-btn{
  margin: 70px auto 0; 
}

.findmore-btn a{
    width: 150px;
    text-decoration: none;
    margin: 20px 0;
    padding-top: 20px ;
    padding-bottom: 20px;
    padding-right: 5px ;
    padding-left: 25px ;
    color: white;
    border: 2px solid white; 
    border-radius: 16px;
    font-size: 21px; 
    position:absolute;
    left: 43%;
    top: 47%;
    font-family: 'DM Sans', sans-serif;
z-index: 1;
    transition: color 3s;
    
    
}

.findmore-btn a span{
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 10;
    background-color: white;
    z-index: -1;
    transition: 1s;
    border-radius: 11px;
    
}

.findmore-btn a:hover span{
    width: 100%;
    
}

.findmore-btn a:hover{
    color: green;
}

#aboutus{
    
    color: purple;
    font-size: 45px;
    position:  absolute;
    top: 28%;
    left: 3%;
    font-family: 'Kalam', cursive;
}
 
#aboutscreen{
   padding-bottom:180px;
    background: linear-gradient(0deg, rgba(103,48,155,0.7413559173669468) 9%, rgba(123,5,186,0.53687412464986) 38%, rgba(32,36,31,0.3744091386554622) 100%),url(scoutscompass.jpg);
    background-size:cover;
    background-position:center; 
    margin-bottom:70%;
}

.scoutsabout1{
    
position: absolute;
top: 38%;
left: 40px;
font-size: 20px;  
margin-right: 50px;
word-spacing: 2px;
font-family: 'DM Sans', sans-serif;
}

.scoutsabout2{
 position: absolute;
 top: 52%;
left: 40px;
font-size: 20px;
margin-right: 50px;
    word-spacing: 2px;
font-family: 'DM Sans', sans-serif;
    
}
.scoutsabout3{
 position: absolute;
 top:68%;
left: 40px;
font-size: 20px;
margin-right: 50px;
    word-spacing: 2px;
font-family: 'DM Sans', sans-serif;
}

.container{
position: relative;
width: 1000px;
height: 100px;
bottom:  450px;
left: 19%;

}

.container .box{
 position: relative;
 width: 300px;
 height: 250px;
background: limegreen;
    box-shadow: 8px 2px 25px 0px rgba(0,0,0,0.75);
float:left;
margin: 15px; 
box-sizing: border-box;
overflow: hidden;
border-radius: 35px; 
}

.container .box .icon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: purple;
transition: 1s;
z-index: 1;   
}

.container .box:hover .icon{
top: 0px;
right: 50px;
width: 0px;
height: 20px;
border-radius: 50%;
}
 
.container .box .icon .title{
position: absolute;
top: 28%;
left: 17%; 
font-size: 60px;
transition: 1s;
font-family: 'Courgette', cursive;
color: white;
}

.container .box:hover .icon .title{
  font-size: 40px; 
 color:white;
}

.container .box .content{
    
position: absolute;
height: 100%;
text-align: center;
padding: 20px;
box-sizing: border-box;
top: 60px;
font-size: 16px;
color: white;
font-family: 'DM Sans', sans-serif;
}

#footer{
background-color: purple;
height: 280px;

}



.footertitle{
position: absolute;
padding-top: 30px;
margin: 20px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.footeraddress{
position: absolute;
margin: 20px;
padding-top: 80px;
color: white;
font-family: 'DM Sans', sans-serif;
font-size: 18px;
}

.footeremail{
color: aliceblue;
position: absolute;
padding-top: 110px;
margin: 20px;
font-size: 17px;
font-family: 'DM Sans', sans-serif;
}
.airedaleemail:link, a:visited, a:active {
    color:white; 
    text-decoration: none; 
    font-family: 'DM Sans', sans-serif;   
}
.airedaleemail:hover{
  color: lime; text-decoration: underline; font-weight: bolder; 
 transition: 1s;
}
.scoutslink{
  text-decoration: underline;
    color: aliceblue;
    
}
.scoutslink:hover{
    color: purple;
    transition: 1s;
    text-decoration: underline;
    font-weight: bolder;
}
#beaverscreen{
padding-bottom:180px;
    background: linear-gradient(0deg, rgba(103,48,155,0.7413559173669468) 9%, rgba(123,5,186,0.53687412464986) 38%, rgba(32,36,31,0.3744091386554622) 100%),url(scoutscompass.jpg);
    background-size:cover;
    background-position:center; 
    margin-bottom: 85%;
}
   
#beaverheader{

    
    color: purple;
    font-size: 45px;
    position:  absolute;
    top: 29%;
    left: 3%;
 font-family: 'Kalam', cursive;

}

#beaveractivities{
   color: purple;
    font-size: 39px;
    position:  absolute;
    top: 64%;
    left: 3%;
 font-family: 'Kalam', cursive;  
}

#beavercontact{
   color: purple;
    font-size: 39px;
    position:  absolute;
    top: 92%;
    left: 3%;
 font-family: 'Kalam', cursive; 
}
.beaverinfo1{
    
position: absolute;
top: 39%;
left: 40px;
font-size: 20px;  
margin-right: 600px;
word-spacing: 7px;
font-family: 'DM Sans', sans-serif;
}

.beaverinfo2{
position: absolute;
top: 72%;
left: 40px;
font-size: 20px;  
margin-right: 600px;
word-spacing: 7px;
font-family: 'DM Sans', sans-serif;
}
.beavercontactinfo{
position: absolute;
top: 100%;
left: 40px;
font-size: 20px;  
margin-right: 600px;
word-spacing: 7px;
font-family: 'DM Sans', sans-serif;
}
    
.beaveremail{
color: black;
text-decoration: underline;
}
.beaveremail:hover{
  color: limegreen; text-decoration: underline; font-weight: bolder; 
 transition:  1s;
}

.beavercontainer{
position: absolute;
width: 0px;
height: 100px;
top: 230px;
left: 72%;

}

.beavercontainer .beaverbox{
 position: relative;
 width: 400px;
 height: 500px;
background: green;
margin: 5px; 
box-sizing: border-box;
overflow: hidden;
border-bottom-left-radius: 65px; 
border-top-left-radius: 67px; 
border-top-right-radius: 45px;
}

.beavercontainer .beaverbox .beavericon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(103,48,155,0.7413559173669468) 9%, rgba(123,5,186,0.53687412464986) 38%, rgba(32,36,31,0.3744091386554622) 100%),url(beaver.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right;
transition: 1s;
z-index:1 ;   
}

.beavercontainer .beaverbox:hover .beavericon{
top: 0px;
right: 0px;
width: 500px;
height: 0px;


}
 
.beavercontainer .beaverbox .beavericon .beavertraits{
position: absolute;
top: 28%;
left: 12%; 
font-size: 40px;
transition: 1s;
font-family: 'Courgette', cursive;
color: white;
}

.beavercontainer .beaverbox:hover .beavericon .beavertraits{
  font-size: 0px; 
color: purple;


}

.beavercontainer .beaverbox .beaverqualtitle {
    
position: absolute;
height: 100%;
text-align: center;
padding: 20px;
box-sizing: border-box;
top: 0px;
font-size: 33px;
color: white;
font-family: 'Courgette', cursive;
}

.beavercontainer .beaverbox .beaverqual1{
position: absolute;
top: 60px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.beavercontainer .beaverbox .beaverqual2{
position: absolute;
top: 120px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.beavercontainer .beaverbox .beaverqual3{
position: absolute;
top: 170px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.beavercontainer .beaverbox .beaverqual4{
position: absolute;
top: 230px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.beavercontainer .beaverbox .beaverqual5{
position: absolute;
top: 300px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.beavercontainer .beaverbox .beaverqual6{
position: absolute;
top: 350px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer{
position: absolute;
width: 0px;
height: 100px;
top: 230px;
left: 72%;

}

.cubscontainer .cubsbox{
 position: relative;
 width: 400px;
 height: 500px;
background: green;
margin: 5px; 
box-sizing: border-box;
overflow: hidden;
border-bottom-left-radius: 65px; 
border-top-left-radius: 67px;
border-top-right-radius: 45px;
}

.cubscontainer .cubsbox .cubsicon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(103,48,155,0.7413559173669468) 9%, rgba(123,5,186,0.53687412464986) 38%, rgba(32,36,31,0.3744091386554622) 100%),url(cubsinfobox.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
z-index:1 ;   
}

.cubscontainer .cubsbox:hover .cubsicon{
top: 0px;
right: 0px;
width: 500px;
height: 0px;


}
 
.cubscontainer .cubsbox .cubsicon .cubstraits{
position: absolute;
top: 28%;
left: 12%; 
font-size: 40px;
transition: 1s;
font-family: 'Courgette', cursive;
color: white;
}

.cubscontainer .cubsbox:hover .cubsicon .cubstraits{
  font-size: 0px; 
color: purple;


}

.cubscontainer .cubsbox .cubsqualtitle {
    
position: absolute;
height: 100%;
text-align: center;
padding: 20px;
box-sizing: border-box;
top: 0px;
font-size: 33px;
color: white;
font-family: 'Courgette', cursive;
}

.cubscontainer .cubsbox .cubsqual1{
position: absolute;
top: 60px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer .cubsbox .cubsqual2{
position: absolute;
top: 120px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer .cubsbox .cubsqual3{
position: absolute;
top: 170px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer .cubsbox .cubsqual4{
position: absolute;
top: 230px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer .cubsbox .cubsqual5{
position: absolute;
top: 300px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer .cubsbox .cubsqual6{
position: absolute;
top: 350px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}



.scoutscontainer{
position: absolute;
width: 0px;
height: 100px;
top: 230px;
left: 72%;

}

.scoutscontainer .scoutsbox{
 position: relative;
 width: 400px;
 height: 500px;
background: green;
margin: 5px; 
box-sizing: border-box;
overflow: hidden;
border-bottom-left-radius: 65px; 
border-top-left-radius: 67px;
border-top-right-radius: 45px;
}

.scoutscontainer .scoutsbox .scoutsicon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(103,48,155,0.7413559173669468) 9%, rgba(123,5,186,0.53687412464986) 38%, rgba(32,36,31,0.3744091386554622) 100%),url(scoutstraits.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: 1s;
z-index:1 ;   
}

.scoutscontainer .scoutsbox:hover .scoutsicon{
top: 0px;
right: 0px;
width: 500px;
height: 0px;


}
 
.scoutscontainer .scoutsbox .scoutsicon .scoutstraits{
position: absolute;
top: 28%;
left: 12%; 
font-size: 40px;
transition: 1s;
font-family: 'Courgette', cursive;
color: white;
}

.scoutscontainer .scoutsbox:hover .scoutsicon .scoutstraits{
  font-size: 0px; 
color: purple;


}

.scoutscontainer .scoutsbox .scoutsqualtitle {
    
position: absolute;
height: 100%;
text-align: center;
padding: 20px;
box-sizing: border-box;
top: 0px;
font-size: 33px;
color: white;
font-family: 'Courgette', cursive;
}

.scoutscontainer .scoutsbox .scoutsqual1{
position: absolute;
top: 60px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.scoutscontainer .scoutsbox .scoutsqual2{
position: absolute;
top: 120px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.scoutscontainer .scoutsbox .scoutsqual3{
position: absolute;
top: 170px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.scoutscontainer .scoutsbox .scoutsqual4{
position: absolute;
top: 230px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.scoutscontainer .scoutsbox .scoutsqual5{
position: absolute;
top: 300px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.scoutscontainer .scoutsbox .scoutsqual6{
position: absolute;
top: 350px;
margin: 30px;
left: 8px;
font-size: 19px;
color: white;
font-family: 'DM Sans', sans-serif;
}


#contactscreen{
padding-bottom: 180px;
    background: linear-gradient(0deg, rgba(103,48,155,0.7413559173669468) 9%, rgba(123,5,186,0.53687412464986) 38%, rgba(32,36,31,0.3744091386554622) 100%),url(scoutscompass.jpg);
    background-size:cover;
    background-position:center; 
    margin-bottom: 0%;}


.section-contact{
min-height: 100vh;
padding-top: 120px;
padding-bottom: 10px;

}

.contactcontainer{
max-width: 1200px;
margin: 0 auto;
padding-left: 62px;
padding-right: 3px;
padding-bottom: 50px;
}

.contacttitle{
color: purple;
font-size: 47px;
text-transform: uppercase;
margin-bottom: 16px;
font-family: 'Courgette', cursive;
}

.contactheading{
font-size: 18px;
line-height: 1.5;
margin-top: 42px;
font-family: 'DM Sans', sans-serif;
}

form{
 display: grid;
grid-gap: 14px;
background-color: white;
padding: 32px;
border-radius: 32px;
box-shadow: 0px 6px 12px rgba(0, 0, 0.2);

}
    label {
        color: green;
        display: block;
    font-family: 'DM Sans', sans-serif;
    } 
    
.thankyou{
    color: purple;
    position: absolute;
    top: 50%;
    left: 16%;
    font-size: 45px;
font-family: 'Courgette', cursive;

   
}
.backtohome{
    position: absolute;
    top: 65%;
    left: 42%;
    background: purple;
    padding: 22px;
    border-radius: 20px
}


.backhome:link, a:visited, a:active {
    color:white; 
    text-decoration: none; 
    font-family: 'DM Sans', sans-serif;   
}
.backhome:hover{
  color: lime; text-decoration: underline; font-weight: bolder; 
 transition: 1s;
}
 
.skip{
    position: absolute;
    top: 29%;
    right: 3%;
    background: purple;
    padding: 17px;
    border-radius: 20px
}


.skippage:link, a:visited, a:active {
    color:white; 
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;   
}
.skippage:hover{
  color: lime; text-decoration: underline; font-weight: bolder; 
 transition: 1s;
}


.skip2{
    position: absolute;
    top: 112%;
    left: 2%;
    background: purple;
    padding: 22px;
    border-radius: 20px
}


.skippage2:link, a:visited, a:active {
    color:white; 
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;   
}
.skippage2:hover{
  color: lime; text-decoration: underline; font-weight: bolder; 
 transition: 1s;
}


/* This is the CSS for mobile sized screen */



@media only screen and (max-width:1215px){
    
.logo{
 width: 45%;  
position: absolute ;
top: 5%;
margin-left: 5px; 
    }
    
 .hometext{
    color: white;
    text-align: center;
    padding-top: 60%;
    padding-left:2%;
    font-size: 40px;
    font-family: 'Caveat Brush', cursive;
font-family: 'Contrail One', cursive;
font-family: 'Grape Nuts', cursive; 
}
    
 
.findmore-btn{
  margin: 80px auto 0; 
}

.findmore-btn a{
    width: 140px;
    text-decoration: none;
    margin: 50px 0;
    padding-top: 15px ;
    padding-bottom: 10px;
    padding-right: 4px;
    padding-left: 15px;
    border: 2px solid white; 
    border-radius: 16px;
    font-size: 21px; 
    position:absolute;
    left: 30%;
    top: 49%;
    font-family: 'Kalam', cursive;
z-index: 1;
    transition: color 3s;
    
    
}

.findmore-btn a span{
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 10;
    background-color: white;
    z-index: -1;
    transition: 1s;
    border-radius: 11px;
    
}

.findmore-btn a:hover span{
    width: 100%;
    
}

.findmore-btn a:hover{
    color: green;     
}
    
#nav{
 position: absolute;
    top: 21%;
background: rgb(3,79,13);
background: green;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    
}
    
#nav li{
    display:inline-block;
margin:1px;
margin-left: 0px;
    

}   
#nav ul li a {
    
    color: white;
     font-size: 15px;
    font-family:'League Spartan', sans-serif;
text-decoration: none; 
margin: 2px;
    padding: 2px;
    padding-left: 5px;
    list-style: none;
    z-index: 1;
    

}

.navlinks li a { 
 transition: all 3.0s ease 0s;    
    
}

.navlinks li a:hover {   
color:gold; 
text-decoration: overline;
}
    
    #aboutscreen{
   padding-bottom:130px;
    background: linear-gradient(0deg, rgba(103,48,155,0.7413559173669468) 9%, rgba(123,5,186,0.53687412464986) 38%, rgba(32,36,31,0.3744091386554622) 100%),url(scoutscompass.jpg);
    background-size:cover;
    background-position:center;
    height: 5vh;
    margin-bottom: 175%; 
}
    
    #aboutus{
    
    color: purple;
    font-size: 30px;
    position:  absolute;
    top: 28%;
    left: 6%;
    font-family: 'Kalam', cursive;
}


.scoutsabout1{
    
position: absolute;
top: 36%;
left: 6%;
font-size: 16px;  
margin-right: 45px;
font-family: 'DM Sans', sans-serif;
    word-spacing: 2px;
}

.scoutsabout2{
 position: absolute;
 top: 70%;
left: 6%;
font-size: 16px;
margin-right: 45px;
font-family: 'DM Sans', sans-serif;
word-spacing: 2px
  }
.scoutsabout3{
 position: absolute;
 font-size: 0px;
}
    
.container{
position: absolute;
width: 100px;
height: 5px;
top: 10%;
left: 13%;
}



.container .box{
 position: relative;
 width: 0px;
 height: 0px;
    }
    

#footer{
background-color: purple;
height: 0px;
position: absolute;
 



}

.logofooter{
width: 0px;

}
.footertitle{
font-size: 0px;
 
}

.footeraddress{
font-size: 0px;
}

.footeremail{
font-size: 0px;
}
.airedaleemail:link, a:visited, a:active {
    color:black; 
    text-decoration: none; 
    font-family: 'Nunito', sans-serif;     
}
.airedaleemail:hover{
  color: lime; text-decoration: underline; font-weight: bolder; 
 transition: 1s;
}
.scoutslink{
  text-decoration: underline;
    color: aliceblue;
    
}
.scoutslink:hover{
    color: darkorange;
    transition: 1s;
    text-decoration: underline;
    font-weight: bolder;}
    
    #beaverscreen{
   padding-bottom:130px;
    background: linear-gradient(0deg, rgba(103,48,155,0.7413559173669468) 9%, rgba(123,5,186,0.53687412464986) 38%, rgba(32,36,31,0.3744091386554622) 100%),url(scoutscompass.jpg);
    background-size:cover;
    background-position:center;
    height: 5vh;

    }
    
   

#beaverheader{

    
    color: purple;
    font-size: 30px;
    position:  absolute;
    top: 26%;
    left: 5%;
 font-family: 'Kalam', cursive;

}

#beaveractivities{
   color: purple;
    font-size: 30px;
    position:  absolute;
    top: 64%;
    left: 5%;
 font-family: 'Kalam', cursive;  
}

#beavercontact{
   color: purple;
    font-size: 30px;
    position:  absolute;
    top: 95%;
    left: 5%;
 font-family: 'Kalam', cursive; 
}
.beaverinfo1{
    
position: absolute;
top: 34%;
left: 20px;
font-size: 14px;  
margin-right: 40px;
word-spacing: 2px;
font-family: 'DM Sans', sans-serif;
}

.beaverinfo2{
position: absolute;
top: 72%;
left: 20px;
font-size: 14px;  
margin-right: 40px;
word-spacing: 2px;
font-family: 'DM Sans', sans-serif;
}

.beavercontactinfo{
position: absolute;
top: 104%;
left: 20px;
font-size: 14px;  
margin-right: 40px;
word-spacing: 2px;
font-family: 'DM Sans', sans-serif;
}
.beaveremail{
color: purple;
text-decoration: underline;
    }
.beavercontainer{
position: absolute;
width: 100px;
height: 300px;
top: 120%;
left: 2%;

}

.beavercontainer .beaverbox{
 position: relative;
 width: 350px;
 height: 280px;
background: green;
margin: 5px; 
box-sizing: border-box;
overflow: hidden;
border-radius: 5px; 
}

.beavercontainer .beaverbox .beavericon{
z-index:0 ;   
}


 
.beavercontainer .beaverbox .beavericon .beavertraits{ 
font-size: 0px;
}

.beavercontainer .beaverbox: .beavericon .beavertraits{
  font-size: 0px; 
color: purple;


}

.beavercontainer .beaverbox .beaverqualtitle {
    
position: absolute;
height: 100%;
padding: 2px;
box-sizing: border-box;
top: 2px;
left: 9px;
font-size: 22px;
color: white;
font-family: 'Courgette', cursive;
}

.beavercontainer .beaverbox .beaverqual1{
position: absolute;
top: 15%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.beavercontainer .beaverbox .beaverqual2{
position: absolute;
top: 29%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.beavercontainer .beaverbox .beaverqual3{
position: absolute;
top: 45%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.beavercontainer .beaverbox .beaverqual4{
position: absolute;
top: 60%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.beavercontainer .beaverbox .beaverqual5{
position: absolute;
top: 73%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.beavercontainer .beaverbox .beaverqual6{
position: absolute;
top: 86%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}
    
.cubscontainer{
position: absolute;
width: 100px;
height: 300px;
top: 120%;
left: 2%;

}

.cubscontainer .cubsbox{
 position: relative;
 width:350px;
 height: 280px;
background: green;
margin: 5px; 
box-sizing: border-box;
overflow: hidden;
border-radius: 5px; 
}

.cubscontainer .cubsbox .cubsicon{
z-index:0 ;   
}


 
.cubscontainer .cubsbox .cubsicon .cubstraits{ 
font-size: 0px;
}

.cubscontainer .cubsbox: .cubsicon .cubstraits{
  font-size: 0px; 
color: purple;


}

.cubscontainer .cubsbox .cubsqualtitle {
    
position: absolute;
height: 100%;
padding: 2px;
box-sizing: border-box;
top: 2px;
left: 9px;
font-size: 22px;
color: white;
font-family: 'Courgette', cursive;
}

.cubscontainer .cubsbox .cubsqual1{
position: absolute;
top: 15%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer .cubsbox .cubsqual2{
position: absolute;
top: 29%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer .cubsbox .cubsqual3{
position: absolute;
top: 45%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer .cubsbox .cubsqual4{
position: absolute;
top: 60%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer .cubsbox .cubsqual5{
position: absolute;
top: 73%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.cubscontainer .cubsbox .cubsqual6{
position: absolute;
top: 86%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}
    
.scoutscontainer{
position: absolute;
width: 100px;
height: 300px;
top: 120%;
left: 2%;

}

.scoutscontainer .scoutsbox{
 position: relative;
 width:350px;
 height: 280px;
background: green;
margin: 5px; 
box-sizing: border-box;
overflow: hidden;
border-radius: 5px; 
}

.scoutscontainer .scoutsbox .scoutsicon{
z-index:0 ;   
}


 
.scoutscontainer .scoutsbox .scoutsicon .scoutstraits{ 
font-size: 0px;
}

.scoutscontainer .scoutsbox: .scoutsicon .scoutstraits{
  font-size: 0px; 
color: purple;


}

.scoutscontainer .scoutsbox .scoutsqualtitle {
    
position: absolute;
height: 100%;
padding: 2px;
box-sizing: border-box;
top: 2px;
left: 9px;
font-size: 22px;
color: white;
font-family: 'Courgette', cursive;
}

.scoutscontainer .scoutsbox .scoutsqual1{
position: absolute;
top: 15%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.scoutscontainer .scoutsbox .scoutsqual2{
position: absolute;
top: 29%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.scoutscontainer .scoutsbox .scoutsqual3{
position: absolute;
top: 45%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.scoutscontainer .scoutsbox .scoutsqual4{
position: absolute;
top: 60%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.scoutscontainer .scoutsbox .scoutsqual5{
position: absolute;
top: 73%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
font-family: 'DM Sans', sans-serif;
}

.scoutscontainer .scoutsbox .scoutsqual6{
position: absolute;
top: 86%;
margin: 5px;
left: 18px;
font-size: 15px;
color: white;
    font-family: 'DM Sans', sans-serif;}
    
    #contactscreen{
   padding-bottom:140px;
    background: linear-gradient(0deg, rgba(103,48,155,0.7413559173669468) 9%, rgba(123,5,186,0.53687412464986) 38%, rgba(32,36,31,0.3744091386554622) 100%),url(scoutscompass.jpg);
    background-size:cover;
    background-position:center;
    height: 5vh;
    margin-bottom: 0%; 
    } 
    
    .section-contact{
min-height: 100vh;
padding-top: 40px;
padding-bottom: 10px;
padding-right: 50px;



}

.contactcontainer{
max-width: 800px;
margin: 0 auto;
padding-left: 42px;
padding-right: 3px;
padding-bottom: 50px;
}

.contacttitle{
color: purple;
font-size: 27px;
text-transform: uppercase;
margin-bottom: 16px;
font-family: 'Courgette', cursive;
}

.contactheading{
font-size: 14px;
line-height: 1.5;
margin-top: 22px;
font-family: 'DM Sans', sans-serif;
}

form{
 display: grid;
grid-gap: 12px;
background-color: white;
padding: 22px;
border-radius: 32px;
box-shadow: 0px 6px 12px rgba(0, 0, 0.2);

}
    label {
        color: green;
        display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px
    } 

  .thankyou{
    color: purple;
    position: absolute;
    top: 30%;
    left: 8%;
      margin: 0 auto;
    font-size: 25px;
font-family: 'Courgette', cursive;

   
}
.backtohome{
    position: absolute;
    top: 45%;
    left: 22%;
    background: purple;
    padding: 22px;
    border-radius: 20px
}


.backhome:link, a:visited, a:active {
    color:white; 
    text-decoration: none; 
    font-family: 'DM Sans', sans-serif;   
}
.backhome:hover{
  color: lime; text-decoration: underline; font-weight: bolder; 
 transition: 1s;  
    }
.skip{
    position: absolute;
    top: 110%;
    left: 5%;
    background: purple;
    padding: 22px;
    border-radius: 20px
}


.skippage:link, a:visited, a:active {
    color:white; 
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;   
    font-size: 10px;
}
.skippage:hover{
  color: lime; text-decoration: underline; font-weight: bolder; 
 transition: 1s;
}

.skip2{
    position: absolute;
    top: 175%;
    left: 5%;
    background: purple;
    padding: 22px;
    border-radius: 20px
}


.skippage2:link, a:visited, a:active {
    color:white; 
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;   
    font-size: 10px;
}
.skippage2:hover{
  color: lime; text-decoration: underline; font-weight: bolder; 
 transition: 1s;
}
    
    
}