/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Base Layout.
 */

.container {
  width: 100%;
  /*max-width: var(--max-width);*/
  padding-inline: var(--container-padding);

  /* This fixes an issue where if the toolbar is open in vertical mode, and
   * the mobile navigation is open, the "close" button gets pushed outside of
   * the viewport. */
}

body.is-fixed .container {
  width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
}

.page-wrapper {
  /*max-width: var(--max-bg-color);*/
  background: var(--color--white);
}

/**
 * Creates stacking context ensuring that child elements can never appear in
 * front of mobile navigation.
 */

.layout-main-wrapper {
  position: relative;
  z-index: 2; /* Ensure dropdown is not cut off by footer. */
}

/* Contains the social sidebar, and the primary content area. */

@media (min-width: 75rem) {
  .layout-main {
  }
}

@media (min-width: 75rem) {
  .main-content {
  }
}

.main-content__container {
  padding-block-start: var(--sp3);
}

@media (min-width: 43.75rem) {
  .main-content__container {
    padding-block-start: var(--sp5);
  }
}

#header-site-title{
    justify-content:space-between;
}

#block-diaspora-pagetitle{
    margin: 0;
}

#header-site-title>p{
    font-size: 10px;
}

.node__content h2{
  /* Your styles go here, for example: */
  color: #A67D3D;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin: 10px;
  padding: 10px;
  line-height: 1.5;
}

.node__content p{
  
  text-align: justify;
  line-height: 1.5;
}

.text-content.field__item blockquote p {
  font-size: 1.2rem; /* Equivalent to 14px if the root font size is 16px */
  background-color: #F6F8F8;
  line-height: 1.5;
  padding: 10px;
}

.clear-both {
  clear: both;
}

.main-hero,
.main-content__container {
  width: 100%; /* Takes up the full width of the parent */
  display: block; /* Makes sure the element takes up the full width */
  /*text-align: center;  Centers text content */
}



.main-content {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center children horizontally */
  justify-content: center; /* Center children vertically */
  width: 100%; /* Take up the full width of the parent */
  
}

/* Apply 100% width but with a maximum width constraint to the child elements */
.main-content > div {
  width: 100%; /* Take up the full width of the psarent */
  max-width: 1900px; /* Set the maximum width, you can adjust this value as needed */
  /*text-align: center;  Center text within these child divs */
  margin-left: auto; /* Center the div horizontally */
  margin-right: auto; /* Center the div horizontally */
}

.container1{
    padding: 20px;
}

.youtube-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 10; /* Ensure it's above the iframe */
    }
    .main-hero:hover .overlay {
        display: none; /* Hide on hover */
    }
    
.main-hero{
    max-width: 100% !important;
    background-color: black;
}

#block-diaspora-aboutmenu{
    
    background-image: url(/sites/default/files/2023-08/banner-publications.jpg);
    height: 300px
}
#block-diaspora-aboutmenu p{
    padding:5px;
    color:#FFF;
    height:50%;
    line-height: 1.2;
    text-align: right;
}

.region--content{
    margin-block-end: 0px !important;
}

.layout{margin-block-end: 0px !important;}

.node__content{
    padding-block-end: 0px !important;
}

#block-diaspora-breadcrumbs{
    margin-block-end: 0px !important;
}

.main-content__container{
    padding-block-start: 10px !important;
}

#block-diaspora-aboutmenu--2{
    display:none;
}

.site-footer__inner{
    
    padding-block: 10px !important;
}

.overlay{
    z-index: 101 !important;
}

.header-nav1{
    align-self: flex-end;
}

.parent-nav{
    position: relative; /* Important for child positioning */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Separates children */
}

.text-content .icon-center {
  display: block; /* Makes the icon a block element so it can be centered */
  margin-left: auto; /* Automatically set the left margin */
  margin-right: auto; /* Automatically set the right margin */
  text-align: center; /* Center the text within the icon element */
}

.region--content-below{
    display: block !important;

}