/*hero section................*/

.hero img{
    max-width: 100%;
    max-height: 100%;
    z-index: -1;
    display: block;
    position: absolute;
    top: 5%;
}


.hero-title{
    padding:5%;
    text-align: left;
    margin-left: 5%;
    
}

.hero-title h2{
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #004225;
}

.hero-title p{
    color: #004225;
    font-weight: 400;
    max-width: 400px;
    margin-left: 0;

}

.hero-text{
    display: flex;
    flex-direction: row;
    position: relative;
    
}


/* index page ................. */
.homeflex{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.home-logo{
    width: 50%;
    margin:5% auto 2% auto;
}

.home-title{
    text-align: center;
    margin-bottom: 5%;
    color: #004225;
}

.index-hero{
    position: relative;
    text-align: center;
    color: #f9f9f9;
}

.herotext{
    width: 100%;
    position: absolute;
    z-index: 0;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size: 1.75em;
}

/*cardflex.................*/
.home-cardflex{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    row-gap: 10px;
    padding: 10px;
}

.greencard{
    background-color: #004225;
    padding: 1em;
    border-radius: 25px;
    padding: 5%;
    display: flex;
    flex-direction: column;
}

.greencard h3{
    color: #E5C287;
    font-size: 1.5em;
}

.greencard p{
    color: #F5F5DC;

}

.w4561{
    width: 47%;
    height: auto;
}
/*explore button......*/
.explore-button{
    padding:10px 20px;
    font-size: 1em;
    border-radius: 2em;
    margin-top: 15px;
    background-color: #F5F5DC;
    color: #004225;
    text-align: center;
}



/*quote.....................*/
.quote{
    display: flex;
    flex-direction: column;
    font-size: 1.2em;
    height: 200px;
    background-color: #275E45;
    color: #F5F5DC;
    text-align: center;
    padding: 5%;
    align-items: center;
    margin-top: 10px;
}

.quote img{
    width: 20%;
    z-index: 0;
    display: block;
    margin-left: -180px;
}

.quote p{
    z-index: 1;
    margin-top: -30px;
}




/*subscribe-section..............................*/
.subscribe-section{
    width: 100%;
    height: 200px;
    background-color: #F5F5DC;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 5%;
}

.subscribe-text{
    width: 60%; 
    font-size: 20px;
    padding: 0 5%}



.subscribe-section span{
    color: #fda413;
}

/*subscribe form...........*/
.subscribe-form{
    width: 40%;
}
form{
	margin:0 40px 10px 0px;
	text-align: left;
	font-size: 20px;
	font-weight: 400;
}


input[type=text],[type=number],[type=email],textarea{
	
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 2px solid #004225;
	border-radius:25px;
	box-sizing: border-box;
}



::placeholder{
	font-size: 15px;
	font-family: 'Courier New', Courier, monospace;
}



  
    

input[type=submit] {
	width: 100%;
	background-color: #004225;
	color: #ffffff;
	padding: 14px ;
	margin: 8px 0;
	border: none;
	border-radius: 25px;
	cursor: pointer;
	font-size: 20px;
  }






/*about us hero section................*/
.aboutus-deco{
    position: absolute;
    z-index: -1;
}


.aboutusimg{
    display: none;
}

.aboutus-title{
    padding:5%;
    
}

.aboutusimg img{
    width: 20%;
    
}

.aboutus-title h2{
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #004225;
}

.aboutus-title p{
    color: #004225;
    font-weight: 400;

}

.a-firstlayer{
    z-index: 2;
    position: absolute;
    top:70px;
    right:180px;
}

.a-secondlayer{
    z-index: 1;
    position: absolute;
    top:210px;
    right:100px;
}

.a-lastlayer{
    z-index: 0;
    position: absolute;
    top:120px;
    right:480px;
}


/*about us page panels.......................*/
.right-panel{
    display: flex;
    flex-direction: column;
    margin-left: 40%;
    
}

.left-panel{
    display: flex;
    flex-direction: column;
    margin-left: 10%;
}

.about-section h4{
    padding: 20px 20px 0 20px;
    color: #FDA403;
    
}

.about-section p{   
    padding: 0px 20px 0 20px;
    color: #004225;
    line-height: 1.1em;
}

.a-book-button{
    padding: 15px;
    border-radius: 50px;
    font-size: 20px;
    margin-top: 40px;
    margin-left: auto;
    margin-right:auto;
    background-color: #FDA403;
    color: #004225;
    margin-bottom: 50px;
    text-decoration: none;
    display: block;
    width: 50%;
    text-align: center;
}


/*experience page.....................*/
.experiences-flex{
    margin-bottom: 50px;
}

.e-bg{
    display: block;
    position: absolute;
    top: 5%;
    max-width: 100%;
    max-height: 100%;
    z-index: -1;
}


.experiences-img{
    display: none;
}

.hero-title{
    padding:5%;
    
}

.experiences-img img{
    width: 30%;
    
}

.e-firstlayer{
    z-index: 2;
    position: absolute;
    top:40px;
    right:60px;
}

.e-secondlayer{
    z-index: 1;
    position: absolute;
    top:200px;
    right:220px;
}



.ex-section, .ex-list{
    padding: 5%;
    
}
.ex-cards{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.ex-card1{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top:5%;
    width: 100%;
}


.ex-card1 img{
    z-index: -1;
    width: 100%;
    position: absolute;  
}

.ex-card1 h3{
    top:50%;
    left: 50%;
    color: #ffffff;
    text-align: center;
    align-self:center;
}


/*ex-list............................*/
/*...................................*/
.ex-list h3{
    color: #FDA403;
    font-weight: 700;
}

.ex-list p{
    color: #004225;
    margin-bottom: 20px;
}

.horizonal-line{
    color: #004225;
    border: 3px solid #004225;
    margin-bottom: 20px;
    border-radius: 10px;
    width: 50%;
    margin-left: 25%;
}

.vertical-line{
    display: none;
}

/*e page book-button..........................*/

.e-book-button{
    padding: 15px;
    border-radius: 50px;
    font-size: 20px;
    margin-top: 40px;
    margin-left: auto;
    margin-right:auto;
    background-color: #FDA403;
    color: #004225;
    margin-bottom: 50px;
    text-decoration: none;
    display: block;
    width: 60%;
    text-align: center;
}



/*hidden gallery.......................*/
.gallery{
    display: none;
}



/*feedback card.......................*/

.card-flex{
    display: flex;
    flex-flow: column wrap;
    gap: 16px;
    padding: 16px;
    max-height: 1500px;
    margin-bottom: 50px;
    align-items: center;
}

.card{
    width: 48%;
    border-radius: 25px;
    text-align: center;
    position: relative;
    padding: 16px; 
}

.card img{
    max-width: 100%;
    max-height: 100%;
    z-index: -1;
    display: block;
}

.card-text{
    margin-top: 10px;
}

.card-green{
    background-color: #004225;
    color: #F5F5DC;  
}

.card-orange{
    background-color:#FDA403;
    color: #004225;
}

.card-white{
    background-color:#f5ebdc;
    color: #004225;
}

.name-heart{
    display: flex;
    justify-content: space-between;
    margin-top:30px;
}

.name-orange{
    color: #FDA403;
}

.name-green{
    color: #004225;
}


/*feedback page........*/
.share-section{
    position: relative;
    max-width: 1200px;  
}

.share-bg{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    display: block;
    top:2%;
    z-index: -1;
}

.share-img{
    width: 45%;
}

.share div{
    width: 45%;  
}

   
.share{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 2%;
}

.share-text{
    position: relative;
}

.share-text p{
    margin-bottom: 50px;
    font-size: 2em;
    color: #004225;
    font-weight: 700;
}


.share-button{
    padding:10px 30px;
    font-size: 1em;
    border-radius: 2em;
    margin-top: 5%;
    background-color:#004225;
    color: white;
    border: 1px solid transparent;
    outline: none;
    bottom: 0%;
    position: absolute; 
    
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    /*about us ................*/
    .deco-aboutus{
        z-index: -1;
    }



    /*index page...........*/
    .greencard p{
        font-size: 14px;
    }
    
    /*experiece.................*/
    .e-bg{
        top: 10%;
    }


    /*feedback page - card .....................*/
    .card{
        width: 50%;
    }
    .card-flex{
        max-height:2500px;
        margin-bottom: 50px;
        font-size: 0.7em;
    }
    
  
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    /*index page.................*/
    .bg-img{
        width: 300px;
    }

    /*about us.................*/
    .deco-aboutus{
        z-index: -1;
    }
  
    .a-book-button{ 
        width: 40%; 
    }

    .e-book-button{ 
        width: 50%; 
    }
    /*feedback page - card .....................*/
    .card{
        width: 23.33%;
    }

    .card-flex{
       max-height: 1300px;
        margin-bottom: 50px;
        font-size: 0.7em;
    }
    .first-margintop{
        margin-top: 50px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    /*index page............*/
    .home-cardflex{
        margin-bottom: 50px;
    }

    .greencard p{
        text-align: center;
    }

    .home-panels{
        width: 100%;
    }

    .greencard-left{
        align-items: center;
        margin-right: -20%;
        margin-top: 8%;
        z-index: 1;
        height: 20%;
    }

    .greencard-right{
        align-items: center;
        margin-left: -20%;
        margin-top: 8%;
        z-index: 1;
        height: 20%;
    }

    .herotext{
        font-size: 2em;
    }

    .logo_cc img{
        width: 250px;
    }

    .w4804{
        width: 40%;
    }

    /*quote.....................*/
    .quote{
        font-size: 2em;
        height: 350px; 
        width: 100%;
        
    }

    .quote img{
        margin-left: -360px;
    }

    .quote p{
       
        margin-top: -7%;
        max-width: 700px;
    }

    /* subscribe section...........................*/
    .subscribe-section{
        height: 350px;
    }
    .subscribe-text{
        font-size: 25px;
        
    }
    

    /*  button */
    .a-book-button{ 
        width: 30%; 
    }

    .e-book-button{ 
        width:40%; 
    }

    /*feedback page - card .....................*/
    .card{
        width: 23.33%;
    }

    .first-margintop{
        margin-top: 50px;
    }
    
    .third-marginbottom{
        margin-bottom: 50px;
    }


    

}

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

    .explore-button:hover{/* hover state for large screen */
        background-color: #FDA403;
    }

    input[type=submit]:hover {/* hover state for large screen */
        background-color:#FDA403;
        color: #004225;
    }

    .a-book-button:hover, .e-book-button:hover{/* hover state for large screen */
        background-color: #004225;
        color: #f5ebdc;
    }


    .share-text button:hover{/* hover state for large screen */
        background-color:  #FDA403;
        color: #004225;
    }

    /*index page..................................*/
    .herotext{
        font-size: 4em;
    }

    .greencard{
        border-radius: 50px;
    }

    .greencard h3{
    color: #E5C287;
    font-size: 2em;
    }    

    .intro-page{
        display: flex;
        flex-direction: row;
    }
    #hero-img{
        display: contents;
    }

    .lastlayer{ /*set up img position and layer*/
        width: 40%;
        border-radius: 20px;
        z-index: 1;
        top:10%;
        left: 20%;
    }
    
    .firstlayer{ /*set up img position and layer*/
        z-index:2;
        width: 40%;
        position: relative;
        top:40%;
        left: 40%;
    }
    
    .twoimg img{
        width: 100%;
        border-radius:20px;
    }

    /*about us page..............*/
    /*about us page - panels...........................*/
    .aboutus-title h2{
        font-size: 2.5em;
    }
    .aboutusimg{
        display: contents;
    }

    .aboutus-title p{
        font-size: 1.2em;
    }

    .about-section h4{
        font-size: 2em;
        padding: 0px 30px 0 30px;
        
    }
    
    .about-section p{   
        padding: 0px 30px 0 30px;
        color: #004225;
        font-size: 1.2em;
        line-height: 1.2em;
    }
    

    .a-book-button{ 
        width: 25%; 
    }

    .e-book-button{ 
        width: 60%; 
    }


    /*experience page.............................*/
    .experiences-flex{
        margin-bottom: 250px;
    }
    .hero-title h2{
        font-size: 2.5em;
    }
    .experiences-img{
        display: contents;
    }

    .hero-title p{
        font-size: 1.2em;
    }

    .ex-card1{
        margin-top:10%;
    }

    .ex-card1 h3{
        font-size: 2em;
    }

    .vertical-line{
        display:list-item;
        width: 8px;
        border-radius: 20px;
        background-color: #004225;
        height: 95%;
        margin-right: 20px;
    }
    
    .list{
        display: flex;
        flex-direction: row;
        margin-bottom: 60px;
    }

    .list h3{
        font-size: 2em;
    }

    .list p{
        font-size: 1.2em;
    }

    .horizonal-line{
        display: none;
    }


    /*show gallery....flex row*/
    .experience-two-panel{
        display: flex;
        flex-direction: row;
        margin-top: 50px;
        max-height: 1500px;
    }

    .gallery{
        width: 50%;
        display: flex;
        flex-direction: column;
        padding-right: 5%;
        padding-top: 5%;
        max-height: 1500px;
    }

    .gallery-group1{
       
        display: flex;
        flex-flow:column wrap;
        max-height: 1500px;
        justify-content: space-around;
    }

    .gallery-group1 img{
       width: 50%;
       margin-right: 10px;
       margin-bottom: 10px;
    }

    .gallery-group2{
        width: 100%;
        
    }
    .gallery-group2 img{
        max-width: 100%;
    }



    /*feedback page - share button .....................*/ 
     .share-text p{
        margin-bottom: 50px;
        font-size: 3em;
        color: #004225;
        font-weight: 700;
    }
    
    .share-button{
        padding:20px 40px;
        font-size: 2em;
        border-radius: 2em;    
    }
   
    /*feedback page - card .....................*/
    .card{
        width: 23.33%;
    }

    .first-margintop{
        margin-top: 50px;
    }
    
    .third-marginbottom{
        margin-bottom: 50px;
    }


}