@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
body{
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.home-top{
    height:100dvh;
}
.container{
    width: 1320px;
}
.text-naif-secondary{
    color: #A99162;
}
.bg-naif-secondary{
    background-color: #A99162;
}
.btn-primary, .btn-wrap button{
    background-color:#A99162 !important;
    border-radius:50px !important;
    border:6px solid #e8d7bb !important;
    color:#ffffff !important;
    font-size:20px !important;
    font-weight:600;
    transition:.3s ease-in-out;
    cursor: pointer;
}
.btn-wrap.ramadan button{
    background-color:#204145 !important;
    border:0 !important;
}
.btn-primary:hover, .btn-wrap button:hover{
    background-color:transparent !important;
    color:#A99162 !important;
    border:6px solid #e8d7bb !important;
}
.btn-wrap.ramadan button:hover{
    background-color:#204145 !important;
    border:0 !important;
    opacity:0.8;
    color:#ffffff !important;
}
.btn-wrap.ramadan.wht button{
    background-color:#ffffff !important;
    border:0 !important;
    color:#204145 !important;
    margin:0 auto !important;
}

.btn-wrap.ramadan.wht button:hover{
    background-color:#ffffff !important;
    border:0 !important;
    opacity:0.8;
    color:#204145 !important;
}
.btn-wrap button{
    padding: .55rem 2.5rem !important;
    margin:0 !important;
}
.banner-section .btn-wrap button{
    padding: 1rem 2.5rem !important;
}
.btn-secondary{
    background-color:#ffffff;
    border-radius:50px;
    border:6px solid #e8d7bb;
    color:#A99162;
    font-size:20px;
    font-weight:600;
    transition:.3s ease-in-out;
}
.btn-secondary:hover{
    background-color:transparent;
    color:#ffffff;
    border:6px solid #e8d7bb;
    cursor: pointer;
}
.btn-green{
    background-color:#415D60;
    border-radius:50px;
    border:6px solid #9fadae;
    color:#ffffff;
    font-size:20px;
    font-weight:600;
    transition:.3s ease-in-out;
}
.btn-green:hover{
    background-color:transparent;
    color:#415D60;
    border:6px solid #9fadae;
    cursor: pointer;
}
nav ul li a:hover{
    color:#A99162 !important;
}
nav ul li a.active{
    font-weight: 600;
    color:#A99162 !important;
}
.single-service{
    border-radius:45px;
    background-color:#ffffff;
    padding:25px;
    position: relative;
    box-shadow:0px 4px 30px -8px rgb(0 0 0 / 25%);
    overflow: hidden;
}
.single-service::after{
    content:"";
    position: absolute;
    right:0;
    bottom:0;
    background:url('../img/service-bg.png');
    width: 230px;
    height: 220px;
    background-repeat: no-repeat;
}
.events-wrap .event{
    padding:5px;
    border-radius:20px;
    font-weight:700;
    background-color:#ffffff;
    text-align:center;
    width:48%;
}
.events-wrap .event img{
    border-radius:20px;
}
.events-wrap .event span{
    font-size:25px;
    line-height:30px;
    color:#444444;
    font-weight:700;
    width:80%;
    margin:auto;
    margin-top:10px;
    margin-bottom:10px;
}
/* .blogs-carousel  .owl-stage, .imams-carousel  .owl-stage {
    padding-left: 0 !important;
}
.blogs-carousel .owl-stage-outer, .imams-carousel .owl-stage-outer {
    overflow: unset;
    clip-path: inset( -100vw -100vw -100vw 0 );
} */
.value-box:after{
    content: "";
    position: absolute;
    top: -39px;
    width: 0;
    height: 0;
    left: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #ffffff;
    right: 0;
    margin: auto;
}
.why-niaf-box:after{
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    left: -60px;
    right: auto !important;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #ffffff;
    margin: auto;
    transform: translateY(-50%) rotate(270deg);
}
.tabs-hdr a{
    color:#204145;
    font-size:50px;
    line-height:80px;
    font-weight: 700;
    border-bottom:4px solid #BEBEBE;
}
.tabs-hdr a.active{
    border-bottom:4px solid #204145;
}
.md\:w-48 {
    width:48% !important;
}
.verse-cont{
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 47%;
    transform: translateY(-50%);
}
.gallery-img, .gallery-video{
    border-radius:20px;
    width:24%;
    margin-bottom:1.5%;
}
.galler-hover-wrap{
    visibility:hidden;
    opacity:0;
    background-color:rgb(32 65 69 / 80%);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
    transition:.3s;
    cursor: pointer;
}
.galler-hover-wrap img{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
}
.gallery-img:hover .galler-hover-wrap, .gallery-video:hover .galler-hover-wrap{
    visibility: visible;
    opacity:1;
}
.custom-lightbox{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top:0;
    background-color: rgb(32 65 69 / 80%);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility:hidden;
    opacity:0;
    transition: .3s;
    width:0;
    margin: auto;
}
.custom-lightbox.show{
    opacity:1;
    visibility:visible;
    width:100%;
}
.custom-lightbox .content{
    width: 60%;
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
    margin: auto;
}
.custom-lightbox .content .media{
    border-radius:50px;
}
.custom-lightbox .close{
    position: absolute;
    top:30px;
    right:30px;
}
.custom-lightbox .close img{
    width:50px;
}
.dd-menu svg{
    fill: #222222;
}
.dd-menu a:hover svg{
    fill: #A99162;
}
.dd-menu ul{
    visibility:hidden;
    opacity:0;
    transition:.3s;
    height:0;
    background-color:#ffffff;
}
.dd-menu:hover ul{
    opacity:1;
    visibility:visible;
    height:auto;
}
.dd-menu ul.open{
    visibility:visible;
    opacity:1;
    height:auto;
}
.dd-menu ul li a{    
    font-size: 1.125rem;
    line-height: 1.75rem;
}
#nav-toggle svg{
    fill:#204145;
}
.event-title{
    /* display: inline-block;
    height: 75px;
    overflow: hidden !important;
    text-overflow: ellipsis;
    box-sizing: border-box; */

    display: -webkit-box;
    height: 75px;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;   /* Limits the number of lines to 3 */
    -webkit-box-orient: vertical;
    box-sizing: border-box;
    line-height: 1.2;        /* Adjust line-height for better control over text overflow */
    max-height: calc(1.2em * 2); /* Adjust max-height to fit line-clamp */
}

/* Support Us Circle Styling */
@keyframes animCircle {
    0%,
    33% {
      --pgCirclePercentage: 0;
    }
    100% {
      --pgCirclePercentage: var(--value);
    }
  }
  
  @keyframes animValue {
    0%,
    33% {
      --pgValuePercentage: 0;
    }
    100% {
      --pgValuePercentage: var(--value);
    }
  }
  
  @property --pgValuePercentage {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
  }
  
  @property --pgCirclePercentage {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
  }
  
  div[role='circleBar'] {
    animation: none;
    width: var(--size);
    height: var(--size);  
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;  
    background: radial-gradient(
        closest-side,
        white 88%,
        transparent 0 98%,
        white 0
      ),
      conic-gradient(var(--fg) calc(var(--pgCirclePercentage) * 1%), var(--bg) 0);
    color: #ffffff;
    position:relative;
  }

  div[role='circleBar'].animate {
    animation: animCircle var(--time) forwards;
    animation-delay: var(--timeDelay);
  }
  
  div[role='circleBar']::before {
    animation: none;
    font-size: 2.25rem;
    position: relative;
    z-index: 1;
    font-weight:700;
  }

  div[role='circleBar'].animate::before {
    animation: animValue var(--time) forwards;
    animation-delay: var(--timeDelay);
    counter-reset: percentage var(--pgValuePercentage);
    content: counter(percentage) " +";
  }
  
  div[role='circleBar']::after {
    position: absolute;
    top: 0;
    bottom: 0;
    content: "";
    background-color: #204145;
    left: 0;
    right: 0;
    border-radius: 100%;
    margin: 13%;
  }

/* Medai Queries */
@media screen and (max-width: 600px) {
    .container {
        width: 100%;
        padding:0 20px;
    }
    .btn-secondary, .btn-primary, .btn-green{
        font-size: 16px;
    }
    .home-top{
        height:auto;
    }
    .events-wrap .event{
        width:100%;
    }
    .tabs-hdr a {
        font-size: 17px;
        line-height: 20px;
    }
    #upcoming .img-wrap, .blogs .img-wrap{
        height:auto !important;
    }
    .why-niaf-box:after{
        top: -39px;
        width: 0;
        height: 0;
        left: 0;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 40px solid #ffffff;
        right: 0 !important;
        margin: auto;
        transform:none;
    }
    .custom-lightbox .content{
        width:90%;
    }
    .custom-lightbox iframe{
        height:400px !important;
    }
    .gallery-img, .gallery-video{
        width:100% !important;
    }
    .btn-wrap button {
        margin: auto !important;
    }
    .why-ramadan{
        background-color: #214246 !important;
        background-image: none !important;
        margin-top:0px !important;
    }
    .look-back{
        background-position:top !important;
    }
    .look-back .btn-wrap.ramadan{
        background-color: #204145;
        padding-top: 30px;
        width: 100%;
        padding-bottom: 50px;
    }
    .look-back h4, .look-back span, .look-back p{
        padding:0 10px;
    }
}