@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&display=swap');
:root
{
    --red:#295d8a;
    --maroon:#b52a3c;
    --black:#242424;
    --white:#fbfefd;
    --box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
    --border: 2rem  solid rgba(0, 0, 0, 0.1);
    --outline: 0.1rem solid rgba(0, 0, 0, 0.1);
}

*
{
	font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: all 2s linear;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

body{
    background: #b0c4de;
    

    
}




section{
    
}

.rights a{
    color: var(--red);
}



.heading
{
    text-align: center;
    padding: 2rem 0;
    font-size: 3.5rem;
    padding-bottom: 3rem;

}

.heading span
{
    background: var(--red);
    color: var(--white);
    display: inline-block;
    padding: 2rem 3rem;
    clip-path: polygon(100% 0,93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);

}

.header2 .section1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: white;
}
.header2 .section1 .no,.con{
    font-size: 20px;
    color: var(--red);
    align-items: center;
}

.header2 .section1 img{
margin-left: 0px;
margin-right: 50px;
}

.header2 .section1 .block1
{
    display: flex;
    flex-direction: row;
    align-items: center;
}




.header2 .section1 .block1 .socialbtn a i{
    font-size: 30px;
    color:var(--red);
    height: 40px;
    width: 40px;
    text-align: center;
    margin-right: 20px;
    
    border: 0px solid steelblue;
}

.header2 .section1 .block1 .socialbtn a i:hover{
   color: grey;
}
.nav2{
    background-color: var(--red);
    
}

.nav2 ul{
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    text-align: center;
}

.nav2 ul li{
display: inline-block;
}

.nav2 ul li a{

    font-size: 18px;
    display: block;
    color: white;
    padding: 26px 26px 26px 26px;
    margin:0px 5px; 
    font-weight: 500;
    height: 80px;
    width: 300px;


}

.nav2 ul li a:hover{
    background-color:purple ;
    border-bottom: 4px solid white;
    transition: 0.4s;
}
/*header2*/
.header
{
    border: 0px solid;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 9%;
    background: #fbfefd;
    box-shadow: var(--box-shadow);

}

.header .navbar a
{
font-size: 1.7rem;
margin: 0 1rem;
color: #242424;
width: 80px;
height: 80px;

}



.header .navbar a:hover
{
    color: var(--red);
    font-size: 2rem;
    transition: all 1s;
    background-color: red;


}


.header .icons div
{

height: 4.5rem;
width: 4.5rem;
line-height: 4.5rem;
border-radius:.5rem ;
background: #fbfefd;
color: var(--black);
font-size:2rem ;
margin-right:.3rem ;
text-align: center;
cursor: pointer;



}
.header .logo
{
    height: 60px;
}

.header .icons div:hover
{
    color: white;
    background: var(--maroon);
    transition: all .5s;
}

.header .search-form
{
 
 border: 0px ;
 position: absolute;
 top: 110%;
 right: -110%;
 width: 50rem;
 height: 5rem;
 background: var(--white);
 border-radius: 2rem;
 overflow: hidden;
 display: flex;
 align-items: center;
 
 box-shadow: var(--box-shadow);



}

.header .search-form.active
{
    right: 2rem;
    transition: .4s linear;

}






.header .search-form input
{

    height: 100%;
    width: 100%;
    background: none;
    text-transform: none;
    font-size: 1.6rem;
    color: var(--black);
    padding: 0 1.5rem;


}

.header .search-form label
{
font-size: 2.2rem;
padding-right:1.5rem ;
color: var(--black);
cursor: pointer;
}

.header .search-form label:hover
{

   color: var(--red);

}
/*header*/


/*slider*/
.slidershow{
    width: 100%;
    height: 650px;
    overflow: hidden;
    
}
.middle{
   
    margin-top: 0px;
}

.navigation{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display:flex;
}

.bar{
    width: 50px;
    height: 20px;
    border: 2px solid #fff;    
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;


}
.bar:hover{
    background: var(--white);
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}
.slides{
    width: 500%;
    height: 100%;
    display: flex;
}

.slide{
    width: 20%;
    transition: 0.6s;

}

.slide img{
    width: 100%;
    height: 100%;
}

#r1:checked ~ .s1{
    margin-left: 0;

}


#r2:checked ~ .s1{
    margin-left: -20%;
    
}


#r3:checked ~ .s1{
    margin-left: -40%;
    
}


#r4:checked ~ .s1{
    margin-left: -60%;
    
}
#menu-btn
{
    display: none;
    
}

   
/*slider*/

/*shape and about us*/

.dcabout{
     display: flex;
    justify-content: center;
    border: 0px solid;
    padding-top: 17rem;
    padding-bottom: 17rem;
    width: 100%;
    height: 90rem;
    box-shadow: var(--box-shadow);
    color: var(--red);
    background: var(--white);
    margin: 2em 0;


}
.cabout{
    color: black;
    text-align: left;
    margin-left: 20px;

    font-size: 1.9rem;

line-height: 14px;

}


.dcabout button{
    background: var(--red);
    height: 30px;
    width: 100px;
    margin-left: 100px;
    border-radius: 4px;
    font-size: 20px;

}

.skewed{
    display: flex;
    justify-content: center;
    border: 0px solid;
    padding-top: 17rem;
    padding-bottom: 17rem;
    width: 100%;
    height: 90rem;
    box-shadow: var(--box-shadow);
    color: var(--red);
    background: var(--white);
    margin: 2em 0;

}

.skewed .Aboutus
{
   
    text-align: center;
    border: 0px solid;
    width: 50%;
    height: 70rem;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-direction: column;
    background: white;
    
    
}


.skewed .Aboutus h1{
    font-size: 4rem;
    color: var(--red);
    font-weight: 100;
    margin-left: 20px;

}

.skewed .Aboutus p
{
    color: black;
    text-align: left;
    margin-left: 20px;

    font-size: 1.9rem;
    padding: 1rem;
line-height: 23px;

}

.skewed .image {
    width: 50%;
    
    background: white;
    height: 70rem;
    position: relative;

    
}

.skewed .image img{
    display: -webkit-box;
    margin-left: auto;
    display: block;
    margin-top: 80px;
    height: 600px;
    width: 700px;
    

}





/*shape and about us*/




/*products*/

.products .products-slider
{
    border: 0px solid;
    padding: 1rem;
}

.products .products-slider:first-child
{
    
    margin-bottom: 2rem;
    
}

.products .products-slider .box
{
    border: 0px solid red;
    background:var(--red);
    
    border-radius: .5rem;
    text-align: center;
    padding: 3rem 2rem;
    outline-offset: -1rem;
    outline: var(--outline);
    box-shadow: var(--box-shadow);
    transition: .2s linear;
    margin-bottom: 10px;
    
}


.products .products-slider .box:hover
{
    box-shadow: 1px 1px 10px 4px var(--red);


}

.products .products-slider .box img
{
    height: 20rem;
    width: 20rem;
    object-fit: fill;
}

.products .products-slider .box h1
{
    font-size: 2.5rem;
    color: var(--white);
}



/*products*/

/*  E MAIL SECTION*/

.contact{
    height: 75vh;
    width: 82vw;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .2rem .5rem #0006;
    background-image: linear-gradient(145deg,var(--red),var(--black)) ;
    border-radius: 1rem;
    margin-top: 2rem;
    margin-left: 150px;

}



.form,.map{
    width: 50%;
    height: 100%;

}


/*cform*/

.cform{
    background:var(--black);
    display: flex;
    flex-direction:column ;
    justify-content: space-evenly;
    position: relative;
    height: 500px;
}

.ccontact{
    height: 500px;
    width:100%;

    display:flex;
    overflow:hidden;
    align-items:center;
    justify-content: center;
    box-shadow: 0 .2rem .5rem #0006;
    background-image: linear-gradient(145deg,var(--red),var(--black)) ;
    border-radius: 1rem;
    margin-top: 2rem;
    margin-left:2rem;
    margin-right: 2rem;
    
}

.cform h1{
    color: var(--red);
    font:500 1.8rem sans-serif ;
    padding: 0.2rem;
    font-size: 50px;
    margin-left: 50px;
}

.cform form{
padding: 0.2rem;
}

.cform input , .cform textarea{
    width: 70%;
    padding: 1rem;
    border: .08rem solid var(--red);
    border-radius: 2rem;
    background-color: unset;
    color: #a6a9d4;
    font-size: 2rem;

    margin-left: 4rem;

}
.cform input:not(first-child) , .cform textarea {
    margin-top: 0.8rem;

}

.cform button{

    background-color: var(--red);
    padding: 1rem 2 rem;
    color: #fff;
    border-radius: 2rem;
    border: none;
    height: 50px;
    width: 200px;
    margin-top: 20px;
    margin-left: 450px;
}

.cform textarea{
    height: 6rem;
    resize: none;
}

.cform a{
    font-size: 30px;
    padding: 1rem 2 rem;
    color:#128C7E;
    background: var(--black);
    border-radius: 2rem;
    border: none;
    height: 50px;
    width: 200px;
    margin-top: 20px;
    margin-left: 450px;
    text-align: center;
    
}



/*cform*/

.form{
    background:var(--white);
    display: flex;
    flex-direction:column ;
    justify-content: space-evenly;
    position: relative;
}

.form::before{
    position: absolute;
    width: 0;
    height: 0;
    border: 1.4rem solid transparent;
    border-right: 1.4rem solid transparent var(--black);
    top: 10%;
    left: -2.8rem;
    content: "";

}

.form h1{
    color: var(--red);
    font:500 1.8rem sans-serif ;
    padding: 0.2rem;
    font-size: 50px;
    margin-left: 50px;
}

.form form{
padding: 0.2rem;
}

.form input , .form textarea{
    width: 70%;
    padding: 1rem;
    border: .08rem solid var(--red);
    border-radius: 2rem;
    background-color: unset;
    color: #a6a9d4;
    font-size: 2rem;

    margin-left: 4rem;

}
.form input:not(first-child) , .form textarea {
    margin-top: 0.8rem;

}
.form a{
    font-size: 50px;
    padding: 1rem 2 rem;
    color:#128C7E;
    background: white;
    border-radius: 4rem;
    border: none;
    
    margin-top: 20px;
    margin-left: 480px;
    text-align: center;
    
}

.form button{

    background-color: var(--red);
    padding: 1rem 2 rem;
    color: #fff;
    border-radius: 2rem;
    border: none;
    height: 50px;
    width: 90px;
    margin-top: 20px;
    margin-left: 450px;
    cursor: pointer;
}

.form textarea{
    height: 6rem;
    resize: none;
}

.map iframe{
    width: 100%;
    height: 100%;
}
/*  E MAIL SECTION*/





.brands{
    margin-top: 80px;
    background: white;
}

.brands .products-slider .box{
    color: white;
    background: white;
}

.brands .products-slider .box img{
    height: 200px;
    width: 200px;
    object-fit: contain;
}

.imgcontainer{
    height: 100vh;
    width: 100vw;
    position: relative;
}

.imgcontainer img{
    width: 100%;
    height: 700px;
    object-fit: cover;
    position: absolute;
    animation: fade 21s ease-in-out infinite alternate-reverse;

}

img:nth-of-type(1){
    animation-delay:3s;
}

img:nth-of-type(2){
    animation-delay: 3s;
}

img:nth-of-type(3){
    animation-delay: 3s;
}

img:nth-of-type(4){
    animation-delay: 3s;
}


img:nth-of-type(5){
    animation-delay: 3s;
}


img:nth-of-type(6){
    animation-delay: 3s;
}


img:nth-of-type(7){
    animation-delay: 3s;
}
@keyframes fade{
    0%{
        opacity: 1;
    }
    33%{
        opacity: 0;
    }
    67%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
   
}

/*footer2*/
.footer2 .fsection1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #2e2e2e;
    width: 100%;
    
}
.footer2 .fsection1 .fno,.fcon{
    font-size: 20px;
    color: white;
    align-items: center;
}

.footer2 .fsection1 img{
margin-left: 50px;
margin-right: 0px;
height: 100px;
width: 250px;
}

.footer2 .fsection1 .fblock1
{
    display: flex;
    flex-direction: row;
    align-items: center;

}




.footer2 .fsection1 .fblock1 .fsocialbtn a i{
    font-size: 30px;
    color:white;
    height: 40px;
    width: 40px;
    text-align: center;
    margin-right: 20px;
    
    border: 0px solid steelblue;
}

.footer2 .fsection1 .fblock1 .fsocialbtn a i:hover{
   color: grey;
}

.fsection2{
    background: #2e2e2e;
    width: 100%;
    height: 400px;
    margin-top: 0px;

}

.rights span{
    color: var(--red);
}

.fsection2 .fquicklinks h2{
    font-size: 50px;
    margin-top: 50px;
    font-weight: 300;
    color: steelblue;
    margin-left: 50px;

}

.fsection2 .fquicklinks ul{
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    text-align: left;
}

.fsection2 .fquicklinks ul li{
display: inline-block;
}

.fsection2 .fquicklinks ul li a{

    font-size: 20px;
    display: block;
    color:white;
    margin:0 10px;
   font-weight: 200;
   border-bottom: .5px solid black;
   margin-left: 50px;
   

}

.fsection2 .fcontactus{
     display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
     margin-left: 450px;
    

}
.fsection2 .fcontactus h2{
    font-size: 50px;
    font-weight: 400;
    color: steelblue;
    margin-right: 50px;

}

.fsection2 .fcontactus h3{
    color: white;
    font-size: 20px;
    font-weight: 200;
}

.fsection2 .fcontactus .fcon{
    margin-right: 20px;
    font-size: 20px;
}
hr {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
.rights{
    
    width: 100%;
    height: 50px;
    text-align: center;
    background: #2e2e2e;

}

.rights h3{
    font-size: 20px;
    color: white;
    margin-top: 10px;

}
.rights .i {
    margin-top: 10px;
}


/*contact map*/

.cmap iframe{
    width: 100%;
    height: 500px;

}


/*contact map*/


 .dcabout{
     display: flex;
    justify-content: center;
    border: 0px solid;
    padding-top: 17rem;
    padding-bottom: 17rem;
    width: 100%;
    height: 90rem;
    box-shadow: var(--box-shadow);
    color: var(--red);
    background: var(--white);
    margin: 2em 0;


}
.cabout{
    color: black;
    text-align: left;
    margin-left: 20px;

    font-size: 1.9rem;

line-height: 30px;

}
 
 .dcabout .heading{
    font-size: 30px;
 }

.dcabout button{
    background: var(--red);
    height: 50px;
    width: 100px;
    margin-left: 700px;
    border-radius: 4px;
    font-size: 20px;


}


/*responsive code*/

@media (max-width:991px)
{



 html{
    font-size: 55%;
  
      } 

      .ccontact .cform a{
        font-size: 60px;
      }

      .contact{
        margin-left: 70px;
      }  

      .contact .form button{
    margin-left: 150px;
    font-size: 20px;
}




.dcabout{
     display: flex;
    justify-content: center;
    border: 0px solid;
    padding-top: 17rem;
    padding-bottom: 17rem;
    width: 100%;
    height: 90rem;
    box-shadow: var(--box-shadow);
    color: var(--red);
    background: var(--white);
    margin: 2em 0;


}
.cabout{
    color: black;
    text-align: left;
    margin-left: 20px;

    font-size: 2rem;

line-height: 23px;

}
 
 .dcabout .heading{
    font-size: 30px;
 }

.dcabout button{
    background: var(--red);
    height: 50px;
    width: 100px;
    margin-left: 600px;
    border-radius: 4px;
    font-size: 20px;
    cursor: pointer;


}

.contact .form h1{
    font-size: 5rem;
    font-weight: 800;
}

.contact .form a{
    margin-left: 180px;
}
  .header{
    padding: 2rem;
  }

  
  section{
    padding: 2rem;
  }

   .skewed .Aboutus{
    height: 550px;
    width: 500px;
  }
  .skewed .image{
    height: 550px;
    width: 500px;
  }

  .skewed .image img{
    display: -webkit-box;
    margin-left: auto;
    display: block;
    margin-top: 80px;
    height: 400px;
    width: 270px;
    clip-path: polygon(30% 0%, 100% 0, 100% 30%, 100% 70%, 100% 100%, 8% 100%, 0 41%, 10% 0);

}

.footer2 .fsection1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #2e2e2e;
    border-bottom: .5px solid black;
    width: 100%;
    margin-bottom: 0px;
}
.footer2 .fsection1 .fno,.fcon{
    font-size: 20px;
    color: white;
    align-items: center;
}

.footer2 .fsection1 img{
margin-left: 50px;
margin-right: 0px;
height: 100px;
width: 250px;
}

.footer2 .fsection1 .fblock1
{
    display: flex;
    flex-direction: row;
    align-items: center;

}




.footer2 .fsection1 .fblock1 .fsocialbtn a i{
    font-size: 30px;
    color:white;
    height: 40px;
    width: 40px;
    text-align: center;
    margin-right: 20px;
    
    border: 0px solid steelblue;
}

.footer2 .fsection1 .fblock1 .fsocialbtn a i:hover{
   color: grey;
}

.fsection2{
    background: #2e2e2e;
    width: 100%;
    height: 330px;

}

.fsection2 .fquicklinks h2{
    font-size: 25px;
    margin-top: 50px;
    font-weight: 300;
    color: steelblue;
    margin-left: 50px;

}

.fsection2 .fquicklinks ul{
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    text-align: left;
}

.fsection2 .fquicklinks ul li{
display: inline-block;
}

.fsection2 .fquicklinks ul li a{

    font-size: 14px;
    display: block;
    color:white;
    margin:0 10px;
   font-weight: 200;
   border-bottom: .5px solid black;
   margin-left: 50px;
   

}

.fsection2 .fcontactus{
     display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
     margin-left: 450px;
    

}
.fsection2 .fcontactus h2{
    font-size: 25px;
    font-weight: 400;
    color: steelblue;
    margin-right: 50px;

}

.fsection2 .fcontactus h3{
    color: white;
    font-size: 14px;
    font-weight: 200;
}

.fsection2 .fcontactus .fcon{
    margin-right: 20px;
    font-size: 14px;
}

.rights{
    
    width: 100%;
    height: 50px;
    text-align: center;
    background: #2e2e2e;;

}

.rights h3{
    font-size: 12px;
    color: white;
     
}
}



@media (max-width:768px)
{
 html{
    font-size: 55%;
  
      }   

      /*cform*/

      .dcabout{
     display: flex;
    justify-content: center;
    border: 0px solid;
    padding-top: 17rem;
    padding-bottom: 17rem;
    width: 100%;
    height: 90rem;
    box-shadow: var(--box-shadow);
    color: var(--red);
    background: var(--white);
    margin: 2em 0;


}


.cform a{
    font-size: 30px;
    padding: 1rem 2 rem;
    color: #128C7E;
    border-radius: 2rem;
    border: none;
    height: 50px;
    width: 90px;
    margin-top: 0px;
    margin-left: 250px;
    text-align: center;
    
}

.cabout{
    color: black;
    text-align: left;
    margin-left: 20px;

    font-size: 1.5rem;

line-height: 23px;

}
 
 .dcabout .heading{
    font-size: 30px;
 }

.dcabout button{
    background: var(--red);
    height: 50px;
    width: 100px;
    margin-left: 200px;
    border-radius: 4px;
    font-size: 20px;


}
    

.contact{
    height: 75vh;
    width: 82vw;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .2rem .5rem #0006;
    background-image: linear-gradient(145deg,var(--red),var(--black)) ;
    border-radius: 1rem;
    margin-top: 2rem;
    margin-left: 60px;

}

.contact .form button{
    margin-left: 100px;
}
.contact .form a{
    margin-left: 130px;
}
.contact .form h1{
    font-size: 2.5rem;
    font-weight: 800;
}

.cform button{

    background-color: var(--red);
    padding: 1rem 2 rem;
    color: #fff;
    border-radius: 2rem;
    border: none;
    height: 50px;
    width: 200px;
    margin-top: 20px;
    margin-left: 200px;
}




/*cform*/
/*footer*/
.footer2 .fsection1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #2e2e2e;
    border-bottom: .5px solid black;
    width: 100%;
    margin-bottom: 0px;
}
.footer2 .fsection1 .fno,.fcon{
    font-size: 20px;
    color: white;
    align-items: center;
}

.footer2 .fsection1 img{
margin-left: 50px;
margin-right: 0px;
height: 100px;
width: 250px;
}

.footer2 .fsection1 .fblock1
{
    display: flex;
    flex-direction: row;
    align-items: center;

}




.footer2 .fsection1 .fblock1 .fsocialbtn a i{
    font-size: 30px;
    color:white;
    height: 40px;
    width: 40px;
    text-align: center;
    margin-right: 20px;
    
    border: 0px solid steelblue;
}

.footer2 .fsection1 .fblock1 .fsocialbtn a i:hover{
   color: grey;
}

.fsection2{
    background: #2e2e2e;
    width: 100%;
    height: 330px;

}

.fsection2 .fquicklinks h2{
    font-size: 25px;
    margin-top: 50px;
    font-weight: 300;
    color: steelblue;
    margin-left: 50px;

}

.fsection2 .fquicklinks ul{
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    text-align: left;
}

.fsection2 .fquicklinks ul li{
display: inline-block;
}

.fsection2 .fquicklinks ul li a{

    font-size: 14px;
    display: block;
    color:white;
    margin:0 10px;
   font-weight: 200;
   border-bottom: .5px solid black;
   margin-left: 50px;
   

}

.fsection2 .fcontactus{
     display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
     margin-left: 450px;
    

}
.fsection2 .fcontactus h2{
    font-size: 25px;
    font-weight: 400;
    color: steelblue;
    margin-right: 50px;

}

.fsection2 .fcontactus h3{
    color: white;
    font-size: 14px;
    font-weight: 200;
}

.fsection2 .fcontactus .fcon{
    margin-right: 20px;
    font-size: 14px;
}

.rights{
    
    width: 100%;
    height: 50px;
    text-align: center;
    background: #2e2e2e;;

}

.rights h3{
    font-size: 12px;
    color: white;
     
}
/*footer*/

       .whatsapp-float .whatsapp-float-btn{
    position: fixed;
    top: 100px;
    left: 20px;
    height: 50px;
    width: 50px;



}

  
       
    .header2 .section1 .no,.con{
    font-size: 20px;
    color: steelblue;
    align-items: center;
    margin-top: 25px;
}

.header2 .section1 .block1 .socialbtn a i{
    font-size: 20px;
    color:var(--red);
    height: 20px;
    width: 20px;
    text-align: center;
    
    
    border: 0px solid steelblue;
  }

  .nav2 ul li a{

    font-size: 18px;
    display: block;
    color: white;
    padding: 26px 26px 26px 26px;
    margin:0px 5px; 
    font-weight: 500;
    height: 80px;
    width: 200px;


}

  .skewed .Aboutus{
    height: 550px;
    width: 500px;
  }
  .skewed .image{
    height: 550px;
    width: 500px;
  }

  .skewed .image img{
    display: -webkit-box;
    margin-left: auto;
    display: block;
    margin-top: 80px;
    height: 400px;
    width: 270px;
    clip-path: polygon(30% 0%, 100% 0, 100% 30%, 100% 70%, 100% 100%, 8% 100%, 0 41%, 10% 0);

}


  .header .navbar a
  {
     font-size: 2rem;
     margin: 2rem 2.5rem;
     display: block;
  }

.header .navbar.active
{
    right: 2rem;
    transition: .4s linear;
}
  #menu-btn
  {
    display: inline-block;
  }
}




@media (max-width:450px)
{
 html{
    font-size: 30%
  
      } 

        
  .header .logo{
    
    height: 30px;

    
  }


      .dcabout{
     display: flex;
    justify-content: center;
    border: 0px solid;
    padding-top: 17rem;
    padding-bottom: 17rem;
    width: 100%;
    height: 90rem;
    box-shadow: var(--box-shadow);
    color: var(--red);
    background: var(--white);
    margin: 2em 0;


}
.cabout{
    color: black;
    text-align: left;
    margin-left: 20px;

    font-size: 1.5rem;

line-height: 12px;

}
 
 .dcabout .heading{
    font-size: 15px;
 }

.dcabout button{
    background: var(--red);
    height: 30px;
    width: 100px;
    margin-left: 10px;
    border-radius: 4px;
    font-size: 20px;


}

  .skewed .Aboutus p
{
    color: black;
    text-align: left;
    margin-left: 20px;
    font-size: 1.5rem;
    padding: 1rem;
    line-height: 23px;

}



.imgcontainer{
    height: 120vh;
    width: 100vw;
    position: relative;
}

  /*form*/
  .contact{
    height: 75vh;
    width: 95vw;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .2rem .5rem #0006;
    background-image: linear-gradient(145deg,var(--red),var(--black)) ;
    border-radius: 1rem;
    margin-top: 2rem;
    margin-left: 0px;

}




.form .contact a{
    margin-left: 50px;
    font-size: 35px;
}
.form,.map{
    width: 50%;
    height: 100%;

}

.form{
    background:var(--white);
    display: flex;
    flex-direction:column ;
    justify-content: space-evenly;
    position: relative;
}

.form::before{
    position: absolute;
    width: 0;
    height: 0;
    border: 1.4rem solid transparent;
    border-right: 1.4rem solid transparent var(--black);
    top: 10%;
    left: -2.8rem;
    content: "";

}

.form h1{
    color: var(--red);
    font:500 1.8rem sans-serif ;
    padding: 0.2rem;
    font-size: 30px;
    margin-left: 20px;
}

.form form{
padding: 0.2rem;
}

.form input , .form textarea{
    width: 70%;
    padding: 1rem;
    border: .08rem solid var(--red);
    border-radius: 2rem;
    background-color: unset;
    color: #a6a9d4;
    font-size: 2rem;

    margin-left: 4rem;

}
.form input:not(first-child) , .form textarea {
    margin-top: 0.8rem;

}

.cform button{

    background-color: var(--red);
    padding: 1rem 2 rem;
    color: #fff;
    border-radius: 1rem;
    border: none;
    height: 50px;
    width: 60px;
    margin-top: 20px;
    margin-left: 260px;
}


.form button{

    background-color: var(--red);
    padding: 1rem 2 rem;
    color: #fff;
    border-radius: 1rem;
    border: none;
    height: 50px;
    width: 60px;
    margin-top: 20px;
    margin-left: 110px;
}

.form textarea{
    height: 6rem;
    resize: none;
}

.map iframe{
    width: 100%;
    height: 100%;
}
/*form*/

  /*footer*/
.footer2 .fsection1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #2e2e2e;
    border-bottom: .5px solid black;
    width: 100%;
    margin-bottom: 0px;
}
.footer2 .fsection1 .fno,.fcon{
    font-size: 20px;
    color: white;
    align-items: center;
}

.footer2 .fsection1 img{
margin-left: 0px;
margin-right: 0px;
height: 70px;
width: 150px;
}

.footer2 .fsection1 .fblock1
{
    display: flex;
    flex-direction: row;
    align-items: center;

}




.footer2 .fsection1 .fblock1 .fsocialbtn a i{
    font-size: 20px;
    color:white;
    height: 20px;
    width: 20px;
    text-align: center;
    margin-right: 20px;
    
    border: 0px solid steelblue;
}

.footer2 .fsection1 .fblock1 .fsocialbtn a i:hover{
   color: grey;
}

.fsection2{
    background: #2e2e2e;
    width: 100%;

}

.fsection2 .fquicklinks h2{
    font-size: 25px;
    margin-top: 50px;
    font-weight: 300;
    color: steelblue;
    margin-left: 50px;

}

.fsection2 .fquicklinks ul{
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    text-align: left;
}

.fsection2 .fquicklinks ul li{
display: inline-block;
}

.fsection2 .fquicklinks ul li a{

    font-size: 12px;
    display: block;
    color:white;
    margin:0 10px;
   font-weight: 200;
   border-bottom: .5px solid black;
   margin-left: 50px;
   

}

.fsection2 .fcontactus{
     display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
     margin-left: 80px;
    

}
.fsection2 .fcontactus h2{
    font-size: 25px;
    font-weight: 400;
    color: steelblue;
    margin-right: 50px;

}

.fsection2 .fcontactus h3{
    color: white;
    font-size: 12px;
    font-weight: 200;
}

.fsection2 .fcontactus .fcon{
    margin-right: 20px;
    font-size: 12px;
}

.rights{
    
    width: 100%;
    height: 100px;
    text-align: center;
    background: #2e2e2e;

}

.rights h3{
    font-size: 14px;
    color: white;
    margin-top:0px ;
}
/*footer*/





   .skewed .Aboutus{
    height: 350px;
    width: 400px;
  }
  .skewed .image{
    height: 350px;
    width: 400px;
  }

  .skewed .image img{
    display: -webkit-box;
    margin-left: auto;
    display: block;
    margin-top: 80px;
    height: 250px;
    width: 150px;
    clip-path: polygon(30% 0%, 100% 0, 100% 30%, 100% 70%, 100% 100%, 8% 100%, 0 41%, 10% 0);

}

.header2 .section1{
    flex-direction: column;
}
      
    .header2 .section1 .no,.con{
    font-size: 16px;
    color: steelblue;
    align-items: center;
    margin-top: 25px;
}


  

.header2 .section1 .block1
{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header2 .section1 img{
 margin-left: 0px;
 height: 70px;
 width: 200px;
}

.header2 .section1 .block1 .socialbtn a i{
    font-size: 20px;
    color:var(--red);
    height: 40px;
    width: 40px;
    text-align: center;
    
    margin-top: 25px;
    border: 0px solid steelblue;
  }
}







/*responsive code*/