@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/header.png);
            padding-bottom:25vh;
            background-size:cover;}



#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%;
                 background:#c9cfff;
                 padding:5vh 10% 5vh 10%;
                 display:flex;}

.about_img       {width:40%;
                  padding-top:5vh;
                  }

.about_text     {width:60%;
                 display:grid;
                 }

.about_text h1  {text-align:center;
                 color: #121e7c;
                 font-weight:700;}

    /* about css end  */


#service        {width:100;
                 padding-top:7vh;
                 padding-left:5%;
                 padding-right:5%;}

#service h1  {text-align:center;
                 color: #121e7c;
                 font-weight:700;}

.service_box     {width:30%;
                  padding:4vh 5% 4vh 5%;
                  margin-left:2%;
                  margin-top:10vh;
                  transition-duration:0.s;
                  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                  transition-timing-function:ease-in-out;}

.service_box:hover  {transform: translate3d(0, -0.8em, 0);
                    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
                    transition: transform 1s ease;}

.offered            {width:100%;
                     display:flex;
                     }

#key       {width:100;
            padding:7vh 5% 15vh 5%;}

.key        {text-align:center;}

#key h1  {text-align:center;
                 color: #121e7c;
                 font-weight:700;}

    /* service css end */

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

#industry  h1  {text-align:center;
                 color: #121e7c;
                 font-weight:700;}

.container      {padding-top:5vh;}

.container h5   {color:#121e7c;
                 font-weight:700;}

#industry .col            {border:3px solid white;
                 max-width:20%;
                 padding:4vw 2% 4vw 2%;
                 margin-left:5%;
                 border-radius:150px;
                 transition: 0.5s ease-in-out;
                 }

#industry .col:hover{border:3px solid #c9cfff;
  animation: gradient 5s ease infinite;
}
 
@keyframes gradient {
  0% {
    background-position: 0% 50%;
    box-shadow: 0px 0px 15px white;
  }

  50% {
    background-position: 100% 50%;
    box-shadow: 0 0px 10px #1B1B1E;
  }

  100% {
    background-position: 0% 50%;
    box-shadow: 0px 0px 20px pink;
  }
}



#industry .col2            {margin-left:14%;}

#industry .col3            { margin-left:9%;}


#industry .col4           {margin-right:12%;}

    /* this css is end */

#parallex        {background: url('images/parallex.png') no-repeat fixed;
                background-position: center center;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                min-height:250px;
                margin-top:10vh;
                text-align: center;
                color:white;
                padding: 5vh 5% 5vh 5%;
                display:flex;}

.para_text      {width:16.6vw;
                 padding-top:5vh;}

     /* parallex css end */


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

.con_text input    {width:50%;}

.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:30%;}

button:hover   {background:#2f7aeb;
    }


    /* header css end */

#about          {display:grid;}

.about_img       {width:100%;
                  padding-top:5vh;
                  padding-left:0%;}

.about_text     {width:100%;
                 display:grid;
                 }

    /* about css end  */


.service_box     {width:50%;
                
                  margin-left:25%;
                  }

.offered            {display:grid;}

    /* service css end */

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

.container      {padding-top:5vh;}


#industry .col            {border:3px solid white;
                 max-width:20%;
                 padding:4vw 2% 4vw 2%;
                 margin-left:5%;
                 border-radius:150px;
                 transition: 0.5s ease-in-out;
                 }

#industry .col img        {width:50%;}

#industry .col2            {margin-left:14%;}

#industry .col3            { margin-left:9%;}


#industry .col4           {margin-right:12%;}

    /* this css is end */

#parallex        {min-height:500px;
                margin-top:10vh;
                padding: 5vh 5% 5vh 5%;
                display:inline-block;}

.para_text      {width:35vw;
                 float:left;
                 padding-top:0vh;}

     /* parallex css end */


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

.con_text input    {width:50%;}

.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:100%;
                 padding-top:15vh;
                 padding-left:20%;}

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


}







/*========================================================================= Extar large screen ke liye ===========================================================*/

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

     header      {padding-bottom:15vh;}

     #head_text      {width:60%;
                      margin-left:20%;}
     
     
     button          {width:65%;
                      }
     
     button:hover   {background:#2f7aeb;
         }
     
     
         /* header css end */
     
     #about          {display:grid;}
     
     .about_img       {width:80%;
                       padding-top:5vh;
                       padding-left:0%;}

     .about_img img     {width:90%;}
     
     
     .about_text     {width:100%;
                      display:grid;
                      }
     
         /* about css end  */
     
     
     .service_box     {width:70%;
                     
                       margin-left:15%;
                       }
     
     .offered            {display:grid;}
     
         /* service css end */
     
     #industry       {width:100%;
                      background-image:url(images/industry.png);
                      padding:15vh 5% 15vh 0%;
                      background-size:100% 100%;}
     
     .container      {padding-top:5vh;}
     
     
     #industry .col            {border:3px solid white;
                      max-width:50%;
                      padding:4vw 2% 4vw 2%;
                      margin-left:5%;
                      border-radius:200px;
                      transition: 0.5s ease-in-out;
                      }
     
     #industry .col img        {width:50%;}
     
     #industry .col2            {margin-left:0%;}
     
     #industry .col3            { margin-left:0%;}
     
     
     #industry .col4           {margin-right:0%;}
     
         /* this css is end */
     
     #parallex        {min-height:500px;
                     margin-top:10vh;
                     padding: 5vh 5% 5vh 5%;
                     display:inline-block;}
     
     .para_text      {width:35vw;
                      float:left;
                      padding-top:0vh;}
     
          /* parallex css end */
     
     
     #contact        {padding:10vh 5% 5vh 5%;
                      display:grid;
                      }
             
     .con_text       {width:100%;
                      overflow: hidden;}
     
     .con_text input    {width:70%;}
     
     .con_text button {padding:1.5vh 2vw 1.5vh 2vw;
                       background:#c9cfff;
                       border:none;
                       border-radius:30px;
                       margin-top:5vh;
                       font-size:4.2vw;}
     
     .con_img        {width:80%;
                      padding-top:15vh;
                      padding-left:0%;}
     
     .con_img img    {width:50%;
                       }
     
     /* 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;}
     
     
     }