/* ----------------------------------------------------------------------------------------
* Author        : web_bean
* Template Name : KODAL - Personal Portfolio Html5 Template
* File          : KODAL main CSS file
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */

/* INDEX
----------------------------------------------------------------------------------------

01. General css

02. Navigation area css

03. Slider area css

04. Hero area css

05. Price area css

06. Action area css

07. Service area css

08. Pricing area css

09. Testimonial area css

10. Why Choose area css

11. Subscribe area css

12. Client area css

13. Contact area css

14. Footer area css

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

/* Google Font Load */
@import url("https://fonts.googleapis.com/css?family=Muli:600,800|Open+Sans:300,400,600");

/* ----------------------------------------------------------------------------------------
*                                       01. General css
* -------------------------------------------------------------------------------------- */

html,
body {
  height: 100%;
}

body {
  color: #777;
  width: 100%;
  height: 100%;
  font-size: 15px;
  line-height: 1.7;
  margin-top: 70px;
  font-family: "Open Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #333;
  font-weight: 600;
  font-family: "Muli", sans-serif;
}

h1,
h2 {
  font-weight: 800;
}

h3 {
  font-size: 22px;
  margin-bottom: 15px;
}

p {
  letter-spacing: 0px;
}

a {
  text-decoration: none;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

a:hover {
  color: #fff;
  text-decoration: none;
}

a:focus {
  outline: none;
  text-decoration: none;
}

ul,
li {
  margin: 0;
  padding: 0;
}

fieldset {
  border: 0 none;
  margin: 0 auto;
  padding: 0;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
  outline: none;
}

.btn.focus,
.btn:focus,
.btn:hover {
  color: inherit;
}

.btn,
input[type="submit"] {
  display: inline-block;
  background: transparent;
  padding: 10px 25px;
  border-radius: 5px;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  border: none;
  font-weight: 600;
  color: #fff;
  background-color: #419ad4;
}

.btn:hover,
input[type="submit"]:hover {
  color: #fff;
  background: #f76286;
}

.fixed-icon {
  position: fixed; /* Keeps the icon floating on the screen */
  bottom: 20px; /* Position from the bottom of the viewport */
  left: 20px; /* Position from the left of the viewport */
  z-index: 1000; /* Ensures it stays above other content */
}

#main-icon,
#phone-link {
  background-color: #007bff; /* Blue background color */
  border-radius: 50%; /* Makes the background perfectly circular */
  width: 60px; /* Ensures the circle is a good size */
  height: 60px; /* Equal height and width for a perfect circle */
  display: flex;
  align-items: center; /* Centers the icon vertically */
  justify-content: center; /* Centers the icon horizontally */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Gives the floating effect with a shadow */
  color: white; /* White color for the icons */
  cursor: pointer;
}
#whatsapp-link {
  background-color: #25d366;
  border-radius: 50%; /* Makes the background perfectly circular */
  width: 60px; /* Ensures the circle is a good size */
  height: 60px; /* Equal height and width for a perfect circle */
  display: flex;
  align-items: center; /* Centers the icon vertically */
  justify-content: center; /* Centers the icon horizontally */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Gives the floating effect with a shadow */
  color: white; /* White color for the icons */
  cursor: pointer;
}
/* Hover interaction to show the other icons */
.hover-icons {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.fixed-icon:hover .hover-icons {
  display: flex;
}

.fixed-icon:hover #main-icon {
  display: none;
}

/* SVG sizes remain the same */
#chat-svg,
#whatsapp-svg,
#phone-svg {
  width: 30px;
  height: 30px;
}

/* Hover effect to make the icons stand out */
#whatsapp-link:hover,
#phone-link:hover {
  transform: scale(1.1); /* Slight enlargement on hover */
  transition: transform 0.2s ease;
}

.btn.btn-reverse {
  background: #f76286;
}

.btn.btn-reverse:hover {
  color: #333;
  background-color: #fff;
}

.btn.btn-white {
  color: #333;
  background-color: #fff;
}

.btn.btn-white:hover {
  color: #fff;
  background: #f76286;
}

.btn.btn-lg {
  height: 50px;
  padding: 0 30px;
  font-size: 20px;
  font-weight: bold;
  line-height: 50px;
  border-radius: 5px;
}

.section-big {
  padding: 100px 0px;
}

.section-small {
  padding: 50px 0px;
}

.section-title {
  margin: auto;
  max-width: 800px;
  margin-bottom: 80px;
}

.section-title.white h2 {
  color: #fff;
}

.section-title h2 {
  font-size: 40px;
  margin-bottom: 25px;
  line-height: 40px;
  margin-top: 0;
  position: relative;
  padding-bottom: 35px;
}

.section-title h2:before {
  position: absolute;
  content: "";
  bottom: 7px;
  left: 50%;
  width: 120px;
  height: 2px;
  background: #000000;
  z-index: 1;
  margin-left: -80px;
}

.section-title h2:after {
  position: absolute;
  content: "";
  bottom: 0px;
  left: 50%;
  width: 120px;
  height: 2px;
  background: #000000;
  margin-left: -20px;
  z-index: 2;
}

.section-title p {
  margin-top: 25px;
}

/* preloader css */

#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background-image: url(../img/preloader.gif);
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #fff;
}

.table {
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  margin: 0;
}
.table-cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

img {
  max-width: 100%;
}

.space {
  height: 80px;
}

/* ----------------------------------------------------------------------------------------
*                               02. Navigation area css
* --------------------------------------------------------------------------------------- */
.menu-area {
  background: #fff;
  height: 70px;
}

.menu-area.sticky-menu {
  height: 50px;
}

.sticky-menu {
  box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24);
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
}

.mainmenu {
  margin-top: 10px;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
}

.sticky-menu .mainmenu {
  margin-top: 0px;
}

.navbar {
  margin-bottom: 0;
  border: 0px;
}

.navbar-brand {
  display: block;
  color: #050505;
  text-transform: uppercase;
  font-size: 36px;
  padding: 15px 0;
  font-weight: 800;
  font-family: "Muli", sans-serif;
  font-size: 2rem;
  margin-left: 0;
}

.navbar-brand span {
  color: #050505;
}
.navbar-brand:hover {
  color: #050505;
}

.navbar-nav li {
  float: none;
  display: inline-block;
}

.navbar-nav li a {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  color: #333;
  font-family: "Muli", sans-serif;
}

.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
  background: none;
}

.mainmenu .navbar-nav li.active a {
  color: #419ad4;
}

/* Mobile Nav css */
.navbar-toggle .icon-bar {
  background: #419ad4;
}

/* ----------------------------------------------------------------------------------------
*                               03. Slider area css
* -------------------------------------------------------------------------------------- */

.slider-area {
  background-image: url(../img/bg/intro-bg.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}

.slider-area:before {
  position: absolute;
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.slider-area .carousel,
.slider-area .carousel-inner,
.slider-area .item {
  height: 100%;
}

@media (min-width: 992px) {
  .slider-area {
    height: 650px;
  }
}

.intro-text {
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.6) 2px 2px 3px;
}

.intro-text h1 {
  color: inherit;
  font-size: 60px;
  line-height: 60px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.intro-text p {
  font-size: 26px;
  color: inherit;
  font-weight: 300;
}

.intro-text .btn {
  margin-top: 30px;
  text-shadow: none;
}

@media (max-width: 991px) {
  .intro-text {
    margin: 80px auto;
    text-align: center;
  }
}

#carousel-example-generic .animated {
  animation-delay: 0.5s;
}

.carousel-indicators {
  bottom: 90px;
}

/* ----------------------------------------------------------------------------------------
*                                   04. About area css
* --------------------------------------------------------------------------------------- */
section {
  position: relative;
  z-index: 10;
}

.about-area {
  background-color: #f5f5f5;
}

.img-side {
  padding: 0;
  position: absolute !important;
  top: 0px;
  height: 100%;
  overflow: hidden;
  z-index: 100;
}

.img-side.fixed-image {
  position: fixed !important;
}

.img-side.img-right {
  right: 0;
}

.img-side.img-left {
  left: 0;
}

.img-side.img-center {
  left: 0;
  right: 0;
  margin: auto;
}

.img-holder {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.img-cover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 767px) {
  .img-side {
    min-height: 400px;
    position: relative !important;
    z-index: 0;
    margin-top: -50px;
  }

  .img-side .img-holder .title {
    padding-left: 15px;
    padding-right: 15px;
  }

  section.p-0 .img-side,
  section.pt-0 .img-side {
    margin-top: 0;
  }
}

.about-text {
  background: #fff;
  z-index: 100;
  position: relative;
  padding: 20px;
  border: 1px solid #419ad4;
  box-shadow: 0 0 0 20px #fff;
  margin: 20px;
  transform: translate(-12%);
}

.about-text h2 {
  margin-top: 5px;
}

.about-text-2 {
  padding-left: 15px;
}

.about-text-2 h2 {
  margin-top: 0px;
}

.about-area .btn {
  margin-top: 10px;
}

.about-area.demo-3 {
  background: #fff;
}

/* ----------------------------------------------------------------------------------------
*                                   07. Service area css
* --------------------------------------------------------------------------------------- */

.service-area .section-title {
  margin-bottom: 20px;
}

.service-box {
  margin-top: 60px;
}

.service-box span {
  font-size: 35px;
  color: #419ad4;
  margin-bottom: 10px;
  float: left;
  margin-right: 20px;
  width: 45px;
  text-align: center;
}

.service-box h3 {
  margin-top: 30px;
}

.service-box p {
  overflow: hidden;
}

.service-area.demo-3 {
  background: #f5f5f5;
}

/* ----------------------------------------------------------------------------------------
*                               06. Portfolio/work area css
* --------------------------------------------------------------------------------------- */
.portfolio .mix {
  display: none;
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.filters li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 20px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 700;
  color: #333;
  font-family: muli;
  font-size: 16px;
  background-color: #f5f5f5;
}

.filters li.active {
  color: #fff;
  background-color: #f76286;
}

.work-items {
  margin-top: 20px;
  margin-right: -10px;
  margin-left: -10px;
}

.work-items .item {
  position: relative;
  overflow: hidden;
  margin: 5px -10px;
}

.work-items .item img {
  width: 100%;
  transition: 0.8s ease-out;
}

.work-items .overlay {
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  text-align: center;
  opacity: 0;
  transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
  -ms-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
  -moz-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
  -webkit-transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
}

.work-items .item:hover {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  z-index: 100;
}
.work-items .item:hover .overlay {
  opacity: 0.5;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.work-items .item:hover img {
  transform: scale(1.2);
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
}

.work-items .overlay i.fa {
  font-size: 25px;
  color: #f76286;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ----------------------------------------------------------------------------------------
*                                08. Testimonial area css
* --------------------------------------------------------------------------------------- */
.testimonial-area {
  background-color: #f5f5f5;
}

.testimonial-content {
  text-align: right;
}

.testimonial-list {
  transform: translate(12%);
  z-index: 100;
}

.single-testimonial {
  padding: 0 15px;
  text-align: center;
  max-width: 700px;
  background: #fff;
  padding: 20px;
  border: 1px solid #419ad4;
  box-shadow: 0 0 0 20px #fff;
  margin: 20px;
}

.ratings i.fa {
  color: #f76286;
}

.ratings {
  margin-bottom: 20px;
}

i.fa.fa-quote-left {
  color: #333;
}

.single-testimonial i.fa {
  font-size: 20px;
  display: inline-block;
  margin-right: 10px;
}

.testimonial-area .subtitle,
.testimonial-area h2 {
  margin-top: 0px;
}

.single-testimonial p {
}

.single-testimonial img {
  margin-top: 30px;
  border-radius: 5px;
}

.single-testimonial h4 {
  margin-top: 20px;
  margin-bottom: 5px;
}

.single-testimonial h3 {
  color: inherit;
}

.single-testimonial .desg {
  font-size: 14px;
  line-height: 30px;
}

.owl-theme .owl-controls {
  margin-top: 30px;
}

.owl-theme .owl-controls .owl-page span {
  display: block;
  width: 20px;
  height: 5px;
  margin: 5px 7px;
  filter: Alpha(Opacity=50);
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  background: #333;
}

.owl-theme .owl-controls .owl-buttons div {
  font-size: 25px;
  background: none;
  padding: 5px;
}

.testimonial-list.demo-2 {
  transform: translate(0);
}

.testimonial-list.demo-2 .single-testimonial {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
}

.testimonial-list.demo-3 {
  transform: translate(0);
}

.testimonial-list.demo-3 .single-testimonial {
  margin: auto;
  box-shadow: none;
  border: none;
  border-radius: 5px;
  padding: 40px;
}

.testimonial-list.demo-3 .single-testimonial p {
  font-size: 17px;
}

.testimonial-list.demo-3 .single-testimonial p.desg {
  font-size: 16px;
}

.testimonial-area.demo-3 {
  background-image: url(../img/bg/test-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  position: relative;
}

.testimonial-area.demo-3:before {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------------------------------------------------------
*                                   12. Contact area css
* --------------------------------------------------------------------------------------- */
.contact-area .container {
  max-width: 900px;
}

.contact-form {
}

.form-control {
  display: block;
  border: 0px;
  width: 100%;
  height: 45px;
  padding: 5px 0px;
  font-size: 16px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
  background-image: none;
  border-radius: 0px;
  box-shadow: none;
  margin: 5px 0;
}

.form-control:focus {
  border-color: #333;
  outline: 0;
  box-shadow: none;
}

.contact-form .form-group {
  position: relative;
  padding-left: 35px;
  border-top: 1px solid #ddd;
  margin: 0;
}

.in_message {
  border-bottom: 1px solid #ddd;
}

.contact-form .form-group:before {
  position: absolute;
  height: 55px;
  font-family: FontAwesome;
  top: 0;
  left: 0;
  width: 20px;
  text-align: center;
  line-height: 55px;
  color: #419ad4;
  font-size: 18px;
}

.in_name:before {
  content: "\f007";
}
.in_email:before {
  content: "\f1d8";
}
.in_message:before {
  content: "\f0e0";
}

.contact-form textarea#message {
  padding-top: 10px;
  height: 99px;
}

#submitButton {
  margin-top: 15px;
}

.success {
  background: #fff none repeat scroll 0 0;
  color: #50b948;
  font-weight: 700;
  padding: 20px;
  text-align: center;
}

.error {
  background: #fff none repeat scroll 0 0;
  color: #ff0000;
  font-weight: 700;
  padding: 20px;
  text-align: center;
}

.contact-info {
  margin-bottom: 30px;
}

.address {
}

.address h3 {
  margin-top: 0;
}

.address-box {
  margin-bottom: 10px;
}

.address-box a:hover {
  color: #f76286;
}

.address-box p,
.address-box p a {
  color: inherit;
  margin: 0;
}

.social-links {
  overflow: hidden;
  margin-top: 30px;
}

.social-links li {
  list-style: none;
  float: left;
  margin-right: 10px;
}

.social-links li a i {
  width: 55px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  color: #fff;
  background-color: #419ad4;
  font-size: 25px;
  border-radius: 3px;
}

.social-links li a:hover i {
  background-color: #f76286;
}

/* ----------------------------------------------------------------------------------------
*                                   13. Footer area css
* --------------------------------------------------------------------------------------- */
.footer-area {
  background: #333;
  text-align: center;
  color: #fff;
  padding-top: 50px;
}

.footer-area p {
  margin: 0;
  line-height: 100px;
}

.social-ul {
  margin: 0 -15px;
  padding: 0;
  list-style: none;
  text-align: center;
}

.social-ul li {
  display: inline-block;
  float: none;
}

.social-ul li span {
  font-size: 50px;
  margin: 0 15px;
  color: #fff;
  border-radius: 50px;
}

.social-ul li a span:hover {
  background-color: #fff;
  color: #419ad4;
}