/*
Theme Name: hello elementor child
Theme URI: [Enter the URL of your child theme's website or leave it blank]
Description: My custom child theme based on generatepress.
Author: Abdullah
Author URI: [Your website URL or leave it blank]
Template: hello-elementor
Version: 1.0
*/

/* Custom styles go below this line */

/* Texts sizes */
:root{
--H1:clamp(3rem, 2.7336rem + 1.1842vw, 3.5625rem);
--H2: clamp(2.5rem, 2.2632rem + 1.0526vw, 3rem);
--H3: clamp(2.0625rem, 1.8553rem + 0.9211vw, 2.5rem);
--H4: clamp(1.75rem, 1.602rem + 0.6579vw, 2.0625rem);
--H5: clamp(1.4375rem, 1.2895rem + 0.6579vw, 1.75rem);
--H6: clamp(1.25rem, 1.1612rem + 0.3947vw, 1.4375rem);
--Headline: clamp(1.25rem, 1.1612rem + 0.3947vw, 1.4375rem);
--Body: clamp(1rem, 1rem + 0vw, 1rem);
--Subtitle: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
--Caption: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
}

/* Xtra Small Shadow */
.xs-shadow {
  box-shadow: 0px 6px 19px -1px rgba(40, 55, 61, 0.12), 0px 2px 4px 0px rgba(40, 55, 61, 0.04);
}

/* Small Shadow */
.s-shadow {
  box-shadow: 0px 16px 32px -4px rgba(40, 55, 61, 0.10), 0px 2px 4px 0px rgba(40, 55, 61, 0.04);
}

/* Medium Shadow */
.m-shadow {
  box-shadow: 0px 24px 48px -8px rgba(40, 55, 61, 0.12), 0px 2px 4px 0px rgba(40, 55, 61, 0.04);
}

/* Large Shadow */
.l-shadow {
  box-shadow: 0px 40px 80px -16px rgba(40, 55, 61, 0.16), 0px 2px 4px 0px rgba(40, 55, 61, 0.04);
}

/* Xtra Large Shadow */
.xl-shadow {
  box-shadow: 0px 56px 112px -20px rgba(40, 55, 61, 0.18), 0px 2px 4px 0px rgba(40, 55, 61, 0.04);
}

   /* Titles & Body */

   .text-H1-extrabold{
    font-size: var(--H1);
    font-style: normal;
    font-weight: 800;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H1-bold{
    font-size: var(--H1);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H1-semibold{
    font-size: var(--H1);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H2-bold{
    font-size: var(--H2);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H2-semibold{
    font-size: var(--H2);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H2-medium{
    font-size: var(--H2);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H3-bold{
    font-size: var(--H3);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H3-semibold{
    font-size: var(--H3);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H3-medium{
    font-size: var(--H3);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H4-bold{
    font-size: var(--H4);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H4-semibold{
    font-size: var(--H4);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H4-medium{
    font-size: var(--H4);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H5-bold{
    font-size: var(--H5);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H5-semibold{
    font-size: var(--H5);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H5-medium{
    font-size: var(--H5);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H6-bold{
    font-size: var(--H6);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H6-semibold{
    font-size: var(--H6);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-H6-semibold{
    font-size: var(--H6);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-Headline-bold{
    font-size: var(--Headline);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-Headline-semibold{
    font-size: var(--Headline);
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-Headline-medium{
    font-size: var(--Headline);
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    color: var(--Text-Title, #1A2326);
   }

   .text-Body-semibold{
    font-size: var(--Body);
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
   }

   .text-Body-medium{
    font-size: var(--Body);
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
   }

   .text-Body-regular{
    font-size: var(--Body);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
   }

   .text-Subtitle-semibold{
    font-size: var(--Subtitle);
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
   }

   .text-Subtitle-medium{
    font-size: var(--Subtitle);
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
   }

   .text-Subtitle-regular{
    font-size: var(--Subtitle);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
   }

   .text-Caption-semibold{
    font-size: var(--Caption);
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
   }

   .text-Caption-medium{
    font-size: var(--Caption);
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
   }

   .text-Caption-regular{
    font-size: var(--Caption);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
   }



/* elementor button icon fix */
.elementor-button-icon{display: flex!important;
align-items: center!important ;}


input[type="text"],
input[type="email"],
textarea{
  outline: none !important; /* Remove default outline */
  border-color: #C1CAF8 !important; /* Change border color */
  background-color: #F5F7FD !important; /* Light blue background */
  color: #425B64 !important;
  border-radius: var(--sizing-gap-border-radius, 8px) !important;
}

/* Focus State (when the input or select is clicked or focused) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus, /* Phone input field */
textarea:focus,
select:focus {
  border-radius: var(--sizing-gap-border-radius, 8px) !important;
  outline: none !important; /* Remove default outline */
  border-color: #334CD5 !important; /* Change border color */
  background-color: #F5F7FD !important; /* Light blue background */
  color: #1F2A2E !important;
}

/* Hover State (when the mouse is over the input or select field) */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover, /* Phone input field */
textarea:hover,
select:hover {
  border-radius: var(--sizing-gap-border-radius, 8px) !important;
  border-color:#334CD5 !important;
  background:#F5F7FD !important;
}

/* Active State (when the field is being typed into) */
input[type="text"]:active,
input[type="email"]:active,
input[type="password"]:active,
input[type="tel"]:active, /* Phone input field */
textarea:active,
select:active {
  border-radius: var(--sizing-gap-border-radius, 8px) !important;
  border-color:#3853EA !important;
  background: #F5F7FD !important;
}

/* For select fields, custom arrow styles */
select:hover {
  cursor: pointer !important; /* Change cursor on hover */
}

textarea {
  resize: vertical; /* Allow only vertical resizing */
  min-height: 150px; /* Minimum height */
}


.p-title{
  overflow: hidden;
  text-overflow: ellipsis; 
    width:100%; 
    display: -webkit-box; 
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; }

.p-discription{
  margin-bottom:0px!important;
  overflow: hidden;
  text-overflow: ellipsis; 
    width:100%; 
    display: -webkit-box; 
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }

    .jet-form-builder-row{
      padding: 0px!important;
    }

.c-form-div > div {
  width: 100%!important;
}

.c-form-div form {
  display: flex!important;
  gap: 24px!important;
  flex-direction: column;
}

:where(.wp-block-columns){
  margin-bottom: 0px!important;
}

.addons_container{
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #F5F7FD!important;
}