@import "tailwindcss";

@font-face {
    font-family: 'fo-n';
    src: url('../Fonts/Onest/Onest/static/Onest-Regular.ttf') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;

  --breakpoint-md: 48.1rem;
  --breakpoint-xl: 80.1rem;
  --breakpoint-lg: 64.1rem;
  --breakpoint-desk: 85.385rem;
  --breakpoint-xldesk: 90.1rem;
}

@font-face {
    font-family: 'fo-m';
    src: url('../Fonts/Onest/Onest/static/Onest-Medium.ttf') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'fo-b';
    src: url('../Fonts/Onest/Onest/static/Onest-Medium.ttf') format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'fo-xb';
    src: url('../Fonts/Onest/Onest/static/Onest-Medium.ttf') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'fo-xxb';
    src: url('../Fonts/Onest/Onest/static/Onest-Bold.ttf') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'fm-n';
    src: url('../Fonts/Onest/Mulish/static/Mulish-Regular.ttf') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'fm-m';
    src: url('../Fonts/Onest/Mulish/static/Mulish-Medium.ttf') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'fm-b';
    src: url('../Fonts/Onest/Mulish/static/Mulish-Medium.ttf') format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'fm-xb';
    src: url('../Fonts/Onest/Mulish/static/Mulish-Bold.ttf') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../Fonts/Poppins/Poppins-Regular.ttf') format('woff2');

}
@font-face {
    font-family: 'Roboto';
    src: url('../Fonts/Roboto/static/Roboto-Regular.ttf') format('woff2');

}
@font-face {
    font-family: 'Syne';
    src: url('../Fonts/Syne/static/Syne-Regular.ttf') format('woff2');

}
@font-face {
    font-family: 'Syne-medium';
    src: url('../Fonts/Syne/static/Syne-Medium.ttf') format('woff2');

}
body {
    cursor: text;
}
.fo-b {
  font-family: "fo-b", sans-serif ;

}
.fo-n {
  font-family: "fo-n", sans-serif;
}
.fo-m {
  font-family: "fo-m", sans-serif;
}
.fm-n {
  font-family: "fm-n", sans-serif;
  font-weight: normal;

}
.fm-m {
  font-family: "fm-m", sans-serif;


}
.fm-xb {
    font-family: "fm-xb", sans-serif;

}
.fo-xxb {
    font-family: "fo-xxb", sans-serif;

}
.fo-xb{
    font-family: "fo-xb", sans-serif;

}

body {
    background-color: #FFFFFF;
}
.poppins{
    font-family:'Poppins',sans-serif;
}
 /* p, span, ul, li, button{
    font-family: "fm-n", sans-serif;
} */




section.achievement-sec .heading h4 {
    position: relative;
    display: inline-block;
    margin-right: 120px;
}

section.achievement-sec .heading h4::after {
    content: "";
    width: 100px;
    height: 2px;
    background: #000;
    top: 50%;
    right: 0;
    position: absolute;
    transform: translate(120px, -50%);
}



section.search-tutor-sec .box:hover {
    background-image: url('/public/site/Sites/images/tutor-box-bg-hover.png') !important;
}


section.blog-page-sec .search > div {
    position: relative;
}

section.blog-page-sec .search > div::before {
    content: "\f002";
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translate(0px, -50%);
    font-family: FontAwesome;
    font-size: 25px;
    color: #797979;
}
@media (max-width: 400px) {
section.blog-page-sec .search > div::before {
    left: 17px;
}
}
.roboto{
    font-family:'Roboto',sans-serif;
}
.syne{
    font-family:'Syne',sans-serif;
}
.syne-medium{
    font-family:'Syne-medium',sans-serif;
}
.cardShadow{
    box-shadow: 0px 1px 2px 0px #00000008;

box-shadow: 0px 3px 3px 0px #00000008;

box-shadow: 0px 7px 4px 0px #00000005;

box-shadow: 0px 13px 5px 0px #00000000;

box-shadow: 0px 20px 6px 0px #00000000;

}.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none; /* IE & Edge */
  scrollbar-width: none; /* Firefox */
}
.blogCardShadow{
    box-shadow: -1px 11px 25px 0px #0000001A;

box-shadow: -4px 46px 46px 0px #00000017;

box-shadow: -10px 103px 62px 0px #0000000D;

box-shadow: -18px 184px 74px 0px #00000003;

box-shadow: -28px 287px 81px 0px #00000000;

}
.modalShadow{
    box-shadow: 0px 10.28px 10.28px -5.14px #0A0D120A;

box-shadow: 0px 25.71px 30.85px -5.14px #0A0D121A;

}
 .strong-aggree {
  background-color: transparent;
  border: .1em solid #1CD8C4;
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
  height: 1rem;
  outline: none;
  width: 1rem;
  -moz-appearance: none;
  -webkit-appearance: none;
  &:checked {
    background-color: white;
    border: 0.3em solid #1CD8C4;
    -webkit-transition: background .15s, box-shadow .1s;
    transition: background .15s, box-shadow .1s;
  }
}
 .strong-dis-aggree {
  background-color: transparent;
  border: .1em solid #8F8F8F;
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
  height: 1rem;
  outline: none;
  width: 1rem;
  -moz-appearance: none;
  -webkit-appearance: none;
  &:checked {
    background-color: white;
    border: 0.3em solid #8F8F8F;
    -webkit-transition: background .15s, box-shadow .1s;
    transition: background .15s, box-shadow .1s;
  }
}



dialog#filterpop .form {}

dialog#filterpop .form .days {}

dialog#filterpop .form .days .checkbox {}

dialog#filterpop .form .days .checkbox .box {
    position: relative;
}

dialog#filterpop .form .days .checkbox .box input[type="checkbox"]:checked {
}

dialog#filterpop .form .days .checkbox .box input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

dialog#filterpop .form .days .checkbox .box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border: 2px solid #1CD8C4;
    border-radius: 4px;
    background: #fff;
}

dialog#filterpop .form .days .checkbox .box::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

dialog#filterpop .form .days .checkbox .box:has(input:checked)::after {
    opacity: 1;
}

dialog#filterpop .form .days .checkbox .box:has(input:checked)::before {
    background: #1CD8C4;
}

dialog#filterpop .form .days .checkbox .box label {
    padding-left: 25px;
}

select:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: #1CD8C4;
    border-color: #1CD8C4;
}
.blogsection h4,.blogsection h5,.blogsection h6,.blogsection h1 ,.blogsection h3 ,.blogsection h2 ,.blogsection h4{
    font-size: 30px;
    color: #143453;
    font-family: 'fo-xb';
font-weight: 700;
}
.blogsection p,
.blogsection li,
.blogsection a {
    font-size: 18px;
    color: #434343;
    font-family: 'fo-n';
}
.text-error
{
    color: red;
}
.select2-container--default .select2-selection--single {
    height: 3rem; 
    padding: 0.5rem;
    border: 1.29px solid #D5D7DA;
    border-radius: 10px;
    background-color: #fff;
    color: #717680;
    font-size: 0.875rem; /* text-sm */
}

.select2-container--default .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: translate(-50%, -50%) translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translate(-50%, -50%) translateY(-6px);
    opacity: 1;
  }
}

 /* .apply-filters {
  position: relative;
}
.apply-filters::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: typingBounce 1s ease-in-out infinite;
  box-shadow:
    -12px 0 0 white,
     12px 0 0 white;
}

.apply-filters::after {
  content: "";
  position: absolute;
  left: calc(50% - 12px);
  top: 50%;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: typingBounce 1s ease-in-out infinite;
  animation-delay: 0.2s;
} */
.modalShadow{
     z-index: 10000;
}
.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); 
    
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-loader
{


    z-index: 1000000;
 
}
.loader {
    width: 68px;
    height: 68px;
    
    border: 10px solid #FFF;
    border-bottom-color: #1CD8C4;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 