@charset "UTF-8";
html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  font-family: Sans-Serif;
  margin: 0px;
}  
#margin {border: 500px;}
     /*nav style*/
nav {
  background : radial-gradient(lightgray, black);
  font-family: Sans-Serif;
  color: white;
  text-align: center;
  margin-bottom: 10px;
}
.margin {margin: 10px;}
nav button {
  font-size: 11px;
}
.icon i {
  color: #e2e1e1;
  margin: 1em 10px 3px ;
  font-size: 14px;
}
.dropdown .fa-bars {
  color: #202B59;
  font-size: 2em;
  margin-right: 10px;
}
.dropdown button, .link a, button { 
  background: green;
  margin: 3px;
  padding: 2px;
  border-radius: 7px;
   background: linear-gradient(to bottom, #e2e2e2 0%, #dbdbdb 50%,    #d1d1d1 51%, #fefefe 100%);
  color:#4f4f4f;
  font-weight: bold;
  text-decoration: none;
  outline: none;
} 

.dropdown {
 position: relative;
 display: inline-block;
}
.dropdown-content {
 display: none;
  position: absolute;
  background-color:#d3d3d3ed;
  min-width: 150px;
  box-shadow: 0 8px 13px 0 #d3d3d3bf;
  z-index: 1;
  overflow: auto;
  height: px;
  border-radius: 12px;
}
.dropdown-content a {
  color: black;
  padding: 12px 6px;
  text-decoration: none;
  display: block;
}
.dropdown-content h5 {
  color: tomato; margin: 10px 0 0;
}
.dropdown-content a:hover {
  background-color: #cecbcb;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown .dropbtn:hover, button.link:hover, button.link:hover a, .intro button:hover, button:hover {
  background: black;
  color: white;
}

#menu {
  display: flex; 
  align-items: flex-start;
}
.logo_link {
  width: 40%;
  margin-left: 5px;
}
.bullet {color: skyblue;
         font-weight: bold;
}
.script_con {
  margin-right: auto;
  margin-left: auto;
  align-self: center;
  color: #202B59;
}
.menu .dropdown-content {
  right: 0;
}

#transition {
  width: 100%;
  background: black;
  color: white;
  display: flex;
  height: 200px;
  margin-top: 10px;
}

#news  {
  display: flex;
  background: red;
  width: 100%;
  color: white;
}
.big {width: 85%;
  display: flex;
  align-items: flex-end;
}
.small {width: 15%;}
.intro { 
 
        text-align: center; 
        border-radius: 30px;
        color: white; 
       font-size: 1.2em;
        margin:2px; 
        padding: 10px;
        background:  radial-gradient(red,  rgb(140,16,16));;
}

h1 { color: gray;
     text-align: center;
     font-size: 1.8em;
     text-shadow: 1px 2.5px  #bebebec0;
}

.image_box_product{ 
  background: radial-gradient(gray, darkgray);
  color: #ecebeb; 
  text-align: center;
  font-size: 14px;
  width:98%;
  outline: solid thin gray;
  margin: 1%;
   border-radius: 1em;
  
}
.image_box_product img{
   border-radius: 1em;
}
#services {
  display: flex;
  flex-direction: row;
     flex-wrap: wrap;
     align-items: flex-start;
     background: lightgray;
     border-radius: 1em;
}
.image_box {
      color: #ecebeb; 
      margin-top: 0; 
      font-size: 13px; 
      background: radial-gradient(gray, darkgray);
      width: 46%;
      margin: 2%;
      box-sizing: border-box;
      border: solid thin gray;
      border-radius: 1em;
}
.image_box h2 {text-align: center;
}
.image_box h2, #reasons h2,.image_box_product h2 { margin: 5px 0; text-shadow: #2a2929 1px 1.8px;}
#reasons {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;]
  align-items: flex-start;
}
.reasons-content {
  width: 31%;
  margin: 1%;
  text-align: center;
   background: radial-gradient(red,  rgb(140,16,16));
   color: #eeeeee;
   border: thin solid gray;
   border-radius: 10px;
   font-size: 14px;
   padding: 3px;
}
.reasons-content p {
  color: white;
  font-weight: bold;
}
p.craftmen {
  margin: 10px; color: #5a5858; font-weight: bold; text-align: center;
}

.reasons-content img { 
  width: 100%;
  font-weight: bold;
  height: auto;
  border-radius: 10px
}

.contact {
  width: 100%;
 background: red radial-gradient(white, yellow);
margin: 0px;
}
.contact h2 {
  font-size: 2.3em; color: #fc7523; text-align: center; margin-top: 0
}
.contact img {
   margin: 2%;
   border-radius: 10px;
}
.bold {font-size: 1.5em;
      color: gray;
      font-weight: bold;
      text-align: center;
}

button.appointment {
  background: linear-gradient(to top, lightblue, skyblue);
  font-size: 1.2em;
  color: #6a6a6a;
  padding: 5px;
  margin: 0;
}
.dropdown {
  margin-right: auto;
  margin-left: auto;
}
a:link {text-decoration:none;}
footer a {color: white;}
footer em {
  color: #2e2e2e;
  font-weight: bold;
}
footer {
  background: black;
  color: white;
  margin-top: 0;
  font-size: 10px; text-align: center;
}
#on-screen {
  display: flex;
  flex-flow: column wrap;
   position: fixed;
  bottom: 43%;
  right: 3px;
  align-items: center;
  z-index: 500;
}

#on-screen button {
  color: dark;
}
button {
  text-transform: capitalize;
}
#demo {
  position:relative;
  width:100%;
  margin:0 auto;
  height: 200px;
}

#demo img {
  position:absolute;
  left:0;
  width: 100%;
  height: 200px;
  /*-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;*/
}

@keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#demo img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-delay: 5s;
animation-direction: alternate;
}

.copyright:after { 
  content: " 2026";
  
}

.icon_wrapper {
  text-align: center;
}
.icon_wrapper i {margin: 10px;}
.button_wrapper {
font-size: 1px;
  text-align: center;
}
.button_wrapper button {
  font-size: 12px;
}

  table, th, td {
    border: 1px solid black; Sets a solid 1px black border on all table elements */
  }
  table {
    border-collapse: collapse; /* Collapses the borders into a single line */
    width: 100%;  Optional: Makes the table span the width of its container */
  }
  th, td {
    padding: 8px; /Optional: Adds spacing between content and cell border */
    text-align: left; /]Optional: Aligns text to the left /
  }