/* responsive font */
.main-tittle-heading {
  font-size: calc(24px + (45 - 24) * (100vw - 270px) / (1920 - 270)) !important;
  text-transform: capitalize;
}
h1 {
  font-size: calc(22px + (40 - 22) * (100vw - 270px) / (1920 - 270)) !important;
  text-transform: capitalize;
}
h3 {
  font-size: calc(19px + (28 - 19) * (100vw - 270px) / (1920 - 270)) !important;
  text-transform: capitalize;
}

h4 {
  font-size: calc(19px + (24 - 19) * (100vw - 270px) / (1920 - 270)) !important;
  text-transform: capitalize;
}
h5 {
  text-transform: uppercase;
}
/* .color-them {
  background-color: #8c6023;
  background-color: #d8c47f;
  background-color: #b18241;
  background-color: #d18c2e;

  darkthem
  background-color: #fff7dc;
  color: #978b7c;
} */
.h1color-light {
  color: #191919 !important;
}
.h1dark-color {
  color: #8c6023;
}

.light-h3 {
  color: #8c6023;
}
.white-p {
  color: #4e4d4d9e !important;
  font-weight: 500 !important;
}
.light-p-main {
  color: #5454549e;
  font-weight: 700;
}
.accordion-body {
  color: #4e4d4d9e;
  font-weight: 500;
}
/* button design */
.frt-btn {
  background-color: #d8c47f;
  color: white;
  padding: 10px !important;
  transition: ease-in 0.3s;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.3s ease-out !important;
}

.frt-btn:hover {
  background-color: white;
  color: #8c6023 !important;
  transform: translate3d(0px, -5px, 0px);
  border-radius: 10px;
}

.frt-btn-sec {
  background-color: white;
  color: #8c6023 !important;
  padding: 10px !important;
  transition: ease-in 0.3s;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}

.frt-btn-sec:hover {
  background-color: #8c6023;
  color: white !important;
  transform: translate3d(0px, -5px, 0px);
  border-radius: 10px;
}

.submit-btn {
  background-color: rgb(218, 213, 198);
  color: #8c6023;
  font-weight: 500;
}
.submit-btn:hover {
  background-color: #8c6023;
  color: white;
  box-shadow: 1px 1px 5px 1px white;
}
/* end */

header {
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: white !important;
}

.nav-desk a {
  color: white;
  font-weight: 700 !important;
  transition: 0.5s;
}
.nav-desk a:hover {
  color: #8c6023;
}

@media screen and (min-width: 991px) {
  .nav-desk {
    display: block;
  }

  .nav-mob {
    display: none !important;
  }
}

@media screen and (max-width: 991.98px) {
  .nav-mob {
    display: block !important;
    background-color: black;
  }

  .nav-desk {
    display: none !important;
  }
  .nav-mob .mobile-click a {
    color: #8c6023;
    font-weight: 500 !important;
  }
  .fix-nav {
    padding: 48px !important;
  }
}

.fix-nav {
  padding: 20px;
  background-color: black !important;
  transition: ease-out 0.5s;
}

.nav-active {
  padding: 0px;

  background: #1a1919 !important;
}

.logo-icon img {
  width: 90%;
  padding: 10px;
  transition: ease-in-out 0.5s;
}

.logo-active img {
  width: 80%;
}

.nav-mob {
  background-color: transparent;
  padding: 30px 0px !important;
  transition: ease-out 0.5s;
}

.nav-mobile-active {
  background-color: #1a1919;
  padding: 10px 0px !important;
}

.dropdown-menu {
  border: none;
  padding: 0px;
  border-color: #191919 !important;
  border-radius: 0px !important;
  background-color: #d8c47f !important;
}

.navbar-toggler-icon {
  background-image: url(./assets/images/icon/icon-tog.svg) !important;
}

.navbar-toggler {
  font-size: 20px;
}

.navbar-toggler:hover {
  color: #8c6023 !important;
  a {
  }
}

.navbar-toggler:focus {
  border: none;
  box-shadow: 3px 3px 11px #16213e;
}

/* index banner 1 */
.section-1 {
  padding: 230px 0px 150px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  p {
    line-height: 30px;
    font-weight: 500;
  }
}
.index-banner {
  background-image: url(./assets/images/hero-section-home.jpg);
}
.web-development-banner {
  background-image: url(./assets/images/hero-section-banner.webp);
}
.eCommerce-banner {
  background-image: url(./assets/images/ecommerce-banner.webp);
}

/* Ghost writting */
.ghost-banner {
  background-image: url(./assets/images/ghostwriting.webp);
}

/*--- book-sec-control -*/
.book-sec-control {
  position: relative;
  z-index: -1;
}

.left-arrowed,
.right-arrowed {
  position: absolute;
  width: 30px !important;
  height: 30px !important;
  z-index: 2;
}

.fa-circle-arrow-left,
.fa-circle-arrow-right {
  font-size: 30px !important;
  color: #8c6023;
  border: 1px solid #d8c47f;
  border-radius: 50px;
  opacity: 0.7;
}

.right-arrowed {
  right: 5% !important;
  top: 50%;
}

.left-arrowed {
  left: 5% !important;
  top: 50%;
}

/*----------------- section 2------------------- */
.section-2 {
  padding: 20px 0px;
}

.section-2 img {
  width: 100% !important;
  height: auto;
  padding: 5px;
}
.service-Box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 69px 0px;
  text-decoration: none;
  box-shadow: 1px 1px 13px 0px #b18241;
  h4 {
    color: #8c6023;
    text-align: center;
  }
}

.section-2 .col-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* -------section 3------ */
.section-3 {
  padding: 50px 0px;
}

.sale-box .sale-image img {
  transition: 0.9s;
}

.sale-box:hover .sale-image img:nth-child(1) {
  transform: rotate(360deg);
}

/* section-choice */
.section-choice {
  padding: 70px 0px;
  background-color: #fff7dc;
}

/* repeat */
.choice-box {
  box-shadow: 1px 1px 4px 3px #d8c47f;
  border-radius: 20px;
  transition: ease-in 0.3s;
  transform: scale(0.9);
  position: relative;
  background-color: white;
}

.choice-box:hover {
  transform: scale(1);
  cursor: pointer;
}

.choice-box:before {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: absolute;
}

.choice-image img {
  width: 100px;
  padding: 10px;
  margin-top: -15px;
}

@media screen and (max-width: 560px) {
  .choice-box {
    flex-direction: column;
    align-items: center;
  }

  .choice-image img {
    width: 100px;
    padding: 0px;
    margin-top: 0px;
  }
}

/* -------------section-design-service --------------*/

.section-design-service {
  background-image: url(./assets/images/Custom\ Web\ Design\ Solutions.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 70px 0px;
  position: relative;
}

.design-Box {
  border-radius: 15px;
  border: 1px solid transparent;
  transition: all 0.3s ease-in-out;
  color: white;
}

.design-Box:hover {
  background-color: #19191940;

  border: 1px solid #b18241;
  cursor: pointer;
}

/* --------------section 4-------------- */

.proct-security {
  background-image: url(./assets/images/remote-access-for-business.webp);
}

.key-box {
  background-color: white;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  transition: 0.5s;
  box-shadow: 0px 1px 7px;
  h5 {
    color: #8c6023;
  }
}

.key-box .key-1 img {
  width: 100px;
}

.key-1 {
  display: flex;
  justify-content: center;
}

/* hover */
.key-box:hover {
  background-color: #b18241;
  transform: scale(1.1);
  cursor: pointer;

  h5 {
    color: #191919;
  }
  p {
    color: white !important;
  }
}

/* --------section-Research--------- */
.section-Research {
}
.research-box,
.research-box1 {
  background-size: cover;
  width: 210px;
  height: 210px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  bottom: 0px;
}
.seo-copywriting {
  background-image: url(./assets/images/icon/seo-copywriting.svg);
}
.research-learn {
  background-image: url(./assets/images/icon/research-&-learn.svg);
}
.mockup-website-design {
  background-image: url(./assets/images/icon/mockup-website-design.svg);
}
.website-development-b {
  background-image: url(./assets/images/icon/website-development.svg);
}
.make-website-live-B {
  background-image: url(./assets/images/icon/make-website-live.svg);
}

.improved-brand {
  background-image: url(./assets/images/icon/improved-brand.svg);
}

.a-boost-in-sales {
  background-image: url(./assets/images/icon/a-boost-in-sales.svg);
}
.organic-web-traffic {
  background-image: url(./assets/images/icon/organic-web-traffic.svg);
}
.easy-on-the-budget {
  background-image: url(./assets/images/icon/easy-on-the-budget.svg);
}

/* ...... */
.fiction-brand {
  background-image: url(./assets/images/icon/fiction.svg);
}

.non-fiction-sales {
  background-image: url(./assets/images/icon/non-fiction.svg);
}
.biography-traffic {
  background-image: url(./assets/images/icon/biography.svg);
}
.informative-budget {
  background-image: url(./assets/images/icon/informative.svg);
}

.research-box img {
  position: absolute;
  right: 55px;
  top: 55px;
}

.research-box1 img {
  right: 55px;
  top: 55px;
  position: absolute;
}

@media screen and (min-width: 769px) {
  .research-box .res-img:after {
    content: "";
    width: 116px;
    height: 8px;
    position: absolute;
    overflow: hidden;
    background-image: url(./assets/images/icon/bothline.png);
    right: -71px;
    bottom: -9px;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .resarch-content:after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    background-color: white;
    top: 50%;
    left: -15px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
  }

  .research-con-2:before {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    background-color: white;
    top: 50%;
    right: -15px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
  }
}

.research-box-sec .res-img:after {
  content: "";
  right: 164px !important;
  bottom: 0 !important;
  transform: rotate(118deg) !important;
}

.resarch-content,
.research-con-2 {
  position: relative;
  padding: 10px 30px 5px;
  background: #fff;
  max-width: 545px;
  transition: 0.5s;
  background-color: white;
}

.resarch-content:hover {
  transform: translate3d(0px, -5px, 0px);
  cursor: pointer;
}

.research-con-2:hover {
  transform: translate3d(0px, -5px, 0px);
  cursor: pointer;
}

/* ---------section-services------ */

.section-services {
  background-image: url(./assets/images/see-how-our-web-design.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  h1 {
    color: #fff7dc;
    text-align: center;
    padding: 30px 0px;
  }
  h2 {
    color: #978b7c;
  }
  p {
    font-weight: 500 !important;
  }
}

.section-services .event-ser {
  position: relative;
  top: 100px;
}

/* slider event css */

.section-event {
  position: relative;
  top: 140px;
}

.slid-to-event .carousel-control-prev-icon,
.carousel-control-next-icon {
  padding: 30px;
  border-radius: 50px;
  transition: 0.3s;
  background-color: #8c6023;
  box-shadow: 1px 1px 5px 1px white;
}

.slid-to-event .carousel-control-prev-icon:hover {
  background-color: #d8c47f;
}

.slid-to-event .carousel-control-next-icon:hover {
  background-color: #d8c47f;
}

@media screen and (min-width: 769px) {
  .slid-to-event .carousel-item img {
    max-width: 80%;
    margin: auto;
  }
}

@media screen and (max-width: 769px) {
  .slid-to-event .carousel-item img {
    width: 90% !important;
    margin: auto;
  }

  .slid-to-event .carousel-control-prev-icon,
  .carousel-control-next-icon {
    padding: 20px;
  }
}

/* onclick design */
.click-bTn {
  width: 100%;
  text-decoration: none;
  background-color: white;
  transition: 0.2s;
  color: #8c6023;
  font-weight: 500;
}

.click-bTn:hover {
  background-color: #8c6023;
  color: #fff7dc;
}

.tab .click-bTn.active {
  background-color: #8c6023;
  color: #fff7dc;
  position: relative;
}

.tab .click-bTn.active:after {
  content: "";
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 20px solid #8c6023;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  display: block;
  position: absolute;
  right: -23px;
  top: 17px;
  z-index: 9;
}
.tabcontent p {
  font-weight: 500;
  color: #4e4d4d9e !important;
}
/* ------section form------- */
.section-form {
  background-image: url(./assets/images/get-web-design-&-development-quote.webp);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 50px 0px;
  margin-top: 150px;
}

.sec-frm input {
  width: 100% !important;
}
.form-select,
textarea {
  /* width: 100%; */
  /* height: auto; */
  padding: 1px 9px;
  border-radius: 0;
}

.form-select:focus {
  box-shadow: none !important ;
}
.opt-select .form-select {
  padding: 2px;
  border-radius: 0;
}

.opt-select textarea {
  padding: 2px;
  border-radius: 0;
}
/* ------section-Powering -----------*/

.section-Powering {
  padding: 70px 0px;
  overflow: hidden;
}

.section-Powering p:before {
  content: "\f10d";
  font-family: FontAwesome;
  position: relative;
  top: -40px;
  left: 30px;
  color: #d7d7d7;
  font-size: 30px !important;
}

.section-Powering p:after {
  content: "\f10e";
  font-family: FontAwesome;
  position: relative;
  top: 40px;
  left: -30px;
  color: #d7d7d7;
  font-size: 30px !important;
}

.section-Powering .column {
  cursor: pointer;
}

/* Accourdian section */
.Ftt-two {
  background-image: url(./assets/images/faq-for-test-candidiates.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
}
.accordion-header .accordion-button {
  font-size: calc(15px + (24 - 15) * (100vw - 270px) / (1920 - 270)) !important;
  text-transform: capitalize;
}

.section-accoudion {
  padding: 50px 0px;
  background-image: url(./assets/images/faq-banner.webp);
}

.accordion-button:focus {
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  background-color: white !important;
  color: #8c6023 !important;
}

.accordion-button::after {
  background-image: url(./assets/images/icon/plux.svg) !important;
  color: #8c6023 !important;
}

.accordion-button {
  color: #8c6023 !important;
  font-weight: 500;
}

.accordion-button:not(.collapsed)::after {
  background-image: url(./assets/images/icon/minace.svg) !important;
}

.accordion-item button {
  font-size: calc(30px + (40 - 30) * (100vw - 992px) / (1920 - 280)) !important;
}

.section-accoudion .border-top {
  border-color: #8c6023 !important;
}
/* end */

.section-get-start {
  padding: 80px 0px;
  background: #000 url(./assets/images/stechinnovative-your-end-to-end.webp)
    no-repeat;
  background-size: cover;
}

/* ----------------contact section -------------*/
.contact-section {
  padding: 150px 0px;
}

.my-font {
  font-size: calc(40px + (70 - 40) * (100vw - 992px) / (1920 - 280)) !important;
  font-weight: 700;
}

.form-tittle {
  position: relative;
  padding-bottom: 45px;
}

.form-tittle:before {
  content: "";
  width: 15%;
  height: 5px;
  background: #000;
  position: absolute;
  left: 0;
  bottom: 0;
}

.form-tittle:after {
  content: "";
  width: 84.5%;
  height: 5px;
  background: #8c6023;
  position: absolute;
  left: 15.5%;
  bottom: 0;
}

.contact-section label {
  font-size: large;
  font-weight: 600;
}

.contact-section input,
textarea,
.form-select {
  width: 100%;
  padding: 10px;
}

::placeholder {
  color: #0d0d0ea8;
  font-weight: 600;
}

/* section-info */
.section-infO {
  padding: 70px 0px;
}

.info-box {
  background-color: #191919;
  padding: 30px 30px;
  border-radius: 10px;
  border: 3px solid #8c6023;
  margin: 10px 0px;

  transition: ease-in 0.3s;
}
@media screen and (min-width: 1100px) {
  .info-box {
    transform: rotate(-12deg);
  }
}
.info-box:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.head-1 {
  color: white;
}

.head-1 i {
  font-size: 30px;
}

/* section-about */
.section-about {
  padding: 250px 0px;
  background-image: url(./assets/images/about-banner.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.sec-about-2 {
  padding: 70px 0px;

  h5 {
    color: #d5d5d5;
  }
}
.sec-about-3 {
  background: url(./assets/images/banner.webp) no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  width: 100%;
  display: inline-block;
  padding-bottom: 60px;
}

.image-about-right {
  position: absolute;
  right: 0px;
}
.image-left {
  position: absolute;
  left: 0px;
}

/* popup */
/* * --------------------popup form ------------------*/

#overlay {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 20000;
}

#fpop {
  /* margin-top: 152px; */
  margin-left: auto;
  margin-right: auto;
  z-index: 30000;
}

.pop-form {
  padding: 50px !important;
  border: 2px solid #b18241;
}

.pop-form input {
  width: 100% !important;
}

.closs-btn {
  width: 40px;
  height: 40px;
  background-color: #b18241;
  border-radius: 50px;
  font-weight: 600;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 29px;
  right: 20px;
  z-index: 1 !important;
  color: white;
}

.closs-btn:hover {
  font-weight: 800;
  color: #b18241;
  background-color: #d8c47f;
  box-shadow: 1px 1px 14px 2px #191919;
  transform: scale(1.2);
}

/* thankx banner */
.thankx-banner {
  background-image: url(./assets/images/thanks-banner.jpg);
}

/* footer */
footer {
  padding: 50px 0px;
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
}

.footer-design li a {
  color: white;
  font-size: large !important;
  text-decoration: none;
}

.footer-design li a:hover {
  color: #8c6023;
}

.footer-uselink li a {
  color: #6c6c6c !important;
}

.footer-uselink .nav-link:hover {
  color: #8c6023 !important;
}

/* social icon */
.social-icon .icon-brand {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.fb-icon {
  color: #316ff6;
}

.tw-icon {
  color: #1da1f2;
}

.insta-icon {
  color: #d62976;
}

.fb-icon:hover {
  background-color: #316ff6;
  color: white;
}

.tw-icon:hover {
  background-color: #1da1f2;
  color: white;
}

.insta-icon:hover {
  background-color: #d62976;
  color: white;
}

/* end */

/* responsive */

@media screen and (max-width: 1199px) and (min-width: 992px) {
  .section-event {
    top: 119px;
  }
  .section-1 {
    padding: 138px 0px 100px;
  }
}

@media screen and (max-width: 992px) and (min-width: 769px) {
  .section-event {
    top: 77px;
  }
}

@media screen and (max-width: 991.98px) and (min-width: 530px) {
  .contact-section {
    padding: 130px 0px 3px 0px !important;
  }
}

@media screen and (max-width: 769px) and (min-width: 530px) {
  .section-event {
    top: 50px;
  }

  .section-services .event-ser {
    position: relative;
    top: 50px;
  }

  .carousel {
    position: inherit !important;
  }
  .section-about {
    padding: 150px 0px !important;
  }
  .section-1 {
    padding: 100px 0px 100px;
  }
}

@media screen and (max-width: 530px) and (min-width: 230px) {
  .section-event {
    top: 30px;
  }

  .section-services .event-ser {
    position: relative;
    top: 40px;
  }

  .slid-to-event .carousel-control-prev-icon,
  .carousel-control-next-icon {
    padding: 0px;
  }

  .carousel {
    position: inherit !important;
  }
  .section-1 {
    padding: 100px 0px 100px;
  }
  .eCommerce_e {
    width: 100%;
  }
  .eCommerce_e img {
    padding: 21px 6px 21px 10px !important;
  }
  .section-about {
    padding: 120px 0px;
  }
  .pop-form {
    padding: 20px !important;
  }
  .closs-btn {
    position: absolute;
    top: 6px !important;
    right: 9px !important;
  }
  .off-screen-mobile {
    width: 85% !important;
  }
  .contact-section {
    padding: 100px 0px 3px 0px !important;
  }
  /* .head-1 i {
    display: none;
  } */
  .section-form {
    margin-top: 67px;
  }
}

.eCommerce_e {
  padding: 0;
  background-color: #ffffff;
  border-left: 5px solid #8c6023;
  float: left;
  min-width: 80%;
  position: relative;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}

.eCommerce_e img {
  padding: 21px 12px 21px 30px;
  width: 80px;
}

.eCommerce_e:before {
  content: "";
  background: url(./assets/images/icon/triangle.svg) no-repeat center;
  width: 14px;
  height: 20px;
  display: block;
  top: 38px;
  left: 0px !important;
  position: absolute;
}