/*
Template Name: conquerglobal.in
Template URL: https://conquerglobal.in/
Author: https://conquerglobal.in/
*/
/*=================================
    CSS Index Here
==================================*/
/*
01. Theme Base
    1.1. Variable
    1.2. Mixin
    1.3. Function
    1.4. Typography
    1.5. Extend
02. Reset
    2.1. Container
    2.2. Grid
    2.3. Input
    2.4. Slick Slider
    2.5. Mobile Menu
    2.6. Date & Time Picker
03. Utilities
    3.1. Preloader
    3.2. Buttons
    3.3. Titles
    3.4. Common
    3.6. Font
    3.7. Background
    3.8. Text Color
    3.9. Overlay
    3.10. Animation
    3.11. Flaticon
04. Template Style
    4.1. Widget
    4.2. Header
    4.3. Footer
    4.4. Breadcumb
    4.5. Popup Search
    4.6. Popup Side Menu
    4.7. Pagination
    4.8. Blog
    4.9. Comments
    4.10. Hero Area
    4.11. About
    4.12. Services
    4.13. Team
    4.14. Form Style
    4.15. Testimonial
    4.16. Skill Area
    4.17. Brand
    4.18. Accordion
    4.19. Project
    4.20. Features
    4.21. Contact
    4.22. Woocommerce
    4.23. Shop
    4.24. Simple Sections
    4.25. Event
05. Spacing

*/
/*=================================
    CSS Index End
==================================*/
/*=================================
   01. Theme Base
==================================*/
/*------------------- 1.1. Variable-------------------*/
:root {
  --theme-color: #07ccec;
  --theme1-color: #ec7307;
  --theme-color2: #ec2128;
  --theme-color3: #0033a0;
  --theme-color4: #234090;
  --title-color: #27477d;
  --title-color2: #000000;
  --body-color: #888c92;
  --body-color2: #555555;
  --secondary-color: #cdf8ff;
  --smoke-color: #f3f6f7;
  --light-color: #afafaf;
  --black-color: #000000;
  --dark-color: #060d0f;
  --white-color: #ffffff;
  --yellow-color: #fec624;
  --success-color: #28a745;
  --error-color: #dc3545;
  --border-color: rgba(0,0,0,0.10);
  --title-font: "Quicksand", sans-serif;
  --body-font: "Roboto", sans-serif;
  --subtitle-font: "Dancing Script", cursive;
  --icon-font: "Font Awesome 5 Pro";
  --flaticon: "Flaticon";
  --ripple-ani-duration: 5s;
}

.home-five {
  --theme-color: #f20000;
  --title-color: #000000;
  --body-color: #555555;
}
/*------------------- 4.12. Services  -------------------*/
.space, .space-top {
  padding-top: 30px;
  padding-bottom: 40px;
}
.service-card {
  box-shadow: 0px 6px 13px 0px rgba(39, 71, 125, 0.1);
  background-color: var(--white-color);
  text-align: center;
  padding-top: 43px;
  overflow: hidden;
  border-radius: 10px;
}
.service-card .sr-icon {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  --size: 130px;
  --extra: -8px;
  --radius: 50%;
  z-index: 2;
}
.service-card .sr-icon:before {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: var(--white-color);
  left: var(--extra);
  right: var(--extra);
  top: var(--extra);
  bottom: var(--extra);
  border-radius: var(--radius);
}
.service-card .sr-icon i {
  display: inline-block;
  background-color: var(--theme-color);
  color: var(--white-color);
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  border-radius: var(--radius);
  transition: all ease 0.4s;
}
.service-card .icon-btn {
  position: relative;
  margin-bottom: -17px;
  z-index: 4;
  transition: ease 0.4s;
}
.service-card .icon-btn i {
  background-color: var(--title-color);
}
.service-card .sr-text {
  width: 100%;
  max-width: 345px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto 25px auto;
}
.service-card .sr-img {
  position: relative;
  overflow: hidden;
  margin-top: -90px;
}
.service-card .sr-img > div {
  z-index: 1;
}
.service-card .sr-img img {
  transform: scale(1);
  transition: all ease 0.4s;
}
.service-card .sr-img:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 0;
  background-image: linear-gradient(to top, var(--theme-color) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0.6;
  transition: all ease 0.4s;
  z-index: 1;
}
.service-card:hover .icon-btn i {
  background-color: var(--theme-color);
}
.service-card:hover .sr-icon i {
  background-color: var(--title-color);
}
.service-card:hover .sr-img > img {
  transform: scale(1.1);
}
.service-card:hover .sr-img:before {
  height: 100%;
}

.notice-bar {
  padding: 13.5px 30px;
  display: inline-block;
  box-shadow: 0px 3px 40px 0px rgba(39, 71, 125, 0.12);
  border-radius: 9999px;
}
.notice-bar p {
  margin-bottom: 0;
}

.service-box {
  text-align: center;
  --shape-size: 92px;
  padding: 40px 40px 42px 40px;
  border-radius: 10px;
  border: 2px solid #e6f8fb;
  position: relative;
  margin-bottom: 25px;
  background-color: var(--white-color);
  transition: all ease 0.4s;
}
.service-box .sr-icon {
  background-color: var(--white-color);
  padding: 13px;
  margin-top: calc(var(--shape-size) / -2 - 13px);
  display: inline-block;
  margin-bottom: 13px;
  position: relative;
  z-index: 2;
  border-radius: 50%;
}
.service-box .sr-icon i {
  width: var(--shape-size);
  height: var(--shape-size);
  line-height: var(--shape-size);
  background-color: var(--theme-color);
  color: var(--white-color);
  font-size: 3em;
  display: inline-block;
  text-align: center;
  border-radius: inherit;
}
.service-box .sr-img {
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}
.service-box .sr-img:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 0;
  background-image: linear-gradient(to top, var(--theme-color) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.8;
  transition: all ease 0.4s;
  z-index: 1;
}
.service-box .sr-img img {
  transform: scale(1);
  transition: all ease 0.4s;
}
.service-box .sr-content {
  padding: 0 10px;
}
.service-box .icon-btn {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin: 0 0 -24px -25px;
}
.service-box:hover {
  border-color: var(--theme-color);
  box-shadow: 0px 12px 47px 0px rgba(39, 71, 125, 0.07);
}
.service-box:hover .sr-img:before {
  height: 100%;
}
.service-box:hover .sr-img img {
  transform: scale(1.2);
}

.service-thumb {
  position: relative;
  --size-icon: 88px;
  padding-bottom: 60px;
  margin-bottom: 30px;
}
.service-thumb .sr-icon {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: calc(var(--size-icon) / -2);
  width: var(--size-icon);
  height: var(--size-icon);
  line-height: var(--size-icon);
  margin-left: calc(var(--size-icon) / -2);
  text-align: center;
  background-color: var(--white-color);
  border-radius: 50%;
  color: #1b1b1b;
  z-index: 2;
  box-shadow: 0px 15px 42.75px 2.25px rgba(39, 71, 125, 0.07);
  transition: all ease 0.4s;
  opacity: 0;
  visibility: hidden;
}
.service-thumb .sr-body {
  /*position: absolute;*/
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 15px 42.75px 2.25px rgba(39, 71, 125, 0.07);
  background-color: var(--white-color);
  text-align: center;
  padding: 35px 30px 22px 30px;
  transition: all ease 0.4s;
  /*max-width: 320px;*/
  margin-left: auto;
  margin-right: auto;
}
.service-thumb .sr-title {
  transition: all ease 0.4s;
}
.service-thumb .sr-content {
  overflow: hidden;
  transition: all ease 0.4s;
  margin-bottom: 0;
}
.service-thumb .sr-text {
  font-size: 14px;
  margin-bottom: 6px;
}
.service-thumb .link-btn {
  font-size: 14px;
}
.service-thumb .sr-img {
  overflow: hidden;
}
.service-thumb .sr-img img {
  transition: all ease 0.4s;
  transform: scale(1);
  height:250px;
}
.service-thumb:hover .sr-icon {
  opacity: 1;
  visibility: visible;
}
.service-thumb:hover .sr-body {
  padding-top: 70px;
  padding-top: calc(var(--size-icon) / 2 + 25px);
}
.service-thumb:hover .sr-icon,
.service-thumb:hover .sr-title a {
  color: var(--theme-color) !important;
}
.service-thumb:hover .sr-img img {
  transform: scale(1.3);
}

.service-bar {
  padding: 60px 80px;
  background-color: var(--white-color);
  box-shadow: 0px 15px 42.75px 2.25px rgba(39, 71, 125, 0.07);
  margin-top: -87.5px;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

@media (min-width: 767px) {
  .service-circle {
    position: relative;
    width: 800px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-radius: 50%;
  }
  .service-circle__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    border-radius: 50%;
    width: 425px;
    height: 425px;
    border-radius: 50%;
    background-color: var(--theme-color4);
  }
  .service-circle__item {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    padding: 20px 20px;
    text-align: center;
    transition: all ease 0.4s;
    opacity: 0;
    visibility: hidden;
  }
  .service-circle__item.active {
    opacity: 1;
    visibility: visible;
  }
  .service-circle__title {
    color: var(--white-color);
    max-width: 260px;
    position: relative;
    padding-bottom: 20px;
  }
  .service-circle__title a {
    color: inherit;
  }
  .service-circle__title a:hover {
    text-decoration: underline;
  }
  .service-circle__title:after, .service-circle__title:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 220px;
    margin: 0 0 0 -110px;
    height: 1px;
    background-color: var(--white-color);
    border-radius: 10px;
    opacity: 0.7;
  }
  .service-circle__title:after {
    height: 3px;
    width: 40px;
    margin: 0 0 -1px -20px;
    opacity: 1;
  }
  .service-circle__text {
    color: var(--white-color);
    margin: 0 0 3px 0;
    max-width: 260px;
  }
  .service-circle__lines .line {
    background-color: #f5f7ff;
    width: 20px;
    height: 900px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    z-index: 2;
  }
  .service-circle__lines .line:nth-child(2) {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  .service-circle__lines .line:nth-child(3) {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .service-circle__menu {
    position: relative;
    width: 800px;
    height: 800px;
    margin: 0 auto;
    /* Make each list item right corner to center of the menu */
    /* rotate deg = 360deg / count-of-item  (360/6=60deg);
      skew deg = 90deg - [rotate deg] 
      each li rotate deg = rotate deg * li-number;
    */
  }
  .service-circle__menu ul {
    position: absolute;
    width: 800px;
    height: 800px;
    padding: 0;
    list-style: none;
    border-radius: 50%;
    /*  THIS IS IMPORTANT  */
    overflow: hidden;
    /*  THIS IS IMPORTANT  */
  }
  .service-circle__menu li {
    position: absolute;
    top: -84px;
    /*  THIS IS IMPORTANT  */
    left: -84px;
    /*  THIS IS IMPORTANT  */
    width: 484px;
    height: 484px;
    transform-origin: 100% 100%;
    /*  THIS IS IMPORTANT  */
    overflow: hidden;
    /*  THIS IS IMPORTANT  */
    transform: rotate(var(--rotate-item, 0)) skew(30deg);
  }
  .service-circle__menu li a {
    display: block;
    width: 484px;
    height: 484px;
    margin-top: 119px;
    /*  THIS IS IMPORTANT  */
    margin-left: 119px;
    /*  THIS IS IMPORTANT  */
    background-color: var(--white-color);
    transform: skew(-30deg) rotate(-60deg);
    /*  THIS IS IMPORTANT  */
    transition: background-color 0.5s;
    text-align: center;
  }
  .service-circle__menu li a:hover, .service-circle__menu li.active a {
    background-color: var(--theme-color2);
  }
  .service-circle__menu li a:hover img, .service-circle__menu li.active a img {
    filter: brightness(0) invert(1);
  }
  .service-circle__menu li img {
    position: absolute;
    left: var(--icon-left, 50%);
    top: var(--icon-top, 35%);
    transform: translate(-50%, -50%) rotate(var(--rotate-icon, -300deg));
    transform-origin: 50% center;
    display: block;
    transition: all ease 0.4s;
  }
  .service-circle__menu li:nth-child(2) {
    --rotate-item: 60deg;
    --rotate-icon: 0;
  }
  .service-circle__menu li:nth-child(3) {
    --rotate-item: 120deg;
    --rotate-icon: -60deg;
    --icon-top: 34%;
    --icon-left: 46%;
  }
  .service-circle__menu li:nth-child(4) {
    --rotate-item: 180deg;
    --rotate-icon: -120deg;
    --icon-left: 46%;
  }
  .service-circle__menu li:nth-child(5) {
    --rotate-item: 240deg;
    --rotate-icon: -180deg;
    --icon-left: 48%;
  }
  .service-circle__menu li:nth-child(6) {
    --rotate-item: 300deg;
    --rotate-icon: -240deg;
  }
}
@media (min-width: 767px) and (max-width: 992px) {
  .service-circle {
    width: 700px;
    height: 700px;
  }
  .service-circle__center {
    width: 375px;
    height: 375px;
  }
  .service-circle__menu {
    width: 700px;
    height: 700px;
    /* Make each list item right corner to center of the menu */
    /* rotate deg = 360deg / count-of-item  (360/6=60deg);
      skew deg = 90deg - [rotate deg] 
      each li rotate deg = rotate deg * li-number;
    */
  }
  .service-circle__menu ul {
    width: 700px;
    height: 700px;
  }
  .service-circle__menu li {
    top: -34px;
    /*  THIS IS IMPORTANT  */
    left: -34px;
    /*  THIS IS IMPORTANT  */
    width: 384px;
    height: 384px;
  }
  .service-circle__menu li a {
    width: 384px;
    height: 384px;
    margin-top: 88px;
    /*  THIS IS IMPORTANT  */
    margin-left: 88px;
    /*  THIS IS IMPORTANT  */
  }
  .service-circle__menu li img {
    transform: translate(-50%, -70%) rotate(var(--rotate-icon, -300deg));
  }
}
.service-style1 {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.service-style1 .service-img img {
  width: 100%;
  height:250px;
}
.service-style1 .service-flip-title {
  position: absolute;
  left: -3px;
  top: 50%;
  margin: 0;
  text-align: center;
  z-index: 1;
  background-color: var(--white-color);
  font-size: 20px;
  font-weight: 600;
  writing-mode: tb-rl;
  transform: rotate(-180deg) translateY(50%);
  height: -moz-max-content;
  height: max-content;
  padding: 90px 25px 90px 29px;
  -webkit-clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 87%);
          clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 87%);
  transition: all ease 0.4s;
  opacity: 1;
  visibility: visible;
  margin-left: 0;
}
.service-style1 .service-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color);
  z-index: 1;
  opacity: 0.9;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.4s;
}
.service-style1 .service-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  z-index: 2;
  padding: 0 40px;
}
.service-style1 .service-title {
  color: var(--white-color);
  font-size: 24px;
}
.service-style1 .service-title a {
  color: inherit;
}
.service-style1 .service-title a:hover {
  color: var(--title-color);
}
.service-style1 .service-text {
  color: var(--white-color);
  line-height: 28px;
  margin: 0;
  transition: all ease 0.4s;
}
.service-style1 .service-btn,
.service-style1 .service-text,
.service-style1 .service-title {
  transition: all ease 0.4s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-40px);
}
.service-style1 .service-btn {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  background-color: var(--white-color);
  color: var(--theme-color);
  position: absolute;
  left: 50%;
  bottom: 40px;
  margin-left: -20px;
  border-radius: 50%;
  z-index: 1;
  transform: translateY(40px);
}
.service-style1 .service-btn:hover {
  background-color: var(--title-color);
  color: var(--white-color);
}
.service-style1:hover .service-btn,
.service-style1:hover .service-text,
.service-style1:hover .service-title {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0.1s;
}
.service-style1:hover .service-title {
  transition-delay: 0.2s;
}
.service-style1:hover .service-overlay {
  opacity: 0.9;
  visibility: visible;
}
.service-style1:hover .service-flip-title {
  margin-left: -100px;
  opacity: 0;
  visibility: hidden;
}

/* Hight Resoulation devices */
@media (min-width: 1921px) {
  .service-style1 .service-content {
    padding: 0 20px;
  }
  .service-style1 .service-title {
    font-size: 20px;
  }
  .service-style1 .service-btn {
    bottom: 20px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .service-style1 .service-content {
    padding: 0 20px;
  }
  .service-style1 .service-title {
    font-size: 20px;
  }
  .service-style1 .service-btn {
    bottom: 20px;
  }
}
/* Medium Large devices */
@media (max-width: 1399px) {
  .service-box {
    --shape-size: 82px;
    padding: 30px 30px 32px 30px;
  }
  .service-box .sr-icon {
    padding: 8px;
  }
}
/* Large devices */
@media (max-width: 1199px) {
  .service-card {
    padding-top: 43px;
  }
  .service-card .sr-icon {
    --size: 100px;
    --extra: -5px;
  }
  .service-card .sr-icon i {
    font-size: 3em;
  }
  .service-card .sr-img {
    margin-top: -60px;
  }
  .service-card .sr-text {
    padding-left: 30px;
    padding-right: 30px;
  }
  .service-box .sr-content {
    padding: 0;
  }
  .service-bar {
    padding: 35px 40px 40px 40px;
    margin-top: 40px;
    margin-bottom: 35px;
    box-shadow: 0 0 45px -5px rgba(39, 71, 125, 0.14);
  }
}
/* Medium devices */
@media (max-width: 992px) {
  .service-thumb {
    padding-bottom: 0;
  }
  .service-thumb .sr-icon {
    opacity: 1;
    visibility: visible;
  }
  .service-thumb .sr-body {
    position: relative;
    padding-top: calc(var(--size-icon) / 2 + 15px);
    max-width: 100%;
  }
  .service-thumb .sr-icon,
.service-thumb .sr-title a {
    color: var(--theme-color) !important;
  }
  .service-thumb .sr-img img {
    transform: scale(1.3);
  }
  .service-thumb:hover .sr-body {
    padding-top: calc(var(--size-icon) / 2 + 15px);
  }
}
/* Small devices */
@media (max-width: 767px) {
  .notice-bar {
    border-radius: 10px;
  }
  .service-card {
    padding-top: 33px;
  }
  .service-card .sr-text {
    padding-left: 20px;
    padding-right: 20px;
  }
  .service-card .sr-img {
    margin-top: -50px;
  }
  .service-thumb {
    --size-icon: 70px;
  }
  .service-thumb .sr-icon .fa-3x {
    font-size: 2.5em;
  }
  .service-box {
    --shape-size: 74px;
    padding: 20px 20px 30px 20px;
  }
  .notice-bar {
    padding: 13.5px 15px;
  }
  .notice-bar.mt-30 {
    margin-top: 0;
  }
  .service-circle__menu ul {
    margin: 0 0 30px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }
  .service-circle__menu li {
    display: inline-block;
  }
  .service-circle__menu li.active a {
    background-color: var(--theme-color2);
  }
  .service-circle__menu li.active a img {
    filter: brightness(0) invert(1);
  }
  .service-circle__menu a {
    display: block;
    background-color: var(--white-color);
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 7px;
  }
  .service-circle__menu a img {
    max-width: 40px;
    transition: all ease 0.4s;
  }
  .service-circle__item {
    display: none;
    background-color: var(--theme-color4);
    padding: 30px 20px 20px 20px;
    border-radius: 7px;
    text-align: center;
  }
  .service-circle__item:not(.active) {
    opacity: 0;
  }
  .service-circle__item.active {
    display: block;
    transition: opacity 0.15s linear;
  }
  .service-circle__title {
    color: var(--white-color);
  }
  .service-circle__title a {
    color: inherit;
  }
  .service-circle__title a:hover {
    text-decoration: underline;
  }
  .service-circle__text {
    color: var(--white-color);
  }
}