@charset "utf-8";
*::after{box-sizing: border-box;
        font-family: 'Poppins', sans-serif;}

html {scroll-behavior: smooth;}

h1  {font-size:;
     font-weight:600;
     color:white}

h2  {font-size:;
     font-weight:600;}

h3  {font-size:;
     font-weight:400;}

h4  {font-size:;
     font-weight:500;}

h5  {font-size:;
     font-weight:600;}

h6  {font-size:;
     font-weight:500;}


p  {font-size:;
     font-weight:400;}



header      {width:100%;
            background-image:url(images/about_head.png);
            padding-bottom:40vh;
            background-size:100% 120%;}

#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	text-align: center;
}

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color:white;
     opacity:0.5;}

#logo {
	display: block;
	padding: 0 30px;
	float: left;
	font-size:20px;
	line-height: 60px;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color:white;
	}

/* Styling the links */
nav a {
	display:block;
	padding:22px 20px;	
	color:black;
	font-size:17px;
     font-weight:600;
	text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 
	background-color:#2f7aeb; 
}
 
nav ul ul {
	display: none;
	position: absolute; 
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:block;
}
	

nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}


nav ul ul ul li {
	position: relative;
	top:-60px;
	left:170px; 
}
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: black;
		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {color:#FFF;
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display:block;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}

#head_text      {width:50%;
                 margin-left:25%;
                 color:white;
                 margin-top:25vh;
                 text-align: center;}

.buttons        {margin-top:8vh;}

button          {width:20%;
                 color:black;
                 background:white;
                 font-weight:500;
                 border:2px solid #2f7aeb;
                 padding:1vh 2vw 1vh 2vw ;
                 margin-top:25vh;
                }

button:hover   {background:#2f7aeb;
    }


    /* header css end */

#about    {width:100%;
           padding:10vh 5% 5vh 5% ;}
#about p  {padding:1vh 2% 1vh 2%;}
#about p:hover  {box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}

#about h1    {text-align:center;}

#ab_img   {width:60%;
           margin-top:10vh ;
          float: left;
          position:absolute;
          z-index:1;}

#ab_text  {width:40%;
           background:#C9CFFF;
           float:left;
           padding:5vh 5% 5vh 5%;
           margin-top:50vh ;
           margin-left:40%;
           position:absolute;
          z-index:2;}

#ab_text li   {font-size:1.4vw;
                list-style-image: url('images/list_icon2.png');}

#ab_text li:hover {background:#6f7ce2;
                   color:white;}

#ab_img img {width:100%;}

     /* about css end */

#keypoint      {width:100%;
                background-image:url(images/industry.png);
                padding:15vh 5% 20vh 5%;
                background-size:100% 100%;
                margin-top:100vh;}

#keypoint h1   {color:#121e7c;
                text-align:center;
                font-weight:600;
                font-size:3.5vw;}

#keypoint h5   {margin-top:4vh;}

#keypoint h5:hover   {background:#6f7ce2;
                      color:white;
                    padding-top:1vh;
                    padding-bottom:1vh;}


#parallex         {background: url('images/parallex2.png') no-repeat fixed;
     background-position: center center;
     -webkit-background-size:cover;
     -moz-background-size:cover;
     -o-background-size:cover;
     background-size:cover;
     padding-top:20vh;
     padding-bottom:20vh;
     margin-top:5vh;}

#parallex h1 {color:white;
              text-align:center;
              font-size:3.5vw;
              }

/* parallex css end  */

#contact        {width:100%;
                 padding:10vh 20% 5vh 20%;
                 display:flex;
                 }
        
.con_text       {width:80%;}
    
.con_text table {width:100%;}

.con_text input    {width:90%;}

.con_text button {padding:1.5vh 2vw 1.5vh 2vw;
                  background:#c9cfff;
                  border:none;
                  border-radius:30px;
                  margin-top:5vh;
                  font-size:1.5vw;}

.con_img        {width:30%;
                 padding-top:15vh;}

.con_img img    {width:100%;
}

/* contact part end */

footer           {width:100%;
                  background-image:url(images/footer.png);
                  padding:10vh 30% 5vh 20%;
                  color:white;
                  background-size:100% 100%;}

footer td       {width:40%;
                 padding-left:5%;}

footer th       {width:40%;
                 padding-left:5%;}

table img      {margin-left:8%;}

footer hr       {width:100%;}

















/* Extar large screen ke liye */

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


header      {padding-bottom:15vh;}

#head_text      {width:60%;
                 margin-left:20%;}


button          {width:50%;
                 margin-top:2vh;}

button:hover   {background:#2f7aeb;
    }


    /* header css end */


    #about    {width:100%;
     padding:10vh 5% 5vh 5% ;}

#about h1    {text-align:center;}

#ab_img   {width:80%;
     margin-top:10vh ;
    float: left;
    position:absolute;
    z-index:1;}

#ab_text  {width:60%;
     background:#C9CFFF;
     float:left;
     padding:5vh 5% 5vh 5%;
     margin-top:30vh ;
     margin-left:30%;
     position:absolute;
    z-index:2;}
#ab_img img {width:100%;}

#ab_text li   {font-size:2.5vw;}

/* about css end */


#keypoint      {width:100%;
     background-image:url(images/industry.png);
     padding:15vh 5% 20vh 5%;
     background-size:100% 100%;
     margin-top:80vh;}

#keypoint h1   {color:#121e7c;
     text-align:center;
     font-weight:600;
     font-size:3.5vw;}

#keypoint h5   {margin-top:4vh;}

#keypoint h5:hover   {background:#6f7ce2;
           color:white;
         padding-top:1vh;
         padding-bottom:1vh;}


#parallex         {padding-top:20vh;
                    padding-bottom:20vh;
                    margin-top:5vh;}

#parallex h1 {font-size:6vw;}

/* parallex css end  */



#contact        {padding:10vh 20% 5vh 10%;
                 display:grid;
                 }
        
.con_text       {width:100%;}

.con_text input    {width:95%;}

.con_text button {padding:1.5vh 2vw 1.5vh 2vw;
                  background:#c9cfff;
                  border:none;
                  border-radius:30px;
                  margin-top:5vh;
                  font-size:3vw;}

.con_img        {width:100%;
                 padding-top:15vh;
                 padding-left:10%;}

.con_img img    {width:100%;
}

/* contact part end */

footer           {width:100%;
                  background:#c9cfff;
                  padding:2vh 30% 5vh 20%;
                  color:white;
                  background-size:100% 100%;}

footer td       {width:40%;
                 padding-left:5%;}

footer th       {width:40%;
                 padding-left:5%;}

table img      {margin-left:8%;}

footer .col     {margin-top:5vh;}


}



/* monile screen ke liye */

@media only screen and (max-width:600px) {
     #keypoint      {width:100%;
          background-image:url(images/industry.png);
          padding:15vh 5% 20vh 5%;
          background-size:100% 100%;
          margin-top:65vh;}
}