@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


::-webkit-scrollbar{width:7px;background-color:#aaa}
::-webkit-scrollbar-thumb{background-color:#000;border-radius:5px}
::selection{background:#222;color:#fff}
::-moz-selection{background:#222;color:#fff}
:root {--grey:#5a5b5d; --lightGrey:#fafafa; --white:#fff; --green:#00b816; --darkgreen:#2f5233; --maroon:#d0232b; --black:#000;  --orange:#E31C17; --yellow:#eec101; --blue:#0089cf; --lightBlue:#dcedf5;}
html {font-size: 12px;}
body{margin: 0; padding: 0; color: var(--grey); font-weight: 400; font-family: 'Poppins', sans-serif;font-size: 1rem; line-height:1.6; overflow-x: hidden;}
ul, li {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none; color: inherit; transition: all 0.3s ease-in;}

.whiteText{color:var(--white)}
.blueText{color: var(--blue);}
.orangeText{color: var(--orange);}

.greyBg{background: var(--lightGrey);}

@media(min-width:1366px){html {font-size: 14px;}.container {max-width:1250px}}
@media(min-width:1800px){ html {font-size: 16px;} .container {max-width:1600px}}
@media(max-width:768px){ .container, .container-fluid {padding-left: 20px; padding-right: 20px;}}




.title {font-size: 3rem; letter-spacing: 1px; text-transform: capitalize; font-weight: 400;}

.subTitle{font-weight: 400; font-size: 1.2rem; margin-bottom: 15px; color: var(--black);}



main {overflow: hidden;}

/* animated css */
.animateThis {position:relative;will-change:opacity transform}
.slideLeft {opacity:0;-moz-transition: all .5s ease;-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;-moz-transform: translate3d(50px, 0px, 0px);-webkit-transform: translate3d(50px, 0px, 0px);-o-transform: translate3d(50px, 0px, 0px);-ms-transform: translate3d(50px, 0px, 0px);transform: translate3d(50px, 0px, 0px)}
.slideLeft.in-view {opacity: 1;-moz-transform: translate3d(0px, 0px, 0px);-webkit-transform: translate3d(0px, 0px, 0px);-o-transform: translate3d(0px, 0px, 0px);-ms-transform: translate3d(0px, 0px, 0px);transform: translate3d(0px, 0px, 0px)}
.slideRight {opacity:0;-moz-transition: all .5s ease;-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;-moz-transform: translate3d(-50px, 0px, 0px);-webkit-transform: translate3d(-50px, 0px, 0px);-o-transform: translate3d(-50px, 0px, 0px);-ms-transform: translate3d(-50px, 0px, 0px);transform: translate3d(-50px, 0px, 0px)}
.slideRight.in-view {opacity: 1;-moz-transform: translate3d(0px, 0px, 0px);-webkit-transform: translate3d(0px, 0px, 0px);-o-transform: translate3d(0px, 0px, 0px);-ms-transform: translate3d(0px, 0px, 0px);transform: translate3d(0px, 0px, 0px)}
.slideTop {opacity:0;-moz-transition: all .5s ease;-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;-moz-transform: translate3d(0px, 50px, 0px);-webkit-transform: translate3d(0px, 50px, 0px);-o-transform: translate3d(0px, 50px, 0px);-ms-transform: translate3d(0px, 50px, 0px);transform: translate3d(0px, 50px, 0px)}
.slideTop.in-view {opacity: 1;-moz-transform: translate3d(0px, 0px, 0px);-webkit-transform: translate3d(0px, 0px, 0px);-o-transform: translate3d(0px, 0px, 0px);-ms-transform: translate3d(0px, 0px, 0px);transform: translate3d(0px, 0px, 0px)}
.fadeGrow {opacity:0;-moz-transition: all .7s ease;-webkit-transition: all .7s ease;-o-transition: all .7s ease;transition: all .7s ease;-moz-transform:scale(.5);-webkit-transform:scale(.5);-o-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}
.fadeGrow.in-view {opacity:1;-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.fadeIn {opacity:0;-moz-transition: all .5s ease;-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease}
.fadeIn.in-view {opacity:1}





/* About section */
.aboutWrap{position: relative;}
.aboutWrap:after{ width: 43%;
  position: absolute;
  bottom: 0;
  /* height: 100%; */
  border-bottom: 150px solid #f4f4f5;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  /* margin-top: 20px; */
  /* margin-bottom: 10px; */
  content:"";
  right: 0;
  top: 0;
  transform: rotate(270deg); z-index: -1;}
.aboutBox{position: relative;}
.counterWrp{background: var(--yellow); }
.counterVertical{width: 200px; position: absolute; right: -30px; top: 10%; bottom: 10%;}

.countBox {text-align: center; text-transform: uppercase; font-size: 1rem; font-weight: 600; padding: 20px 0; color: #755f00;}
.countNo {color: var(--yellow); font-weight: 700; font-size: 3rem; -webkit-text-fill-color:var(--yellow); /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--white);}
@keyframes move-bg {
  0% {background-position: 0 bottom;}
  100% {background-position: -100% bottom;}
}

.commonList li{margin-bottom: 5px; position: relative; padding-left: 20px;}
.commonList li:before{width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 0; top: 8px; background: var(--orange); content: "";}



.aboutPic { border-radius: 25px; overflow: hidden;}
.aboutPic img {width: 100%; height: 100%; object-fit: cover;}



.giveawayWrap{background: url(../images/Citadel_offerbanner.jpg) no-repeat ; background-size: cover; position: relative; color: var(--white); text-transform: capitalize;}
.giveawayWrap:before{background: #e31c17eb; position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ""; z-index: 0;}
.giveaway{z-index: 1; font-size: 1.8rem;}
.giveaway img{width: 100%; max-width: 250px;}

.citadelOffer img{width: 100%; display: block;}

.brandBox{text-align: center; font-size: 1.3rem; transition: all .3s ease-in-out; padding-top: 20px;}
.brandPic{margin-bottom: 10px; transition: all .3s ease-in-out}
.brandPic img{width: 100%; display: block;transition: all .3s ease-in-out}
.brandBox span{color:#E31D18; font-weight:700;}

.brandBox:hover{color: var(--orange);transition: all .3s ease-in-out}
.brandBox:hover .brandPic img{transform: scale(1.05); transition: all .3s ease-in-out}

.sliderArrow .slick-arrow { width:30px; height:30px;  position: absolute;  color: transparent; z-index: 1;  background:none;  bottom: -35px; outline: none; border: 1px solid transparent;border-radius: 100%;  }
.sliderArrow .slick-arrow.slick-prev {left:44%;  }
.sliderArrow .slick-arrow.slick-prev:before{ width:10px; height:10px;  position: absolute; top:9px; left:11px; color: transparent; z-index: 1; content:"";   border-top: 1px solid var(--black); border-left: 1px solid var(--black); transform: rotate(
-44deg);}

.sliderArrow .slick-arrow.slick-next {right:44%;  }
.sliderArrow .slick-arrow.slick-next:before{ width:10px; height:10px;  position: absolute; top:9px; right:11px; color: transparent; z-index: 1; content:"";   border-top: 1px solid var(--black); border-left: 1px solid var(--black); transform: rotate(
135deg);}

.sliderArrow .slick-arrow:hover{ background:var(--orange); border: 1px solid var(--orange); }
.sliderArrow .slick-arrow.slick-next:hover:before, .sliderArrow .slick-arrow.slick-prev:hover:before{border-top: 1px solid var(--white); border-left: 1px solid var(--white);}

.sliderBullet .slick-dots {text-align: center; display: block; position: absolute; left: 0; right: 0; bottom: -35px; }
.sliderBullet .slick-dots li {margin:0 3px; display: inline-block; position: relative; }
/* .sliderBullet .slick-dots li.slick-active::before{width: 16px; height: 16px; border-radius: 100%; border:1px solid var(--orange); position: absolute; left: -3px; top: -3px; content: "";} */
.sliderBullet .slick-dots li button {width:10px !important ; position: relative; z-index: 9; display: block; border: 0; height:10px; padding: 0; margin: 0; border-radius:100%;  background:#c3c3c3; color:transparent; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out;}
.sliderBullet .slick-dots li.slick-active button, .sliderBullet .slick-dots li.slick-active button:hover {background:var(--orange); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out;}
.sliderBullet .slick-dots li button:before{ content:"";}


.videoBox {position: relative; padding-bottom: 55%; height: 0; margin-bottom: 15px; overflow: hidden;}
.videoBox img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out;}

.videoBtn {width:100%;height:100%;padding:0;background:none;position:absolute;z-index:2;transition:all .3s ease;}
.videoBox:hover .bannerVideoBtn {transform:scale(1.2);}
.videoBtn:before {content:'';width:0;height:0;border-left:17px solid var(--white);border-top:10px solid transparent;border-bottom:10px solid transparent;display:block;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;transform:translateX(2px);}
.videoBox:hover .videoBtn::before {border-left:17px solid var(--white);}


video{width:100%;height:auto;}


.mallBox{background: var(--white); display: block; margin: 20px 0;}
.mallBox:hover{box-shadow: 0 0 20px #ccc;}  
.mallPic{height: 100%; overflow: hidden;}
.mallPic img{ width:100%; transition:all .5s ease-in-out; display: block;}
.mallBox:hover img{ -webkit-transform: scale(1.08);  transform: scale(1.08);}
.mallName{font-size: 1.1rem; padding: 10px; text-align: center;}
.mallName span{display: block;}

.freeGuidWrap{background: #f2f2f2; font-size: 1.4rem;}
.fgBtn{display: inline-block; padding: 5px 20px; font-size: 1.2rem; text-transform: uppercase; background: var(--orange); color: var(--white);}
.fgBtn:hover {background: var(--black); color: var(--white);}

@media(max-width:991px){
  .counterWrp {border: 0;}
  .countBox {padding: 0;}

  .aboutPicWrp {position: relative; bottom: auto; transform: inherit;}
  .aboutPic {transform: inherit;}

  .aboutVrahega {margin: 0;}
  .counterVertical{position: static; width: auto;}
}

@media(max-width:768px){
  .sliderArrow .slick-arrow.slick-prev {left:0;  }
  .sliderArrow .slick-arrow.slick-next {right:0;  }  
}

@media(max-width:575px){
  .countBox {font-size: 0.80rem;}
  .countNo {font-size: 2rem;}

  .brandPic{ display: inline-block; margin: 0 10px;}
  .brandPic img{max-width: 100px;}
}



.directorPopup{ background:#fff; border-radius:0 50px 0 50px; padding:40px; overflow: hidden;}
.directorPopup h3{font-size: 1.2rem;}
.fancybox__content{background: none; padding: 0;}
.fancybox__backdrop{background: #0a1933ed;}


#blogGrid .slick-dots li button{
    display:none;
}