@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
:root{
  --color1:#000000;
  --color2:#d7d8d2;
  --color3:#1e2226;
  --color4:#454d51;
}
body {
  background-image: url(../img/bg/bg-img1.png);
  background-size: 241px 112px;
  font-family: "Marcellus", serif;
}

/* ==================================================================
       parallax images
================================================================== */
.fixed-shirt {
  position: absolute;
  top: 100vh;
  left: 2%;
  transform: translate(-50%, 0); /* small vertical shift only */
  transition: transform 0.3s ease-out;
  z-index: 11;
  height: 265px;
  will-change: transform;
  pointer-events: none;
  @media (max-width:768px) {
    height: 190px;
  }
}
.fixed-shirt2 {
  position: absolute;
  top: 272vh;
  right: 0;
  transform: translate(50%, 0); /* small vertical shift only */
  transition: transform 0.3s ease-out;
  z-index: 1;
  height: 130px;
  will-change: transform;
  pointer-events: none;
}



/* ==================================================================
       parallax images END
================================================================== */
/* ==================================================================
       navbar
================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  transition: 0.5s;
  .container{
  padding-top: 40px;
  transition: 0.5s;
  }
  .brand-logo {
    height: 50px;
    transition: 0.5s;
  }

  .nav-link {
    color: white;
  }
}
.navbar::before{
  content: '';
  left: 0;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  transform: translateY(-100%);
  z-index: -1;
  background: white;
  transition: 0.5s;
}
.navbar.scrolled::before{
  transform: translateY(0);
}
.navbar.scrolled {
  .container{
  padding-top:0px;
  .brand-logo{
    /* filter: none; */
    filter: invert(100%) sepia(13%) saturate(7484%) hue-rotate(292deg) brightness(105%) contrast(108%);
  }
  .nav-link{
    color: black;
    font-weight: bold;
  }
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    /* flex-direction: row; */
    justify-content: flex-end;
  }
}

/* ==================================================================
       navbar end
================================================================== */
/*==================================================================
                      section-1/about 
==================================================================*/
.scn-1{
  z-index: 5;
  position: relative;
  width: 100%;
  /* overflow: hidden; */
  padding-bottom: 50px;
  .container{
  /* background: #e5faf7; */
  padding: 20px 0;
  position: relative;
  height: 100%;
  /* border-radius: 15px 15px 0 0; */
  }
  
  /* .container::before{
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    height: calc(100% + 60px);
    width: 100%;
    transform: translateY(-10%);
    transform: translateY(-30px);
    background: linear-gradient(270deg, rgb(229, 250, 247), rgb(65, 146, 211));
    border-radius: 45px;
    background: white;
    box-shadow: 0px 0px 8px 1px #4542426e;
  } */
  .title-div{
    width: 90%;
    margin: auto;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    .title{
      font-weight: bold;
      font-family: system-ui;
      width: fit-content;
      padding: 0;
      margin: 0;
      background: #ffffff;
      z-index: 1;
      padding: 0 10px;
      font-size: 40px;
    }
    .caption{
      color: wheat;
    }
  }
  /* .title-div::before{
    content: '';
    position: absolute;
    left: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(45deg, #2a998b, #768693);
    z-index: 0;
  } */
  .cnt{
    /* margin-bottom: 0; */
    /* background: white; */
    background-clip: text;
    z-index: 2;
    position: relative;
    font-size: 18px;
  }
}
@media screen and (min-width:765px) {
  .scn-1{
    padding-bottom: 20vh;
    .container{
      padding: 30px 0;
    }
    .title-div{
      width: 50%;
    }
    .cnt{
      width: 50%;
      margin: auto;
    }
  }
}
@media screen and (max-width:765px) {
  .scn-1{
    .container{
      padding: 20px;
    }
  }
}
.scroll-reveal span{
  color: hsl(0deg 2.47% 49.95% / 17%);
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-image: linear-gradient(90deg,#ffffff,#e9e9eb);
  animation: scroll-reveal linear forwards;
  animation-timeline: view(y);  
}
.scroll-reveal h2 span{
  animation-range-start: cover 20vh;
  animation-range-end: cover 30vh;
}
.scroll-reveal p span{
  animation-range-start: cover 22.5vh;
  animation-range-end: cover 50vh;
}
@keyframes scroll-reveal {
  to{
    background-size: 100% 100%;
  }
}
/*==================================================================
                      section-1/about END
==================================================================*/

.parallax-scroll-container1::-webkit-scrollbar {
  display: none;
}

[data-parallax=container] ::-webkit-scrollbar {
  /* right side scroll bar */
  display: none;
}

[data-parallax=container] {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 300px;
  perspective-origin: center;
}

[data-parallax=group] {
  height: 500px;
  position: relative;
  transform-style: preserve-3d;
}

[data-parallax=layer] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: center;
}

[data-parallax=none] {
  position: relative;
  transform: translateZ(0);
  z-index: 10;
}

[data-parallax-speed=front] {
  transform: translateZ(90px) scale(0.7);
  z-index: 1;
}

[data-parallax-speed=base] {
  transform: translateZ(0);
  z-index: 4;
}

[data-parallax-speed=slow] {
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}

[data-parallax-speed=slower] {
  transform: translateZ(-600px) scale(3);
  z-index: 2;
}

[data-parallax-speed=slowest] {
  transform: translateZ(-900px) scale(4);
  z-index: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



h2,
p {
  max-width: 40rem;
}

[data-image=captain-america],
[data-image=scarlet-witch],
[data-image=black-widow],
[data-image=vision],
[data-image=iron-man] {
  width: 20vw;
  background-size: cover;
  background-position: top center;
}
.parallax-scroll-container1 .img-card2{
  width: 21vw
}
[data-image=captain-america] {
  left: -120vw;
  background-image: url(../img/banner-img/img1.jpg);
  background-position: 30% 0%;
}

[data-image=scarlet-witch] {
  left: -20vw;
  background-image: url(../img/banner-img/img3.jpg);
}

[data-image=black-widow] {
  left: 40vw;
  background-image: url(../img/banner-img/img6.jpg);
}

[data-image=vision] {
  left: 100vw;
  background-image: url(../img/banner-img/img4.jpg);
}

[data-image=iron-man] {
  left: 200vw;
  background-image: url(../img/banner-img/img5.jpg);
  background-position: 80% 0%;
}

[data-image=captain-america-2],
[data-image=winter-soldier],
[data-image=scarlet-witch-2],
[data-image=okoye],
[data-image=mantis],
[data-image=nebula] {
  width: 32vw;
  height: 48vw;
  margin-top: 120vw;
  left: auto;
  background-size: cover;
  background-position: center top;
}

[data-image=captain-america-2] {
  right: 40vw;
  background-image: url(../img/stitch.jpg);
}


.preamble,
.parallax,
.plot--content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10vmin;
}

@media (min-width: 60rem) {

  .preamble,
  .parallax,
  .plot--content{
    padding-top: 20vmin;
    padding-bottom: 20vmin;
  }
}

.hide-200.opacity-hide{
  opacity: 0;
}
header[data-parallax=group] {
  height: 100vh;
  background: #1e1e1e8c;
}
header .title {
  width: 80vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 2rem 0;
  font-size: 0;
  top: 46vh;
  left: 10vw;
  z-index: 10;
  transform-style: preserve-3d;
  text-align: center;
}

header .title h1,
header .title h1 span {
  color: rgb(255, 255, 255);
  line-height: 0.85;
  text-transform: uppercase;
}

header .title h1 {
  font-size: 10rem;
  letter-spacing: -0.05em;
}
@media (max-width:768px) {
  header .title h1 span {
    font-size: 2rem !important;
    line-height: 1;
  }
}
header .title h1 span {
  display: block;
  font-size: 3vw;
  letter-spacing: 0.24em;
  text-shadow: 0px 3px 5px #0000009e;
}

header .title p {
  max-width: 100%;
  margin-top: 1ex;
  color: purple;
}

/* .title::after {
    content: "";
    position: absolute;
    top: 5vh;
    right: 0;
    bottom: -5vh;
    left: 0;
    z-index: 1;
    transform: translateZ(-150px) scale(1.25);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 2rem black;
  } */

.preamble {
  background-color: white;
  box-shadow: 0 0 10vh rgba(0, 0, 0, 0.8);
  background-image: url(../img/bg/bg-img1.png);
  background-size: 241px 112px;
  min-height: 80vh;
}

.parallax {
  color: white;
  overflow: hidden;
  background-color: black;
}

.parallax p {
  text-shadow: 0 0 2px black;
}

.stars,
.deep-stars {
  top: -10vh;
  bottom: -10vh;
  z-index: -1;
  background-image: url(https://aepicos.com/codepen/images/blue-star-sky.png);
}

.stars {
  background-size: 200%;
  background-position: center left;
  opacity: 0.8;
}

.deep-stars {
  background-size: cover;
  background-position: center;
  opacity: 0.5;
}

.plot {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding-bottom: 120vw;
  overflow: hidden;
  background-color: white;
}

.plot h2 {
  width: 100%;
  margin-bottom: 1ex;
  color: purple;
}

.plot--content {
  z-index: -10;
}



.todo {
  padding: 1rem 10vmin;
  color: white;
  background-color: crimson;
  line-height: 1.3;
}
@media (max-width:768px) {
  .parallax-scroll-container1{
    .img-card1,.img-card5{
      display: none;
    }
    .img-card2{
      left: -76vw;
      width: 39vw;
    }
    .img-card3{
      left: 36vw;
      width: 39vw;
    }
    .img-card4{
      left: 154vw;
      width: 39vw;
    }
  }
}

/* ==================================================================
       details section
================================================================== */
.details-scn {
  background-image: url(../img/bg/bg-img1.png);
  background-size: 241px 112px;
  min-height: 100vh;
  .container.one {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .icon-img {
    height: 20px;
    transform: rotate(270deg);
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(99deg) brightness(102%) contrast(102%);
    margin: auto;
  }

  .scn-sub-title {
    color: white;
    text-align: center;
    width: 100%;
  }

  .scn-title {
    color: white;
    width: 100%;
    font-size: 55px;
    @media (max-width:768px) {
      font-size: 40px;
    }
  }
  .container.two{
    
  }
}
ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 1rem;
  list-style-type: none;
}

ul::after {
  border-radius: 1rem;
  content: "";
  position: absolute;
  background: hsl(0 0% 10%);
  pointer-events: none;
  z-index: -2;
  inset:
    calc(var(--top) * 1px)
    calc(100% - (var(--right) * 1px))
    calc(100% - (var(--bottom) * 1px))
    calc(var(--left) * 1px);
  transition: inset 0.2s;
}

ul[data-enhanced]:hover {
  --active: 1;
}
ul[data-enhanced]::after {
  opacity: var(--active, 0);
  transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul[data-enhanced]:hover::after {
  transition: opacity 0.2s 0.2s, inset 0.2s;
}

ul:not([data-enhanced]) article::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: hsl(0 0% 10%);
  border-radius: 1rem;
  opacity: var(--li-active, 0);
  transition: opacity 0.2s;
}

article {
  color: hsl(0 0% 80%);
  padding: 1rem;
  display: grid;
  gap: 0.5rem;
  position: relative;
}

article::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--bg) 0 2px, transparent 2px 38px) -20px -20px / 40px 40px,
    linear-gradient(90deg, var(--bg) 0 2px, transparent 2px 38px) -20px -20px / 40px 40px;
  -webkit-mask: linear-gradient(-35deg, var(--bg) 0%, transparent 45%);
          mask: linear-gradient(-35deg, var(--bg) 0%, transparent 45%);
  z-index: -1;
  opacity: var(--li-active, 0);
  transition: opacity 0.2s;
}

li:hover {
  --li-active: 1;
}

article h3 {
  margin: 0;
  font-weight: 120;
}

article p {
  margin: 0;
  text-wrap: pretty;
  background: linear-gradient(hsl(0 0% 80%), hsl(0 0% 50%));
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  font-weight: 80;
}

article svg {
  width: 44px;
}

article svg path {
  stroke-width: 0.75;
  stroke: hsl(var(--hue, 30) calc(var(--li-active, 0) * 60%) 60%);
  transition: stroke 0.2s;
}

li:nth-of-type(1) { --hue: 30; }
li:nth-of-type(2) { --hue: 280; }
li:nth-of-type(3) { --hue: 210; }
li:nth-of-type(4) { --hue: 120; }
@supports(anchor-name: --anchor) {
  li:nth-of-type(1) article { anchor-name: --develop; }
  li:nth-of-type(2) article { anchor-name: --preview; }
  li:nth-of-type(3) article { anchor-name: --ship; }
  li:nth-of-type(4) article { anchor-name: --profit; }

  :root { --anchor: --develop; }
  :root:has(li:nth-of-type(1):hover) { --anchor: --develop; }
  :root:has(li:nth-of-type(2):hover) { --anchor: --preview; }
  :root:has(li:nth-of-type(3):hover) { --anchor: --ship; }
  :root:has(li:nth-of-type(4):hover) { --anchor: --profit; }  

  ul::after {
    inset:
      anchor(var(--anchor) top)
      anchor(var(--anchor) right)
      anchor(var(--anchor) bottom)
      anchor(var(--anchor) left);
  }

  ul:has(li:hover) {
    --active: 1;
  }
  ul::after {
    opacity: var(--active, 0);
    transition: opacity 0.2s, inset 0.2s 0.2s;
  }
  ul:hover::after {
    transition: opacity 0.2s 0.2s, inset 0.2s;
  }
  
  article::after {
    content: unset;
    display: none;
  }
}
/* ==================================================================
       details section END
================================================================== */


/* ==================================================================
       socialmedia popup 
================================================================== */
.call-btn img,.whats-btn img{
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(15deg) brightness(107%) contrast(101%);
  height: 1.5rem;
  width: 1.5rem;
  }
  .call-btn:hover{
  width: fit-content;
  }
  .call-btn:hover .title,.whats-btn:hover .title,.insta-btn:hover .title{
  width: 100px;
  color: white;
  }
  .call-btn .img-div,.whats-btn .img-div,.insta-btn .img-div{
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .call-btn .title,.whats-btn .title,.insta-btn .title{
  /* transform: translateX(100%); */
  /* visibility: hidden; */
  /* display: none; */
  width: 0px;
  overflow: hidden;
  transition: 0.5s;
  white-space: nowrap;
  
  }
  .call-btn,.whats-btn,.insta-btn{
  position: fixed;
  /* left: 2rem; */
  bottom: 2rem;
  height: 3rem;
  /* width: 3rem; */
  z-index: 999;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  right: 0;
  text-decoration: none;
  }
  .call-btn{
  background: #1d87d9;
  /* left: 2rem; */
  transform: translate(100%,0);
  transition: 0.5s;
  }
  .whats-btn{
  background:rgb(0, 151, 96);
  /* transform: translateY(-50px); */
  transform: translate(100%,0);
  transition: 0.5s;
  /* right: 2rem; */
  }
  .insta-btn{
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  /* transform: translateY(-100px); */
  transform: translate(100%,0);
  transition: 0.5s;
  /* width: 100px; */
  }
  .insta-btn img{
  height: 22px;
  filter: invert(100%) sepia(0%) saturate(1503%) hue-rotate(327deg) brightness(105%) contrast(94%);
  }
  /* animations */
  .insta-btn.scrolled{
    animation: insta-anime 3s forwards;
    transition: 0.5s;
  }
  .whats-btn.scrolled{
    animation: whats-anime 3s forwards;
    animation-delay: 1s;
    transition: 0.5s;
  }
  .call-btn.scrolled{
    animation: call-anime 3s forwards;
    animation-delay: 2s;
    transition: 0.5s;
  }
  @keyframes insta-anime {
    20%{
      transform: translate(0,0);
    }
    50%{
      transform: translate(0,-50px);
    }
    100%{
      transform: translate(0,-100px);
    }
  }
  @keyframes whats-anime {
    25%{
      transform: translate(0,0);
    }
    40%{
      transform: translate(0,-50px);
    }
    100%{
      transform: translate(0,-50px);
    }
  }
  @keyframes call-anime {
    20%{
      transform: translate(0,0);
    }
    100%{
      transform: translate(0,0);
    }
  }
  
/* ==================================================================
       socialmedia popup END
================================================================== */


/* ==================================================================
       timeline section END
================================================================== */
.timeline{
  position: relative;
  /* max-width: 1200px; */
  /* margin: 100px auto; */
  background-image: url(../img/bg/bg-img1.png);
  background-size: 241px 112px;
}
.timeline .timeline-container{
  padding: 10px 50px;
  position: relative;
  width: 50%;
  /* background-color: rgba(0,  0, 0, 0.3); */
  opacity: 0;
  z-index: 9;
}
.timeline .timeline-container.visible{
  animation: movedown 0.5s linear forwards ;
  opacity: 0;
}
@keyframes movedown {
  0%{
      opacity: 0;
      transform: translateY(-30px);
  }
  100%{
      opacity: 1;
      transform: translateY(0px);
  }
}
.timeline .timeline-container:nth-child(1){
  animation-delay: 0s;
}
.timeline .timeline-container:nth-child(2){
  animation-delay: 0.5s;
}
.timeline .timeline-container:nth-child(3){
  animation-delay: 1s;
}
.timeline .timeline-container:nth-child(4){
  animation-delay: 1s;
}
.timeline .timeline-container:nth-child(5){
  animation-delay: 1s;
}
.timeline .timeline-container:nth-child(6){
  animation-delay: 1s;
}
.timeline .text-box{
  padding: 20px 30px;
  background: white;
  position: relative;
  border-radius: 6px;
  font-size: 15px;
}
.timeline .left-container{
  left: 0;
}
.timeline .right-container{
  left: 50%;
}
.timeline .timeline-container img{
  position: absolute;
  width: 40px;
  border-radius: 50%;
  right: -20px;
  top: 32px;
  z-index: 10;
  padding: 5px;
  background-color: white;
}
.timeline .right-container img{
  left: -20px;
}

.timeline::after{
  content: '';
  position: absolute;
  width: 6px;
  height: 100%;
  background: white;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  /* margin-left: 3px; */
  z-index: 0;
}
.timeline.visible::after{
  animation: moveline 6s linear forwards;
}
@keyframes moveline {
  0%{
      height: 0%;
  }
  100%{
      height: 100%;
  }
}
.timeline .text-box h2{
  font-weight: 600;
}
.timeline .text-box small{
  display: inline-block;
  margin-bottom: 15px;
}
.timeline .left-container-arrow{
  height: 0;
  width: 0;
  position: absolute;
  top: 28px;
  z-index: 1;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #fff;
  right: -15px;
}
.timeline .right-container-arrow{
  height: 0;
  width: 0;
  position: absolute;
  top: 28px;
  z-index: 1;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fff;
  left: -15px;
}
@media (max-width:768px) {
  
  .timeline::after{
      left: 28px;
      right: auto;
  }
  .timeline .timeline-container{
          width: 100%;
          padding-left: 80px;
          padding-right: 25px;
  }
  .timeline .text-box{
      font-size: 13px;
  }
  .timeline .text-box small{
      margin-bottom: 10px;
  }
  .timeline .right-container{
      left: 0;
  }
  .timeline .left-container img,.timeline .right-container img{
      left: 10px;
  }
  .timeline .left-container-arrow,.timeline .right-container-arrow{
      border-right: 15px solid #fff;
      border-left: 0;
      left: 15px;
      left: 0;
transform: translateX(-100%);
  }
  
}
/* ==================================================================
       timeline section
==================================================================*/




/* ==================================================================
       pricing section
==================================================================*/
@import "normalize.css";

.price-scn *,
.price-scn *:after,
.price-scn *:before {
	box-sizing: border-box;
}



.price-scn{
  background-image: url(../img/bg/bg-img1.png);
  background-size: 241px 112px;
}
.price-scn:is(h1, h2) {
	margin: 0;
}

.price-scn .bleed-canvas {
	width: 100vw;
	height: 100%;
	position: absolute;
}

.price-scn .chopsticks {
	height: 20%;
	position: absolute;
	right: 0;
	top: 10%;
}

.price-scn .veribear {
	width: 10vmin;
	position: absolute;
	bottom: 5%;
	right: 5%;
	rotate: -20deg;
}

.price-scn .bento {
	position: absolute;
	bottom: 0%;
	left: 10%;
	rotate: 90deg;
	height: 40vmin;
}

@media (max-width: 768px) {
	.price-scn .bento {
		height: 60vmin;
	}
}

.price-scn h1 {
	font-size: clamp(2rem, 6vw + 1rem, 8rem);
	font-weight: 600;
	/* background: linear-gradient(90deg, oklch(36% 0.50 340), oklch(90% 0.5 200)); */
	color: white;
	/* -webkit-background-clip: text; */
  text-align: center;
  @media (max-width:768px) {
    transform: translateY(90px);
  }
}

.price-scn section:nth-of-type(1) {
	height: 100vh;
	display: grid;
	place-items: center;
	background: transparent;
}

.price-scn main {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.price-scn .sticky {
	width: 50%;
	aspect-ratio: 1;
	position: sticky;
	bottom: 0;
}

.price-scn .card-cnt {
  font-size: 12px !important;
}
.price-scn .sticky img {
	width: 77%;
    position: absolute;
    bottom: 0;
    left: 37px;
	translate: -5% 0;
  @media (max-width:768px) {
      width: 50%;
    }
}
@media (max-width:768px){
  .price-scn .sticky img{
    transform: translate(50%,-255px);
  }
}
.price-scn section {
	container-type: inline-size;
}

.price-scn section:nth-of-type(2) p {
	/* font-weight: 600;
	font-size: clamp(1.5rem, 3vw + 1rem, 4rem);
	text-align: center;
	max-width: 80%;
	margin: 25vh auto;
	background: linear-gradient(
      to right in oklab, 
      oklch(63% 0.50 337) 0%, oklch(36% 0.50 340) 37% 37%, oklch(90% 0.5 200) 97% 97%
    );
	color: transparent;
	-webkit-background-clip: text;
	overflow: visible; */
}

.price-scn .box {
	container-type: inline-size;
}

.price-scn .box .logo {
	width: clamp(1rem, 4vw + 1rem, 4rem);
	aspect-ratio: 1;
	background: linear-gradient(90deg, rgb(255, 255, 255), lightblue);
	justify-self: start;
	position: absolute;
	bottom: 100%;
	translate: 0 -25%;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z" clip-rule="evenodd" /></svg>') center/contain no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z" clip-rule="evenodd" /></svg>') center/contain no-repeat;

}

.price-scn .box svg path {
	fill: blue;
}

.price-scn p {
	position: relative;
}


.price-scn section:nth-of-type(3) h2 {
	font-size: clamp(2rem, 8vw + 1rem, 12rem);
	font-weight: 600;
	background: linear-gradient(90deg, purple, lightblue);
	color: transparent;
	-webkit-background-clip: text;
/*	translate: 0 20%;*/
}

.price-scn section:nth-of-type(4) {
	display: grid;
	padding-top: 2rem;
	gap: 4rem;
}

.price-scn section:nth-of-type(4) .box:first-of-type {
	margin-bottom: 8rem;
}

/* Box styling */

.price-scn .box {
	width: 100%;
	background: hsl(0 0% 100%);
	border-radius: 2rem;
	display: flex;
	/* grid-template-columns: 0.6fr 0.4fr; */
	gap: 1rem;
	justify-content: end;
	padding: 1rem;
  h4{
    font-weight: bold;
  }
  p{
    color: grey !important;
  }
  .price{
    color: rgb(16, 165, 16);
    font-weight: bold;
  }
}

.price-scn .box__content {
	display: grid;
	/* place-items: center; */
	grid-column: 2;
	min-height: 40cqi;
	/* padding: 2rem 0rem; */
	align-content: center;
	jutify-items: start;
  width: 59%;
}

.price-scn .box p {
	font-weight: 600;
	color: hsl(0 0% 50%);
	font-size: clamp(0.875rem, 0.5vw + 1rem, 2rem);
}

.price-scn .other-cards-scn.beforee{
  position: relative;
  z-index: 9;
}
.price-scn .other-cards-scn{
  display: flex !important;
padding-bottom: 10px !important;
}
.price-scn .other-cards-scn.beforee.d-none{
  display: none !important;
}
.price-scn .other-cards-scn.l{
  overflow: hidden;
  .box{
    justify-content: start;
    overflow: hidden;
  }
  img{
    position: absolute;
    right: 0px;
    height: 300px;
    bottom: -20px;
  }
}
.price-scn .box.box--two.other-cards{
  position: relative;
  width: 100%;
}
.price-scn .box--two {
	position: absolute;
	bottom: 0;
	z-index: -1;
}


.price-scn .box--two p {
	font-size: clamp(1rem, 2vw + 1rem, 2.75rem);
	color: black;
	font-weight: 500;
}

.price-scn .box--two p span {
	background: linear-gradient(90deg, purple, lightblue);
	color: transparent;
	-webkit-background-clip: text;
}
@media(max-width: 768px) {
	.price-scn .box--two {
		padding: 2rem 1rem;
    z-index: 99;
    width: 97%;
    margin: auto;
    left: 0;
    right: 0;
    .box__content{
      width: 100%;
    }
    img{
      display: none;
    }
	}
	.price-scn .box--two p {
		font-size: clamp(0.875rem, 0.5vw + 1rem, 2rem);
	}
}
@media(min-width: 768px) {
	.price-scn .box {
		padding: 1rem;
	}
}

.price-scn section:nth-of-type(4) {
	z-index: 2;
	position: relative;
}

.price-scn section:nth-of-type(5) {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr 1fr;
	padding: 4rem 0 20vh 0;
	transform-style: preserve-3d;
}

.price-scn section:nth-of-type(5)::before {
	/* content: ""; */
	z-index: -1;
	background: red;
	position: absolute;
	bottom: 0;
	height: calc(100% + 60cqi);
	width: 100vw;
	left: 50%;
	translate: -50% 0;
	border-radius: 0 0 10vmin 10vmin;
	background: linear-gradient(#454d51, #959692);
	-webkit-mask: linear-gradient(transparent, white 25%);
	        mask: linear-gradient(transparent, white 25%);
}

.price-scn main {
	container-type: inline-size;
}

@container (max-width: 420px) {
	.price-scn section:nth-of-type(5) {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
	}
	.price-scn section:nth-of-type(5)::before {
		height: calc(100% + 120cqi);
	}
}

.price-scn section:nth-of-type(6) {
	min-height: 80vh;
	display: grid;
	place-items: center;
}

.price-scn section:nth-of-type(6) h2 {
	font-size: clamp(2rem, 3vw + 1rem, 8rem);
}

.price-scn section:nth-of-type(6) svg {
	width: 30%;
	position: absolute;
	stroke: hsl(0 0% 0%);
	right: 10%;
	bottom: 10%;
	rotate: 10deg;
}

.price-scn .bento--mini {
	aspect-ratio: 1;
	background: hsl(0 0% 100%);
	border-radius: 2rem;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	place-items: center;
	position: relative;
}

.price-scn :is(.bird, .bear) {
	width: 100%;
	rotate: -12deg;
	transition: scale 0.2s;
	position: absolute;
	top: 50%;
	left: 0%;
	translate: -50% -50%;
}

.price-scn .bird {
	fill: #1D9BF0;
	translate: -40% -25%;
}

.price-scn .bear {
	rotate: -26deg;
}

.price-scn .bento--mini a {
	text-decoration: none;
	font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
	font-weight: 600;
	color: hsl(0 0% 5%);
	position: relative;
}

.price-scn .bento--mini:is(:hover, :focus-within) svg {
	scale: 1.4;
}

.price-scn .bento--mini a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.price-scn .bento--mini a .logo {
	width: clamp(1rem, 4vw + 1rem, 2rem);
	aspect-ratio: 1;
	background: linear-gradient(90deg, purple, lightblue);
	justify-self: start;
	position: absolute;
	bottom: 100%;
	translate: 0 -25%;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" /></svg>') center/contain no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" /></svg>') center/contain no-repeat;
}

.price-scn .bento--mini:first-of-type a .logo {
	-webkit-mask: url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>') center/contain no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>') center/contain no-repeat;

}


/* That nav stuff */
.price-scn nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 1px solid hsl(0 0% 50%);
	height: 52px;
	background: hsl(0 0% 100% / 0.75);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	z-index: 2;
}


.price-scn .nav__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 800px;
	max-width: 100%;
	padding: 0 1rem;
	margin: 0 auto;
	height: 100%;
}

.price-scn nav a {
	text-decoration: none;
	background: hsl(210 100% 45%);
	color: hsl(0 0% 98%);
	font-weight: 400;
	padding: 0.5rem 1rem;
	border-radius: 100px;
	font-size: 0.875rem;
}

.price-scn nav img {
	height: 50%;
	justify-self: start;
}

.price-scn section:nth-of-type(4) .box:nth-of-type(2) {
	background: transparent;
}

@supports (animation-timeline: scroll()) {
	.price-scn section {
		view-timeline-name: --section;
	}
	:is(.chopsticks, .bento) {
		-webkit-animation: slide both linear;
		        animation: slide both linear;
		animation-timeline: --section;
		animation-range: exit 0 exit 25%;
	}
	.price-scn .chopsticks {
		--x: 50%;
		--y: 100%;
		--opacity: 0;
	}
	.price-scn .bento {
		--x: -100%;
		--y: 100%;
		--opacity: 0;
    transform: rotate(270deg);
	}
	@-webkit-keyframes slide {
		to {
			translate: var(--x, 0) var(--y, 0);
			opacity: var(--opacity, 1);
			scale: var(--scale, 1);
		}
	}
	@keyframes slide {
		to {
			translate: var(--x, 0) var(--y, 0);
			opacity: var(--opacity, 1);
			scale: var(--scale, 1);
		}
	}

	.price-scn section:nth-of-type(4) .box:nth-of-type(2) p {
		-webkit-animation: slide both linear;
		        animation: slide both linear;
		animation-range: cover 15% cover 75%;
		animation-timeline: view();
		--opacity: 0;
		--y: -10%;
	}

	.price-scn section:nth-of-type(5)::before {
		translate: -50% 10%;
		opacity: 0;
		-webkit-animation: slide both linear;
		        animation: slide both linear;
		animation-range: entry 0 entry 25%;
		animation-timeline: --section;
		--opacity: 1;
		--y: 0;
		--x: -50%;
	}

	@-webkit-keyframes slip {
		to {
			scale: 1;
			translate: -5% 0;
		}
	}

	@keyframes slip {
		to {
			scale: 1;
			translate: -5% 0;
		}
	}

	.price-scn .sticky img {
		scale: 1.5;
		translate: 30% 0;
		-webkit-animation: slip both linear, slide both linear;
		        animation: slip both linear, slide both linear;
		animation-range: entry 50% entry 70%, exit 0% exit 15%;
		animation-timeline: --section;
		--y: 30%;
		--x: -5%;
	}

	.price-scn section:nth-of-type(4) {
		padding-top: 8rem;
	}

	.price-scn .sticky {
		-webkit-clip-path: inset(-100% -100% 0 -100%);
		        clip-path: inset(-100% -100% 0 -100%);
	}

	.price-scn .spacing-box {
		height: 35vh;
	}
  
  .price-scn .veribear {
    -webkit-animation: roll both linear;
            animation: roll both linear;
    animation-timeline: --section;
    animation-range: exit;
  }
  
  @-webkit-keyframes roll {
    to {
      rotate: 720deg;
      translate: 500% 0;
    }
  }
  
  @keyframes roll {
    to {
      rotate: 720deg;
      translate: 500% 0;
    }
  }
}
/* ==================================================================
       pricing section END
==================================================================*/


/* ==================================================================
       Qualities section 
==================================================================*/

.qualities-scn{
  background-image: url(../img/bg/bg-img1.png);
  background-size: 241px 112px;
.title {
  font-family: "Raleway";
  font-size: 55px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  width: 80%;
  margin: auto;
  @media (max-width:768px) {
      font-size: 40px;
    }
}

p {
  line-height: 1.5em;
}

h1 + p, p + p {
  margin-top: 10px;
}

.container {
  padding: 40px 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card-wrap {
  margin: 10px;
  transform: perspective(800px);
  transform-style: preserve-3d;
  cursor: pointer;
}
.card-wrap:hover .card-info {
  transform: translateY(0);
}
.card-wrap:hover .card-info p {
  opacity: 1;
}
.card-wrap:hover .card-info, .card-wrap:hover .card-info p {
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-wrap:hover .card-info:after {
  transition: 5s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  transform: translateY(0);
}
.card-wrap:hover .card-bg {
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0.8;
}
.card-wrap:hover .card {
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, white 0 0 0 1px, rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset white 0 0 0 6px;
}

.card {
  position: relative;
  flex: 0 0 240px;
  width: 290px;
  height: 320px;
  background-color: #333;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.card-bg {
  opacity: 0.5;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  pointer-events: none;
}

.card-info {
  padding: 20px;
  position: absolute;
  bottom: 0;
  color: #fff;
  transform: translateY(40%);
  transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-info p {
  opacity: 0;
  text-shadow: black 0 2px 3px;
  transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-info * {
  position: relative;
  z-index: 1;
}
.card-info:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  background-blend-mode: overlay;
  opacity: 0;
  transform: translateY(100%);
  transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.card-info h1 {
  font-family: "Playfair Display";
  font-size: 25px;
  font-weight: 700;
  text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;
}
}
/* ==================================================================
       Qualities section END
==================================================================*/


/*==================================================================
                      section-7/faq 
==================================================================*/
.faq-scn{
  padding-bottom: 10vh;
  width: 100%;
  margin: 10vh 0;
  .title{
    /* padding-bottom: 0; */
    /* margin-bottom: 0; */
    font-weight: bold;
    font-size: 3rem;
  }
  .faq-heading {
    /* font-family: Lato;    */
    font-weight: 400;
    font-size: 19px;
     -webkit-transition: text-indent 0.2s;
    /* text-indent: 20px; */
    color: #333;
    padding: 10px 0;
  }
  
  .faq-text {
    /* font-family: Open Sans;    */
    font-weight: 400;
    color: #919191;
    width:95%;
    padding-left:20px;
    margin-bottom:30px;
  }
  
  .faq {
    width: 100%;
    margin: 0 auto;
    /* background: white;*/
    border-radius: 4px;
    position: relative;
    /* border: 1px solid #E1E1E1; */
    /* display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px; */
  }

  .faq label {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 56px;
    padding-top:1px;
    margin-bottom: 10px;
    background-color: #FAFAFA;
    border-bottom: 1px solid #E1E1E1;
  }
  
  .faq input[type="checkbox"] {
    display: none;
  }
  
  .faq .faq-arrow {
    width: 10px;
    height: 10px;
    transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    transition: transform 0.8s, -webkit-transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-top: 2px solid rgba(0, 0, 0, 0.33);
    border-right: 2px solid rgba(0, 0, 0, 0.33);
    float: right;
    position: relative;
    top: -38px;
    right: 27px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  
   .faq input[type="checkbox"]:checked + label > .faq-arrow {
    transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    transition: transform 0.8s, -webkit-transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
   .faq input[type="checkbox"]:checked + label {
    display: block;
    background: rgba(255,255,255,255) !important;
    color: #4f7351;
    height: 350px;
    transition: height 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
   .faq input[type='checkbox']:not(:checked) + label {
    display: block;
    transition: height 0.8s;
    height: 60px;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  ::-webkit-scrollbar {
    display: none;
  }
}
@media screen and (max-width:765px) {
  .faq-scn{
    .faq input[type='checkbox']:not(:checked) + label {
      height: 70px;
      /* -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); */
    }
    .faq input[type="checkbox"]:checked + label {
      height: 450px;
    }
  }
}
/*==================================================================
                      section-7/faq END
==================================================================*/


/*==================================================================
                      footer 
==================================================================*/
footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  top: auto;
  z-index: -1;
        img {
  max-width: 100%;
  height: auto;
}
      section {
          padding: 60px 0;
         /* min-height: 100vh;*/
      }
ul {
          margin: 0;
          padding: 0;
          list-style: none;
      }
.contact-area {
  border-bottom: 1px solid #353C46;
}

.contact-content p {
  font-size: 15px;
  margin: 30px 0 60px;
  position: relative;
}

.contact-content p::after {
  background: #353C46;
  bottom: -30px;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
  width: 80%;
}

.contact-content h6 {
  color: #8b9199;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 10px;
}

.contact-content span {
  color: #353c47;
  margin: 0 10px;
}

.contact-social {
  margin-top: 30px;
}

.contact-social > ul {
  display: inline-flex;
}

.contact-social ul li a {
  border: 1px solid #8b9199;
  color: #8b9199;
  display: inline-block;
  height: 40px;
  margin: 0 10px;
  padding-top: 7px;
  transition: all 0.4s ease 0s;
  width: 40px;
}

.contact-social ul li a:hover {
  border: 1px solid #FAB702;
  color: #FAB702;
}

.contact-content img {
  max-width: 210px;
}

section, .footerr {
  /* background: #1A1E25; */
  color: #868c96;
}

.footerr p {
  padding: 7px 0;
  text-align: center;
}

.footerr img {
  width: 44px;
}
}
/*==================================================================
                      footer END
==================================================================*/