@tailwind base;
    @tailwind components;
    @tailwind utilities;

    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Martel:wght@200;300;400;600;700;800;900&display=swap');

    /* .martel-regular {
        font-family: "Poppins", sans-serif;
    } */

    .font-poppins {
        font-family: "Poppins", sans-serif;
    }

    .font-sora {
        font-family: "Sora", sans-serif;
    }

    .font-montserrat {
        font-family: "Montserrat", sans-serif;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: "Sora", sans-serif;
        font-style: normal;
    }

    .heading-white {
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px #fff;
        color: transparent;
    }

    .heading-black {
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1px #000;
        color: transparent;
    }

    .animate-title {
        left: 0;
        animation: titleSlide 2s ease-in infinite;
    }

    @keyframes titleSlide {
        0% {
            left: 0;
        }

        50% {
            left: calc(100% - 5px);
        }

        100% {
            left: 0;
        }
    }

    #why-attend-content {
        display: flex;
        width: max-content;
        animation: marquee 20s linear infinite;
    }

    @keyframes marquee {
        0% {
            transform: translateX(0%);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    /* 
    .animate-bannerSlide {
    animation: bannerSlide 8s linear infinite;
    } */
    /* ---------------------
    [Master Stylesheet]
    Template Name: Lawgis - Law Firm and Attorney HTML Template
    Version: 1.0.0
    Author: Nano Theme
    --------------------- */
    /* ---------------------
    [Table of Contents]

    1. Global Elements
        1.1 Responsive Breakpoint (rs)
        1.2 Color Variables (color)
        1.3 Reboot (reboot)
    2. UI Components
        2.1 Shortcodes (shortcode)
        2.2 Preloader (preloader)
        2.3 Jarallax (jarallax)
    3. Sections
        3.1 Header (header)
        3.2 Hero (hero)
        3.3 About (about)
        3.4 Services (service)
        3.5 Pricing (pricing)
        3.6 Mission (mission)
        3.7 Timeline (timeline)
        3.8 Team (team)
        3.9 Partner (partner)
        3.10 Case Study (case-study)
        3.11 Testimonial (testimonial)
        3.12 Video (video)
        3.13 Blog (blog)
        3.14 Footer (footer)
        3.15 CTA (cta)
        3.16 Cookie (cookie)
        3.17 Contact (contact)
        3.18 Process (process)
        3.19 Awards (awards)
    4. Auxiliary Pages
        4.1 FAQ (faq)
        4.2 Breadcrumb (breadcrumb)
    --------------------- */
    /* Reboot CSS */

    /* Work Process */
    .work-process {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    }

    .process-card {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 28px;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    }
    @media only screen and (min-width:1200px) {
    .process-card {
        gap: 41px;
    }
    }
    .process-card::after {
    position: absolute;
    width: 1.5px;
    height: calc(100% - 44px);
    top: 65px;
    left: 25px;
    background-color: #FFFFFF;
    content: "";
    z-index: 10;
    }
    .process-card:last-child::after {
    display: none;
    }
    .process-card .number {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50px;
            flex: 0 0 50px;
    max-width: 50px;
    width: 50px;
    height: 50px;
    background-color: #FFFFFF;
    color: #1C1D20;
    font-size: 18px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-weight: 600;
    -webkit-transition-duration: 350ms;
            transition-duration: 350ms;
    }
    .process-card .process-text {
    background-color: #262629;
    padding: 24px 30px;
    border-radius: 12px;
    -webkit-transition-duration: 350ms;
            transition-duration: 350ms;
    }
    .process-card .process-text .process-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #FFFFFF;
    -webkit-transition-duration: 350ms;
            transition-duration: 350ms;
    }
    .process-card .process-text p {
    -webkit-transition-duration: 350ms;
            transition-duration: 350ms;
    color: #FFFFFF;
    }
    @media only screen and (min-width:1200px) {
    .process-card .process-text {
        padding: 40px 36px;
        border-radius: 12px;
    }
    }
    .process-card:hover .number, .process-card:focus .number {
    background-color: #E8BF96;
    color: #1C1D20;
    }
    .process-card:hover .process-text, .process-card:focus .process-text {
    background-color: #E8BF96;
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
    }
    .process-card:hover .process-text .process-title, .process-card:focus .process-text .process-title {
    color: #1C1D20;
    }
    .process-card:hover .process-text p, .process-card:focus .process-text p {
    color: #1C1D20;
    }

    .stepper-wrap {
    position: relative;
    z-index: 1;
    height: 1px;
    background-color: #FAF6F3;
    margin-top: 35px;
    }
    .stepper-wrap > div {
    position: absolute;
    z-index: 100;
    top: -33px;
    }
    .stepper-wrap > div h6 {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.14px;
    margin-bottom: 0 !important;
    text-transform: uppercase;
    padding-left: 4px;
    }
    .stepper-wrap > div span {
    width: 24px;
    height: 24px;
    display: block;
    background-color: #FAF6F3;
    border: 4px solid #FAF6F3;
    border-radius: 50%;
    }
    .stepper-wrap > div:nth-child(1) {
    left: -1px;
    }
    .stepper-wrap > div:nth-child(2) {
    left: 37%;
    }
    .stepper-wrap > div:nth-child(3) {
    left: 73%;
    }

    .process-card-two {
    border-radius: 12px;
    border: 1px solid rgba(254, 254, 254, 0.1);
    padding: 50px 36px;
    }
    .process-card-two h4 {
    margin-top: 40px;
    margin-bottom: 12px;
    color: #FFFFFF;
    font-size: 24px;
    letter-spacing: -0.48px;
    }

.divider {
  width: 100%;
  display: block;
  height: 60px;
}
@media only screen and (min-width:576px) {
  .divider {
    height: 70px;
  }
}
@media only screen and (min-width:768px) {
  .divider {
    height: 90px;
  }
}
@media only screen and (min-width:992px) {
  .divider {
    height: 100px;
  }
}
@media only screen and (min-width:1200px) {
  .divider {
    height: 110px;
  }
}
@media only screen and (min-width:1400px) {
  .divider {
    height: 130px;
  }
}

.divider-sm {
  width: 100%;
  display: block;
  height: 50px;
}

.section-heading h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  letter-spacing: -1.04px;
  margin-bottom: 32px;
}
@media only screen and (min-width:1400px) {
  .section-heading h2 {
    margin-bottom: 54px;
  }
}
.section-heading .sub-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-transform: uppercase;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 1rem;
}
.section-heading .sub-title2 {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 1rem;
}

.magnet-link:hover,
.magnet-link:focus {
  cursor: pointer;
}

.magnet-cursor,
.magnet-circle {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
}

.magnet-cursor {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #D1B06B;
  -webkit-transform: translate(var(--x), var(--y));
  transform: translate(var(--x), var(--y));
  z-index: 1000000;
}

.magnet-circle {
  width: 2rem;
  height: 2rem;
  top: -2px;
  left: -2px;
  border: 2px solid #D1B06B;
  background-color: transparent;
  -webkit-transform: translate(var(--x), var(--y));
  transform: translate(var(--x), var(--y));
  z-index: 100000;
}

.reset .magnet-cursor {
  background-color: transparent;
}

.reset .magnet-circle {
  background-color: rgba(209, 176, 107, 0.2);
  border-color: transparent;
  width: 3rem;
  height: 3rem;
  top: -10px;
  left: -10px;
}

.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 0 !important;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 5rem;
  font-weight: 600;
  letter-spacing: -0.14px;
  position: relative;
  height: 54px;
  min-width: auto;
  text-transform: capitalize;
  overflow: hidden;
}
.btn > span {
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -webkit-transition: opacity 350ms ease, -webkit-transform 350ms ease;
  transition: opacity 350ms ease, -webkit-transform 350ms ease;
  transition: opacity 350ms ease, transform 350ms ease;
  transition: opacity 350ms ease, transform 350ms ease, -webkit-transform 350ms ease;
  position: relative;
  opacity: 1;
}
.btn > span i {
  font-size: 20px;
}
.btn > span:last-child {
  position: absolute;
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.btn:hover > span:first-child {
  opacity: 0;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
}
.btn:hover > span:last-child {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.btn-primary {
  background-color: #E8BF96;
  color: #1C1D20;
}
.btn-primary:active, .btn-primary:hover, .btn-primary:focus {
  background-color: #b78d5a;
  color: #FFFFFF;
}

.btn-dark {
  background-color: #1C1D20;
  color: #FFFFFF !important;
}
.btn-dark:active, .btn-dark:hover, .btn-dark:focus {
  background-color: #161D27;
  color: #FFFFFF !important;
}

.btn-group-sm > .btn,
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  height: 37px;
  min-width: 100px;
}

.btn-link {
  position: relative;
  z-index: 1;
  color: #E8BF96;
  text-transform: capitalize;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 0 !important;
  min-width: 0;
  height: auto;
}
.btn-link i {
  font-size: 20px;
  -webkit-transition-duration: 350ms;
          transition-duration: 350ms;
}
.btn-link:active, .btn-link:hover, .btn-link:focus {
  color: #b78d5a;
  -webkit-box-shadow: none;
          box-shadow: none;
}