index.css

/* The @media rule is used in media queries to apply different styles for different media types/devices.
   Media queries can be used to check many things, such as: (1) width and height of the viewport,(2) width and height of 
   the device, (3) orientation (is the tablet/phone in landscape or portrait mode?), (4) resolution 
   Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to 
   desktops, laptops, tablets, and mobile phones. */
@media (min-width: 768px) and (max-width: 1023px) {
    .carousel-item h4, .carousel-item p, .carousel-item .btn {
        font-size: 9px;
    }
}
    

body {
    background-color: black;
}

.navbar {
    margin: auto;
}

.navbar-brand {
    color: green !important; /* !important rule in CSS is used to add more importance to a property/value than normal. 
                                  !important rule will override ALL previous styling rules for that specific property 
                                  on that element! */
}

.navbar-brand i {
    color: white !important;
}

/* align-items :- determines how the items are positioned vertically within their container.
   align-items : center :- items are centered vertically in the container 
   justify-content :- determines how the items are positioned horizontally within their container.
   justify-content : center :- items are centered horizontally in the container
   text-align :- determines whether the text is aligned to the left, center, right, or justified within its container.
   text-align : center :- text is centered horizontally in the container
*/

.image1 {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.button1 {
    text-align: center; /* aligns the text of <div> element to the center */
    margin: auto; /* margin property - creates the space around the element i.e. creates space outside the element 
                  margin property - a shorthand property for 1) margin-top = Sets the top margin of an element
                                                             2) margin-right = Sets the right margin of an element 
                                                             3) margin-bottom = Sets the bottom margin of an element
                                                             4) margin-left = Sets the left margin of an element
                  margin-auto => the browser will calculate the margin by itself */
}

.heading1 {
    color: white;
    padding-top: 35px;
    text-align: center;
    padding-bottom: 20px;
}

.carousel{
    text-align: center;
    justify-content: center;
}

.carousel-inner img{
    margin: auto;
}

.carousel-item h4, p, .btn {
    margin: auto;
}

.blockquote {
    color: white;
    padding-top: 35px;
    text-align: center;
    padding-bottom: 20px;
}

.card {
    display: flex;
    justify-content: center; 
    text-align: center; 
    align-items: center;
    width: auto;
    max-width: 75%;
}

#Card1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

#image5 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a.text-white {
    text-decoration: none;
  }
  
  a.text-white:hover {
    color: gold !important;
  }