:root {
  --main-color: #ff8b38;
}
::-webkit-scrollbar {
  width: 15px;
}
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
}
::-webkit-scrollbar-thumb:hover {
  background-color: #e97f33;
}
body {
  font-family: "Open Sans", serif; 
  background-color: #f5f5f5;
}
.title-box .title::after {
  content: "";
  display: block;
  width: 75px;
  height: 3px;
  background-color: var(--main-color);
  margin: 25px 0;
}
.title-box .center-border::after {
  margin: 25px auto;
}
.font-raleway {
  font-family: "Raleway", serif; 
}
.navbar .navbar-brand {font-size: 2rem; letter-spacing: 2px;}
.navbar .navbar-brand span {color: var(--main-color);}
.scrolled {background-color: rgb(33 37 41 / 80%) !important;}
.landing {
  min-height: calc(100vh - 74px);
  background-image: url(../images/header.webp);
  background-repeat: no-repeat;
  background-size: cover;
}
.landing::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0 , 0, 0, .5);
}
.landing h1 {
  font-size: 4rem;
  letter-spacing: 2px;
}
.landing h1 span {color: var(--main-color);}
.landing .info .main-text::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 3px;
  background-color: white;
  bottom: 0;
  left: 0;
}
@media (max-width: 991px) {
  .landing .info .main-text::before {
    left: 50%;
    transform: translateX(-50%);
  }
}
.landing form {width: 22.5rem;}
.landing form h3 {
  background-color: #f5f5f5;
}
.landing form h3 span {
  color: var(--main-color);
}
.landing form input[type="submit"] {
  background-color: var(--main-color);
}
.landing form input[type="submit"]:hover {
  background-color: var(--main-color);
  color: #333 !important;
}
.social-media {box-shadow: -2px -5px 13px black;}
.social-media .social svg {
  color: #ccc;
  margin: .75rem .75rem 0;
  transition: .3s ease-in-out;
}
.social-media .social .facebook:hover {color:#1877F2;}
.social-media .social .twitter:hover {color:#1DA1F2;}
.social-media .social .google:hover {color:#EA4335;}
.social-media .social .pinterest:hover {color:#E60023;}
.social-media .social .insta:hover {color:#833AB4;}
.social-media .social .stumble:hover {color:#EB4823;}
.social-media .social .rss:hover {color:#ee802f;}
.tabs-section ul li {
  width: 120px;
  height: 120px;
  background-color: #333;
  border-bottom: 2px solid #f5f5f5;
  cursor: pointer;
}
@media (max-width: 991px) {
  .tabs-section ul li {
    width: 100%;
  }
}
.tabs-section ul li.active,
.tabs-section ul li:hover,
.tabs-section button {
  background-color: var(--main-color);
}
.tabs-section .tab-text {
  display: none;
}
.tabs-section .tab-text.show {
  display: block;
}
.tabs-section button:hover {
  background-color: transparent;
  color: var(--main-color) !important;
  border-color: var(--main-color);
}
.sublist .box .icon {
  min-width: 50px;
  min-height: 50px;
  color: var(--main-color);
  border: 2px solid var(--main-color);
}
.sublist .box .text {
  color: #0348a1;
}
@media (max-width: 991px) {
  .sublist .title-box .title::after {
    margin: 25px auto;
  }
}
@media (max-width: 991px) {
  .standard .title-box .title::after {
    margin: 25px auto;
  }
}
.features .feat .icon {
  width: 75px;
  height: 75px;
  color: var(--main-color);
  border: 2px solid var(--main-color);
}
.pricing .plan .info {background-color: #333; border-color: var(--main-color) !important;}
.pricing .plan .info .price {font-size: 75px;}
.pricing .popular .special {background-color: var(--main-color);}
.testimonials .opinion {
  background-color: #f5f5f5;
}
.testimonials .opinion::after {
  content: "";
  position: absolute;
  border: 15px solid;
  border-color: #f5f5f5 transparent transparent transparent;
  bottom: -30px;
  left: 25px;
}
.stylish {
  background-image: url(../images/stylish.webp);
  background-repeat: no-repeat;
  background-size: cover;
}
.stylish::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0 , 0, 0, .7);
}
.stylish .title::after {
  background-color: white;
}
.contact textarea {
  height: 192px;
}
.contact button {
  background-color: var(--main-color);
}
.contact button:hover {
  background-color: transparent;
  color: var(--main-color) !important;
  border-color: var(--main-color);
}