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

:root{
    --main-bg-color:#0094EE;
}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

body{
    margin: 0;
    font-family: 'Outfit',sans-serif;
    overflow-x:hidden;
}


/* Base: mobile */
.heading {
    font-size: 25px;
    line-height: 35px;
}

.paragraph  {
    font-size: 14px;
    line-height: 20px;
}

/* Medium screens */
@media (min-width: 768px) {
    .heading {
        font-size: 30px;
        line-height: 40px;
    }

    .paragraph  {
        font-size: 16px;
        line-height: 25px;
    }
}

/* Large screens */
@media (min-width: 1024px) {
.heading {
        font-size: 35px;
        line-height: 45px;
    }

    .paragraph {
        font-size: 16px;
        line-height: 25px;
    }
}

@media (min-width: 1440px) {
    .heading {
        font-size: 48px;
        line-height: 50px;
    }

    .paragraph {
        font-size: 18px;
        line-height: 26px;
    }
}

/* header css start */

nav a.active {
  color: #0094EE;
  font-weight: 500;
}

.menu .menu-items li>a {
    position: relative;
    display: inline-block;
    max-width: 100%;
    z-index: 1;
}
 

.menu .menu-items li>a:hover {
    color: #0094EE;
    font-weight: 500;
    cursor: pointer;
}
.menu .menu-items li>a.active{
    color: #0094EE;
    font-weight: 500;
    cursor: pointer;
}
.menu .menu-items li>a::before {
    content: "";
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color:var(--main-bg-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.3s ease-in-out;
}

.menu .menu-items li>a:hover::before,
.menu .menu-items li>a.active::before,
.menu .menu-items li>a:focus::before {
    transform: scaleX(1);
}


/*  mobile menu*/

.mob-menu {
    position: absolute;
    top: -120vh;
    padding: 10px 5px;
    left: 0;
    right: 0;
    background-color: #132028;
    height:100vh;
    max-height: calc(100vh - 62px);
    overflow-x: hidden;
    overflow-y: auto;
    transition: top 0.40s ease-in-out;
}


.mob-menu_wrapper{
    min-height: 100%;
    padding: 40px 0 40px;
    flex-direction: column;
    display: flex;
}

.mob-menu.active {
    top: calc(100% - 10px);
}

.rotate-180 {
    transform: rotate(180deg);
}

.mob-menu_item_switcher i {
  color: #fff; /* make icon white */
  transition:all 0.3s ease, color 0.3s ease;
}

.mob-menu_item_switcher i.rotate-180 {
  transform: rotate(180deg);
}


/* home page in why choose section css */

.cards {
  position: relative;
  background: white;
  border: 2px solid #e5e7eb; 
  border-radius: 24px; 
  padding: 2rem 1.5rem; 
  overflow: hidden;
  z-index: 0;
  transition: all 0.3s ease-in-out;
}

/* ::before pseudo-element for hover border */
.cards::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 24px; 
  transition: all 0.4s ease-in-out;
  z-index: -1; 
}

.cards:hover::before {
  border-color: #0094EE; 
}
.cards:hover {
  transform: translateY(-1rem); 
  box-shadow: 0 10px 15px rgba(0,0,0,0.2); 
  transition-duration: 500ms;
}

.swiper-button-disabled {
      opacity: 0.4;
      cursor: not-allowed;
}

/* contact page form in checkbox css */
.form-group {
  display: block;
  margin-bottom: 15px; 
}

.form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.form-group label {
  position: relative;
  display: flex;
  align-items:start;
  cursor: pointer;
  text-align: start;
}

.form-group label:before {
  content:'';
  appearance: none;
  background-color: transparent;
  border-radius: 7px;
  border: 2px solid #FFFFFF66;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #FFFFFF66;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* form in select-1 dropdown css  */

.arrow-after::after {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    transition: 0.2s ease-in-out;
}

/* Arrow rotate on open */
.arrow-after.active::after {
    transform: translateY(-50%) rotate(-135deg);
}

/* form in select-2 dropdown css  */
.arrow-after1::after {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    transition: 0.2s ease-in-out;
}

/* Arrow rotate on open */
.arrow-after1.active::after {
    transform: translateY(-50%) rotate(-135deg);
}