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


.logo-first {
    display: grid;
    grid-template-columns: minmax(50px, 100px) 1fr minmax(50px, 100px);
    align-items: center;
    background-color: rgb(248, 247, 248);
    box-shadow: 5px 5px 5px 5px rgb(239, 236, 236);
    padding: 10px;
    gap: 80px;
    margin-top: 2px;
    height: 80px;
    
}

.logo-img img {
    height: 50px;
    width: 50px;
    margin-left: 100px;
}
.logo-first1{
  display: flex;

}

.logo-contant{
  font-size: 20px;
  margin-top: 10px;
  margin-left: 10px;
}

@media (max-width: 400px){
  .logo-contant{
    font-size: 15px;
    margin-top: 12px;
  }
}

.nav {
    display: flex;
    justify-content: center;
    gap: 20%;
    margin-left: 35%;
}

/* Hamburger icon hidden by default */
.hamburger {
    display: none;
    font-size: 30px;
    cursor: pointer;
}

/* Nav links */
.nav a {
    text-decoration: none;
    font-size: 23px;
    color: rgb(146, 54, 5);
}

/* Responsive */
@media (max-width: 768px) {
    .hamburger {
        display: block;
        margin-left: 280px;
    }

    .nav {
        display: none; /* hide nav by default */
        flex-direction: column;
        position: absolute;
        top: 60px; /* below the header */
        left: 0;
        width: 50%;
        background-color: rgb(248, 247, 248);
        padding: 10px 0;
        box-shadow: 0px 5px 5px rgb(200, 200, 200);
        z-index: 100;
    }

    .nav a {
        display: block;
        padding: 10px;
        text-align: center;
        font-size: 20px;
    }

    .nav.active {
        display: flex; /* show nav when active */
    }
}


.collection-first {
    width: 90px;             
    height: 100px;            
    border-radius: 50%;       
    overflow: hidden;         
    border: 4px solid rgb(245, 241, 244); 
    align-items: center;
    justify-content: center;
    margin: 50px;
    margin-left: 100px;
    margin-top: 30px;
    box-shadow: 2px 2px 2px 2px rgb(185, 183, 183)
}

.collection-dress {
    width: 100%;
    height: 100%;

}

.collection-dress img {
    width: 100%;
    height: 100%;
    object-fit:cover; /* Fills oval without distortion */
    /* margin-left: 5px; */
    /* margin-top: 5px; */
}
.collection-session{
    display: flex;
}

.collection-first1 {
    width: 90px;             
    height: 100px;            
    border-radius: 50%;       
    overflow: hidden;         
    border: 4px solid rgb(245, 241, 244); 
    align-items: center;
    justify-content: center;
    margin: 50px;
    margin-left: 100px;
    margin-top: 30px;
    box-shadow: 2px 2px 2px 2px rgb(185, 183, 183)
}

.collection-dress1 {
    width: 100%;
    height: 100%;

}

.collection-dress1 img {
    width: 100%;
    height: 110%;
    object-fit:fill; /* Fills oval without distortion */
    /* margin-left: 8px; */
    margin-top: -5px;
}
.collection-first2 {
    width: 90px;             
    height: 100px;            
    border-radius: 50%;       
    overflow: hidden;         
    border: 4px solid rgb(245, 241, 244); 
    align-items: center;
    justify-content: center;
    margin: 50px;
    margin-left: 100px;
    margin-top: 30px;
    box-shadow: 2px 2px 2px 2px rgb(185, 183, 183)
}

.collection-dress2 {
    width: 100%;
    height: 100%;

}

.collection-dress2 img {
    width: 100%;
    height: 110%;
    object-fit:fill; /* Fills oval without distortion */
    /* margin-left: 8px; */
    margin-top: -5px;
}

 .collection-first3 {
    width: 90px;             
    height: 100px;            
    border-radius: 50%;       
    overflow: hidden;         
    border: 4px solid rgb(245, 241, 244); 
    align-items: center;
    justify-content: center;
    margin: 50px;
    margin-left: 100px;
    margin-top: 30px;
    box-shadow: 2px 2px 2px 2px rgb(185, 183, 183)
}

.collection-dress3{
    width: 100%;
    height: 100%;

}

.collection-dress3 img {
    width: 100%;
    height: 110%;
    object-fit:fill; /* Fills oval without distortion */
    /* margin-left: 8px; */
    margin-top: -3px;
}
  
 .collection-first4 {
    width: 90px;             
    height: 100px;            
    border-radius: 50%;       
    overflow: hidden;         
    border: 4px solid rgb(245, 241, 244); 
    align-items: center;
    justify-content: center;
    margin: 50px;
    margin-left: 100px;
    margin-top: 30px;
    box-shadow: 2px 2px 2px 2px rgb(185, 183, 183)
}

.collection-dress4{
    width: 100%;
    height: 100%;

}

.collection-dress4 img {
    width:100%;
    height: 113%;
    object-fit:fill; /* Fills oval without distortion */
    /* margin-left: 8px; */
    margin-top: -5px;
}
  

 .collection-first5 {
    width: 90px;             
    height: 100px;            
    border-radius: 50%;       
    overflow: hidden;         
    border: 4px solid rgb(245, 241, 244); 
    align-items: center;
    justify-content: center;
    margin: 50px;
    margin-left: 100px;
    margin-top: 30px;
    box-shadow: 2px 2px 2px 2px rgb(185, 183, 183)
}

.collection-dress5{
    width: 100%;
    height: 100%;

}

.collection-dress5 img {
    width: 100%;
    height: 110%;
    object-fit:fill;
}


/* banner */
  .banner {
    position: relative;
    width: 55%;
    height: 60vh;
    min-height: 320px;
    overflow: hidden;
    margin-left: 350px;
  }

  .slide {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition:  1s ease-in-out;
  }

  .slide.active {
    opacity: 1;
  }

  .slide img {
    width: 250%;
    height: 100%;
    object-fit: contain; /* shows full image */
    background-color:rgb(250, 121, 192); /* fills gaps if aspect ratio differs */
  }

  .banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    z-index: 2;
    padding: 1rem;
    background: rgba(0,0,0,0.35);
  }

  .banner-content h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: 0.5rem;
  }

  .banner-content p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin-bottom: 1rem;
  }

  .banner-content a {
    padding: 0.8rem 1.4rem;
    border-radius: 30px;
    /* background: #fff; */
    color: #111;
    font-weight: bold;
    text-decoration: none;
  }

  .dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
  }

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer;
  }

  .dot.active {
    background: #fff;
  }
  #banner-content1{
    font-size: 60px;
  }
    #banner-content2{
    font-size: 25px;
  }
  .cardwhole{
    height: 200px;
    width:200px
  }

@media (max-width: 1024px) {
  .banner {
    width: 70%;
    margin-left: auto;
    height: 50vh;
  }

  .slide img {
    width: 50%; /* reduce zoom */
  }

  #banner-content1 {
    font-size: 40px;
  }

  #banner-content2 {
    font-size: 20px;
  }

  .cardwhole {
    width: 160px;
    height: 160px;
  }
}

/* 📱 Mobile (<= 768px) */
@media (max-width: 768px) {
  .banner {
    width: 10%;
    margin: 0 auto;
    height: 40vh;
  }

  .slide img {
    width: 100%;
    object-fit: cover;
  }

  #banner-content1 {
    font-size: 28px;
  }

  #banner-content2 {
    font-size: 16px;
  }

  .banner-content a {
    padding: 0.6rem 1rem;
    font-size: 14px;
  }

  .cardwhole {
    width: 140px;
    height: 140px;
  }
}

/* 📱 Small Phones (<= 480px) */
/* 📱 Mobile view */
@media (max-width: 480px) {
  .banner {
    width: 100%;
    height: 100%;
    margin-left: 0;
    object-fit: cover;
    background-color:rgb(254, 253, 253);
  }

  /* ✅ Round images arranged neatly */
  .images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;  /* spacing between circles */
    padding: 10px;
    object-fit:cover;
  }

  .images img {
    position: static;   /* remove absolute positioning */
    width: 80px;        /* smaller size for phone */
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
  }

  /* ✅ Adjust banner slider */
  .slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;  /* make sure it fills screen */
  }

  .banner-content {
    padding: 10px;
  }

  .banner-content h1 {
    font-size: 20px;
  }

  .banner-content p {
    font-size: 14px;
  }

  .banner-content a {
    font-size: 14px;
    padding: 6px 12px;
  }
}

  /* card */
   .category-card {
      width: 250px;
      border: 1px solid #ddd;
      border-top-left-radius: 100px;
      border-top-right-radius: 100px;
      background: linear-gradient(rgb(236, 201, 225),rgb(247, 204, 238));
      text-align: center;
      padding: 60px 15px 15px; /* space for floating image */
      position: relative;
      display: inline-block;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      height: 240px;
      margin-top: 170px;
     margin-left: 380px;
    }

    .category-card img {
      width: 180px;
      height: 180px;
      border-radius: 50%; /* circular image */
      object-fit: cover;
      position: absolute;
      top: -80px; /* move image above card */
      left: 50%;
      transform: translateX(-50%);
      border: 4px solid #f0ecf0;
      box-shadow: 2px 2px 2px 5px rgba(102, 101, 101, 0.2);
    }

    .category-card h1{
      margin-top: 90px;
      font-size: 30px;
      font-weight: 500;
      color: #333;
    }


    @media (max-width: 768px) {
  .category-card {
    width: 150px;         /* smaller card */
    height: 150px;        /* smaller height */
    margin-top: 120px;    /* less top margin */
    margin-left: auto;    /* center horizontally */
    margin-right: auto;
    padding: 50px 10px 10px;
  }

  .category-card img {
    width: 120px;         /* smaller image */
    height: 120px;
    top: -60px;           /* adjust position */
  }

  .category-card h1 {
    font-size: 22px;      /* smaller text */
    margin-top: 40px;
  }
}

@media (max-width: 480px) {
  .category-card {
    width: 100px;         /* even smaller card for very small screens */
    height: 120px;
    margin-top: 100px;
    padding: 40px 8px 8px;
  }

  .category-card img {
    width: 100px;
    height: 100px;
    top: -50px;
  }

  .category-card h1 {
    font-size: 18px;
    margin-top: 30px;
  }
}
    /* 📱 Mobile phones (up to 600px wide) */
@media (max-width: 600px) {

  /* 🔹 Top bar */
  .first {
    flex-direction: column;
    gap: 10px;
    height: auto;
    padding: 8px;
    text-align: center;
  }
  .first-session,
  .first-session1 {
    margin: 5px auto;
  }
  .first-session img,
  .first-session1 img {
    margin-left: 0;
  }

  /* 🔹 Logo + Nav */
  .logo-first {
    flex-direction: column;
    gap: 15px;
    text-align: center;
    padding: 10px;
  }
  .logo-img img {
    margin-left: 0;
  }
  .nav a {
    padding-left: 0;
    font-size: 16px;
    display: block;
    margin: 5px 0;
  }

  /* 🔹 Collections (circle icons) */
  .collection-session {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .collection-first,
  .collection-first1,
  .collection-first2,
  .collection-first3,
  .collection-first4,
  .collection-first5 {
    margin: 15px;
    width: 70px;
    height: 70px;
  }
  .collection-dress img,
  .collection-dress1 img,
  .collection-dress2 img,
  .collection-dress3 img,
  .collection-dress4 img,
  .collection-dress5 img {
    height: 100%;
  }

  /* 🔹 Banner */
  .banner {
    width: 100%;
    height: 220px;
    margin: 10px auto;
  }
  .slide img {
    width: 100%;
    object-fit: cover;
  }
  #banner-content1 {
    font-size: 24px;
  }
  #banner-content2 {
    font-size: 14px;
  }

  /* 🔹 Category card */
  .category-card {
    width: 40%;
    height: 220px;
    margin: 60px auto;
    padding: 50px 10px 15px;
    margin-left: 30px;
  }
  .category-card img {
    width: 150px;
    height: 150px;
    top: -50px;
  }
  .category-card h1 {
    font-size: 20px;
    margin-top: 90px;
  }
}

 /* Banner Container */
    .ad-banner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 60vh;
      padding: 40px 8%;
      background: linear-gradient(90deg, #f7adf3, #f2f1f3);
      color: rgb(115, 57, 2);
      overflow: hidden;
      margin-top: 35px;
      border-radius: 10px;
      box-shadow: 2px 2px 2px 2px gray;
    }

    /* Left Side (images) */
    .banner-images {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      position: relative;
    }

    .banner-images img {
      max-width: 250px;
      height: auto;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      position: relative;
    }

    .banner-images img:first-child {
      z-index: 10;         /* front image */
      transform: translateX(30px); /* overlap */
    }

    .banner-images img:last-child {
      z-index: 5;          /* behind image */
      transform: translateX(-30px);
    }

    /* Right Side (content) */
    .banner1-content {
      flex: 1;
      padding: 20px;
      position: relative;
      z-index: 2;
    }

    .banner1-content h1 {
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: 15px;
    }

    .banner1-content p {
      font-size: clamp(1rem, 2vw, 1.3rem);
      margin-bottom: 25px;
      line-height: 1.5;
      margin-left: 10%;
    }

    .banner1-content a {
      display: inline-block;
      padding: 14px 28px;
      background: white;
      color: #7b2cbf;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      font-size: 1rem;
      transition: 0.3s ease;
    }

    .banner1-content a:hover {
      background: #f1f1f1;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .ad-banner {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
      }

      .banner-images {
        margin-bottom: 30px;
      }

      .banner-images img {
        max-width: 45%;
        transform: none !important;
      }
    }
    

    .slider-wrapper {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 50px 0;
    }

    .slider-container {
      display: flex;
      gap: 20px;
      transition: transform 0.6s ease-in-out;
    }

    .round-card {
      width: 250px;
      height: 250px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      flex-shrink: 0;
      margin: auto;
    }

    .round-card img {
      width: 100%;
      height: 100%;
      object-fit:fill;
      border-radius: 40%;
    }

    /* Arrows inside */
    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff;
      border: none;
      font-size: 24px;
      padding: 12px;
      cursor: pointer;
      border-radius: 50%;
      z-index: 10;
      transition: background 0.3s;
    }

    .arrow:hover {
      background: rgba(0,0,0,0.8);
    }

    .arrow-left {
      left: 15px;
    }

    .arrow-right {
      right: 15px;
    }
/* 
    @media (max-width: 1024px) {
  .round-card {
    width: 200px;
    height: 200px;
  }

  .arrow {
    font-size: 20px;
    padding: 10px;
  }
}

@media (max-width: 768px) {
  .slider-container {
    gap: 15px;
  }

  .round-card {
    width: 180px;
    height: 180px;
  }

  .arrow {
    font-size: 18px;
    padding: 8px;
  }
}

@media (max-width: 480px) {
  .slider-wrapper {
    padding: 30px 0;
  }

  .slider-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .round-card {
    width: 140px;
    height: 140px;
  }

  .arrow {
    font-size: 16px;
    padding: 6px;
  }
} */

/* 📱 Tablets (<= 1024px) */
@media (max-width: 1024px) {
  .round-card {
    width: 200px;
    height: 200px;
  }
  .arrow {
    font-size: 20px;
    padding: 10px;
  }
}

/* 📱 Mobiles (<= 768px) */
@media (max-width: 768px) {
  .slider-wrapper {
    padding: 30px 0;
  }

  .slider-container {
    gap: 15px;
  }

  .round-card {
    width: 150px;
    height: 150px;
  }

  .arrow {
    font-size: 18px;
    padding: 8px;
  }
}

/* 📱 Small Phones (<= 480px) */
@media (max-width: 480px) {
  .slider-wrapper {
    padding: 20px 0;
  }

  .slider-container {
    gap: 10px;
  }

  .round-card {
    width: 120px;
    height: 120px;
  }

  .arrow {
    font-size: 16px;
    padding: 6px;
  }
}

  .slidecontant{
    margin-top: 40px;
    text-align: center;
    color: brown;
  }
  .slidecontant1{
    font-size: 25px;
  }
  .slidecontant2{
    font-size: 20px;
  }

  @media (max-width: 768px) {
  .slidecontant {
    margin-top: 30px;
  }
  
  .slidecontant1 {
    font-size: 20px;  /* smaller text for tablets */
  }

  .slidecontant2 {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .slidecontant {
    margin-top: 20px;
  }
  
  .slidecontant1 {
    font-size: 18px;  /* even smaller text for mobile */
  }

  .slidecontant2 {
    font-size: 14px;
  }
}




   .banner-next {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 60px;
      width: 100%;
      margin: auto;
      background:linear-gradient(whitesmoke,rgb(244, 161, 227));
      border-radius: 15px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* LEFT SIDE IMAGES */
    .images {
      position: relative;
      width: 50%;
      height: 300px;
      
    }

    .images img {
      position: absolute;
      width: 200px;
      height: 200px;
      object-fit:fill;
      border-radius: 50%; /* makes images circular */
      border: 5px solid #fff;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      margin-right: 20px;
    }

    .images img:nth-child(1) { top: 40px; left: -30px; z-index: 1; }
    .images img:nth-child(2) { top: 20px; left: 80px; z-index: 2; }
    .images img:nth-child(3) { top: 60px; left: 140px; z-index: 3; }
    .images img:nth-child(4) { top: 30px; left: 250px; z-index: 4; }
    .images img:nth-child(5) { top: 70px; left: 320px; z-index: 5; }
    

    /* RIGHT SIDE CONTENT */
    .content {
      width: 45%;
      padding-left: 20px;
    }

    .content h1 {
      font-size: 42px;
      color: #222;
      margin-bottom: 20px;
    }

    .content p {
      font-size: 18px;
      color: #555;
      margin-bottom: 30px;
      line-height: 1.6;
    }

    .content a {
      text-decoration: none;
      background: #ff4d6d;
      color: #fff;
      padding: 12px 24px;
      border-radius: 25px;
      font-weight: bold;
      transition: 0.3s;
      margin-left: 30%;
      
    }

    .content a:hover {
      background: #e63950;
    }



@media (max-width: 1024px) {
  .banner-next {
    padding: 40px;
  }

  .images {
    width: 45%;
    height: 250px;
  }

  .images img {
    width: 150px;
    height: 150px;
  }

  .content {
    width: 50%;
    padding-left: 15px;
  }

  .content h1 {
    font-size: 36px;
  }

  .content p {
    font-size: 16px;
  }

  .content a {
    padding: 10px 20px;
    margin-left: 20%;
  }
}

/* Small tablets / large phones */
@media (max-width: 768px) {
  .banner-next {
    flex-direction: column;
    padding: 30px;
  }

  .images {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
  }

  .images img {
    width: 120px;
    height: 120px;
  }

  .content {
    width: 100%;
    padding-left: 0;
    text-align: center;
  }

  .content h1 {
    font-size: 28px;
  }

  .content p {
    font-size: 14px;
  }

  .content a {
    margin-left: 0;
  }
}
/* Smartphone View (max 480px) */
@media (max-width: 480px) {
  .banner-next {
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    text-align: center;
  }

  .images {
    position: relative;
    width: 100%;
    height: 200px;  /* reduce banner height for mobile */
    margin-bottom: 20px;
  }

  .images img {
    position: absolute;
    width: 80px;   /* smaller circle size */
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    object-fit:fill;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  }

  /* Adjust absolute positions for mobile */
  .images img:nth-child(1) { top: 40px; left: 10px; z-index: 1; }
  .images img:nth-child(2) { top: 20px; left: 80px; z-index: 2; }
  .images img:nth-child(3) { top: 50px; left: 150px; z-index: 3; }
  .images img:nth-child(4) { top: 30px; left: 220px; z-index: 4; }
  .images img:nth-child(5) { top: 60px; left: 290px; z-index: 5; }


  .content {
    width: 100%;
    padding-left: 0;
  }

  .content h1 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .content p {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .content a {
    margin-left: 0;
    font-size: 14px;
    padding: 10px 18px;
  }
}


     .card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
  gap: 130px;
  max-width: 1000px;
  margin-top: 90px;
  margin-left: 10%;
}

.card {
  width: 300px;
  height: 350px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: relative;
  background: #fff;
}

.card img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit:fill;
  transition: opacity 0.4s ease;
}

.card img.hover {
  opacity: 0;
}

.card:hover img.hover {
  opacity: 1;
}

.card:hover img.default {
  opacity: 0;
}

@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
    gap: 80px;
    margin-left: 5%;
  }

  .card {
    width: 150px;
    height: 250px;
  }
}




@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
    gap: 40px;
    margin-left: 5%;
  }

  .card {
    width: 100%;   /* Auto fit inside grid */
    height: 300px; /* Smaller height for phone */
  }
}

/* 📱 Small Phones (<= 480px) */
@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr; /* 1 card per row */
    gap: 20px;
    margin-left: 0;
  }

  .card {
    width: 90%;
    height: 400px;
    margin: 0 auto; /* center align */
  }
}

/* Default styles already in your inline styles */

/* Responsive Footer */
@media screen and (max-width: 768px) {
  footer div[style*="display:flex"] {
    flex-direction: column;
    /* align-items: center; */
  }

  footer div[style*="flex:1"],
  footer div[style*="flex:2"] {
    margin-bottom: 20px;
    text-align: center !important;
  }

  footer div[style*="margin-right: 50px"] {
    margin-right: 0 !important;
  }

  footer img {
    width: 120px;
  }

  footer h4 {
    margin-left: 0 !important;
  }

  footer p {
    margin-left: 0 !important;
  }
}

@media screen and (max-width: 480px) {
  footer {
    padding: 30px 15px;
  }

  footer img {
    width: 100px;
  }

  footer h4 {
    font-size: 16px;
  }

  footer p, footer a {
    font-size: 14px;
  }
}