@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;
       
    
}

a{
    text-decoration: none !important;
}

main{
    width: 500px;
    
 
    
    height: 100vh;
    box-shadow: 0px 0px 1rem rgba(7, 7, 7, 0.267);
    background: url('./images/galaxy.mp4') !important;
 
   
}
#home{
    background: linear-gradient(to right, rgb(1, 161, 254) , rgb(1, 161, 254));
   
       padding-left: 5px;
    padding: 5px;
   
    
    
}

.back-image{
    height: 150px;
    
    justify-content: center;
    align-items: center;
    

    /* background-color: rgb(3, 2, 3); */
    background: linear-gradient(to right, #00000000 , #08080800);
    /* 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);
}
.clippolygon{
    clip-path:polygon(200px 250px,400px 100px,300px 50px,0px 0px);

}
.back-image img{
  width: 180px;
   
    
}
.text-center{
    text-align: center;
    }

.social-header{
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-header a{
    display: inline-block;
    background: linear-gradient(to left, rgb(2, 11, 24) , rgb(6, 32, 34));
    /* margin-left: 5px; */
    padding: 10px 16px;
    color: white;
    font-size: 15px;
    text-decoration: none;
    border-radius: 15px;
    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: var(--inter);
    padding-top: 1rem;
   
    font-size: 1.5rem;
    letter-spacing: 1px;
}
.header p{
    font-size: 13px;
    padding-bottom: 1rem;
    text-align: center;
    color: white;
}
.social-header a i{
    padding-right: 5px;
}
.social-header a:hover{
    background: white;
    color: rgb(0, 0, 0);
}

/**** footer ******/
.footer{
    position: fixed;
    bottom: -50px;
    left: 50%;
    transform: translate(-50% , -50%);
   
    display: flex;
    border: 1px solid rgb(30, 30, 30);
    box-shadow: 0px 0px 1rem rgba(11, 11, 11, 0.308);
    background-color: rgb(10, 10, 10);
    /* width: 100%; */
    position: fixed;
   
    background: #f4f4f4;
    width: 100%;
    text-align: center;
    min-height: 50px;
    list-style-type: none;
    overflow: auto;
    margin-bottom: 0px;
    padding-left: 0px;
    display: flex;
}
   
   
    



.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: 20px;
}
.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: white;
    margin-top: 10px;
}
.address-details div i{
    padding: 10px;
    color: rgb(0, 0, 0);
    background-color: rgb(243, 243, 243);
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-right: 15px;
}

.address-details div i:hover{
    transform: rotate(30deg);
}
.address-details div a{
    text-decoration: none;
    color: white;
    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;

}

.heading{
    font-family: var(--inter);
    padding-top: 1rem;
    
    font-size: 20px;
    letter-spacing: 1px;

  
    
    /* font-size: 1.5rem; */
    letter-spacing: 1px;
}

.addtocontact a{
    display: block;
    background-color: #fff;
    color: white;
    text-align: center;
    padding: 10px;
    margin: 30px;
    border-radius: 5px;
    text-decoration: none;
    color: black;
    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: #44bb52;
    color: rgb(255, 253, 253);
    text-align: center;
    padding: 10px;
    text-decoration: none;
    border-radius: 5px;
    margin: 30px;
    
}

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

/****** about us ******************/
.about-content{
    padding: 40px 50px;
    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);
    align-items: center;
    justify-content: center;
}
.white{
    color: #dfdede;
}

/************** our services***************/
#services{
    background: linear-gradient(to right, rgb(1, 161, 254) , rgb(1, 161, 254));;
}
.services{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding:20px 50px;
}
.services div img{
    width: 90%;
    box-shadow: 5px 5px 1rem rgba(27, 26, 26, 0.295);
    
}
.services div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    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(1, 161, 254) , rgb(1, 161, 254));;
    text-decoration: none;
    padding: 10px 20px;
    color: white;
    /* border: 1px solid rgb(212, 213, 214); */

}

.portfolio .products{
padding:20px 50px;
   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 ,p{
    color: rgb(15, 15, 20);
    margin-top: 5px;
    text-decoration: none;
    font-size: 15px;
    text-align: center;
    
}
/* #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{
    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;
    color: rgb(19, 19, 19);

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


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







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

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

.social-header a{
    font-size: 14px;
    padding: 10px 13px;
}
.address-details div a {
    font-size: 14px;
}
.location{
    padding-bottom: 3rem;
}
.header p{
    font-size: 10px;
    padding-bottom: 1rem;
}
}
.card-profile-image rounded-circle{
    border-radius: 50%;
}
.videos-h {
    margin: 0px auto;
    font-size: 25px;
    text-transform: uppercase;
    color: #080808;
    font-weight: 700;
    text-align: center;
}
.heading-line {
    width: 50px;
    background-color: #01B1CA;
    height: 3px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 20px;
}
.video-h3 {
    text-align: center;
    font-size: 18px;
}
.youtube_codegena {
    background-color: #000;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    cursor: hand;
    cursor: pointer;
}
.video-h3 {
    text-align: center;
    font-size: 18px;
}
.youtube_codegena {
    background-color: #000;
    max-width: 99%;
    overflow: hidden;
    position: relative;
    cursor: hand;
    cursor: pointer;
}
.youtube_codegena .play {
    filter: alpha(opacity=80);
    opacity: .8;
    height: 77px;
    left: 50%;
    margin-left: -38px;
    margin-top: -38px;
    position: absolute;
    top: 50%;
    width: 77px;
    background: url(https://lh3.ggpht.com/vo4W82YNfpJDsttqn-22YsLtEJjmOtIB-54yIxR5wQA0Ucs5leNIu-W8iEmyY8-Pf7RWHk4=w64) no-repeat;
}

.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgb(4 26 55 / 16%);
    box-shadow: 0 1px 2.94px 0.06px rgb(4 26 55 / 16%);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.card .card-header {
    background-color: transparent;
    border-bottom: none;
    padding: 25px;
}
.card-profile-image rounded-circle{
    border-radius: 50%;
}
.card-profile-image {
    text-align: center;
    max-width: 244px;
    max-height: 190px;

    width: 144px;}

    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 30%;
       
      }
 .input-container {
        margin-bottom: 1.5rem;
    }

    .input-group {
        border-radius: 0.25rem;
        border-width: 1px;
        padding: 1rem;
        position: relative;
    }

    .input-container {
        margin-bottom: 1.5rem;
    }

    .input-group {
        border-radius: 0.25rem;
        border-width: 1px;
        padding: 1rem;
        position: relative;
    }
    .justify-end {
        justify-content: flex-end;
    }
    .btn-primary {
        white-space: nowrap;
    }
    .btn-primary {
        padding: 0.25rem 0.75rem;
    }
    .btn-primary {
        border-color: transparent;
        --tw-text-opacity: 1;
        color: rgba(255,255,255,var(--tw-text-opacity));
        border-radius: 0.375rem;
        border-width: 1px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: .875rem;
        line-height: 1.25rem;
    }
    #success_message{ display: none;}

    .form-group {
        position: relative;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: rgb(251, 249, 249);
    }
    .well form-horizontal{
        padding: 7px;
        font-size: 12px;
        position: relative;   
        z-index: 2;
        background-color: antiquewhite;
    }
    .divider-text:after {
        content: "";
        position: absolute;
        width: 100%;
        border-bottom: 1px solid #ddd;
        top: 55%;
        left: 0;
        z-index: 1;
    }
    
    .contact-form {
        background-color: #fbfbfb;
        border: 1px solid #ececec;
        width: 450px;
        margin: 50px auto;
        padding:20px 50px;
    }
    .contact-form .form-header {
        margin-bottom: 40px;
    }
    .contact-form form textarea {
        max-width: 100%;
        min-width: 100%;
        min-height: 120px;
    }
    .contact-form form .btn {
        width: 100%;
    }