/* CSS Document */
.displayed {
    font-size: 3.3em;
    font-weight: 300;
    line-height: 1.2;
    font-family: 'Oooh Baby', cursive;
}

/* Media query for desktop screens */
@media (min-width: 992px) {
    .displayed {
        font-size: 4.5em; /* Adjust the font size for desktop screens as needed */
    }
}
.vertical-center {
    vertical-align: middle;
  }
.table>:not(caption)>*>* {
     padding:1px!important;
}
.retlogo{max-width:100%;
width:275px;
height:auto;
}

.accordion-button:not(.collapsed):after {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }

h1{font-size:1.8rem;}
.bg-sand {
    background-color: #EBEAE9;

}
.bg-bis {
   
	background-image:url("../img/beach.jpg");

}
.whitelg{
    font-size: 1.8rem;
}
.whitelg1{
    font-size: 2.5rem;
}
 @media (max-width: 1261px) {
    .spec {
      font-size: 1rem;
    }
  }
.carousel-inner {
      display: flex;
      align-items: stretch;
    }
    
    .carousel-item {
      height: 100%;
    }
.fa-3x{font-size: 2.3rem !important;} 
u {    
    border-bottom: 1px dotted;
    text-decoration: none;
}
.bg-blusht{background-color: rgba(145, 128, 136, 0.6);} 



a[x-apple-data-detectors] {
 color: inherit !important;
 text-decoration: none !important;
 font-size: inherit !important;
 font-family: inherit !important;
 font-weight: inherit !important;
 line-height: inherit !important;
}
  .grey-column {
      background-color: #f0f0f0;
      padding: 20px;
      border: 4px solid #fff;
    }
 .custom-gutter {
    margin-bottom: 20px; /* Adjust the value to control the size of the gutter */
  }
    /* Customize the shades of grey for each column */
    .column1 {
    background-color:#D5D5D5;
}
    .column2 {
    background-color: #9198A2;
}
    .column3 {
    background-color: #AEA1A7;
}

    /* Center the text in each column */
    .column-text {
      text-align: center;
      color: #333; /* Grey text color */
    }
.custom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
    /* Adjust the height and background image for the hero banner */
    .hero-banner {
      position: relative;
      height: 150px; /* Adjust the height as needed */
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
}
.fa-2x{font-size:1.4rem !important}
.banner {
    background: linear-gradient(to bottom, #ccc, #999);
    padding:30px 0;
    text-align: center;
  }	
.text-blush{
    font-color: #96858D !important;
    color: #262626;

}

 .banner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Horizontally center the content */
    height: 100%;
  }
 .custom-ul {
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
    }

     /* Set columns to have the same height */
    .equal-height-cols {
      display: flex;
    }

    /* Remove any default flexbox gaps */
    .equal-height-cols .col {
      gap: 0;
    }
.equal-height-cols .col ul li {
    font-size: 1.1rem; /* Reduce the font size for list items */
}
    /* Ensure the content within the columns has the same height */
    .equal-height-cols .col ul {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      list-style: disc; /* Add bullet points */
      padding-left: 1.5em; /* Adjust the padding as needed */
    }
    /* Create a semi-transparent overlay on the background image */
    .hero-bg::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4); /* Adjust the opacity as needed */
    }
/* Add bottom border to each list item (li) */
    .equal-height-cols .col ul li {
      border-bottom: 1px solid #ccc; /* Adjust border properties as needed */
      padding: 8px 0;
}
    /* Center the page title vertically and horizontally */
    .page-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff; /* Set the text color */
      font-size: 48px; /* Adjust the font size as needed */
      font-weight: bold; /* You can adjust the font-weight if needed */
    }

  .responsive-text1 {
    font-size: 3rem; /* Default font size for larger screens */
  }

  @media (max-width: 768px) {
    /* Adjust font size for screens smaller than or equal to 768px (Bootstrap's "md" breakpoint) */
    .responsive-text1 {
      font-size: 1.8rem;
    }
  }

  @media (max-width: 576px) {
    /* Adjust font size for screens smaller than or equal to 576px (Bootstrap's "sm" breakpoint) */
    .responsive-text1 {
      font-size: 1.6rem;
    }
  }

  .responsive-text2 {
    font-size: 2.5rem; /* Default font size for larger screens */
  
  }

  @media (max-width: 768px) {
    /* Adjust font size for screens smaller than or equal to 768px (Bootstrap's "md" breakpoint) */
    .responsive-text2 {
      font-size: 1.5rem;
    }
  }

  @media (max-width: 576px) {
    /* Adjust font size for screens smaller than or equal to 576px (Bootstrap's "sm" breakpoint) */
    .responsive-text2 {
      font-size: 1.4rem;
    }
  }
 

body{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #3b3b3b;
    padding-top: 150px;
}

/* Custom CSS to underline links on hover */
.navbar-nav .nav-link {
  position: relative;
  display: inline-block; /* Add this to make the underline only as long as the text */
  text-decoration: none;
  color: #333; /* Change color as per your design */
}

.navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px; /* Adjust the height of the underline line */
  background-color: #D5D5D5; /* Change color as per your design */
  visibility: hidden;
  transition: width 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover::before {
  visibility: visible;
  width: 100%;
}

 @media (max-width: 767px) {
    .bg-image1 {
      background-size: contain;
      background-position: center;
    }
  }
 .list-group-item {
      border: none;
    }
.bgblush{background-color:#96858D;}
.bggy1{background-color: #6F7682;}
.bggy2{background-color: #9198A2;}
.bggy3{
    background-color: #869191;
}

  .custom-list-group .list-group-item {
            border-bottom: 1px solid #3b3b3b; /* Use your desired border color here */
            display: flex;
            align-items: center; /* Vertically align items */
        }
.custom-list-group .list-group-item:last-child {
          
            border-radius: 0; /* Remove border-radius */
        }
        /* Style the bullet point */
        .custom-list-group .list-group-item::before {
            content: "\2022"; /* Bullet point symbol (•) */
            margin-right: 10px; /* Adjust the spacing between the bullet point and the text */
            padding-top:8px; /* Adjust this value to fine-tune the vertical position of the bullet point */
        }

        /* Style the bullet point */
        .custom-list-group .list-group-item::before {
            content: "\2022"; /* Bullet point symbol (•) */
            margin-right: 10px; /* Adjust the spacing between the bullet point and the text */
            line-height: inherit; /* Inherit line-height from parent for proper alignment */
        }
 
    .list-group-item::before {
      content: "•";
      position: absolute;
      left: 0;
      top: 0;
      /* Increase bullet point size */
      font-size: 30px !important;

    }

  .linew{
      position: relative;
    }
   .linew::after{
      content: '';
      display: block;
      position: absolute;
      bottom: -18px; /* Adjust the value to change the distance between text and line */
      left: 50%;
      transform: translateX(-50%);
      width: 90px; /* Adjust the value to change the length of the line */
      height: 2px; /* Adjust the value to change the thickness of the line */
      background-color: #ffffff; /* Adjust the color of the line */

}  
.linep{
      position: relative;
    }
   .linep::after{
      content: '';
      display: block;
      position: absolute;
      bottom: -18px; /* Adjust the value to change the distance between text and line */
      left: 50%;
      transform: translateX(-50%);
      width: 90px; /* Adjust the value to change the length of the line */
      height: 2px; /* Adjust the value to change the thickness of the line */
      background-color: #3b3b3b; /* Adjust the color of the line */

}

.line3{
      position: relative;
    }
   .line3::after{
      content: '';
      display: block;
      position: absolute;
      bottom: -18px; /* Adjust the value to change the distance between text and line */
      left: 50%;
      transform: translateX(-50%);
      width: 90px; /* Adjust the value to change the length of the line */
      height: 2px; /* Adjust the value to change the thickness of the line */
      background-color: #fff; /* Adjust the color of the line */

}

 /* Custom CSS for mobile devices */
  @media (max-width: 768px) {
    .carousel-control-prev,
    .carousel-control-next {
      top: 50%;
      bottom: initial;
      width: 10%;
      color: #ab9ea5 !important;
      background-color: transparent; 
    }

    .carousel-control-prev {
      left: 0;
    }

    .carousel-control-next {
      right: 0;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }
  }
.lgtx{
    
    font-size:1.6rem!important;
} 
.lheight {
    line-height: 2rem;
    color:#fff;}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 10px;
}
.brand{
  display: inline-block;
  font-size: calc(25px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
 padding:1px !important;
    line-height:1;
    color:#259EED!important;
}
.text-dark{
    color: #3b3b3b !important;
}
.name {
  color:rgba(0,0,0,.55);
     font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
     padding:1px !important;

}
hr {
    border: 1px dotted #6d6d6d;
    border-style: none none dotted; 
    color: #fff; 

}

.fa-ul>li {
    position: relative;
    margin-bottom: 10px;
}

.bg-blues2{
  background:#F2F2F2;  
    
    
}
.blues{
color:#259EED !important;}

.bg-greylt{
    background-color: #F5F5F5;
    
    
}

.bg-greylt2{
    background-color: #9198A2;
    
    
}

h1, h2,h3,h4,h5{
    color: #3b3b3b
!important;
    font-weight: normal;
    font-family: 'Montserrat', sans-serif;
}
.headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.headline:after {
    content: "";
    border-bottom: 2px solid #ccc;
    padding-top: 10px;
    width: 50px;
}

.txtsmall{
    font-size:0.9rem;}

.card {
    border: 0;
    -webkit-box-shadow:none !important;
    box-shadow:none !important;
}
.brightblue{background-color:#01BDFC;}

.brightblue2{background-color:#037AE1;}

.electricblue{background-color:#259EED}
.txt-banner{
  font-size: calc(21px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));   
    
}

.carousel {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 50px;
}
.txt-reg{font-size: calc(16px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
.navbar-brand {
   font-size: 2.5rem !important;}
.yellow{

 }


.testimonial {
    color: #000000;
    font: Times Roman
}

.carousel .overview {
    text-align: center;
    padding-bottom: 5px
}

.carousel .overview b {
    color: #333;
    font-size: 15px;
    text-transform: uppercase;
    display: block;
    padding-bottom: 5px
}

.carousel .star-rating i {
    font-size: 18px;
    color: #ffdc12
}







.nav-link {
    font-size: 1.2rem !important;
}

.page-header { background: url(../img/sea/counsellor-devon.jpg)no-repeat; position: relative; background-size: cover; }
.page-caption { padding-top: 170px; padding-bottom: 174px; }
.page-title { font-size: calc(30px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));line-height: 1.4; color: #fff; font-weight: 600; text-align: center; }

.card-section { position: relative; bottom: 60px; }
.card-block { padding: 80px; }
.section-title { margin-bottom: 60px; }




.bluehead{
 color: #40BBB5;
}
.bg-blue{
    background-color: #D5EBF0;
}

.bg-blue2{
    
    background-color:#1576DD;
}

.bg-blue2{
    background-color: #40A2BA;
}




.bg-blue3{
    
    background-color:#0048AC;
}

.brand2{
  display: inline-block;
  font-size: calc(25px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
 padding:1px !important;
    line-height:1;
    color:#40BBB5!important;
}
.text-shadow{ text-shadow: 2px 2px 17px #000;

}
.call-action2 {
    backdrop-filter: blur(7px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 9;
}
.blueb{
   color:#5CB6F1; 
    
}




.line2 {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 5px;
  position: relative;
}
.line2:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 25%;
    border-bottom: 1px solid #fff;
}

.blue-green{
    
    color:#40BBB5!important;
}
.call-action {
    background-image: url(../img/sea/beach.jpg);
    backdrop-filter: blur(7px);
    background-color: #4E4E4E;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 9;
}