header{
    width: 100vw!important;
    min-height: 65vh;
    background:  linear-gradient(90deg, #00000028 ,#0000009b), url(Frame28.png);
    background-size: cover;
    color: #F0F2F2;
}
header > .hero{
     margin-top: auto;
     margin-bottom: auto;
}
header > .hero > h1{
     font-size: 50px;
     font-style: normal;
     font-weight: 700;
}
header > .hero > h4{
     font-size: 15px;
     font-style: normal;
     font-weight: 400;
}
   
   .icon {
     width: 24px;
     height: 24px;
     transition: all 0.3s ease-in-out;
   }

   /* Additional styling for the "Who we are" section */
.about {
     background:  linear-gradient(90deg, #000000ca ,#000000c6), url(abtp123.webp);
     background-size: cover;
     background-repeat: no-repeat;
     background-color: #f9f9f9;
     padding-bottom: 50px; /* Add more padding to accommodate the additional content */
 }
 
 /* Styling for the content */
 .about-content {
     max-width: 800px; /* Increased max-width for better readability */
     margin: 0 auto;
     padding: 40px; /* Increased padding for better spacing */
 }
 
 /* Styling for the title */
 .about-title {
     font-size: 3em; /* Increased font size for emphasis */
     color: #ffffff;
     margin-bottom: 30px; /* Increased margin bottom for spacing */
 }
 
 /* Styling for the text */
 .about-text {
     font-size: 1.1em; /* Increased font size for better readability */
     color: #ffffff;
     line-height: 1.6;
     margin-bottom: 20px; /* Increased margin bottom for better spacing */
 }
 

 /* Styling for the services list */
 .services-list {
     list-style-type: disc; /* Changed list style to disc for better visibility */
     margin-left: 30px; /* Added left margin for indentation */
 }
 
 .services-list li {
     margin-bottom: 10px; /* Increased margin bottom for better spacing between list items */
 }

 .journey {
     background-image: linear-gradient(to bottom, #f8f9fa, #e9ecef); /* Gradient background */
     font-family: 'Roboto', sans-serif; /* Google Font Roboto for elegant typography */
     margin-bottom: 20px;

 }
 
 .milestone {
     background-color: #ffffff; /* White background */
     border-radius: 10px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Subtle shadow */
     transition: transform 0.3s ease-in-out; /* Smooth transition */
 }
 
 .milestone:hover {
     transform: translateY(-5px); /* Lift on hover */
 }
 
 .milestone h2 {
     color: #333333; /* Dark text color */
     font-size: 24px;
 }
 
 .milestone p {
     color: #666666; /* Text color */
     font-size: 16px;
 }
 
 .carousel-control-prev-icon,
 .carousel-control-next-icon {
     background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for carousel controls */
 }
 
 .carousel-control-prev,
 .carousel-control-next {
     width: 40px; /* Adjust control width */
     height: 40px; /* Adjust control height */
 }
 
 .carousel-control-prev:hover,
 .carousel-control-next:hover {
     background-color: rgba(0, 0, 0, 0.7); /* Darker background on hover */
 }
 
 
.pledge{
     background: linear-gradient(90deg,rgba(0,0,0,0.8),rgba(0,0,0,0)), url(img22a.jpg);
     background-repeat: no-repeat;
     background-position: right;
     background-size: cover;
     width: 100%;
     padding: 30px;
}
.pledge-div{
     width: 40%;
     padding: 10px;
}
.pledge-para{
     color: white;   
}
.pledge-header{
     color: white;
     font-size: 3.5rem;
     font-weight: 700;
}
/* Styling for services section */
.services {
     padding: 50px 0;
     background-color: #eeeeee;
     text-align: center;
 }
 
 /* Styling for individual services */
 .service {
     width: 200px;
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
     transition: transform 0.3s ease-in-out;
 }
 
 .service:hover {
     transform: translateY(-5px);
 }
 
 /* Styling for service icons */
 .service-icon {
     font-size: 3em;
     color: #101C28;
     margin-bottom: 20px;
 }
 
 /* Styling for service titles */
 .service-title {
     font-size: 1.2em;
     color: #333;
     margin-bottom: 10px;
 }
 
 /* Styling for service descriptions */
 .service-description {
     color: #666;
     font-size: 0.9em;
     line-height: 1.4;
 }

 .news-container{
    background-color: rgb(238, 238, 238);
    height: max-content;
    position: relative;
    display: flex;
    overflow-x: auto;
}
.main-blog-cont{
    margin: 10px;
    max-width: 250px;
    min-width:200px;
    /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); */
    border: hidden;
    border-radius: 10px;
    background-color: white;
}
.blog-img-cont{
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    height: 150px;
    background-size: cover;
    background-repeat: no-repeat;
    object-fit:cover;
    object-position: top;
}
.blog-text-cont{
    margin: 10px;
}
.blog-header{
    font-size: 1.5rem;
    font-weight: bold;
    color:black;
}
swiper-slide .text{
    font-size: 0.5rem;
}
/* .blog-text{} */
.date-posted{
    color: rgb(147, 146, 146);
    font-weight: bold;
    font-size: x-small;
}
.author-cont{
    display: flex;
    align-items: center;
}
.author-cont > h1{
    font-weight: bold;
    font-size:medium;
    color:black;
}
.author-img{
    border-radius: 100%;
    border: solid thin rgb(168, 81, 0);
    background-image: url(../logos/Rhino\ Security-01.png);
    background-size: cover;
    background-position: center;
    width: 50px;
    height: 50px;
    margin: 10px;
}
.empty{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width:500px) {
     .servie{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          margin: 0 auto;
     }
     .services{
          padding: 20px;
     }
     .service{
          width: 100%;
     }
     .message-head{
          width: 100%;
     }
     .pledge-div{
          width: 100%;
          padding: 20px;
     }
     .pledge-div>h1,.pledge-div>p{
          text-align: center;
     }
     .pledge{
          padding: 0;
     }
     .testimonials{
          flex-direction: column;
          justify-content: center;
          align-items: center;
     }
     .testimonials > div{
          max-width: 100%;
     }
}
@media screen and (max-width:850px) {
     .pledge{
          background: linear-gradient(90deg,rgba(0, 0, 0, 0.651),rgba(0, 0, 0, 0.629)), url(img22a.jpg);
          background-repeat: no-repeat;
          background-position: right;
          background-size: cover;
     }
     .pledge-div{
          width: 100%;
     }
     header > hero{
          width: 70vw!important;
     }
     header > .hero > h1 {
          font-size: 25px;
     }
     header > .hero > h4 {
          font-size: 10px;
     }
     .col-6 {
          width: 100%;
      }
      .journey > .h-100 > .row {
          gap: 50px;
      }
      .journey{
          margin: 0;
      }
      .about-content {
          width: 100%;
          margin: 0 auto;
          padding: 10px;
      }
      .swiper-container {
          width: 100%!important;
      }
      .onee{
          flex-direction: column!important;
      }
      .linikss-container {
          flex-direction: column!important;
          height: auto;
      }
}