/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


.open-sans-default {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.fira-sans-default {
  font-family: "Fira Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* Body background */
body {
  background-color: #f5f5f5;
}

/* Main container */
.main_container {
  margin: 10px 100px;
  background-color: #f5f5f5;
}

/* Default Section */
.color_primar {
  color: #006a50;
}

.color_dec {
  color: rgba(14, 14, 14, 0.5);
}

.title_default {
  font-size: 40px;
  font-weight: bold;
}
.sub_title_default {
  font-size: 20px;
  font-weight: bold;
}
.dec_default {
  font-size: 16px;
  color: rgba(14, 14, 14, 0.7);
}

/*  Nav section */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav h1 {
  font-weight: bold;
  font-size: 32px;
  color: #0e0e0e;
}
nav button {
  padding: 15px 30px;
  color: #006a50;
  border: 1px solid #006a50;
  background-color: white;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
}

/* Sign In Button Hover Effect */
nav button {
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

nav button:hover {
  background-color: #006a50; /* dark green */
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 106, 80, 0.4);
}

/*  Banner Section */
body > section {
  margin: 80px 0px;
}
.banner {
  display: flex;
  background-color: #c6e4d6;
  padding: 80px 60px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-radius: 24px;
}
.banner .banner_title {
  font-size: 24px;
}
.banner .banner_dec {
  font-size: 50px;
  font-weight: bold;
  margin: 16px 0px;
}
.banner button {
  background-color: #006a50;
  color: white;
  border-radius: 8px;
  padding: 17px 34px;
  border: none;
}
.banner img {
  max-width: 420px;
}

.banner {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.banner:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.banner button {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.banner button:hover {
  background-color: #004d3d; /* Darker green */
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 106, 80, 0.4);
}


/* Pillars of Bangladesh 2.0 section */
.pillar .pillar_container {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.pillar .pillar_card {
  background-color: white;
  border-radius: 16px;
  border: 1px solid rgba(14, 14, 14, 0.15);
  padding: 24px;
}
.pillar .pillar_card img {
  width: 50px;
  height: 50px;
}

/* Pillars Hover Effect with Color Change */
.pillar .pillar_card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
}

/* Specific background colors on hover for each card */
.pillar .pillar_card:nth-child(1):hover {
  background-color: #d1f3e0; /* light green */
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 106, 80, 0.25);
}

.pillar .pillar_card:nth-child(2):hover {
  background-color: #cce7ff; /* light blue */
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 106, 80, 0.25);
}

.pillar .pillar_card:nth-child(3):hover {
  background-color: #fff3cc; /* light yellow */
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 106, 80, 0.25);
}

.pillar .pillar_card:nth-child(4):hover {
  background-color: #fddede; /* light red/pink */
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 106, 80, 0.25);
}

/* The Vision of Future */

.vision_dec {
  font-size: 16px;
  color: rgba(14, 14, 14, 0.7);
  text-align: justify;
}
.vision_container {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
.vision_card1 {
  padding: 32px;
  border-radius: 16px;
  background-color: rgba(84, 144, 245, 0.2);
}
.vision_card2 {
  padding: 32px;
  border-radius: 16px;
  background-color: #c6e4d6;
}
.vision_card3 {
  padding: 32px;
  border-radius: 16px;
  background-color: #f7ebcf;
}
.vision_card1 button {
  padding: 11px 20px;
  border-radius: 8px;
  background-color: #5490f5;
  border: none;
  color: white;
}
.vision_card2 button {
  padding: 11px 20px;
  border-radius: 8px;
  background-color: #09a15c;
  border: none;
  color: white;
}
.vision_card3 button {
  padding: 11px 20px;
  border-radius: 8px;
  background-color: #ffc239;
  border: none;
  color: white;
}
.vision_container img {
  width: 50px;
  height: 50px;
}

/* The Vision of Future Cards Hover */
.vision_container > div {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.vision_container > div:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.quote {
  background-color: white;
  padding: 48px 24px;
  margin: 32px 0px;
  border-radius: 16px;
  background-image: url(../assets/quote-bg.png);
  background-repeat: no-repeat;
  background-position: 25px 40px;
}

/* Your Opinion Matters */
.table_container{
  background-color: white;
  padding: 32px;
  border-radius: 16px;
  font-weight: bold;
}
table{
  width: 100%;
  border-collapse: collapse;
}
.table_header{
  display: flex;
  justify-content: space-between;
}
.first_table_row{
  background-color: #C6E4D6;
}
.table_header h1{
  font-size: 20px;
  font-weight: 600;
}
.table_container td{
  font-size: 16px;
  font-weight: 600;
}
table .btn_center{
  padding: 10px 14px;
  border-radius: 4px;
  background-color: #C6E4D6;
  font-weight: bold;
}
table .select_center{
  text-align: center;
  padding: 24px;
}
.btn_center button{
  padding: 12px 16px;
}
td,th{
  border:  1px solid rgba(14, 14, 14, 0.15);
  padding: 10px;
}

/* Recent News section */
.news_card {
  display: flex;
  margin: 20px 0px;
  justify-content: center;
  align-items: center;
  padding: 48px;
  background-color: white;
  border-radius: 24px;
  gap: 32px;
}
.news_card h1 {
  font-size: 25px;
  font-weight: bold;
  color: #0e0e0e;
}
.news_card_img {
  height: 300px;
  width: 400px;
  margin-top: 20px;
  border-radius: 24px;
  object-fit: cover;
}

.news_card button {
  background-color: #006a50;
  padding: 13px 26px;
  border-radius: 8px;
  color: white;
  font-size: 18px;
  border: none;
}

/* Read More Button Hover */
.news_card button {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.news_card button:hover {
  background-color: #004d3d; /* Darker green */
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 106, 80, 0.4);
}


/* Donate Today */
.donate {
  text-align: center;
  padding: 0px 100px;
}
.donate_container {
  display: flex;
  flex-direction: column;
}
.donate .taka {
  display: flex;
  justify-content: space-between;
}

.donate .taka h1 {
  padding: 40px;
  background-color: white;
  border-radius: 16px;
}

#taka_dif_col {
  background-color: #C6E4D6; 
  color: black; 
}

.donate button {
  background-color: #006a50;
  padding: 13px 26px;
  border-radius: 8px;
  color: white;
  font-size: 18px;
  border: none;
}

.input_taka{
    display: flex;
    flex-direction: column;
}
.donate_input{
    padding: 20px 40px;
    text-align: center;
    margin: 32px 0px;
    border: none;
}

/* Donate Now Button Hover */
.donate button {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.donate button:hover {
  background-color: #004d3d; /* Darker green */
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 106, 80, 0.4);
}

/* Taka Amount Hover Effect */
.donate .taka h1 {
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.donate .taka h1:hover {
  transform: translateY(-4px) scale(1.05);
  background-color: #006a50; /* Darker green */
  color: white;
  box-shadow: 0 8px 20px rgba(0, 106, 80, 0.4);
}

/* Subscribe Newsletter Section */

.newsletter{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #C6E4D6;
  border-radius: 24px;
  margin: 80px 0px;
  padding: 80px 200px;
}
.newsletter p{
  text-align: center;
}

/* Subscribe Newsletter Section Hover */
.newsletter {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.newsletter:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 106, 80, 0.3);
}


.input_div{
  display:flex;
  flex-direction: row;
  gap:0px;
  margin: 10px 0px;
}

.input_div .input_text{
  width: 475px;
  padding: 18px 40px;
  border-radius: 10px 0px 0px 10px;
  border: none;
}

.input_btn{
  border: none;
  padding: 17px 34px ;
  border-radius: 0px 10px 10px 0px;
  background-color: #006A50;
  font-size: 18px;
  color: white;
}

.input_btn {
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.input_btn:hover {
  background-color: #004d3d; /* Darker green */
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 106, 80, 0.4);
}

.input_text:hover {
  border: 2px solid #006a50;
}

/* footer section */
footer{
    background-color: white;
    text-align: center;
    justify-content: center;
    padding: 20px 300px;
}

footer>ul{
    display: flex;
    justify-content: center;
    margin-right: 40px;
    gap: 30px;
}

footer>ul li{
    list-style-type: none;
    
}

footer>ul li a img {
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

footer>ul li a img:hover {
  transform: scale(1.2);
  filter: brightness(1.2);
}

@media (max-width: 768px) {

  .main_container {
    margin: 10px 20px;
  }

  nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  nav h1 {
    font-size: 26px;
  }

  nav button {
    width: 100%;
    max-width: 180px;
    padding: 12px 20px;
    font-size: 16px;
  }

  .banner {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
    gap: 20px;
  }

  .banner .banner_title {
    font-size: 20px;
  }

  .banner .banner_dec {
    font-size: 36px;
  }

  .banner img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
  }

  .banner button {
    padding: 14px 28px;
  }

  .pillar .pillar_container {
    flex-direction: column;
    gap: 20px;
  }

  .pillar .pillar_card {
    width: 100%;
    padding: 16px;
    text-align: center;
  }

  .pillar .pillar_card img {
    margin: 0 auto 10px;
  }

  .vision_container {
    flex-direction: column;
    gap: 20px;
  }

  .vision_container > div {
    width: 100%;
    text-align: center;
  }

  .vision_container img {
    margin-bottom: 10px;
  }

  .quote {
    padding: 30px 20px;
    background-size: contain;
    background-position: center left;
  }

  .table_container {
    padding: 20px;
    overflow-x: auto;
  }

  table {
    width: 100%;
  }

  .input_btn,
  .btn_center button {
    padding: 10px 20px;
  }

  .news_card {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
    gap: 20px;
  }

  .news_card_img {
    width: 100%;
    height: auto;
  }

  .news_card h1 {
    font-size: 20px;
  }

  .news_card button {
    width: 100%;
    max-width: 180px;
  }

  .donate {
    padding: 0 20px;
  }

  .donate_container {
    width: 100%;
    gap: 20px;
  }

  .donate .taka {
    flex-direction: column;
    gap: 15px;
  }

  .donate .taka h1 {
    padding: 20px;
    width: 100%;
  }

  .input_taka {
    width: 100%;
  }

  .donate_input {
    width: 100%;
    padding: 15px 20px;
    margin: 20px 0;
  }

  .donate button {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }

  .newsletter {
    padding: 40px 20px;
  }

  .input_div {
    flex-direction: column;
    gap: 12px;
    align-items: center; 
  }

  .input_div .input_text {
    width: 100%;
    border-radius: 10px;
    padding: 15px 20px;
  }

  .input_btn {
    width: auto;         
    min-width: 160px;    
    padding: 15px 30px; 
    font-size: 16px;
    border-radius: 10px; 
    align-self: center; 
  }

  footer {
    padding: 20px;
  }

  footer>ul {
    flex-direction: column;
    gap: 15px;
    margin: 0;
  }

  footer>ul li a img {
    width: 40px;
    height: 40px;
  }
}