body{
    background-color: #F8F5F2;
    font-family: Inter, sans-serif;
    }



*{
margin: 0;
padding: 0;
box-sizing: border-box;
}



/*Nav bar same for all*/
    .backgroundnav{
        background-color: #255954;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 85px;
        width: auto;
    }



    .navtoppages{
        display: flex;
        list-style: none;
        font-family: inter, sans-serif;
        gap: 40px;
        color: #F8F5F2;
        font-size: 16px;
        
    }
    .navtoppages a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #F8F5F2;
        gap: 10px;
    }
    .nav-icon{
        width: 20px;
        height: auto;
    }


/*nav logo*/
    .pngbrand{
        padding: 16px;
        margin-left: 15px;
        margin-top: 10px;
    }
    .pngbrand img{
        width: 270px;
    }



    .rightsidenav{
        color: #F8F5F2;
        font-size: 16px;  
        padding: 16px;
        display: flex;
        margin: 10px;
        align-items: center;
    }
    .rightsidenav p{
        padding: 10px;
    }
    .rightsidenav img{
        height: 17px;
    }



    .hero{
        background-image: url('img/isis-northpaws-coverimage.JPG');
        height: 70vh;
		background-repeat: no-repeat;
		background-position: top center; 
		background-size: cover;
        display: flex;
        padding: 60px 60px 0px 120px;
        flex-direction: column;
        gap: 16px;
    }
    .hero h1{
        color: #F8F5F2;
        font-size: 48px;
        font-weight: 700;
        text-shadow: 0px 4px 4px rgba(0,0,0,0.5);
        width: 400px;
        margin-top: 80px;

    }
    .hero p{
         color: #F8F5F2;
         font-size: 16px;
         font-weight: 400;
         text-shadow: 0px 4px 4px rgba(0,0,0,0.5);
         width: 400px;
    }
    .hero a {
        color: #F8F5F2;
         font-size: 16px;
         background-color:#A66F0A;
         text-decoration: none;
         align-items: center;
         gap: 8px;
         font-weight: 400;
         border-radius: 16px;
         padding: 8px 16px;
         width: fit-content;
         display: flex;
    }
    .hero a img{
        width: 20px;
        display: block;
        object-fit:fill;
    }
.tagmatoux {
    background-color: #255954;
    width: fit-content;
    padding: 13px 16px;
    border-radius: 16px 16px 0 0;
    margin-top: auto;
    margin-left: 750px;
    
}
.tagmatoux p {
    color:#F8F5F2;
    font-size: 20px;
    font-weight: 600;
    width: auto;
    margin: 0;

}
    .aftertexthero {
        background-image: url('img/background-trees-samecolor.jpg');
        padding: 85px 50px;
        height: 60vh;
        gap: 24px;
		background-repeat: no-repeat;
		background-position: top; 
		background-size: cover;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        
    }
    .aftertexthero h2{
        font-weight: 400;
        font-size: 24px;
        color: #1E1E1E;
        width: 400px;
        padding-top: 30px;
        margin-left: 70px;

    }
    .aftertexthero p{
        font-weight: 500;
        font-size: 16px;
        color: #1E1E1E;
        width: 500px;
        padding-top: 50px;
    }


/*pinetreesimage*/
.pinetreesimage {
    background-image: url('img/topofpinetrees-northpaws.jpg');
   height: 200px;
   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;

}

/* Button style border rounded drop shadow*/
.buttonstyleborder{
    display:flex;
    justify-content: center;
    gap: 30px;
}
.buttonstyleborder a{
    background-color:#F8F5F2;
    color:#1E1E1E;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border: 2px solid #255954;
    border-radius: 16px;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
    margin: 70px;
    padding: 16px 40px;
    display: inline-block;
}

/*Text after buttons*/
.yukon{
    background-color:#F8F5F2;
    display: flex;
    flex-direction: column;

}
.yukon h3{
    justify-content: center;
    text-align: center;
    font-size: 24px;
    font-weight: 200;
}
.yukon p{
    justify-content: center;
     text-align: center;
     font-size: 32px;
     font-weight: 400;
     padding: 30px;
}

/*Products*/
.sectionproducts{
display: flex;
justify-content: center;
gap: 16px;
padding: 60px 50px;
flex-wrap: wrap;
margin-top: 40px;
margin-bottom: 30px;
}

.products {
background-color:#D9D9D9;
border-radius: 16px;
width: 380px;
padding: 30px;
display: flex;
flex-wrap: wrap;
flex-direction: column;

}
.products img {
    object-fit: contain;
    width: 100%;
    height: 300px;
    object-fit: contain;
}

.producttitle {
font-size: 20px;
}

.producttext {
font-size: 12px;
}
.productprice{
font-size: 16px;
margin-bottom: 10px;
}

.productbutton{
    text-decoration: none;
background-color:#A66F0A;
 color:#1E1E1E;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 16px;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
    padding: 8px 0px;
    margin-top: auto;
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100px;
}
.shopmorebutton{
background-color:#F8F5F2;
    color:#1E1E1E;
    border:2px solid #A66F0A;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 16px;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
    margin: 10px auto;
    padding: 16px 16px;
    width: 234px;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit:cover;
    gap: 8px;
}
.shopmorebutton img{
    height: 20px;
  
}

.shopmoretextunder p{
    font-size: 12px;
    font-weight: 200;
    color:#1E1E1E;
    justify-content: center;
    text-align: center; 
    margin-bottom: 90px;
}


/*Community forum*/
.community{
    background-color:#255954;
    color:#F8F5F2;
    border-radius: 16px 16px 0px 0px;
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    padding: 16px;
}
.community-pic {
    display:flex;
    justify-content: center;
    gap: 20px;
    padding: 40px 50px;
}
.community-pic img{
    width: 45%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
}
.forumsquare{
    border: 2px solid #255954;
    border-radius: 16px;
    padding: 16px;
    width: 380px;
}
.forumtitle{
    padding: 60px 50px;
    
}
.forumtitle h5 {
    font-size: 32px;
    color:#59412C;
    margin-bottom: 24px;
}
.forumg{ 
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.forumlayout{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.jellybean{
    color: #F8F5F2;
    background-color: #9E83B8;
    border-radius: 16px;
    padding: 8px 20px;
    font-weight: 500;
}
.jellybean1{
    color: #F8F5F2;
    background-color: #A2ABA1;
    border-radius: 16px;
    padding: 8px 20px;
    font-weight: 500;
}
.jellybean2{
    color: #F8F5F2;
    background-color: #CCBBDB;
    border-radius: 16px;
    padding: 8px 20px;
    font-weight: 500;
}
.jellybean3{
    color: #F8F5F2;
    background-color: #A09971;
    border-radius: 16px;
    padding: 8px 20px;
    font-weight: 500;
}
.jellybean5{
    color: #F8F5F2;
    background-color: #EBE5D9;
    border-radius: 16px;
    padding: 8px 20px;
    font-weight: 500;
}
.jellybean6{
    color: #F8F5F2;
    background-color: #758976;
    border-radius: 16px;
    padding: 8px 20px;
    font-weight: 500;
}
.forumthread{
    font-weight: 200;
}
.forump{
    font-size: 20px;
    font-weight: 500;
}
.forumtext{
    font-size: 16px;
    color:#1E1E1E;
}
.tagmain{
    margin-top: 18px;
    margin-bottom: 8px;
}
.tags{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}
.tags div {
    background-color: #D9D9D9;
    padding: 6px 16px;
    border-radius: 10px;
}
.commentstag {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
}
.forumbuttonmain a{
    background-color: #255954;
    color: #F8F5F2;
    text-decoration: none;
    border-radius: 16px;
    padding: 14px 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.forumbuttonmain a {
    display: inline-block;
}


/*about us*/

.aboutnorth{
    width:80%;
    margin: 80px auto;
}
.aboutnorth h6{
    color: #59412C;
    font-size: 34px;
    margin-bottom:24px;
}
.aboutnorth p{
    color:#1E1E1E;
    font-size: 16px;
    width: 75%;
    margin-bottom: 30px;
}
.aboutnorth a {
    background-color: #F8F5F2;
    color: #A66F0A;
    border: 2px solid #A66F0A;
    border-radius: 16px;
    padding: 16px 32px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
}


/*subscribe button forum*/
.sub{
    display: flex;
    background-color:#255954;
    justify-content: space-between;
    align-items: center;
    padding: 25px 35px;
    margin: 60px auto 0;
    width: 95%;
}
.subleft {
    display: flex;
    align-items: center;
    gap: 24px;
}
.subleft img{
    width: 70px;
}
.sub-header{
    color:#F8F5F2;
    font-size: 32px;
    font-weight: 700;
}
.sub-p{
    color:#F8F5F2;
    font-size: 16px;
}
.sub-forum{
    display: flex;
    width: 45%;
    
}

.sub-forum input {
    background-color: #255954;
    font-size: 16px;
    padding: 16px 20px;
    width: 70%;
    border: 2px solid #F8F5F2;
    border-radius: 16px 0 0 16px;
}

.sub-forum button {
    background-color: #D9D9D9;
    color: #255954;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 30px;
    border-radius: 0 16px 16px 0;
    border: none;
    width: 30%;
}

/*White cat paw in air*/

.cat-hero {
    background-image: url('img/white-cat-pawup-northpaws.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 650px;
    display:flex;
    align-items: center;
    width: 95%;
    margin: 30px auto 80px;
}

.cat-hero p {
    margin-left: 120px;
    color: #255954;
    font-size: 34px;
    font-weight: 600;
    width: 420px;
    padding-top: 30px;

}

/*gray line*/
.grayline {
    border-top: 2px solid #D9D9D9;
    margin-top: 30px;
}













/*This is the second page out of 5 - Training*/

.hero2first {
    background-image: url('img/whitebackgrounf-paw.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    height: 70vh;
    padding: 40px;
}

.hero2 h1{
    font-size: 64px;
    font-weight: 700;
    color: #1E1E1E;
    width: 500px;
    margin-bottom: 24px;
}
.hero2 p{
    font-size: 16px;
    color: #1E1E1E;
    width: 420px;
    margin-bottom: 30px;
}
.hero2 a{
    text-decoration: none;
    background-color: #A66F0A;
    color: #F8F5F2;
    border-radius: 16px;
    padding: 14px 40px;
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
}

.squareboxes{
    display: flex;
    justify-content: center;
    color: #F8F5F2;
}
.squareboxes p {
    color:#F8F5F2;
}
.square1{
    background-color: #1E1E1E;
    width:25%;
    padding: 16px 25px;
    text-align: center;
}
.square2{
    background-color: #255954;
    width:25%;
    padding: 16px 25px;
    text-align: center;
}
.square3{
    background-color:#59412C;
    width:25%;
    padding: 16px 25px;
    text-align: center;
}
.square4{
    background-color:#5E8C8C;
    width:25%;
    padding: 16px 25px;
    text-align: center;
}
.isis {
    font-size: 34px;
    font-weight: 500;
    color:#F8F5F2;
}

.isistext {
    font-size: 16px;
    font-weight: 200;
}

.h2training {
    font-size: 46px;
    font-weight: 600;
    color:#59412C;
    text-align: center;
    margin: 50px;
}




/*your training journey*/

.t-cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.trainingelement{
    background-color: #F8F5F2;
    border: 2px solid #255954;
    width: 45%;
    border-radius: 16px;
    display: flex;
    margin: 20px auto;

}
.trainingelement-small{
    background-color: #F8F5F2;
    border: 2px solid #255954;
    width: 45%;
    border-radius: 16px;
    display: flex;
    margin: 20px auto;
}
.trainingelement img{
    width: 250px;
    height: 320px;
    object-fit: cover;
    border-radius: 16px 0 0 16px;
}
.trainingelement-small img{
    width: 250px;
    height: 320px;
    object-fit: cover;
    border-radius: 16px 0 0 16px;
}
.trainingelementtext {
    padding: 24px 16px;
}
.tet {
    font-size: 20px;
    margin-bottom: 12px;
    margin-top: 20px;
}
.trainingelementtext a {
    color: #A66F0A;
    font-weight: 500;
    text-decoration: none;
    margin-top: 16px;
    display: inline-block;
}


.jta{
    display: flex;
    align-items: center;
    width: 50%;
    margin: 80px auto;
    gap:30px;
}

.jtatext {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 50%;
}
.jta h3{
    font-size: 32px;
    margin-bottom: 24px;
    color: #59412C
}
.jta p{
    font-size: 16px;
    color: #1E1E1E;
    width: 100%;
}
.jta img{
    width: 350px;
    border-radius: 16px;
    object-fit: cover;
}




/*This is the third page out of the 5 - Products*/
.products-hero {
    text-align: center;
    margin: 70px auto;
}
.products-hero h1{
    font-size: 48px;
    color:#1E1E1E;
    text-align: center;
}
.products-hero p {
    font-size: 24px;
    width: 600px;
    margin: 10px auto 30px;
}
.products-hero a {
    font-weight: 600;
    color: #1E1E1E;
    border: 2px solid #255954;
    border-radius: 16px;
    text-decoration: none;
    padding: 10px 10px;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
}


.shop-c {
    font-size: 30px;
    color: #59412C;
    width: 80%;
    margin: 30px auto 30px;
}


.buttons-products {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin: 30px 0;
    
}

.buttons-products a {
    display: inline-block;
    background-color: #A66F0A;
    color: #F8F5F2;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 16px;
    font-size: 16px;
}

/*Adventure stuff and text*/

.adventure {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 80%;
    margin: 80px auto;
}
.adventure img{
    width: 60%;
    height: auto;

}
.adventure-text {
    width: 40%;
    border: 2px solid #255954;
    padding: 30px 60px;
}
.adventure-text h3{
    font-size: 32px;
    color:#1E1E1E;
    margin-bottom: 16px;
}

.training-adventure {
    display: flex;
    align-items: center;
    border: 2px solid #255954;
    width: 80%;
    margin: 80px auto;
    gap: 30px;
    padding: 30px;
}

.training-adventure h4{
    font-size: 36px;
    color:#255954;
    width: 35%;

}

.training-adventure p{
    font-size: 16px;
    width: 65%;
}

.adventure-images {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: 80px auto;
    gap: 30px;
}

.adventure-images img{
    width: 30%;
    height: auto;
}



/*This is the forth page out of 5 - Forum*/
.forumhero{
    width: 80%;
    margin: 80px auto;
}

.forumstuff{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.forumhero h1{
    font-size: 48px;
    text-align: center;
    margin-bottom: 50px;
}
.forumgallery{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.forumgallery img {
    width: 280px;
    height: 360px;
    object-fit: cover;
    border-radius: 16px;
}
.forumgallery-2{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.forumgallery-2 img{
    width: 180px;
    height: 170px;
    object-fit: cover;
}

.forum-signin{
    width: 320px;
}
.signin-p{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #1E1E1E;
}
.signin-small {
    font-size: 16px;
    color: #1E1E1E;
    margin-top: 8px;
}
.forum-signin input{
    background-color: #255954;
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 16px;
    color: #F8F5F2;
    width: 100%;
    border: none;

}

.forum-signin a {
    text-decoration: none;
    color: #1E1E1E;
    border: 2px solid #255954;
    border-radius :16px;
    padding: 12px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
}


/*section line and icons*/
.iconline{
    margin: 80px auto;
    width: 100%;
}

.forumline{
    background-color: #5E8C8C;
    height: 10px;
    margin-bottom: 80px;
}

.forumicons{
    display: flex;
    justify-content: center;
    gap: 80px;
}

.forum-icon{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 180px;
}
.forum-icon p{
    font-size: 16px;
}
.forum-icon img {
    width: 130px;
}





/*photogrid on forum page*/
.photogridcats{
    margin-top: 80px;
    margin-bottom: 80px;
}
.photogridcats h2 {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 40px;
}

.gallerycats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    width: 80%;
    margin: 0 auto;
}

.gallerycats img{
    object-fit: cover;
    width: 100%;
    height: 250px;
    border-radius: 16px;
}
.longimage { 
    grid-column: span 2;
}

.forumsharebutton {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 80%;
    margin: 20px auto;
}

.forumsharebutton a {
    text-decoration: none;
    color: #F8F5F2;
    background-color: #A66F0A;
    padding: 12px 24px;
    border-radius: 12px;
    text-align: right;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
}
.forumsharebuttontext{
    font-size: 12px;
    text-align: right;
    width: 300px;
    margin-top: 10px;
}


/*Community forum section page*/
.communityheader {
    background-color:#255954;
    color:#F8F5F2;
    border-radius: 16px 16px 0px 0px;
    text-align: center;
    font-size: 42px;
    font-weight: 500;
    padding: 16px;
}

.forumshare {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
    width: 80%;
    margin: 80px auto;
}

.forumsharetext {
    width:500px;
}
.forumshare img{
    width: 250px;
}
.forumsharetext h4 {
    font-size: 24px;
    margin-bottom: 30px;
}

.forumsharetext p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 16px;
}

/*forum boxes*/
.dots {
    text-align: center;
    margin: 30px 0;
}

/*community forum bottom text*/
.communitybottom {
display: flex;
justify-content: space-between;
align-items: center;
margin: 60px auto;
width: 90%;
}
.communitybottomtext {
    margin-bottom: 8px;
}
.communitybottomtext h5 {
    font-size: 36px;
    margin-bottom: 16px;
}
.communitybottomtext p{
    font-size: 16px;
    width: 350px;
}
.community-member-box {
    text-align: center; 
    border: 2px solid #255954;
    border-radius: 16px;
    padding: 8px 24px;
    font-size: 16px;
   text-align: center;
   width: 280px;
}



/*Start a discussion box*/

.startdiscussion{
    background-color:#255954;
    border-radius: 16px;
    width: 90%;
    margin: 80px auto;
    padding: 80px 60px;
    color: #F8F5F2;
}
.startdiscussion h6 {
    color: #F8F5F2;
    font-size: 24px;
    margin-bottom: 20px;
}
.startdiscussion p {
    font-size: 16px;
    color: #F8F5F2;
    margin-bottom: 30px;
    margin-top: 30px;
}
.startdiscussion input {
    background-color: transparent;
    border-radius: 16px;
    border: 2px solid #F8F5F2;
    color: #F8F5F2;
    padding: 10px;
    width: 100%;
    margin-bottom: 40px;
    margin-top: 10px;
}

.startdiscussion-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}
.startdiscussion-tag-div {
    color:#1E1E1E;
    background-color: #D9D9D9;
    padding: 8px 8px;
}
.different-d-tag {
     color:#1E1E1E;
    border-radius: 2px dotted #F8F5F2;
    padding: 8px 8px;
}
.startdiscussion-label {
      color: #F8F5F2;
    margin-top: 20px;
    margin-bottom: 12px;
}

.p-discussion {
    text-decoration: none;
    color: #F8F5F2;
    background-color: #A66F0A;
    padding: 16px;
    border-radius: 16px;
    margin-left: auto;
    margin-top: 30px;
    display: inline-block;
}

/*youtube video*/
.youtubesection {
    display: flex;
     justify-content: center;
    align-items : center; 
    gap: 60px;
    margin: 60px auto;
    width: 90%;
}
.youtube-training {
    display: flex;
    justify-content: center;
    align-items : center; 
    gap:30px;
    width: 90%;
    margin: 80px auto;
}
.youtube img{
width: 250px;
margin-bottom: 20px;
}
.youtube-p{
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 12px;
}
.youtube-p2{
    margin-bottom: 8px;
    font-size:16px;
}
.youtube-p3{
    font-size: 12px;
}




/*This is the fifth page out of the 5 - About*/
.hero-elements{
    background-image: url('img/cover-page-isis-redwood.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height:700px;
    display:flex;
    align-items: center;
    padding-left: 55%;

}

.hero-stuff {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.hero-stuff img {
    width: 60px;
    height: auto;
    align-items: flex-start;
}
.about-hero {
    font-size: 64px;
    font-weight: 700;
    color: #1E1E1E;
    text-align: left;
    text-shadow: 0px 4px 4px rgba(0,0,0,0.5);
    width: 500px;
}


/*Social icons 2matoux*/
.social-stuff{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 90%;
    margin: 80px auto;
}

.social-2matoux{
    text-align: center;
    margin-right: 50px;
}
.matoux-text{
    font-size: 32px;
    font-weight: 700;
   
    color: #5E8C8C;
}
.social-section {
    text-align: center;
}

.social-arrows img{
    width: 100px;
    height: auto;
}
.social-section img{
    width: 80px;
    height: auto;
    margin: 20px 0;

}
.social-text {
    font-size: 16px;
}



/*our team section*/
.our-team {
    width: 80%;
    margin: 80px auto;
}
.our-team img {
    width: 250px;
    display: block;
    margin: 0 auto 60px;
}
.our-team-inside {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
.our-team-inside h2 {
    font-size: 24px;
    color: #1E1E1E;
    margin-bottom: 24px;
}
.our-team-inside img{
    width: 250px;
    height: auto;
    margin-top: 100px;
}
.our-team-text-into {
    font-size: 12px;
    text-align: center;
    width: 250px;
}

.textafter-ourteam {
    font-size: 24px;
    font-weight: 400;
    text-align: center ;
    margin-top: 50px;
    color:#255954;
}
.img-left{ 
    display: flex;
    flex-direction: column;
    align-items: center;
}
.story {
    font-size: 16px;
    width: 650px;
}

/*Photo grid moments from the journey*/
.moments-grid {
    width: 80%;
    margin: 100px auto;
}
.moments-grid h3{
    font-size: 36px;
    text-align: center;
    color: #A66F0A;
    margin-bottom: 30px;

}
.journey-moments-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
}
.journey-moments-grid img{
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.journey-text-under {
    font-size: 12px;
    margin-top: 15px;
}
.grid-large{
    grid-column: 3/5;
    height: 450px;
}

/*Frequently asked questions*/
.frequently {
    width: 80%;
    margin: 100px auto;

}
.frequently h4 {
    font-size: 32px;
    color: #1E1E1E;
    text-align: center;
    margin-bottom: 30px;

}
.frequently div {
    background-color: #D9D9D9;
    border-radius: 16px;
    width: 70% ;
    margin: 15px auto;
    padding: 15px 16px;
}
.frequently p{
    font-size: 16px;
    color: #1E1E1E;
}



/*footer*/
.footer{
    background-color: #F8F5F2;
    display: flex;
    flex-direction: column;
}
.footer ul{
    list-style:none;

}

.footer li{
    margin-top: 8px;
}

.footer a {
    color:#1E1E1E;
    text-decoration: none;

}
.footermain{
    color:#1E1E1E;
    background-color:#F8F5F2;
    gap: 20px;
    display: flex;
    padding: 50px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.footerlogo{
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color:#F8F5F2;
}

.footercolumns p{
    font-size: 20px;
    font-weight: 500;
}

.footerlogo p {
    font-size: 12px;
    font-weight: 200;
    margin-top: 10px;
    color:#1E1E1E;
    background-color:#F8F5F2;
}

.footerbrand{
    width: 200px;
    height: auto;
}

.changeregion {
    display:flex;
    align-items: center;
    gap: 8px;
}
.changeregion-img{
    width: 20px;
    height: auto;
}
.changeregion p{
    font-size: 16px;
    font-weight: 400;
}

.socialfootericons img{
    height: 29px;
    width: auto;
}


.educationalp { 
    text-align: center;
    border-top: 1px solid #D9D9D9;
    margin: 40px 0;
    width: 100%;
    padding-top: 16px;
}

.background-bottom{
    background-color: #F8F5F2;
}

.socialfootericons{
    height: 16px;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;

}

.socialicons{
    display:flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
}

.bottomfooter{
    background-color:#255954;
    height: 30px;
    width: 100%;
}







/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px){
    
/*First page first take*/
.backgroundnav {
    flex-direction: column;
    height: auto;
    padding: 15px;
}

.pngbrand img{
    width: 250px;
}

.tagmatoux {
    margin-left: 0;
    margin-top: auto;
    margin-left: auto;
}
.navtoppages{
    flex-direction: column;
    text-align: center;
    margin-top: 20px;
    gap:15px;
}

.hero{
    height: auto;
    padding: 30px 25px;
    background-position: center;
}

.hero h1{
    font-size: 32px;
    width: 100%;
    margin-top: 20px;
}

.hero p{
    width: 100%;
    font-size: 14px;
}

.tagmatoux{
    margin-left: auto;
    margin-top: 80px;
}


.aftertexthero {
    flex-direction: column;
    height: 50vh;
    padding: 50px 25px;
 }
.aftertexthero h2 {
    width: 100%;
    margin-left: 0;
    padding-top: 20px;
 }
.aftertexthero p{
    width: 100%;
    margin-left: 0;
    padding-top: 40px;
 }

.pinetreesimage{
    height: 120px;
}

.buttonstyleborder{
    flex-direction: column;
    align-items: center;
 }

.buttonstyleborder a{
    margin: 15px;
}
.sub{
    flex-direction: column;
    width: 90%;
    padding: 25px 20px;
    gap: 25px;
}

.subleft{
    flex-direction: column;
    text-align: center;
}
.sub-forum{
    width: 100%;
    flex-direction: column;
    gap: 10px;

}

.sub-forum input{
    width: 100%;
    border-radius: 16px;
}
.sub-forum button{
    width: 100%;
    border-radius: 16px;
}


/*second page trainging*/
.hero-training {
    flex-direction: column;

}
.hero-training img {
    width: 100%;
    height: auto;
}
.hero2{
    text-align: center;
}
.hero2 p {
    width: 100%;
    align-items: center;
}
.squareboxes {
    flex-direction: column;
    font-size: 16px;
}
.squareboxes img{
  width: 50px;
}
.square1, .square2, .square3, .square4 {
    width:100%;
    height: 200px;
    font-size: 16px;
}
.t-cards{
    flex-direction: column;
    align-items: center;
}

.trainingelement {
    width: 90%;
    flex-direction: column;
}
.trainingelement-small{
    display: flex;
    margin: 20px auto;
    width: 90%;
    flex-direction: column;
}

.trainingelement img {
    width: 100%;
    height: 220px;
      object-fit: cover;
    border-radius: 16px 16px 0 0;}
.trainingelement-small img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}
.trainingelementtext{
    padding: 20px;
}

.hero2first {
    text-align: center;
    background-position: right;
    
}

.jta{
    flex-direction: column;
    width: 90%;
    margin: 60px auto;
}
.jtatext { 
    width: 100%;

}
.jta img{
    width: 100%;
    height: auto;
}

/*Products third page*/
.products-hero h1{
    font-size: 24px;
}
.products-hero p {
    font-size: 16px;
}

.buttons-products {
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    gap:10px;
    width: 90%;
    margin: 0 auto;
}

.shop-c {
    text-align: center;
    margin-bottom: 20px;
}

.adventure {
    flex-direction: column;
}
.adventure-text {
    width: 90%;
    height: auto;
    padding: 25px;
}

/* Forum page*/
.forumhero{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.forumstuff{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.forumgallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
}
.forumgallery img{
    width: 100%;
    height: auto;
}
.forumgallery-2{display: none;}

.forum-signin{
    width: 100%;
    margin-top: 25px;
}

.forumgallery img {  
    width: 100%;
    height: auto;
}
.forumgallery-2 img{
    width: 100%;
    height: auto;
}

.forum-signin input{
    width: 100%;
}

.forumshare{
    flex-direction: column;
    align-items: center;
    gap: 30px;

    width: 90%;
}

.forumshare img{
    width: 180px;
}

.forumsharetext{
    width: 100%;
    text-align: center;
}
.forumsharetext h4{
    font-size: 24px;
}
.forumsharetext p{
    font-size: 16px;
}

.youtubesection{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.youtube-training{
    width: 100%;
}
.youtube-training iframe{
    width: 100%;
    height: 250px;
}

.youtube{
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.youtube img{
    width: 120px;
    height: auto;
    text-align:center;
}

/*About page media q*/
.about-hero{
    font-size: 36px;
    width: 90%;
    margin: 0 auto;

}
.hero-stuff {
    padding-top: 20px;
    padding-left: 180px;

}

.hero-elements {
    text-align: center;
    justify-content: center;

    padding-left: 0;
}
.social-stuff{
    display:flex;
    flex-direction: column;
    gap: 35px;
}

.social-2matoux{
    margin-right: 0;
}

.social-arrows img{
    width: 30px;
}

.social-section img{
    width: 65px;
}

.ourteam h2 {
    font-size: 28px;
    margin-bottom: 20px;

}
.our-team {
    width: 90%;
}
.ourteam p{
    font-size: 16px;

}
.story p{
   font-size: 14px;
   margin-bottom: 16px;
}
.story {
    width: 100%;
    text-align: center;
}
.our-team-inside {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
   
}
.img-left {
 width: 80%;
    text-align: center;
}
.training-adventure p{
    margin-left: 20px;
}
/*end of x-small devices*/
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width : 767px){
    
.backgroundnav{
    justify-content: flex-start;
    gap: 15px;
}

.navtoppages{
    flex-direction: row;
    gap: 20px;
    font-size: 12px;
}
.pngbrand img {
    width: 140px;
}
.rightsidenav {
    display: none;
}
.tagmatoux {
    margin-left: auto;
    margin-right: 20px;
}
.aftertexthero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.buttonstyleborder {
    display: flex;
    flex-wrap: wrap;
    justify-content : center;
    gap: 10px;
}
.forumtitle h5 {
    text-align: center;
    font-size: 46px;
}
.forumbuttonmain {
    width: 100%;
    text-align: center;
}
.sub{
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
}

.subleft{
    text-align: center;
}
.sub-forum{
    width: 100%;
    text-align: center;

}
.cat-hero {
   background-size: contain;
   background-position: center;
}

/* Second page of small devices training*/
.hero2first {
    display: flex;
    align-items: center;
    background-position: right;
}
.squareboxes {
    display: flex;
    flex-direction: column;
   align-items: center;
   width: 100%;
}
.square1, .square2, .square3, .square4 {
    width: 100%;
}


.trainingelement {
    flex-direction: column;
    width: 80%;
}
.trainingelement-small{
    flex-direction: column;
    width: 80%;
}

.trainingelement img {
    width: 100%;
}
.trainingelement-small img{
    width: 100%;
}

.trainingelementtext{
    width: 100%;
    text-align: center;
}
.jta {
    flex-direction: column;
    display: flex;
    width: 100%;
    align-items: center;
    margin: 50px auto;
    gap: 25px;

}
.jtatext p{
    width: 100%;
    text-align: center;
    padding: 20px;
}
.jtatext {
    width: 100%;
    text-align: center;
}
/*forum media q*/

.forumhero {
    width: 90%;
    margin: 50px auto;
}

.forumstuff {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}


/*footer media q small*/
.footermain { 
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 30px;
}
.footerlogo {
    width: 100%;
}
.forum-signin {
    width: 100%;
}
.forumgallery-2 {
    display: none;
}
.forumsharetext {
    width: 100%;
    padding: 16px;
}
.forumshare {
    width: 100%;
}
.youtubesection{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    gap: 25px;
}
.youtube-training{
    width: 100%;
}
.youtube-training iframe{
    width: 80%;
    height: 250px;
}

.youtube{
    width: 100%;
    text-align: center;
}

/*about page */
.about-hero {
    font-size: 40px;
    width: 90%;
    text-align: center;

}
.hero-elements {
   display: flex;
    justify-content: center;
}
.hero-stuff {
    align-items: center;
    text-align: center;
}

.social-stuff {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.social-2matoux {
    width: 100%;
    text-align: center;
}
.social-section {
    width: 20% ;
    text-align: center;
}

.social-arrows{
    display: none;
}
.img-left {
    width: 100% ;
    text-align: center;
}
.our-team-inside {
    display:felx;
    flex-direction: column;
    align-items: center;
}

}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}