/* ─────────── 1.  MOBILE MENU ─────────── */
.mobile-menu{display:none}

@media(max-width:991.98px){
  .mobile-menu{
    display:block;
    position:absolute;
    top:50px;left:0;width:100%;
    padding:0;z-index:999
  }

  .navbar-nav .nav-link{
    display:block;
    padding:15px;
    font:700 18px/1.2 'Roboto',sans-serif;
    text-align:center;
    color:#333;
    background:rgba(255,255,255,.8);
    border-bottom:1px solid #eee;
    transition:background-color .3s
  }
  .navbar-nav .nav-link:last-child{border-bottom:none}
  .navbar-nav .nav-link:hover{
    background:rgba(240,240,240,.8);
    color:#007bff
  }
}
.navbar-light .dropdown-item:hover{
  background-color: #fff!important;
  color: rgba(0,0,0,.7)!important;
  max-width: 100%;
  font-weight: 600;
}
.navbar-light .dropdown-toggle:hover{
  background-color: #fff;
}

/* ─────────── 2.  TILES GRID ─────────── */
.wrap{
  max-width:1700px;
  margin:50px auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:80px
}
@media(max-width:1000px){
  .wrap{grid-template-columns:1fr;gap:10px}
}

.tile{
  position:relative;
  height:380px;
  cursor:pointer;
  overflow:hidden;
  color:#fff;
  font-family:'Roboto',sans-serif;
  background:#808080;
  box-shadow:0 35px 77px -17px rgba(0,0,0,.44);
  transition:.4s ease-out
}
.tile:hover{transform:scale(1.05);box-shadow:0 35px 77px -17px rgba(0,0,0,.64)}
.tile img{
  position:absolute;
  inset:0;
  width:100%;object-fit:cover;
  z-index:0;
  transition:.4s ease-out
}
.tile:hover img{opacity:.2}

.tile .text{position:absolute;inset:30px 30px auto 30px}

.tile h2{margin:0;font-weight:200;font-style:italic}

.tile p{
  margin:20px 0 0;
  line-height:25px;
  font-weight:500;
  transform:translateX(-200px);
  transition:.6s ease-in-out .2s
}
.tile:hover .animate-text{transform:translateX(0);opacity:1}
.animate-text{opacity:0}

.dots{
  position:absolute;bottom:20px;right:30px;
  width:30px;height:30px;
  display:flex;flex-direction:column;
  justify-content:space-around;align-items:center
}
.dots span{
  width:5px;height:5px;
  background:currentColor;
  border-radius:50%;
  display:block;
  opacity:0;
  transform:translateY(30px);
  transition:.4s ease-out
}
.tile:hover .dots span{opacity:1;transform:translateY(0)}
.dots span:nth-child(1){transition-delay:.05s}
.dots span:nth-child(2){transition-delay:.1s}
.dots span:nth-child(3){transition-delay:.15s}

/* ─────────── 3.  BLOG CARD (single source of truth) ─────────── */
.blog-card{
  display:flex;flex-direction:row;
  width:80vw;max-width:1850px;height:200px;
  margin:1rem auto;
  background:#fff;
  border-radius:5px;
  box-shadow:0 3px 7px -1px rgba(0,0,0,.1);
  font:1rem/1.4 sans-serif;
  overflow:hidden
}
.blog-card a{color:inherit}
.blog-card a:hover{color:#5ad67d}
.blog-card:hover .photo{transform:scale(1.1) rotate(3deg)}

.meta{flex:1;position:relative;overflow:hidden}
.photo{
  width:100%;height:100%;
  background:url("{{ asset('assets/images/PALSA5.jpg') }}") center/cover no-repeat;
  transition:transform .2s
}

.description{
  flex:2;padding:1rem;
  background:#9e9e9e0f;
  position:relative;z-index:1;
  height:150px;overflow:hidden;text-overflow:ellipsis
}
.description h1,.description h2{font-family:Poppins,sans-serif;margin:0}
.description h1{font-size:1.7rem;line-height:1}
.description h2{font-size:1rem;font-weight:300;text-transform:uppercase;color:#a2a2a2;margin-top:5px}
.description p{margin:1rem 0 0;position:relative}
.description p:first-of-type{margin-top:1.25rem}
.description p:first-of-type:before{
  content:"";position:absolute;top:-.75rem;
  width:35px;height:5px;border-radius:3px;background:#5ad67d
}

.read-more{text-align:right}
.read-more a{
  color:#5ad67d;display:inline-block;position:relative
}
.read-more a:after{
  content:"\f061";font-family:FontAwesome;
  margin-left:-10px;opacity:0;vertical-align:middle;
  transition:margin .3s,opacity .3s
}
.read-more a:hover:after{margin-left:5px;opacity:1}

/* ─────────── 4.  BLOG GRID & DECORATIVE ELEMENTS ─────────── */
.blog-grid{
  background:#fff;
  border:1px solid #d6d6d6;
  box-shadow:0 0 20px #c3c3c3;
  margin:10px 0;border-radius:1px
}

.discretion-blog{padding:15px}
.discretion-blog p{font-size:15px;color:#454343}
.discretion-blog h4{
  font:700 16px/1.2 'Poppins',sans-serif;
  text-transform:uppercase;color:#454343
}

.discretion-blog .btn{
  position:relative;
  width:100%;margin-top:10px;
  background:#454343;color:#fff;
  text-transform:uppercase;border-radius:0;
  transition:.3s
}
.discretion-blog .btn:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:#79b82d;border:2px solid #79b82d;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s ease-out
}
.discretion-blog .btn:hover{color:#fff}
.discretion-blog .btn:hover:before{transform:scaleX(1)}

.date-blog{
  position:absolute;left:15px;bottom:0;
  width:70px;padding:10px 0;
  background:#82b53f;color:#fff;text-align:center
}
.date-blog:after{
  content:"";position:absolute;left:0;top:-11px;
  border:0 solid transparent;
  border-right:70px solid transparent;
  border-bottom:12px solid #82b53f
}

.img-date{position:relative}
.img-date img{
  width:200%;height:250px;
  object-fit:cover;object-position:center
}

/* ─────────── 5.  OWL CAROUSEL (once) ─────────── */
.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{transform:translate3d(0,0,0);backface-visibility:hidden}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;height:0;visibility:hidden}
.owl-carousel .owl-item{float:left}
.owl-carousel .owl-item img{max-width:100%}
.owl-carousel .item{padding:0 7.5px}
.owl-controls{user-select:none;-webkit-tap-highlight-color:transparent}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{cursor:pointer}
.owl-carousel .owl-wrapper-outer.autoHeight{transition:height .5s ease-in-out}

/* active pagination tint (inside .user-blog wrapper) */
.user-blog .owl-theme .owl-page.active span,
.user-blog .owl-theme .owl-page:hover span{background:#82b53f}

/* ─────────── 6.  GENERIC DEMO NAVIGATION (demo900-905) ─────────── */
[id^="demo9"]{position:relative}
[id^="demo9"] .customNavigation{
  position:absolute;top:50%;left:0;width:100%;margin-top:-40px
}
[id^="demo9"] .customNavigation .btn{padding:0}
[id^="demo9"] .customNavigation .btn[class^="prev"]{left:-76px;position:relative}
[id^="demo9"] .customNavigation .btn[class^="next"]{
  right:-70px;position:relative;float:right
}

/* ─────────── 7.  SECTION HEADINGS ─────────── */
.heading{
  position:relative;
  margin:0 0 70px;
  font:700 30px/1 'Poppins',sans-serif;
  text-align:center;text-transform:uppercase;
  color:#454343
}
.heading:after{
  content:"";position:absolute;top:100%;left:50%;
  width:180px;height:40px;border-radius:4px;
  background:url(https://i.ibb.co/G32GT0L/heading-line.png) center/contain no-repeat;
  transform:translateX(-50%)
}
.heading span{display:block;font:500 18px/1 'Poppins',sans-serif}

.white-heading{color:#fff}
.white-heading:after{background:url(img/heading-line-white.png) center/contain no-repeat}
.white-heading span{color:#fff}

/* ─────────── 8.  PARTNERS STRIP ─────────── */
.partner-section{
  background:rgba(11,157,38,.769);
  color:#fff;padding:40px 20px
}
.partner-section .container{max-width:991px}
.partner-logo{max-width:120px}
.partner-text .h2{font-weight:700}
.partner-text p{font-size:.9rem}
@media(max-width:768px){
  .partner-text .h2{text-align:center}
  .partner-text p{text-align:justify;text-align-last:center}
}


.roof-panels {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    padding: 40px;
    background: #f9f9f9;
}

.roof-panels h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.roof-panels h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
    color: #555;
}

.roof-panels p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #666;
}

.roof-panels ul {
    list-style: disc inside;
    margin-bottom: 2rem;
}

.roof-panels li {
    margin-bottom: 0.5rem;
}

.roof-panels a {
    color: #0077cc;
    text-decoration: underline;
}

.cta-bloc {
  background: #ffffff;
    padding: 30px;
    max-width: 600px;
    margin: auto;
    border-radius: 16px;
    box-shadow: 0 0px 11px rgb(92 184 0 / 28%);
    text-align: center;
    margin-top: 15px;
}

.cta-bloc .h2 {
  color: #222;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.cta-bloc p {
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 25px;
}

.btn-call-to {
  background-color: #5cb874;
  color: #fff;
  padding: 12px 24px;
  font-size: 1rem;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-call-to:hover {
  background-color: #5cb874;
  color: #fff;
}