/***************************************************************
*
*   Christmas sprecifics
*
****************************************************************/

body{color:rgb(107, 9, 19);}
#faq{color:black}
#gmap{height:300px;width: 90%}
#main-title{font-family: 'Gloria Hallelujah', cursive;color:rgb(107, 9, 19);padding:50px;text-shadow: 2px 2px 4px #FFF;margin:0 auto;}	
.section-title {
    text-align: center;
    margin:0 auto;
    font-weight: 300;
    font-size: 42.6672px;
    -webkit-font-kerning: normal;
    font-kerning: normal;
}
#join-us{
  background-image: 
    linear-gradient( rgba(159,4,19,.9), rgba(130,40,26,.9) ),
    url('./IMG_7623-min.JPG');
	height: auto;
    width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#christmas{height:auto; color: rgb(107, 9, 19);
    background-image:url("./background.jpg");
    height: auto;
    width: 100%;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
    /*background-image: linear-gradient(to bottom, #051937, #304461, #5c738d, #8da6bb, #c3dbeb);}*/
#unexpected {
  background-image: 
    linear-gradient( rgba(245,171,77,.9), rgba(247,199,94,.9) ),
    url('./IMG_7623-min.JPG');
	height: auto;
    width: 100%;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
.section{background:rgba(255,255,255,0.6);border-radius:5px;}

#footer{background:#CCC}
.tint:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(174,147,82, 0.5);
  -moz-transition: background .3s linear;
  -webkit-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
}

.tint:hover:before {
  background: none;
}

section{margin:50px auto;} 		
.thrill-of-hope{max-width:100%;height:auto;}				
.never-loose-contact-extra{display:none}
.center{margin:0 auto;}
img{max-width:100%}
.christmas-image{border-radius:12px;padding:5px}
.smaller{font-size:0.9em}

.faq-container {
  width: 100%;
  color:black;
  background-color: #F3A043;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid #e9ecef;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  padding: 20px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: #F3A043;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: #e9ecef;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  background-color: #F4B859;
  color: black;
  font-size: 14px;
  line-height: 1.6;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.open {
  max-height: 500px; /* Adjust for longer answers */
  padding: 15px 20px;
}

.arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.arrow.open {
  transform: rotate(90deg);
}

/* Responsive Design */
@media (max-width: 768px) {
  .faq-question {
    font-size: 14px;
    padding: 15px;
  }

  .faq-answer {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .faq-container {
    max-width: 90%;
  }
}
/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
		.calendar-icon:before { content: ' '; display: block; }
    .smaller{font-size:1em}
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
		.calendar-icon:before { content: ' '; display: block; }
    .smaller{font-size:1em}
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
		.calendar-icon:before { content: ' '; display: block; }
    .smaller{font-size:1em}
    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
		body{font-size:2em}
				#main-title{font-size:100px;}
        h1{font-size:2em}
        h2{font-size:1.5em}
        p{font-size:1em}
    }