@font-face {
    font-family: 'MontserratMedium';
    font-style: normal;
    font-weight:lighter;
    src: local('MontserratMedium'), url(../fonts/MontserratMedium.ttf) format('truetype');
}

@font-face {
    font-family: 'MontserratBold';
    font-style: normal;
    font-weight:lighter;
    src: local('MontserratBold'), url(../fonts/MontserratBold.ttf) format('truetype');
}

@font-face {
    font-family: 'MontserratSemiBold';
    font-style: normal;
    font-weight:lighter;
    src: local('MontserratSemiBold'), url(../fonts/MontserratSemiBold.ttf) format('truetype');
}

@font-face {
    font-family: 'MontserratRegular';
    font-style: normal;
    font-weight:lighter;
    src: local('MontserratRegular'), url(../fonts/MontserratRegular.ttf) format('truetype');
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px){
    body,html{
        overflow-x:  hidden;
    }
    .header{
   
    width: 100%;
    height: auto;
}

.logo{
    margin-left: 31%;
    width: 35%;
    height: auto;

}

.menu{
    margin-top: 0;
    margin-left: 17%;
    font-family: 'MontserratRegular'
}

.menu a{
    margin-right: 50px;
    color: #0C3168;
}

.menu a:hover{
    color: #8cc900;
    text-decoration: none;
}

.menu .get:hover{
    color: #0C3168;
    
}
.menu .get{
color: white;  
width: 256px;
height: 72px;
background: #8CC940 0% 0% no-repeat padding-box;
border-radius: 60px;
opacity: 1;
padding: 20px;
display: none;
}

.pic{
    
    width: 100%;
    height: auto;
    background-image: url("../img/Group 128.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.high{
    width: auto;
    margin-top: 4%;
    margin-left: 4%;
    font-family: 'MontserratBold';
    font-size: 31px;
    color: white;
    margin-bottom: 4%;
    
}

.touch{
    margin-left: 24%;
    margin-top: 250px;
    width: 279px;
    height: 73px;
    color: #8EC53F;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 3px solid #8EC53F;
    border-radius: 60px;
    opacity: 1;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.touch:hover{
    text-decoration: none;
}

.about{
font-family: 'MontserratBold';
    font-size: 50px;
    margin-top: 10%;
    margin-left: 1%;
    width: auto;
    color: #8DC940;
    margin-bottom: 1%;
}

.imge{
        width: 80%;
    margin-top: 10%;
    margin-left: 10%;
}

.imgeR{
    margin-top: 20px;
    text-align: left;
    font-family: 'MontserratRegular';
     line-height: 2;
     font-size: 15px;
}

.imgeB{
    margin-top: 20px;
    text-align: left;
    font-family: 'MontserratRegular';
     line-height: 2;
     font-size: 15px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 20px;
}

.bg{
    width: auto;
    height: auto;
    background: #8CC940 0% 0% no-repeat padding-box;
}

.left, .mid, .right{
    
    height: auto;
    margin-left: 10%;
    margin-bottom: 10px;
}
.left{
    margin-left: 10%;
}

.title{
    margin-top: 20px;
    text-align: left;
font-size: 20px;
    font-family: 'MontserratBold';
color: #FFFFFF;
opacity: 1;
}

.con{
    margin-top: 10px;
        font-family: 'MontserratRegular';
        line-height:  1.6;
    color: white;
}

.cir{
   width: 62px;
background: #0C3168 0% 0% no-repeat padding-box;
opacity: 1;
margin-left: 0px;

padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;

border-radius: 50%;

font-family: 'MontserratBold';
font-size: 30px;

color: #8DC940;
opacity: 1;
display: inline-block;
position: relative;
    top: -78px;

}

.cont{
    display: inline-block;
    text-align: left;
font-family: 'MontserratRegular';
letter-spacing: 0px;
color: #272727;
opacity: 1;
width: 66%;
}

.cont span{ 
text-align: left;
font-family: 'MontserratBold';
letter-spacing: 0px;
color: #5C5C5C;
opacity: 1;

}

.footer{
        width: auto;
    height: 51%;
    background: #272727;
}

#logF{
    top: 0%;
    left: 29%;
    width: auto;
    height: 36px;
    /* background: transparent url(img/Group_112_sr_pattern.png) 0% 0% no-repeat padding-box; */
    opacity: 1;
    position: relative;
}

#men{

    top: 15%;
    left: 0%;
    width: auto;
    height: auto;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 0px;
    font-size: 8px;
}

#men a{
    color: white !important;
    margin-bottom: 50px;
}

#men a:hover{
    color: #8cc900 !important;
}

#add{
    top: 9%;
    left: 7%;
    width: auto;
    height: auto;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 20px;
    font-size: 8px;
}

#con{
    top: 10%;
    left: 12%;
    width: 21%;
    height: 231px;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 20px;
    font-size: 8px;
}

hr{
    width: 75%;
    position: relative;
    top: -15%;
    left: 4%;
    /* color: #E5E5E5; */
    border-color: grey;
}

#copy{
width: auto;
    position: relative;
        top: -38%;
    left: -6%;;
    color: white;
    font-size: 8px;
    
}


#logF1{
    top: 0%;
    left: 29%;
    width: auto;
    height: 36px;
    /* background: transparent url(img/Group_112_sr_pattern.png) 0% 0% no-repeat padding-box; */
    opacity: 1;
    position: relative;
}

#men1{

    top: 15%;
    left: 0%;
    width: auto;
    height: auto;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 0px;
    font-size: 8px;
}

#men1 a{
    color: white !important;
    margin-bottom: 50px;
}

#men1 a:hover{
    color: #8cc900 !important;
}

#add1{
    top: 9%;
    left: 7%;
    width: auto;
    height: auto;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 20px;
    font-size: 8px;
}

#con1{
    top: 10%;
    left: 12%;
    width: 21%;
    height: 231px;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 20px;
    font-size: 8px;
}

.line{
    width: 75%;
    position: relative;
    top: -15%;
    left: 4%;
    /* color: #E5E5E5; */
    border-color: grey;
}

#copy1{
width: auto;
    position: relative;
    top: 0%;
    left: 27%;
    color: white;
    font-size: 8px;
    
}

.bo2{
    margin-left: 10%;
    text-align: center;
}

.contact input{
    width: 200px;
height: 60px;
border: 4px solid #8BC13E;
border-radius: 20px;
opacity: 1;
padding: 20px;
margin-right: 0;
margin-bottom: 20px;
}

.contact textarea{
    padding: 20px;
    width: 200px;
height: 205px;
border: 4px solid #8BC13E;
border-radius: 20px;
opacity: 1;
margin-bottom: 30px;
}

.contact button{
color: white;  
width: 150px;
height: 50px;
background: #8CC940 0% 0% no-repeat padding-box;
border-radius: 60px;
opacity: 1;
padding: 20px;
border: none;
padding-bottom: 10px;
}



}

@media only screen 
and (min-device-width : 481px) 
and (max-device-width : 779px){
    body,html{
        overflow-x:  hidden;
    }
    .header{
   
    width: 100%;
    height: auto;
}

.logo{
    margin-left: 31%;
    width: 35%;
    height: auto;

}

.menu{
    margin-top: 0;
    margin-left: 17%;
    font-family: 'MontserratRegular'
}

.menu a{
    margin-right: 50px;
    color: #0C3168;
}

.menu a:hover{
    color: #8cc900;
    text-decoration: none;
}

.menu .get:hover{
    color: #0C3168;
    
}
.menu .get{
color: white;  
width: 256px;
height: 72px;
background: #8CC940 0% 0% no-repeat padding-box;
border-radius: 60px;
opacity: 1;
padding: 20px;
display: none;
}

.pic{
    
    width: 100%;
    height: auto;
    background-image: url("../img/Group 128.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.high{
    width: auto;
    margin-top: 4%;
    margin-left: 4%;
    font-family: 'MontserratBold';
    font-size: 31px;
    color: white;
    margin-bottom: 4%;
    
}

.touch{
    margin-left: 24%;
    margin-top: 250px;
    width: 279px;
    height: 73px;
    color: #8EC53F;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 3px solid #8EC53F;
    border-radius: 60px;
    opacity: 1;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.touch:hover{
    text-decoration: none;
}

.about{
font-family: 'MontserratBold';
    font-size: 50px;
    margin-top: 10%;
    margin-left: 1%;
    width: auto;
    color: #8DC940;
    margin-bottom: 1%;
}

.imge{
        width: 80%;
    margin-top: 10%;
    margin-left: 10%;
}

.imgeR{
    margin-top: 20px;
    text-align: left;
    font-family: 'MontserratRegular';
     line-height: 2;
     font-size: 15px;
}

.imgeB{
    margin-top: 20px;
    text-align: left;
    font-family: 'MontserratRegular';
     line-height: 2;
     font-size: 15px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 20px;
}

.bg{
    width: auto;
    height: auto;
    background: #8CC940 0% 0% no-repeat padding-box;
}

.left, .mid, .right{
    
    height: auto;
    margin-left: 10%;
    margin-bottom: 10px;
}
.left{
    margin-left: 10%;
}

.title{
    margin-top: 20px;
    text-align: left;
font-size: 20px;
    font-family: 'MontserratBold';
color: #FFFFFF;
opacity: 1;
}

.con{
    margin-top: 10px;
        font-family: 'MontserratRegular';
        line-height:  1.6;
    color: white;
}

.cir{
   width: 62px;
background: #0C3168 0% 0% no-repeat padding-box;
opacity: 1;
margin-left: 0px;

padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;

border-radius: 50%;

font-family: 'MontserratBold';
font-size: 30px;

color: #8DC940;
opacity: 1;
display: inline-block;
position: relative;
    top: -78px;

}

.cont{
    display: inline-block;
    text-align: left;
font-family: 'MontserratRegular';
letter-spacing: 0px;
color: #272727;
opacity: 1;
width: 66%;
}

.cont span{ 
text-align: left;
font-family: 'MontserratBold';
letter-spacing: 0px;
color: #5C5C5C;
opacity: 1;

}

.footer{
        width: auto;
    height: 51%;
    background: #272727;
}

#logF{
    top: 0%;
    left: 29%;
    width: auto;
    height: 36px;
    /* background: transparent url(img/Group_112_sr_pattern.png) 0% 0% no-repeat padding-box; */
    opacity: 1;
    position: relative;
}

#men{

    top: 15%;
    left: 0%;
    width: auto;
    height: auto;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 0px;
    font-size: 8px;
}

#men a{
    color: white !important;
    margin-bottom: 50px;
}

#men a:hover{
    color: #8cc900 !important;
}

#add{
    top: 9%;
    left: 7%;
    width: auto;
    height: auto;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 20px;
    font-size: 8px;
}

#con{
    top: 10%;
    left: 12%;
    width: 21%;
    height: 231px;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 20px;
    font-size: 8px;
}

hr{
    width: 75%;
    position: relative;
    top: -15%;
    left: 4%;
    /* color: #E5E5E5; */
    border-color: grey;
}

#copy{
width: auto;
    position: relative;
    top: 0%;
    left: 27%;
    color: white;
    font-size: 8px;
    
}

.bo2{
    margin-left: 10%;
    text-align: center;
}

#logF1{
    top: 0%;
    left: 29%;
    width: auto;
    height: 36px;
    /* background: transparent url(img/Group_112_sr_pattern.png) 0% 0% no-repeat padding-box; */
    opacity: 1;
    position: relative;
}

#men1{

    top: 15%;
    left: 0%;
    width: auto;
    height: auto;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 0px;
    font-size: 8px;
}

#men1 a{
    color: white !important;
    margin-bottom: 50px;
}

#men1 a:hover{
    color: #8cc900 !important;
}

#add1{
    top: 9%;
    left: 7%;
    width: auto;
    height: auto;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 20px;
    font-size: 8px;
}

#con1{
    top: 10%;
    left: 12%;
    width: 21%;
    height: 231px;
    text-align: left;
    font: Light 20px/55px Poppins;
    letter-spacing: 0px;
    color: white !important;
    opacity: 1;
    position: relative;
    padding-top: 20px;
    font-size: 8px;
}

.line{
    width: 75%;
    position: relative;
    top: -15%;
    left: 4%;
    /* color: #E5E5E5; */
    border-color: grey;
}

#copy1{
width: auto;
    position: relative;
    top: 0%;
    left: 27%;
    color: white;
    font-size: 8px;
    
}

.bo2{
    margin-left: 10%;
    text-align: center;
}

.contact input{
    width: 200px;
height: 60px;
border: 4px solid #8BC13E;
border-radius: 20px;
opacity: 1;
padding: 20px;
margin-right: 0;
margin-bottom: 20px;
}

.contact textarea{
    padding: 20px;
    width: 200px;
height: 205px;
border: 4px solid #8BC13E;
border-radius: 20px;
opacity: 1;
margin-bottom: 30px;
}

.contact button{
color: white;  
width: 150px;
height: 50px;
background: #8CC940 0% 0% no-repeat padding-box;
border-radius: 60px;
opacity: 1;
padding: 20px;
border: none;
padding-bottom: 10px;
}

}