@import url('https://fonts.googleapis.com/css2?family=Epilogue&family=Inter&family=Work+Sans&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');
:root{
    --epilogue: 'Epilogue', sans-serif;
    --inter: 'Inter', sans-serif;
    --work-sans: 'Work Sans', sans-serif;
    --roboto:'Roboto Condensed', sans-serif;
    --dongle:'Dongle', sans-serif;
    --white:white;
    --grey:grey;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
        margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--epilogue);
    
    
}
a{
    text-decoration: none !important;
}

.main{
    width: 500px;
    
 
    background-color: rgb(231, 232, 235);
    height: 100vh;
    /* box-shadow: 0px 0px 1rem rgba(7, 7, 7, 0.267); */
    
   
}
#home{
    /* background: linear-gradient(to right, black , rgb(28, 126, 133)); */
   
    background-color: rgb(225, 241, 238);
    padding: 5px;
    padding-bottom: 10px;
   
    
    
}

.center-img{
    display: flex;
    justify-content: center;
    align-items: center;
}
.back-image{
    /* height: 200px; */
    /* display: flex; */
    justify-content: center;
    align-items: center;
    background-color: #fff;
    

    /* background-color: rgb(3, 2, 3); */
    /* background: linear-gradient(to right, black , rgb(28, 126, 133)); */
    /* clip-path: polygon(100% 0%, 0% 0% , 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%); */
box-shadow: 0px 10px 2rem rgba(248, 248, 248, 0.2);
}

.flex{
    display: flex;
}
.clippolygon{
    clip-path:polygon(200px 250px,400px 100px,300px 50px,0px 0px);

}
.back-image  div{
  padding: 10px;
   
    
}
.text-center{
    text-align: center;
    }

.social-header{
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-header a{
    display: inline-block;
    display: flex;
    margin: 10px;
    letter-spacing: 1.5px;
    /* background: linear-gradient(to left, rgb(2, 11, 24) , rgb(6, 32, 34)); */
    /* margin-left: 5px; */
    background-color: rgb(23, 25, 100);
    padding: 10px 18px;
    color: white;
    font-size: 15px;
    text-decoration: none;
    /* border-radius: 0px 5px 0px 5px; */
    box-shadow: 0px 0px 1rem rgba(252, 252, 252, 0.308);
    transition: all 0.3s ease-in;
    border: 1px solid rgb(71, 70, 70);
}

.company-name{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 1rem;
    color: rgb(0, 0, 0);
   
    font-size: 2.1rem;
    letter-spacing: 1px;
}
.header p{
    font-size: 20px;
    padding-bottom: 1rem;
    margin-top: -20px;
    text-align: center;
    color: rgb(5, 4, 48);
}
.social-header a i{
    padding-right: 5px;
}
.social-header a:hover{
    background: white;
    color: rgb(0, 0, 0);
}

/**** footer ******/
.footer{
    position: fixed;
    bottom: -40px;
    left: 50%;
    transform: translate(-50% , -50%);
   
    display: flex;
    border: 1px solid rgb(29, 27, 27);
    box-shadow: 0px 0px 1rem rgba(252, 252, 252, 0.308);
    padding: 10px;
    background-color: rgb(10, 10, 10);
    /* width: 100%; */
   
   
    
}


.footer2 p a{
    text-decoration: none;
    font-weight: 500;
}
.footer a{
    display: inline-block;
    
    
    width: 20%;
    padding: 15px 20px;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    transition: all .5s ease-in;
    color: white;
    border-right: 1px solid rgb(7, 7, 7);

    
}
.footer a i{
    padding-bottom: 5px;
}
.footer a:hover{
    background-color: #fff;
    color: black;
}

/*** address details ***/
.address-details{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.6rem 0;
 
}
.address-details div{
    display: flex;
    flex-direction: row;

    
    align-items: center;
    width: 320px;
    color: rgb(31, 31, 31);
    margin-top: 10px;
}
.address-details div i{
    padding: 10px;
    color: rgb(236, 236, 236);
    background-color: rgb(14, 15, 71);

margin-right: 15px;
}

.address-details div i:hover{
    transform: rotate(30deg);
}
.address-details div a{
    text-decoration: none;
    color: rgb(12, 12, 12);
    padding-left: 10px;
    font-size: 16px;
    line-height: 20px;
}

/****** social icons *****/
.social-icons{
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    
}
.social-icons img:hover{
    transform: rotate(30deg)
}


.social-icons a img{
    width: 30px;
    /* box-shadow: 0px 0px 1rem rgba(161, 157, 157, 0.699); */
    margin-top: 10px;
    margin-left: 10px;
    transition: all .3s ease-in;
    background-size: cover;

}

.niche-ka-footer p{
    padding: 10px;
}
.heading{
    font-family: var(--inter);
    padding-top: 1rem;
    
    font-size: 25px;
    letter-spacing: 1px;

  
    
    /* font-size: 1.5rem; */
    letter-spacing: 1px;
}
.phone-number{
    display: flex;
   align-self: center;
    /* align-items: center; */
}
.addtocontact a{
    display: block;
    background-color: rgb(7, 7, 6);
    color: white;
    text-align: center;
    padding: 10px;
    margin: 0 20px;
    border-radius: 5px;
    text-decoration: none;
    
    transition: all 0.3s ease;
}

.addtocontact a:hover{
    background-color: rgb(95, 95, 95);
    color: rgb(255, 255, 255);
    box-shadow: 0px 0px 0.5rem rgba(172, 171, 171, 0.1);
}

.whatsapp-button a{
    display: block;
    background-color: #087a15;
    color: rgb(255, 253, 253);
    text-align: center;
    padding: 10px;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px 20px;
}

.whatsapp-button a:hover{
    background-color: rgb(56, 150, 61);
    color: white;
}

/****** about us ******************/
.about-content{
    padding: 10px;
    box-shadow: 0px 0px 1rem rgba(112, 112, 112, 0.295);
    
}
.about-content p{
    text-align: justify;
    line-height: 22px;
    font-size: 15px;
    font-family: var(--inter);
}
.white{
    color: #dfdede;
}

/************** our services***************/
#services{
    background: linear-gradient(to right, black , rgb(13, 56, 58));
    /* background-color: rgb(5, 9, 68); */
    margin-top: -20px;
}
.services{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding:10px 5px;
}
.services div img{
    width: 100%;
    
    box-shadow: 5px 5px 1rem rgba(27, 26, 26, 0.295);
    
}
.services div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 10px;
    text-decoration: none;
}

.services div a {
    letter-spacing: 1px;
    font-family: var(--epilogue);
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    padding: 5px 0px;
}
.know-more{

    
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1rem;

}
.know-more a{
    background: linear-gradient(to right, rgb(6, 66, 94) , rgb(9, 94, 99));
    text-decoration: none;
    padding: 10px 20px;
    color: white;
    /* border: 1px solid rgb(212, 213, 214); */

}

.portfolio .products{
   display: grid;
   grid-template-columns: repeat(2,1fr);
}

.products div{
    padding: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.products .card a{
    color: rgb(15, 15, 20);
    margin-top: 5px;
    text-decoration: none;
    font-size: 14px;
    
}
/* #myvideo{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 20%;
  
    
} */

/**** particle ***/
/**** our portfolio *************/

.portfolio{
    box-shadow: 0px 0px 1rem rgba(112, 112, 112, 0.295);

}
.p-button{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.p-button button{
    padding: 8px 13px;
    text-decoration: none;
    background-color: rgb(8, 8, 8);
    color: white;
    font-size: 15px;
    margin: 5px;
    border: none;
    /* box-shadow: 0px 0px 1rem rgba(126, 126, 126, 0.295); */

}
.p-button button:hover{
    color: rgb(255, 255, 255);
    background-color: rgb(6, 32, 71);
    transform: translateY(3px);
}
.brochure{
    padding: 2rem 0;
    background: linear-gradient(to right, black , rgb(28, 126, 133));
    color: white;

}
.brochure a{
    text-decoration: none;
    color: rgb(255, 255, 255);
   
}
.brochure a i {
    font-size: 40px;
    margin-bottom: 10px;
    color: rgb(250, 246, 246);
}


.products .card{
    position: relative;
    overflow: hidden;
}
.location{
    padding-bottom: 5.5rem;
}







@media screen and (max-width:500px){

.footer a{
    padding: 5px 12px;
   font-size: 14px;
   width: auto;
}

.social-header a{
    font-size: 14px;
    padding: 10px 13px;
}
.address-details div a {
    font-size: 15px;
}
.location{
    padding-bottom: 3rem;
}

}