@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed&family=Montserrat:wght@300&family=Roboto:ital,wght@0,100;0,300;0,400;1,100&display=swap');
/* font-family: 'Cabin Condensed', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif; */
*{
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    background-color:whitesmoke;
}
/* Navigation Bar Styling */
.logo img {
    width: 1.5rem;
}
.navbar {
    font-size: 1.5rem;
    background-color: #14213D;
    padding: 10px;
    position: fixed;
    width: 100%;
}
.navbar a {
    color: aliceblue;
    text-decoration: none;
    padding: 20px;
}
.navbar ul {
    display: flex;
    list-style-type: none;
    padding:20px;
}
.logo:first-child {
    flex-grow: 1;
}

.links:hover {
    background-color: darkcyan ;
}
/* Responsive Navigation Bar */
.navbar-toggle {
    display: none;
    color: #D7DEDC;
  }
@media (max-width: 600px) {
    .navbar ul {
      flex-wrap: wrap;
      gap: 2px;
    }
    .navbar-toggle {
      display: block;
    }
    .links {
      display: none;
      width: 100%;
      text-align: center;
      background-color: #000;
      border: solid white 1px;
    }
    .active {
      display: block;
    }
  }
.home-page {
    display: flex;
    padding: 20px;
    font-size: 1.5rem;
    height: 70%;
    background-image: url("/images/bg.jpg");
    background-size: cover;
}
.home-content {
    overflow: auto;
    margin: 20px;
    margin-top: 90px;
    background-color: rgba(14, 14, 58, 0.75);
    height: 70vh;
    text-align: center;
}
.home-content h2 {
    padding-top: 20px;
    margin-top: 20px;
    color: white;
    padding: 20px;
}
.home-content p {
    color: white;
    padding: 20px;
}
/* Blog Section */

.blog-section {
    display: flex;
    flex-wrap: wrap;
    height: 75%;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}
.content {
    padding: 20px;
    text-align: center;
}
.blog-section .card{
    flex: 1 1 50%;
    padding: 0;
    background-color:#14213D;
    border-radius: 20px;
}
.content h2 {
    font-size: 1rem;
    padding: 20px;
    color: #D7DEDC;
}
.content p {

    font-size: 0.9rem;
    color: aliceblue;
    margin: 1px;
}
.content a {
    text-decoration: none;
    font-size: 0.75rem;
    color: #fff;
    letter-spacing: 2px;
    display: inline-block;
    background-color: #000;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.content a:hover {
    background-color: darkslategray;
    transition: 1s ease;
  }
.card:hover {
    transform: translateY(-10px); /* Moves the card up slightly */
    box-shadow: 10px 10px 5px lightblue; /* Increases the shadow size */
    background-color: darkslateblue;
  }
.featured-image-one {
    border-radius: 20px;
    padding: 20px;
    background-position: center;
    min-height: 15.6rem;
    background-image: url(/images/city_victory.png);
    background-size: cover;
}
.featured-image-two {
    border-radius: 20px;
    padding: 20px;
    height: 15.6rem;
    background-image: url(/images/Inter\ to\ final.png);
    background-size: cover;
    background-position: center;
}
.featured-image-three {
    border-radius: 20px;
    padding: 20px;
    height: 15.6rem;
    background-image: url(/images/turkey-fbl.png);
    background-size: cover;
    background-position: center;
}

.blog-section .button {
    color:black;
    font-size: 1rem;
    background-image: radial-gradient(lightblue, white);
    border-radius: 20px;
    padding: 10px;
    text-decoration: none;
    margin: 20px;
}
.button a:hover {
    background-color: darkslategray;
    transition: 1s ease;
}
/* Contact Section */
.contact-sec {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: darkslateblue; 
    padding: 30px; 
    height: 50%;

  }
  
  .contact-content {
    max-width: 31.5; 
    text-align: center;
    padding: 20px; 
  }
  
  input,
  textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 5px 0;
    border: 5px solid green;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  button {
    width: 100%;
    background-color: darkgreen;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button[type="submit"]:hover {
    background-color: rgb(97, 104, 169);
    transition: 1s ease;
  }



/* Footer Starts from Here */
.footer-content {
    display: flex;
    justify-content: space-around;
    font-size: 1rem;
    background-color: #14213D;
    padding: 10px;
}
.footer-content a {
    color: aliceblue;
    text-decoration: none;
}
.footer-content li {
    list-style-type: none;
    padding:20px;
}

.copyright {
    color: #D7DEDC;
}
/* This Media Screen is making the flex responsive over the specified px */
@media screen and (min-width: 1024px) {
    .blog-section .card {
        flex: 1 1 30%;
    }
}
@media screen and (min-width: 992px) {
    .blog-section .card {
        flex: 1 1 20%;
    }
}
@media screen and (min-width: 768px) {
    .blog-section .card {
        flex: 1 1 25%;
    }
}