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

/**
body{
    font-family: 'Comic Neue', cursive;
    
} Hide this becuase it is not used in anywhere/

/*========Nav========*/
.nav-menu{
    padding: 25px;
}

.fas{
    color: #dbc1ac;
}

.menu{
    font-size: 20px;
    letter-spacing: 1px;
    color: #dbc1ac;
    transition: all .4s;
}

.menu:hover{
    color: #634863;
}

/*========End of Nav========*/


/*====Header========

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

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


.heading{
    animation-name:slide;
    animation-duration: 2s;
}


.main{
    animation-name: slide;
    animation-duration: 2s;
    animation-delay: .5s;
    animation-fill-mode: backwards;
}
==== Moved to Index.HTML*/

@keyframes slide{
    0%{
        transform: translateX(-1000px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
/*=====End of Header========*/

/*=====About Us======*/
#about{
    background: #000;
    margin-top: 30px;
    color: #fff;
}

.text{
    font-size: 20px;
}

.about-images{
    position: relative;
}

.about-img{
    position: absolute;
    width: 150px;
    transition: all 2s ease;
    opacity: 0.9s;
}

.img-1{
    left: 0%;
    top: 0%;
}

.img-2{
    left: 20%;
    top: 20%;
    z-index:10;
    
}

.img-3{
    left: 40%;
    top: 45%;
    
}
.img-4{
    left: 40%;
    top: 0%;
}

.img-5{
    left: 0%;
    top: 45%;
}

.about-img:hover{
    outline: 10px solid #dbc1ac;
    outline-offset: 45px;
    transform:scale(1.3) rotate(20deg);
    z-index: 30;
    opacity:1;
}

.btn{
    color: #fff;
    font-weight: bold;
    border: 2px solid #634832;
    font-size: 25px;
}

.hvr-right{
    display: inline-block;
    vertical-align: middle;
    transition-duration: 0.5s;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0);
    position: relative;
    transition-property: color;
}

.hvr-right:before{
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #dbc1ac;
    transition-timing-function: ease-out;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition-property: transform;
    transition-duration: 0.5s;
}

.hvr-right:hover,.hvr-right:focus,
.hvr-right:active{
    color:#000;
}

.hvr-right:hover:before, .hvr-right:focus:before,
.hvr-right:active:before{
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transform: scaleX(1);
}

/*--------- Team Members -------*/
#team
{
    padding-top: 50px;
    padding-bottom: 50px;
    color:#000;
}

h1{
    text-align: center;
    
    padding-bottom: 10px;
}
h1::after{
    content:'';
    background: #007bff;
    display: block;
    height: 3px;
    width: 170px;
    margin: 20px auto 5px;
}

.profile-pic 
{
    margin-top: 25px;
}

.profile-pic,.img-box
{
    opacity: 1;
    display: block;
    position: relative;
}

.profile-pic,.img-box img
{
    filter: greyscale(5);
}

.profile-pic,.img-box img:hover
{
    filter: greyscale(0);
    cursor: pointer;
}

.profile-pic h2{
    font-size: 22px;
    font-weight: bold;
    margin-top: 15px;
    color: #007bff !important;
}

#team .fa
{
    height: 25px;
    width:25px;
    color: #007bff !important;
    background: #fff
}


/*=== Team Member not done=======/

/*======Products Section==========*/

#products{
    background: #000;
}

.product-title{
    color: #fff;
}

.single-item{
    display: flex; /* Or Use flex to ensure the content fills the card */
    flex-direction: column;
    height: 100%; /* Ensure all cards are the same height */
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgb(247, 241, 241);
    position: relative;
    transition-duration: 0.3s;
    transition-property: transform;
    cursor: pointer;
}

.single-item:before{
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content:"";
    top:100%;
    left:5%;
    height:10px;
    width:90%;
    opacity:0%;
    background: radical-gradieny(ellipse at center, rgba(248,248,248,0.35) 0%,rgba(247,244,244,0) 80%);
    transition-duration: 0.3s;
    transition-property: transform, opacity;
}

.single-item:hover,
.single-item:focus,
.single-item:active{
    transform: translateY(-5px);
}
.single-item:hover:before,
.single-item:focus:before,
.single-item:active:before{
    opacity:1;
    transform: translateY(5px);
}

.image-container{
    position:relative;
    overflow:hidden;
    cursor: pointer;
    transform:perspective(1px) translateZ(0);
    vertical-align:middle;
}

.img-container{
    width: 100%;
    height: 300px; /* Set a fixed height for the image container */
    display: inline-block;
    box-shadow: 0 0 1px rgba(0,0,0);
    transition-duration: 0.3s;
    transition-property: box-shadow, transform;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fits the container without distortion */
}

.img-container:hover,
.product-image:focus,
.product-image:active{
    box-shadow: 1px 0px 1px 4px rgba(247,243,243,0.9);
    transform: scale(1.1);
}

/* Responsive adjustments for smaller devices */
@media (max-width: 768px) {
    .img-container {
        height: 150px; /* Adjust image height for tablets */
    }
}

@media (max-width: 576px) {
    .img-container {
        height: 250px; /* Adjust image height for mobile devices */
    }
}

/*=====End of Products Section======*/

/*======== all below code for contact us Sbumit Button Hover effects, now working=====*/
.btn1{
    color:#000;
    font-weight: bold;
    border: 5px solicd #634832;
    font-size: 25px;
}

@keyframes cont-btn1{
    16%{
        transform: translateY(8px);
    }
    33%{
        transform: translateY(-6px);
    }
    50%{
        transform: translateY(4px);
    }
    65%{
        transform: translateY(-2px);
    }
    85%{
        transform: translateY(1px);
    }
    
    100%{
        transform: translateY(0px);
    }
}

.cont-btn1{
    display:inline-block;
    vertical-align:middle;
    transform:perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0,0,0,0);
}


.cont-btn1:hover,
.cont-btn1:focus,
.cont-btn1:active{
    animation-name: slide-btn;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}


/*======== End of Contact, hoever effect on Submit button now working=====*/

/*======Footer========*/

.footer{
    background:#000;
    color: #fff;
}

.fab{
    padding-left:10px;
}

/*About page*/
#image-header{
    background-image: url("images/about_GettyImages-602981223.png");
    width: 1 var();
    height: 30vh ; /*Top banner image size*/
    background-size: cover;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 14px;
}

#image-header h2,
#image-header p{
    color:black;
}

#image-header.about-header{
    background-image: url(images/abour_client-worldwide-banner.jpg);
}

#about-header img{
    width: 50%;
    height: auto;
}

#about-header{
    display: flex;
    align-items: center;
}

#about-header div{
    padding-left: 40px;
    
}

.section-p1{
    padding: 40px 10px; /*Left and right of the text- how far from the border*/
}

@media (max-width:499px) {
    .section-p1{
        padding: 40px 10px; /*Left and right of the text- how far from the border*/
    }
    #image-header{  /*CSS mobile for the background*/
        padding: 0 20px;
        background-position: 55%;
        height: 20vh;
    }
    h1 {
        font-size: 38px;
    }
    h2 {
        font-size: 32px;
    }
    
    #about-header{ /*CSS mobile for the about section*/
        flex-direction: column; 
    } 
    #about-header img{
        width: 100%; 
        height: auto; /*CSS mobile to reduce the who we are image size*/
        margin-bottom: 10px;
    }
    #about-header div{
        padding-left: 0px;
    }
}

/*Styling for Carousel in About*/
.carousel-inner img {
    height: 500px; /* Adjust the height as needed */
    object-fit: cover;
}

/*Styling for Footer in About*/
.footer-container-copy {
    text-align: right;
    padding-right: 20px;
    font-size: 14px;
}

/*Styling for Tiemelin in About*/
.timeline-container {
    display: flex;
    justify-content: space-around;
    overflow-x: auto;
    flex-wrap: wrap;
    padding: 20px;
}

.timeline-item {
    display: flex; /* Use Flexbox inside each item */
    flex-direction: column; /* Align content vertically within each item */
    align-items: center; /* Center align the content horizontally */
    background-color: #f9f9f9; /* Light background for readability */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px; /* Padding inside each timeline item */
    width: 250px; /* Set a fixed width for each item */
    text-align: center; /* Center align text inside the content box */
}

.timeline-content h4 {
    font-size: 20px; /* Font size for headings */
    margin: 0 0 10px 0; /* Margin below the heading */
    color: #333; /* Dark color for headings */
}

.timeline-content p {
    font-size: 14px; /* Font size for paragraphs */
    margin: 0 0 10px 0; /* Margin below the paragraph */
    color: #666; /* Lighter color for paragraphs */
}

.timeline-content span {
    display: block; /* Make the span element a block-level element */
    font-size: 12px; /* Smaller font size for dates */
    color: #999; /* Light color for dates */
    margin-top: 10px; /* Space above the date */
}

.contact-icon {
    font-size: 24px; /* Icon size */
    color: #007bff; /* Default icon color */
    margin-right: 20px; /* Space between icons */
    text-decoration: none; /* No underline for links */
    transition: color 0.3s ease; /* Smooth color change on hover */
    background: none; /* Remove background */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    display: inline-block; /* Ensure icons are displayed inline */
}

.contact-icon:hover {
    color: #f0c040; /* Change icon color on hover (optional) */
}

.contact-icon i {
    display: inline-block;
}