@import url("../fonts/font.css");
body ,html{
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
    font-family: "SF UI Display Thin";
    letter-spacing: 1px;
    /*overflow:hidden;*/
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
    outline: none;
  }

/* Project Variables */
:root{
    --yellow:#FFCB29;
    --black:#141718;
    --dark:#1B1F20;
    --grey:#858585;
    --white:#FFF;
    --pale-yellow: #FFEAA9;
}
.form-control::placeholder {
  color: #ccc;
  opacity: 1; /* Firefox */
}

.form-control::-ms-input-placeholder { /* Edge 12 -18 */
  color: #ccc;
}
h1, h2, h3, h4, p{
    font-family: 'SF UI Display Thin';
}
.semibold{font-family: 'SF UI Display Semibold';}
.w-500{max-width:500px;}
a{color:var(--yellow);}

.row0{margin-left: 0; margin-right: 0;}
.col0{padding-left: 0; padding-right:0;}
.top-bar{ position: fixed; top: 0; width: 100%; padding:10px; z-index: 9998; transition: all 0.3s ease-in-out;}
.black-top{ transition: all 0.3s ease-in-out;}
.cool-tainer{max-width: 94%; margin: 0 auto; padding:20px 10px 5px;}
.cool-logo a .logo-light, .cool-logo a .logo-dark{max-height:70px;}
.cool-logo a .logo-light{display: block;}
.cool-logo a .logo-dark{display: none;}
.black-top .cool-logo a .logo-light{display: none;}
.black-top .cool-logo a .logo-dark{display: block;}
.cool-menu{ display: block; text-align:right; margin-top:20px; color:var(--yellow)}
.cool-menu a{font-size:1.3rem; border:1px solid var(--yellow); padding:7px 10px; color:var(--yellow)}
.cool-nav{ padding:40px 0 10px; text-align:right; display: none; background:#33333390;}
.cool-nav ul{ margin: 0; padding:0; }
.cool-nav ul li{list-style: none !important; display: block; margin: 5px 0;}
.cool-nav ul li a{ text-decoration: none; padding:10px 20px; font-size: 0.8rem; color:#fff; font-family: Arial; letter-spacing: 3px;}
.black-top .cool-nav ul li a{ color:#000;}
.cool-nav-reviel{display:block; transition:all 0.8s ease-in-out;}
.bg-nav{background: rgba(27,31,32,0.9);}

  h1 { margin:0; padding:0;}
  .active .slideInLeft {
    animation: slideInLeft 1.0s both
  }

  @keyframes slideInLeft {
    0% {
      transform: translate3d(-1000px, 0, 0);
      visibility: visible;
    }

    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  .active .zoomInDown {
      animation: zoomInDown 1.0s both
  }
  @keyframes zoomInDown {
    0% {
      opacity: 0;
      transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
      animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
      opacity: 1;
      transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
  }

  p {
    font-size: 1em;
  }
    .black-top .navbar-nav .nav-item .nav-link{ color:#333;}

/* navbar ends here */

/* -----------------------
    HOME PAGE SECTION 
-------------------------- */
/* Centered texts in each section
    * --------------------------------------- */
.white{color:var(--white);}
.yellow{color:var(--yellow);}
.black{color:var(--black);}
.dark{color:var(--dark);}
.pale{color:var(--pale-yellow)}
section{
  position: relative;
  text-align:left;
  min-height:100vh;
  padding:3% 0;
  /*background-position: left;*/
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}
.section-white{ background-color:var(--white); color:#111517;}
.section-yellow{ background-color:var(--yellow);}
.section-dark{ background-color:var(--dark); color:#fff;}
.section-black{background-color: var(--black);color:#fff;}
.section-half{min-height:50vh; padding:4% 0;}
.section-quarter {min-height: 25vh; padding:4% 0;}
.msg{color:#ddd;}

.page{padding:3%; min-height:100%;}
.home-page{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height:100vh;
}
.qn-mark{position:absolute; top:0;left:0; width:100%; height:100%; z-index:1;}
.qn-mark .qn-inner{position:absolute; right:10%; top:20%; transition:translateY(-20%); width:45%;}
.other-page{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height:60vh;
    padding:4% 0;
    position: relative;
}

.left-body{
    position:relative;
    top:0;
    min-height:100vh;
    z-index:2;
}
.left-side{ 
    /*padding-top:25%; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width:100%;
    z-index:3;
}
.left-side .htitle{
    font-family: SF UI Display Medium;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    position: relative;
    z-index: 12;
}
.htitle:before{
  /*position: absolute;
  width: 100%;
  height:250%;
  top: 720%;
  left:50%;
  transform: rotateZ(-90deg);
  content: "SAG";
  font-size:22vw;
  font-family: Arial;
  font-weight: 900;
  color: #333;
  z-index: 0;*/
}

.hoznt-line{max-width:230px; height:3px; margin-bottom: 5%; background: var(--yellow); display: block;}

.left-side .heading{
    font-family: 'SF UI Display Heavy';
    font-size: 3rem;
    line-height: 1;
    /* -webkit-text-stroke: 1px #a9a9a9; */
    color: var(--yellow);
    text-align: left;
}
.left-side .caption{
  position: relative;
  /* font-family: 'PlayfairDisplay-Italic'; */
  font-size: 16px;
  color: #fff;
  margin: 15px 0 35px 0;
  max-width:450px;
}

.txtt-b, .txtt-w, .txtt-y{
  overflow: hidden; 
  position: relative; 
  display: inline-block;
  padding:10px 30px;
}

.txtt-b:before, .txtt-w:before, .txtt-y:before, .txtt-b:after, .txtt-w:after, .txtt-y:after{
  position: absolute;
  top: 14px;
  left: 0;
  height:100%;
  width:100%;
  border-radius: 50%;
  font-size:1.2rem;
  content: "\2688";
  color: var(--yellow);
  transition: all 1.9s ease-in-out;
}
.active .txtt-b:after{
  animation: l-r 2.5s both;
}

.active .txtt-b:before{
  background: #1B1F20;
  opacity: 0.7;
  animation: l-r 3.3s both;
}
.active .txtt-w:after{
  background: #fff;
  animation: l-r 2.5s both;
}

.active .txtt-w:before{
  background: #fff;
  animation: l-r 1.9s both;
}
.active .txtt-y:after{
  background: #FFCB29;
  animation: l-r 2.5s both;
}

.active .txtt-y:before{
  background: #FFCB29;
  animation: l-r 2.5s both;
}

@keyframes l-r{
  0%{
    width:100%;
    opacity: 1;
    visibility: visible;
    transform: translate3d(-1000px, 0, 0);
  }
  50%{
    width:100%;
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
  75%{
    width:100%;
    opacity: 0.7;
    transition: all 6.5s ease-in-out;
  }
  100%{
    width:0;
    left:100%;
    opacity: 0;
    transform: translate3d(1000px, 0, 0);
  }
}
.btn-fill{
    position: relative;
    font-family: SF UI Display Medium;
    font-size: 15px;
    text-decoration: none;
    background-color: var(--yellow);
    padding: 12px 25px;
    margin-right:7px;
    color: var(--black);
    letter-spacing: 2px;
    display: inline-block;
    overflow:hidden;
    border-radius:3px;
}
.btn-fill-yellow{
  font-family: SF UI Display Medium;
  font-size: 15px;
  text-decoration: none;
  background-color: var(--dark);
  padding: 22px 65px;
  letter-spacing: 3px;
  color: #fff;
  display: inline-block;
  overflow:hidden;
}
.btn-fill:hover, .btn-fill-yellow:hover{ text-decoration: none; color:#fff;}

.btn-fill:after, .btn-fill:before{
    position:absolute;
    top:0;
    left:-120%;
    background-color: rgba(0,0,0,0.6);
    width:100%;
    height:100%;
    content:"";
    transition:all 0.5s ease-in-out;
}
 .btn-fill:before{
    left:120%;
    background-color: rgba(255,255,255,0.6);
}
 
.btn-fill:hover:after, .btn-fill:hover:before{
    left:120%;
    transition:all 0.5s ease-in-out;
}
 .btn-fill:hover:before{
    left:-120%;
    transition:all 0.7s ease-in-out;
}

.link{
  /*height: 92%;*/
  position: absolute;
  bottom:12%;
  right:6%;
  z-index: 990;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: all;
}

.link a{
    position: relative;
    color: #fff;
    writing-mode: tb-rl;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.link a:after{
  position: absolute;
  top:102%;
  left: 8px;
  content: "";
  height:99px;
  width: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/arrow-dwn.svg');
}

.link a:hover{
    color: var(--yellow);
    cursor: pointer;
}

.left{ padding-top: 5%;}

.left h1{
  font-family: SF UI Display Semibold;
  font-size: 2.5rem;
  text-align: left;
  line-height:1;
  padding-right: 5px;
}

/* section 3 */
.c-list{margin-top:10%; position: relative;}
.c-list ul{
  position:relative;
  margin:0;
  padding:0;
}
.c-list ul li{
  list-style: none;
  display: inline-block;
  position: relative;
  background:#fff;
  width:19.5%;
  
}
.c-list ul li .scaleit{position:relative; width:100%; min-height:200px;}
.scaleit .scalebox{
  position: absolute;
  top: 0;
  /*transform:translateY(-50%);*/
  transform:scale(1);
  width: 100%;
  padding: 20px 15px;
  min-height:200px;
  line-height:200px;
  text-align: center;
  transition:all 0.5s ease-in-out;
  /*background:#eee;*/
  border:1px solid #c1c0c0;
  z-index:1;
}

.scaleit:hover .scalebox{
  transform:scale(1.2);
  background:#111;
  line-height:1;
  padding: 20px 15px 10px;
  color:#333;
  transition:all 0.5s ease-in-out;
  z-index:5;
}

.scalebox .logo-w, .scalebox .logo-b{
  width:100px;
  margin: 0 auto;
}
.scalebox:hover .logo-w, .scalebox:hover .logo-w{
  filter:grayscale(0);
  -moz-filter:grayscale(0);
  -webkit-filter:grayscale(0);
}
.scalebox .logo-w{display: none;}
.scalebox:hover .logo-b{display: none;}
.scalebox:hover .logo-w{display: block;}

.scalebox .captn{display: none;transition:all 0.5s ease-in-out; min-height:200px;}
.scalebox .captn p{font-size:0.98rem; font-weight:200; padding:20px 10px 1px; color:#888; line-height: 1.1;}
.scalebox .captn a{text-decoration: none; font-size:0.6rem; color:#eee; text-transform: uppercase; letter-spacing: 2px;}
.scalebox:hover .captn{display: block; transition:all 0.5s ease-in-out;}

.c-grid{
  width:100%;
  height:450px;
  padding: 30px;
  background-size: contain;
  background-position: bottom right;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  border:1px solid #555;
}

.long-grid{ height:900px;}

.c-grid a{
  position: absolute;
  top: 60%;
  right: 7%;
  text-decoration: none;
  color:#eee;
  font-size:1.3rem;
  text-transform: uppercase;
   transition:all 0.5s ease-in-out;
   opacity: 0;
   z-index: 3;
}
.skin{
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  z-index: 2;
}
.skin:before, .skin:after{
  position: absolute;
  width: 50%;
  height: 100%;
  top:0;
  left:0;
  content:"";
  opacity: 1;
  background: #1B1F20;
  transition:all 0.5s ease-in-out;
}
.skin:after{ left:50%;}

.c-grid:hover .skin:before{
  left:-60%;
  opacity: 0;
  transition:all 0.7s ease-in-out;
} 

.c-grid:hover .skin:after{
  left:110%;
  opacity: 0;
  transition:all 0.7s ease-in-out;
}

.c-grid:hover a{
  top: 90%;
  transition:all 0.5s ease-in-out;
  font-size:1.1rem;
  opacity: 1;
}
.c-grid .captn{height:40vh;}

.c-bg{background-color:#1B1F20;}
.c-bg:nth-child(3n-2){background-color: #1B1F20;}
.c-cont{position: absolute; top: 90%; left: 10%; width: 80%; opacity: 0; color: #fff; font-family: 'PlayfairDisplay-Italic'; transition:all 0.6s ease-in-out;}
.c-grid:hover .c-cont{ top: 50%; opacity: 1; transition:all 0.8s ease-in-out;}
.c-grid .c-img{position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); transition:all 0.6s ease-in-out; z-index: 5;}
.c-grid:hover .c-img{position:absolute; top: 30%; left: 10%; transform: none; transition:all 0.7s ease-in-out; z-index: 5;}
.c-img img{max-height:60px;}
.c-grid:hover .c-img img{filter: grayscale(100%);}

/* End of Section 3 */
/* section 4 */
.p-list{margin-top:10%; position: relative;}
.p-list ul{
  position:relative;
  margin:0;
  padding:0;
}
.p-list ul li{
  list-style: none;
  display: inline-block;
  position: relative;
  width:19.5%;
  padding: 20px 15px;
  min-height:140px;
  line-height:140px;
  text-align: center;
  transition:all 0.5s ease-in-out;
  border:1px solid #555;
  cursor: default;
}
.p-list ul li .p-logo{
  width:100px;
  filter:grayscale(10%);
  -moz-filter:grayscale(10%);
  -webkit-filter:grayscale(10%);
}
.p-list ul li:hover{
  border:1px solid #0DB04B;
}
.p-list ul li:hover .p-logo{
  width:100px;
  filter:grayscale(0%);
  -moz-filter:grayscale(0%);
  -webkit-filter:grayscale(0%);
}

/*--end of section 4---*/
.contact-cont{ padding:3% 0;}
.contact-txt{color:#eee;}
.contact-txt p{font-weight: 200; color:#dfdede; font-size: 0.8rem; margin: 0;}
.contact-txt a{text-decoration: none; color: var(--yellow); font-weight: 700;}
.subscribed input{text-decoration: none; color: #e4e3e3; background:transparent; padding: 10px; margin: 5px 0; background:#222; width: 60%; border: 0; border-bottom: 1px solid var(--yellow);}
.subscribed input:hover, .contact-txt input:hover{outline: none; border-bottom: 1px solid var(--yellow);}
.subscribed button{border:0; background:var(--yellow); color: #fff; padding:11px 20px; margin-left: -4px;}
/*----social---*/
.social{margin: 20px 0;}
.social ul{padding: 0; margin: 0;}
.social ul li{list-style: none; display: inline-block; margin-right:6px;}
.social ul li a{text-decoration: none; padding: 14px 20px; text-align: center; line-height: 1.1; font-size: 1.2rem; display: block; color: var(--black); background: var(--yellow);}
.social ul a:hover{ color: var(--yellow); background:#1c1d1e;}
/*------//--------*/

/*-------POP---------*/
.pop-boxy{
  /*display: none;*/
  position: fixed;
  top: 0;
  left: 300%;
  min-width: 100%;
  min-height: 100%;
  background: rgba(255,255,255,0.9);
  z-index: 99999;
  padding:20px;
  transition: all 0.7s ease-in-out;
}

.pop-inner{
  position: relative;
  min-width: 70%;
  min-height: 80vh;
  background:#fff;
  padding: 30px 20px;
  color:#555;
  border:1px solid #e9e9e9;
}

.pop-conts{
  position: relative;
  top: 50%;
  left: 0;
  width: 80%;
  transform: translateY(-50%);
  padding:30px 10px;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  overflow:auto;
}
#cont{padding:20px 5px 35px;}
.pop-conts h4{padding:5px 0; font-weight: 700;}
.pop-conts p{padding:10px 0;}
.pop-conts a{text-decoration:none; color:#333; display: block; padding:10px 5px;}
.pop-conts a:hover{text-decoration:none; color:#333; background:#eee;}

.pop-banner{padding:20px; width:100%; height:90vh; background-color:#ddd; background-size:cover; background-position: center;}
.pop-banner img{max-height: 50px;}
.cancel{width:40px; position: absolute; top: 20px; right: 20px; padding:10px; display: block; background:#fff; cursor: pointer; z-index: 5;}
.cancel img{width:100%;}

.prev-next{position: absolute; bottom: 30px; padding:20px; width:80%; display:none;}
.prev-next a{text-decoration: none; display: block; padding:7px; color:#333; font-size:1.1rem; font-weight:100;}
.prev-next a:hover{ text-decoration: none; display: block; padding:7px; color:#333; font-size:1.1rem; font-weight:100;}

.pop-in{left:0; transition: all 0.7s ease-in-out;}
/*----------//---------*/

/*.word-box{position:relative; bottom: 0; max-width:1000%; border:1px solid #333;}*/
.word-box {
  position: relative;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 60%;
  max-height:75%;
}
.left-note{ width:100%; text-align: center;}
.left-note img{ width:100%;}
.right-note{padding:10px;}
.right-note p{margin:20px 0; padding:5px 10px; color:#555; font-size: 1rem; text-align: justify;}
.right-note h5{font-weight:800;}

.feature-wrap{
  position: relative;
  top:0;
  left:0;
  width:inherit;
  height: auto;
  display: flex;
  overflow: hidden;
}
.feature-wrap .feature-box, .feature-box {
    position: relative;
    display: inline-flex;
    transition: all 0.5s ease-in-out;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color:#000;
    box-shadow: 3px 3px 10px #0e0e0e;
    border: 1px solid #141414;
    z-index: 1;
}
.feature-box .ft-inner{position:relative; width:300px; padding:20px; color:#fff;}
.feature-box img, .featukre-box img{height:70px; padding:10px 20px;}
.feature-box .title{min-height: 10px; padding:15px 20px 10px; text-align: left; }
.feature-box .title h4{font-size:1.2rem; color: #fff; text-transform:capitalize; font-weight:800; font-family: SF UI Display Bold;}
.feature-box .body{padding:5px 10px; margin-bottom:25px; min-height:220px;}
.feature-box .body p{padding:10px; color:#ddd; font-size: 0.85rem;}
.feature-box .btn-wrap{margin:5px 15px 5px; border-top:1px solid #777; width: 90%; position: absolute; bottom: 0; right:5px;}
.btn-wrap a{padding:15px 2px 7px; display: block; text-decoration: none; color:#777; width:100%; position: relative;}
.btn-wrap a:hover{padding:15px 2px 7px; display: block; text-decoration: none; color:#FFE07F; width:100%; position: relative;}
.btn-wrap a:after{position: absolute; right:0; content: url('../../uploads/right-arrow.png'); z-index: 0;}

/*----------------------------------------------*/
#fv-dots ul li{margin-top: 35px; padding:12px;}

#fv-dots {
    position: fixed;
    top: 35%;
    transform: none;
}

.btm-hero{
  position: absolute;
  bottom:10px;
  left:0;
  width:100%;
  height:auto;
}
.scroll-nav{padding:10px 0; max-width:300px;}
.scroll-nav ul{padding:0; margin:0; list-style-type: none;}
.scroll-nav ul li{padding:15px 0 10px; margin:10px 0 10px; display: block; border-top:0.1rem solid #888; position:relative;}
.scroll-nav ul li a{padding:10px 4px; display: block; text-decoration: none; color: var(--white); position: relative;}
.scroll-nav ul li a span{color: var(--white); position: relative; z-index:3;}
.scroll-nav ul li a:after{position: absolute; top:10px; right:7px; content: url('../../uploads/down-arrow.png'); color:var(--yellow)}
.scroll-nav ul li a:before{position: absolute; top:0; left:0; width: 0%; height:100%; content:""; background:#080808; z-index:0; transition:all .5s ease-in-out;}
.scroll-nav ul li a:hover:before{position: absolute; top:0; left:0; width: 100%; height:100%; content:""; background:#0f0f0f67; z-index:0; transition:all .5s ease-in-out;}

.conts{padding:10px 0; margin:10px 0;}
.line-top{border-top:1px solid #444;}
.line-bottom{border-bottom:1px solid #444;}
.abt-conts1{padding:20px 5px; font-size:1.4rem; line-height:1.2;}
.abt-conts1 h1{text-align: left; font-size:3.1rem;}
.abt-conts1 p{padding:1% 5px 10%; text-align: left;}
.abt-conts{padding:30px 5px 5%; border-top:1px solid #777;}
.abt-conts .title{padding:20px 10px 40px; position: relative; border-top:1px solid #595959;}
.abt-conts .title:before{padding:5px; position: absolute; width:10px; content: ""; height:10px; border-radius:50%; background:var(--yellow);}
.abt-conts h4{line-height: 1.2; font-size: 1.1rem; font-weight:600; margin-bottom: 5px; font-family: Arial;}
.abt-conts p{padding:7px 0; font-size:0.9rem; text-align: left;}

.jobposts{background:var(--dark); margin:15px 0; border-radius:5px; border:1px solid #222;}
.sub-icon{width:70px; height:70px; border-radius: 50%; margin:20px auto; text-align:center; display: flex; align-items: center; background:var(--black);}
.sub-icon img{margin:0 auto; width:30px;}
.job-cont{padding:15px 10px; width: 100%;}
.job-cont h4{line-height: 1.1; font-size: 1.2rem; font-weight: 800;}
.job-cont h5{line-height: 1.1; font-size:1rem; font-weight: 400;}
.job-cont p{padding:2px 0 0; margin-bottom:0; font-size:0.85rem; font-weight:300; color:#858585;}
.job-cont small{padding:1px 0 0; font-size:0.7rem; font-weight:200; color:#FFE07F;}

.values{position: relative; padding:20px 10px; height:auto; width:100%;}
.values .spans{position: relative; clear: both; margin:0 auto;}
.spans span{
  position: relative;
  width:250px;
  height:250px;
  background:#FFCB29CC;
  color:#fff;
  text-align: center;
  line-height: 250px;
  font-size:1.4rem;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.5s ease-in-out;
}
.spans span:nth-child(2){ left:-80px;}
.spans span:nth-child(3){ left:0; top:-80px;}
.spans span:nth-child(4){ left:-80px; top:-80px;}

.spans:hover span:nth-child(2){ left:0px;}
.spans:hover span:nth-child(3){ left:0; top:0px;}
.spans:hover span:nth-child(4){ left:0px; top:0px;}
.visions{
  position: relative;
  padding:20px 0;
  color:#fff;
}
.visions h4{padding:10px 0;}
.visions p{font-size:1.1rem;}
/*----equal height---*/
.features {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}
.flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
/*-----//-----*/
/* ----constom bootstrap properites---- */
.carousel-control-next, .carousel-control-prev {width: 5%;}
/* ============---==================== */
.about-banner{
    position:relative;
    display: block; 
    width:100%; 
    border-radius:10px 10px 0 0; 
    height:70vh; 
    overflow: hidden; 
    margin:20px auto; 
    transition:all .5s ease-in-out;
    background-size: cover;
    background-position: center;
}

.about-banner .caption{position: absolute;bottom: 20px; right: 20px; max-width: 380px;font-size: 3.5rem; line-height: 1.1; font-family: 'SF UI Display Heavy'; font-weight: 800;}

.event-banner{
    position:relative; display: block; width:100%; border-radius:10px 10px 0 0; height:500px; 
    overflow: hidden; margin:20px auto; transition:all .5s ease-in-out; background-size: cover; background-position: center;
}
.event-banner .conts{position:absolute; top:50%; transform: translateY(-50%); left:5%; padding:10px 20px; max-width:600px;}
.event-banner .conts h1{color: var(--yellow); padding:12px 10px 2px; font-size:3.5rem; line-height:1; font-family: 'SF UI Display Heavy'; font-weight:900;}
.event-banner .conts h3{padding:2px 10px; font-size:1.4rem; font-family: 'SF UI Display Thin';}
.event-banner:hover{display:block; transition:all 0.3s ease-in-out;}
.event-banner .conts a{display: inline-block; padding:10px 2%; margin-top:5%; margin-left:10px; text-decoration: none;}
.event-banner .conts a:hover{display:inline-block; color:var(--white);}
.event-banner .conts a img{display: block; width:100%;}
.event-banner .conts .caption{position: relative; color:#fff; line-height:1.3; margin:20px 0; padding: 2px 10px; color:#ddd; font-family: 'SF UI Display Thin'; font-size:1.2rem; font-weight:400;}

/*==================road map===================*/
.ruler{width:100%; height:2px; background:linear-gradient(to right, var(--black), #ddd, var(--black)); position:relative; display: flex; margin:40px 0; text-align: center;}
.ruler span{width:20%; position:relative; left:-10px; padding:10px; color:#eee;}
.ruler span:hover{width:20%; position:relative; left:-10px; padding:10px; color:var(--yellow); cursor: pointer;}
.ruler span:before{width:15px; height:15px; background:#eee; border-radius:50%; position:absolute; top:-7px; left:48%; content: "";}
.ruler span:hover:before{width:15px; height:15px; background:var(--yellow); border-radius:50%; position:absolute; top:-7px; left:48%; content: "";}
/* ==================team==================*/
.teams{padding:0; margin:10px 0; position: relative; width:100%; min-height:150px; background-color: #FFE07F; overflow: hidden; background-size: cover; background-position:top center; transition:all .5s ease-in-out;}
.teams:hover{ box-shadow: 0 -100px 92px inset #222; transition:all .5s ease-in-out;}
.teams img{width:100%; position: relative; bottom:0; filter: grayscale(100%);}
.teams:hover img{filter: grayscale(0%);}
.teams .cont-box{padding:10px 15px; position: absolute; bottom:-30px; opacity:0; width:100%; height:auto; transition:all .5s ease-in-out;}
.teams:hover .cont-box{padding:10px 15px; position: absolute; bottom:0; opacity:1; width:100%; height:auto; transition:all .5s ease-in-out;}
.teams .cont-box .name{font-size:1.4rem; font-weight:800; padding:10px 0; color:#fff;}
.teams .cont-box span, .teams .cont-box a{padding:4px 10px; margin-top: 4px; background:#eee; text-decoration:none; color:#111; font-weight:700;font-size: 0.75rem; border-radius:15px; display:inline-block;}
.teams .cont-box .bio-link{display:block; position:relative;}
.teams .cont-box .bio-link a{ position: relative; padding:14px 25px 4px 4px; font-size:1rem; color:var(--yellow); background:transparent; border-radius:0; display:inline-block; text-decoration: none;}
.teams .cont-box .bio-link a:after{ position: absolute; top:17px; right:-2px; content: url('../../uploads/right-arrow.png');}
/* =============bio page====================== */
.bio-resource{position: relative;}
.bio-resource .bio-img{background-color:#FFE07F; margin:0 0 10px;}
.bio-resource .bio-img img{position: relative; width:100%;}
.bio-resource a.resource{position: relative; text-decoration:none; display: block; background: linear-gradient(to right, #222222, var(--dark)); border-radius:5px; padding:10px 20px; margin-top:16px; transition:all .5s ease-in-out;}
.bio-resource a:hover.resource{display: block; background: linear-gradient(to right, var(--dark), #222222); transition:all .5s ease-in-out;}
.bio-resource a.resource:after{position: absolute; top:13px; right:15px; color:#555; font-size: 1.7rem;; content: url('../../uploads/downloads.png');}
.bio-resource a.resource h4{position: relative; line-height: 1.1; color:#ddd; font-size:1.1rem; margin:0;}
.bio-resource a.resource span{position: relative; font-size:0.7rem; color:#555;}
.bio-cont{position: relative; text-align: justify;}
.bio-cont h4{color:#444; font-weight:800;}
.bio-cont ul{list-style-type:square;}
.bio-cont ul li{font-size:0.9rem; line-height:1.1; padding-top:10px;}
/* ===============Flex Grid==================== */
.flex-grid{display: flex; width:100%;}
.flex-cols{display: block; padding:0px; max-height:200px; margin:12px 0; background-color:#444; overflow: hidden; background-size:cover; background-position: center;}
.flex-cols img{width:100%;}
/* ============================================ */
.guideline{background-color:var(--dark); color:#777; padding:20px; border-radius:6px; margin-top:7px;}
.guideline h3{ color:#777; padding:20px 0; font-family:'SF UI Display Bold';}
.guideline img{max-width:120px;}
.guideline .download-link{position:relative; width:100%; color:#777; padding:25px 5px 10px; border-top:1px solid #444; text-decoration:none; font-size:1.1rem; display:block; transition:all .5s ease-in-out;}
.guideline .download-link:hover{ color:#FFE07F; border-top:1px solid #FFE07F; background: var(--dark); text-decoration:none; transition:all .5s ease-in-out;}
.guideline .download-link:after{position:absolute; top:15px; right:1%; content: url('../../uploads/downloads.png'); color:#777; background-color:var(--black);width:40px; height:40px; line-height:40px; text-align:center; border-radius:50%; font-size:1rem; display:block;; transition:all .5s ease-in-out;}
/*.guideline .download-link:hover:after{ color:#FFE07F; transform:rotate(130deg); transition:all .5s ease-in-out;}*/
/* ======================Blog post====================== */
.nws-title{padding-top: 25%;color:#fff;font-size:2rem;font-weight:700;font-family: SF UI Display Light;}
.post-box{background:#363D3F;position: relative;border:1px solid #333;margin: 20px 0 0;padding-bottom: 20px;border-radius:7px; transition:all 0.5s ease-in-out;}
.post-box h4{padding:4px 10px; font-family: "SF UI Display Semibold";}
.post-box:hover{background:#252525;box-shadow: 1px 1px 9px #131313; transition:all 0.5s ease-in-out;}
.feat-img{width:95%;height:220px;background-color:#ddd;background-size: cover;background-position: center;margin:10px;}
.post-title{padding:15px;font-size:1.2rem;font-weight:600;line-height: 1.1;color:#555;}
.post-title a{text-decoration:none; color:#f6f6f6;}
.post-title a:hover{text-decoration:none; color: var(--yellow);}
.post-descript{padding:5px 15px 25px;margin-bottom:20px; font-size: 1rem; color:#fff; font-family: "SF UI Display Thin";}
.post-dates{padding:5px 15px; color:var(--yellow);font-size:0.8rem;}
.post-link{position:absolute; bottom:10px; width:100%; margin-top:10px; padding:6px 15px; color:var(--yellow); text-decoration: none;display:block;}
.post-link:hover{color:var(--yellow); text-decoration: none;display:block;}
.post-link:after{position:absolute; right:70%; content:  url('../../uploads/right-arrow.png'); opacity:0; color:var(--yellow); transition:all 0.5s ease-in-out;}
.post-link:hover:after{position:absolute; right:5%; content:  url('../../uploads/right-arrow.png'); opacity:1; color:var(--yellow); transition:all 0.5s ease-in-out;}
.read-title{font-size:1.8rem; text-align:center; color:var(--yellow); font-weight:700;letter-spacing:0.05rem;}
.read-body{color:#c5c2c2; font-size:1rem; text-align:justify; line-height:1.2;padding:20px 0 20px; font-family: sans-serif;}
.read-body p{font-family: Arial, Sans-serif; font-weight:200; letter-spacing:0.05rem; line-height:1.5; color:#bbbbbb;}
.read-body ul{list-style-type:disc;}
.read-body ul li{margin-bottom:6px;}
/*-============----===================-*/
/* -------newsletter---- */
.newsletter-wraper{position:relative; padding:2% 0; background-color:var(--black);}
.newsletter-wraper:after{position:absolute; content: ""; top:50%; left:0; height:50%; width:100%; background-color:var(--dark); z-index: 1;}
.newsletter{position:relative; padding:3% 5% 4%; border-radius:10px; color:var(--white); background-color: var(--dark); box-shadow:1px 1px 5px var(--black); z-index: 100;}
.newsletter .title{font-weight:900; font-family: "SF UI Display Semibold";  font-size: 2.5rem;}
/* ================================= */
.flat-bar-wrap{padding:5% 0 0; background-color:#000;}
.flat-bar{padding: 4% 0 2%; margin-top:4%; width:100%; min-height:350px;display: inline-flex; align-items: center; background-color:#1e1e1e78; background-size: cover; background-position: center; background-blend-mode:multiply;}
.flat-title h1{font-family: "SF UI Display Semibold"; color:var(--white); text-shadow: 1px 1px 3px #333;}

/* --------------------------- */
.footer-links{padding:1px; margin-top: 10px;}
.footer-links ul{margin:0; padding:0; list-style: none;}
.footer-links ul li{display: block; position: relative;}
.footer-links ul li:before{position: absolute; left: 0; content:"✔"; color: var(--yellow); top:2px;}
.footer-links ul li a{display: block; padding:3px 8px; color:#fff; text-decoration: none; margin-left:10px;}
.footer-links ul li a:hover{display: block; padding:3px 8px; color: var(--yellow);}
/* ================================ */
.accordians {
	/* width: 100%;  */
  min-height: 320px;
	margin: 20px auto;
  display: inline-block;
}
.accordians ul {width: 100%; margin:0; padding:0;}
.accordians li {
	position: relative;
	display: block;
	/* width: 160px; */
  width: 18%;
  max-height:100vh;
  overflow: hidden;
	float: left;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
.accordians li a{display: block;}
.accordians ul li:last-child{width: 300px;}
.accordians ul:hover li:last-child{width: 160px;}
.accordians ul li:last-child:hover{width: 300px;}
.accordians ul li:hover {width: 300px;}
.accordians li div {
	display: block;
}
/* =============client filtering================= */
.gallery-title
{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
    font-size: 1rem;
    border-radius: 5px;
    text-align: center;
    color: var(--white);
    background-color: var(--dark);
    margin-bottom: 3px;
    border:0;
}
.filter-button:hover
{
    border-radius: 5px;
    text-align: center;
    color: var(--black);
    background-color: var(--yellow);
    border:0;

}
.active-btns
{
    background-color: var(--yellow);
    color: var(--black);
}
.port-image{ width: 100%;}
.gallery_product{ margin: 10px 0; padding: 20px 10px; display: flex; align-items: center; width: 100%;text-align: center; transition:all 0.5s ease-in-out;}
.gallery_product:hover{ transition:all 0.5s ease-in-out;}
.gallery_product img{ max-height:60px; margin:0 auto; filter: grayscale(100%); max-width:100%;}
.gallery_product img:hover{filter: grayscale(5%);}
/* ============================================== */
.diamond{position:absolute; bottom:10px; left:2%;}
.diamond img{max-width:220px;}
/* -=====================form control=======================- */
.form-control {
  display: block;
  width: 100%;
  height: calc(2.8em + .79rem + 2px);
  padding: .475rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #424343;
  background-color: var(--dark);
  background-clip: padding-box;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  margin:7px 0;
}
.form-control:focus{background-color: #1a1919; border:0; border-color:none;}
.full-btn{width:100%; border:0;}
/* =====================video zoom-box========================= */
.video-wrap{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.89);
    display: none;
    z-index: 9999;
}
.video-btn{
  position: absolute;
  top:100%; right:20%; 
  /* transform:translate(-50%,-50%); */
  width:50px; height:50px;
  text-align: center;
  line-height: 50px;
  border-radius:50%;
  font-size: 1.6rem;
  padding-left:5px;
  background:var(--yellow);
  color:var(--dark);
  cursor: pointer;
  z-index: 1;
}
.video-txt{
    color: var(--yellow);
    font-size: 1rem;
    position: absolute;
    top: 0;
    width: 150px;
}
.video-btn:after, .video-btn:before{
  position: absolute;
  top:0;left:0;
  width:100%; height:100%;
  border:3px solid var(--yellow);
  transform:scale(1);
  content:"";
  border-radius:50%;
  animation-name: opct;
  animation-duration: 1.1s;
  animation-iteration-count: infinite; 
}
.show-vidz{display:block;}
.video-btn:before{animation-duration: 1.3s;}
.video-close-btn{position:absolute; top:-10px; right:-10px; font-size:1.1rem; color:var(--pale-yellow); width:35px; height:35px; line-height:30px; cursor:pointer; border:1px solid var(--pale-yellow); border-radius:50%; text-align:center;z-index:101;}
.zoom-box{width:70%; height:70%; background:#111; border:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:10px; opacity:1; transition:all .5s ease-in-out;}
.zoom-out{ transition:all 1.5s ease-in-out; opacity:1; z-index: 99;}
.zoom-box iframe{width:100%; height:100%; border:1px solid #222; display: block;}
/* ============================================== */
/*--------bouncing animation---------*/
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
.opct{
  -moz-animation: opct 2s infinite;
  -webkit-animation: opct 2s infinite;
  animation: opct 2s infinite;
}
/* ============================================ */
.map{position: fixed; bottom: -120%; left: 0%; width:100%; height:100vh; transition: all 0.4s ease-in-out; z-index: 999;}
.show-map{bottom:0; transition: all 0.4s ease-in-out; z-index:9999;}
.show-litle-map{bottom: -95%; transition: all 0.4s ease-in-out;}
.map-btn{
	width:40px;
	height:40px;
	margin: 0px 0 10px;
	line-height: 37px;
	text-align: center;
	display: inline-block; 
	cursor: pointer; 
	color: var(--yellow);
	font-size: 3.4em;
	transform: scale(1);
	animation-name: pin;
  	animation-duration: 1.4s;
  	animation-iteration-count: infinite; 
}
.cancel-map{
	position: absolute; 
	top: 2px; 
	left: 49%; 
	width:40px;
	height:40px;
	line-height: 34px;
	text-align: center;
	display: inline-block; 
	cursor: pointer; 
	/* color: #fff;  */
	background:var(--yellow);
	border:2px solid var(--yellow); 
	font-size: 1.4em;
	border-radius: 50%;
	z-index: 55;
}
.map iframe{position:absolute; width:100%; min-height: 100%;}

.video-clip{width:100%; height:350px; border-radius:17px; overflow:hidden;}
.video-clip iframe{width:100%; height:100%; border:0;}

.sub-logo{padding:3% 0;}
.sub-logo img{height:55px;}

.sub-cta-box{
    background-color:#333;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-image:url('https://test.smartafrica.group/uploads/map-b.png');
    padding:3% 0;
    border-radius: 5px;
    margin:6% 0 1%;
}
.sub-cta-logo{ padding:5px 20px 2px;}
.sub-cta-logo img{max-height:35px;}
.sub-cta-link {text-align:right; padding:2px 2%;}
.sub-cta-link a{text-decoration:none; color:#fff; padding:10px 15px; display:inline-block; text-align:right;    font-size: 1.5rem; font-weight: 700; text-shadow: 1px 1px 2px #777;}
.featured-c, .featured-l, .featured-tr{ padding:35px; text-align: center; background: #1B1F20; border-radius:7px; margin:10px 0;}
.featured-c .title, .featured-l .title, .featured-tr .title{color: var(--grey); font-size:1.4rem; font-family: "SF UI Display SemiBold";}
.featured-c .body, .featured-l .body, .featured-tr .body{color: var(--grey); font-size:0.9rem; padding:6px 0;}
.featured-l{text-align:left; text-decoration:none;}
.featured-l img{height:30px; margin-top:7px; margin-bottom:7px;}
.featured-tr{background-color:transparent;}
.featured-tr img{height:40px; margin-top:7px; margin-bottom:7px;}

.cv-upload{
    position:relative;
    padding:7px;
    margin:10px 0 20px;
}
.cv-upload input, .cv-upload .floating-upload{
    position: absolute;
    top:0;
    left:0;
    z-index:3;
    opacity:0;
}
.cv-upload .floating-upload{
    z-index:1;
    opacity:1;
}

/*---share buttons--*/
.share{color:#fff;}

.share a:hover {
    background: var(--yellow);
    color: #fff;
}
.share a {
    display: inline-block;
    font-size: 1rem;
    color: var(--yellow);
    border: 1px solid var(--yellow);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-right:8px;
}

#fileName{color: var(--yellow);}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
/* ----scale animation----- */
@keyframes opct{
  0%{
    opacity: 1;
    transform: scale(1);
  }
  100%{
    opacity: 0;
    transform: scale(1.5);
  }
}

/*---panorama slide--*/
/*======panorama========*/
article { display: flex; width: 200%;}
article.paused { -webkit-animation-play-state: paused; animation-play-state: paused;}
.panorama { width: 100%;}
.panorama ul { display: flex; background: #111; list-style-type: none; padding-left: 0; margin: 0;}
.panorama ul li { width: 100%; background: #111;}
.panorama ul li img { display: block; min-width: 100%; min-height:300px;}
/*li:nth-child(2) {
  background: green;
}
li:nth-child(3) {
  background: yellow;
}*/
@keyframes "bannermove" {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@-webkit-keyframes "bannermove" {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/*----------carousel controls---------*/
.carousel-control-next-icon, .carousel-control-prev-icon { width: 30px; height: 40px; background-color: #111; padding: 10px;}
/*========//========*/
/*----------Awards-------------*/
.awards{position:relative; width:100%; text-align:center;}
.awards img{width:200px; height:200px; border-radius: 50%; margin:10px auto;}
.awards .title{color:var(--yellow); font-size:1.5rem; font-family: 'SF UI Display Semibold'}
.awards .caption{max-width:200px; margin:3px auto; font-size:1.2rem; font-family: 'SF UI Display Thin'; color:var(--white); line-height:1.1;}
.awards .date{font-size:1.1rem; line-height:1.1; color:#777; font-family:'SF UI Display Semibold';}
/*-============----===================-*/
.cases{position:relative; width:100%; text-align:center; text-decoration: none;}
.cases .bg-img{width:100%; height:300px; background-position:top center; background-size:cover; margin:10px auto;}
.cases .title{color:var(--white); font-size:1.5rem; font-family: 'SF UI Display Semibold'; position: absolute; bottom: 9px; text-shadow: 1px 1px 2px #333; width: 100%; background-color: #333333d1; padding: 10px 10px;}
.cases .caption{max-width:200px; margin:3px auto; font-size:1.2rem; font-family: 'SF UI Display Thin'; color:var(--white); line-height:1.1;}
.cases .date{font-size:1.1rem; line-height:1.1; color:#777; font-family:'SF UI Display Semibold';}
/*--==============================--*/
.case-study{color: #fff;}
.case-study img{width: 100%;}
/*================================--*/
@media (min-width: 1390px){
    /*.container, .container-lg, .container-md, .container-sm, .container-xl {*/
        /*max-width: 1440px;*/
    /*}*/
}

@media(max-width:1390px){
  /*.left-side{ padding-top:20%;}*/
  .left{ padding-top: 7%;}
  .contact-cont{ padding:7% 0;}
  .left h1 {
      font-size: 5rem;
      padding:10px;
  }
  .link{ bottom:7%; right:3%;}
}

@media (max-width: 992px) {
  .cool-menu{ text-align: right; margin-top:8px; display: block;}
  .cool-menu a{
    padding: 5px 10px;
    color:#fff;
    font-size: 1.3rem;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
  }
  .cool-nav{ 
    position: fixed; 
    left: 0;
    width: 100%;
    display: none; 
    padding:20px 0; 
    min-height: 100%; 
    text-align:right;
    background:#333;
    transition:all 0.5s ease-in-out;
  }
  .cool-nav:after{
    content: "";
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    left: -35%;
    bottom:-35%;
    background: var(--yellow);
  }
  .cool-nav-reviel{top:11.3%; transition:all 0.8s ease-in-out;}
  .cool-nav ul li{display: block; margin-right: 5px; margin-top: 7px; margin-bottom:10px;}
  .top-bar, .black-top{background: #111;}
  .black-top .cool-logo a .logo-light{display: block;}
  .black-top .cool-logo a .logo-dark{display: none;}
  .black-top .cool-nav ul li a{ color:#fff;}
  
  /*.left-side{ padding-top:30%; }*/
  .left-side h1 {
    font-size: 45px;
  }
  .left{ padding-top: 5%;}
  .contact-cont{ padding:5% 0;}
  .c-list ul li{
    width:49.5%;
    position: relative;
    display: inline-flex;
  }
  .c-list ul li .scalebox {
    position: static;
    top: 0;
  }
  .c-list ul li .scalebox:hover{
    transform:scale(1);
  }
  .link{ display: none;}
  .flex-box { display: block;}
  .word-box {
    position: relative;
    bottom: 0;
    left: 0%;
    transform: none;
    min-width: 60%;
    max-height: 75%;
    overflow: hidden;
  }
  .right-note p{margin:10px 0; font-size: 0.9rem;}
  .c-grid{
    height:400px;
  }
  .c-grid:hover .c-cont{ top: 35%; opacity: 1; font-size: 0.9rem; transition:all 0.8s ease-in-out;}
  .c-grid:hover .c-img{position:absolute; top: 20%; left: 10%; transform: none; transition:all 0.7s ease-in-out; z-index: 5;}
  .c-img img{max-height:40px;}
  .accordians li {
      position: relative;
      display: block;
      width: auto;
  }
}
      

@media(max-width:768px){
  .cool-nav-reviel{top: 9%;}
  .page{padding:5% 3% 2%;}
  .home-page .left-side h1 {
    font-size: 45px;
  }
  .section{
  padding:12% 0;
  }
  .left h1 {
      font-size: 4rem;
      letter-spacing: -2px;
  }
  .c-list ul li{ width:49.5%;}
  .p-list ul li{ width:49.5%;}
  .left-note img{ width:65%;}
  .pop-inner{overflow: auto; max-height:100vh;}
  .pop-banner{padding:20px; width:100%; height:30vh;}
  .pop-conts{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(0);
    padding:30px 10px;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
  }
  .prev-next{position: relative; margin-top:20px; padding:20px 7px; width:100%; }
  .c-grid{
    height:350px;
  }
  .c-grid:hover .c-cont{ top: 30%; opacity: 1; font-size: 0.9rem; transition:all 0.8s ease-in-out;}
  .c-grid:hover .c-img{position:absolute; top: 10%; left: 10%; transform: none; transition:all 0.7s ease-in-out; z-index: 5;}
  .c-img img{max-height:40px;}
  .long-grid{ height:350px;}
  .event-banner .caption{font-size:1rem;}
  .accordians ul{ padding:0; margin: 0;}

}

@media(max-width:480px){
  .cool-tainer { padding: 10px 10px 5px;}
  .home-page{ background-size: cover;}
  .home-page .left-side h1 { font-size: 36px;}
  .left-side {top: 60%; transform: translateY(-60%);}
  .qn-mark .qn-inner {
     right: 0%;
     top: 10%;
     width: 100%;
   }
  .video-btn {right: 82%;}
  .other-page {
    min-height: 40vh !important;}
  .left-side .caption {
    margin: 15px 0 35px 0;
  }
  .left-side .heading{
    font-size: 2.5rem;
    line-height: 1.1;
  }
  .cool-logo a .logo-light, .cool-logo a .logo-dark {
    max-height: 40px;
  }
  .left{padding-top:10%;}
  .left h1 {
      font-size: 3rem;
  }
  .c-list ul li{
    width:99.5%;
  }
  .c-list ul li .scalebox {
    position: relative;
  }
  .c-list ul li .scalebox:hover{
    transform:scale(1);
  }
  .p-list ul li{
    width:49.1%;
    margin-bottom:3px;
  }
  .flat-title h1 {font-size:1.6rem;}
  .left-note img{ width:60%;}
  .right-note{padding:15px 5px 30px;}
  .right-note p{font-size: 0.8rem;}
  .contact-cont{padding-top:25%;}
  .spans span {
    width: 150px;
    height: 150px;
    line-height: 150px;
  }
  .spans span:nth-child(2){ left:0px;}
  .spans span:nth-child(3){ left:0; top:0px;}
  .spans span:nth-child(4){ left:0px; top:0px;}
  .c-grid{
    height:250px;
  }
  .long-grid{ height:250px;}
  .gallery_product img{ max-height:35px;}
  .filter-button { margin-bottom: 5px;}
  .btn-fill { letter-spacing: 0;}
  .accordians li, .accordians ul li:last-child {
      position: relative;
      display: block;
      width: 100%;
  }
  .feature-wrap .feature-box, .feature-box {display: block;}
  .feature-box .ft-inner{width:100%;}
  .feature-box .btn-wrap { width: 80%;}
  .subscribed button { padding: 11px 10px;}
  .diamond{display:none;}
  .ruler span {font-size: 0.6rem;}
  .event-banner .caption{font-size:1rem;}
  .event-banner h3{font-size: 1.1rem;}
  .flat-bar{margin-top:15%; min-height:100px !important; background-position: center right;}
  .sub-cta-logo img{max-height:25px;}
}

.noisy{
  background-image: url(data:image/png;base64,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);  
}