.ccan-desktop-donate-1025x1200-child {
  align-self: stretch;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  display: none;
}
.ccan {
  margin: 0;
  height: 32px;
  position: relative;
  font-size: inherit;
  font-weight: 1000;
  font-family: "Mulish";
  display: inline-block;
  min-width: 95px;
  white-space: nowrap;
  color: #092c53;
}
.ccan-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-8xs) 0 0;
}
.ccan-logo-02-02-2 {
  height: 34.8px;
  width: 64px;
  position: relative;
  object-fit: contain;
}
.frame-parent,
.header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-parent {
  flex-direction: row;
  cursor: pointer;
}
.header-inner {
  flex-direction: column;
  padding: var(--padding-5xs-5) 0 0;
}
.home1 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 51px;
  transition: 0.6s ease-in-out;
  color: #092c53;
}


.home1:hover{
 color: #5688c7;
  
}


.home1::before{
  content: '';
  position: absolute;
  bottom: 1px;
 justify-items: center;
 
  width: 0%;
  height: 2px;
  background-color: #5688c7;
  transition: .5s;
  align-items: center;
  left: 15px;
}


.home1:hover::before{
  width: 50%;

}
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
  transition: 0.6s ease-in-out;
}


.about-us {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 78px;
  white-space: nowrap;
  color: #092c53;
  transition: 0.6s ease-in-out;
}


.about-us:hover{
 color: #5688c7;
  
}


.about-us::before{
  content: '';
  position: absolute;
  bottom: 1px;
 justify-items: center;
 
  width: 0%;
  height: 2px;
  background-color: #5688c7;
  transition: .5s;
  align-items: center;
  left: 15px;
}


.about-us:hover::before{
  width: 50%;

}
.component-1-child {
  width: 46px;
  height: 0;
  position: relative;
  display: none;
}
.component-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
  gap: var(--gap-9xs);
}
.events {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 57px;
  color: #092c53;
  transition: 0.6s ease-in-out;
}


.events:hover{
 color: #5688c7;
  
}


.events::before{
  content: '';
  position: absolute;
  bottom: 1px;
 justify-items: center;
 
  width: 0%;
  height: 2px;
  background-color: #5688c7;
  transition: .5s;
  align-items: center;
  left: 15px;
}


.events:hover::before{
  width: 50%;
}

.component-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
}
.frame-child {
  width: 46px;
  height: 4px;
  position: absolute;
  margin: 0 !important;
  top: 32px;
  left: 13.5px;
}
.component-2-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  position: relative;
  gap: var(--gap-3xs);
}
.digital-gallery {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 121px;
  white-space: nowrap;
  color: #092c53;
  transition: 0.6s ease-in-out;
}


.digital-gallery:hover{
 color: #5688c7;
  
}


.digital-gallery::before{
  content: '';
  position: absolute;
  bottom: 1px;
 justify-items: center;
 
  width: 0%;
  height: 2px;
  background-color: #5688c7;
  transition: .5s;
  align-items: center;
  left: 15px;
}


.digital-gallery:hover::before{
  width: 50%;

}
.component-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
}
.contact-us {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 92px;
  white-space: nowrap;
  color: #092c53;
  transition: 0.6s ease-in-out;
}


.contact-us:hover{
 color: #5688c7;
  
}


.contact-us::before{
  content: '';
  position: absolute;
  bottom: 1px;
 justify-items: center;
 
  width: 0%;
  height: 2px;
  background-color: #5688c7;
  transition: .5s;
  align-items: center;
  left: 15px;
}


.contact-us:hover::before{
  width: 50%;
}

.component-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
}
.navigation-links {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-9xl);
  max-width: 100%;
}
.search-icon-component {
  height: 32px;
  width: 31.7px;
  position: relative;
}
.search-icon-component1,
.search-icon-component2 {
  height: 19.69%;
  width: 30.28%;
  position: absolute;
  margin: 0 !important;
  top: 10.94%;
  right: 43.53%;
  bottom: 69.38%;
  left: 26.18%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 1;
}
.search-icon-component2 {
  height: 15.31%;
  width: 22.4%;
  top: 19.38%;
  right: 51.42%;
  bottom: 65.31%;
  z-index: 2;
}
.search-svg-01-1 {
  overflow: hidden;
  align-items: flex-start;
  position: relative;
  gap: var(--gap-3xs);
}
.header,
.navigation,
.search,
.search-svg-01-1 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.search {
  height: 52px;
  width: 51.7px;
  border-radius: var(--spacing-7);
  background-color: var(--white);
  align-items: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
}
.header,
.navigation {
  align-items: center;
  gap: var(--gap-45xl);
  max-width: 100%;
  font-size: var(--regular-links-size);
  font-family: var(--special-links);
}
.header {
  align-self: stretch;
  background-color: var(--white);
  box-shadow: var(--headers-blur);

  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-10xl) var(--padding-xl) var(--padding-mini);
  box-sizing: border-box;
  gap: var(--gap-213xl);
  top: 0;
  z-index: 99;
  position: sticky;
  text-align: left;
  font-size: var(--card-text-size);
  color: var(--primary);
  font-family: var(--font-messenger);
}
.back-button-icon {
  width: 32px;
  height: 32px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.back-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base) 0 0;
}
.fee-sabeelillahi {
  margin: 0;
  width: 263px;
  position: relative;
  font-size: inherit;
  line-height: 48px;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
}
.frame-group {
  width: 690px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-xl);
  max-width: 100%;
  text-align: left;
  font-size: var(--headline-3-size);
  color: var(--primary);
}
.and-it-is,
.and-to-him,
.he-may-multiply,
.who-is-it {
  margin: 0;
}
.who-is-it-container {
  margin: 0;
  width: 681px;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  font-family: inherit;
}
.verse {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl) 0 82px;
}
.d-hand-puts-gold-coin-donation-icon {
  height: 323px;
  width: 200px;
  position: relative;
  object-fit: contain;
}
.account-name {
  width: 172px;
  display: inline-block;
}
.account-name,
.account-number,
.bank {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
}
.account-number {
  align-self: stretch;
}
.bank {
  width: 63px;
  display: inline-block;
  min-width: 63px;
}
.account-info-table {
  width: 196px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs);
  min-width: 196px;
}
.account-details,
.central-council-of {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-family: inherit;
}
.account-details {
  width: 261px;
  line-height: 48px;
  font-weight: 500;
  display: inline-block;
}
.central-council-of {
  align-self: stretch;
  line-height: 32px;
  font-weight: 600;
}
.account-details1,
.bankbankbank {
  width: 157px;
  position: relative;
  line-height: 32px;
  font-weight: 600;
  display: inline-block;
}
.bankbankbank {
  margin: 0;
  width: 186px;
  font-size: inherit;
  font-family: inherit;
}
.account-information {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs);
  text-align: center;
  font-size: var(--headline-4-size);
  color: var(--black);
}
.submit {
  position: relative;
  font-size: var(--font-size-xl);
  font-weight: 500;
  font-family: var(--font-roboto);
  color: var(--black);
  text-align: left;
}
.component-31 {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-4) var(--padding-xl);
  background-color: var(--secondary);
  border-radius: var(--spacing-3);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.component-311:hover,
.component-312:hover,
.component-31:hover {
  background-color: var(--color-goldenrod);
}
.account-details-label,
.submit-button-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.submit-button-container {
  padding: var(--padding-5xs) 0;
}
.account-details-label {
  flex: 1;
  gap: var(--gap-base);
  min-width: 308px;
  max-width: 100%;
  text-align: left;
  font-size: var(--headline-3-size);
  color: var(--primary);
}
.account-info {
  flex: 1;
  align-items: center;
  padding: var(--padding-xl) 0;
  gap: 23px;
  min-width: 450px;
}
.account-info,
.d-hand-puts-gold-coin-donation-parent,
.donation-image-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.d-hand-puts-gold-coin-donation-parent {
  flex: 1;
  border-radius: var(--br-5xs);
  border: 2px solid var(--primary);
  flex-wrap: wrap;
  align-items: center;
  padding: 9px var(--padding-3xs);
  gap: 59px;
}
.donation-image-container {
  align-self: stretch;
  align-items: flex-start;
  padding: 0 0 0 var(--padding-base);
}
.projects {
  margin: 0;
  width: 136px;
  position: relative;
  font-size: inherit;
  text-decoration: underline;
  line-height: 48px;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
}
.project-details {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 22px 0 var(--padding-xl);
  text-align: left;
  font-size: var(--headline-3-size);
  color: var(--primary);
}
.mosque-building1 {
  padding-left: var(--padding-14xl);
}
.administrative1,
.mosque-building,
.mosque-building1 {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
}
.mosque-building {
  width: 225px;
  position: relative;
  line-height: 32px;
  font-weight: 400;
  display: inline-block;
}
.administrative1 {
  padding-left: var(--padding-14xl);
}
.administrative {
  width: 200px;
  position: relative;
  line-height: 32px;
  font-weight: 400;
  display: inline-block;
}
.administrative,
.student-scholarships,
.student-scholarships1 {
  margin: 0;
  font-size: inherit;
  font-family: inherit;
}
.student-scholarships1 {
  padding-left: var(--padding-14xl);
}
.student-scholarships {
  width: 278px;
  position: relative;
  line-height: 32px;
  font-weight: 400;
  display: inline-block;
}
.boreholes-for-remote-areas {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  padding-left: var(--padding-14xl);
}
.boreholes-for-remote-container {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
}
.ramadan-iftar-projects {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  padding-left: var(--padding-14xl);
}
.ramadan-iftar-projects-container {
  margin: 0;
  width: 303px;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
}
.care-for-less-privilege {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  padding-left: var(--padding-14xl);
}
.care-for-less-container {
  margin: 0;
  width: 287px;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
}
.donation-details,
.project-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.project-list {
  width: 349px;
  gap: var(--gap-3xs);
}
.donation-details {
  width: 992px;
  gap: 33px;
}
.donation {
  align-self: stretch;
  flex-direction: row;
  justify-content: flex-end;
}
.content,
.content-container,
.donation {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.content-container {
  width: 1055px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 55px;
}

.content {
  width: 1379px;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl) var(--padding-mini);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--headline-4-size);
  color: var(--black);
  font-family: var(--headline-4);
}
.ccan-logo-02-02-1,
.location-new-1 {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.ccan-logo-02-02-1 {
  align-self: stretch;
  height: 114.5px;
  max-width: 100%;
  object-fit: cover;
}
.location-new-1 {
  height: 34.1px;
  width: 24px;
}
.nigeria,
.ojo-street-idi-oro {
  margin: 0;
}
.ojo-street-idi-oro-container {
  flex: 1;
  position: relative;
  line-height: 24px;
}
.address-container {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-lg);
}
.free-phone-icon-14-thumb-1 {
  height: 24px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 24px;
}
.phone-number {
  position: relative;
  line-height: 24px;
  white-space: nowrap;
}
.phone-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-lg);
}
.email-icon {
  height: 19.2px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.ccanasalatuagbayegmailcom {
  height: 48px;
  width: 202px;
  position: relative;
  line-height: 24px;
  display: inline-block;
  flex-shrink: 0;
  max-height: 48px;
  word-break: break-word;
}
.contact-info,
.email-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-lg);
}
.contact-info {
  align-self: stretch;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}
.ic4-1-icon,
.social-media-links,
.youtube-1-icon {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 32px;
}
.ic4-1-icon,
.social-media-links {
  height: 32px;
  width: 32px;
}
.youtube-1-icon {
  align-self: stretch;
  width: 45.8px;
  max-height: 100%;
  
 transition: 0.6s ease-in-out;
  
}

.youtube-1-icon:hover{

transform: scale(1.1); /*zooming*/


}

.ic4-1-icon:hover{

  transform: scale(1.1); /*zooming*/
  
}

.social-media-links:hover{

  transform: scale(1.1); /*zooming*/
  
}


.social-media {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-5xl);
}
.footer-content {
  width: 244px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-4);
}
.explore {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  min-width: 84px;
}
.component-35 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  font-size: var(--headline-4-size);
  font-family: var(--headline-4);
}
.articles {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 63px;
  transition: 0.6s ease-in-out;
  cursor: pointer;
  color: #fff;
}


.articles:hover{
 color: #5688c7;
}


.component-36 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);
  
 transition: 0.6s ease-in-out;
  
}

.component-36:hover{

transform: scale(1.1); /*zooming*/

}


.dhkir-dua {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 105px;
  transition: 0.6s ease-in-out;
  cursor: pointer;
  color: #fff;
}


.dhkir-dua:hover{
 color: #5688c7;

}
.component-37 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);
  
 transition: 0.6s ease-in-out;
  
}

.component-37:hover{

transform: scale(1.1); /*zooming*/


}
.digital-gallery1 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 118px;
  transition: 0.6s ease-in-out;
  cursor: pointer;
  color: #fff;
}


.digital-gallery1:hover{
 color: #5688c7;
}
.component-38 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);


  transition: 0.6s ease-in-out;
  
}

.component-38:hover{

transform: scale(1.1); /*zooming*/

}
.youth-children {
  position: relative;
  line-height: 24px;
cursor: pointer;
color: #fff;

transition: 0.6s ease-in-out;
}


.youth-children:hover{
 color: #5688c7;
}

.component-34 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);
  text-decoration: none;
 transition: 0.6s ease-in-out;
  
}

.component-34:hover{

transform: scale(1.1); /*zooming*/


}
.archive {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 63px;
  cursor: pointer;
  transition: 0.6s ease-in-out;
  color: #fff;
}


.archive:hover{
 color: #5688c7;
}

.component-341 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);
  transition: 0.6s ease-in-out;
  
}

.component-341:hover{

transform: scale(1.1); /*zooming*/

}

.community-directory {
  position: relative;
  line-height: 24px;
  cursor: pointer;
  transition: 0.6s ease-in-out;
  color: #fff;
}


.community-directory:hover{
 color: #5688c7;
}

.component-342,
.component-35-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) var(--padding-3xs);
  transition: 0.6s ease-in-out;
  
}

.component-342:hover{

transform: scale(1.1); /*zooming*/

}

.component-35-parent {
  flex-direction: column;
  padding: var(--padding-5xl) 0;
}
.our-service {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
}
.component-40 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: var(--headline-4-size);
  font-family: var(--headline-4);
}
.home2 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 50px;
  transition: 0.6s ease-in-out;
  color: #fff;
}


.home2:hover{
 color: #5688c7;
}

.component-41 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0;
  
 transition: 0.6s ease-in-out;
  
}

.component-41:hover{

transform: scale(1.1); /*zooming*/


}
.about-us1 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 76px;
  color: #fff;
  transition: 0.6s ease-in-out;
}


.about-us1:hover{
 color: #5688c7;

}
.component-42 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0;
  
 transition: 0.6s ease-in-out;
  
}

.component-42:hover{

transform: scale(1.1); /*zooming*/


}
.live-streaming {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 124px;
  color: #fff;
  transition: 0.6s ease-in-out;
}


.live-streaming:hover{
 color: #5688c7;

}
.component-43,
.service-links {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0;
  
 transition: 0.6s ease-in-out;
  
}

.component-43:hover{

transform: scale(1.1); /*zooming*/


}
.service-links {
  flex-direction: column;
  padding: var(--padding-5xl) 0;
}
.our-newsletter,
.subscribe-to {
  margin: 0;
}
.subscribe-to-our-container {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 32px;
  font-weight: 400;
  font-family: inherit;
}
.email {
  position: relative;
  letter-spacing: 0.04em;
  line-height: 24px;
  font-weight: 300;
  display: inline-block;
  min-width: 38px;
}
.email-input-field {
  align-self: stretch;
  border-radius: var(--br-5xs);
  background-color: var(--white);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-3xs);
}
.email-input-field-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 148px;
}
.submit1 {
  position: relative;
  font-size: var(--font-size-xl);
  font-weight: 500;
  font-family: var(--font-roboto);
  color: var(--black);
  text-align: left;
  display: inline-block;
  min-width: 64px;
}
.component-311 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-3xs) var(--padding-xl);
  background-color: var(--secondary);
  border-radius: var(--spacing-3);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transition: 0.6s ease-in-out;
  
}

.component-311:hover{

transform: scale(1.1); /*zooming*/

}

.subscription-form {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs);
  font-size: var(--special-links-size);
  color: var(--inactive);
  font-family: var(--special-links);
}
.frame-container,
.subscription {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.subscription {
  width: 344px;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-5xl) 0;
  box-sizing: border-box;
  gap: var(--spacing-4);
  font-size: var(--headline-4-size);
  font-family: var(--headline-4);
}
.frame-container {
  align-self: stretch;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.submit2 {
  position: relative;
  font-size: var(--font-size-xl);
  font-weight: 500;
  font-family: var(--font-roboto);
  color: var(--black);
  text-align: left;
  display: inline-block;
  min-width: 64px;
}
.component-312 {
  cursor: pointer;
  border: 0;
  padding: var(--spacing-4) var(--padding-xl);
  background-color: var(--secondary);
  border-radius: var(--spacing-3);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transition: 0.6s ease-in-out;
  
}

.component-312:hover{

transform: scale(1.1); /*zooming*/


}
.quote-button-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-5xs) 0;
}
.lend-allah-a,
.surely-your-reward {
  margin: 0;
}
.lend-allah-a-container {
  position: relative;
  font-weight: 500;
  display: inline-block;
  max-width: 100%;
}
.donation-quote {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-base);
  max-width: 100%;
  font-size: var(--font-size-xl);
  font-family: var(--font-roboto);
}
.link-container {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
}
.footer,
.footer-content-parent,
.footer-links,
.link-container {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.footer-links {
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-3xs-7) 0 0;
  box-sizing: border-box;
  min-width: 578px;
}
.footer,
.footer-content-parent {
  flex-direction: row;
  justify-content: center;
}
.footer-content-parent {
  width: 1165px;
  flex-wrap: wrap;
  gap: var(--gap-13xl);
}
.footer {
  align-self: stretch;
  background-color: var(--primary);
  padding: var(--padding-62xl) var(--padding-xl) var(--padding-61xl-5);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--regular-links-size);
  color: var(--white);
  font-family: var(--special-links);
}
.ccan-desktop-donate-1025x1200 {
  width: 100%;
  position: relative;
  background-color: var(--background-colour);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-45xl);
  line-height: normal;
  letter-spacing: normal;
}
@media screen and (max-width: 1150px) {
  .header {
    gap: var(--gap-97xl);
  }
}
@media screen and (max-width: 1025px) {
  .navigation-links {
    display: none;
  }
  .fee-sabeelillahi {
    font-size: var(--font-size-10xl);
    line-height: 38px;
  }
  .verse {
    padding-left: var(--padding-22xl);
    box-sizing: border-box;
  }
  .account-details,
  .projects {
    font-size: var(--font-size-10xl);
    line-height: 38px;
  }
  .frame-container {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 750px) {
  .navigation {
    gap: var(--gap-13xl);
  }
  .header {
    gap: var(--gap-39xl);
  }
  .account-info-table {
    flex: 1;
  }
  .account-info {
    flex-wrap: wrap;
    min-width: 100%;
  }
  .d-hand-puts-gold-coin-donation-parent {
    gap: var(--gap-10xl);
  }
  .donation-details {
    gap: var(--gap-base);
  }
  .content-container {
    gap: 27px;
  }
  .donation-quote {
    flex-wrap: wrap;
  }
  .footer-links {
    min-width: 100%;
  }
  .footer-content-parent {
    gap: var(--gap-base);
  }
  .footer {
    padding-top: var(--padding-34xl);
    padding-bottom: var(--padding-33xl);
    box-sizing: border-box;
  }
  .ccan-desktop-donate-1025x1200 {
    gap: var(--gap-13xl);
  }
}
@media screen and (max-width: 450px) {
  .navigation {
    gap: var(--gap-base);
  }
  .header {
    gap: var(--gap-10xl);
  }
  .fee-sabeelillahi {
    font-size: var(--font-size-3xl);
    line-height: 29px;
  }
  .frame-group {
    flex-wrap: wrap;
  }
  .account-name,
  .account-number,
  .bank,
  .who-is-it-container {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }
  .account-details {
    font-size: var(--font-size-3xl);
    line-height: 29px;
  }
  .account-details1,
  .bankbankbank,
  .central-council-of {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }
  .projects {
    font-size: var(--font-size-3xl);
    line-height: 29px;
  }
  .administrative,
  .boreholes-for-remote-container,
  .care-for-less-container,
  .explore,
  .mosque-building,
  .our-service,
  .ramadan-iftar-projects-container,
  .student-scholarships,
  .subscribe-to-our-container {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }
  .submit1 {
    font-size: var(--font-size-base);
  }
  .subscription-form {
    flex-wrap: wrap;
  }
  .lend-allah-a-container,
  .submit2 {
    font-size: var(--font-size-base);
  }
  .ccan-desktop-donate-1025x1200 {
    gap: var(--gap-base);
  }
}

a{
  text-decoration: none;
}



.component-3128,
.frame-wrapper10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--special-links-size);
  color: var(--inactive);
  font-family: var(--headline-5);
}



input[type="email"]{ 
  display: flex;
  padding-block: 15px;
  padding: 15px;
  appearance: auto;
  text-rendering: auto;
  cursor: text;
  position: relative;
  
  
  border-radius: var(--br-5xs);
  align-items: center;
}

input{
  text-align: start;
  text-transform: none;
  text-shadow: none;
  font-style: inherit;
  font-size: 15px;
  font-weight: 200;
}


form {
  display: flex;
  width: fit-content;
  margin: 5px
  
}


i {
  position: relative;
  right: -25px;
  z-index: 2
}


span{
  color: #fff;
}

button[type]{
  border-radius: var(--spacing-3);
  background-color: var(--secondary);
  flex-direction: row;
  align-items: center;
  padding: var(--padding-3xs) var(--padding-xl);
  font-size: var(--font-size-xl);
  color: var(--black);
  font-family: var(--font-roboto);
  transition: 0.6s ease-in-out;
}

button:hover{

  transform: scale(1.1); /*zooming*/
  
  }

  

  .overlay {
    position: fixed;
    top: 300px;
    bottom: 0;
    left: 0;
    right: 0;
   
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
  }
  .overlay:target {
    visibility: visible;
    opacity: 1;
  }


  
  .dropdown{
    display: inline-block;
    background-color: #fff;
  }

  .dropdown button{
    background-color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
 
  }
  .dropdown a{
    display: block;
    color: #092c53;
    text-decoration: none;
    padding: 1px 10px;
    
  }

  .dropdown .content11 {
    display: none;
    background-color: #e3e3e3;
    position: absolute;
    min-width: 300px;
    box-shadow: 2px 2px 5px #092c53;
   
  }

  .content11 a{
    padding: 10px 15px;
  }

  .dropdown:hover .content11{
display: block;

  }

  
  .dropdown:hover button{
  background-color: #092c53;
    
      }


      .dropdown a:hover{
        background-color: #092c53;
          color: #fff;
            }