/* ----------------------------------

Template Name: Agrul - Organic Farm Agriculture Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Manrope
Main Color   : #6222cc

-------------------------------------

[Typography]

Body copy:    15px 'Manrope', sans-serif
Header:     36px 'Manrope', sans-serif
Input, textarea:  16px 'Manrope', sans-serif
Sidebar heading:  20px 'Manrope', sans-serif

>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
    02. Preloader
    03. Topbar
	    - Topbar Regular
        - Topbar With Menu
    04 Navbar
        - Navbar Default
        - Navbar Right Menu
        - Navbar Sticky
        - Navbar Center
    05. Banner
        - Banner Style One
        - Banner Style Two
    06. About Us
	    - About Style One
        - About Style Two
    07. Services
        - What We Do (Slider)
        - Services With Image & Icon
        - Services Single
    09. Product
		- Product Light Version
        - Product Dark Version
    10. Why Choose Us
    11. Fun Factor
    12. Testimonials
    13. Farmers
        - Farmer Grid
        - Farmer Details
    14. Projects
        - Project Slider
        - Prject Grid
        - Prject Details
    15. Order Process
    16. Clients / Brand
    17. Blog
        - Standard
        - Blog Grid
        - Left Sidebar
        - Right Sidebar
        - Single
    18. Error 404
    19. Footer
    20. PHP Contact Form
    21. Others

*/

/*
** General Styles for HTML tags
*/
/* 
body{
  overflow-x: hidden;
  touch-action: none;
  
} */
  /* width */
  ::-webkit-scrollbar {
    width: 5px;
  }

  /* Track */
  ::-webkit-scrollbar-track {

    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #93C572;

  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #93C572;
  }

  ::-moz-selection {
    color: #ebf8f1;
    background: #AA875C;
  }

  ::selection {
    color: #ebf8f1;
    background: #AA875C;
  }

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

html{
  scroll-behavior: smooth;
}  
body{
    touch-action: pan-y;
}

/* ---------- Fog ---------- */
.fogwrapper {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
    filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  }
  #foglayer_01, #foglayer_02, #foglayer_03 {
    height: 100%;
    position: absolute;
    width: 200%;
  }
  #foglayer_01 .image01, #foglayer_01 .image02,
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02 {
    float: left;
    height: 100%;
    width: 50%;
  }
  #foglayer_01 {
    -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
    -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
    animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  }
  #foglayer_02, #foglayer_03 {
    -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
    -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
    animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  }
  
  /* ---------- Moving Fog ---------- */
  /*
    'size: cover' || 'size: 100%'; results remain the same
    'attachment: scroll' can be added or removed; results remain the same
    'attachment: fixed' causing unexpected results in Chrome
    'repeat-x' || 'no-repeat'; results remain the same
  */ 
  #foglayer_01 .image01, #foglayer_01 .image02 {
    background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png") center center/cover no-repeat transparent;
  }
  #foglayer_02 .image01, #foglayer_02 .image02,
  #foglayer_03 .image01, #foglayer_03 .image02{
    background: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png") center center/cover no-repeat transparent;
  }
  
  /* ---------- Keyframe Layer 1 ---------- */
  @-webkit-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @-moz-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @-o-keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  @keyframes foglayer_01_opacity {
    0% { opacity: .1; }
    22% { opacity: .5; }
    40% { opacity: .28; }
    58% { opacity: .4; }
    80% { opacity: .16; }
    100% { opacity: .1; }
  }
  /* ---------- Keyframe Layer 2 ---------- */
  @-webkit-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @-moz-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @-o-keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  @keyframes foglayer_02_opacity {
    0% { opacity: .5; }
    25% { opacity: .2; }
    50% { opacity: .1; }
    80% { opacity: .3; }
    100% { opacity: .5; }
  }
  /* ---------- Keyframe Layer 3 ---------- */
  @-webkit-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @-moz-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @-o-keyframes foglayer_03_opacity {
    0% { opacity: .8 }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  @keyframes foglayer_03_opacity {
    0% { opacity: .8; }
    27% { opacity: .2; }
    52% { opacity: .6; }
    68% { opacity: .3; }
    100% { opacity: .8; }
  }
  /* ---------- Keyframe moveMe ---------- */
  @-webkit-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @-moz-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @-o-keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  @keyframes foglayer_moveme {
    0% { left: 0; }
    100% { left: -100%; }
  }
  
  @media only screen
    and (min-width: 280px)
    and (max-width: 767px) {
      #foglayer_01 .image01, #foglayer_01 .image02,
      #foglayer_02 .image01, #foglayer_02 .image02,
      #foglayer_03 .image01, #foglayer_03 .image02 {
        width: 100%;
      }
    }
    @font-face {
      font-family: "music";
      src: url("assets/fonts/music.ttf");
    }
    
    .music{
      font-family: "music";
    }


    
  .text-brown{
    color: #e7a76f;
  }
  

  .bg-brown{
    background-color: #e7a76f;
  }
  .new {
    padding: 50px;
    }
    
    .form-group-cust {
    display: block;
    margin-bottom: 15px;
    }
    
    .form-group-cust .check-cus {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
    }
    
    .form-group-cust .l-cus {
    position: relative;
    cursor: pointer;
    }
    
    .form-group-cust .l-cus:before {
    content:'';
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid #000000;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    }
    
    .form-group-cust .check-cus:checked + .l-cus:after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 9px;
    width: 6px;
    height: 14px;
    border: solid #047a47;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    }
  @font-face {
      font-family: "tr";
      src: url("assets/fonts/Transcend\ Light.otf");
    }


    .tr{
      font-family: "tr";
    }

    @font-face {
      font-family: rel;
      src: url(assets/img/fonts/Recoleta-Medium.woff);
    }

    .rel {
      font-family: rel;
    }
    @font-face {
      font-family: boz;
      src: url(assets/img/fonts/belleza-regular.ttf);
    }

    .boz {
      font-family: boz;
    }

    p{
        font-family: boz;
    }

    .custom-btn {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    .custom-btn:hover {
      background-color: #0056b3;
    }

.text-brown{
   color:  #87633A;
}

.side_img{
  background-color: rgb(0, 0, 0,0.3);
  background-blend-mode: multiply;
  background-image: url(assets/img/brick-001.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
    
.named{
  overflow-y: hidden;
  position: absolute;
  right: 30px;
  bottom: 20px;
  height: 55px;
  width: 55px;
  background: rgb(16, 46, 13);
  text-align: center;
  line-height: 55px;
  border-radius: 50px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.named i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: all 0.4s ease;
}

.named i.fas{
  opacity: 0;
  pointer-events: none;
}

#click:checked ~ .named i.fas{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%,-50%) rotate(180deg);
}

#click:checked ~ .named i.fab{
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) rotate(180deg);
}

.chat-con{
  position: absolute;
  right: 30px;
  bottom: 0px;
  max-width: 400px;
  background: #BFBB82 ;
  /* border-radius: 8px; */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}

#click:checked ~ .chat-con{
  opacity: 1;
  bottom: 85px;
  pointer-events: auto;
}

.chat-con .head-text{
  line-height: 60px;
 
 /* border-radius: 8px; */
  padding: 0 20px;
  font-weight: 500;
  font-size: 20px;
  background: #000000;
}

.chat-con .chat-box{
  padding: 20px;
  width: 100%;
}

.chat-box .desc-text{
  color: #515365;
  text-align: center;
  line-height: 25px;
  font-size: 17px;
  font-weight: 500;
}

.chat-box .form{
  padding: 10px 15px;
  margin: 20px 0;
  /* border-radius: 5px; */
  border: 1px solid rgb(0, 0, 0);
}

.chat-box .form .field{
  height: 50px;
  width: 100%;
  margin-top:20px;
}

.chat-box .form .field:last-child{
  margin-bottom: 15px;
}

.form .field .input,
.form .field .button{
  width: 100%;
  height: 100%;
  padding-left: 20px;
  border: 1px solid rgb(0, 0, 0);
  outline: none;
  border-radius: 5px;
  font-size: 16px;
  transition: all 0.3s ease;
  background-color: #f6d492;
}

.form .field .input:focus{
  border-color: #000000;
}

.form .field .input::placeholder{
  color: rgb(0, 0, 0);
  transition: all 0.3s ease;
}

.form .field .input:focus::placeholder{
  color: rgb(0, 0, 0);
}

.chat-box .form .field .button{
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  background: #000000;
  transition: all 0.3s ease;
}

.chat-box .form .field .button:active{
  transform: scale(0.97);
}

#click{
  display: none;
}