/* Softcrowd Ltd coding of 2024 */


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

body {
    font-family: Arial, sans-serif;

    line-height: 1.6;
}
h1{
    font-size: 2.5em;
    line-height: 1em;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}

  
h3{
color: #ad2626;

}

p{

    font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-weight: 400px;
  font-style: normal;
    font-size: 22px;
    padding-bottom: 40px;
}

p a {

    color: rgb(6, 140, 201);
    padding:0px;
    margin: 0px;
    display: inline;
    font-size: 22px;

}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 75px;
    background-color: rgba(51, 51, 51, 0.75); /* 50% opacity */
    z-index: 100;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    z-index: 9999;
}

/* Menu Styling */
ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    padding: 0;
}

li {
    margin: 0 5px;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
}

a {
    text-decoration: none;
    font-size: 16px;
    display: block;
    position: relative;
    padding: 10px 15px;
    color: white;
    transition: color 0.4s ease;
    white-space: nowrap;
    margin: 20px;
}

/* Original menu item text */
a::before {
    content: attr(data-original);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 1;
    transform: translateY(0);
}

/* Hover text */
a::after {
    content: attr(data-hover);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(220, 177, 36);
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    transform: translateY(-100%);
}

/* Hover Effect */
li:hover a::before {
    transform: translateY(100%);
    opacity: 0;
}

li:hover a::after {
    transform: translateY(0);
    opacity: 1;
}


ul.main-menu li {
    display: inline-block; /* Let the li width adjust to its content */
}

ul.main-menu a {
    display: block;
    padding: 10px 15px; /* Adjust padding for desired size */
    white-space: nowrap; /* Prevents wrapping of text */
}

/* General Section Styling */
section {
    display: flex;
    justify-content: center;
    align-items: center;
}

#section4 {
    background-color: rgb(255, 98, 0);
    color: #fff;
}
#section4 h3{
    color: #fff;
}


#section5 {
    background-color: #5ebb13;
}

#footer {
    background-color: #2c2a2a;
}

#section0{

background-color:#ff8c00;
height: 400px;
padding-bottom: 0px;

}


    #section00 {
        background: linear-gradient(to bottom, #ff8c00, #ad2626); /* Fades from orange to white */
        
    }


#section0 .container .header-text-container h2{
    color: #fff;



}

#section00 .container .text-container {
padding-top: 0px;
justify-content:flex-start;

}

#section00 .container .text-container h1{
    color: #000000;
    margin-left:5%;
    margin-right:5%;



}

#section00 .container .text-container p{
    color: #000000;
    margin-left:5%;
    margin-right:5%;
    margin-bottom: 50px;

}


#section5 .container .contact-text-container {
    color: #fff;


}

.logo {
    width: 900px;
    height: 125px;
    background-image: url('../images/logov2.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;

}



.container {
    display: flex;
    width: 100%; /* Occupy full width of section */
    height: 100%; /* Occupy full height of section */
    justify-content: space-between;
    flex-direction: row; /* Default layout is side-by-side */
}

/* Text and Image Containers should take 50% width each */
.text-container, .zoom-image-container {
    width: 50%;
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    box-sizing: border-box;
  
}

.wide-text-container {
    width: 100%;
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    box-sizing: border-box;
  
}

/* Only apply slanted bottom to specific wide-text-containers */
.slanted {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); /* Creates the slanted effect */
}

.slanted-top {
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); /* Top-left is slanted down */
}


.header-text-container {
    width: 100%;
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  
}

.contact-text-container {
    width: 100%;
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  
}

/* Container with cover image */

/* General Image Container for the zoom effect */
.zoom-image-container {
    width: 50%;   /* Ensures the image takes the full width of its container */
    display: flex;
    align-items: center; /* Vertically center the circles */
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    overflow: hidden; /* Hides overflow when zoomed */
    position: relative; /* Relative positioning for internal positioning */
    background-color: #f4f2f2;
}

/* Circle container to wrap image and caption */
.circle-container {

    width: 70%; /* Each circle takes 45% of the container's width */
    flex-direction: column; /* Stack the circle and caption vertically */
    align-items: center; /* Center both horizontally */
    position: relative;
    padding: 20px;
}

.book-image {
    width: 400px; /* Each circle takes 45% of the container's width */
    height: 600px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.6s ease; /* Smooth zoom effect */
    margin: 40px;
    border-radius: 5px;
    
}



.testimonial-container {
    width: 70%; /* Controls the width */
    flex-direction: column;
    align-items: center;
    position: relative;
    border-radius: 20px;
    padding: 20px;
    background-color: #f3f3f3;
    margin-bottom: 50px;
    position: relative; /* To position the pseudo-elements */
}



.small-circle-container {

    width: 40%; /* Each circle takes 45% of the container's width */
    flex-direction: column; /* Stack the circle and caption vertically */
    align-items: center; /* Center both horizontally */
    position: relative;
}

/* Circle image styles with inner drop shadow */
.circle-image {
    width: 100%; /* Each circle takes 45% of the container's width */
    padding-top: 100%; /* Maintain a square aspect ratio */
    background-color: #fa8100;
    background-size: cover;
    background-position: center;
    border-radius: 50%; /* Makes the shape a circle */
    position: relative;
    transition: transform 0.6s ease; /* Smooth zoom effect */
    
    /* Inner shadow */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25); /* Adjust shadow size and intensity */
}


/* Caption styles */
.caption {
    margin-top: 10px;
    text-align: center;
    font-size: 1.25em;
    font-weight: bold;
    color: #000000; /* Adjust the color for visibility */
}


/* Left aligned circle */
.testimonial-container.left {
    margin-left: 30%; /* Add space from the left edge */
}

/* Right aligned circle */
.testimonial-container.right {
    margin-right: 30%; /* Add space from the right edge */
}

/* Left aligned testimonial with a triangle */
.testimonial-container.left::after {
    content: "";
    position: absolute;
    bottom: -20px; /* Position the triangle below the container */
    left: 20px; /* Align the triangle more to the left */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #f3f3f3 transparent transparent transparent; /* Match the container's background color */
}

/* Right aligned testimonial with a triangle */
.testimonial-container.right::after {
    content: "";
    position: absolute;
    bottom: -20px; /* Position the triangle below the container */
    right: 20px; /* Align the triangle more to the right */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 0 20px;
    border-color: #f3f3f3 transparent transparent transparent; /* Match the container's background color */
}


/* Left aligned circle */
.circle-container.left {
    margin-left: 50%; /* Add space from the left edge */
}

/* Right aligned circle */
.circle-container.right {
    margin-right: 50%; /* Add space from the right edge */
}

/* Left aligned circle */
.small-circle-container.left {
    margin-left: 50%; /* Add space from the left edge */
}

/* Right aligned circle */
.small-circle-container.right {
    margin-right: 50%; /* Add space from the right edge */
}

/* The actual zoom effect on hover */
.circle-image:hover {
    transform: scale(1.02); /* Zooms in the image */
    transition: transform 0.6s ease; /* Smooth transition */
}


.text-container h1 {
    text-align: left; /* This will align the heading to the left */
    width: 100%; /* Ensure it takes the full width of the container */
    margin-bottom: 20px; /* Adjust spacing under the heading */
}

/* You can also align any other content in the text container */
.text-container p {
    text-align: left; /* Ensures the paragraph aligns with the heading */
}

/* Initial hidden state for h1 and p */
.text-container h1, 
.wide-text-container h2, 
.text-container p {
    opacity: 0;
    transform: translateY(20px); /* Start slightly lower */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.copyright{
    position: relative;
    font-size: .9em;
    padding: 20px;
    line-height: 20px;
    color: rgb(158, 157, 157);


}

.copyright a{
    padding:0px;
    margin: 0px;
    color: rgb(195, 194, 194);
    font-weight:400;
    display:inline;
    font-size: .9em;


}


@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px); /* Start 100px to the left */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* Move to its original position */
    }
}

/* Class to apply fade-in-left animation */
.fade-in-left {
    opacity: 0;
    transform: translateX(-100px); /* Ensure it starts 100px to the left */
    animation: fadeInLeft 1s forwards; /* Play the animation */
}

.fade-in-bottom {
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInBottom 1s forwards;
}

@keyframes fadeInBottom {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-top {
    opacity: 0;
    transform: translateY(-50px);
    animation: fadeInBottom 1s forwards;
}

@keyframes fadeInTop {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}






/* Hamburger Menu */
.hamburger {
    display: none;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}

/* Hamburger lines */
.hamburger div {
    width: 20px; /* Width of the lines inside the circle */
    height: 2px;
    background-color: #333;
    margin: 2px 0; /* Ensures spacing between lines */
    transition: all 0.3s ease;
}

/* Hamburger default state (no hover) */
.hamburger {
    transform: translateY(-50%) rotate(0deg); /* Initial position */
    transition: transform 0.5s ease; /* Smooth transition */
}

/* Rotate clockwise on hover */
.hamburger.rotate {
    transform: translateY(-50%) rotate(180deg); /* Rotate 180 degrees clockwise */
    transition: transform 0.5s ease;
}

/* Rotate back anti-clockwise on mouse leave */
.hamburger.rotate-back {
    transform: translateY(-50%) rotate(-180deg); /* Rotate 180 degrees anti-clockwise */
    transition: transform 0.5s ease;
}

/* Hamburger active state (when clicked, lines turn into a cross) */
.hamburger.active div:nth-child(1) {
    transform: rotate(45deg) translate(4.25px, 4.25px);
}

.hamburger.active div:nth-child(2) {
    opacity: 0; /* Hide the middle line */
}

.hamburger.active div:nth-child(3) {
    transform: rotate(-45deg) translate(4.25px, -4.25px);
}



/* Hamburger Menu */
.hamburger-menu {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100vh; /* Full height */
    background-color: rgba(51, 51, 51, 0.85); /* Dark background with transparency */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack items vertically */
    z-index: 100; /* Ensures it's above other content */
    opacity: 0;
    pointer-events: none; /* Prevent interaction when hidden */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Show the vertical menu when active */
.hamburger-menu.active {
    display: flex; /* Switch display to flex */
    flex-direction: column; /* Ensure vertical stacking */
    opacity: 1; /* Fade in */
    pointer-events: auto; /* Allow interaction */
    transform: translateY(0); /* Slide-in effect */
}

/* Vertical menu items */
.hamburger-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
    display:list-item;
}

.hamburger-menu li {
    margin: 20px 0; /* Space between vertical items */
    display:list-item;
}

.hamburger-menu a {
    text-decoration: none;
    font-size: 24px; /* Larger text for mobile */
    color: white;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.hamburger-menu a:hover {
    color: rgb(220, 177, 36); /* Hover effect */
}

.contact-form {
    transition: opacity 0.5s, transform 0.5s;
  }
  
  .messageSent {
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Adjust the duration and easing as needed */
  }
  
.contact-form {
    padding: 20px;
    border-radius: 8px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .form-group-inline {
    display: flex;
    gap: 10px; /* Adjust the gap between inline elements */
  }
  
  .name-field {
    flex: 1; /* Allow the fields to take equal width */
    position: relative;
    margin-bottom: 5px;
  }
  
  .name-field input {
    width: 100%;
    padding: 10px;
   
    background-color: #f5f5f5;
    color: #666;
    border-radius: 4px;
    margin-top: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
    outline: none;

  }
  
  .name-field input:focus {
    border-color: #007bff;
    background-color: #f5f5f5;
  }
  
  .name-field input:not(:placeholder-shown) + label,
  .contact-form textarea:not(:placeholder-shown) + label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25em;
  }
  
  .name-field input:placeholder-shown + label,
  .contact-form textarea:placeholder-shown + label {
    top: 0;
    transform: translateY(0);
    font-size: 18px;
  }
  
  .name-field:last-child {
    margin-left: auto;
  }
  
  .name-field:last-child input {
    margin-left: 0; /* Adjusted to 0 to keep it on the left side */
  }
  
  .name-field:last-child label {
    left: 20px; /* Adjusted to 10px to keep it on the left side */
    right: auto;
  }
  
  .form-group {
    position: relative;
    margin-bottom: 5px;
  }
  
  input[type="email"],
  input[type="tel"],
  input[type="text"],
  input[type="url"],
  textarea {
    width: 100%;
    padding: 30px;
    
    background-color: #f5f5f5;
    color: #666;
    border-radius: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
    outline: none;
    border: none;

    font-size: 1.5em;
  }
  
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="text"]:focus,
  input[type="url"]:focus,
  textarea:focus {
    border-color: #007bff;
    background-color: #ffffff;
  }
  
  label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25em;
    transition: all 0.3s ease-out;
    pointer-events: none;
    color: #919191;
  }
  
  input[type="email"]:focus + label,
  input[type="email"]:valid + label,
  input[type="tel"]:focus + label,
  input[type="tel"]:valid + label,
  input[type="text"]:focus + label,
  input[type="text"]:valid + label,
  input[type="url"]:focus + label,
  input[type="url"]:valid + label,
  textarea:focus + label,
  textarea:valid + label {
    top: 10;
    transform: translateY(0);
    font-size: 18px;
  }
  
  .checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .form-button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .form-button:hover {
    background-color: #0056b3;
  }

  .button-form {

    position:relative;
    width: 100%;
    padding: 15px 20px; /* Adjust the padding as needed */
    background-color: #fc6900;
    color: #fff; /* Text color */
    border: 0px solid #ffffff; /* Border color */
    border-radius: 10px 10px 10px 10px; /* 20px border-radius on the left side */
    font-size: 1.25em;
    overflow: hidden;
    margin-right:auto;
    left: 0px;
    transition: background-color 0.3s ease; /* Add the transition property */
  }
  
.button-form:hover {
    background-color: #ff5100; /* Adjust the color for hover state */
  }

/* Make sure to add Font Awesome CDN link in the <head> section */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between icons */
}

.social-icons a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #333; /* Dark mono color */
    color: #fff;
    font-size: 20px;
    border-radius: 50%; /* Makes the icon circular */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icons a {
    display: flex;
    width: 40px;
    height: 40px;
    background-color: #333;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    text-decoration: none;
}

.social-icons a:hover {
    background-color: #555;
}


/* Media Query for screen width less than 1400 */
@media (max-width: 1600px) {
 
 
   


}



/* Media Query for screen width less than 1024px */
@media (max-width: 1024px) {


    .logo{

        width: 500px;
        height:80px;
    }

    .main-menu {
        display: none;
    }

    .hamburger {
        display: flex;
        flex-direction: column; /* Ensures lines are stacked vertically */
    }


  


 


}


/* Mobile responsiveness - Stack containers vertically on smaller screens */
@media (max-width: 900px) {

    .logo{
    
        width: 400px;
        height:70px;
    }

    .imgheight{

        height: 70vh;
    }
    
        .container {
            flex-direction: column; /* Stack the containers vertically */
        }
    
        .text-container {
            order: 1; /* Ensure text is shown first */
            width: 100%; /* Full width */
        }
    
        .zoom-image-container {
            order: 2; /* Ensure image is shown second */
            width: 100%; /* Full width */
        }
    
        section {
            padding-bottom: 50px; /* Add padding at the bottom to avoid overlapping with the next section */
          /* Minimum height of the viewport */
            padding: 20px 0; /* Add padding to ensure separation between sections */
            height:auto;
        }

    
        #section0 .container .header-text-container h2{
            font-size: 1em;
        
        
        
        }
        .header-text-container{
            padding:20px;
            align-items: center;
    justify-content: center;
        }
        .header-text-container h2{
text-align: center;
        }
        .circle-container {
            width: 100%;
        }
        .small-circle-container {
            width:90%;
        }

        .testimonial-container {
            width: 90%; /* Controls the width */

        }
        .contact-text-container{
            padding:10px;
            padding-top:50px;
        }

        .copyright{
            margin-bottom: 0px;
            font-size: .9em;

        
        
        }

        /* Left aligned circle */
.testimonial-container.left {
    margin-left: 0%; /* Add space from the left edge */
}

/* Right aligned circle */
.testimonial-container.right {
    margin-right: 0%; /* Add space from the right edge */
}
    
        
        #section0 .container .wide-text-container {
            background-color: #ff8c00;
    
      
        }

        #section0 .container .wide-text-container h2{
       
            text-align: center;
    
      
        }


        .book-image {
            width: 200px; /* Each circle takes 45% of the container's width */
            height: 300px;
            margin: 30px;
    
            
        }
        


    
    }

  

    @media (max-width: 460px) {

    #section0 .container{
  height: 100px;

}

    .text-container  {

        padding: 30px;

    }
    .wide-text-container  {

        padding: 30px;

    }
    .footer-text-container  {

        padding: 30px;

    }


}