/* Fonts */
@font-face {
  font-family: 'tobiassemibold';
  src: url('../fonts/Tobias-Regular.woff2');
}

@font-face {
  font-family: 'tobiassemibold';
  src: url('../fonts/Tobias-SemiBold.woff2');
}

@font-face {
  font-family: 'hafferbold';
  src: url('../fonts/Haffer-Bold.woff2');
}

@font-face {
  font-family: 'hafferbold_italic';
  src: url('../fonts/Haffer-BoldItalic.woff2');
}

@font-face {
  font-family: 'hafferheavy';
  src: url('../fonts/Haffer-Heavy.woff2');
}

@font-face {
  font-family: 'hafferheavy_italic';
  src: url('../fonts/Haffer-HeavyItalic.woff2');
}

@font-face {
  font-family: 'hafferlight';
  src: url('../fonts/Haffer-Light.woff2');
}

@font-face {
  font-family: 'hafferlight_italic';
  src: url('../fonts/Haffer-LightItalic.woff2');
}

@font-face {
  font-family: 'haffermedium';
  src: url('../fonts/Haffer-Medium.woff2');
}

@font-face {
  font-family: 'haffermedium_italic';
  src: url('../fonts/Haffer-MediumItalic.woff2');
}

@font-face {
  font-family: 'hafferregular';
  src: url('../fonts/Haffer-Regular.woff2');
}

@font-face {
  font-family: 'hafferregular_italic';
  src: url('../fonts/Haffer-RegularItalic.woff2');
}

@font-face {
  font-family: 'haffersemibold';
  src: url('../fonts/Haffer-SemiBold.woff2');
}

@font-face {
  font-family: 'haffersemibold_italic';
  src: url('../fonts/Haffer-SemiboldItalic.woff2');
}


/* Body Global */
body p {font-family: 'hafferregular', Arial, sans-serif;
letter-spacing: 0.5px;}

/*Hero Section CSS*/
/*2023 Header Components Styling with Arch Images*/
.darkblue-background-curved {
    border-radius: 0 0 50% 50% / 50px;
    max-width: 100%;
    height: 75px;
    background-color: #00133c;
    position: relative;
    }
  
    @media screen and (max-width: 480px) {
      .home-title, .home-intro {text-align: center;}
        .plflex {
          flex-direction: column;
    padding-top: 30px;
        }
        .hometitle {
          order: 2;
        padding: 20px;
        }
    
        .pic {
         order: 1;
        }
    }
    
    .plflex {display: flex;}
  /*2023 Header Components Styling with Arch Images End*/
  /* homepage hero 2021 */
  .home-hero-wrap {
    background-color: #00133c;
  }
  
  @media screen and (min-width: 40em) {
    .home-hero-wrap {
      padding: 50px 0;
    }
  }
  
  .home-title {
    margin: 20px 0 0;
    font-family: 'tobiassemibold', serif;
    font-size: 4rem;
    line-height: 1;
    letter-spacing: 0;
    color: #00AAFF; /* New Brotherhood Mutual Light Blue */
    font-weight: 600;
  }
  
  @media screen and (min-width: 40em) {
    .home-title {
      font-size: 4rem;
      line-height: 1.1;
    }
  }
  
  .home-intro {
    color: #4d4d4d;
    font-size: 1.2rem;
    font-weight: 400;
  }
  
.ico-container {
            display: flex;
            flex-wrap: wrap; /* Allow icons to wrap to the next line */
            justify-content: center; /* Center icons horizontally */
            align-items: center;
            padding: 20px;
        }

        .icon-box {
            text-align: center;
            width: 25%; /* Each icon box takes 25% of the container width */
            box-sizing: border-box;
            padding: 10px;
        }

        .icon-img {
            max-width: 50px;
        }

        .icon-text {
            margin-top: 10px;
          font-family: 'Open Sans', sans serif, Arial;
        }

        @media (max-width: 768px) {
            .icon-box {
                width: 50%; /* Each icon box takes 50% of the container width on smaller screens */
            }
        }

        @media (max-width: 480px) {
            .icon-box {
                width: 100%; /* Each icon box takes 100% of the container width on even smaller screens */
            }
        }

        /*Blue Featured Resource Section CSS*/
        .blue-full-background {
          background-color: #0062f1;
          min-height: 50px;
          margin-top: -50px;
          }

        .blue-background-curved {
          border-radius: 0 0 50% 50% / 50px;
          max-width: 100%;
          height: 75px;
          margin-top: -40px;
          background-color: #0062f1;
          }

          /* Font Styling */
          .subhead-p {
            margin: 0px auto 30px auto;
            font-size: 1.25rem; 
            line-height: 1.50rem;
            color: black;
            max-width: 900px;
            letter-spacing: normal;
            padding: 0px 15px 0px 15px;
          }

          .blue {
            font-family: 'tobiassemibold', serif;
            font-weight: 600;
            font-size: 2rem;
          }

          .tobias {
            font-family: 'tobiassemibold', serif;
            font-weight: 600;
            font-size: 2rem;
            padding: 0px 15px 0px 15px;
          }

          .haffer-nonbold {
            font-family: 'hafferbold', sans-serif;
            font-weight: 600;
            font-size: 1.75rem;
            padding: 0px 15px 0px 15px;
            line-height: 2rem;
          }

          p.haffer-sb-white {
            font-family: 'hafferregular', sans-serif;
            color: white;
            font-size: 1.25rem;
            letter-spacing: 0.5px;
            line-height: 2rem;
            padding: 0px 15px 0px 15px;
          }

          .copy {padding-top: 20px;}

          .resource-anchor {
            color: white;
            font-size: 1rem;
            margin: -10px 0px 0px 7px;}

          /*Button Styling*/

          .button {
            color: #fff;
            font-family: 'haffersemibold', sans-serif !important;
            font-weight: 600;
            letter-spacing: 1px;
            font-size: 1rem !important;
            padding: .75em 2.25em .75em 1.25em !important;
            border-radius: 4px !important;
            margin-left: 4px !important;
            margin-right: 4px !important;
          }

          .button:hover {color: #fff}
          .button-noarrow:hover {color: #fff}

          .button-noarrow {
            color: #fff;
            font-family: 'haffersemibold', sans-serif !important;
            font-weight: 600;
            letter-spacing: 1px;
            font-size: 1rem !important;
            padding: .50em 1em .50em 1em !important;
            border-radius: 4px !important;
            margin: 0px 30px 0px 30px;
            float: left;
          }

          .button.darkblue {
            border: 1px solid transparent;
            background-color: #00133c; 
          }
          
          .button.darkblue:hover {
            background-color: #888B95; 
          }

          .button-noarrow.darkblue {
            border: 1px solid transparent;
            background-color: #00133c; 
          }
          
          .button-noarrow.darkblue:hover {
            background-color: #888B95; 
          }

          .button.lightblue {
            border: 1px solid transparent;
            background-color: #00aaff; 
          }
          
          .button.lightblue:hover {
            background-color: #003b54; 
          }

          .button-noarrow.wcpurple {
            border: 1px solid transparent;
            background-color: #a337ac; 
          }
          
          .button-noarrow.wcpurple:hover {
            background-color: #330c3a; 
          }

          .button-noarrow.mwmint {
            border: 1px solid transparent;
            background-color: #0fc5a6; 
          }
          
          .button-noarrow.mwmint:hover {
            background-color: #073a35; 
          }

          .button-noarrow.hbgreen {
            border: 1px solid transparent;
            background-color: #7fc400; 
          }
          
          .button-noarrow.hbgreen:hover {
            background-color: #324400; 
          }

          .resource-anchor a {
            color: #f0f0f0;
          }

          .resource-anchor a:hover {
            color: #B2B4BE;
          }

          .arrow-button::after {
            content: '\2192'; /* Unicode character for right arrow */
            position: absolute;
            margin-left: 4px; 
            margin-right: 2px;
            font-size: 18px;
            margin-top: -2px;
          }

          /* Ministry Focused Ways to Manage Costs Section CSS */
          
          .services-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
            max-width: 1200px;
            flex-wrap: wrap;
            flex-direction: row;
            }

          .services-box {
            flex: 1 auto;
            text-align: center;
            border-radius: 15px;
            margin: 20px 20px 60px 20px;
            width: 25%;
            min-width: 350px;
            max-width: 350px;
            min-height: 325px;
            background-color: #00133c;
            position: relative;
          }

          .services-box.button-noarrow a {
            margin: 0px 0px 50px 30px !important;
          }

          .services-header {
            text-align:left;
            margin-top: 5px;
            font-size: 2rem;
            font-weight: 600;
            padding: 30px 30px 10px 30px;
            line-height: 2rem;
          }

          .services-p {
            text-align:left;
            margin-top: 5px;
            font-size: 1rem;
            color: white; 
            padding: 0px 30px 0px 30px;          
          }

          .services-img {
            position: absolute;
            right: -20px;
            bottom: -60px;
          }

          .services-ico {
            padding: 30px 10px 10px 10px;
          }

          /* Resources Section CSS */

          .white-background-curved-top {
            border-radius: 0 0 50% 50% / 50px;
            max-width: 100%;
            height: 50px;
            background-color: white;
            position: relative;
            padding-top: 30px;
            }

          .gray-full-background {
            background-color: #f0f0f0;
            min-height: 450px;
            margin-top: -50px;
            }

            .gray-full-background-alt {
              background-color: #f0f0f0;
              min-height: 450px;
              margin-top: -50px;
              position: relative;
              }

          .resources-p {
            text-align:center;
            margin-top: 5px;
            font-size: 1rem;
            color: #324400; 
            padding: 20px 15px 0px 15px;          
            }  

          .resources-a {
            color: black; /* Set the link color to green */
            text-decoration: none; /* Remove the default underline */
            border-bottom: 3px solid #7fc400; /* Add a green underline with 2px thickness */  
            font-family: 'haffersemibold';        
            } 

          .resources-a:hover {
            color: black; /* Set the link color to green */
            text-decoration: none; /* Remove the default underline */
            border-bottom: 3px solid #324400; /* Add a green underline with 2px thickness */          
            }

          .disclaimer-copy {
            color: #888B95;
            max-width: 1000px;
            font-size: 0.75rem;
            margin: 10px auto 10px auto;
            padding: 15px;
            text-align: center;
          }

          .gray-background-curved {
            border-radius: 0 0 50% 50% / 50px;
            max-width: 100%;
            height: 75px;
            margin-top: -40px;
            background-color: #f0f0f0;
            }

            .products-p {
              font-size: 1.50rem;
              line-height: 1.75rem;
              padding: 0px 15px 0px 15px;
            }

          /* Mark Quote Section */
          .darkblue-full-background {
            background-color: #00133c;
            min-height: 50px;
            margin-top: -50px;
            }

          .quote-container {
            padding: 100px 15px 15px 15px;
          }

          .darkblue-background-curved {
            border-radius: 0 0 50% 50% / 50px;
            max-width: 100%;
            height: 75px;
            margin-top: -10px;
            background-color: #00133c;
            position: relative;
            z-index: 1;
            }
        

          /* Resources Section and Slider Configuration */
            .swiffy-slider {max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 40px;}

            .articles-p {padding: 0px 40px 0px 40px;}

            .articles-a {
              color: black; /* Set the link color to black */
              text-decoration: none; /* Remove the default underline */
              border-bottom: 3px solid #A337AC; /* Add a purple underline with 2px thickness */  
              font-family: 'haffersemibold';        
              } 
  
            .articles-a:hover {
              color: black; /* Set the link color to black */
              text-decoration: none; /* Remove the default underline */
              border-bottom: 3px solid #330C3A; /* Add a purple underline with 2px thickness */          
              }

            .gray-background-curved-btm {border-radius: 0 0 50% 50% / 50px;
              max-width: 100%;
              height: 50px;
              background-color: #f0f0f0;
              margin-top: -10px;}

            /* Video Section */ 
  
          /* Styles for the image */
          .white-arch {
              display: block;
              margin: 0 auto;
              padding-top: 100px; /* Adjust the padding as needed */
              max-width: 100%;
              height: auto;
          }
  
          /* Styles for the overlay text */
          .overlay-text {
              position: absolute;
              top: 60%; /* Vertically centered */
              left: 50%; /* Horizontally centered */
              transform: translate(-50%, -50%);
              color: #0062f1;
              font-size: 2.5rem;
              text-align: center;
              padding-bottom: 30px;
              /* Additional styling for the text (e.g., font-family, font-weight, etc.) */
          }

          .featured-img {text-align: right;}

          @media only screen and (max-width: 1000px) {
            iframe {width: 320px !important;
              height: 180px !important;}

            .gray-full-background-alt {
              background-color: #f0f0f0;
              min-height: 900px;
              margin-top: -50px;
              position: relative;
              }

              .featured-img {text-align: center;}

              .products {text-align: center !important;}

              .button-noarrow {float: none;
                margin: 0px 30px 0px 30px !important;}
          }



          iframe {width: 640px;
            height: 360px;}

            .disclaimer {font-size: 0.70rem;
            color: #888B95;
            max-width: 800px;
            margin-top: 40px;
            margin-bottom: 50px;
            padding: 15px;
          }

          /* FOOTER SECTION */
#footer {
	background-color:#00133c;
	padding:40px;
	padding-bottom:30px;
	margin-bottom:0;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.grid-container.full {
  max-width: 1000px !important;
}

.plflexfooter {display: flex;
position: absolute;
bottom: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;}
.orange-bg {background-color: #D0D1DB;
max-width: 100%;
position: relative;
padding-bottom: 25px;
height: 255px;
}

.button-r {
font-family: 'haffersemibold', sans-serif !important, Arial;
font-weight: 600;
letter-spacing: 1px;
font-size: 0.85rem !important;
padding: .50em 1em .50em 1em !important;
border-radius: 4px !important;
float: left;
}

.button-r.blue-r {
background-color: #00133c;
color: white;
}

.button-r.blue-r:hover {
background-color: #888B95;
}
.footer-arch-img {margin-top: -50px;
position: absolute;
bottom: 0;
margin-right: auto;
margin-left: auto;
left: 0;
right: 0;}
.pic {position: relative;}
.hometitle-r {padding: 40px;}

@media screen and (max-width: 600px) {
  .plflexfooter {
    flex-direction: column;
    margin-top: 200px;
  }
  .hometitle-r {
    order: 2;
padding: 20px;
  }

  .pic {
   order: 1;
  }
}

@media only screen and (max-width: 600px) {
.orange-bg {padding-top: 450px;}}