/* Custom Styles for the TV Mounting Website */

body {
    font-family: 'Arial', sans-serif;
}
    /* Basic Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
    }

    /* General Section Styling */
    section {
      padding: 40px 20px;
      text-align: center;
    }

    /* Header Image Section */
    .header {
      position: relative;
      height: 300px;
      background-image: url('img/t.jpeg');
      background-size: cover;
      background-position: center;
      color: white;
      text-align: center;
    }

    .header h1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 3rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* About Us Section */
    .about-us {
      background-color: #f4f4f4;
    }

    .about-us h2 {
      font-size: 2rem;
      margin-bottom: 15px;
    }

    .about-us p {
      font-size: 1rem;
      color: #666;
      line-height: 1.6;
    }

    /* Services Section */
    .services {
      background-color: #f4f4f4;
    }

    .service-item {
      display: inline-block;
      width: 30%;
      margin: 15px;
      padding: 20px;
      background-color: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .service-item:hover {
      transform: translateY(-10px);
    }

    .service-item h3 {
      margin-bottom: 10px;
    }

    .service-item p {
      font-size: 1rem;
      color: #666;
    }

    /* Contact Form */
    .contact-form input, .contact-form textarea {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    .contact-form button {
      padding: 10px 20px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .contact-form button:hover {
      background-color: #0056b3;
    }

    /* Responsive Styling */
    @media screen and (max-width: 768px) {
      .service-item {
        width: 45%;
      }
    }

    @media screen and (max-width: 480px) {
      .service-item {
        width: 100%;
      }

      .header h1 {
        font-size: 2rem;
      }
    }
.hero {
    background-image: url('img/ab.jpeg');
    background-size: cover;
    background-position: center;
    color: white;
}

        .bg-light-grey {
            background-color: #f7f7f7; /* Light grey background */
            padding: 50px 0; /* Add padding above and below the section */
        }

        /* Card styling */
        .card {
            border-radius: 15px; /* Rounded corners for the cards */
            overflow: hidden; /* Ensures the content inside the card is clipped within the rounded corners */
            border: none; /* Remove the default border */
        }

        /* Image styling */
        .card-img-top {
            border-radius: 15px 15px 0 0; /* Rounded corners on the top of the image */
            object-fit: cover; /* Ensures image covers the entire card without stretching */
            height: 200px; /* Set a fixed height for the images */
        }

        /* Card body styling */
        .card-body {
            padding: 20px; /* Padding inside the card */
            text-align: center; /* Center the text */
        }

        /* Spacing between cards */
        .card-columns {
            column-gap: 30px; /* Add gap between cards */
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: bold;
        }

  /* Custom Checkbox Style */
        .custom-checkbox .form-check-input:checked {
            background-color: #28a745; /* Green background when checked */
            border-color: #28a745; /* Green border when checked */
        }

        .custom-checkbox .form-check-input {
            border-radius: 50%; /* Circular checkbox */
            border-color: #ddd; /* Light grey border */
            width: 1.5rem; /* Larger size */
            height: 1.5rem; /* Larger size */
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }

        .custom-checkbox .form-check-input:checked::after {
            content: '\2713'; /* Unicode checkmark */
            color: white;
            font-size: 1rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .custom-checkbox .form-check-label {
            font-size: 1rem;
            font-weight: 600;
            margin-left: 0.5rem; /* Space between checkbox and text */
        }

        .custom-checkbox .form-check-input:focus {
            box-shadow: none; /* Remove focus outline */
        }

.features .col-md-4 {
    margin-top: 30px;
}

.features i {
    color: #0056b3;
}

footer {
    background-color: #212529;
}
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }

        .about-container {
            max-width: 1200px;
            margin: auto;
            padding: 20px;
        }

        .about-image {
            width: 100%;
            height: auto;
            border-radius: 10px;
            object-fit: cover; /* Ensures the image covers the space without distortion */
        }

        .about-content {
            padding: 40px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        

        h1 {
            text-align: center;
            font-size: 36px;
            margin-bottom: 20px;
            color: #333;
        }

        p {
            font-size: 18px;
            color: #555;
            line-height: 1.6;
            text-align: center;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 28px;
            }

            p {
                font-size: 16px;
            }
        }

        /* Mobile First - Small Screens */
        @media (max-width: 480px) {
            .about-container {
                padding: 10px;
            }

            h1 {
                font-size: 24px;
            }

            p {
                font-size: 14px;
            }
        }