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

		/* .........................Important & Mandatory Properties........... */
				*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Universal Selector (All Elements Selected) */
				html { font-size: 62.5%;  font-family: "Montserrat", sans-serif;} /*  62.5% = 10px = 1rem But By Default 100% = 16px = 1rem */
				/* body { font-family: sans-serif;} */
				/* Selection Used By User To Select Content */
				::selection {
				background: yellow;
				color: black;
				outline: white;
				cursor: pointer;
			}

			/* .........................Variable Creation Start.................... */
				:root {
					--width: 100vw;  	/* width: var(--width); | width: calc(var(--width) - 80vw); */
					--height: 100vh;	/* height: var(--height); | height: calc(var(--height) - 80vh); */
					--primary-color: #003CFF;	/* var(--primary-color); */
					--secondary-color: #04A200;
				}
			/* .........................Variable Creation End...................... */






		/* ..........................Media Query Start......................... */
				
				/* 4K - 2560px */
				@media (max-width: 2560px) {
					html {
						font-size: 62.5%;
					}
				}

				/* Laptop L - 1440px */
				@media (max-width: 1440px) {
					html {
						font-size: 62.5%;
					}
				}

				/* Laptop 1024px */
				@media (max-width: 1024px) {
					html {
						font-size: 62.5%;
					}	
				}

				/* Mini Laptop | Tablet 998px */
				@media (max-width: 998px) {
					html {
						font-size: 55%;  /* 55% = 8.8px */
					}	
				}

				/* Tablet - 768px */
				@media (max-width: 768px) {
					html {
						font-size: 45%;  /* 45% = 7.2px */
					}	
				}

				/* Mobile L - 425px */
				@media (max-width: 425px) {
					html {
						font-size: 31.25%;
					}	
				}

				/* Mobile M - 375px */
				@media (max-width: 375px) {
					html {
						font-size: 31.25%;
					}
				}

				/* Mobile S - 320px */
				@media (max-width: 320px) {
					html {
						font-size: 31.25%;
					}
				}

		/* ..........................Media Query End........................... */






		/* ------------------------------------------------------- Header Style Start ------------------------------------------------------------- */

			html {
			  font-family: "Montserrat", sans-serif;
			  font-size: 16px;
			  overflow-x: hidden;
			}

			.buttons a, ul li a {
			  display: inline-block;
			  text-decoration: none;
			  color: #fff !important;
			}

			a{text-decoration: none !important;}

			a.button {
			  padding: 0.5rem 1rem;
			  background: #00970E;
			  color: #fff;
			  text-align: center;
			}

			a.button.primary {
			  background: #00B3EF;
			  color: #fff;
			}

			/* Header */
			header {
			  position: -webkit-sticky;
			  position: sticky;
			  top: 0;
			  height: 3.5rem;
			  width: 100%;
			  /* background: #FAFAFA; */
			  background: #242424;
			  box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .6);
			  z-index: 100000;
			  /* border: 1px solid yellow; */
			}

			header .container {
			  position: absolute;
			  -webkit-box-sizing: border-box;
			          box-sizing: border-box;
			  top: 0;
			  left: 0;
			  display: -webkit-box;
			  display: -ms-flexbox;
			  display: flex;
			  -webkit-box-orient: horizontal;
			  -webkit-box-direction: normal;
			      -ms-flex-direction: row;
			          flex-direction: row;
			  -webkit-box-align: center;
			      -ms-flex-align: center;
			          align-items: center;
			  -webkit-box-pack: justify;
			      -ms-flex-pack: justify;
			          justify-content: space-between;
			  width: 100%;
			  max-width: 1200px;
			  padding: 0 1.5rem;
			  margin: 0 auto;
			  /* border-bottom: 1px solid #e0e5eb; */
			  /* background: #FAFAFA; */	  
			}

			header .container > .logo {
			  height: 3.5rem;
			  padding: 1rem 0;
			  /* border: 1px solid blue; */
			  
			}
			.logo a{
				text-decoration: none;
				color: #fff;
				cursor: pointer;
				line-height: 1.5rem;
				/* border: 1px solid blue; */
				font-size: 1.5rem;
			}

			input.hamburger-button {
			  display: none;
			}

			input.hamburger-button ~ label {
			  position: relative;
			  padding: 0.25rem;
			  width: 1.5rem;
			  height: 1.25rem;
			}

			input.hamburger-button ~ label > div,
			input.hamburger-button ~ label > div::before,
			input.hamburger-button ~ label > div::after {
			  content: "";
			  position: absolute;
			  top: 0.825rem;
			  height: 0.125rem;
			  width: 1.5rem;
			  opacity: 1;
			  /* background: #121212; */
			  background: #fff;

			  -webkit-transition: 0.14s ease-in-out;
			  transition: 0.14s ease-in-out;
			}

			input.hamburger-button ~ label > div::before {
			  top: -0.5rem;
			}

			input.hamburger-button ~ label > div::after {
			  top: 0.5rem;
			}

			header .container .hamburger-button:checked ~ label > div {
			  width: 0;
			  /* background: rgba(18, 18, 18, 0); */
			}

			header .container .hamburger-button:checked ~ label > div::before {
			  -webkit-transform: rotateZ(45deg);
			          transform: rotateZ(45deg);
			  top: -0rem;
			}

			header .container .hamburger-button:checked ~ label > div::after {
			  -webkit-transform: rotateZ(-45deg);
			          transform: rotateZ(-45deg);
			  top: -0rem;
			}

			header .container .hamburger-button:checked ~ .menu {
			  left: 0;
			}

			header .container .menu {
			  position: absolute;
			  z-index: -1;
			  top: 3.5rem;
			  left: calc(-100vw - 3rem);
			  display: -ms-grid;
			  display: grid;
			  -ms-grid-columns: 1fr;
			      grid-template-columns: 1fr;
			  -ms-grid-rows: (max-content)[2];
			      grid-template-rows: repeat(2, -webkit-max-content);
			      grid-template-rows: repeat(2, max-content);
			  width: 100%;
			  /* background: #FAFAFA; */
			  -webkit-transition: 0.22s ease-in-out;
			  transition: 0.22s ease-in-out;
			  /* border: 1px solid green; */
			}

			header .container .menu::after {
			  content: "";
			  position: absolute;
			  z-index: -1;
			  height: 100vh;
			  width: 100vw;
			  /* background: #FAFAFA; */
			  background: #1A1A1A;
			}

			header .container .menu nav {
			  grid-area: auto;
			}

			header .container .menu nav ul {
			  display: -webkit-box;
			  display: -ms-flexbox;
			  display: flex;
			  -webkit-box-orient: vertical;
			  -webkit-box-direction: normal;
			      -ms-flex-direction: column;
			          flex-direction: column;
			          list-style: none;
			}

			header .container .menu nav ul > li > a {
			  -webkit-box-sizing: border-box;
			          box-sizing: border-box;
			  width: 100%;
			  padding: 1rem 1.5rem;
			  text-align: left;
			  color: #121212;
			  -webkit-transition: 0.14s ease-in-out;
			  transition: 0.14s ease-in-out;
			}

			header .container .menu nav ul > li > a:hover {
			  color: #36bae6;
			  /* background: #e0e5eb; */
			  background: #f00;
			}

			header .container .menu div.buttons {
			  grid-area: auto;
			  display: -webkit-box;
			  display: -ms-flexbox;
			  display: flex;
			  -webkit-box-align: center;
			      -ms-flex-align: center;
			          align-items: center;
			  -webkit-box-pack: center;
			      -ms-flex-pack: center;
			          justify-content: center;
			  -ms-flex-wrap: wrap;
			      flex-wrap: wrap;
			  padding: 0.5rem 1rem;
			  border-top: 1px solid rgba(255, 255, 255, 0.1);
			  /* background: #FAFAFA; */
			}

			header .container .menu div.buttons > * {
			  -webkit-box-flex: 1;
			      -ms-flex: 1;
			          flex: 1;
			  min-width: -webkit-min-content;
			  min-width: -moz-min-content;
			  min-width: min-content;
			  margin: 0.5rem;
			}

			/* Media queries */
			@media only screen and (min-width: 680px) {
				  header {
				    height: 6.5rem;
				    /* border-bottom: 1px solid #e0e5eb; */
				    border-bottom: 2px solid #f00;
				  }
				  header .container {
				    left: 50%;
				    -webkit-transform: translate(-50%, 0);
				            transform: translate(-50%, 0);
				    -webkit-box-pack: start;
				        -ms-flex-pack: start;
				            justify-content: flex-start;
				    border: none;
				  }
				  input.hamburger-button ~ label {
				    display: none;
				  }
				  header .container .menu {
				    z-index: unset;
				    top: 0;
				    left: 0;
				    display: -ms-grid;
				    display: grid;
				    -ms-grid-columns: auto max-content;
				        grid-template-columns: auto -webkit-max-content;
				        grid-template-columns: auto max-content;
				    -ms-grid-rows: 3.5rem 3rem;
				        grid-template-rows: 3.5rem 3rem;
				    background: none;
				    -webkit-transition: none;
				    transition: none;
				  }
				  header .container .menu::after {
				    display: none;
				  }
				  header .container .menu div.buttons {
				    -ms-grid-row: 1;
				    -ms-grid-row-span: 1;
				    -ms-grid-column: 2;
				    -ms-grid-column-span: 1;
				    grid-area: 1/2/2/3;
				    -webkit-box-sizing: border-box;
				            box-sizing: border-box;
				    -webkit-box-orient: horizontal;
				    -webkit-box-direction: normal;
				        -ms-flex-direction: row;
				            flex-direction: row;
				    -webkit-box-align: center;
				        -ms-flex-align: center;
				            align-items: center;
				    -webkit-box-pack: center;
				        -ms-flex-pack: center;
				            justify-content: center;
				    padding: 0;
				    margin: 0 1rem 0 0;
				    border: none;
				    width: 20rem;
				  }
				  header .container .menu nav {
				    -ms-grid-row: 2;
				    -ms-grid-row-span: 1;
				    -ms-grid-column: 1;
				    -ms-grid-column-span: 2;
				    grid-area: 2/1/3/3;
				    border-top: 1px solid rgba(255, 255, 255, 0.2);
				  }
				  header .container .menu nav ul {
				    -webkit-box-orient: horizontal;
				    -webkit-box-direction: normal;
				        -ms-flex-direction: row;
				            flex-direction: row;
				    -webkit-box-pack: center;
				        -ms-flex-pack: center;
				            justify-content: center;
				  }
				  header .container .menu nav ul > li {
				    -webkit-box-flex: 1;
				        -ms-flex: 1;
				            flex: 1;
				  }
				  header .container .menu nav ul > li > a {
				    display: inline-block;
				    width: 100%;
				    text-align: center;
				    height: 3rem;
				    line-height: 1rem;
				  }
			}

			@media only screen and (min-width: 1040px) {
				  header {
				    height: 3.5rem;
				    border-bottom: 2px solid #f00;
				  }

				  header .container .menu {
				    -webkit-box-sizing: border-box;
				            box-sizing: border-box;
				    -ms-grid-columns: 4rem auto max-content;
				        grid-template-columns: 4rem auto -webkit-max-content;
				        grid-template-columns: 4rem auto max-content;
				    -ms-grid-rows: 1fr;
				        grid-template-rows: 1fr;
				    height: 3.5rem;
				    padding: 0 1.5rem;
				    -webkit-transition: none;
				    transition: none;
				     /* border: 1px solid yellow; */
				  }
				  header .container .menu nav {
				    -ms-grid-row: 1;
				    -ms-grid-row-span: 1;
				    -ms-grid-column: 2;
				    -ms-grid-column-span: 1;
				    grid-area: 1/2/2/3;
				    border-top: none;
				    height: 3.5rem;
				    /* border: 1px solid blue; */
				  }
				  header .container .menu div.buttons {
				    -ms-grid-row: 1;
				    -ms-grid-row-span: 1;
				    -ms-grid-column: 3;
				    -ms-grid-column-span: 1;
				    grid-area: 1/3/2/4;
				  }
				  header .container .menu div.buttons > * {
				    min-width: -webkit-max-content;
				    min-width: -moz-max-content;
				    min-width: max-content;
				  }
				  header .container .menu nav ul {
				    -webkit-box-align: start;
				        -ms-flex-align: start;
				            align-items: flex-start;
				    -webkit-box-pack: end;
				        -ms-flex-pack: end;
				            justify-content: flex-end;
				    height: 100%;
				    width: 100%;
				  }
				  header .container .menu nav ul > li {
				    -webkit-box-flex: 0;
				        -ms-flex: 0;
				            flex: 0;
				  }
				  header .container .menu nav ul > li > a {
				    width: -webkit-max-content;
				    width: -moz-max-content;
				    width: max-content;
				  	height: 3.5rem;
				  	line-height: 1.2rem;
				  	/* border: 1px solid red; */
				  }
			}

			.active{
			 	background: red;
			}

		/* ------------------------------------------------------- Header Style End --------------------------------------------------------------- */
		
		



		/* ------------------------------------------------------- Image Slider Style Start ------------------------------------------------------- */
			.banner-container img {
				height: 25vh;
			}
			
		/* ------------------------------------------------------- Image Slider Style End --------------------------------------------------------- */
		





		/* ------------------------------------------------------- Contact Style Start ------------------------------------------------------------ */
		
			/*/////////////////////////////////////////////////- Contact - Start -/////////////////////////////////////////////////////*/

			  .Contact_Section
			      {
			        width: 100%;
			        /*border: 1px solid black;*/
			        padding: 20px;
			        /* background: url("../images/internet_world-wide.jpg"), rgba(0,0,0,.6); */
			       /*  background-image: cover;
			        background-position: center;
			        background-attachment: fixed; */
			        /* background: lightblue; */

			        /*background: #2C2C2C;
			        /*background: linear-gradient(165deg, rgba(252,252,252,1) 0%, rgba(232,232,232,1) 100%);*/
			      }
			      .Contact_Section .ContactUs_Form
			      {
			        /*border: 1px solid black;*/
			        text-align: center;
			        border-radius: 10px;
			        background: linear-gradient(160deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
			        box-shadow: 1px 1px 5px rgba(0,0,0,.8);
			      }
			      .Contact_Section .Google_Map
			      {
			        /*border: 1px solid black;*/
			        text-align: center;
			        border-radius: 10px;
			        background: linear-gradient(160deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 100%);
			        box-shadow: 1px 1px 5px rgba(0,0,0,.8);
			      }
			      
			      .Contact_Section .ContactUs_Form form #name, #contact, #email, #message
			      {
			        padding: 8px; width: 100%;
			        border-top-right-radius: 5px;
			        border-bottom-right-radius: 5px;
			        border: 1px solid #0060FF;
			        font-family: verdana;
			        box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,0.8);

			      }
			      .Contact_Section .ContactUs_Form form #name:focus, #contact:focus, #email:focus, #message:focus
			      {
			        background: #DBE9FF;
			        /*background: #FFF8D2;*/
			      }
			      .Contact_Section .ContactUs_Form form #Send
			      {
			        border: 1px solid green;
			        width: 100px; height: 35px;
			        border-radius: 4px;
			        /*font-size: 14px;*/
			        /*line-height: auto;*/
			        color: #fff;
			        background: linear-gradient(0deg, rgba(0,127,0,1) 0%, rgba(0,159,0,1) 100%);
			        transition: .2s ease-in-out;
			        box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
			      }
			      .Contact_Section .ContactUs_Form form #Send:hover
			      {
			        background: linear-gradient(180deg, rgba(0,127,0,1) 0%, rgba(0,159,0,1) 100%);
			        box-shadow: none;
			        font-size: 18px;
			      }
			      .Contact_Section .ContactUs_Form form .Input, .Google_Map .Location, .Google_Map .Map
			      {
			        /*border: 1px solid black;*/
			        display: flex;
			        align-items: center;
			        margin: 10px;
			        border-radius: 5px;
			        background: #0060FF;
			      }
			      .Contact_Section .ContactUs_Form form .Input i, .Google_Map .Location i, .Google_Map .Map i
			      {
			        /*border: 1px solid black;*/
			        width: 40px; height: 100%;
			        padding: auto;
			        color: #fff;
			        padding: auto;
			      }
			      .fa-mobile{font-size: 20px;}
			      
			      .form_Discription
			      {
			        font-size: 14px;
			        font-family: verdana;
			        /*color: #0060FF;*/
			        color: #000;
			      }
			      .Google_Map .Location .Address
			      {
			        width: 100%; /*height: auto;*/
			        color: #555;
			        background: #fff;
			        border-top-right-radius: 5px;
			        border-bottom-right-radius: 5px;
			        padding: 10px;
			        text-align: left;
			        box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,0.8);
			        margin: auto;
			      }
			     
			      .Google_Map .Map iframe
			      {
			        border-top-right-radius: 5px;
			        border-bottom-right-radius: 5px;
			        box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,0.8);
			      }
			      .ContactUs_Title
			      {
			        padding: 1rem;
			        /*background: #fff;*/
			        /*border: 1px solid black;*/
			        font-size: 2rem;
			        text-align: center;

			      }

			    @media (max-width:375px)
			      {
			          .Contact_Section
			          {
			            /*border: 1px solid black;*/
			            padding: 5px 0;
			          }
			          .Contact_Section .ContactUs_Form
			          {
			            width: 100%; /*height: auto;*/
			            /*box-shadow: none;*/
			          }
			          .Contact_Section .ContactUs_Form .form_Discription
			          {
			            font-size: 12px;
			          }
			          .Contact_Section .Google_Map .Map iframe
			          {
			            width: 90%;
			          }

			      }
			    @media (max-width:500px)
			      { 
			        .Contact_Section .ContactUs_Form
			          {
			            width: 90%; /*height: auto;*/
			            margin: 20px auto;
			            padding: 10px;
			          }
			        .Contact_Section .Google_Map
			          {
			            width: 90%; /*height: auto;*/
			            margin: 20px auto;
			            padding: 10px 10px 10px 10px;
			          }

			      }
			    @media (max-width:768px) and (min-width: 501px)
			      {
			        .Contact_Section
			          {
			            display: block;
			          }
			        .Contact_Section .ContactUs_Form
			          {
			            width: 450px; /*height: 400px;*/
			            margin: 20px auto;
			            padding: 20px;
			          }
			        .Contact_Section .Google_Map
			          {
			            width: 450px; height: 90%;
			            margin: 20px auto;
			            padding: 20px;
			          }

			      }
			    @media (min-width:769px) and (max-width: 1023px)
			      {
			        .Contact_Section
			          {
			            display: block;
			          }
			        .Contact_Section .ContactUs_Form
			          {
			            width: 60%;
			            margin: 20px auto;
			            padding: 30px;
			          }
			        .Contact_Section .Google_Map
			          {
			            width: 60%; height: 90%;
			            margin: 20px auto;
			            padding: 30px;
			          }
			      }
			    @media (min-width:1024px) and (max-width: 1099px)
			      {
			        .Contact_Section
			          {
			            display: grid;
			            grid-template-columns: 50% 50%;
			          }
			        .Contact_Section .ContactUs_Form
			          {
			            width: 460px; /*height: 400px;*/
			            margin: 20px 20px 20px auto;
			            padding: 20px;
			          }
			        .Contact_Section .Google_Map
			          {
			            width: 460px; height: 90%;
			            margin: 20px auto 20px 20px;
			            padding: 20px;
			          } 
			      }
			    @media (min-width: 1100px)
			      {
			      	.ContactUs_Container {
			      		height: 94vh;
			      	}
			        .Contact_Section
			          {
			            display: grid;
			            grid-template-columns: 50% 50%;
			          }
			        .Contact_Section .ContactUs_Form
			          {
			            width: 600px; height: auto;
			            margin: 20px 4rem 20px auto;
			            padding: 20px;
			          }
			        .Contact_Section .Google_Map
			          {
			            width: 600px; height: auto;
			            margin: 20px auto 20px 4rem;
			            padding: 20px;
			          }
			      }
			/*/////////////////////////////////////////////////- Contact - End -///////////////////////////////////////////////////////*/

		/* ------------------------------------------------------- Contact Style End -------------------------------------------------------------- */
		





		/* ------------------------------------------------------- About Style Start -------------------------------------------------------------- */
			
			.aboutus_container {
				width: 100%;
				height: 95vh;
				background: lightblue;
			}
			.aboutus_container h1 {
				font-size: 2rem;
				text-align: center;
				padding: 1rem;
			}
			.aboutus_content p{
				font-size: 1.5rem;
				color: #1e1e1e;
				word-spacing: .5rem;
				line-height: 2.5rem;
				margin: 0 10rem;
			}
			.aboutus_content h2 {
				font-size: 3rem;
				text-align: center;
				padding: 2rem;
				color: green;
			}
			
			/* ..........................Media Query Start......................... */
				
				/* 4K - 2560px */
				@media (max-width: 2560px) {
					
				}

				/* Laptop L - 1440px */
				@media (max-width: 1440px) {
					
				}

				/* Laptop 1024px */
				@media (max-width: 1024px) {
						
					.aboutus_container h1 {
						font-size: 2rem;
						padding: .5rem;
					}
					.aboutus_content p{
						font-size: 1.5rem;
						word-spacing: .25rem;
						line-height: 2rem;
						margin: 0 2rem;
					}
					.aboutus_content h2 {
						font-size: 2.5rem;
						padding: 1.5rem;
					}

				}

				/* Mini Laptop | Tablet 998px */
				@media (max-width: 998px) {
					.aboutus_content p{
						font-size: 1.5rem;
						word-spacing: .25rem;
					}
					.aboutus_content h2 {
						font-size: 2.5rem;
						padding: 1.5rem;
					}	
				}

				/* Tablet - 768px */
				@media (max-width: 768px) {
					.aboutus_container h1 {
						font-size: 2rem;
					}
					.aboutus_content p{
						font-size: 1.25rem;
						word-spacing: .2rem;
					}
					.aboutus_content h2 {
						font-size: 2rem;
					}		
				}

				/* Mobile L - 425px */
				@media (max-width: 425px) {
					.aboutus_container h1 {
						font-size: 2rem;
					}
					.aboutus_content p{
						font-size: 1.2rem;
						word-spacing: .25rem;
						line-height: 1.5rem;
						margin: 0 1rem;
					}
					.aboutus_content h2 {
						font-size: 1.5rem;
						padding: 1rem;
					}	
						
				}

				/* Mobile M - 375px */
				@media (max-width: 375px) {
					.aboutus_container h1 {
						font-size: 1.5rem;
					}
					.aboutus_content p{
						font-size: 1rem;
						word-spacing: .1rem;
						line-height: 1.8rem;
						margin: 0 1rem;
					}
					.aboutus_content h2 {
						font-size: 1.25rem;
						padding: .5rem;
					}
				}

				/* Mobile S - 320px */
				@media (max-width: 320px) {
					.aboutus_container h1 {
						font-size: 1.5rem;
						padding: .2rem;
					}
					.aboutus_content p{
						font-size: 1rem;
						word-spacing: 0;
						line-height: 1.8rem;
						margin: 0 1rem;
					}
					.aboutus_content h2 {
						font-size: 1.25rem;
						padding: .25rem;
					}
				}

		/* ------------------------------------------------------- About Style End -------------------------------------------------------------- */
		




		/* ------------------------------------------------------- Portfolio Style Start -------------------------------------------------------------- */
			
			.portfolio_container h1{
				text-align: center;
				font-size: 2rem;
				padding: .8rem;
			}

			.profile_container {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				padding: 2rem 0;

			}
			.profile_container .profile {
				background: url('../images/My Pic - Blue T-Shirt.jpg');
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				border-radius: 50%;
				border: 2px solid #3e3e3e;
				width: 15rem;
				height: 15rem;
				margin-right: 1rem;
				box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.5);
			}
			.profile_container .detail {
				margin-left: 1rem;
			}
			.profile_container .detail h1 {
				/* border: 1px solid black; */
				background: #2e2e2e;
				color: #fff;
				text-transform: uppercase;
				font-size: 2rem;
			}
			.profile_container .detail h2 {
				/* border: 1px solid black; */
				color: #2e2e2e;
			}


			/* Laptop 1024px */
				@media (max-width: 1080px) {
					.profile_container .detail h1 {
						font-size: 1.5rem;
					}
					.profile_container .detail h2 {
						font-size: 1.5rem;
					}	
				}

				/* Mini Laptop | Tablet 998px */
				@media (max-width: 998px) {
					.profile_container .detail h1 {
						font-size: 1.4rem;
					}
					.profile_container .detail h2 {
						font-size: 1.4rem;
					}
					.profile_container .profile{
						padding-bottom: 1rem;
					}
					.profile_container .detail{
						padding-top: 1rem;
					}
				}

				/* Tablet - 768px */
				@media (max-width: 768px) {

					.profile_container .profile{
						padding-bottom: 1rem;
					}
					.profile_container .detail{
						padding-top: 1rem;
					}

					.profile_container .detail h1 {
						font-size: 1.2rem;
					}
					.profile_container .detail h2 {
						font-size: 1.2rem;
					}	
				}

				/* Mobile L - 425px */
				@media (max-width: 425px) {
					.profile_container .detail h1 {
						font-size: 1rem;
					}
					.profile_container .detail h2 {
						font-size: 1rem;
					}
				}

				/* Mobile M - 375px */
				@media (max-width: 375px) {
					.profile_container .detail h1 {
						font-size: .8rem;
					}
					.profile_container .detail h2 {
						font-size: .8rem;
					}
				}

				/* Mobile S - 320px */
				@media (max-width: 320px) {
					.profile_container .detail h1 {
						font-size: .8rem;
					}
					.profile_container .detail h2 {
						font-size: .8rem;
					}
				}


		/* ------------------------------------------------------- Portfolio Style End -------------------------------------------------------------- */
		









		/* ------------------------------------------------------- Player Section Style Start -------------------------------------------------------------- */
		
				.playerContainer {
					/* border: 1px solid black; */
					width: 100%;
					display: grid;
					grid-template-columns: 50% 50%;
					padding: 2rem 0;
					background: #1e1e1e;
				}

				.playerContainer .playerSection {
					/* border: 1px solid black; */
					/* height: 650px; */
					display: flex;
					justify-content: center;
					align-items: center;
					background: #fff;
				}
				.playlistSection {
					background: #1e1e1e;	
				}
				
				.audioPlayer {
					/* border: 1px solid red; */
					width: 425px;
					/* height: 650px; */
				}
				.audioPlaylist {
					/* border: 1px solid red; */
					/* width: 425px; */
					height: 580px;
				}




				/* ................................................................................ */

				.image_container {
					width: 18rem;
					height: 18rem;
					margin: auto;
					border-radius: 50%;
					box-shadow: 0 .5rem 1rem 0.2rem rgba(0, 0, 0, .4);
					margin: 1rem auto;
					/* border: 1px solid black; */
				}
				.image_container img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.musicDetail {
					/* border: 1px solid black; */
					padding: 0 1rem;
				}
				.musicDetail h4{
					font-size: 1.2rem;
				}
				.musicDetail i{
					width: 2rem;
					padding: 0 0 .5rem 0;
				}
				.musicDetail *{
					display: flex;
					/* justify-content: center; */
					align-items: center;
				}
				.musicVolume {
					/* border: 1px solid black; */
					height: 2rem;		
				}
				.progress_duration_meter {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: .5rem 1rem;
				}
				.progress_div {
					padding: 0 1rem;
					overflow: hidden;
				}
				.progress_div .progress{
					
				}
				.music_controls {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 1rem 2rem;
				}

				.music_controls .fa {
					color: #111111;
					font-size: 1.5rem;
					cursor: pointer;
					filter: drop-shadow(0 .5rem 2rem 0.2rem rgba(0, 0, 0, .4));
				}

				.music_controls .main_button {
					width: 3.5rem;
					height: 3.5rem;
					border-radius: 50%;
					background-color: #111;
					color: #f6f6f6;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 1.2rem;
				}

				.music_controls .fa:hover {
					color: grey;
				}

				.music_controls .fa:hover {
					color: grey;
				}

				.music_controls .main_button:hover {
					background-color: #f6f6f6;
					color: #111;
					box-shadow: 0 .1rem 1rem .2rem rgba(0, 0, 0, .5);
				}

				.anime {
				animation: rotatePlayer 3s linear infinite;
				}

				@keyframes rotatePlayer {
					from { transform: rotate(0deg); }
					to { transform: rotate(360deg); }
				}


				/* Progress Bar Style */
				.proggreesBar {
					padding: 0 1rem;
				}

				
				.progress_div {
					width: 100%;
					height: 0.5rem;
					/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
						0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
						0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07); */
					/* box-shadow: 0 .1rem .5rem .1rem rgba(0, 0, 0, .2); */
					border-radius: 4rem;
					position: relative;
					transition: width 1s linear;
					-moz-transition: width 1s linear;
					-o-transition: width 1s linear;
					-webkit-transition: width 1s linear;
					cursor: pointer;
					-webkit-appearance: none;
					appearance: none;
					border: 1px solid grey;
				}

				.progress {
					position: absolute;
					top: -1px;
					left: 0;
					width: 0%;
					/* background-color: #000; */
					/* border-radius: 4rem; */
					/* transition: all 1s linear;
					-moz-transition: all 1s linear;
					-o-transition: all 1s linear;
					-webkit-transition: all 1s linear; */
					cursor: pointer;
					-webkit-appearance: none;
					appearance: none;
				}


				.VolumeContainer {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.VolumeContainer i {
					/* border: 1px solid black; */
					width: 2rem;
					/* height: 3rem; */
					margin-right: 1rem;
					font-size: 1.2rem;
					cursor: pointer;

					/* display: grid; */
					/* place-items: center; */
					/* background: grey; */
					/* background-position: center;
					background-repeat: no-repeat; */
				}

				#volume_value {
					width: 3rem;
					font-size: 1.2rem;
					margin-left: 1rem;
				}

					#prgvol
				{
					width: 50%;
					height:5px;
					border-radius:2.5px;
					/* background-color:white; */
					background-color: lightblue;
					/* appearance: none; */
					/* -webkit-appearance:none; */
					/* -moz-appearance:none; */
					outline:none;
				}
				#prgvol::-webkit-slider-thumb {
					/* -webkit-appearance: none; */
					/* -moz-appearance:none; */
					/* appearance: none; */
					width: 15px;
					height: 15px;
					background: rgba(255,255,255,0.8); 
					border:1px solid black;
					cursor: pointer;
					border-radius:50%;
					outline:none;
				}

				#prgvol::-moz-range-thumb {
					width: 15px; 
					height: 15px;
					background: rgba(255,255,255,0.8);
					border:1px solid black;
					cursor: pointer;
					outline:none;
					border-radius:50%;
				}



				.audioPlaylist {
					border: 1px solid black;
					border-bottom: none;
					border-top: none;
				}
				.playListType {
					border: 1px solid #fff;
					display: flex;
					justify-content: space-around;
					align-items: center;
				}
				.playListType div {
					padding: 1rem;
					box-shadow: 0 0.1rem .1rem 0.1rem rgba(0, 0, 0, .2);
					width: 100%;
					text-align: center;
					font-size: 1.2rem;
					cursor: pointer;
					transition: 2ms linear ease-in-out;
					background: #fff;
				}
				.playListType div i{
					padding-right: .5rem;
				}
				.playListType div:hover {
					background: #1e1e1e;
					color: #fff;
				}


				.songsList {
					/* overflow: auto; */
					scroll-behavior: smooth;
					height: 519px;
					padding: 0 1rem;
					/* overflow-y: scroll; */
					overflow-y: auto;
					overflow-x: hidden;
					border-bottom: 1rem solid #fff;
				}
				.songsList ol{
					list-style: none;
				}
				.songsList ol li{
					/* list-style: none; */
					color: #fff;
					padding: .5rem 1rem;
					border-bottom: 1px solid rgba(0, 0, 0, .8);
					cursor: pointer;
				}

				.songsList ol li:hover {
					background: #000;
				}



				@media(max-width: 320px){
					.audioPlayer {
						width: 320px;
						/* height: 500px; */	
					}
					.playListType div {
						padding: .5rem;
						/* border:1px solid yellow; */
					}
					.image_container {
						/* border: 1px solid yellow; */
					}

					.musicDetail h4{
						font-size: 1rem;
					}
				}

				@media(max-width: 375px){
					.audioPlayer {
						width: 100%;
						/* height: 500px; */
					}
					.image_container {
						width: 16rem;
						height: 16rem;
					}
					.musicDetail h4{
						font-size: 1rem;
					}

				}

				@media(max-width: 360px) {
					.playListType div {
						font-size: 1rem;
					}
				}

				/* .............................................................................. */


				@media(max-width: 1040px) {
				  	.playerContainer {
						grid-template-columns: none;
						/* grid-template-rows: 650px 650px; */
					}
					.playerContainer .playerSection {
						/* border: 1px solid black; */

					}
					.playerContainer .playlistSection {
						/* border: 1px solid black; */
					}
				}
				@media(min-width:376px) and ( max-width: 424px){
					.audioPlayer {
						width: 320px;
						/* height: 500px; */
					}
					.image_container {
						width: 15rem;
						height: 15rem;
					}

				}



		/* ------------------------------------------------------- Player Section Style End -------------------------------------------------------------- */
		






		/* ------------------------------------------------------- Player Section Style End -------------------------------------------------------------- */

				.latestMusic {
					/* border: 1px solid red; */
					width: 100%;
					/* height: 500px; */
					background: #1e1e1e;
					box-shadow: 0 -1px 10px 2px rgba(0, 0, 0, .8)
				}
				.latestmusicType .cardContainer{
					/* border-bottom: 1px solid #fff; */
				}

				.latestmusicType .cardContainer h4 {
					color: #fff;
					text-align: center;
					padding: 1rem;
				}

				.latestmusicType  .cardContainer .card{
					margin-bottom: 1rem;
					box-shadow: 0 0 .4rem .1rem rgba(0, 0, 0, .5);
					transition: .2s linear ease-in-out;
					
				}
				.latestmusicType .cardContainer .card:hover{
					border: 1px solid #fff;
					box-shadow: 0 0 .4rem .1rem #fff;
				}




				.latestmusicType .cardContainer .c1{
					background: url('../images/Befikra.jpg');
				}
				.latestmusicType .cardContainer .c2{
					background: url('../images/Odhni.jpg');
				}
				.latestmusicType .cardContainer .c3{
					background: url('../images/Aeroplane-mr-faisu.jpg');
				}
				.latestmusicType .cardContainer .c4{
					background: url('../images/Sanedo.jpg');
				}
				.latestmusicType .cardContainer .c5{
					background: url('../images/khuda-haafiz.jpg');
				}
				.latestmusicType .cardContainer .c6{
					background: url('../images/Chehre.jpg');
				}
				.latestmusicType .cardContainer .c7{
					background: url('../images/ELKDTAL.jpg');
				}
				.latestmusicType .cardContainer .c8{
					background: url('../images/KALANK.jpg');
				}
				.latestmusicType .cardContainer .c9{
					background: url('../images/Kesari.jpg');
				}
				.latestmusicType .cardContainer .c10{
					background: url('../images/JB.jpg');
				}
				.latestmusicType .cardContainer .c11{
					background: url('../images/LukaChuppi.jpg');
				}
				.latestmusicType .cardContainer .c12{
					background: url('../images/GallanTeriya2.jpg');
				}
				.latestmusicType .cardContainer .c13{
					background: url('../images/INeedYa.jpg');
				}
				.latestmusicType .cardContainer .c14{
					background: url('../images/TereNaal.jpg');
				}
				.latestmusicType .cardContainer .c15{
					background: url('../images/PegGiney.jpg');
				}
				.latestmusicType .cardContainer .c16{
					background: url('../images/TOTALDHAMAL.jpg');
				}
				.latestmusicType .cardContainer .c17{
					background: url('../images/LejaRe.jpg');
				}
				.latestmusicType .cardContainer .c18{
					background: url('../images/OrangeCarmel.jpg');
				}
				.latestmusicType .cardContainer .c19{
					background: url('../images/Fergie.jpg');
				}
				.latestmusicType .cardContainer .c20{
					background: url('../images/LetMeLoveYou.jpg');
				}

				.latestmusicType .cardContainer .mx-2{
					background-position: center;
					background-size: cover;
				}

				@media(max-width: 425px) {

					.latestmusicType .cardContainer h4 {
						font-size: 1rem;					}
				}









		/* ------------------------------------------------------- Footer Style Start ------------------------------------------------------------- */

			/*/////////////////////////////////////////////////- Footer - Start -//////////////////////////////////////////////////////*/

			  footer{background: #2A2A2A; color:#fff;}
			  footer .footerSection
			    {
			      display: grid;
			      grid-template-columns: auto auto;
			    }
			  footer .Copyrights p
			    {
			      text-align: center;
			      padding: 10px;
			      background: #212121;
			      color: #fff;
			    }

			  /*////////////////////////////////////Contact//////////////////////////////////////////*/
			  .footer_Contact
			    {
			      display: flex;
			      justify-content: center; align-items: center;
			      margin: 20px 0;
			      padding-top: 20px;
			    }
			  .footer_Contact .Contact_Details .footer_Contact_Title{text-align: center; padding: 0 0 12px 0; background: transparent;}
			  .footer_Contact .Contact_Details
			    {
			      text-align: left;
			    }
			  .footer_Contact .Contact_Details p
			    {
			      padding: 8px 0 8px 0;
			    }
			  /*.footer_Contact .Contact_Details p:last-child{padding-bottom: 30px;}*/
			  .footer_Contact .Contact_Details p i{width: 35px; height: auto; text-align: center;}


			  /*////////////////////////////////////Social Media//////////////////////////////////////////*/
			  .Follow_Us
			    {
			      margin: 20px 0;
			    }
			  .Follow_Us, .footer_Contact_Title
			    {
			      font-size: 28px; background: transparent;
			    }

			  .SocialMedia_Section
			    {
			      text-align: center;
			      margin: 20px;
			    }
			  .SocialMedia_Section .Follow_Us
			    {
			      padding: 0 0 25px 0;
			    }
			  .SocialMedia_Section .SocialMedia_Links
			    {
			      /*border: 1px solid black;*/
			    }
			  .SocialMedia_Section .SocialMedia_Links a{margin: 10px;}
			  .SocialMedia_Section .SocialMedia_Links a i
			    {
			      color: white;
			      font-size: 18px;
			      /*border: 1px solid black;*/
			      width: 40px; height: 35px;
			      padding: 8px;
			      border-radius: 5px;
			      box-shadow: 0 0 5px 0 grey;
			      transition: .2s ease-in-out;
			    }
			  .SocialMedia_Section .SocialMedia_Links a .fa-facebook{color: ; background: ;}
			  .SocialMedia_Section .SocialMedia_Links a:hover .fa-facebook{color: ; background: #3b5998; box-shadow: none;}

			  /*.SocialMedia_Section .SocialMedia_Links a .fa-instagram{color: ; background: ;}*/
			  .SocialMedia_Section .SocialMedia_Links a:hover .fa-instagram
			    {
			      box-shadow: none;
			      background: #d6249f;
			      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
			    }

			  .SocialMedia_Section .SocialMedia_Links a .fa-linkedin{color: ; background: ;}
			  .SocialMedia_Section .SocialMedia_Links a:hover .fa-linkedin{color: ; background: #0e76a8; box-shadow: none;}

			  .SocialMedia_Section .SocialMedia_Links a .fa-twitter{color: ; background: ;}
			  .SocialMedia_Section .SocialMedia_Links a:hover .fa-twitter{color: ; background: #00acee; box-shadow: none;}

			  .SocialMedia_Section .SocialMedia_Links a .fa-pinterest{color: ; background: ;}
			  .SocialMedia_Section .SocialMedia_Links a:hover .fa-pinterest{color: ; background: #E60023; box-shadow: none;}
			    
			  @media (max-width:768px)
			    {
			      footer .footerSection
			      {
			        display: block;
			        margin-top: -20px;
			      }
			      .footer_Contact
			      {
			        border: none;
			      }
			      .SocialMedia_Section{padding-bottom: 10px;}
			      .Follow_Us
			      {
			        margin: 0 0 10px 0;
			      }
			      .footer_Contact .Contact_Details p
			      {
			        font-size: .9em;
			      }
			      .footer_Contact .Contact_Details p:last-child{padding-bottom: 30px; border-bottom: 1px solid grey;}
			      .footer_Contact .Contact_Details p i{width: 25px; height: auto; text-align: center;}
			    }
			  @media (min-width:769px)
			    {
			      .footer_Contact
			      {
			        border-right: 1px solid grey;
			        border-bottom: none;
			      }
			    }
			  @media (max-width:360px)
			    {
			      .SocialMedia_Section .SocialMedia_Links a{margin: 10px 5px;}
			      .footer_Contact .Contact_Details .footer_Contact_Title, .SocialMedia_Section .Follow_Us{text-align: center; font-size: 20px;}
			      .footer_Contact.Contact_Details p{font-size: 12px;}
			      footer .Copyrights p{font-size: 12px;}
			    }
			  @media (max-width:380px)
			    {
			      footer .Copyrights p{font-size: 12px;}
			    }
			/*/////////////////////////////////////////////////- Footer - End -////////////////////////////////////////////////////////*/


		/* ------------------------------------------------------- Footer Style End --------------------------------------------------------------- */