* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
body {
max-width: 1200px;
margin: 0 auto;
color: #000;
background: #FFF;
font-family: arial, calibri, Times New Roman, serif, sans-serif; 
font-style: normal;
font-weight: normal
}
 
img , form input, form textarea {
max-width: 100%;
}

header {
width: 100%;
background: #ffffff;
float: left;
}
nav {
width: 100%;
background: #FFF;
float: left;
display: table;
}

header img {
float: left;
padding: 1.4% 0% 1.4% 0%;
box-shadow:none
}
section.content-background {
width:100%;
background: #ffffff;
float: left;
}
section.introduction {
width: 80%;
float: left;
padding: 0 10%
}
/* 2 column set up */
section.left {
width: 42.5%;
padding:1.4% 0% 1.4% 0%;
float: left;
}
section.right {
width: 42.5%;
padding: 0 5% 0 2.5%;
float: left;
}
section.single-column {
width: 80%;
background: #ffffff;
padding: 0 10%;
float: left;
}
footer {
width: 100%;
background: #fff;
float: left
}
h1 {
font-style: lite;
font-weight:200;
font-size: 22px;
text-align: center;
color:#888;
line-height: 1.5;
text-indent: 10px ;
padding:2% 0% 2% 0%;
text-shadow: None}

h2 {
font-style: italic;
font-weight:400;
font-size: 26px;
text-align:center;
color: #000;
line-height: 1.5;
padding:2% 0% 2% 0%;
text-shadow: None}

h3 {
font-style: lite;
font-weight:300;
font-size: 20px;
text-align:left;
color: #333;
line-height: 1.5;
padding:2% 0% 2% 0%;
text-shadow: None}

h4 {
font-style: lite;
font-weight:300;
font-size:19px;
text-align:left;
color: #222;
line-height:1.5;
padding:2% 0% 2% 0%;
text-shadow: None}

h5 {
font-style: lite;
font-weight:300;
font-size: 18px;
text-align:left;
color: #222;
line-height:1.5;
padding:2.5% 2.5% 2.5% 2.5%;
text-shadow: None}


h6 {
font-size: 24px;
text-align:left;
color: #A7D347;
line-height: 1.5;
padding:2% 0% 2% 0%;
text-shadow: None}





.button {
        background-color: #008080;
        border: none;
        color: white;
        padding: 15px 8px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 5px 3px;
        cursor: pointer;
      }

/* BTN Start-Index */
.btn { border: none;  background-color: inherit;  padding: 14px 28px;  font-size: 16px;  cursor: pointer;  display: inline-block;}

/* Green */
.Who-Is-Cutting-My-Hair {   color: green;}

.Who-Is-Cutting-My-Hair:hover {  background-color: #04AA6D;  color: white;
}

/* Blue */
.Trading-Hours {  color: dodgerblue;}

.Trading-Hours:hover {  background: #2196F3;  color: white;
}

/* Orange */
.Normal-Prices {  color: orange;}

.Normal-Prices:hover {  background: #ff9800;  color: white;
}

/* Red */
.Special Offer {   color: red;}

.Special Offer:hover {   background: #f44336;   color: white;}

/* Gray */
.Contact Us {   color: black;}

.Contact Us:hover {  background: #FFF; color: white; }

/* BTN End-Index */


.buttonFlush {
  background-color: white; 
  color: black; 
  border: 2px solid #ff8000;
}

.buttonFlush:hover {
  background-color: #ff8000;
  color: white;
}

.buttonBlack {
  background-color: white; 
  color: black; 
  border: 1px solid #000;
}

.buttonBlack:hover {
  background-color: #000;
  color: white;
}




/* third example */
.call-outs-container {
  max-width: 1400px;
  margin: 40px auto 0 auto;
  }
.call-out {
  padding: 20px;
  box-sizing: border-box;
  border:0px #FFFFFF ;
  margin-bottom: 20px;
  flex-basis: 30%;
}
.call-out-2c{
  padding: 8px;
  box-sizing: border-box;
  border:0px #FFF none;
  margin-bottom: 8px;
  flex-basis:48%;
}


.call-out-2f9f9f9{
  padding: 8px;
  box-sizing: border-box;
  border:0.1px #E5E5E5 solid;
  margin-bottom: 8px;
  flex-basis:48%;
}

.call-out-2f0f8ff-f9f9f9{
  padding: 8px;
  box-sizing: border-box;
  border:0.1px #E5E5E5 solid;
  margin-bottom: 8px;
  flex-basis:48%;
}

.call-out-3c {
  padding: 10px;
  box-sizing:border-box;
  border:0.01px #E5E5E5 solid;
  margin-bottom: 10px;
  flex-basis: 30%;
}	

.call-out-featured-3c {
  padding: 9px;
  box-sizing:border-box;
  border:0.05px #FF8000 solid;
  margin-bottom: 9px;
  flex-basis: 32%;
}	

.call-out-3f2f2f2 {
  padding: 10px;
  box-sizing:border-box;
  border:0.01px #E5E5E5 solid;
  margin-bottom: 10px;
  flex-basis: 30%;
}	
.call-out-3dcf2eb {
  padding: 10px;
  box-sizing:border-box;
  border:0.01px #E5E5E5 solid;
  margin-bottom: 10px;
  flex-basis: 30%;
}	

.call-out-4c{
	padding:8px;
	box-sizing:border-box;
	border:0.05px #E5E5E5 none;
	margin-bottom:8px;
	flex-basis:22%;
	}	
.call-out-4f9f9f9{
	padding:8px;
	box-sizing:border-box;
	border:0.05px #E5E5E5 none;
	margin-bottom:8px;
	flex-basis:22%;
	}	
		
	
.call-out-5c{
	padding:5px;
	box-sizing:border-box;
	border:none #FFF none;
	margin-bottom:5px;
	flex-basis:18%;
	}	
.call-out-5f9f9f9{
	padding:5px;
	box-sizing:border-box;
	border:none #FFF none;
	margin-bottom:5px;
	flex-basis:18%;
	}		
	
.call-out-6c{
	padding:10px;
	box-sizing:border-box;
	border:0.3px #E5E5E5 solid;
	margin-bottom:10px;
	flex-basis:16%;
	}	
	
.call-out-6cc{
	padding:10px;
	box-sizing:border-box;
	border:0.1px #E5E5E5 solid;
	margin-bottom:10px;
	flex-basis:16%;
	}		
	
.call-out-7c{
	padding:5px;
	box-sizing:border-box;
	border:0.1px #E5E5E5 solid;
	margin-bottom:5px;
	flex-basis:13%;
	}	
	
@media (min-width: 900px) {
  .call-outs-container {
    display: flex;
    justify-content: space-between;
  }
}
	
.call-out-2c:nth-child(1){background-color:#FFF;}
.call-out-2c:nth-child(2){background-color:#FFF;}

.call-out-2f9f9f9:nth-child(1){background-color:#f9f9f9;}
.call-out-2f9f9f9:nth-child(2){background-color:#f9f9f9;}

.call-out-2f0f8ff-f9f9f9:nth-child(1){background-color:#f0f8ff;}
.call-out-2f0f8ff-f9f9f9:nth-child(2){background-color:#f9f9f9;}

.call-out-3c:nth-child(1) {background-color: #fff;}
.call-out-3c:nth-child(2) {background-color: #fff;}
.call-out-3c:nth-child(3) {background-color: #fff;}

.call-out-featured-3c:nth-child(1) {background-color: #fff;}
.call-out-featured-3c:nth-child(2) {background-color: #fff;}
.call-out-featured-3c:nth-child(3) {background-color: #fff;}

.call-out-3dcf2eb:nth-child(1) {background-color: #dcf2eb;}
.call-out-3dcf2eb:nth-child(2) {background-color: #dcf2eb;}
.call-out-3dcf2eb:nth-child(3) {background-color: #dcf2eb;}


.call-out-3f2f2f2:nth-child(1) {background-color: #f2f2f2;}
.call-out-3f2f2f2:nth-child(2) {background-color: #f2f2f2;}
.call-out-3f2f2f2:nth-child(3) {background-color: #f2f2f2;}

.call-out-4c:nth-child(1) {background-color: #FFF;}
.call-out-4c:nth-child(2) {background-color: #FFF;}
.call-out-4c:nth-child(3) {background-color: #FFF;}
.call-out-4c:nth-child(4) {background-color: #FFF;}

.call-out-4f9f9f9:nth-child(1) {background-color: #f9f9f9;}
.call-out-4f9f9f9:nth-child(2) {background-color: #f9f9f9;}
.call-out-4f9f9f9:nth-child(3) {background-color: #f9f9f9;}
.call-out-4f9f9f9:nth-child(4) {background-color: #f9f9f9;}


.call-out-4cc:nth-child(1) {background-color: #FFF;}
.call-out-4cc:nth-child(2) {background-color: #FFF;}
.call-out-4cc:nth-child(3) {background-color: #FFF;}
.call-out-4cc:nth-child(4) {background-color: #FFF;}


.call-out-5c:nth-child(1) {background-color: #FFF;}
.call-out-5c:nth-child(2) {background-color: #FFF;}
.call-out-5c:nth-child(3) {background-color: #FFF;}
.call-out-5c:nth-child(4) {background-color: #FFF;}
.call-out-5c:nth-child(5) {background-color: #FFF;}

.call-out-5f9f9f9:nth-child(1) {background-color: #f9f9f9;}
.call-out-5f9f9f9:nth-child(2) {background-color: #f9f9f9;}
.call-out-5f9f9f9:nth-child(3) {background-color: #f9f9f9;}
.call-out-5f9f9f9:nth-child(4) {background-color: #f9f9f9;}
.call-out-5f9f9f9:nth-child(5) {background-color: #f9f9f9;}

.call-out-6c:nth-child(1) {background-color: #FFF;}
.call-out-6c:nth-child(2) {background-color: #FFF;}
.call-out-6c:nth-child(3) {background-color: #FFF;}
.call-out-6c:nth-child(4) {background-color: #FFF;}
.call-out-6c:nth-child(5) {background-color: #FFF;}
.call-out-6c:nth-child(6) {background-color: #FFF;}

.call-out-6cc:nth-child(1) {background-color: #fefefe;}
.call-out-6cc:nth-child(2) {background-color: #fefefe;}
.call-out-6cc:nth-child(3) {background-color: #fefefe;}
.call-out-6cc:nth-child(4) {background-color: #fefefe;}
.call-out-6cc:nth-child(5) {background-color: #fefefe;}
.call-out-6cc:nth-child(6) {background-color: #fefefe;}

.call-out-7c:nth-child(1) {background-color: #FF8000;}
.call-out-7c:nth-child(2) {background-color: #FF8000;}
.call-out-7c:nth-child(3) {background-color: #FF8000;}
.call-out-7c:nth-child(4) {background-color: #FF8000;}
.call-out-7c:nth-child(5) {background-color: #FF8000;}
.call-out-7c:nth-child(6) {background-color: #FF8000;}
.call-out-7c:nth-child(7) {background-color: #FF8000;}

.call-out:nth-child(1) {background-color: #FFF;}
.call-out:nth-child(2) {background-color: #FFF;}
.call-out:nth-child(3) {background-color: #FFF;}

.call-out-a:nth-child(1) {background-color: #009D00;}
.call-out-a:nth-child(2) {background-color: #FF0000;}
.call-out-a:nth-child(3) {background-color: #7D05AB;}

hr {
color : #000040;
background-color : #999;
height: 1px;
width: 60%;
margin: 0 auto
}

h1 a {color: #000; text-decoration: none; }
p a {text-decoration: none; } 
a {text-decoration: none; } 

.custom {
 font-family: arial;
 color: #fa0905;
 font-size:20px;
}

.customFF5000 {
font-family: 'Poppins', sans-serif;
font-style: lite;
font-weight: 300;
font-size:24px;
text-align:center;	
color: #FF5000;
}

.links-australia {font-family:coolvetica, serif, sans-serif;text-align: center; font-size:15px;}

.links-australia-FF8000 {font-family:coolvetica, serif, sans-serif; text-align: center; font-size:15px; color: #FF8000; }

.text-align {text-align: center;}

.Barbers-5c {background-color:#16a67d; color:#FFF; font-size: 12px; border:1px solid black; margin: 5px; padding: 5px;}
.Hair-Salons-5c {background-color:#16a67d; color:#FFF; font-size: 12px; border:1px solid black; margin: 5px; padding: 5px;}
.Hairdressers-5c {background-color:#16a67d; color:#FFF; font-size: 12px; border:1px solid black; margin: 5px; padding: 5px;}
.Home-Hairdressers-5c {background-color:#16a67d; color:#FFF; font-size: 12px; border:1px solid black; margin: 5px; padding: 5px;}
.Mobile-Hairdressers-5c {background-color:#16a67d; color:#FFF; font-size: 12px; border:1px solid black; margin: 5px; padding: 5px;}
.Haircutting-is-an-art {background-color:#110487; color:#FFF; font-size: 18px; text-align : center; border:1px solid black; margin: 10px; padding: 10px;}

 .button-a {
        background-color: #008080;
        border: none;
        color: white;
        padding: 15px 8px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        margin: 4px 2px;
        cursor: pointer;
      }
	
.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4{
  background-color: white; 
  color: black; 
  border: 2px solid #888;
}

.button4:hover {
  background-color: #888;
  color: white;
}

.button5 {
  background-color: white; 
  color: black; 
  border: 2px solid #262626;
}

.button5:hover {
  background-color: #262626;
  color: white;
}

.button6 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button6:hover {
  background-color: #4CAF50;
  color: white;
}

.button7 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button7:hover {
  background-color: #008CBA;
  color: white;
}

.button8 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button8:hover {
  background-color: #f44336;
  color: white;
}

.button9 {
  background-color: white; 
  color: black; 
  border: 2px solid #888;
}

.button9:hover {
  background-color: #888;
  color: white;
}

.button10{
  background-color: white; 
  color: black; 
  border: 2px solid #262626;
}

.button10:hover {
  background-color: #262626;
  color: white;
}

.button11{
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button11:hover {
  background-color: #4CAF50;
  color: white;
}

.button12{
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button12:hover {
  background-color: #008CBA;
  color: white;
}

.button13{
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button13:hover {
  background-color: #f44336;
  color: white;
}


.button14{
  background-color: white; 
  color: black; 
  border: 2px solid #888;
}

.button14:hover {
  background-color: #888;
  color: white;
}

.button15{
  background-color: white; 
  color: black; 
  border: 2px solid #262626;
}

.button15:hover {
  background-color: #262626;
  color: white;
}

.button16{
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button16:hover {
  background-color: #4CAF50;
  color: white;
}

.button17{
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button17:hover {
  background-color: #008CBA;
  color: white;
}

p {
font-family: calibri, sans-serif; 
font-size : 15px;
text-align : left;
text-indent : 0.00px ;
line-height: 1.5;
padding: 2% 2%;
 }
 
p a {
color:	#a65c00
}

section.left img,  section.right img, section.single-column img {
margin: 4% 4% 4% 4%;
border: none;
box-shadow: none; 
padding: 4% 4% 4% 4%;
}
footer p {
font-family: calibri, sans-serif; 
color: #555;
font-size : 12px;
text-align : center;
padding: 0 0 .5% 0} 

footer p a {
color: #a65c00}


	/* Base info box styles (used in all column types) */
    .info-box {
      background-color: #f5f5f5;
      color: #000;
      font-size: 14px;
      text-align: center;
      padding: 15px;
      width: 100%;
      max-width: 300px;
      box-sizing: border-box;
      border: 1px solid #ddd;
      border-radius: 8px;
      margin: 0 auto 20px auto;
    }

    /* URL formatting that allows long text to wrap */
    .url-box {
      word-wrap: break-word;
      overflow-wrap: break-word;
      display: inline-block;
      max-width: 100%;
      color: inherit;
    }

    .phone-link {
      color: #000;
      text-decoration: none;
    }

    .phone-link:hover {
      text-decoration: underline;
    }

    /* 1-column layout */
    .columns-1 {
      display: block;
    }

    /* 2-column layout */
    .columns-2 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }

    .columns-2 .info-box {
      max-width: 45%;
    }

    /* 3-column layout */
    .columns-3 {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }

    .columns-3 .info-box {
      max-width: 30%;
    }

    /* Responsive fallback: stack columns on smaller screens */
    @media (max-width: 768px) {
      .columns-2 .info-box,
      .columns-3 .info-box {
        max-width: 100%;
      }
    }
	
	/* Container for the form */
 .styled-form {
      max-width: 800px;
      margin: 40px auto;
      padding: 30px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
      font-size: 16px;
      line-height: 1.5;
      color: #333;
    }

    .styled-form label {
      display: block;
      margin-top: 20px;
      font-weight: bold;
    }

    .styled-form input[type="text"],
    .styled-form input[type="email"],
    .styled-form input[type="tel"],
    .styled-form input[type="url"],
    .styled-form select,
    .styled-form textarea {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-sizing: border-box;
    }

    .styled-form input:focus,
    .styled-form select:focus,
    .styled-form textarea:focus {
      border-color: #0077cc;
      outline: none;
    }

    .styled-form fieldset {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
      margin-top: 20px;
      background: #f9f9f9;
    }

    .styled-form legend {
      font-weight: bold;
      padding: 0 10px;
      color: #333;
    }

    .styled-form button[type="submit"] {
      margin-top: 30px;
      padding: 12px 25px;
      font-size: 16px;
      font-weight: bold;
      background-color: #0077cc;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    .styled-form button[type="submit"]:hover {
      background-color: #005fa3;
    }

    @media (max-width: 600px) {
      .styled-form {
        padding: 20px;
      }
    }