/*!
 * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
 */

body {
  padding-top: 54px;
}

    /* General styles */
    .image-container {
      padding: 10px;
    }
    .image-container img {
      width: 15%; /* Adjust image width to 48% for side-by-side display */
      height: auto;
    }

    /* Media query for small screens */
    @media (max-width: 600px) {
      .image-container {
        justify-content: center; /* Center the images */
      }
      .image-container img {
        width: 40%; /* Makes the images take 100% of the container width on smaller screens */
      }
    }


@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
}

.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.portfolio-item {
  margin-bottom: 30px;
}


/* Social media navigation */
        .social-navigation {
            position: fixed;
            top: 30%;
            right: 0;
            z-index: 3;
        }

        .social-navigation ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .social-navigation ul li {
            display: block;
            margin: 5px;
            background-color: rgba(0, 0, 0, 0.5);
            width: 35px; /* Smaller background size */
            height: 35px; /* Small circle */
            text-align: center;
            padding: 3px;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }

        .social-navigation ul li.twitter {
            background-color: black;
        }

        .social-navigation ul li.facebook {
            background-color: #3b5999;
        }

        .social-navigation ul li.google-plus {
            background-color: #dd4b39;
        }

        .social-navigation ul li.instagram {
            background-color: #e4405f;
        }

        .social-navigation ul li.call {
            background-color: #004080; /* Dark blue color */
        }

        .social-navigation ul li.whatsapp {
            background-color: #4AC959;
        }

        .social-navigation ul li a {
            color: white;
            text-decoration: none;
            font-size: 14px; /* Smaller icon text */
        }

        .social-navigation ul li i {
            font-size: 14px; /* Smaller icon size */
            line-height: 16px; /* Adjust line-height */
            transition: transform 1s ease; /* Add rotation transition */
        }

        /* Hover effect for icon */
        .social-navigation ul li:hover {
            background-color: rgba(0, 0, 0, 0.8); /* Darken all icons to a more subtle shade */
        }

        .social-navigation ul li.twitter:hover {
            background-color: #333333; /* Darken Twitter */
        }

        .social-navigation ul li.facebook:hover {
            background-color: #2d4373; /* Darken Facebook */
        }

        .social-navigation ul li.google-plus:hover {
            background-color: #cc3e2e; /* Darken Google Plus */
        }

        .social-navigation ul li.instagram:hover {
            background-color: #c13853; /* Darken Instagram */
        }

        .social-navigation ul li.call:hover {
            background-color: #003366; /* Darken Call button */
        }

        .social-navigation ul li.whatsapp:hover {
            background-color: #3b9f48; /* Darken WhatsApp */
        }

        /* Rotation effect */
        .social-navigation ul li:hover i {
            transform: rotate(360deg); /* Rotate the icon */
        }

        /* Mobile Responsiveness */
        @media only screen and (max-width: 768px) {
            .social-navigation {
                top: 35%;
            }

            .social-navigation ul li {
                width: 30px; /* Even smaller background size for mobile */
                height: 30px; /* Smaller circle */
            }

            .social-navigation ul li i {
                font-size: 12px; /* Even smaller icon for mobile */
                padding: 4px; /* Adjusted padding for smaller icons */
                line-height: 14px; /* Adjusted line-height */
            }
        }

        /* Desktop Adjustments */
        @media only screen and (min-width: 769px) {
            .social-navigation ul li {
                width: 40px; /* Even smaller width for the background */
                height: 40px; /* Adjust height accordingly */
            }

            .social-navigation ul li i {
                font-size: 14px; /* Icon size for desktop */
                padding: 9px; /* Adjusted padding for desktop */
            }
        }


/* General Carousel Styles */
.carousel-inner{
    width: 50px;
}
.carousel-inner img {
    margin-top: 60px;
    width: 100%; 
    height: 500px; 
    object-fit: cover; 
}

@media (min-width: 768px) {
    .carousel-inner img {
        height: 500px; 
    }
}

.carousel-caption {
    bottom: 15%;
    text-align: center;
}

.carousel-caption h5 {
    font-size: 1.5rem;
}

.carousel-caption .btn {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

.carousel {
    margin-bottom: 40px;
}

/* Controls */
.carousel-control-prev,
.carousel-control-next {
    width: 5%; 
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 20px 20px; 
}

          .logotop{
              width: 300px;
              height: 90px;
          }
/* Mobile Adjustments */
@media (max-width: 767px) {
    
          .logotop{
              width: 250px;
              min-width: 100px;
              height: 100px;
          float: left
          }
    
    .carousel-inner {
        height: 330px;
    }

    .carousel-inner img {
        margin-top: 60px;
        height: auto;
    }

    .carousel-caption {
        bottom: 5%;
        padding: 10px;
        display: block !important; 
        color: #fff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); 
    }

    .carousel-caption h5 {
        font-size: 1rem; 
    }

    .carousel-caption .btn {
        font-size: 0.9rem; 
        padding: 0.3rem 0.6rem;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 10%; 
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-size: 15px 15px; 
    }
}

        /* Apply margin-top of 20px on mobile screens */ .mt {
                margin-top: 100px;
            
        }

/* Custom styling for the card */
.custom-card {
    border: 1px solid #ddd; /* Light border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.custom-card:hover {
    transform: translateY(-10px); /* Lift the card on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

/* Styling for category and subcategory badges */
.badge.bg-warning {
    background-color: #FFD700; /* Bright yellow for badges */
    color: #000; /* Black text for contrast */
    font-weight: bold;
}

/* Styling for the Read More button */
.btn-warning {
    background-color: #FF5000; /* Custom orange */
    border-color: #FF5000;
    transition: background-color 0.3s ease; /* Smooth color change on hover */
}

.btn-warning:hover {
    background-color: #ff7f00; /* Darker orange when hovering */
    border-color: #ff7f00;
}

/* Styling for the card image */
.card-img-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Additional spacing for card content */
.card-body {
    padding: 20px;
}

.card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
}