@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Sen:wght@400..800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
body{
    font-family: "Sen", sans-serif;
    background-color: #f4f4f4;
    list-style: none;
}
i{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ri-government-line{
    font-size: 2.5rem;
    color:  rgb(25, 61, 49);
    background-color: #0F55;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}
.ri-search-eye-line{
    font-size: 2.5rem;
    color:  rgb(25, 61, 49);
    background-color: #0F55;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}
.ri-discuss-line{
    font-size: 2.5rem;
    color:  rgb(25, 61, 49);
    background-color: #0F55;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}
.ri-live-line {
    font-size: 2.5rem;
    color:  rgb(25, 61, 49);
    background-color: #0F55;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%; 
}
.navbar{
    display: flex;
    position: fixed;
    background-color: rgb(248, 247, 247);
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 3rem;
}
.navbar .logo{
    font-size: 1.5rem;
    font-weight: bold;
}
.navbar ul{
    list-style: none;
    display: flex;
    gap: 1.25rem;
}
.navbar a{
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}
.navbar a:hover{
    color: rgb(22, 100, 75);
}
.navbar button{
    background-color: rgb(22, 100, 75);
    color: #FFF;
    border: none;
    font-family: DM Sans, sans-serif;
    padding: 0.6rem 2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.hero{
    height: 75vh;
    padding: 10rem 5rem;
    display: flex;
    gap: 1.5rem;
    flex-direction: column;
    background-color: #007BFF;
    justify-content: center;
}
.hero a{
    background-color: rgb(22, 100, 75);
    text-decoration: none;
    padding: 1rem 2rem;
    width: 45%;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    border-radius: 0.5rem;
    color: #FFF;
}
.hero_cta{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: left;
    width: 25%;
}
.hero_content{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    text-align: left;
}
.hero h1{
    margin-bottom: 0.01rem;
}
.hero p{
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.coverage-section{
    display: flex;
    gap: 1.5rem;
    margin: 2rem auto;
    height: 35rem;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 4rem;
}
.title-div{
    display: flex;
    margin: 1.5rem auto;
    justify-content: center;
    flex-direction: column;
    gap: 0.7rem;
}
.title-div h2{
    font-size: 2.4rem;
    text-align: center;
}
.title-div p{
    font-size: 1.2rem;
    text-align: center;
}
.coverage-cards{
    display: flex;
    height: 60%;
    /* background-color: aqua; */
    margin: 0 auto;
    width: 95%;
    columns: 3;
    justify-content: center;
    gap: 2.5rem;
}
.coverage-cards p{
    font-size: 1rem;
    padding: 0 1rem;
    width: 85%;
    font-family: 'Inter', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}
.coverage-cards h3{
    font-size: 1.5rem;
    font-weight: 700;
    font-family: "Arial", Helvetica, sans-serif;
    margin: 0;
    text-align: center;
}
.card{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 94%;
    /* gap: 1.2rem; */
    background-color: #fff;
    padding: 2rem 0.5rem 0rem 0.5rem; 
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(68, 67, 67, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
}
.card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: 1.2rem;
}
.about-section{
    display: flex;
    width: 95%;
    margin: 0 auto;
    padding: 0rem 5rem;
    gap: 2.3rem;
}
.about-section img{
    border-radius: 2rem;
}
.img_div{
    display: flex;
    /* background-color: rgb(52, 163, 163); */
    padding: 2rem 0.5rem;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.about-section h2{
    font-size: 2.4rem;
    
}
.about_info{    
    height: 15rem;
    width: 75%;
    display: flex;
    flex-direction: column;
    /* background-color: aquamarine;   */
    gap: 1.5rem;
}
.about_info p{
    font-size: 1rem;
    color: #494848;
    font-weight: 200;
}
.analysis_div{
    display: grid;
    grid-template-columns: repeat(2, 35%); /* First column is fixed, second column is flexible */
    grid-template-rows: repeat(2 15rem); 
    width: 100%;
    padding: 2rem 0;
    margin: 0 auto;
    align-items: center;
    gap: 1.5rem;
}
.analysis_div h4{
    font-size: 2.7rem;
    font-family: "Inter", san-serif;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.about_analysis{
    color: rgb(5, 102, 70);
    padding: 0.8rem;
    background-color: rgba(132, 245, 207, 0.603);
    border-radius: 0.5rem;
    border-left: 0.25rem solid;
    transition: transform 0.5s ease-in-out;
}
.about_analysis1{
    color: rgb(226, 155, 0);
    padding: 0.8rem;
    background-color: rgba(255, 255, 0, 0.479);
    border-radius: 0.5rem;
    border-left: 0.25rem solid;
    transition: transform 0.5s ease-in-out;
}
.about_analysis:hover{
    transform: perspective(900px) rotateX(8deg) rotateY(-5deg) scale(1.05) translateY(-0.5rem);
}

.about_content button{
    padding: 0.8rem 1.65rem;
    color: white;
    background-color: rgba(9, 124, 86, 1);
    border: none;
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: 0.09s ease-in-out;
}
.about_analysis1:hover{
    transform: perspective(900px) rotateX(8deg) rotateY(-5deg) scale(1.05) translateY(-0.5rem);
}
.about_content button:hover{
    cursor: pointer;
    background-color: rgba(9, 124, 86, 0.8);
}
.featured_storiesdiv{
    display: flex;
    flex-direction: column;
    margin-top: 5rem;

}
.featured_card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background-color: aquamarine; */
    margin: 0 auto;
    padding: 0 6rem;
}
.featured_card img{
    height: 100%;
    width: 100%;
    object-fit: fill;
    border-top-left-radius: 1.54rem; /* Adjusts the curve of the top-left corner */
    border-top-right-radius: 1.54rem;
}
.img-div{
    width: 100%;
    height: 50%;
}
.fdiv1, .fdiv2{
    display: flex;
    gap: 2rem;
    width: 85%;
    margin: 0 auto;

}
.fcard{
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    text-align: left;
    width: 60%;
    height: 28rem;
    background-color: #fff;
    padding: 0; 
    border-radius: 1.5rem;
    box-shadow: 0 4px 8px rgba(68, 67, 67, 0.4);
    transition: transform 0.4s ease-in-out;
    perspective: 800px;
}
.fcard:hover{
    transform: translateY(-0.5rem);
    box-shadow: 0 6px 12px rgba(68, 67, 67, 0.6);
}
.fcard h4{
    margin: 0.5rem 0;
    text-align: left;
    font-size: 1.5rem;
    padding: 1rem;
}
.fcont p{
    padding: 0rem 1rem;
    font-size: 1rem;
    color: #494848;
    font-weight: 100;
}
.flearnMore a{
    text-decoration: none;
    margin-left: 1rem;
    color: rgba(9, 124, 86, 1);
    font-weight: 500;
    padding: 1rem 0rem;
    transition: transform 0.3s ease-in-out, background-color 0.3s, color 0.3s;
}
.flearnMore a:hover{
    color: rgb(10, 68, 49);
    text-decoration: underline;
    transform: translateY(-0.2rem);
}
.flearnMore {
    display: flex;
    padding: 1rem 0rem;
}
.flearnMore i{
    display: inline-block;
}
.featured_storiesdiv button{
    width: 11%;
    margin: 3rem auto;
    padding: 0.8rem 1.65rem;
    background-color: rgb(2, 109, 73);
    color: white;
    font: 400 1rem "Inter", sans-serif;
    border: none;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease-in-out;
}
.featured_storiesdiv button:hover{
    border: 1px solid rgb(2, 109, 73);
    background-color: transparent;
    color: rgb(2, 109, 73);
    font-weight: 600;
    cursor: pointer;
}
.getInvolved-section{
    margin: 0 auto;
    background-color: #007BFF;
    height: 30rem;
}
.getInvolved-section h2{
    margin: 0.8rem auto;
    text-align: center;
}
.subtitle{
    margin-bottom: 1.5rem;
    text-align: center;
    color: #494848;
    font-weight: 100;
}
.getInvolved-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 35rem;
}
.getInvolved-section h2{
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: center;
}
.getInvolved-cards{
    display: flex;
    margin: 0 auto;
    width: 85%;
    gap: 2.5rem;
    padding: 1.4rem 3rem;
    height: 22rem;
} 
.getInvolved-cards p{
    font-weight: 100;
    color: #494848;
    font-size: 0.89rem;

}
.gcard{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
    gap: 1.5rem;
    width: 40%;
    height: 19rem;
    background-color: #fff;
    padding: 1.2rem 1rem; 
    border-radius: 1.5rem;
    box-shadow: 0 4px 8px rgba(68, 67, 67, 0.4);
    transition: transform 0.3s ease-in-out;
}
.gcard:hover{
   box-shadow: 0 4px 8px rgba(68, 67, 67, 0.4); 
   transform: translateY(-0.8rem);
}
.gcard button{
    padding: 0.5rem 0.7rem;
    width: 45%;
    border:  none;
    cursor: pointer;
    font-size: 1rem;
    font-family: DM Sans;
    font-weight: 500;
    color: white;
    border-radius: 0.5rem;
    margin: 0 auto;
}
.gcard button:hover{
    opacity: 0.8;
}
.ri-user-heart-line{
    color:  rgb(37, 104, 81);
    margin: 0 auto;
    background-color: #f4f4f4;
    box-shadow: 0 4px 8px rgba(68, 67, 67, 0.2);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;

}
.ri-hand-heart-line{
    color:  #ffd30d;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 4px 8px rgba(68, 67, 67, 0.2);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}
.ri-team-line{
    color:  rgb(37, 104, 81);
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 4px 8px rgba(68, 67, 67, 0.2);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}
.whatpeoplesay-section{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding-top: 1rem;
    background-color: azure;
    height: 32rem;
}
.whatpeoplesay-section h2{
    margin: 0.8rem auto;
    text-align: center;
    font-size: 2rem;
}
.heading{
    margin: 0.8rem auto;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.testimonial-profile{
    display: flex;
    gap: 0.85rem;
    align-items: center;
}
.testimonial-profile i{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #ffd30d;
}
.testmonialCont{
    display: flex;
    flex-direction: column;
}
.testmonialCont span{
    font-weight: 100;
    color: #494848;
    line-height: 1.5rem;
    font-size: 0.89rem;
}
.wcard{
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 2.7rem;
    width: 30%;
    height: 19rem;
    background-color: #fff;
    padding: 1.2rem 1.3rem; 
    border-radius: 1.5rem;
    box-shadow: 0 4px 8px rgba(68, 67, 67, 0.4);
    transition: transform 0.3s ease-in-out;
}
.wcard:hover{
   box-shadow: 0 4px 8px rgba(68, 67, 67, 0.4); 
   transform: translateY(-0.8rem);
}
.wcard p{
    font-style: italic;
    line-height: 1.4rem;
}

.stars{
    display: flex;
    color: #ffd30d;
    gap: 0.2rem;
}
.whatpeoplesay-cards{
    display: flex;
    margin: 0 auto;
    width: 80%;
    gap: 2.5rem;
    padding: 1.4rem 3rem;
    height: 22rem;
} 
.stayupdated{
    display: flex;
    flex-direction: column;
    background-color: rgb(203, 255, 232);
    text-align: center;
    margin: 0 auto;
    width: 100%;
    padding: 2rem 3rem;
    gap: 1rem;
}
.heading h2{
    font-size: 2rem;
}
.stayupdated p{
    font-size: 0.97rem;
    color: #494848;
}
.submitForm {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.submitForm input{
    padding: 0.75rem 1rem;
    width: 25%;
    border-radius: 0.8rem;
    font-family: Sen, sans-serif;
    font-size: 1rem;
    border: none;
    outline: none;
}
.submitForm button{
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    color: #FFF;
    font-weight: 500;
    font-size: 0.95rem;
    font-family: DM Sans, sans-serif;
    background-color: rgb(22, 100, 75);
    border: none;
    outline: none;
}
.submitForm button:hover{
    opacity: 0.8;
    cursor: pointer;
}
.checkboxForm input[type="checkbox"]{
    height: 1.05rem;
    appearance: none;
    color: green;
    width: 1.05rem;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    border: 2px solid rgb(22, 100, 75);
    border-radius: 2px;
}
input[type="checkbox"]:checked {
    background-color: rgb(22, 100, 75); /* Green background when checked */
    border: none;
}

input[type="checkbox"]:checked::after {
    content: "✔"; /* Checkmark */
    font-size: 14px;
    color: white;
    position: absolute;
    top: 0px;
    left: 2px;
}

.checkboxForm{
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.checkboxForm label{
    font-size: 0.95rem;
    font-family: DM Sans, sans-serif;
    color: #2c2c2c;
}
.events{
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    margin: 3rem auto;
}
.events-card{
    display: flex;
    padding: 1rem 3rem;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    height: 23rem;
}
.ediv1, .ediv2{
    display: flex;
    padding: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    width: 40%;
    height: 19rem;
}
.ecard{
    display: flex;
    text-align: left;
    gap: 2.7rem;
    width: 95%;
    height: 19rem;
    background-color: #fff;
    /* padding: 1.2rem 1.3rem;  */
    border-radius: 1.5rem;
    box-shadow: 0 4px 8px rgba(68, 67, 67, 0.4);
    transition: transform 0.3s ease-in-out;
}
.ecard a{
    text-decoration: none;
    color: rgb(16, 94, 68);
    font-weight: 400;
    font-size: 0.87rem;
    display: flex;
    gap: 0.15rem;
    align-items: center;
}
.ecard:hover{
   box-shadow: 0 4px 8px rgba(68, 67, 67, 0.4); 
   transform: translateY(-0.8rem);
}
.ecard p{
    font-size: 0.95rem;
    color: #494848;
    line-height: 1.4rem;
}
.edate1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    width: 27%;
    height: 100%;
    align-items: center;
    background-color: rgb(16, 94, 68);
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
.edate{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    width: 27%;
    height: 100%;
    align-items: center;
    background-color: #ffd30d;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
.day{
    font-family: Inter, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.8rem;
}
.mon{
    font-family: Sen, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1rem;
}
.year{
    font-family: Sen, sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.2rem;
}
.econt{
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    text-align: left;
    gap: 0.5rem;
}
.time{
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.92rem;
    color: #494848;
}
.events button{
    width: 8%;
    margin: 0 auto;
    padding: 0.85rem;
    background-color: transparent;
    border: 1.5px solid green;
    border-radius: 0.2rem;
    color: green;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 0.87rem;
    transition: background 0.4s ease-in-out, color 0.3s ease-in-out;
}
.events button:hover{
    background-color: green;
    color: #FFF;
}
.footer {
    background-color: rgb(17, 24, 38);
    font-size: 1rem;
    padding-top: 2rem;
    color: #d3d3d3;
}
.footer p{
    font-family: Montserrat;
    font-size: 0.9rem;
}
.footer-bottom{
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #494848;
    padding: 2rem 0.8rem;
    margin: 0 auto;
    width: 95%;
}
.footer-content{
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding: 1rem;
    width: 95%;
    margin: 0 auto;
}
.footernewsletter{
    display: flex;
    flex-direction: column;
    width: 28%;
    padding: 0 2rem;
    gap: 1rem;
}
.subFoot input{
    background-color: rgb(31, 42, 56);
    padding: 0.9rem 0.6rem;
    border: none;
    outline: none;
    font-family: Montserrat;
    color: rgb(197, 199, 197);
    width: 65%;
    border-radius: 0.9rem;
}
.subFoot{
    display: flex;
    position: relative;
    margin-bottom: 4rem;
}
.ri-send-plane-fill{
    width: 3rem;
    height: 2.79rem;
    background-color: rgb(105, 175, 0);
    border-bottom-right-radius: 0.9rem;
    border-top-right-radius: 0.9rem;
    cursor: pointer;
    position: absolute;
    left: 14.8rem;
}
.footer-links{
    display: flex;
    flex-direction: column;
    width: 30%;
    align-items: center;
    gap: 0.8rem;
}
.footer-links a{
    text-decoration: none;
    font-size: 1rem;
    color: rgb(187, 187, 187);
}
.footer-links ul{
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}
.footer-contact p{
    font-size: 0.9rem;
    color: rgb(187, 187, 187);
}
.privacy-policy{
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 0;
    background-color: rgb(17, 24, 38);
}
.privacy-policy a{
    text-decoration: none;
    color: rgb(187, 187, 187);
    font-size: 0.9rem;
}
.footer-contact{
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.footer-contact span{
    display: inline-flex;
    margin-right: 0.2rem;
}
.footer-logo{
    display: flex;
    flex-direction: column;
    width: 20%;
    gap: 1.2rem;
}
.socialmedia{
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}
.socialmedia a{
    text-decoration: none;
    color: rgb(231, 231, 231);
    font-size: 1.2rem;
    background-color: rgb(31, 42, 56);
    padding: 0.4rem;
    border-radius: 50%;
}
.footer a:hover{
    color: goldenrod;
}

/* MOBILE RESPONSIVENESS */

@media (max-width: 768px) {

  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
  }

  .navbar ul {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }

  .navbar button {
    width: 100%;
    margin-top: 0.5rem;
  }

  .hero {
    padding: 8rem 2rem 2rem 2rem;
    text-align: center;
    height: auto;
  }

  .hero_cta {
    width: 40%;
    flex-direction: column;
    align-items: center;
  }

  .hero a {
    width: 100%;
  }

  .coverage-section {
    padding: 1rem;
    height: auto;
  }

  .coverage-cards {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 90%;
  }

  .about-section {
    flex-direction: column;
    padding: 1rem;
  }

  .about_info {
    width: 100%;
  }

  .analysis_div {
    grid-template-columns: repeat(2, 45%);
  }

  .featured_card {
    padding: 0 1rem;
  }

  .fdiv1, .fdiv2 {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .fcard {
    width: 100%;
  }

  .getInvolved-cards {
    flex-direction: column;
    height: auto;
  }

  .gcard {
    width: 100%;
  }

  .whatpeoplesay-cards {
    flex-direction: column;
    height: auto;
  }

  .wcard {
    width: 100%;
  }

  .submitForm {
    flex-direction: column;
  }

  .submitForm input {
    width: 100%;
  }

  .events-card {
    flex-direction: column;
    height: auto;
    padding: 0 1rem;
  }

  .ediv1, .ediv2 {
    width: 100%;
  }

  .ecard {
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .edate1, .edate {
    width: 100%;
    border-radius: 1rem 1rem 0 0;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
  }

  .footer-logo,
  .footer-links,
  .footer-contact,
  .footernewsletter {
    width: 100%;
    padding: 1rem 0;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

}