*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
}

body{
    background:#f9f9f9;
}

/* ================= HEADER ================= */

header{
    width:100%;
    background:#ffffff;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
     
    top:0;
    left:0;
    z-index:1000;
}

.nav-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 4px 20px;
}

.logo{
    font-size:22px;
    font-weight:700;
    color:#2f5f7c;
}

.logo span{
    color:#f7941d;
}

nav ul{
    display:flex;
    list-style:none;
    gap:50px;
}

nav ul li a{
    text-decoration:none;
    color:#444;
    font-weight:500;
    transition:0.3s;
}

nav ul li a:hover{
    color:#f7941d;
}

.header-btn{
    padding:10px 22px;
    background:#f7941d;
    color:#fff;
    border-radius:30px;
    text-decoration:none;
    font-size:14px;
    font-weight: 600;
    transition:0.3s;
}

.header-btn:hover{
    background:#2f5f7c;
}

/* Mobile Menu */

.menu-toggle{
    display:none;
    font-size:26px;
    cursor:pointer;
    color:#2f5f7c;
}

/* ================= HERO ================= */
.hero{
    height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    overflow:hidden;

    /* Calm soothing gradient */
background:
radial-gradient(circle at 75% 20%, rgba(255, 210, 130, 0.4), transparent 50%), 
linear-gradient(160deg, #fff3cd, #eef6f3);
}

/* Soft healing sun glow */
.hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;

    background: radial-gradient(
        circle,
        rgba(255,210,110,0.45) 0%,
        rgba(255,210,110,0.25) 35%,
        rgba(255,210,110,0.1) 60%,
        transparent 80%
    );

    top:-120px;
    right:-100px;

    border-radius:50%;
    filter: blur(60px);
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:1200px;
    padding:20px;
}

/* Heading */
.hero h1{
    font-size:22px;
    font-weight:700;
    margin-bottom:18px;
    line-height:1.3;
    color:#2f3e46;   /* deep calm color */
}

/* Paragraph */
.hero p{
    font-size:18px;
    margin-bottom:35px;
    line-height:1.6;
    color:#4f5d63;
}

/* Feature pills */

.hero-features{
    margin-bottom:35px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}

.hero-features span{
    background:rgba(255,255,255,0.65);
    padding:10px 20px;
    border-radius:30px;
    font-size:15px;
    color:#2f3e46;
    backdrop-filter: blur(8px);
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

/* Responsive - 2 pills per row */
@media (max-width:768px){
    .hero-features span{
        flex: 0 0 calc(50% - 8px);
        text-align:center;
        font-size: 12px;
    }
}


/* Buttons */
.hero-buttons{
    display:flex;
    gap:18px;
    justify-content:center;
    flex-wrap:wrap;
}

.btn{
    padding:8px 40px;
    border-radius:40px;
    font-size:16px;
    text-decoration:none;
    transition:0.3s;
}

/* Primary button */
.btn-primary{
    background:#f7941d;
    color:#fff;
}

.btn-primary:hover{
    background:#f7941d;
}

/* Outline button (fixed for light bg) */
.btn-outline{
   
    background:#2f3e46;
    color:#ffffff;
}

.btn-outline:hover{
     border:2px solid #2f3e46;
    color:#fff;
}


/* ================= RESPONSIVE ================= */

@media(max-width:900px){

    nav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#fff;
        display:none;
        flex-direction:column;
        padding:20px 0;
    }

    nav ul{
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    nav.active{
        display:flex;
    }

    .menu-toggle{
        display:block;
    }

    .header-btn{
        display:none;
    }

    .hero h1{
        font-size:22px;
    }

    .hero p{
        font-size:12px;
    }
}


.slot-booking{
  padding: 50px 20px;
  background:#ffffff;
}

.container{
  max-width:1200px;
  margin:auto;
}

.booking-wrapper{
  display:flex;
  gap:40px;
  background:#fff;
  border-radius:18px;
  padding:40px;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  flex-wrap:wrap;
}

/* LEFT SIDE */

.booking-left{
  flex:1;
  min-width:300px;
}

.booking-left h3{
  margin-bottom:25px;
  color:#2f5f7c;
}

.field{
  margin-bottom:20px;
}

.field label{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  color:#666;
}

.field input,
.field select{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:14px;
}

.duration-options label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  color:#666;
}

.duration-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:25px;
}

.duration-buttons button{
  padding:8px 16px;
  border-radius:30px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  transition:0.3s;
}

.duration-buttons button.active,
.duration-buttons button:hover{
  background:#2f5f7c;
  color:#fff;
  border-color:#2f5f7c;
}

.price-box{
  background:#fff5e9;
  padding:18px;
  border-radius:12px;
  margin-bottom:25px;
}

.price-box span{
  font-size:13px;
  color:#888;
}

.price-box h4{
  color:#f7941d;
  font-size:22px;
  margin-top:5px;
}

.confirm-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:10px;
  background:#2f5f7c;
  color:#fff;
  font-size:15px;
  cursor:pointer;
  transition:0.3s;
}

.confirm-btn:hover{
  background:#1d3f54;
}

/* RIGHT SIDE */

.booking-right{
  flex:1.3;
  min-width:350px;
}

.slot-header{
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
}

.slot-header h4{
  color:#333;
}

.slot-count{
  font-size:13px;
  color:#777;
}

.slots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:15px;
}

.slot{
  padding:12px;
  border-radius:10px;
  border:1px solid #dce3ec;
  background:#f9fbff;
  cursor:pointer;
  font-size:14px;
  transition:0.3s;
}

.slot:hover{
  border-color:#2f5f7c;
  background:#eef4fb;
}

.slot.filling{
  border-color:#f7941d;
  color:#f7941d;
}

.slot.booked{
  background:#f2f2f2;
  color:#aaa;
  cursor:not-allowed;
  text-decoration:line-through;
}

/* RESPONSIVE */

@media(max-width:900px){
  .booking-wrapper{
    flex-direction:column;
  }
}


/* WHY CHOOSE SECTION */
.why-choose{
  background:#fffdf5;
  padding: 50px 20px;
}

.features-grid{
  display:grid;
  margin-top:50px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:15px;
}

/* Mobile Responsive - 2 items per row */
@media (max-width:768px){
  .features-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

.feature-card{
  background:#ffffff;
  border-radius:20px;
  padding:20px 30px;
  text-align:center;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  transition:all 0.35s ease;
  position:relative;
}

.feature-card:hover{
  transform:translateY(-4px);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.feature-icon-wrap{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background:linear-gradient(135deg, #fff3cd, #ffffff);
}

.feature-card h4{
  font-size:14px;
  color:#2b678a;
  margin-bottom:10px;
  font-weight:500;
}

.feature-card p{
  font-size:12px;
  color:#6b7280;
  line-height:1.6;
}

/* MOBILE */
@media(max-width:768px){
  .feature-card{
    padding:30px 22px;
  }
}


.room-details{
  padding: 50px 20px;
  background:#fff5e9;
}

.container{
  max-width:1200px;
  margin:auto;
}

.section-header{
  text-align:center;
  margin-bottom:20px;
}

.section-header h2{
  font-size:34px;
  color:#2f5f7c;
  margin-bottom:15px;
}

.section-header p{
  color:#666;
  font-size:16px;
}

/* GRID */

.rooms-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:35px;
}

/* CARD */

 
/* TABLE */

.compact-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.compact-table th{
  text-align:left;
  padding-bottom:10px;
  color:#555;
}

.compact-table td{
  padding:8px 0;
  border-bottom:1px solid #eee;
}

.compact-table tr:last-child td{
  border-bottom:none;
}

/* Consultation slight variation */

.consultation{
  border-top:4px solid #2f5f7c;
}

/* Responsive */

@media(max-width:768px){
  .section-header h2{
    font-size:26px;
  }
}


.gallery-section{
  padding:50px 20px;
  background:#ffffff;
}

 

.section-header{
  text-align:center;
  margin-bottom:20px;
}

.section-header h2{
  font-size:34px;
  color:#2f5f7c;
  margin-bottom:10px;
}

.section-header p{
  color:#666;
}

/* FILTER BUTTONS */

.gallery-filters{
  text-align:center;
  margin-bottom:40px;
}

.gallery-filters button{
  padding:8px 18px;
  margin:5px;
  border-radius:30px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  font-size:13px;
  transition:0.3s;
}

.gallery-filters button.active,
.gallery-filters button:hover{
  background:#2f5f7c;
  color:#fff;
  border-color:#2f5f7c;
}

/* GRID */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
}

@media (max-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}


.gallery-item{
  overflow:hidden;
  border-radius:15px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  cursor:pointer;
  transition:0.3s;
}

.gallery-item{
  height:250px;   /* same height for all */
  overflow:hidden;
  border-radius:15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;   /* crop nicely */
  display:block;
  transition:0.4s ease;
}

.gallery-item:hover img{
  transform:scale(1.08);
}


/* LIGHTBOX */

.lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.3s ease;
  z-index:9999;
}

.lightbox.active{
  opacity:1;
  visibility:visible;
}

.lightbox img{
  max-width:90%;
  max-height:85%;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:zoomIn 0.3s ease;
}

@keyframes zoomIn{
  from{transform:scale(0.8);}
  to{transform:scale(1);}
}

.close-btn{
  position:absolute;
  top:30px;
  right:40px;
  font-size:35px;
  color:#fff;
  cursor:pointer;
}

/* Responsive */

@media(max-width:768px){
  .section-header h2{
    font-size:26px;
  }
}


/* SECTION */

.how-it-works{
  padding:50px  0px;
  background:#f6f8fb;
  overflow:hidden;
}

.container{
  max-width:1200px;
  margin:auto;
}

.section-header{
  text-align:center;
  margin-bottom:20px;
}

.section-header h2{
  font-size:36px;
  color:#2f5f7c;
  margin-bottom:10px;
}

.section-header p{
  color:#666;
}

/* TIMELINE WRAPPER */

.timeline-wrapper{
  position:relative;
}

/* WAVE LINE */

.wave-line{
  width:100%;
  height:180px;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
}

.wave-line path{
  stroke:#d9e2ec;
  stroke-width:4;
  fill:none;
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  transition:stroke 0.5s ease;
}

/* STEPS */

.steps{
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:2;
  padding-top:60px;
}

.step{
  text-align:center;
  width:200px;
  transform:translateY(40px);
  opacity:0;
  transition:0.6s ease;
}

/* CIRCLE */

.circle{
  width:80px;
  height:80px;
  margin:0 auto 20px;
  border-radius:50%;
  background:#2f5f7c;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.4s;
}

.circle img{
  width:28px;
}

.step h4{
  font-size:15px;
  color:#2f5f7c;
}

.step p{
  font-size:12px;
  color:#2f5f7c;
}

.step.show{
  transform:translateY(0);
  opacity:1;
}

.step:hover .circle{
  background:#f7941d;
  transform:scale(1.08);
}

/* RESPONSIVE */

@media(max-width:900px){

  .steps{
    flex-direction:column;
    align-items:center;
  }

  .wave-line{
    display:none;
  }

  .step{
    margin-bottom:40px;
  }

}


.terms-section{
  padding:50px 20px;
  background:#ffffff;
}

 
 
.section-header{
  text-align:center;
  margin-bottom:60px;
}

.section-header h2{
  font-size:34px;
  color:#2f5f7c;
  margin-bottom:10px;
}

.section-header p{
  color:#666;
}

/* ACCORDION */

.accordion-item{
  border-bottom:1px solid #e6edf5;
}

.accordion-header{
  width:100%;
  background:none;
  border:none;
  text-align:left;
  padding:20px 10px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#2f5f7c;
  transition:0.3s;
}

.accordion-header:hover{
  color:#f7941d;
}

.accordion-content{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease;
  padding:0 10px;
}

.accordion-content p{
  padding-bottom:20px;
  font-size:14px;
  color:#555;
  line-height:1.6;
}

.accordion-item.active .accordion-content{
  max-height:600px;
}

.accordion-item.active .accordion-header span{
  transform:rotate(45deg);
  transition:0.3s;
}

@media(max-width:768px){
  .section-header h2{
    font-size:26px;
  }
}



.cancellation-policy{
  padding:50px 20px;
  background:#f6f8fb;
}

 

.section-header{
  text-align:center;
  margin-bottom:20px;
}

.section-header h2{
  font-size:34px;
  color:#2f5f7c;
  margin-bottom:10px;
}

.section-header p{
  color:#666;
}

/* WRAPPER */

.policy-wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}

/* CARD */

.policy-card{
  background:#fff;
  padding:35px 30px;
  border-radius:18px;
  text-align:center;
  border:1px solid #e6edf5;
  transition:0.3s ease;
}

.policy-card:hover{
  transform:translateY(-6px);
}

/* TIME */

.time{
  font-size:14px;
  color:#888;
  margin-bottom:10px;
}

/* REFUND TEXT */

.refund{
  font-size:22px;
  font-weight:700;
  margin-bottom:15px;
}

/* COLOR STATES */

.policy-card.full .refund{
  color:#2f9e44; /* green */
}

.policy-card.half .refund{
  color:#f7941d; /* orange */
}

.policy-card.none .refund{
  color:#e03131; /* red */
}

.policy-card p{
  font-size:14px;
  color:#555;
  line-height:1.6;
}

@media(max-width:768px){
  .section-header h2{
    font-size:26px;
  }
}


.faq-section{
  padding:50px  20px;
  background:#ffffff;
}

 

.section-header{
  text-align:center;
  margin-bottom:60px;
}

.section-header h2{
  font-size:34px;
  color:#2f5f7c;
  margin-bottom:10px;
}

.section-header p{
  color:#666;
}

/* FAQ ITEMS */

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

.faq-question{
  width:100%;
  background:none;
  border:none;
  padding:22px 10px;
  font-size:16px;
  font-weight:600;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  color:#2f5f7c;
  transition:0.3s;
}

.faq-question:hover{
  color:#f7941d;
}

.faq-question span{
  font-size:20px;
  transition:0.3s ease;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease;
  padding:0 10px;
}

.faq-answer p{
  padding-bottom:20px;
  font-size:14px;
  color:#555;
  line-height:1.6;
}

.faq-item.active .faq-answer{
  max-height:200px;
}

.faq-item.active .faq-question span{
  transform:rotate(45deg);
}

/* Responsive */

@media(max-width:768px){
  .section-header h2{
    font-size:26px;
  }
}



.location-section{
  padding:50px 20px;
  background:#f6f8fb;
}

.container{
  max-width:1200px;
  margin:auto;
}

.section-header{
  text-align:center;
  margin-bottom:60px;
}

.section-header h2{
  font-size:34px;
  color:#2f5f7c;
  margin-bottom:10px;
}

.section-header p{
  color:#666;
}

/* WRAPPER */

.location-wrapper{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
}

/* MAP */

.map-box{
  flex:1.2;
  min-width:320px;
  height:400px;
  border-radius:18px;
  overflow:hidden;
}

/* ADDRESS CARD */

.address-card{
  flex:1;
  min-width:300px;
  background:#ffffff;
  padding:40px 30px;
  border-radius:18px;
  border:1px solid #e6edf5;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.address-card h3{
  color:#2f5f7c;
  margin-bottom:20px;
}

.address-card p{
  font-size:14px;
  color:#555;
  line-height:1.6;
}

.contact-info{
  margin-top:20px;
}

.contact-info p{
  margin-bottom:8px;
}

.direction-btn{
  margin-top:25px;
  padding:12px 20px;
  background:#2f5f7c;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  text-align:center;
  transition:0.3s;
}

.direction-btn:hover{
  background:#f7941d;
}

/* RESPONSIVE */

@media(max-width:900px){

  .location-wrapper{
    flex-direction:column;
  }

  .map-box{
    height:300px;
  }

}

.final-cta{
  padding: 50px 20px;
  background:linear-gradient(135deg,#2f5f7c,#1e3f56);
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}

/* Subtle background glow */

.final-cta::before{
  content:'';
  position:absolute;
  width:400px;
  height:400px;
  background:rgba(255,255,255,0.05);
  border-radius:50%;
  top:-100px;
  left:-100px;
}

.final-cta::after{
  content:'';
  position:absolute;
  width:300px;
  height:300px;
  background:rgba(255,255,255,0.04);
  border-radius:50%;
  bottom:-80px;
  right:-80px;
}

.cta-content{
  position:relative;
  z-index:2;
  max-width:800px;
  margin:auto;
}

.cta-content h2{
  font-size:42px;
  margin-bottom:20px;
}

.cta-content p{
  font-size:16px;
  margin-bottom:35px;
  opacity:0.9;
}

/* BUTTON */

.cta-btn{
  display:inline-block;
  padding:16px 40px;
  background:#ffffff;
  color:#2f5f7c;
  text-decoration:none;
  font-weight:600;
  border-radius:50px;
  transition:0.3s ease;
  position:relative;
  overflow:hidden;
}

/* Hover Animation */

.cta-btn:hover{
  background:#f7941d;
  color:#fff;
  transform:translateY(-3px);
}

/* Responsive */

@media(max-width:768px){

  .cta-content h2{
    font-size:30px;
  }

}


  .rooms-section{
padding:50px 20px;
background:#f8fafc;
}

.container{
max-width:1200px;
margin:auto;
}

.section-header{
text-align:center;
margin-bottom:60px;
}

.rooms-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:35px;
}

/* CARD */

.room-card{
background:#fff;
border-radius:18px;
overflow:hidden;
padding: 10px;
box-shadow:0 15px 40px rgba(0,0,0,0.06);
transition:0.4s;
}

.room-card:hover{
transform:translateY(-8px);
}

/* IMAGE */

.room-image{
position:relative;
overflow:hidden;
}

.room-image img{
width:100%;
height:260px;
object-fit:cover;
border-radius: 18px;
transition:0.5s;
}

.room-card:hover img{
transform:scale(1.08);
border-radius: 18px;
}

/* AREA BADGE */

.area-badge{
position:absolute;
top:15px;
left:15px;
background:#fff;
padding:6px 14px;
border-radius:30px;
font-size:13px;
font-weight:600;
box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

.area-badge.highlight{
background:#2f3e46;
color:#fff;
}

/* CONTENT */

.room-content{
padding:15px;
}

.room-content h3{
margin-bottom:15px;
}

.room-content h4{
margin-top:15px;
font-size:16px;
}

.room-content ul{
padding-left:18px;
}

.room-content li{
font-size: 14px;
color:#555;
}

.best-for{
margin-top:15px;
font-weight:600;
color:#1a3b5d;
font-size: 14px;
}

/* BUTTON */

.book-btn{
    display: inline-block;
    margin-top: 20px;
    background: #2f3e46;
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 8px 22px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.book-btn:hover{
background:#1a5dc9;
}


  .policy-section{
  padding:80px 20px;
  background:#f8fafc;
}



.section-header{
  text-align:center;
  margin-bottom:40px;
}

.section-header h2{
  font-size:30px;
  margin-bottom:10px;
}

/* ACCORDION ITEM - PREMIUM CARD LOOK */

.accordion-item{
  background:#ffffff;
  border-radius:14px;
  margin-bottom:25px;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
  border-left:5px solid #2f3e46; /* highlight border */
  transition:0.3s ease;
}

.accordion-item:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}


/* HEADER STYLE */

.accordion-header{
  width:100%;
  padding:22px 25px;
  border:none;
  background:linear-gradient(90deg,#f8fbff,#ffffff);
  font-size:20px;
  font-weight:700;
  color:#1a3b5d;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}


/* ICON STYLE */

.accordion-header span{
  font-size:22px;
  transition:0.3s;
  color:#2f3e46;
}


/* CONTENT */

.accordion-content{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease;
  padding:0 25px;
}

.accordion-content ul{
  padding:15px 0 25px;
}

.accordion-content li{
  margin-bottom:12px;
  color:#555;
  font-size:16px;
  line-height:1.6;
}


/* ACTIVE STATE */

.accordion-item.active{
  border-left:5px solid #f7941d; /* active highlight */
}

.accordion-item.active span{
  transform:rotate(45deg);
}