@import url('https://fonts.cdnfonts.com/css/titillium');

*{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat',sans-serif;
}
.main{

    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(1.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh;
}
.navbar{
    width: 1200px;
    height: 75px;
    margin: auto;
}
.menu{
    width: 400px;
    float: left;
    height: 70px;
}

body {
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    font-family: 'Montserrat',sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('images/consult.jpg'); /* Background image */
    background-size:100%; /* Cover the entire viewport */
    background-position: center top; /* Center the background image vertically at the bottom */
    background-repeat: no-repeat; /* Do not repeat the background image */
    color: #fff;
    
}
/****************************************/
header {
    background-color: #282727;
    color: #fff;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    z-index: 1000;

    margin-top: -4.2cm;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 80%;
    animation: fadeInDown 1s ease;
}

.logo h1 {
    color: #ff7200;
    font-size: 24px;
    margin-bottom: 2cm;
    font-family: 'Titillium', sans-serif; 
}

.menu ul {
    list-style: none;
    display: flex;
    font-family: 'Titillium', sans-serif; 
}

.menu ul li {
    margin: 0 2px;
    font-family: 'Titillium', sans-serif; 
}

.menu ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    position: relative;
    transition: color 0.3s ease;
    font-family: 'Titillium', sans-serif; 
}

.menu ul li a:hover {
    color: #ff7200;
}

/* Add keyframe animation for fadeInDown */
@keyframes fadeInDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/*******************************************/
/*The nav bar w.j */
nav a {
  
    float:left ;
    display: block;
    color: #232323;
    text-transform: bold;
   
    padding: 14px 10px;
    text-decoration: none;
    margin-right: 7cm;
    margin-top: -1cm;
    margin-left: 2%;

}

header {
    
    height: 32px; ;
    background-color: #282727;
   
    color: #fff;
    text-align: center;
    padding: 1em 0;/* Reduced header height */
}

.contact-container {
    max-width: 650px;
    padding: 25px; /* Smaller padding for the container */
    background-color: rgba(214, 214, 214, 0.9);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin: 50px auto;
    margin-top: 10%;
    height: 488px;
    box-shadow: #292828;
    margin-left: 28%; /* Move the container to the right */
}

h1 {
    color: #FF8A1E;
    text-align: left;
    margin-top: 0.0cm;
    margin-left: 30%;
    font-family: 'Titillium', sans-serif; 
}

p {
    line-height: 1.5;
    color: #292828;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    font-family: 'Titillium', sans-serif; 
    margin-top: 2%;
}



form {
    margin-top: 2px;
    display: flexbox;
    flex-direction: column;
    width: 40%;
    height: 100%;
}



label {
    font-family: 'Montserrat',sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #393939;
     margin-bottom: 20px;
}

input,
textarea {
    padding: 8px; /* Smaller padding for the input fields */
    margin-top: 3px; /* Reduced margin for the input fields */
    border: 1px solid #fff;
    border-radius: 9px;
    font-size: 14px; /* Reduced font size for the input fields */
    width: 100%;
    font-family: 'Montserrat',sans-serif;
}

input[type="submit"] {
    background-color: #333;
    color: #fff;
    cursor: pointer;
    width: 98%;
    margin-left: 5%;
}

input[type="submit"]:hover {
    background-color: #555;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.image-container {
    display: -webkit-flex ;
    justify-content:left;
    margin-top: 10px;
    margin-inline-start:20%  ;
}
.contact-image {
    width: 270px; /* Adjust the width as needed */
    border-radius: 20%;
    margin-bottom: 1px;
}
/*
.image-consult{
    display: -webkit-flex ;
    justify-content:center;
    margin-top: -30%;
    inline-size: 80%;
    margin-inline-start:37%  ;

}
*/



.get-in-touch {

    background-color: #959595f3;
    box-shadow: #232323;
    background-size: 100%;
    color: #fff;
    padding: 3px;
    margin: 22px 5% 0 5%;
    border-radius: 20px;
    margin-top: 13%;
    text-align: center;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15%;
    height: 13cm;
 
}

.get-in-touch h2 {
    margin-top: 10px;
    color: #ffffff;
    font-family: 'Titillium', sans-serif;  
    font-size: 45px;

}

.get-in-touch p {
    font-size: 18px;
    margin-top: 0.5%;
    padding: 0%;
    font-weight: normal;
    height: 1%;
    font-family: 'Titillium', sans-serif;  ;
    text-align: center;
}

.get-in-touch a {
    display:  flexbox;
    padding: 10px 20px;
    background-color: #c15f27;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.get-in-touch a:hover {
    background-color: #cecece;
   
}
/*//////////////////////////////////////////////////*/
/* ... Your existing styles ... */

.contact-container {
    /* ... Your existing styles ... */
    opacity: 0; /* Set initial opacity to 0 for the fade-in animation */
    transition: opacity 1s ease-in-out; /* Apply transition for opacity property */
}

.get-in-touch {
    /* ... Your existing styles ... */
    transform: translateX(-100%); /* Set initial position to slide in from the left */
    transition: transform 1s ease-in-out; /* Apply transition for transform property */
}

/* Add this hover effect for the "Get in Touch" button */
.get-in-touch a:hover {
    background-color: #cecece;
    transform: scale(1.1); /* Add a scale effect on hover */
}

/* Apply the animations when the elements come into view */
.contact-container.in-view {
    opacity: 1;
}

.get-in-touch.in-view {
    transform: translateX(0);
}

/****************************************/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.5s ease;
}

.logo h1 {
    color: #ff7200;
    font-size: 35px;
    font-family: Arial;
}

.menu ul {
    display: flex;
    list-style: none;
    font-family: 'Titillium', sans-serif; 
}

.menu ul li {
    margin-left: 30px;
    margin-top: -10px;
    font-family: 'Titillium', sans-serif; 
}

.menu ul li a {
    text-decoration: none;
    color: #fff;
    font-family: Arial;
    font-weight: bold;
    transition: 0.4s ease-in-out;
    margin-top: -2.3cm;
    font-family: 'Titillium', sans-serif; 
}

.menu ul li a:hover {
    color: #ff7200;
}

.btn {
    width: 100px;
    height: 40px;
    background: #ff7200;
    border: 2px solid #ff7200;
    margin-top: 13px;
    color: #fff;
    font-size: 15px;
    border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: 0.2s ease;
    cursor: pointer;
}

.btn:hover {
    color: #000;
}

/* Scrolled state styles */
.navbar.scrolled {
    margin-top: -2.0cm;
    background-color: #282727;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/****google map style ****
#map {
    height: 400%;
    width: 100%;

}
*/

/****location ****
.word1 {
    background: linear-gradient(90deg, rgba(169, 169, 169, 0.5), rgba(192, 192, 192, 0.5));
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    color: #282727;
    margin-left: 43% ;
    margin-top: 26%;
    margin-bottom: 30px;
    display: inline-block; /* Ensure the background only covers the text width 
}
*/

.locations {
    margin: 80px auto; /* Reduced top margin for smaller screens */
    width: 60%; /* Adjust the width as needed */
    display: flex;
    justify-content: space-around;
    margin-top: 1cm;
    margin-bottom: 4cm;
}

.location {
    text-align: center;
    margin-bottom: 15px; /* Adjust the bottom margin as needed */
    margin-right: 30px; /* Add space between boxes */
    margin-left: 30px;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(76, 76, 76, 0.51); /* Add box shadow */
    background-color: #d5d5d5;
    overflow: hidden;
    transform: translateY(0);
    opacity: 1;
    flex-direction: row;
    transition: transform 0.3s ease, opacity 0.3s ease;
    width: 55%; /* Adjust the width as needed */
}

.location:hover {
    transform: translateY(-5px);
    opacity: 0.9;
}

.location img {
    max-width: 80%;
    height: auto;
    border-radius: 26px;
    transition: transform 0.3s ease;
}

.location:hover img {
    transform: scale(1.1);
}

.locations h2 {
    font-size: 24px; /* Adjust the size as needed */
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #2a2929;
    margin-bottom: 30px;
}

.location h3 {
    margin-top: 15px;
    color: #282727;
    font-family: cursive;
    font-size: 16px;
}

.location h2{
  margin-top: 12%;
  color: rgb(135, 78, 8);
  font-size: 12.5px;
  font-style: normal;
  text-align: center;
  font-family: 'Titillium', sans-serif; 
}


.location p {
    font-size: 12px;
    font-family: 'Titillium', sans-serif;
    font-style: normal;
    display: inline-block; /* Corrected typo here */
  
    /* Additional styling if needed */
    margin: 5px; /* Example margin for spacing between phone numbers */
  }
/* Media Query for smaller screens */
@media screen and (max-width: 768px) {
    .locations {
        margin: 30px auto;
    }

    .location {
        flex-basis: calc(100% - 20px); /* Single box per row for smaller screens */
    }
}
/****Footer***/

.Footer {
    background-color: #44443b;
    box-shadow: #1f1f1f;
    color: #fff;
    margin-top: 10%;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribute space between the elements */
    position: relative; /* Fixed position */
    bottom: 0; /* Stick to the bottom */
    width: 97.3%; /* Full width */
    overflow: hidden;
    height: 32%;
}

.slogan {
    flex: 0 0 30%; /* Adjust the width as needed */
    text-align: left;
    margin-bottom: 20px; /* Add margin for spacing */
}

.slogan h3 {
    color: #ec7a1c;
    font-size: 36px;
}

.slogan p {
    color: #e6e4e0;
    font-size: 20px;
    text-align: left;
    
}

.ExtraLinks {
    flex: 0 0 30%; /* Adjust the width as needed */
    color: #ec7a1c;
    text-align: center;
}

.ExtraLinks a {
    display: block;
    margin-top: 10px;
    margin-right: 8%;
    margin-bottom: 10px;
    text-decoration: none;
    background-color: #ec7a1c53;
    border-radius: 8%;
    color: #e6e4e0;
    font-size: 18px;
    transition: color 0.3s;
    text-align: center;
}

.ExtraLinks a:hover {
    color: rgb(255, 119, 0);
}

.Address {
    flex: 0 0 30%; /* Adjust the width as needed */
    text-align: left;
}

.Address h2 {
    color: #ec7a1c;
    font-size: 29px;
    margin-bottom: 10px;
}

.address-line {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.address-line img {
    max-width: 30px;
    height: auto;
    margin-right: 10px;
}

.Address h1 {
    color: #ffffff;
    font-size: 16px;
    margin: 0;
}
.CopyRight p{
    margin-top: 35pc;
    color: #e6e4e0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 14px; /* Adjust the font size as needed */
    margin: 5px 0; /* Add some margin for spacing */
}
@media screen and (max-width: 600px) {
    /* Styles for screens smaller than 600px */
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
    /* Styles for screens between 601px and 1024px */
}