/*============================================MEDIA QUERY=========================================*/




@media(max-width:960px) {

  div {
    font-size: 1.3em; /* Adjust font size as needed */
    font-color: #808080; /* Medium grey */
    line-height: 1.6;
  }
	.text-headings {
	font-size: 1.3em; /* Adjust font size as needed */
    font-color: #808080; /* Medium grey */
}
   left-box-contact {
	  width: 100%;
  max-width: 100%;
}
  
   .box-title {
	padding-bottom: 10px;
}

  .box-main {
	margin-top: 10px;
}

  .box-button {
	margin-top: 10px;
}
  
  .box-text {
	position: absolute;
	width: 250px;
	height: 65px;
	left: 190px;
	top: 25px;
	font-weight: 500;
	font-size: 18px; /* Adjust font size as needed */
	line-height: 1.3;
}

   .header-text-box  {
	line-height: 1.1;
}


img {
	max-width: 100%;
}
.header, .container {
	width: 95%;
}
.header-left-box {
	width: 25%;
}
.header-right-box {
	width: 30%;
	left: inherit;
	right: 0;
}
.nav-bar {
	width: auto;
	overflow: hidden;
	height: auto;
}
#nav {
	width: auto;
	padding: 0;
	margin: 0;
	float: none;
}
#nav a {
	padding: 5px 15px;
}
#master0, #master0 > div {
	width: 100% !important;
}
.right-box {
	height: auto;
	width: 48%;
}
.box-main {
	height: auto;
	overflow: hidden;
}
.left-box {
	width: 48%;
}
.box-title, .box-picture, .box-text, .box-button {
	position: static;
}
.box-picture {
	width: 48%;
	float: left;
}
.box-text {
	width: 48%;
	float: right;
}
.box-button {
	float: left;
	width: 100%;
	margin-top: 5px;
}
h1 {
	line-height: normal;
}
#master0, #master0 > div {
	height: 250px !important;
}
.right-box-1{
		width:46%;
		padding:2%;
	}
.left-box-1{
		width:48%;
	}
.right-box-2{
		width:auto;
	}
.portfolio-box-1-doors{
		width:32%;
		margin-right:2%;
	}
.portfolio-box-2-doors{	
		width:32%;
}

.thumbs-left ul li,.thumbs-full ul li {
	float:left;
	
}

.main-gallery{
		float:none;
		width:auto;
	}

.thumbs-left{
		float:none;
		width:auto;
	}
.portfolio-box-1{ width:19%; margin-right:1%;}
.portfolio-box-2{ width:20%}				
}
 @media(max-width:810px) {
.menu-icon {
	display: block;
	margin: 15px 0;
}
.menu-icon a {
	background: url("images/menu-icon.png") no-repeat scroll 2% center #fff;
    color: #000;
    display: block;
    padding: 10px 10px 10px 45px;
	text-decoration:none;
}
.menu-icon a.active {
	background: url("images/cross-icon.png")no-repeat scroll 2% center #fff;
}
.nav-bar {
	display: none;
	text-align: left;
}
#nav >li, #nav > li.end {
	float: none;
	border-right: 0;
	border-bottom: solid 1px #fff;
}
#nav ul {
	position: static;
}
.header-left-box, .header-right-box, .header-logo-box, .header-text-box, .header-text-box-2 {
	position: static;
	width: auto;
	text-align: center;
}
.header {
	height: auto;
}
.home-page-title {
	margin: 10px 0;
	padding: 0;
}
#master0, #master0 > div {
	height: 230px !important;
}
.portfolio-box-2-doors,.portfolio-box-1-doors{
		width:auto;
		float:none;
	}
.portfolio-pic-doors{
		float:left;
		margin-right:2%;
		border:0;
	}	
.portfolio-title-doors{
		text-align:left;
	}

.portfolio-box-1-doors{
		border-bottom: solid 1px #999;
	}	
.portfolio-pic-doors > a >img {
    border: 1px solid #999 !important;
    padding: 10px;
}
.portfolio-text-doors{
		text-align:center;
	}	
		
}
 @media(max-width:768px) {
.left-box, .right-box {
	float: none;
	width: auto;
}


  .left-box-contact {
    width: 100%; /* Makes the box responsive to the screen width */
    padding-left: 15px; /* Adjust padding for smaller screens */
    padding-right: 15px; /* Add right padding to center the content */
    margin: 0 auto; /* Center the box if it has any margin on the sides */
    box-sizing: border-box; /* Ensures padding fits within the width */
  }
  
    .right-box-4 {
    position: relative; /* Changes from absolute to relative to allow it to flow within the layout */
    width: 100%; /* Makes the box responsive to the screen width */
    left: 0; /* Reset the left position */
    top: auto; /* Remove the fixed top position */
    padding: 15px; /* Add padding to maintain inner spacing */
    box-sizing: border-box; /* Ensures padding fits within the width */
    margin-top: 20px; /* Optional: adds space if needed above or below the element */
  }
  
  
  
  

.box-picture {
	width: auto;
	margin-right: 10px;
}
.box-text {
	width: auto;
	float: none;
}
.header-text-box, .header-text-box-2 {
	height: auto;
	padding: 5px 0;
}
#master0, #master0 > div {
	height: 300px !important;
}
.right-box-1,.left-box-1,.right-box-2,.right-box-3{
		float:none;
		width:auto;
	}
.thumbs-full ul li{
	margin:5px;
	}
.thumbs-full ul li.main-gallery{
	float:none;
	width:auto;	
}

.mCustomScrollBox,.mCSB_container{
		overflow:hidden;
	}
#content-1.content{ height: 200px; margin:20px 0;}

/*.thumbs-full ul{
		height:150px;
		overflow-y:scroll;
		overflow-x: hidden;
	}	
.thumbs-full ul::-webkit-scrollbar {
	-webkit-appearance: none;
    width: 5px;
	-webkit-overflow-scrolling: touch
}
 
.thumbs-full ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
	-webkit-overflow-scrolling: touch
}
 
.thumbs-full ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	-webkit-overflow-scrolling: touch
}

.thumbs-full ul::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
	-webkit-overflow-scrolling: touch
}

.thumbs-full ul::-webkit-scrollbar-corner {
    background: #000;
	-webkit-overflow-scrolling: touch
}
	
	*/
.main-gallery{ height:auto; max-height:inherit;}
.portfolio-box-1,.portfolio-box-2{
		width:32.33%;
	}
.portfolio-box{
		height:auto;
		overflow:hidden;
	}			
}
 @media(max-width:640px) {
.portfolio-title-doors{
		text-align:center;
	}
.portfolio-pic-doors{
		float:none;
		width:auto;
		text-align:center;
		margin:0;
		padding:0;
	}
.portfolio-box-1,.portfolio-box-2{
		float:none;
		width:auto;
		text-align:center;
	}	
.ContactFormLeft input,.ContactFormLeft textarea{
		width:80% !important;
	}		
}
 @media(max-width:480px) {
.box-main {
	text-align: center;
}
.box-title {
	width: auto;
	text-align: center;
}
.box-picture {
	float: none;
}
.box-button {
	float: none;
}
#master0, #master0 > div {
	height: 140px !important;
}



}



@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {

  .nav-bar {
    overflow: visible;
    position: relative;
    z-index: 1000;
  }

  #nav li {
    position: relative;
  }

  #nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #2E3134;
    z-index: 1001;
  }

  #nav li:hover > ul {
    display: block;
  }

  #nav li ul li {
    float: none;
    width: 200px;
    white-space: nowrap;
  }

  #nav li ul li a {
    display: block;
    padding: 10px;
    color: #fff;
  }
}


/* Default: hide all submenus */
#nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #2E3134;
  padding: 0;
  margin: 0;
  z-index: 9999;
}

/* Desktop hover support */
#nav li:hover > ul {
  display: block;
}

/* Touch support: show submenu when parent link gets focus */
#nav li:focus-within > ul {
  display: block;
}

/* Optional: style dropdown links */
#nav li ul li {
  width: 200px;
}

#nav li ul li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  background: #2E3134;
}