@charset "UTF-8";


/*

grren color : 4BBB2A

*/


:root {
--blue:#007bff;
--indigo:#6610f2;
--purple:#6f42c1;
--pink:#e83e8c;
--red:#dc3545;
--orange:#fd7e14;
--yellow:#1c447d;
--green:#28a745;
--teal:#20c997;
--cyan:#17a2b8;
--white:#fff;
--gray:#6c757d;
--gray-dark:#343a40;
--primary:#1c447d;
--secondary:#6c757d
--success:#28a745;
--info:#17a2b8;
--warning:#1c447d;
--danger:#dc3545;
--light:#f8f9fa;
--dark:#343a40;
--breakpoint-xs:0;
--breakpoint-sm:576px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px;
--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
}

*,::before,::after {
box-sizing:border-box
}

html {
font-family: "Roboto", sans-serif;
line-height:1.15;
-webkit-text-size-adjust:100%;
-webkit-tap-highlight-color:rgba(0,0,0,0);
font-style: normal;
}

body {
margin:0;
font-family: "Roboto", sans-serif;
font-size:1.3rem;
font-weight:400;
line-height:1.5;
color:#212529;
text-align:left;
background-color:#fff;
font-style: normal;
}

#mainNav {
transition:.4s;
padding-top: 15px;
padding-bottom: 15px
}

.p-top {
margin-top:75px
}

.sidenav {
height:100%;
width:0;
position:fixed;
z-index:1050;
top:0;
left:0;
background-color:#111;
overflow-x:hidden;
padding-top:60px;
transition:.5s
}

.sidenav a {
padding:8px 8px 8px 32px;
text-decoration:none;
font-size:25px;
color:#818181;
display:block;
transition:.3s;
text-align:center
}

.sidenav a:hover {
color:#f1f1f1
}

.sidenav .closebtn {
position:absolute;
top:0;
right:25px;
font-size:36px;
margin-left:50px
}

#main {
transition:margin-left .5s;
padding:20px
}

.footerTableStyle {
	float: right;
}

#snackbar {
  display: block;
  visibility: hidden;
  margin: 0 auto;
  min-width: 50%;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  border: 4px double white;
  padding: 16px;
  position: fixed;
  z-index: 1;

  bottom: 30px;
  font-size: 17px;
  opacity: 0.8;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 9.5s;
  animation: fadein 0.5s, fadeout 0.5s 9.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@media screen and (max-height: 450px) {
.sidenav {
padding-top:15px
}

.sidenav a {
font-size:18px
}
}

.nav-item {
	margin-right: 15px;
}
.nav-link,.navbar-brand,.navbar-toggler {
color:#fff;
letter-spacing:2px;
font-weight:600
}

.navbar-brand:hover {
color:#fff
}

.nav-link:hover {
color:#fff;
text-decoration:underline
}

.bg-custom-navbar {
background-color:#2a67bb
}

.dropdown-item:hover {
background-color:#d7970f
}

.toggler-icon {
border:4px double #fff;
border-radius:4px;
padding:2px
}

button:focus {
outline:none
}

.hero-image {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/hero.jpg);
height:100vh;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
position:relative
}

.dummy-hero-image {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../images/hero.jpg);
height:45vh;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
position:relative
}

.hero-text {
text-align:center;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
width:85%;
}

.hero-text h1 {
margin-top:30px;
font-size:64px
}

.hero-text button {
border:none;
outline:0;
display:inline-block;
padding:10px 25px;
color:#000;
background-color:#ddd;
text-align:center;
cursor:pointer
}

.hero-text button:hover {
background-color:#555;
color:#fff
}

#about-us {
min-height: 75vh
}

#dummyPage {
min-height: 50vh
}

.timeline {
position:relative;
max-width:1200px;
margin:0 auto
}

.timeline::after {
content:'';
position:absolute;
width:6px;
background-color:#000;
top:0;
bottom:0;
left:50%;
margin-left:-3px
}

.timeline-container {
padding:10px 40px;
position:relative;
background-color:inherit;
width:50%
}

.timeline-container::after {
content:'';
position:absolute;
width:30px;
height:30px;
right:-15px;
background-color:#fff;
border:4px solid #1c447d;
top:15px;
border-radius:50%;
z-index:1
}

.left {
left:0
}

.right {
left:50%
}

.left::before {
content:" ";
height:0;
position:absolute;
top:22px;
width:0;
z-index:1;
right:30px;
border:medium solid #fff;
border-width:10px 0 10px 10px;
border-color:transparent transparent transparent #fff
}

.right::before {
content:" ";
height:0;
position:absolute;
top:22px;
width:0;
z-index:1;
left:30px;
border:medium solid #fff;
border-width:10px 10px 10px 0;
border-color:transparent #fff transparent transparent
}

.right::after {
left:-16px
}

.content {
padding:20px 30px;
background-color:#fff;
position:relative;
border-radius:6px;
text-align:justify
}

@media screen and (max-width: 767px) {
	
	body {

	font-size:1.1rem;
	}
	
.timeline::after {
left:31px
}

.timeline-container {
width:100%;
padding-left:70px;
padding-right:25px
}

.timeline-container::before {
left:60px;
border:medium solid #fff;
border-width:10px 10px 10px 0;
border-color:transparent #fff transparent transparent
}

.left::after,.right::after {
left:15px
}

.right {
left:0
}

.footerTableStyle {
	float: none;
	margin: 0 auto;
}


}

#services {
min-height:100vh;
width:100%;
background-color:#eee
}

#news {
min-height:100vh;
width:100%;
background-color:#eee
}

.card {
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);
transition:.3s;
width:100%
}

.card:hover {
box-shadow:0 8px 16px 0 rgba(0,0,0,0.6)
}

.card-container {
padding:2px 16px;
min-height: 200px;
position: relative;
}
.card-container-footer {
position: absolute;
bottom: 5px;
right: 5px;
text-align: right;	
}

.card a:hover{
text-decoration: underline;
-webkit-text-decoration-color: black; /* Safari */  
text-decoration-color: black;
}

#back-to-top {
z-index:10000;
position:fixed;
bottom:30px;
right:10px;
display:none;
border:2px solid #000;
opacity:.5
}

.show {
display:block!important
}

#back-to-top:hover {
opacity:1
}

#contact {
width:100%;
/*
background:url(../images/contact.jpg);

background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover*/
background-color: #ccc
}

.form__group {
position:relative;
padding:15px 0 0;
margin-top:10px;
width:100%
}

.form__field {
font-family:inherit;
width:100%;
border:0;
border-bottom:3px solid #fff;
outline:0;
font-size:1.3rem;
color:#1c447d;
padding:7px 0;
background:transparent;
transition:border-color .2s
}

.form__field::placeholder {
color:transparent
}

.form__field:placeholder-shown ~ .form__label {
font-size:1.3rem;
cursor:text;
top:20px
}

.form__field:focus {
padding-bottom:7px;
font-weight:700;
border-bottom:3px solid #1c447d
}

.form__field:focus ~ .form__label {
position:absolute;
top:0;
display:block;
transition:.2s;
font-size:1rem;
color:#1c447d;
font-weight:700
}

.form__field:required,.form__field:invalid {
box-shadow:none
}

.form__label {
position:absolute;
top:0;
left:10px;
display:block;
transition:.2s;
font-size:1rem;
color:#1c447d
}

.font-color {
	color:#1c447d;
}
.form__field2 {
font-family:inherit;
width:100%;
border:3px solid #fff;
outline:0;
font-size:1.3rem;
color:#1c447d;
padding:14px 0;
background:transparent;
transition:border-color .2s
}

.form__field2::placeholder {
color:transparent
}

.form__field2:placeholder-shown ~ .form__label2 {
font-size:1.3rem;
cursor:text;
top:20px
}

.form__field2:focus {
padding-bottom:14px;
font-weight:700;
border:3px solid #1c447d
}

.form__field2:focus ~ .form__label2 {
position:absolute;
top:-10px;
display:block;
transition:.2s;
font-size:1rem;
color:#1c447d;
font-weight:700
}

.form__field2:required,.form__field:invalid {
box-shadow:none
}

.form__label2 {
position:absolute;
top:-10px;
left:10px;
display:block;
transition:.2s;
font-size:1rem;
color:#1c447d
}

.send-button {
color:#1c447d;
border-color:#1c447d
}
#quotes
{
min-height: 40vh;
width: 100%;
background-color: #ddd;
}

.blockquote {
font-size: 16px;	
}

#footer {
min-height:25vh;
width:100%;
background-color:#1c447d
}

.text-black {
color:#000!important;
}
.text-decoration-underline {
text-decoration: underline;	
}

@media only screen and (max-width: 767px) {
	.text-align-xs
	{
	text-align: center!important;
	}
	.hero-text h1, .dummy-hero-image h1 {
	font-size:32px
	}
	
	

}

#our-work
{
min-height: 100vh;	

}
.gallery-title
{
font-size: 36px;
color: #1c447d;
text-align: center;
font-weight: 500;
}

.port-image
{
width: 100%;
}

.gallery_product_img 
{
box-sizing: border-box;
padding: 5px;
}


#kitchen {
width:100%;
min-height: 100vh;
}

.product-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 95%;
margin: auto;
text-align: center;
font-family: arial;
}

.product-price {
color: grey;
font-size: 22px;
}

.product-card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
transition: 0.2s ease-in-out;
}

.product-card button:hover {

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

/* --------------------- */
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 120px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}

/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}

/* The Close Button */
.close {
color: white;
position: absolute;
top: 90px;
right: 10px;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}

.mySlides {
display: none;
}

.cursor {
cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

img {
margin-bottom: -4px;
}

.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

img.hover-shadow {
transition: 0.3s;
}

.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hiddenPost {
	display: none;
}

.showPostsButtonClass:disabled {cursor: not-allowed;}