*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    overflow-x: hidden;
}
.box1{
    height: 100vh;
    width: 100vw;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./media/images/pro/bg-of-1st.jpeg) center center / cover fixed no-repeat;
}
.box1 header{
    position: fixed;
}
.box1 header ul{
    margin: 35px 0  0 50px;
    width: 66px;
    cursor: pointer;
    overflow: hidden;
}
.box1 header ul li{
   
    height: 6px;
    width: 56px;
    background-color: rgb(103, 142, 62);
    margin: 10px;
    list-style: none;
    z-index: 22222222222222222;
    animation: bounce 2s ease infinite;
}
.box1 .main-content{
    height: 100%;
    letter-spacing: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.box1 .main-content h3{
    font-family:var(--ff-secondary);
    color: rgb(103, 142, 62);
    text-transform: capitalize;
    font-size: 2.5rem;
    letter-spacing: 4px;
}
.box1 .main-content h1{
    text-transform: uppercase;
    font-family:  "Catamaran", sans-serif;
    color: rgb(250, 249, 249);
    font-size: 3.9rem;
}

.box1 .main-content button{
    color: white;
    font-weight: 700;
    letter-spacing: 2px;
    outline: 0.125rem solid rgba(103,142,62);
    outline-offset: 0.2rem;
    font-size: 1.25rem;
    padding: 1.2rem 2rem;
    background-color: rgb(103, 142, 62);
    margin-top: 22px;
}


/*  g-col  */
#g-col{
    height: 8px;
    width: 100%;
    background: linear-gradient(to left, #678e3e, #e9b949, #678e3e);
}
/*  g-col  */
/*  BOX 2  */


.box2{
    min-height: 120vh;
    width: 100vw;
}
.box2 header{
    height: 36%;
    display: flex;
    margin: 5px;
}
.box2 header .sec-con-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-around;
    text-align: center;
    background-color: #f1f5f8;
    padding: 2.5rem;
    
    
}
.box2 header .sec-con-box:hover{
    border-bottom: 2px solid rgb(103, 142, 62);
    background-color: #ffffff;
    transition:  0.3s linear;
}
.box2 header .sec-con-box:hover i{
    font-size: 2.6rem;
    transition: ease;
}

.box2 header .sec-con-box i{
    color: rgb(103, 142, 62);
    font-size: 2.5rem;
    
}
.box2 header .sec-con-box p{
    margin-top: 15px ;
    color: #617d98;
}
#p-h{
    color: black;
    font-family: var(--ff-primary);
    letter-spacing: 0.15rem;
    font-weight: 600;
    font-size: 14px;
}
  /*==========sec-main-img============*/

    .box2 .second-main-con{
    height: 89vh;
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;

    }
    .box2 .second-main-con .sec-main-con-2{
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }
    .sec-main-con-2 .img{
        width: 76%;
        height: 61%;
        border: 10px solid rgb(103, 142, 62);
        overflow: hidden;
        background-color:rgb(103, 142, 62);
        margin-right: 40px;
    }
    .second-main-con img{
        height: 100%;
        width: 100%;
    }
    .sec-main-con-2 img:hover{
            opacity: 0.5;
            transform: scale(1.2);
    }
    #con2{
        height: 100%;
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        margin-left: 30px;
    }
    #con2 h3{
        font-family: var(--ff-secondary);
        color: rgb(103,142,62);
        letter-spacing: 0.25rem;
        font-size: 1.7rem;
    }
    #con2 h1{
        font-family: var(--ff-primary);
        letter-spacing: 0.25rem;
        font-size: 40px;
        color: rgb(32, 31, 36);
    }

    #con2 #p1,#p2{
        width: 67%;
        color: #617d98;
        margin:30px 0px 0px 0px  ;
        font-family: var(--ff-primary);
    }
    #con2 #p2{
        width: 67%;
        margin-bottom:30px ;
        color: #617d98;
    }
    #con2 button{
        width: 142px;
        height: 33px;
        outline: none;
        border: none;
        background-color: rgb(103, 142, 62);
        color: #ffffff;
        font-weight: bolder;
        letter-spacing: 2px;
    }
  /*==========sec-main-img============*/

/*  BOX 2  */

/*   BOX3    */
.box3{
    height: 90vh;
    width: 100vw;
    background-color: #f1f5f8;
    display: flex;
  
    justify-content: center;
    align-items: center;
}
.third-main-box{
    height: 80%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.third-con-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25%;
    height: 60%;
    margin-top: -7%;
}
.third-con-box h4{
    font-family: var(--ff-secondary);
    letter-spacing: 0.25rem;
    font-size: 30px;
    color: rgb(103, 142, 62);
}
.third-con-box h2{
    font-size: 36px;
    font-family: var(--ff-primary);
    letter-spacing: 0.2rem;
}
.third-con-box p{
color: #617d98;
font-size: 14.5px;
width: 333px;
line-height: 1.5;
font-family: var(--ff-primary);
border: 0px solid blanchedalmond;
}

.third-con-box button{
    height: 30px;
    width: 120px;
    border: none;
    color: #ffffff;
    padding: 8px;
    letter-spacing: 0.25rem;
    font-size: 12px;
    font-weight: 500;
    background-color: rgb(103, 142, 62);
}
.third-img-con-box{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-between;
    gap: 0 2px;
}
.third-img-con-box img{
    height: 17rem;
    width: 240px;
    border-radius: 10px;
    background-color: #c51515;
}
.third-img-con-box > p:nth-of-type(1) {
  color: rgb(0, 0, 0);
  font-weight: bold;
  margin-top: 30px;
  font-size: 15px;
  font-family: var(--ff-primary);
  letter-spacing: 0.25rem;
}
.third-img-con-box > p:nth-of-type(2){
    color: rgb(103, 142, 62);
    font-weight: bolder;
    font-size: 16px;
    letter-spacing: 2px;
    margin-top: 5px;
}
.imgg{
    display: flex;
    margin-left: 35px;
    width: 65%;
    height: 90%;
  

}

/*   BOX3   */


/*   BOX4   */


.box4{
    min-height: 130vh;
    width: 100vw;
    
}   
.box4 header{
    
    width: 100vw;
}
.box4 header h3{
    font-weight: bolder;
    font-size: 2rem;
    text-align: center;
    margin-top: 60px;
    color: rgb(103, 142, 62);
    font-family: var(--ff-secondary);
    letter-spacing: 0.2rem;
}
.box4 header h1{
    letter-spacing: 0.25rem;
    color: #27323c;
    font-weight: bolder;
    font-size: 2.3rem;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 36px;
    font-family:var(--ff-primary) ;
}
.fourth{
    display: flex;
    justify-content: space-evenly;
    padding: 0% 3.5%;
}
.fourth-con-box{
    height: 31rem;
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    margin: 0 18px;
}
.fourth-con-box:hover{
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease-in-out;
}
.fourth-con{
    width: 100%;
    height: 45%;
    border-radius:0px 0px 16px 16px;
    display: flex;
    flex-direction: column; 
    
}
.fourth-con h4{
    text-align: center;
    font-family: var(--ff-primary);
    letter-spacing: 2px;
    margin-top: 45px;
    margin-bottom: 12px;
}
.fourth-con p{
    text-align: center;
    padding: 0% 10px;
    color: #617d98;
}
.fourth-con i{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -6%);
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin-bottom: -25px;
    border: 6px solid #f1f5f8;
    background-color:#beed8c;
    display: block;
    color: #678e3e;;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    font-size: 32px;
}
.fourth-con button{
    text-align: center;
    padding: 8px 16px;
    margin: auto;
    border: none;
    background-color: rgb(103, 142, 62);
    color: #ffffff;
    border-radius: 8px;
    letter-spacing: 2.5px;
    font-size: 11px;
    font-weight: 500;
    
}
.fourth-con-box img{
    width: 100%;
    height: 55%;
    border-radius: 16px 16px 0px 0px;
    background-color: yellowgreen;
    position: relative;
    z-index: -6;
}

/*   BOX4   */


/*   BOX5   */


.box5{
    min-height:100vh;
    background-color: #f1f5f8;
}
.last-box{
    min-height: 90vh;
    width: 100%;
    display: flex;
    padding: 6% 5%;

}
.fivth-con-box{
    width: 50%;
    margin: 2px;
}
.form-box{
        border-radius:20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
address p{
    font-weight: 100;
    font-size: 1rem;
    font-family: var(--ff-primary);
    letter-spacing: 0.25rem;
    line-height: 1;
    color: #678e3e;
    display: inline-block;
    
}
address i{
    font-weight: 100;
    font-size: 1rem;
    font-family: var(--ff-primary);
    letter-spacing: 0.25rem;
    line-height: 1;
    color: #678e3e;
    display: inline-block;
}

address h5{
    width: 300px;
    margin: 12px 0 30px 0;
    font-size: 14px;
    font-weight: 550;
    letter-spacing: 0.25rem;
    font-family: var(--ff-primary);
    line-height: 1.1;
}

.form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border-radius: 10px;
    
}
.form h1{
    text-align: center;
    font-family: var(--ff-primary);
    font-weight: 600;
    font-size: 1.75rem;
    margin: 16px 0 26px 0;
    color: #617d98;
    letter-spacing: 0.2rem;
}
.form input{
    border: none;
    margin-bottom: 20px;
    border-radius: 10px;
    padding-left: 20px;
    width: 90%;
    height: 2.5rem;
    background-color: #f1f5f8;
}
.form input::placeholder{
    color: #3a536a;
    font-size: 12.5px;
    letter-spacing: 0.25rem;
}
.form textarea{
    border: none;
    margin-bottom: 40px;
    height: 6rem;
    width: 90%;
    border-radius: 10px;
    padding: 18px;
    background-color: #f1f5f8;
}
.form textarea::placeholder{
    color: #3a536a;
    font-size: 14.5px;
    font-weight: 100;
    letter-spacing: 0.25rem;
}
.form button{
    width: 100%;
    height: 50px;
    background-color: #678e3e;
    border: none;
    border-radius: 0 0 10px 10px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.25rem;
}
footer{
    min-height: 40vh;
    width: 100%;
    background-color: rgb(31, 29, 29);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.5rem;
}
footer p{
    color: #ffffff;
    font-weight: 100;
    font-family: var(--ff-primary);
    letter-spacing: 0.25rem;
    line-height: 1;
  
}
footer h1 i{
    margin: 0 10px;
    font-size: 24px;
}
footer h1 i:hover{
    color: rgb(103, 142, 62);
    transition: 1s ease;
}
footer span{
    color: rgb(103, 142, 62);
}

/*   BOX5   */
    
.box1 .main-content button:hover{
    color: #678e3e;
    background-color: #beed8c;
    transition: 0.8s ease;
}
button:hover{
    color: rgb(103, 142, 62);
    background: #beed8c;
    transition: 0.8s ease;

}
#but2:hover{
        color: rgb(103, 142, 62);
        background: #beed8c;
        transition: 0.8s ease;

    }

:root{
--ff-primary: "Catamaran", sans-serif;
--ff-secondary: "Grand Hotel", cursive;
--color-gray:#f1f5f8;
}

@keyframes bounce{
    0%{

        height: 3px;
        width: 26px;
    }
    50%{
        height: 9px;
        width: 66px;
    }
    100%{
        height: 3px;
        width: 26px;
    }
}