/* Global settings */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif; /* Sets the default font across the website */
}

/* Navbar styling */
.navbar {
    transition: all 0.3s ease-in-out; /* Smooth transition for any changes */
    background-color: #fff; /* Default background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adds shadow for depth */
}

/* Navbar styling when user scrolls down */
.navbar.scrolled {
    background-color: #111a3a; /* Darker background for scrolled state */
    /* Shadow maintained for consistency */
}

/* Styling for navbar brand and links */
.navbar-brand, .nav-link {
    color: #55C3E5 !important; /* Primary theme color for text */
    font-weight: bold; /* Increases text weight for emphasis */
}

/* Styling for the navbar brand logo */
.navbar-brand img {
    max-height: 75px; /* Restricts logo size for consistency */
    width: auto; /* Ensures width is auto-adjusted according to height */
    transition: transform 0.3s ease; /* Smooth transformation for logo */
}

/* Adjustments for the navbar brand logo on smaller screens */
@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 60px; /* Reduces logo size for smaller devices */
    }
}

/* Navbar toggler (hamburger menu) styling */
.navbar-toggler {
    border: 2px solid #55C3E5; /* Defines border color and width */
    background-color: transparent; /* Ensures toggler background is transparent */
    outline: none; /* Removes the outline for a cleaner look */
}

/* Ensures the toggler retains styling on focus/active without adding box-shadow */
.navbar-toggler:focus, .navbar-toggler:active {
    box-shadow: none;
}

/* Customizes the color of the navbar toggler icon */
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2355C3E5' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    /* SVG for the toggler icon, using primary color */
}

/* Targeting main nav links for glow effect on hover */
.navbar-nav > li > .nav-link:hover {
    color: #fff; /* Change text color on hover */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); /* Creates a glow effect */
}

/* Optional: Adjusting the glow color to match the primary or secondary color theme */
.navbar-nav > li > .nav-link:hover {
    color: #55C3E5; /* Primary color for text */
    text-shadow: 0 0 8px rgba(85, 195, 229, 0.3); /* Glow effect with primary color */
}




/* Primary button styling */
.btn-primary {
    background-color: #111a3a; /* Secondary color on hover/focus */
    border-color: #111a3a;

}

/* Hover and focus states for primary buttons */
.btn-primary:hover, .btn-primary:focus {
    background-color: #55C3E5; /* Primary button background color */
    border-color: #55C3E5; /* Primary button border color */
}

/* Footer styling */
.footer {
    background-image: url('/static/images/footer/footer.png'); /* Footer background image */
    background-size: cover;
    background-position: center;
    color: white; /* Text color for contrast */
}

/* Footer logo styling */
.footer-logo {
    max-height: 100px; /* Sets maximum height for the footer logo */
    width: auto;
    margin-bottom: 20px; /* Space below the logo */
    margin-top: 20px; /* Space above the logo */
}

/* Footer headings styling */
.footer h5 {
    margin-bottom: 15px; /* Space below headings */
    line-height: 2.0; /* Increases line height for visual separation */
    font-weight: bold; /* Bold text for headings */
    color: #fff; /* White color for contrast */
    padding-top: 20px; /* Adds space above the heading */
}

/* Footer paragraphs and links styling */
.footer p, .footer a {
    color: #ccc; /* Lighter text color for readability */
    margin-bottom: 10px; /* Consistent spacing between items */
    color: #fff; /* White text color for readability */
}

/* Styling for links in the footer */
.footer a {
    text-decoration: none; /* Removes underline from links */
    color: white; /* Ensures links are white for contrast */
}

/* Hover effect for links in the footer */
.footer a:hover {
    color: #55C3E5; /* Changes link color on hover for visual feedback */
}

/* Social icons adjustment */
.footer .fab {
    margin-right: 10px; /* Adds space after social icons */
}

/* Navbar link padding adjustment for larger screens */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: .7rem;
        padding-left: .7rem;
        padding-bottom: .9rem; /* Additional bottom padding for alignment */
    }
}

/* Responsive adjustments for the footer on smaller screens */
@media (max-width: 768px) {
    .footer .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .footer .row {
        flex-direction: column; /* Stacks footer items vertically */
    }

    .footer .col {
        margin-bottom: 20px; /* Adds space between stacked items */
    }

    .footer .col:last-child {
        margin-bottom: 0; /* Removes bottom margin from the last column */
    }
}

/* Dropdown item hover effect before scroll */
.navbar-light .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-light .navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: #55C3E5; /* Primary color for hover effect */
    color: white; /* White text for contrast */
}

/* Dropdown item hover effect after scroll */
.navbar.scrolled .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar.scrolled .navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: #111a3a; /* Secondary color for hover effect after scroll */
    color: white; /* Maintains white text for contrast */
}

/* Styling for banner section with gradient background */


/* Outline buttons styling */
.btn-outline-primary {
    background-color: #55C3E5; /* Background color for outline buttons */
    border-color: #55C3E5; /* Border color matches background */
    color: white; /* Text color for contrast */
}

/* Hover and focus states for outline buttons */
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: #111a3a; /* Changes background color on hover/focus */
    border-color: #111a3a; /* Border color matches the new background */
}


.gradient-section {
    background: linear-gradient(135deg,#55C3E5 20%, #55C3E5 20%, #111a3a 90%, #55C3E5 90%);
    color: white;
    text-align: center;
    padding: 20px 0; /* Adjustable based on content size */
}

.gradient-section p {
    padding: 0 20px; /* Adds padding to the paragraph */
}

.gradient-section-domain {
    background: linear-gradient(135deg,#55C3E5 20%, #55C3E5 20%, #111a3a 100%);
    color: white;
    text-align: center;
    padding: 20px 0; /* Adjustable based on content size */
}

.gradient-section-domain p {
    padding: 0 20px; /* Adds padding to the paragraph */
}


/* Ensure the main content section takes the full width and centers its children */


/* .main-content-section .btn-primary {
    background-color: #111a3a; /* Primary color for buttons
    border-color: #111a3a; Border color matches background
    color: white; /* Text color for contrast
} */

/* .main-content-section .btn-primary:hover, .main-content-section .btn-primary:focus {
    background-color: #55C3E5; /* Changes background color on hover/focus
    border-color: #55C3E5; /* Border color matches the new background
} */


/* .text-and-cta {
    background: rgba(255, 255, 255, 0.2); /* Light white background with 50% opacity
    padding: 20px; /* Adds padding inside the box
    border-radius: 10px; /* Optional: Adds rounded corners to the box
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds subtle shadow for depth
    width: 50%; /* Adjust based on layout needs
    text-align: left; /* Aligns text to the left
    margin-left: 5%;
    z-index: 2; /* Ensure the box is above the background image
} */

.features-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates two columns */
    column-gap: 10px; /* Adjusts the gap between columns */
    row-gap: 5px; /* Adjusts the gap between rows */
    list-style-type: none; /* Removes default list styling */
    padding: 5px;
    font-weight: bold; /* Makes the text bold */
    justify-content: center;
    text-align: center;
}


.banner-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: -50px; /* Adjusts the margin to align with the next section */

}

.swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    background-size: cover; /* Ensures background image covers the slide */
    background-position: center center; /* Centers the background image */
    min-height: 50vh; /* Minimum height for larger devices */

}


.swiper-container {
    width: 100%;

}

.swiper-slide h1{
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    justify: center;
    text-align: center;
    padding: 10px;
}

.swiper-slide h1 p {
    font-weight: normal;
    color: #fff;
    margin-bottom: 20px;
    margin-top: 20px;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    text-align: center; /* Center the content vertically */
    flex-direction: row;
    font-size: 1rem;
    padding: 10px;
}

.swiper-slide img {
    margin: 0 auto; /* Center the image horizontally */
    display: block; /* Ensure the image behaves as a block element */
    max-width: 800px; /* Ensure the image does not exceed the container width */
    max-height: 600px; /* Ensure the image does not exceed the container height */
}



.text-and-button {
    flex: 1;
    color: #fff; /* Ensure text is white for readability */
    background: rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    z-index: 2;
}


.side-image {
    width: 100%;
    max-width: 500px;
    height: auto;
}

.swiper-pagination {
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 10px;

}


@media (max-width: 768px) {
    .swiper-slide {
        min-height: 100vh; /* Full viewport height on smaller devices */
        justify-content: flex-start; /* Adjust content alignment as needed */

    }
}

    .side-image {
        width: 100%;
        margin: 20px auto;
    }

    .text-and-button {
        text-align: center;
    }
}


/* Domain Search Section General Styling */
.domain-search-section .input-group {
    position: relative; /* Ensures proper positioning of elements */
    max-width: 400px; /* Adjust the max-width to make the search box narrower */
    margin: auto; /* Centers the form */

}


.domain-search-section .form-control {
    border-radius: 0.25rem; /* Ensures rounded corners for the input */
    border-right: none; /* Removes the right border to blend with the button */
    max-width: 600px; /* Adjust the max-width to make the input field narrower */
    text-align: center; /* Centers the text in the input field */

}

.input-group {
    display: flex;
    justify-content: center;
}

.domain-search-section .btn-primary {
    border-radius: 0.25rem; /* Ensures rounded corners for the button */
    border: 2px solid #55C3E5; /* Ensures the top border for the button is visible */

}

/* Adjusting for Mobile Devices */
@media (max-width: 768px) {
    .domain-search-section .input-group {
        flex-direction: column; /* Stacks elements vertically */
    }

    .domain-search-section .form-control,
    .domain-search-section .btn-primary {
        width: 100%; /* Full width for both elements */
        border-radius: 0.25rem !important; /* Ensures rounded corners */
    }

    .domain-search-section .form-control {
        margin-bottom: 0.5rem; /* Adds a small gap between the input and button */
        border: 1px solid #55C3E5; /* Restores the right border for the input */
    }

    .domain-search-section .btn-primary {
        border: 2px solid #55C3E5; /* Ensures the top border for the button is visible */
        width: 100%; /* Full width for the button */
    }
}


/* Hosting Services Section General Styling */
.hosting-services-section {
    background-color: #f8f9fa; /* Light background color */

}

.hosting-service-card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
    transition: transform 0.3s ease-in-out; /* Smooth transform effect */

}

.hosting-service-card:hover {
    transform: translateY(-5px); /* Lifts card on hover */
}

.hosting-services-section .row {
    display: flex;
    justify-content: center; /* Centers the cards horizontally */
    flex-wrap: wrap; /* Allows cards to wrap */

}



.card-img-top {
    width: 100%; /* Ensures image covers the card width */
    height: auto; /* Maintains aspect ratio */
    border-top-left-radius: calc(0.25rem - 1px); /* Aligns with card border-radius */
    border-top-right-radius: calc(0.25rem - 1px);
}

.card-title {
    color: #111a3a; /* Theme's primary color for titles */
}

@media (max-width: 992px) {
    /* Stacks cards vertically on smaller devices */
    .col-12 {
        margin-bottom: 20px; /* Adds space between vertically stacked cards */
    }
}

/* Responsive adjustments for tablet and mobile devices */
@media (max-width: 1199px) {
    /* Adjustments for tablets and below, including iPad landscape */
    .hosting-services-section .row > .col-lg-3 {
        /* On devices less than 1200px wide, make the cards take up 50% width */
        flex: 0 0 100%;
        max-width: 100%;
    }
}


@media (max-width: 991px) {
    /* For devices smaller than 992px, stack the cards */
    .hosting-services-section .row > .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
}



.features-under-cards i {
    color: #55C3E5; /* Adjust the color to match your theme */
    margin-bottom: 15px; /* Adds space between the icon and the heading */

}

.features-under-cards h4 {
    color: #111a3a; /* Theme's primary color for headings */
    margin-bottom: 10px; /* Space between the heading and the paragraph */

}

.features-under-cards p {
    color: #666; /* Subtle color for the text */
    max-width: 80%;
    margin: auto; /* Centers the text */
}

@media (max-width: 768px) {
    .features-under-cards .col-md-4 {
        margin-bottom: 30px; /* Adds more space between items on smaller screens */
    }

    .features-under-cards p {
        max-width: 100%; /* Allows the text to use the full width */
    }
}



/* Testimonial Section Styling */
.testimonial-section {
    background-color: #f2f2f4 !important; /* Light background for the section */
    padding: 60px 0; /* Spacious padding for top and bottom */

}

.testimonial {
    background: #ffffff; /* White background for each testimonial */
    padding: 20px; /* Padding inside each testimonial */
    border-radius: 8px; /* Rounded corners for testimonials */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    margin: 0 15px; /* Margin to ensure space between testimonials */
}

.testimonial-text {
    font-style: italic; /* Italicize testimonial text for emphasis */
    color: #333; /* Dark text for readability */
}

.testimonial-author {
    font-weight: bold; /* Bold author name for emphasis */
    color: #111a3a; /* Color that matches your primary theme */
    margin-top: 10px; /* Space between testimonial text and author name */
    text-align: right; /* Align author name to the right */
}

@media (max-width: 768px) {
    .testimonial {
        margin: 0 auto 20px; /* Center testimonials on small screens */
    }
}



/* Offers Section Styling */

.offers-section {
    background-color: #111a3a;
    color: #fff;
    padding: 10px 0;
}

.offer-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Adjusts spacing */
    flex-wrap: wrap;
}

.offers-section .offer-text, .offers-section .offer-validity {
    font-size: 0.9rem;
}

.offers-section .promo-code {
    background-color: #E53E3E;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
}

.offers-section .btn-primary.order-now {
    background-color: #E53E3E;
    border: none;
    padding: 5px 15px;
    font-size: 0.9rem;
}

.offers-section .btn-primary:hover {
    background-color: #C53030;
}

@media (max-width: 768px) {
    .offer-content {
        justify-content: center;
        text-align: center;
    }
    .offers-section .offer-validity, .offers-section .order-now {
        flex-basis: 100%; /* Forces elements to occupy full width */
        order: 2; /* Adjusts ordering */
    }
    .offers-section .order-now {
        margin-top: 10px; /* Adds spacing above the button */
    }
    .offers-section .offer-validity {
        order: 1; /* Ensures validity date comes first */
        margin-bottom: 10px; /* Adds spacing below */
    }
}


/* Shared Hosting Packages Section Styling */
.shared-hosting-packages {
    padding: 40px 0;
    background-color: #f9f9f9; /* Light background for contrast, adjust as needed */

}

.shared-hosting-packages .section-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    color: #333; /* Adjust color to match your theme */
}

.hosting-package {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px; /* Space between cards */
}


.hosting-package h3 {
    color: #55C3E5; /* Highlight color, adjust as needed */
    margin-bottom: 15px;
}

.hosting-package ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.hosting-package ul li {
    margin-bottom: 10px;
    color: #666; /* Subtle text color */
}

.hosting-package .price {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
}

@media (max-width: 1080px) {
    .hosting-package {
        padding: 15px;
    }

    /* Ensure a single package per row on smaller screens */
    .shared-hosting-packages .col-md-4 {
        /* Adjust flex settings to ensure the card takes the necessary width */
        flex: 0 0 100%; /* Change 70% to 100% to use full container width */
        max-width: 60%; /* Set the max-width to 70% or desired width for visual appeal */


        /* Center the card within the container */
        margin: 0 auto; /* Auto margins on both sides */
    }
}


@media (max-width: 768px) {
    .hosting-package {
        padding: 15px;
    }

    /* Ensure a single package per row on smaller screens */
    .shared-hosting-packages .col-md-4 {
        /* Adjust flex settings to ensure the card takes the necessary width */
        flex: 0 0 100%; /* Change 70% to 100% to use full container width */
        max-width: 100%; /* Set the max-width to 70% or desired width for visual appeal */

        /* Center the card within the container */
        margin: 0 auto; /* Auto margins on both sides */
    }
}

.hosting-package {
    /* existing styles */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
    position: relative; /* Necessary for absolute positioning of the recommended banner */
}

/* Hover effect for all packages */
.hosting-package:hover {
    transform: translateY(-10px); /* Slightly lift the card */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Deeper shadow for prominence */
}

/* Styling for the recommended banner */
.recommended-banner {
    position: absolute;
    right: 0px;
    margin-top: 20px; /* Adjust based on your preference */
    background-color: #111a3a; /* Bootstrap primary color, or choose your own */
    color: white;
    padding: 5px 10px; /* Adjust based on your preference */
    font-size: 12px; /* Adjust based on your preference */
    z-index: 10;
    transform: rotate(-90deg); /* No need to rotate for top-right placement */
    border-radius: 3px; /* Optional: adds rounded corners */
    font-weight: bold; /* Optional: adds emphasis */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Deeper shadow for prominence */
}

.features {
    background-color: #f8f9fa;
    padding: 60px 0;

}

.features .row {
    margin-top: 50px;


}

.features .title h2, .features .title p {
    text-align: center;
    margin-bottom: 20px;
}

.feature-item {
    text-align: center;
    margin-bottom: 30px;
}

.features .feature-item i {
    color: #55C3E5; /* Adjust to match your website's primary color */
    margin-bottom: 15px;
}

.features h4 {
    margin-top: 15px;
    color: #333;
}

.features p {
    color: #666;
    font-size: 14px;
}

@media (max-width: 992px) {
    .features .feature-item {
        max-width: 50%;
        flex: 0 0 50%;
        margin: 0 auto 30px;
    }
}

@media (max-width: 768px) {
    .features .feature-item {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

.row.no-gutters {
    margin-right: auto;
}


/*special offer section */
/* General styling for the service sections */
.services-section .website-migration, .services-section .ssl-certificates {
    padding: 20px 20px;
    color: #fff; /* Adjust text color if needed */


}

.services-section .direct-admin, .services-section .expert-support {
    padding: 20px 20px;
    color: #fff; /* Adjust text color if needed */
}

.service-content {
    padding-left: 50px;
    padding-right: 50px;


}

/* Specific background colors for each section */
.services-section .website-migration {
    background-color: #242b45; /* Lighter color for website migration */

}

.services-section .ssl-certificates {
    background-color: #28304d; /* Slightly darker color for SSL certificates */


}

/* Specific background colors for each section */
.services-section .direct-admin {
    background-color: #242b45; /* Lighter color for website migration */

}

.services-section .expert-support {
    background-color: #28304d; /* Slightly darker color for SSL certificates */


}

/* FontAwesome icons color */
.services-section i {
    color: #55C3E5; /* Change to your primary color */
    padding: 20px;

}

/* Styling for titles and labels */
.services-section h3 {
    display: inline-block; /* Inline-block for alignment */
    margin: 0;
    vertical-align: middle;
}

.services-section .label {
    background-color: #55C3E5; /* Primary color for labels */
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
}

.services-section p {
    margin-top: 20px; /* Adjust spacing */

}

@media (max-width: 768px) {
    .services-section .service-content {
        text-align: center;
    }
}


/* Features Section in shared hosting */

.features-section {
    padding: 40px 0;
    background-color: #f9f9f9; /* Adjust background color as needed */
}

.feature-item {
    text-align: center;
    margin-bottom: 30px; /* Space between items */
}

.feature-item img {

    margin-bottom: 15px; /* Space between image and text */
    max-height: 50px; /* Adjust size as needed */
}

.feature-item h4 {
    margin-top: 10px; /* Space above heading */
    color: #333; /* Text color */
}

@media (max-width: 768px) {
    .feature-item {
        flex: 0 0 100%; /* Adjust to show 2 items per row on smaller screens */
        max-width: 100%; /* Match flex-basis */
    }
}

@media (max-width: 576px) {
    .feature-item {
        flex: 0 0 100%; /* Adjust to show 1 item per row on very small screens */
        max-width: 100%; /* Match flex-basis */
    }
}

.features-section p {
    color: #666; /* Subtle text color for descriptions */
    font-size: 14px; /* Adjust font size as needed */
    line-height: 1.6; /* Improve readability */
    margin-top: 10px; /* Space above the description */
}


/* Shared hosting features section */
.sharedhosting-features .feature-item i {
    color: #55C3E5; /* Primary color */
    margin-right: 8px;
}


.sharedhosting-features h2 {
    text-align: center;
    padding: 20px;
}

.sharedhosting-features h4 {
    display: inline-block;
    vertical-align: middle;
}

.sharedhosting-features .bullet-list {
    list-style: none;
    padding-left: 0;
}

.sharedhosting-features .bullet-list li:before {

    color: #55C3E5; /* Primary color */
    font-size: large;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.sharedhosting-features .bullet-list li {
    padding-left: 1em;
}

@media (max-width: 1080px) {
    .hosting-package {
        padding: 15px;
    }
}
/* About Host Whimsy Shared Section Styling Enhancements */
.about-hostwhimsy-shared {
    background-color: #f9f9fa; /* Enhanced light background color for contrast */
    padding: 60px 0; /* Increased top and bottom padding for more space */
    border-radius: 10px; /* Adds rounded corners for a modern look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.about-hostwhimsy-shared h2, .about-hostwhimsy-shared h3 {
    color: #111a3a; /* Updated to a darker, more contrasting color */
    margin-bottom: 20px; /* Adds more space after headings */
    font-weight: bold; /* Makes headings bold for emphasis */
}

.about-hostwhimsy-shared p, .about-hostwhimsy-shared li {
    color: #333; /* Darker text color for better readability */
    line-height: 1.8; /* Increased line height for better readability */
    font-size: 16px; /* Slightly larger font size */
}

.about-hostwhimsy-shared ul {
    list-style: none; /* Removes default list style */
    padding-left: 0; /* Resets padding */
}

.about-hostwhimsy-shared ul li {
    position: relative;
    padding-left: 30px; /* Adds space for custom bullet */
    margin-bottom: 10px; /* Space between list items */
}

.about-hostwhimsy-shared ul li:before {
    content: ""; /* Adds custom bullet */
    position: absolute;
    left: 0;
    top: 10px;
    width: 10px;
    height: 10px;
    background-color: #55C3E5; /* Primary theme color */
    border-radius: 50%; /* Makes bullet round */
}

/* Adds a call-to-action button for further engagement */
.about-hostwhimsy-shared .cta-button {
    display: inline-block;
    background-color: #55C3E5; /* Primary button color */
    color: #ffffff; /* Text color */
    padding: 10px 20px; /* Padding inside the button */
    border-radius: 5px; /* Rounded corners for the button */
    margin-top: 20px; /* Space above the button */
    text-decoration: none; /* Removes underline from links */
    font-weight: bold; /* Bold text for emphasis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds shadow for depth */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

.about-hostwhimsy-shared .cta-button:hover {
    background-color: #489cb8; /* Darker shade on hover for feedback */
}



/* Hosting Services Overview Section Styling Enhancements (Home Page) */
.index-hosting-services .services-heading, .index-hosting-services .advantage-heading {
    color: #111a3a;
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;

}

.index-hosting-services {
    background-color: #f8f9fa; /* Light background color for contrast */
    border-radius: 5px; /* Adds rounded corners for a modern look */
}

.index-hosting-services .advantage-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Ensures spacing between rows on mobile */
    display: flex;
    align-items: center;
    margin: 10px;

}

.index-hosting-services .advantages-list i {
    font-size: 2em;
    color: #55C3E5;
    margin-right: 15px;
    flex-shrink: 0; /* Prevents the icon from shrinking */
    padding: 10px; /* Adds padding for better spacing */

}

.index-hosting-services .advantage-item p {
    margin-bottom: 0; /* Removes bottom margin for list consistency */
    padding-left: 10px; /* Adjusts padding for better spacing */
    text-align: left;
    background-color: #f9f9fa;
}

/* Specific Styling for Hosting Services in Index Page */
.index-hosting-services .hosting-service-card .card-body {
    display: flex;
    flex-direction: column;

}

.index-hosting-services .hosting-service-card i {
    font-size: 24px; /* Larger icons */
    color: #55C3E5; /* Primary color for icons */
    margin-bottom: 15px;
    padding-top: 20px;
    padding-left: 20px;
}

/* Ensure all service cards are of equal height */
.index-hosting-services .row {
    display: flex;
    flex-wrap: wrap;
}

.index-hosting-services .row > div {
    display: flex;
    flex: 1;
    padding: 15px; /* Adjust padding as needed for spacing */
}

.index-hosting-services .hosting-service-card {
    flex: 1; /* Ensures cards take up equal width and height */
    display: flex;
    flex-direction: column;
}

.index-hosting-services .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.index-hosting-services .btn-primary {
    align-self: start; /* Aligns the button to the start of the flex container */
}

/* Adjustments for mobile devices */
@media (max-width: 768px) {
    .index-hosting-services .advantages-list .col-md-4 {
        /* Make each advantage item take the full width on smaller screens */
        flex: 0 0 100%;
        max-width: 100%;

    }
}

@media (max-width: 1199px) {
    .index-hosting-services .advantages-list .col-md-4 {
        /* Make each advantage item take the full width on smaller screens */
        flex: 0 0 100%;
        max-width: 100%;

    }
}

/* Adjust spacing for advantage items on mobile devices */
@media (max-width: 768px) {
    .index-hosting-services .advantages-list {
        padding: 0 15px; /* Adds padding on the sides for mobile */
    }
}

/* Additional responsive adjustments */
@media (min-width: 992px) {
    .index-hosting-services .advantages-list {
        display: flex;
        justify-content: space-between;
    }

    .index-hosting-services .advantage-item {
        flex: 1;
        margin-right: 20px; /* Adds right margin */
    }
}



/* Dedicated Servers Enhancements */
.server-tabs-section .nav-tabs {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
}

.nav-tabs .nav-link {
    color: #555;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    margin: 0 5px; /* Adds a little space between tabs */
}

.nav-tabs .nav-link.active {
    color: #fff !important; /* Ensures text is visible against active background */
    background-color: #55C3E5;
    border-color: #55C3E5;
}

.server-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 30px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.server-card .btn-primary {
    margin-top:20px;
}

.server-name {
    font-size: 24px;
    color: #111a3a;
    margin-bottom: 15px;
}

.server-specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: start; /* Adjusts the alignment of flex items */
    gap: 10px; /* Adds a gap between the flex items */
}

.server-specs p {
    flex: 0 1 calc(33.333% - 10px); /* Allows for three items per row with a gap */
    display: flex;
    align-items: center;
    font-size: 16px;
    margin: 5px 0; /* Adjust margin as needed */
}

.server-specs i {
    color: #55C3E5;
    margin-right: 10px;
}


@media (max-width: 768px) {
    .server-specs p {
        flex: 0 1 100%; /* Stacks the items vertically on smaller screens */
    }
}


/* About Us Page Styles */
.about-us-our-story,
.about-us-mvv,
.about-us-why-choose-us,
.about-us-cta {
    padding: 10px 0;
}

.about-us-mvv .container,
.about-us-why-choose-us .container,
.about-us-cta .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 10px;
}

.about-us-mvv h3,
.about-us-why-choose-us h2,
.about-us-cta h2 {
    color: #333;
}

.about-us-mvv p,
.about-us-why-choose-us p,
.about-us-cta p {
    color: #555;
}

.about-us-why-choose-us ul li {
    list-style-type: none;
    margin-bottom: 0px;
}

.about-us-why-choose-us ul li:before {
    content: "\2022";
    color: #55C3E5; /* Use primary color */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}


/* Terms of Service Page Styles */
.tos-content {
    background-color: #f9f9fb;
    padding: 40px 0;
}

.tos-content .container {
    max-width: 960px;
    margin: auto;
    padding: 15px;
}

.tos-content h2 {
    color: #333;
    margin-bottom: 20px;
}

.tos-content h3 {
    color: #555;
    margin-top: 20px;
    margin-bottom: 10px;
}

.tos-content p, .tos-content li {
    color: #666;
    line-height: 1.6;
}

.tos-content ul {
    padding-left: 20px;
    list-style-type: disc;
}

.tos-content li {
    margin-bottom: 5px;
}

/* Enhancements for readability */
.terms-section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}


/* Blog Page Specific Styles */

.blog-card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 100%; /* Adjust according to your design on larger screens */
    margin: 20px auto;
    padding: 16px;
    flex: 0 0 50%; /* Assuming 40% is your desired width on larger screens */
    max-width: 50%; /* Match this with the width or flex-basis */
}

/* Responsive adjustments */
@media (max-width: 768px) { /* Adjust the breakpoint as needed */
    .blog-card {
        flex: 0 0 95%; /* Take full width */
        max-width: 95%; /* Ensure max-width allows full width */
        width: 95%; /* You can also set width to 100% for clarity */
    }
}


.blog-card a {
    color: #55C3E5; /* Primary color */
    text-decoration: none;
}

.blog-card a:hover {
    color: #55C3E5; /* Darker color for hover */
    font-weight: bold;

}

.blog-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.blog-card img {
    width: 100%;
    height: auto;
}

.blog-card-body {
    padding: 2px 16px;
}

.blog-card h2 {
    margin-top: 16px; /* Add top margin to the title */
}


.blog-pagination {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.blog-pagination a {
    margin: 0 10px;
    text-decoration: none;
    color: #55C3E5;
}

.blog-pagination .current {
    margin: 0 10px;
}


/* Post Detail Specific Styles */
.post-detail {
    max-width: 800px; /* Adjust based on your preference */
    margin: auto;
    padding: 20px;
}

.post-detail h2 {
    font-size: 2rem; /* Large title */
    color: #333; /* Dark grey color for better readability */
    margin-bottom: 20px;
}

.post-detail img {
    max-width: 100%; /* Ensures image is not larger than the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: adds rounded corners to the image */
    margin-bottom: 20px;
}

.post-detail p {
    font-size: 1rem; /* Adjust based on your preference */
    line-height: 1.6; /* Improve readability */
    color: #444; /* Slightly lighter grey for the content */
    margin-bottom: 20px;
}

.post-detail a {
    display: inline-block;
    background-color: #111a3a; /* Use your brand color */
    color: #fff; /* White text */
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px; /* Rounded corners for the button */
    font-weight: bold;
}

/* Adjust the hover effect for the share button */
.post-detail a:hover {
    background-color: #55C3E5; /* A darker shade of the button color */
}



/* FAQ Section */
.faq {
    margin-top: 20px; /* Adds space between the last section and the FAQ */
}

.faq-title {
    margin-bottom: 20px; /* Space between the title and the first question */
    text-align: center;
}

.container-faq {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between questions */
    margin-bottom: 20px;
    padding: 20px;
    max-width: 90%; /* Set maximum width for the container */
    margin: 0 auto; /* Center the container */
}

.faq-entry {
    flex: 1 1 calc(55% - 10px); /* Take up half of the container width with gap */
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
}

.faq-question {
    margin: 0;
    padding: 10px;
    font-weight: bold;
    display: flex;
    justify-content: center; /* Center-align the question horizontally */
    align-items: center;
    text-align: center; /* Center question text */
}

.faq-question::before {
    content: "+";
    font-weight: bold;
    color: #55C3E5; /* Change the color as needed */
    padding: 5px;
}

.faq-question.active::before {
    content: "-";
}

.faq-answer {
    display: none;
    padding: 15px;
    margin-top: 10px; /* Space between question and answer */
    text-align: center; /* Center answer text */
}

@media (max-width: 768px) {
    .faq-entry {
        flex-basis: 100%; /* Single column on small screens */
    }
}


.not-found-image img {
    max-width: 100%;
    height: auto;
    display: block; /* Ensures the image is block level to center it if needed */
    margin: 0 auto; /* Centers the image if you wish */
}