@charset "UTF-8";

@font-face {font-family: PTBold; src: url(PTBold.ttf);}
@font-face {font-family: PTSans; src: url(PTSans.ttf);} 
@font-face {font-family: PTSans-Regular; src: url(PTSans/PTSans-Regular.ttf);}
@font-face {font-family: PTSans-Bold; src: url(PTSans/PTSans-Bold.ttf);}
@font-face {font-family: PTSans-Italic; src: url(PTSans/PTSans-Italic.ttf);}
@font-face {font-family: PTSans-BoldItalic; src: url(PTSans/PTSans-BoldItalic.ttf);}
/*@font-face {font-family: Roboto; src: url(Roboto/Roboto-Regular.ttf);}*/
@font-face {font-family: Roboto-Cond; src: url(Roboto/Roboto_Condensed-Regular.ttf);}
@font-face {font-family: Roboto-Sem-Cond; src: url(Roboto/Roboto_SemiCondensed-Regular.ttf);}
/*@font-face {font-family: Roboto-Sem-Cond-Bold; src: url(Roboto/Roboto_SemiCondensed-Bold.ttf);}
@font-face {font-family: Roboto-Sem-Cond-Light; src: url(Roboto/Roboto_SemiCondensed-Light.ttf);}*/


* { box-sizing: border-box; margin: 0; padding: 0; }

html, body 
{
	position: absolute;
	width: 100%; 
	height: 100%;
	margin: 0px; 
	background-color: #85EDFF; 
	z-index: -10;
}
		
.header-container-full { 
  background-image: url("pict/blue_back_1200.jpg");
  position: relative;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  z-index: 15;
}

.main-header {
  max-width: 95%;
  display: flex;
  align-items: flex-start; /* Align bottom of logo and text/buttons */
 /* flex-wrap: wrap; */
  align-content: space-between;
  gap: 10px;
  margin: 0 auto;
  justify-content: center;
}

.header-container-m {
  display: none;
  background-image: url("pict/blue_back_1200.jpg");
  position: relative;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  z-index: 15;
}

.main-header-m {

  max-width: 95%;
  display: block;
  align-items: flex-start; /* Align bottom of logo and text/buttons */
 /* flex-wrap: wrap; */
  align-content: space-between;
  margin: 0 auto;
  justify-content: center;
  
}

.top-header-m {

  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 120px;
}

.logo {  
  padding: 7px 0px 5px 0px;
  margin: 0 auto;
}

.logo img {
  width: 180px;
}

.logo-m {
  margin: 0;
  padding: 0;
}

.logo-m img {
  width: 150px;
}

.info-and-nav {
  /*background-color: palevioletred; */
  display: flex;
  padding: 10px 0px 10px 0px;
  flex-direction: column;
  margin: 0 auto;
  
}

.company-info {
  /*background-color: yellowgreen;*/
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 6px 0px 0px;
  font-family: PTBold;
  justify-content: space-between;
  align-items: center;
  font-size: 34px;
  color: #ff3a00;
  
}

.company-info-m {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: PTBold;
  font-size: 30px;
  color: #ff3a00;
  padding: 0;
  margin: 0;
}


.name {
  justify-self: start;
}

.phone{
  justify-self: end;
}

.phone a {
  color: #ff3a00;
  text-decoration: none;
}

.nav-bar {
  margin: 20px 0px 10px 0px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.nav-bar-m {
  margin: 0px 0px 8px 0px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.button, .button-about {
  text-decoration: none;
  color: #ffffff;
  padding: 8px 15px;
  margin: 2px;
  font-family: Roboto-Cond;
  background-color: #4d9ee0;
  font-size: 24px;
  border: 1.5px solid #ffffff; 
  border-radius: 5px;
  transition: all 0.3s ease;
}

.quote-button {
  text-decoration: none;
  color: #ffffff;
  padding: 8px 15px;
  margin: 2px;
  font-family: Roboto-Cond;
  background-color: #ff3a00;
  font-size: 24px;
  border: 1.5px solid #ffffff; 
  border-radius: 5px;
  transition: all 0.3s ease;
}

.quotebox {   /* ----------------------------------------------------*/
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
	z-index: 101;
}

.quotebox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 102;
}

.dropdown {
  position: relative;
  display: flex;           
  align-items: center;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;                  /* Align to left edge of parent */
  top: 100%;
  background-color: #4d9ee0;
  min-width: 210px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 100;
  border-radius: 5px;
}

.dropdown-content a {
  color: #ffffff;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  font-family: Roboto-Cond;
  font-size: 20px;
  border-bottom: 1px solid #ffffff1a;
}

.dropdown-content a:hover {
  background-color: #3979b5;
  border-radius: 5px;
}

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


.pict-dom{
	float:right; 
	margin-bottom: 15px; 
	margin-left: 15px; 
}


.quote-button:hover {
  background-color: #85EDFF;
  color: #033965;
  text-decoration: none;
  transform: scale(1.1);
}

.button:hover {
  background-color: #3979b5;
  text-decoration: none;
  transform: scale(1.1);
}

.button a:visited {
	text-decoration: none;
	text-decoration-color: #ffffff;
	color: #ffffff;
}
.quote-button a:visited {
	text-decoration: none;
	color: #ffffff;
}

.button a {
	text-decoration: none;
	color: #ffffff;
		
}

.main-container {
  position: relative;
  background-image: url("pict/fon_text.jpg");
  background-repeat: repeat-y;
  background-position: center;
  background-size: 100%;
  width: 1100px;
  max-width: 100%;
  padding: 10px 20px 10px 20px;
  border-top: 2px solid #FFFFFF; 
  border-bottom: 2px solid #ffffff; 
  margin: 0 auto; 
  align-content: center;
}

.main-container-gallery {
  position: relative;
  background-image: url("pict/fon_text.jpg");
  background-repeat: repeat-y;
  background-position: center;
  background-size: 100%;
  width: 1100px;
  max-width: 100%;
  padding: 10px 20px 10px 20px;
  border-top: 2px solid #FFFFFF; 
  border-bottom: 2px solid #ffffff; 
  margin: 0 auto; 
  align-content: center;
}

.service-container {
  background-image: url("pict/fon_text.jpg");
  background-repeat: repeat-y;
  background-position: center;
  background-size: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  width: 1100px;
  max-width: 100%;
  gap: 20px;
  padding: 10px;
  border-top: 2px solid #FFFFFF; 
  border-bottom: 2px solid #ffffff; 
  margin: 0 auto; /* Centers the container */
}

.service-card {
  max-width: 100%;
  padding: 15px;
  text-align: left;
}

.service-card img {
  max-width: 100%;
  height: auto;
  
}

.service-card a {
	text-decoration: none;
	color: #404040;
		
}

.service-card a:hover 
{
	color: #404040;
}

.service-card a:visited 
{
	color: #404040;
}


.main-container-buttom{
  background-image: url("pict/blue_back_1200.jpg");
  position: relative;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  z-index: 15;
	
}

.menu-bottom { 
	/*background-color: aqua;*/
  max-width: 95%;
  display: flex;
  justify-content: space-around;
  gap: 10px;
  margin: 0 auto;
  align-content: flex-start;	
}

.info-and-nav-buttom {
	 /*background-color: palevioletred;*/
  width: 70%;
  display: flex;
  flex-direction: column;
  align-content: space-around;
  margin: 0 auto;
	
}

.nav-bar-bottom {
	/*background-color: chartreuse;*/
  margin: 20px 20px 10px 0px;
  display: flex;
  justify-content: space-between;
  font-family: Roboto-Sem-Cond;
  font-size: 26px;
  color: #0076B0;
  text-decoration: none;
}

.nav-bar-bottom a {
  color: #0076B0;
  text-decoration: none;
}

.company-info-buttom {
  /*background-color: red;*/
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-right: 20px;
  padding: 6px 0px 0px;
  justify-content: space-between;
  align-items: center;
}

.phone-button {
  justify-self: start;
  color:#83C3FF;
  font-size: 36px;
  font-family: PTBold;
}
.mail-button {
  justify-self: end;
  color:#83C3FF;
  font-size: 24px;
  font-family: PTSans;
}

.mail-button a, .phone-button a {
  color:#83C3FF;
  text-decoration: none;
}

.main-container-buttom-m {
  background-image: url("pict/blue_back_1200.jpg");
  display: none;
  position: relative;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  z-index: 15;	
}

.menu-bottom-m { 
  max-width: 95%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;	
}

.info-and-logo-buttom-m {
	 /*background-color: palevioletred;*/
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
 }

.company-info-buttom-m {
  /*background-color: red;*/
  display: flex;
  flex-direction: column;     /* stack phone + email */
  justify-content: center;
	margin-bottom: 10px;
}


h1, h2 { font-weight: normal; }
.text {font-family: PTSans; font-size: 22px; text-decoration: none; margin-bottom: 7px;}
.bld {font-family: PTBold; font-size: 22px; text-decoration: none; }
.text_23 {font-family: PTSans; font-size: 23px; text-decoration: none; margin-bottom: 15px; }
.bld_22 {font-family: PTBold; font-size: 22px; text-decoration: none; }
.bld_23 {font-family: PTBold; font-size: 23px; text-decoration: none; }
.hh {margin: 30px 0px 20px 0px; text-align: center; font-family: PTSans-Bold; font-size: 34px; color:#C40000; transform: scale(.85, 1);}
.hh-gray {font-family: PTBold; font-size: 34px; color:#404040; }
.hh-gray-center {font-family: PTBold; text-align: center; font-size: 34px; color:#404040; }
.hh2 {text-align: center; font-family: PTBold; font-size: 30px; color:#C40000; }
.hh2-roboto {text-align: center; font-family: PTSans-Bold; font-size: 30px; color:#C40000; transform: scale(1, 1.1)}
.hh3 {font-family: PTBold; font-size: 26px; color:#404040; padding-bottom: 7px; }
.hh4 {font-family: PTSans-Bold; font-size: 24px; color:#404040; }
.hh5 {font-family: PTBold; font-size: 24px; color:#404040; }
.hh5_bi {font-family: PTSans-BoldItalic; font-size: 24px; color:#404040; }


div.center {
	position: fixed; 
	align-self: center;
	top: 0; 
	height: 100%; 
  	left: 50%;
  	transform: translateX(-50%);
	width: 1200px;
	max-width: 100%;
	background-color: #dbdcde; 
	box-shadow: 0px 0px 35px rgba(50,50,50,1); 
	z-index: -1;
}


div.bl
{
	position: fixed; 
	top: 0; 
	left: 0; 
	background-size: 100% 100%; 
	height: 100vh;
	z-index: -2;
	
}

div.br 
{
	position: fixed; 
	top: 0; 
	right:  0; 
	background-size: 100% 100%; 
	height: 100vh;
	z-index: -2;	
}


div.ttp 
{ 
	left: 50%; 
	margin-left: -550px; 
	width: 1200px;
}
				
		
hr 
{
	border: none; 
	background-color:#ffffff; 
	color:#ffffff; 
	height: 2px; 
}

a:hover 
{
	color: #f26522;
}

#toTop {
	display: none; 
	position: fixed; 
	bottom: 20px; 
	left: 50%; 
	margin-left: 620px; 
	z-index: 99; 
	font-family: PTSans; 
	font-size: 50px; 
	border: none; 
	outline: none;
	background-color: red; 
	color: white; 
	cursor: pointer; 
	padding: 19px  8px 0px 7px; 
	border-radius: 4px; 
	text-align: center; 
	line-height: 0.5; 
	transform: scale(1.3, 1);
}

#toTop:hover 
{ 
	background-color: #69E5FA;
}


.seeMore 
{
	text-decoration: none;
	font-family: Roboto-Cond; 
	font-size: 22px; 
	background-color: blue; 
	color: white; 
	cursor: pointer; 
	padding: 10px 15px 10px 15px; 
	border-radius: 4px;
}

.seeMore:hover 
{ 
	background-color: #69E5FA;
	color: darkblue;
}


@media (max-width: 1350px) {
  #toTop {
    left: unset;
    margin-left: 0px;
	right: 20px;
	
  }
}

@media (max-width: 1190px){
	div.bl,
	div.br {
		
		display: none;
	}
}

@media (max-width: 1090px) {
  .button, .button-about, .quote-button {
	  padding: 4px 10px;
  }
  .logo img {
	  width: 170px;
  }
}

@media (max-width: 1015px) {
  .button, .button-about, .quote-button {
	font-size: 21px;
  }
	.info-and-nav {
  padding: 0px 0px 15px 0px;
  }
  .company-info {
  padding: 12px 0px 0px;
  }
  .nav-bar {
  margin: 15px 0px 10px 0px;
}
    .logo {  
    padding: 7px 0px 0px 0px;
}
  .logo img {
	 width: 150px;
  }
}

@media (max-width: 940px) {
  .header-container-full {
    display: none;
  }
	
  .header-container-m {
    display: block;
  }
  .company-info {
    grid-template-columns: 1fr; /* Switch to single column */
    text-align: center; /* Center content */
  }
.logo-m {  
    padding: 8px 0px 0px 0px;
}
  .name, .phone {
    justify-self: right;
  }
}

@media (max-width: 820px) {
  .main-container-buttom {
    display: none;
  }
	.main-container-buttom-m {
    display: block;
  }
}

@media (max-width: 750px) {
  .pict-dom, .button-about{
    display: none;
  }
}

@media (max-width: 600px) {
  .nav-bar-bottom {
   font-size: 22px;
  }
  .hh {
	margin: 25px 0px 15px 0px;
  }
}

@media (max-width: 560px) {
  .main-container {
   padding: 10px 25px 10px 25px;
  }
  .top-header-m {
  height: 75px;
  }
  .logo-m img {
	 width: 90px;
  }	
	.name, .quote-button {
    display: none;
  }
  .button, .button-about, .quote-button {
	padding: 2px 8px;
	font-size: 20px;
  }
  .company-info-m {
   padding: 0px;
  }
  .phone-button {
  font-size: 30px;
  }
  .nav-bar-bottom {
   font-size: 20px;
  }
.mail-button {
  font-size: 20px;
  }
}

@media (max-width: 500px) {
.service-container {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 0px;
   padding: 0;
  }
 .nav-bar-m {
  /* flex-wrap: nowrap; */
   gap: unset;
}
.button, .button-about, .quote-button {
    border: 1px solid #ffffff; 
    border-radius: 3px;
  }
   .about-bottom {
	display: none;
	}
  .hh {
	font-size: 32px;
	margin: 20px 0px 10px 0px;
	}
}

@media (max-width: 400px) {
.main-container-gallery {
  padding: 10px 10px 10px 10px;
  }
}

@media (max-width: 385px) {
  .main-container {
   padding: 10px 20px 10px 20px;
  }
  
 
  .button, .button-about, .quote-button {
    
	font-size: 19px;
    padding: 1px 6px;
  }
  .hh {
	font-size: 30px;
  }
  .hh2-roboto {
	font-size: 28px;
  }
  .hh3 {
	font-size: 24px;
  }
  
  .mail-button {
  font-size: 18px;
  }
}