/* Required height of parents of the Half Page Carousel for proper displaying carousel itself */
html,
body,
.view {
  height: 100%; 
  background-color: var(--primary) ;}

@media (max-width: 740px) {
  .full-page-intro {
    height: 1000px; } }

/* Color Variables*/
:root{
  --primary: #EFF4F9; 
  --secondary: #7B7B7B;
  --accent: #5F91C9; 
  --offblack: #373333; 
  --offwhite: #FFF9F9;
  --seconnd-accent: #4A6D94;
}

html {
  scroll-behavior: smooth;
}

footer{
    background-color: var(--seconnd-accent) ;
    color: var(--primary);
}

iframe{
  height: 633px;
}

.img-shadow{
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.logo{
  max-width: 90px;
  height: auto;
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  
}

/*Nab Bar link*/
.navbar-light .navbar-nav .nav-link{
  font-size: 25px;
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  .nav-link:hover{
    color: var(--offblack);
  }
}

/*Banner*/

h1{
  font-size: 63px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: var(--offblack);
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  
}

p{
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 139.13% */
  color: var(--offblack);
}

h1 h2 h3 h4 p{
  color: var(--offblack);
}

.primary{
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--primary);
  border-radius: 62px;
  font-size: 18px;
  padding: 14px 25px 14px 25px; 
}

.primary:hover{
  background-color: var(--seconnd-accent);
  border-color: var(--seconnd-accent);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

span{
  color: var(--secondary);
}

.banner-img{
  border-radius: 10px;
}

a:hover{
  color: var(--primary);
}
/*Blue Band*/
#blue-band{
  background-color: var(--accent);
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  #blue-band h3{
    font-size: 30px;
  }
}

h2{
  font-size: 63px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  h2{
    font-size: 38px;
  }
}

/*About*/
.p-subtitle-about{
  color: var(--secondary);
  font-size: 25px;
  font-weight: 400;
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  .p-subtitle-about{
    font-size: 16px;
  }
}

.card{
  border-radius: 13px;
  border-color: var(--offwhite);
  background: var(--offwhite);
}

.card:hover{
  border-color: var(--accent);
  background: var(--accent);
  color: var(--offwhite);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.card-title p{
  font-size: 26px;
  font-weight: 400;
  line-height: 30px;
  color: var(--offblack);
}

.card-text{
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--secondary);
}

.card-text:hover{
  color: var(--offwhite);
}

/*Join*/
.form-space{
  height: 0em;;
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  .form-space{
    height: 1em;
  }
}

/*Prices*/
#prices{
  background-color: var(--accent); 
}

#prices h2, .subtitle-prices{
  color: var(--offwhite);
}

#prices h1{
  font-size: 46px;
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  #prices h2{
    font-size: 36px;
  }
}

.subtitle-prices{
  font-size: 25px;
  padding-right: 15em;
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  .subtitle-prices{
    font-size: 19px;
    padding-right: 0em;
  }
}

.second-card{
  background-color: var(--offwhite);
  border-radius: 13px;
  border-color: var(--offwhite);
  height: 150px;
}

/*Mobiles brack points*/
@media (max-width: 1000px) {
  .second-card{
    height: 200px;
  }
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  .second-card{
    height: 190px;
  }
}

/*Mobiles brack points*/
@media (max-width: 700px) {
  .second-card{
    height: 120px;
  }
}

.second-card-text{
  color: var(--offblack);
  font-size: 25px;
}

/*Mobiles brack points*/
@media (max-width: 768px) {
  .second-card-text{
    color: var(--offblack);
    font-size: 20px;
  }
}

/*Footer*/
footer p{
  background-color: var(--seconnd-accent);
  font-size: 16px;
  color: var(--primary);
}

h3{
  font-size: 29px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: var(--primary);
}

footer a{
  color: var(--primary);
}

footer a:hover{
  color: var(--offblack);
}

/* Thick red border */
hr {
  border: 1px solid var(--offwhite);
  margin: 0px;
  padding: 0px;
}