@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
body{
  background: #f0e6ca;
}


.floating-icons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column; /* Display icons vertically */
  gap: 10px;
}

.icon {
  width: 50px;
  height: 50px;
  background-color: transparent;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
}



.popup {
  position: fixed;
  bottom: 50px; /* Adjust vertical position */
  right: 50px; /* Increase distance from icons */
  width: 30px;
  background-color:transparent;
  border-radius: 8px;

  display: none;
  padding: 20px;
}





.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content header{
  font-size: 30px;
  font-weight: 700;
}
.content .text{
  font-size: 30px;
  font-weight: 700;
}
.content .space{
  margin: 10px 0;
}


.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
  margin: 0 0 -175px 0;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1, 0.7); /* Adjust the second value to change the height for desktop screens */
  transform-origin: top;
}

@media (max-width: 768px) {
  .video-container video {
      transform: scale(1, 1.2); /* Adjust the second value to change the height for mobile screens */
  }

  .video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
    margin: 0 0 74px 0;
  }
}

/* .loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
  .loader {
    position: fixed;
    top: 25%;
    left: 40%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
  }
} */





/* BRANDS START---------------------------------------------------------------------------- */

.lia {
    width: 100%;
   
 }
 .out{
   width: 100%;
    
 }
 .in{
   width: 25%;
  
   margin: auto;
 }
 
   .lia h1{
     margin: auto;
     color: #414141;
     font-family: Arial Rounded MT Bold;
     font-size: 40px;
     font-style: normal;
     font-weight: bold;
     line-height: normal;
     margin-top: 20px;
     margin-left: 28px;
   
   }
   .lia img {
     margin: auto;
     width: 250px;
     
   }
 

 
   @media (max-width: 768px) {
    .lia{
      margin: 0 0 -20px 0;
    }
 
     .lia h1{
         text-align: left;
         color: #414141;
         font-family: Arial Rounded MT Bold;
         font-size: 30px;
         font-style: normal;
         font-weight: bold;
         line-height: normal;
         margin-top: 20px;
         margin-left:-15px;
       
       
       }
       .out{
         width: 100%;
          
       }
       .in{
         width: 45%;
        margin: auto;
       
       }
       
        
     .lia img {
   
        width: 155px;
        margin: 0 0 0 -10px;
       }
   }


/* BRANDS END---------------------------------------------------------------------------- */


/* img start----------------------------------------------------------------------------- */

.dia {
  width: 100%;
 
}
.ut{
 width: 100%;
  
}
.ni{
 width: 100%;

 margin: auto;
}

 .dia h1{
   margin: auto;
   color: #414141;
   font-family: Arial Rounded MT Bold;
   font-size: 40px;
   font-style: normal;
   font-weight: bold;
   line-height: normal;
   margin-top: 20px;
   margin-left: 0px;
 
 }
 .dia img {
   margin: auto;
   
 }




 @media (max-width: 768px) {
  .dia{
    margin: 0 0 -20px 0;
  }

   .dia h1{
       text-align: left;
       color: #414141;
       font-family: Arial Rounded MT Bold;
       font-size: 30px;
       font-style: normal;
       font-weight: bold;
       line-height: normal;
       margin-top: 20px;
       margin-left:0px;
     
     
     }
     .ut{
       width: 100%;
        
     }
     .ni{
       width:95%;
      margin: auto;
     
     }
     
      
   .dia img {
 
      width: 155px;
     }
 }



/* img end------------------------------------------------------------------------------- */

/* CARDES START-------------------------------------------------------------------------- */

.service {
  background: url(./image/Services.png);
  background-size: 100% 90%;
  background-repeat: no-repeat;
  margin: -20px 0 0 0px;
}



.card-cntainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 10px;
}

.cardes::after,
.cardes::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  border: 2px solid #C4A356;
  border-radius: 15px;
}

.cardes {
  width: 90%;
  padding: 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  position: relative;
  border-radius: 15px;
  text-decoration: none;
}

.cardes:last-child {
  margin-right: 0;
}

.card-image {
  text-align: center;
}

.card-image img {
  max-width: 100%;
  height: auto;
}

.card-cntent {
  text-align: center;
  margin-top: 20px;
}

.card-cntent h2 {
  color: #C4A356;
  font-family: Babylonica;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.card-cntent p {
  color: #000;
  font-family: Audiowide;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

@media (min-width: 768px) {
  .card-cntainer {
      margin: 30px 130px;
  }

  .cardes {
      width: 40%;
      margin-right: 10px;
      display: flex;

  }



  .card-cntent {
      flex: 2;
      padding-left: 20px;
      text-align: left;
  }

  .card-image img {
      width: 100%;
      height: 246px;
      margin: 0;
  }
  .card-cntent h2{font-size: 50px;

  }
}

@media (max-width: 768px) {

  .card-cntainer {
margin: 37px 10px 0 10px;

  }
  .card-image img {
    max-width: 100%;
    height: 300px;
    width: 250px;
    margin: 0 0 0 50px;
}

.card-cntent h2 {
  color: #C4A356;
  font-family: Babylonica;
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.cardes {
  width: 90%;
 
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  position: relative;
  border-radius: 15px;
  text-decoration: none;
  padding: 20px 10px 20px 10px;
}


}

/* CARDES END---------------------------------------------------------------------------- */



/* ABOUT US START------------------------------------------------------------------------ */

.items {
  background: url(./image/About.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: -20px 0 0 0;
}

.li h1{
  text-align: center;
  color: #414141;
  font-family: Arial Rounded MT Bold;
  font-size: 40px;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
  margin-top: 228px;
  /* margin-left: 140px; */

}
.li img {

  margin: 0 0 25px 514px;
  width: 240px;
}

.li {
  margin: -186px 0 0 0;
}

@media (max-width: 768px) {

  .li h1{
      text-align: center;
      color: #414141;
      font-family: Arial Rounded MT Bold;
      font-size: 30px;
      font-style: normal;
      font-weight: bold;
      line-height: normal;
      margin-top: 200px;
      /* margin-left: 80px; */
    
    }
  .li img {
width: 180px;
      margin: 0 0 20px 95px;
    }
}


/* ABOUT US END-------------------------------------------------------------------------- */




/* OUR SERVICE START--------------------------------------------------------------------- */

.serv{

  margin: 0 0 25px 330px;
}
.serv .pa{
  color: #000;
  font-weight:bold;
  line-height: 1.7;
  font-size: 16px;
  
}

.serv span{
  color: #000;
  width: 50%;
}

@media screen and (max-width: 767px) {

  .serv{

    margin: 25px 20px 0 20px;
    text-align: justify;
  }

}


/* OUR SERVICES END---------------------------------------------------------------------- */



/* ICON START---------------------------------------------------------------------------- */

.cainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 20px; */
  margin: 25px 0 20px 0 ;
}

.cainer > div {
  flex-basis: 16.66%; /* Adjusted for six items */
}

.cainer img {
  width: 100%;
  height: auto;
}

.header {
  text-align: center;
  margin-top: 10px;
}

/* Styles for laptop screens and above */
@media screen and (min-width: 768px) {
  .cainer {
    flex-wrap: nowrap;
  }

  .cainer > div {
    flex-basis: 16.66%; /* Adjusted for six items */
    margin: 0 0 30px 0;
  }

  .header {
    font-size: 12px;
    color: black;
  }

  .cainer img {
  width: 30%;
  height: auto;
  margin: 0 0 0 65px;
}
}

/* Styles for mobile screens */
@media screen and (max-width: 767px) {
  .cainer {
    flex-wrap: wrap;
  }

  .cainer > div {
    flex-basis: 33.33%; /* Adjusted for six items */
    margin-bottom: 20px;
  }

  .header {
    font-size: 9px;
    color: black;
  }
  .cainer img {
  width: 45%;
  height: auto;
  margin: 0 0 0 30px;
}
}

/* ICON END------------------------------------------------------------------------------ */
/* REVIEW START-------------------------------------------------------------------------- */


.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;

  background: url(./image/Reviews.png);
  background-size: 100% 90%;
  background-repeat: no-repeat;
  /* margin: 0 0 0 140px ; */
}

.slide .slide-content h6 {
  text-align: left;
  margin: 9px 0 0 305px;
  color: #C4A356;
  font-size: 14px;
}
.slide .slide-content .p1 {
font-size: 45px;
margin: 0 656px 0 0;
color: #000;
}

.slide .slide-content .p3 {
font-size: 45px;
margin: 9px 0 0 633px;
color: #000;
}
.slide-content .p2 {
  margin: 0 263px 0 262px;
color: #1a1919;
font-weight: bold;
line-height: 1.5;

}

.slider {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slide {
  flex: 0 0 100%;
}

.slide-content {
  padding: 20px;
  /* border: 1px solid #ccc; */
  border-radius: 5px;
  margin: 10px;
  text-align: center;
}

.slider-container h1{
  text-align: center;
color: #414141;
font-family: Arial Rounded MT Bold;
font-size: 40px;
font-style: normal;
font-weight: bold;
line-height: normal;
margin-top: 20px;
}

.slider-container img {
margin: 0px 0 25px 455px;
/* width: 280px; */
}

@media (max-width: 768px) {

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;

  background: url(../index/image/Reviews.png);
  background-size: 100% 50%;
  background-repeat: no-repeat;
  /* margin: 0 0 0 140px ; */
}

.slide-content .p2 {
  margin: 0 0px 0 0px;
color: #1a1919;
font-weight: bold;
line-height: 1.5;
}

.slide .slide-content h6 {
text-align: left;
margin: 9px 0 0 21px;
color: #C4A356;
font-size: 14px;
}

.slide .slide-content .p3 {
font-size: 25px;
margin: 0px 0 0 250px;
color: #000;
}

.slider-container img {
margin: -28px 0 0 85px;
width: 200px;
}

.slider {
  display: flex;
  transition: transform 0.3s ease-in-out;
  margin: 34px 0 0 0;
}

.slide .slide-content .p1 {
font-size: 25px;
margin: -32px 278px 0 0;
color: #000;
}

.slider-container h1{
  text-align: center;
color: #414141;
font-family: Arial Rounded MT Bold;
font-size: 30px;
font-style: normal;
font-weight: bold;
line-height: normal;
margin-top: 50px;
}


.slide-content {
  /* padding: 20px; */
  /* border: 1px solid #ccc; */
  border-radius: 5px;
 
  text-align: center;
 
}
}



/* REVIEW END---------------------------------------------------------------------------- */

  /* <!-- CONTENT START------------------------------------------------------- --> */
 


  .image-conter {
    display: flex;
    flex-wrap: wrap; /* Allows images to wrap to the next line on smaller screens */
  }
  
  .image-conter img {
    width: 25.33%; /* Each image occupies 33.33% of the container's width */
    height: auto; /* Adjust the height accordingly */
    margin: 20px 50px 0 50px;
  }

 
  .pare p {
    color: black;
    font-weight: bold;
    text-align: justify;
    font-style: poppins;
    margin: 20px 100px 0 100px;
    line-height: 1.5;
    font-size: 15px;
}
  
  @media (max-width: 767px) {
    .image-conter img {
      width: 80%; /* Each image takes up 100% of the container's width on smaller screens */
      margin: 20px 35px 0 35px;
    }

    .pare p {
      color: black;
      font-weight: bold;
      text-align: justify;
      font-style: poppins;
      margin: 20px 35px 0 35px;
      line-height: 1.5;
      font-size: 15px;
  }
  }
  




/* CONTENT END-------------------------------------------------------------------------------------------- */




 /* B CONTENT START------------------------------------------------------------------------ */

 .card-container{
  background: url(./image/Brands.png);
  background-size: 100% 90%;
  background-repeat: no-repeat;

 }
 .card-container h1{
  text-align: center;
  color: #414141;
  font-family: Arial Rounded MT Bold;
  font-size: 40px;
  font-style: normal;
  font-weight: bold;
  line-height: normal;
  margin-top: 20PX;
 }
 .card-container .im{
  margin: 0 0 25px 463px;
 }
 .card-container .cpon{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card-container .cpon .cards{
  flex: 1;
  margin: 25px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-container .cpon .cards .imgs {
  width: 100%;
  height: 150px;
  /* object-fit: cover; */
  object-position: top;
}

.card-container .card-content {
  padding: 20px;
}

.card-container .card-content h3 {
  font-size: 18px;
  margin: 0;
}

.card-container .card-content p {
  font-size: 14px;
  margin: 10px 0 0;
}

@media (max-width: 768px) {
  .card-container .cpon {
    justify-content: flex-start;
    margin: 0 0 0 5px;
    /* display: block; */
  }
  .card-container .im{
    margin: 0 0 0 90px;
    width: 200px;
   }

   .card-container .cpon .cards .imgs {
    width: 100%;
    height: 100px;
    /* object-fit: cover; */
    object-position: top;
  }
  

  .card-container .cpon .cards {
    flex-basis: calc(50% - 50px);
    max-width: calc(50% - 50px);
  }
  .card-container .imgs{
    margin: 0 0 0 0px;
    height: 100px;
    
   }

   .card-container h1{
    text-align: center;
    color: #414141;
    font-family: Arial Rounded MT Bold;
    font-size: 30px;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
    margin-top: 20px;
   }


   .card-container{
    background: url(./image/Brands.png);
    background-size: 100% 50%;
    background-repeat: no-repeat;
  
   }
}



.ia {
  width: 100%;
 
}
.aut{
 width: 100%;
  
}
.ani{
 width: 32%;

 margin: auto;
}

 .ia h1{
   margin: auto;
   color: #414141;
   font-family: Arial Rounded MT Bold;
   font-size: 40px;
   font-style: normal;
   font-weight: bold;
   line-height: normal;
   margin-top: 20px;
   margin-left: -29px;
 
 }
 .ia img {
   margin: auto;
   
 }




 @media (max-width: 768px) {
  .ia{
    margin: 0 0 -20px 0;
  }

   .ia h1{
       text-align: left;
       color: #414141;
       font-family: Arial Rounded MT Bold;
       font-size: 25px;
       font-style: normal;
       font-weight: bold;
       line-height: normal;
       margin-top: 20px;
       margin-left:-63px;
     
     
     }
     .aut{
       width: 100%;
        
     }
     .ani{
       width: 45%;
      margin: auto;
     
     }
     
      
   .ia img {
 
      width: 155px;
      margin: 0 0 0 -28px;
     }
 }





.cd-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cd-container .cds{
  flex: 1;
  margin: 25px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.cd-container .cds img {
  width: 100%;
  height: 150px;
  /* object-fit: cover; */
  object-position: top;
}

.cd-container .card-content {
  padding: 20px;
}

.cd-container .card-content h3 {
  font-size: 18px;
  margin: 0;
}

.cd-container .card-content p {
  font-size: 14px;
  margin: 10px 0 0;
}

@media (max-width: 768px) {
  .cd-container {
    justify-content: flex-start;
    margin: 0 0 0 5px;
  }

  .cd-container .cds {
    flex-basis: calc(50% - 50px);
    max-width: calc(50% - 50px);
    /* height: fit-content */

}

.cd-container .cds img {
    height: 100px; /* Adjust the height as per your requirement */
}
}


/* B CONTENT END------------------------------------------------------------------------- */


/* FOOTER START---------------------------------------------------------------------------- */



      .foot{
        text-align: center;
       background-color: #000000;
       height: 12vh;

      }
      .foot .fot p{
        color: #fcfcfc;
        padding: 20px 0 0 0;
   
      }
      .foot .fot a{
        color: white;
      }
      @media screen and (max-width:768px){
          

.foot{
  text-align: center;
 background-color: #000000;
 height: 7vh;

}
.foot .fot p{
  color: #fcfcfc;
  padding: 16px 0 0 0;
  font-size: 10px;

}
.foot .fot a{
  color: white;
}
      }

/* FOOTER END------------------------------------------------------------------------------ */


 /* Click Start---------------------------------------------------------------------------- */


 * {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.comt {
  background-color: rgb(25, 25, 25, .4);
  width: 95%;
  height: 130px;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  border-radius: 10px;
  margin: 0 0 70px 35px;
  border: 2px solid #C4A356;
}

.comt .cent {
  text-align: center;
  margin: 0;
  padding: 20px 0;
}

.comt .cent .bold {
  font-size: 25px;
  font-style: bold;
  color: white;
  margin: 0 0 10px 0;
}

.comt .cent .small {
  font-size: 15px;
  font-style: bold;
  color: white;
  margin: 0 0 10px 0;
}

.comt .cent .colo {
  color: aqua;
}

.comt .cent .spa {
  margin-top: 10px;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #C4A356;
  border: 2px solid rgb(104, 100, 100);
}

.comt .cent .spa:hover {
  background-color: #8e8d8a;
  border-radius: 5px;
}

.comt .cent .spa:hover a {
  color: white;
}

.comt .cent .spa a {
  text-decoration: none;
  color: black;
  font-size: 15px;
}


.spa {
  background-color: #3498db;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.3s ease; /* Transition for smooth animation */
}

.spa:hover {
  transform: translateY(-5px); /* Move the button 5 pixels up on hover */
}

@media screen and (max-width: 1024px) {
  .comt {
      width: 80%;
      height: 200px;
  }

  .comt .cent .bold {
      font-size: 20px;
  }

  .comt .cent .small {
      font-size: 12px;
  }

  .comt .cent .spa {
      margin-top: 20px;
      padding: 12px 20px;
      
  }
}

@media screen and (max-width: 480px) {
  .comt {
      width: 90%;
      height: 120px;
      margin: 0 0 64px 23px;
  }

  .comt .cent .bold {
      font-size: 18px;
  }

  .comt .cent .small {
      font-size: 11px;
  }

  .comt .cent .spa {
      margin-top: 15px;
      padding: 8px 15px;
  }
}


/* Click end----------------------------------------------------------------------------- */


 /* WHTSAPP START----------------------------------------------------------------------------- */

 .whtsapp-btn-container{
  position: fixed;
  right: 30px;
  bottom: 50px;
  padding: 24px;
  animation: fade-up 1000ms forwards;
  animation-delay: 1000ms;
  opacity: 0;
}

@keyframes fade-up {
  100%{
      bottom: 164px;
      opacity: 1;
  }
  
}


.whtsapp-btn-container .whtsapp-btn{
  font-size: 50px;
  color: rgb(5, 187, 126);
  display: inline-block;
  transition: all 400ms;
}


.whtsapp-btn-container span{
  position: absolute;
  top: 0;
  left: 4px;
  font-family: "Roboto",sans-serif;
  font-weight: bold;
  color: #075e54;
  transform:rotateZ(20deg) translateX(10px);
  opacity: 0;
  transition: all 400ms;
}

.whtsapp-btn-container .whtsapp-btn:hover +span{
  transform: rotateZ(0deg) translateX(0px);
  opacity: 1;
}

.whtsapp-btn-container .whtsapp-btn:hover{
  transform: scale(1.2);
}

section.whtsapp .whtsapp-btn-container a.whtsapp-btn i.fa.fa-whatsapp {
  color: green;
}


/* WHTSAPP END------------------------------------------------------------------------------- */


@media (max-width: 768px) {


  /* WHTSAPP START------------------------------------------------------------------- */

.whtsapp-btn-container {
position: fixed;
right: 8px;
bottom: -50px;
padding: 22px;
animation: fade-up 1000ms forwards;
animation-delay: 0s;
animation-delay: 1000ms;
opacity: 0;
}


.whtsapp-btn-container i.fa.fa-whatsapp {
color: green;
}


/* WHTSAPP END-------------------------------------------------------------------- */

}

/* INSTA START--------------------------------------------------------------------------------------- */

.insta-btn-container{
  position: fixed;
  right: 30px;
  bottom: -50px;
  padding: 24px;
  animation: fade-up-insta 1000ms forwards;
  animation-delay: 1000ms;
  opacity: 0;
}

@keyframes fade-up-insta {
  100%{
      bottom: 4px;
      opacity: 1;
  }
}

.insta-btn-container .insta-btn{
  font-size: 50px;
  color: rgb(187, 5, 5);
  display: inline-block;
  transition: all 400ms;
}

.insta-btn-container span{
  position: absolute;
  top: 0;
  left: 4px;
  font-family: "Roboto",sans-serif;
  font-weight: bold;
  color: #9c143b;
  transform:rotateZ(20deg) translateX(10px);
  opacity: 0;
  transition: all 400ms;
}

.insta-btn-container .insta-btn:hover +span{
  transform: rotateZ(0deg) translateX(0px);
  opacity: 1;
}

.insta-btn-container .insta-btn:hover{
  transform: scale(1.2);
}


@media (max-width: 768px) {

  .insta-btn-container{
    position: fixed;
    right: 8px;
    bottom: -50px;
    padding: 24px;
    animation: fade-up-insta 1000ms forwards;
    animation-delay: 1000ms;
    opacity: 0;
  } 
}

/* INSTA END----------------------------------------------------------------------------------------- */


/* FACE START---------------------------------------------------------------------------------------- */

.face-btn-container{
  position: fixed;
  right: 30px;
  bottom: -50px;
  padding: 24px;
  animation: fade-up-facebook 1000ms forwards;
  animation-delay: 1000ms;
  opacity: 0;
}

@keyframes fade-up-facebook {
  100%{
      bottom: 84px;
      opacity: 1;
  }
}

.face-btn-container .face-btn{
  font-size: 50px;
  color: rgb(5, 129, 187);
  display: inline-block;
  transition: all 400ms;
}

.face-btn-container span{
  position: absolute;
  top: 0;
  left: 4px;
  font-family: "Roboto",sans-serif;
  font-weight: bold;
  color: #065993;
  transform:rotateZ(20deg) translateX(10px);
  opacity: 0;
  transition: all 400ms;
}

.face-btn-container .face-btn:hover +span{
  transform: rotateZ(0deg) translateX(0px);
  opacity: 1;
}

.face-btn-container .face-btn:hover{
  transform: scale(1.2);
}

@media (max-width: 768px) {


  .face-btn-container{
    position: fixed;
    right: 8px;
    bottom: -50px;
    padding: 24px;
    animation: fade-up-facebook 1000ms forwards;
    animation-delay: 1000ms;
    opacity: 0;
  }
  
}

/* FACE END------------------------------------------------------------------------------------------ */


/* CALL START---------------------------------------------------------------------------------------- */

.call-btn-container{
  position: fixed;
  right: 30px;
  bottom: -50px;
  padding: 24px;
  animation: fade-up-call 1000ms forwards;
  animation-delay: 1000ms;
  opacity: 0;
}

@keyframes fade-up-call {
  100%{
      bottom: 244px;
      opacity: 1;
  }
  
}


.call-btn-container .call-btn{
  font-size: 50px;
  color: rgb(5, 129, 187);
  display: inline-block;
  transition: all 400ms;
}


.call-btn-container span{
  position: absolute;
  top: 0;
  left: 4px;
  font-family: "Roboto",sans-serif;
  font-weight: bold;
  color: #065993;
  transform:rotateZ(20deg) translateX(10px);
  opacity: 0;
  transition: all 400ms;
}

.call-btn-container .call-btn:hover +span{
  transform: rotateZ(0deg) translateX(0px);
  opacity: 1;
}

.call-btn-container .call-btn:hover{
  transform: scale(1.2);
}


@media (max-width: 768px) {


  .call-btn-container{
    position: fixed;
    right: 8px;
    bottom: -50px;
    padding: 24px;
    animation: fade-up-call 1000ms forwards;
    animation-delay: 1000ms;
    opacity: 0;
  }

}




/* CALL END------------------------------------------------------------------------------------------ */