@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap');

html{
	scroll-behavior:smooth;
}

/* width */
::-webkit-scrollbar {
  height: 8px;
  width:12px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: lavender; 
  border-radius: 6px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: white; 
}

body{
	background-color: midnightblue;
	background-image:linear-gradient(to bottom,midnightblue,royalblue);
	margin:0;
	padding:0;
	font-family: 'Josefin Sans', sans-serif;
}

.fixed-header{
	position:fixed;
	width:100%;
	top:0;
	background-color: midnightblue;
	padding:7px 20px;
	z-index:1;
}

.logo-section{
	text-align:center;
	vertical-align:middle;
	float:left;
}

.brand-logo {
	width:250px;
	height: auto;
	border-radius:7px;
	object-fit:contain;
}

.brand-text {
	font-weight:bold;
	background-color:transparent;
	color:lavender;
	margin:auto;
	text-decoration:none;
	font-size:large;
	margin-bottom:7px;
	text-align:center;
}

.title-text{
	font-weight:bold;
	background-color:transparent;
	color:lavender;
	margin:auto;
	text-decoration:none;
	font-size:26px;
	margin-bottom:30px;
	text-align:center;
}

.welcome-text{
	font-weight:bold;
	background-color:transparent;
	color:lavender;
	margin:auto;
	line-height:1.5;
	font-size:17px;
	text-align:center;
}

.subtitle-text{
	font-weight:bold;
	background-color:transparent;
	color:lavender;
	margin:auto;
	line-height:1.5;
	font-size:medium;
	text-align:center;
}

.mobile-menu{
	display:none;
	float:right;
	height:auto;
	margin:30px;
	cursor:pointer;
}

.mobile-menu img{
	width:35px;
	height:auto;
}

.mobile-menu-content{
	display:none;
	position:absolute;
	top:50px;
	left:50%;
	background-color:white;
	border-radius:10px;
	margin-right:30px;
	padding:7px;
	text-align:center;
	z-index:1;
}

.mobile-menu-content a{
	display:block;
	background-color:transparent;
	color:midnightblue;
	padding: 10px;
	margin-right:30px;
     margin-bottom: 5px;
	line-height:1.2;
	font-weight:bold;
	font-size:small;
	text-decoration:none;
}

/*
.mobile-menu:hover .mobile-menu-content{
	display:block;
}*/

.top-menu{
	float:right;
	margin:30px;
}

.top-menu a{
	font-weight:bold;
	background-color:transparent;
	color:lavender;
	margin-right:20px;
	text-decoration:none;
	font-size:medium;
	padding:5px;
}

.top-menu a:hover{
	border-bottom: white solid 2px;
}

.selected-page{
	font-weight:bold;
	background-color:transparent;
	color:white;
	margin-right:20px;
	text-decoration:none;
	font-size:medium;
	border-bottom: white solid 2px;
}

.dropdown-trigger {
	display:inline-block;
	position:relative;
}

.dropdown-trigger a{
	font-weight:bold;
	background-color:transparent;
	color:lavender;
	margin-right:20px;
	text-decoration:none;
	font-size:medium;
	padding:5px;
}

.dropdown-content{
	display:none;
	position:absolute;
	background-color:white;
	border-radius:10px;
	padding:7px;
	z-index:1;
}

.dropdown-content a{
	display:block;
	background-color:transparent;
	color:midnightblue;
	padding: 10px;
     margin-bottom: 5px;
	line-height:1.2;
	font-size:small;
}

.dropdown-trigger:hover .dropdown-content{
	display:block;
}

.divider{
	background-color: rgba(255,255,255,0.4);
  	height: 1px;
	margin: 25px 50px;
}

.vertical-divider{
	display:inline-block;
	background-color: rgba(255,255,255,0.4);
  	width: 1px;
	height:40px;
	margin:0 15px;
}

.drums-intro{
	text-align:center;
	vertical-align:middle;
	margin:30px 40px;;
}

.intro-img{
	width:55%;
	object-fit:contain;
	background-color:transparent;
	border-radius:25px;
	text-align:center;
	vertical-align:middle;
	margin:20px;
}

.intro-info{
	display:inline-block;
	background-color:transparent;
	text-align:center;
	vertical-align:middle;
}

.intro-text{
	background-color:transparent;
	color:lavender;
	font-weight:bold;
	font-size:30px;
}

.clients{
	width:40%;
	display:inline-block;
	background-color:lavender;
	border-radius: 15px;
	margin:20px;
	padding:15px;
	text-align:center;
	vertical-align:middle;
}

.footer-parent{
	background-color: midnightblue;
	padding:30px 30px;
}

.footer-child{
	display:inline-block;
	width:30%;
	margin:auto;
}

.footer-text{
	background-color:transparent;
	color:lavender;
	margin:auto;
	line-height:1.5;
	font-size:small;
	text-align:center;
}

.footer-text a{
	background-color:transparent;
	color:white;
	margin:auto;
	font-size:small;
	text-align:center;
	text-decoration:none;
}

.goto-top {
	background-color:white;
	color:midnightblue;
	padding:5px;
	font-size:35px;
	border: 1px solid midnightblue;
	border-radius:5px;
	position:fixed;
	bottom:20px;
	right:7px;
	width:20px;
	height:20px;
	text-align:center;
	vertical-align:middle;
	font-weight:bold;
	text-decoration:none
}
/* Contact screen */

.map-div{
	display:inline-block;
}

.contact-address-div{
	display:inline-block;
	text-align:center;
	vertical-align:center;
	padding:30px;
}

.map-responsive{
	width:40%;
	height:auto;
	text-align:center;
	float:right;  
}

.form-responsive{
	text-align:center;
	margin-top:120px;
}

.marquee {
  width:100%;
  display:inline-block;
  background-color: transparent;
  margin: 0 auto;
  overflow: hidden;
  vertical-align:middle;
  white-space: nowrap;
}
.marquee img{
  height:70px;
  display: inline; 
  font-size: 20px;
  position: relative;
  border-radius:10px;
  object-fit:contain;
  margin:20px;
  animation: marquee 30s linear infinite;
  -moz-animation: marquee 30s linear infinite;
  -webkit-animation: marquee 30s linear infinite;
}

@keyframes marquee {
  0%   { left: 100%; }
  100% { left: -100%; }
}

@-webkit-keyframes marquee {
  0%   { left: 100%; }
  100% { left: -100%; }
}

@-moz-keyframes marquee {
  0%   { left: 100%; }
  100% { left: -100%; }
}

.marquee:hover img{
  animation-play-state: paused;
}


/*Drums Screens*/

.horizontal-table {
  display: flex;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  margin-top: 30px;
}

.drums-wrapper{
	position:relative;
	display:block;
	width:40%;
	background-color:rgba(0,0,0,0.3);
	border-radius:15px;
	padding:10px;
	text-align: center;
	margin:auto;
}	

.drums-img{
	width:45%;
	object-fit:contain;
	border-radius:25px;
	text-align:center;
	vertical-align:middle;
	margin:20px;
	margin-right:10%;
}

.drums-spec-block{
	display:block;
	width:100%;
	font-weight:bold;
	background-color:transparent;
	color:lavender;
	margin:auto;
	line-height:1.5;
	font-size:medium;
	text-align:center;

}

.drums-info-text{
	background-color:rgba(0,0,0,0.3);
	border-radius:10px;
	padding:10px;
	color:lavender;
	margin:auto 10%;
	line-height:1.5;
	font-size:medium;
	text-align:center;
}

.fiber-intro-img{
	display:block;
	width:80%;
	margin:0 auto;
	border-radius:15px;
}



/* Small Screens */

@media only screen and (max-width:650px){
	.top-menu{
		display:none;
		float:none;
	}

	.selected-page{
		background-color:midnightblue;
	}
	.mobile-menu{
		display:block;
	}
	.intro-img{
		width:100%;
	}

	.intro-info{
		display:block;
	}

	.clients{
		width:90%;
		display:inline-block;
		background-color:lavender;
		border-radius: 15px;
		margin:15px auto;
		padding:15px;
		text-align:center;
		vertical-align:middle;
	}
	.footer-child{
		display:inline-block;
		width:100%;
		margin:10px auto;
	}
	.vertical-divider{
		display:block;
	  	width: auto;
		height:1px;
		margin:auto 20%;
	}

	.map-responsive iframe{
	    height:auto;
	    width:auto;
	}
	.form-responsive{
		height:auto;
		width:auto;
	}
	.map-div{
		display:block;
	}

	.map-responsive{
		width:90%;
		float:none;  
	}

	.marquee img{
		animation: marquee 10s linear infinite;
		-moz-animation: marquee 10s linear infinite;
		-webkit-animation: marquee 10s linear infinite;
	}

	.drums-img{
		width:60%;
	}
	
	.horizontal-table {
 		 width:100%;
		 display: block;
	}

	.drums-wrapper {
		  width: auto;
		  margin:30px;
	}
}