/*** Importation des polices de Google fonts ****/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'MTN Brighter light';
    src: url('./fonts/MTNBrighterSans-Light.woff2') format('woff2');
    font-display: swap; /* Use fallback font until the custom font loads */
}
@font-face {
    font-family: 'MTN Brighter regular';
    src: url('./fonts/MTNBrighterSans-Regular.woff2') format('woff2');
    font-display: swap; /* Use fallback font until the custom font loads */
}
@font-face {
    font-family: 'MTN Brighter extraBold';
    src: url('./fonts/MTNBrighterSans-ExtraBold.woff2') format('woff2');
    font-display: swap; /* Use fallback font until the custom font loads */
}
/*
@font-face {
    font-family: MTN Brighter_Light;
    src: url(./fonts/MTNBrighterSans-Light.woff2);
    font-weight: light;
  }

@font-face {
    font-family: MTN Brighter_Regular;
    src: url(./fonts/MTNBrighterSans-Regular.woff2);
    font-weight: normal;
  }

@font-face {
      font-family: MTN Brighter_ExtraBold;
      src: url(./fonts/MTNBrighterSans-ExtraBold.woff2);
      font-weight: bold;
    }
*/

/*** Importation des polices de fontes ****/


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

h1,h2,h3,h4,h5,h6 {
    font-size:inherit;
    font-weight:inherit
}

a {
    color: inherit; /* Use the inherited color */
    text-decoration: none; /* Remove underline */
}

a[href^="tel:"] {
    color: inherit; /* Use the inherited color for phone links */
    text-decoration: none; /* Remove underline for phone links */
}

body {
    min-height: 100vh;
    max-width: 100%;
    display: flex;
    justify-self: center;
    flex-direction: column;
 /*   background: linear-gradient(#ECEFFE, #CED6FB);*/
}

.root-container {
    position: relative;
    max-width: 1440px;
    
  /*  display: flex;
    justify-self: center;
    justify-content: space-between;
    flex-direction: column;
  /*  background-color: #FF0000;*/
}

.main-container {
    width: 100%;
    /*display: flex;
    flex-direction: column;
    align-items: center;
    padding: auto;
    overflow-x: hidden;
   /* background-color: #FF0000;*/
}

/* Zone de navigation du TOP*/
.main-nav {
    position: sticky; /* Make the entire nav sticky */
    top: 0; /* Stick to the top of the viewport */
    z-index: 900; /* Ensure it stays above other content */
    
    height: 10rem;
    padding-top: 2rem;
    padding: 0px 5%;
    margin-bottom: 5%;
    background-color: #fff;
    box-shadow: 0.5px 0.5px 10px #aaaaaa;
    transition: all 0.3s ease; /* Smooth transition for visibility */
}


.main-nav .h-row1 {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space between items */
    top: 0px;
    padding-top: 2rem;
    height: 40%;
    width: 100%; /* Ensure it takes the full width */

    padding: 0 5% 0 5%;
    border-bottom: 1px solid #ddd;
    font-size: 13.5pt;
    /*padding: 0px 5%;*/
    background-color: #fff;
    transition: all 0.3s ease; /* Smooth transition for visibility */
}


.title {
    flex: 1; /* Allow the title to grow and take available space */
    text-align: center; /* Center the text */
  /*  background-color: #3FC979;*/
}

.main-nav .h-row2 {
    height: 50%;
    padding-top: 20px;
    /*background-color: rgb(225, 175, 175);*/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease; /* Smooth transition for visibility */

}



.h-row2 {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space items evenly */
    width: 100%; /* Ensure it takes the full width */
}

.nav-icons {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center the icons */
}

.search-bar {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
}


.search-bar {
    position: relative; /* Position relative for absolute positioning of icon */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
}

.search-icon {
    position: absolute; /* Position the icon absolutely within the search bar */
    left: 10px; /* Space from the left */
    color: #aaa; /* Color of the search icon */
}

.search-input {
    width: 200px; /* Set width of the input */
    padding: 5px 30px; /* Padding inside the input, right padding for icon */
    border: 1px solid #ccc; /* Border style */
    border-radius: 5px; /* Rounded corners */
    outline: none; /* Remove outline */
}

.search-input::placeholder {
    color: #aaa; /* Color of the placeholder text */
}



.user-profile {
    position: relative; /* Position relative for absolute positioning of dropdown */
    width: 35px; /* Set width */
    height: 35px; /* Set height */
    border-radius: 50%; /* Make it circular */
    margin-left: 10px; /* Space between the search icon and profile icon */
    object-fit: cover; /* Ensure the image covers the area */
    cursor: pointer; /* Change cursor to pointer on hover */
    /* background-color: #ccc; /* Default grey background */
    display: flex; /* Center the content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.user-profile img {
    width: 100%; /* Make the image fill the circle */
    height: 100%; /* Make the image fill the circle */
    border-radius: 50%; /* Ensure the image is also circular */
    display: block; /* Prevents extra space below the image */
}


#username-display {
    display: none;
    margin-left: 10px;
    font-size: 16px; /* Font size for the username */
    font-weight: 500;
    color: #333; /* Text color */
}


@media screen and (max-width: 500px) {
    #username-display {
        display: none !important;          /* Optionally, you can set the top position as well */     
    }
}





.dropdown-content {
    position: absolute; /* Position it absolutely */
    width: 120px;
    left: -50px; /* Adjust this value to position it left of the image */
    top: 205%; /* Center it vertically with respect to the user profile */
    transform: translateY(-40%); /* Adjust for vertical centering */
    background-color: white; /* Background color */
    border: 1px solid #ccc; /* Border for the dropdown */
    border-radius: 4px; /* Rounded corners */
    padding: 10px; /* Padding inside the dropdown */
    display: none; /* Initially hidden */
    z-index: 1000; /* Ensure it appears above other elements */
}

.dropdown-content.show {
    display: block; /* Show dropdown when needed */
}






#login-status {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    text-decoration: none;
}

#login-icon {
    margin-right: 5px; /* Space between icon and text */
    color: #000; /* Change icon color if needed */
}


.login-link {
    color: #7F7C7C; /* Example color */
    text-decoration: none; /* No underline */
}

.login-link:hover {
    text-decoration: none; /* Underline on hover */
}

.dropdown-content span {
    display: block; /* Make the span a block element */
    padding: 8px 12px; /* Padding for the span */
    color: black; /* Text color */
    text-align: center; /* Center text */
    cursor: pointer; /* Pointer cursor on hover */
}

.dropdown-content span:hover {
    background-color: #f1f1f1; /* Change background on hover */
}



#login-status {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
}

#login-icon {
    margin-right: 5px; /* Space between icon and text */
    color: #000; /* Change icon color if needed */
}


/* Hide h-row2 when scrolling */
.main-nav.scrolled {
    height: 64px;
}

/* Hide h-row2 when scrolling */
.main-nav.scrolled .h-row1 {
    height: 100%;
    border-bottom: none;
}

/* Hide h-row2 when scrolling */
.main-nav.scrolled .h-row2 {
    opacity: 0; /* Hide when scrolling */
    pointer-events: none; /* Prevent interaction when hidden */
    /*display: none;*/
}


.main-nav .sticky-nav-row button {

    height: 35px;
    width: 40px;
    font-size: 14pt;
    border-style: none;
    background: none;
}

.main-nav .h-row2 .nav-icons {
    display: flex;
    justify-content: center;
    align-content: center;
}

.main-nav .h-row2 .nav-icons .navicon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border-style: none;
    font-size: 24px;
    cursor: pointer;
    background-color: #f0f0f0;
    color: #999;
    transition: background-color 0.1s;
}

.main-nav .h-row2 .nav-icons .navicon:hover {
    background-color: #dedede;
}


.nav-icons .navicon.active {
   /* background-color: #FFA500 !important;*/
   background: linear-gradient(30deg, #ff7700 0%, rgb(252, 214, 23) 100%);
    color: #fff !important;
}



/* Zone du Side Menu*/



.blur-effect {
    filter: blur(5px); /* Apply blur effect */
    transition: filter 0.3s ease; /* Smooth transition for blur effect */
    pointer-events: none; /* Prevent interaction when blurred */
}

#side-menu {
position: fixed;
top: 0;
left: -100%;
width: 250px;
height: 100%;
background-color: #ffffff; /* White background */
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
transition: left 0.3s ease;
z-index: 1000;
border-radius: 0 10px 10px 0; /* Rounded corners on the right */
padding-top: 30px; /* Add more padding to the top */
}


@media screen and (min-width: 1440px) {

    #side-menu.active {
        position: absolute; /* Positioned relative to the nearest positioned ancestor (the container) */
        left: 0;           /* Aligns the element to the left edge of the container */
        top: 0;            /* Optionally, you can set the top position as well */
       
    }
}

#side-menu.active {
left: 0;
}

#side-menu ul {
list-style: none;
padding: 0;
margin: 0;
}

#side-menu li {
padding: 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Light border for separation */
}

#side-menu li:last-child {
border-bottom: none;
}

#side-menu li a {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center icon and text vertically */
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Set text color */
    padding: 10px 15px; /* Increased padding for better click area */
    border-radius: 5px; /* Rounded corners for links */
    transition: background 0.3s ease, color 0.3s ease; /* Smooth transition for background and color */
}

#side-menu li a:hover {
background: rgba(0, 0, 0, 0.05); /* Light grey background on hover */
color: #FFA500 ; /* Change text color on hover */
}

#side-menu-login :hover {
    background: none !important; /* Light grey background on hover */
}
    

#side-menu li i {
margin-right: 15px;
}


#side-menu .close-btn {
position: absolute;
top: 10px;
right: 10px;
width: 35px;
border-radius: 50%;
background: #f1f1f1;
border: none;
font-size: 24px;
color: #333; /* Dark color for close button */
cursor: pointer;
}

#side-menu .close-btn:hover {
color: #FFA500; /* Change color on hover */
}

.menu-logo {
width: 70%; /* Make the logo take the full width */
height: auto; /* Maintain aspect ratio */
margin-bottom: 20px; /* Space between logo and menu items */
display: block; /* Make sure it behaves like a block element */
border-radius: 10px; /* Optional: rounded corners for the logo */
}



#side-menu {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: space-between; /* Push items to the top and bottom */
    height: 100%; /* Ensure the side menu takes full height */
}

#side-menu ul {
    flex-grow: 1; /* Allow the menu items to grow and take available space */
}

.contact-info, .social-links, .copyright {
    padding: 10px; /* Padding for spacing */
    font-size: 0.9em; /* Font size for content */
    border-top: 1px solid #ddd; /* Optional: add a top border for separation */
}

.contact-info h4, .social-links h4 {
    margin-bottom: 5px; /* Margin below the heading */
    font-size: 1em; /* Font size for headings */
    font-weight: bold; /* Make titles bold */
}

.social-links {
    display: flex; /* Use flexbox for inline display */
    align-items: center; /* Center items vertically */
    justify-content: flex-start;
    padding-top: 20px;
    margin-bottom: 10px;
}



.social-links :not(:last-child) {
    margin-right: 15px;
}

/*
@media  screen and (min-width: 768px)  {
    
    .social-links :not(:last-child) {
        margin-right: 15px;
    }
}
*/

.social-links h4 {
    margin-right: 15px;
}
.social-links a {
    margin-right: 5px; /* Space between social icons */
    font-size: 1.2em; /* Font size for social icons */
    color: #333; /* Set color for social icons */
}

.copyright {
    text-align: left; /* Center the copyright text */
    font-size: 0.8em; /* Font size for copyright */
    color: #777; /* Lighter color for copyright text */
    font-weight: bold; /* Make copyright text bold */
    padding-top: 20px;
    margin-bottom: 20px;
}

.copyright a {
    text-align: left; /* Center the copyright text */
    font-size: 0.85em; /* Font size for copyright */
    color: #777; /* Lighter color for copyright text */
    font-weight:normal; /* Make copyright text bold */
    padding-top: 20px;
    margin-bottom: 20px;
}
/* Zone du Side Menu*/




/* Zone de navigation du TOP*/

.main-container .section {
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly below */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transition for smooth reveal */
    display: none; /* Hide all content by default */
}

.main-container .active-section {
    display: block; /* Show active content */
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Move to original position */
}

/********************** ZONE DU HOME PAGE TOP SLIDER ****************
///////////
///////////
***********************/

/* Zone du slider*

.slider-wrapper {
    
    max-width: 100%;
    min-height: 220px;
    padding: 0px 2% 0px 2%;
    position: relative;
    margin: auto;
    overflow-x: hidden;

    background-color: #00ff0d;
}






/* Zone du slider*/


.slider-wrapper {
    
    display: flex;
    flex-direction: column;
    align-self: center;
 /*   max-width: 1100px;*/
    max-width: 100%;
    height: 220px;
    
    margin: auto;
    padding: 0px 4%;
    overflow: hidden;
   
   /* box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
   /* background-color: #00ff0d;*/
}

  /************** Tentative de Carousel ***********/

  .slider {

    display: flex;
    min-width: 100%;
    min-height: 100%;

    overflow-x: hidden;

    border-radius: 0.5rem;
    transition: transform 0.5s ease; /* Smooth slide transition */
    /*
    aspect-ratio: 16 / 9;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    */
}

  /************** Tentative de Carousel ***********/


.slider-wrapper .slider .slide {
    
    display: flex;
    background-color: #FF9500;
  /* background: linear-gradient(60deg, rgba(179,70,21,1) 0%, rgba(252,177,23,1) 100%);*/
    min-width: 100%;
    min-height: 100%;
    opacity: 0; /* Start with invisible slides */
    transition: opacity 0.5s ease; /* Smooth opacity transition */
}

.slider-wrapper .slider .slide.active-slide {
    opacity: 1; /* Show the active slide */
}


/************** Mise en page d'une Slide ***********
/////
////*/

.slider-wrapper .slider .slide .info-title{

    width: 60%;
    height: 100%;
    padding: 0 3% 0 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #1c1c1c;
}

.info-title h4, .info-title p {

    font-family: 'MTN Brighter light';
    font-size: 1em;
    line-height: 1em;
    color: #fff;
}

.info-title h2 {

    font-family: 'MTN Brighter extraBold';
    font-size: 1.5em;
    color: #fff;
    margin-bottom: 0.1em;
}

.info-title h3 {

    width: 100%;
    font-family:  'MTN Brighter extraBold';
    font-size: 0.75em;
    color: #fff;
    margin-top: 0.8em;
    text-decoration: none;
}


.slider-wrapper .slider .slide .info-title button {

    width: 150px;
    background-color: #ffffff;
    /*background: linear-gradient(90deg, rgba(179,70,21,1) 0%, rgba(252,177,23,1) 100%);*/
    color: #000;
    padding: 5px 20px;
    margin-top: 0.75em;
    border-radius: 10rem;
    font-family: 'MTN Brighter extraBold';
    line-height: inherit;
    text-decoration: none;
}


.slider-wrapper .slider .slide img {
    max-width: 55%;
    max-height: 88%;
    position: relative;
    top: 10%;
    transform: translateX(-10%);
 }


/* Zone du slider*/



/************** Design des dots de navigation ***********/

.slider-dots {
    z-index: 100;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-25px);
 /*   background-color: #00ff0d;*/
}

.slider-dots .s-dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease;
}

.slider-dots .s-dot.active-dot {
    background: #ffffff;
}

.slider-dots .s-dot:not(:last-child) {
    margin-right: 5px;
}

.slider-dots .s-dot:hover {
    transform: scale(1.2);
}
  /************** Design des dots de navigation ***********/


/* Zone du slider*
///////////
///////////
/********************** ZONE DU HOME PAGE TOP SLIDER ****************/





/********************** ENTAME DU MENU PROPREMENT DIT ****************/

.rubriques {
    width: 100%;
    display: flex;
    padding: 0px 3% 0px 3%; 
    margin-top: 5%;
    justify-content: center;
    align-items: center;
}


.cardlist-sb {
    background-color: #F6F3E4;
}

.cardlist-wht {
    background-color: #ffffff;
}


/***************** Début du Cardlist carousel **********/

.card-wrapper {

    display: flex;
    flex-direction: column;
    align-items:flex-start;

 /*   background-color: #3FC979;*/

    max-width: 98%;
    height: 320px;
    overflow: hidden;
    margin-top: 20px;
}


.card-wrapper .card-list-title .list-title {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 15pt;
    line-height: 1.2rem;
    color: #7F7C7C;
}

.card-wrapper .card-list-title .underliner {
    display: block;
    width: 3rem;
    height: 0.2rem;
    background-color: #ff6a00;
}

.card-list {
    display: flex;
    justify-content: center;
    align-items: center;
   /* background-color: antiquewhite;*/
    width: 100%;
}

/***************** Début Traitement d'un Card **********/


.card-list .card-item {
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 157px ;
    height: 219px ;
   /* margin: 10px 10px 10px 10px; */
    padding-left: 8.5px;
    padding-right: 8.5px;
    list-style: none;
    border: #999 0.08rem solid;
    border-radius: 15px;
    /*background-color: #ffffff41;*/
}

.card-list .card-item:active {
    cursor: grabbing;
}

.card-list .card-item:hover {
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease;
}


/*********** Généralités sur le card ********/

.card-list .card-control {

    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    height: 20%;
   /* background-color: blueviolet;*/
}

.card-list button {
    border-radius: 50%;
    border-style: none;
    text-align: center;
    background: none;
    cursor: pointer;
}

.card-list .card-id {
    display: none;
}

/*********** Dessus du card ********/


.card-list .card-control .card-status {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

/************** ANIMATION DU POINT VERT *************/

.card-list .card-control .status-active, .status-active {
    animation: pulsate 1s ease-out infinite; /* Standard property */
    -webkit-animation: pulsate 1s ease-out infinite; /* WebKit prefix for older browsers */
    opacity: 0.0
}

@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

@keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

/************** ANIMATION DU POINT VERT *************/


.card-list .card-control .card-status .status-core {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.card-list .card-control .status-active, .status-active {
    
    border: #3FC979 0.08rem solid;
}

.status-active .status-core {
    background-color: #3FC979;
}

.card-list .card-control .status-inactive, .status-inactive {
    border: #ababab 0.08rem solid;
}

.status-inactive .status-core {
    background-color: #ababab;
}

.card-list .card-control .card-favorite {
    width: 20px;
    height: 20px;
    font-size: 16px;
}

.card-list .card-control .fav-active {
    color: #FF0000;
}
.card-list .card-control .fav-inactive {
    color: #ababab;
}


/*********** Milieu du card ********/

.card-list .card-item .card-link {
    width: 100%;
    display: flex;
    justify-content: center;
    
   /*background-color: rgb(194, 194, 194);
    
    padding: 3px;
    */
}

.card-list .card-link .card-image {
    width: 116px;
    height: 116px;
    border-radius: 50%;
}


/*********** Bas du card ********/

.card-list .card-actions {
    display: flex;
    justify-content: space-between;
    align-items:flex-end;
    width: 100%;
    height: 50px;
    line-height: 1.2rem;
  /*  background-color: rgb(236, 150, 0);*/
}

.card-list .card-actions .card-info {

    display: flex;
    flex-direction: column;
    justify-content:end;
    width: 110px;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2rem;
    /*background-color: rgb(182, 255, 127);*/
}

.card-list .card-actions .card-info .card-title {
    display: inline;
    font-size: 13px;
    height: 20px;
    width: 120px;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  /*  background-color: rgb(255, 127, 148);*/
}

.card-list .card-actions .card-info .card-price .value {
    
    font-size: 16px;
    font-weight: bold;
}

.card-list .card-actions .card-info .card-price .unit {
    font-size: 12px;
    font-weight: bold;
}

.card-list .card-actions .add-2-card {
    
    width: 30px;
    height: 30px;
    font-size:20px;
    color: #FF9500;
}
/***************** Fin Traitement d'un Card **********/


/***************** Stylage du Swiper **********/

.card-wrapper .swiper-pagination-bullet {
    height: 10px;
    width: 10px;
    opacity: 0.5;
    background: #FF9500;
}

.card-wrapper .swiper-pagination-bullet-active {
    opacity: 1;
}

.card-wrapper .swiper-slide-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 40%;
    height: 36px;
    width: 36px;
    text-align: center;
    font-size: 35px;
    color: #FF9500;
  /*  border: 2px solid #ffffff;*/
    border-radius: 50%;
    box-shadow: 3px 3px 5px #a5a5a5;
    background-color: #ffffff;
    z-index: 10;
}

/*
.carou-left:hover, .carou-right:hover {
    height: 38px;
    width: 38px;
    font-size: 38px;
    color: #e0e0e0;
    box-shadow: 3px 3px 8px #FF9500;
}
*/

.card-wrapper .carou-left {
    left: 1%;
}

.card-wrapper .carou-right {
    right: 1%;
}


@media screen and (max-width: 768px) {
    .card-wrapper {
        margin: 0 10px 25px;
    }
    .card-wrapper .swiper-slide-button {
        display: none;
    }
}





/*** Importation des polices de Google fonts ****/ 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); /* Import Poppins font */

/* Footer Styles */

.footer {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), 
                url('../images/backgrounds/photo-shooting-background.jpg'); /* Replace with your image path */
    background-size: cover; /* Make sure the background image covers the entire footer */
    background-position: center; /* Center the background image */
    color: white; /* Change text color to white for better contrast */
    padding: 20px; /* Add some padding */
    margin-top: 70px;
}

.footer-container {
    display: flex; /* Use flexbox for layout */
    justify-content: space-around; /* Space between sections */
    max-width: 1440px;; /* Max width for the footer */
    margin: 0 auto; /* Center the footer */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

.footer-section {
    flex: 1; /* Allow sections to grow equally */
    padding: 0 20px; /* Padding for sections */
    min-width: 200px; /* Minimum width for sections */
}

.footer-section h4 {
    margin-bottom: 10px; /* Space below headings */
    font-weight: 700; /* Make the title bold */
}

.footer-section p {
    margin: 5px 0; /* Space between paragraphs */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    font-weight: 300; /* Set information text to semi-bold */
    line-height: 1.5; /* Improve readability */
}

.footer-section p i {
    margin-right: 8px; /* Space between icon and text */
    color: #FFA500; /* Icon color */
}

.footer .phone-number {
    color: #fff; /* White color for phone numbers */
    font-weight: 600; /* Semi-bold for phone numbers */
}

.footer .social-links {
    display: flex; /* Use flexbox for layout */
    margin-top: 10px; /* Space above social links */
}

.footer .social-links a {
    color: #fff; /* White color for links */
    margin-right: 10px; /* Space between social icons */
    font-size: 20px; /* Size of social icons */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s; /* Smooth color transition on hover */
}

.footer .social-links a:hover {
    color: #FFA500; /* Change color on hover */
}

.footer-bottom {
    text-align: center; /* Center the bottom text */
    padding: 10px 0; /* Padding for bottom */
    border-top: 1px solid #444; /* Top border for separation */
    margin-top: 20px; /* Add some space above */
}

.footer-bottom p {
    margin: 0; /* Remove default margin */
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Stack sections vertically */
        align-items: center; /* Center items horizontally */
        justify-content: center;
    }

    .footer-container :first-child {
        max-width: 70%;
        text-align: left;
    }


    .footer-section {
        padding: 10px 0; /* Adjust padding for sections */
        text-align: center; /* Center text in sections */
    }

    .footer-section p {
        font-size: 14px; /* Reduce font size for mobile devices */
        line-height: 1.5; /* Improve readability */
    }
}