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

Name: main.css
Version: 1.0

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

Table of contents
        
    01. Navbar
    02. Slider
    03. Welcome
    04. Skills
    05. About
    06. Video
    07. Services
    08. Some Facts
    09. Portfolio
    10. More Details
    11. Team
    12. Testimonials
    13. Price
    14. Want Work
    15. Blog
    16. Clients
    17. Contact
    18. Footer
    19. Page Loading
    20. Media Query
*/

body {
  font-family: 'Raleway', sans-serif;
}

/*--------------------------------------------------
[1. Start Navbar]
--------------------------------------------------*/
.navbar {
  background: #272a41;
  background: linear-gradient(135deg, rgba(42, 36, 43, 0) 0%, rgba(42, 36, 43, 0) 100%);
  padding: 25px 0;
}

.navbar .nav-item {
  margin: 0;
  padding: 0;
  margin-left: 30px;
}

.navbar .nav-item .nav-link {
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #daeaec;
  font-weight: 500;
  transition: all 0.5s ease-in-out;
}

.navbar .nav-item .nav-link:hover {
  color: #F24259 !important;
}

.navbar .btn {
  text-decoration: none;
  background: #F24259;
  color: #ffffff;
  padding: 8px 30px;
  border-radius: 35px;
  margin-left: 40px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.5s ease-in-out;
}

.navbar .btn:hover {
  background: #ffffff;
  color: #212332;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------
[2. Start Slider]
--------------------------------------------------*/
.slider {
  background-color: #111111;
  height: 100vh;
  background-attachment: fixed;
  position: relative;
}

.slider .content {
  display: flex;
  width: 80%;
  flex-direction: column;
  gap: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
}

.slider .content h1 {
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;
}

.slider .content p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  font-family: 'Muli', sans-serif;
  color: #d1e5e7;
}

.slider .btn {
  text-decoration: none;
  background: #F24259;
  color: #ffffff;
  padding: 10px 35px;
  border-radius: 35px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.5s ease-in-out;
}

.slider .btn:hover {
  background: #ffffff;
  color: #212332;
}

.slider .btn-2 {
  max-width: fit-content;
  margin: auto;
  background: transparent;
  border: 1px solid #ffffff;
}

#particles-js {
  height: 100vh;
}

/*--------------------------------------------------
[3. Start Welcome]
--------------------------------------------------*/
.welcome,
#instagram {
  height: 100vh;
}

.welcome h2 {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  padding: 0;

}

.welcome h2 span {
  color: #F24259;
}

.welcome p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #999999;
  margin: 20px 0 60px;
  padding: 0;
}

.content_center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/*--------------------------------------------------
[18. Start Footer]
--------------------------------------------------*/
.footer {
  padding: 80px 0;
  background-color: #111111;
  background-size: cover;
}

.footer p {
  font-size: 14px;
  font-weight: 300;
  color: #cacaca;
  margin: 0;
  padding: 0;
}

.footer img {
  display: block;
  width: 100%;
  max-width: fit-content;
  margin: auto;
}

/*--------------------------------------------------
[19. Start Page Loading]
--------------------------------------------------*/
.no-js #loader {
  display: none;
}

.js #loader {
  display: block;
  position: absolute;
  left: 100px;
  top: 0;
}

.se-pre-con {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url("../img/loader/Preloader_3.gif") center no-repeat #fff;
}

._form_212 {
  margin: 0px !important;
  padding: 0px !important;
}

._button-wrapper {
  text-align: center;
}

.width-fit {
  width: 100%;
  max-width: fit-content;
  margin: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

#instagram .container .btn {
  max-width: 280px !important;
}

@media screen and (min-width: 375px) {
  .slider .content h1 {
    font-size: 30px;
  }
}

@media screen and (min-width: 425px) {
  .slider .content h1 {
    font-size: 35px;
  }
}

@media screen and (min-width: 768px) {
  .slider .content h1 {
    font-size: 50px;
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .navbar {
    padding: 30px;
    background: #ffffff !important;
  }

  .navbar .nav-item {
    margin: 30px 0 0 30px;
  }

  .navbar .nav-item .nav-link {
    color: #555555;
  }

  .navbar-dark .navbar-toggler {
    color: #F24259 !important;
    border-color: #F24259;
    background: #F24259;
    border-radius: 5px;
    opacity: 1;
  }

  .navbar .btn {
    margin-left: 30px;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .welcome .box {
    margin-bottom: 30px;
  }

  .skills .box-2 {
    margin-top: 30px;
  }

  .about img {
    margin-bottom: 30px;
  }

  .video-area img {
    margin-top: 30px;
    width: 100%;
  }

  .some-facts {
    padding: 115px;
  }

  .some-facts .items {
    margin: 15px 0;
  }

  .portfolio .button-group {
    padding: 5px;
  }

  .more-details img {
    margin-bottom: 30px;
  }

  .team {
    padding: 130px 0 100px;
  }

  .team .box {
    margin-bottom: 30px;
  }

  .price {
    padding: 130px 0 100px;
  }

  .price .box {
    margin-bottom: 30px;
  }

  .blog {
    padding: 130px 0 100px;
  }

  .blog .box {
    margin-bottom: 30px;
  }

  .clients {
    padding: 130px 0 100px;
  }

  .clients img {
    margin: 15px 0;
  }

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

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .navbar {
    padding: 30px;
    background: #ffffff !important;
  }

  .navbar .nav-item {
    margin: 30px 0 0 30px;
  }

  .navbar .nav-item .nav-link {
    color: #555555;
  }

  .navbar-dark .navbar-toggler {
    color: #F24259 !important;
    border-color: #F24259;
    background: #F24259;
    border-radius: 5px;
    opacity: 1;
  }

  .navbar .btn {
    margin-left: 30px;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .welcome .box {
    margin-bottom: 30px;
  }

  .skills .box-2 {
    margin-top: 30px;
  }

  .about img {
    margin-bottom: 30px;
  }

  .video-area img {
    margin-top: 30px;
    width: 100%;
  }

  .some-facts {
    padding: 115px;
  }

  .some-facts .items {
    margin: 15px 0;
  }

  .more-details img {
    margin-bottom: 30px;
  }

  .team {
    padding: 130px 0 100px;
  }

  .team .box {
    margin-bottom: 30px;
  }

  .price {
    padding: 130px 0 100px;
  }

  .price .box {
    margin-bottom: 30px;
  }

  .blog {
    padding: 130px 0 100px;
  }

  .blog .box {
    margin-bottom: 30px;
  }

  .clients img {
    margin: 15px 0;
  }

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

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .navbar {
    padding: 30px;
    background: #ffffff !important;
  }

  .navbar .nav-item {
    margin: 30px 0 0 30px;
  }

  .navbar .nav-item .nav-link {
    color: #555555;
  }

  .navbar-dark .navbar-toggler {
    color: #F24259 !important;
    border-color: #F24259;
    background: #F24259;
    border-radius: 5px;
    opacity: 1;
  }

  .navbar .btn {
    margin-left: 30px;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .skills .box-2 {
    margin-top: 30px;
  }

  .about img {
    margin-bottom: 30px;
  }

  .video-area img {
    margin-top: 30px;
  }

  .some-facts {
    padding: 115px;
  }

  .some-facts .items {
    margin: 15px 0;
  }

  .more-details img {
    margin-bottom: 30px;
  }

  .team {
    padding: 130px 0 100px;
  }

  .team .box {
    margin-bottom: 30px;
  }

  .price {
    padding: 130px 0 100px;
  }

  .price .box {
    margin-bottom: 30px;
  }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}