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

.cf:before, .cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}

 /* {
  background-color: #161719;
  font-family: "Roboto", sans-serif;
  color: #9fa2a7;
} */
 .wrappers {
  max-width: 450px;
  margin: 0 auto;
}
 .wrappers h1 {
  margin-top: 50px;
  margin-bottom: 50px;
  text-transform: uppercase;
  font-size: 1.5em;
}
 .wrappers .speechbubble {
  background-color: #26272b;
  color: #9fa2a7;
  font-size: 0.8em;
  line-height: 1.75;
  padding: 15px 25px;
  margin-bottom: 75px;
  cursor: default;
}
.wrappers .speechbubble:nth-child(2n) {
  border-left: 5px solid;
}
 .wrappers .speechbubble:nth-child(2n):after {
  content: "";
  margin-top: -30px;
  padding-top: 0px;
  position: relative;
  bottom: -45px;
  left: 20px;
  border-width: 30px 0 0 30px;
  border-style: solid;
  border-color: #26272b transparent;
  display: block;
  width: 0;
}
 .wrappers .speechbubble:nth-child(2n+1) {
  border-right: 5px solid;
}
 .wrappers .speechbubble:nth-child(2n+1):after {
  content: "";
  margin-top: -30px;
  padding-top: 0px;
  position: relative;
  bottom: -45px;
  /* left: 350px; */
  border-width: 30px 30px 0 0;
  border-style: solid;
  border-color: #26272b transparent;
  display: block;
  width: 0;
}
 .wrappers .speechbubble:nth-child(4n+1) {
  border-color: #56b273;
}
 .wrappers .speechbubble:nth-child(4n+2) {
  border-color: #01ad9b;
}
 .wrappers .speechbubble:nth-child(4n+3) {
  border-color: #b388dd;
}
 .wrappers .speechbubble:nth-child(4n+4) {
  border-color: #ff8750;
}
 .wrappers .speechbubble p:before {
  content: "“";
  font-family: Georgia;
  font-size: 40px;
  line-height: 0;
  display: inline-block;
  display: -webkit-inline-box;
}
 .wrappers .speechbubble .username {
  display: inline;
  font-style: italic;
  float: right;
}
 .wrappers .speechbubble .username:before {
  content: "- ";
}

.containers{
        max-width: 720px;
        margin: 0 auto;
      
}
.verse{
    font-family: Georgia;
    padding: 10px;
    text-align: center;
    /* text-shadow: 2px 2px 8px #121111; */
    color: #00273e;
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
    /* background-size: cover;
    background-position: center;
    background-image: url('assets/images/bg.jpg');
    background-color: #e5e5f7; */
   
    
    opacity: 0.8;
    background-image: radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
    background-size: 10px 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.bible-verse-heading{
    padding: 10px;
    text-align: center;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.banner-container{
    padding: 10px;
    
    
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
}
.banner-heading{
    text-align: center;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
    margin-bottom: 20px;
    padding: 10px;
    background: #f4f4f4;
    color: #520d0d;
    border-radius: 10px;
    border-left: 2px solid saddlebrown;
     border-right: 2px solid saddlebrown;
    font-size: large;
}
.banner-content{
    padding: 20px;
    /* box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; */
}
.banner-title{
    padding-top: 20px;
    padding-left: 20px;
    text-transform: capitalize;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bolder;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}

.shadow{
    padding: 10px;
    /* text-align: center; */
    position: relative;
    margin-top: 60px;
    margin-bottom: 40px;
    /*width: 400px;
    height: 250px; */
    background: linear-gradient(0deg,#fff,#fff);
  }
  .shadow:before,
  .shadow:after{
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    background: linear-gradient(45deg, #fb0094,#0000ff, #00ff00,#ffff00,
      #ff0000,#fb0094,#0000ff, #00ff00,#ffff00, #ff0000);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    background-size: 400%;
    z-index: -1;
    animation: animate 20s linear infinite;
  }
  
  .shadow:after{
    filter: blur(20px);
  }
  
  @keyframes animate {
  
    0%{
      background-position: 0 0;
    }
    50%{
      background-position: 300% 0;
    }
    100%{
      background-position: 0 0;
    }
  }
  
  
  .aim-container{
    padding: 20px;
    box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;
    /* box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset; */
  }
  .aim-title h2{
    text-transform: uppercase;
    text-align: center;
    font-family: 'Comic Neue', cursive;
    border-bottom: 1px solid black;
  }
  .aim-content{
    padding: 10px;
    text-align: justify;
    font-family: 'Comic Neue', cursive;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
  }
  .aim-content span{ 
    font-family: 'Comic Neue', cursive !important;
  }
  
  

.principal-profile {
  width: 380px;
  /* margin: 50px auto; */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  background: #fff;
  font-family: "Poppins", sans-serif;
  text-align: center;
  transition: all 0.3s ease;
}

.principal-profile:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.profile-header {
  background: linear-gradient(135deg, #004e92, #000428);
  height: 120px;
  position: relative;
}

.profile-header::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #004e92;
  background-size: cover;
}

.profile-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.profile-body {
  padding: 70px 20px 25px;
}

.profile-body h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #1e293b;
}

.profile-body p {
  margin: 6px 0;
  color: #64748b;
}

.profile-body .qualification {
  display: inline-block;
  background: #f1f5f9;
  color: #334155;
  padding: 6px 12px;
  border-radius: 10px;
  font-style: italic;
  margin-top: 6px;
}

.profile-social {
  margin-top: 15px;
}

.profile-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #004e92;
  color: #fff;
  margin: 0 8px;
  transition: all 0.3s ease;
}

.profile-social a:hover {
  background: #000428;
  transform: scale(1.1);
}