:root {
    --ring-color: rgb(59 130 246 / .5);
    --light-blue: #e5e7eb; /*rgb(239 246 255)*/
    --dark-blue: rgb(30 58 138);
    --icon-blue: rgb(37 99 235); /*2563eb*/
    --icon-yellow: rgb(253 224 71);
    --color-yellow:rgb(202 138 4);
    --gradient-yellow: #eab308;
    --gradient-blue: #3b82f6;
    --border-blue: #dbeafe; /*rgb(219 234 254)*/
;
    --card-blue: #eff6ff;
    --card-blue-border: rgb(191 219 254);

    --card-pink: rgb(254 242 242);
    --card-pink-border: rgb(254 202 202);

    --background-purple: rgb(250 245 255);
    --border-purple: rgb(233 213 255);

    --bg-green:rgb(240 253 244);
    --border-green: rgb(187 247 208);

    --bg-orange: rgb(255 247 237);
    --border-orange: rgb(254 215 170);
    
    --bg-yellow: rgb(254 252 232);
    --border-yellow: rgb(254 240 138);

    --bg-amber: rgb(255 251 235);
    --border-amber: rgb(253 230 138);

    --bg-gray: rgb(249 250 251);
    --bg-white: #fff;
    --bg-yellow:rgb(254 249 195);
    --gradient-white: #ffffff1a;
    --gradient-white2: #fff3;

    --color-black: hsl(222.2 84% 4.9%);
    --color-h4: hsl(215.4 16.3% 46.9%);

    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-color: 0 0 #0000;
    --tw-translate-y: 0;
    --tw-translate-x: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;

    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-gradient-to: rgb(30 58 138 / .85) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(30 64 175 / .8) var(--tw-gradient-via-position), var(--tw-gradient-to);

    --radius: .5rem;
}

body {
    background-color: hsl(var(--background));
    color: rgb(55 65 81);
    font-size: 1rem;
    line-height: 1.5;
    font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
}

.float-left {
    float: left;
}
.text-left {
    text-align: left;
}
a{
    text-decoration: none;
}

.background-white {
    background-color: var(--bg-white);
}

.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-l-blue-gradient {
    background: #EFF6FF;
    background: linear-gradient(180deg, rgba(239, 246, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.bg-gradient-blue-orange {
    background: #3B82F6;
    background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(234, 179, 8, 1) 100%);
}

.bg-gray {
    background-color: var(--bg-gray);
}

/****COLORS*****/
.text-yellow-300 {
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.c_black {
    color: var(--color-black);
}
.c_yellow {
    color: var(--icon-yellow);
}
.color-gradient-heading {
    background: #2563EB;
    background: linear-gradient(to right, #2563EB 0%, #CA8A04 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    min-height: 57px;

}
.color-l-blue {
    color: #e5e7eb;
}

.h-100p {
    height: 100%;
}

/******SHADOW******/
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.rounded-full {
    border-radius: 9999px;
}
.border-radius {
    border-radius: var(--radius);
}

/****HEADING****/
h2  {
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}
.to-orange-500 {
    --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}
.from-yellow-500 {
    --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.transform {
    animation-duration: .3s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 3s;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

svg {
    vertical-align: middle;
}
/*****BANNER*****/

.banner_bg {    
     background-image:  linear-gradient(rgba(30, 58, 138, 0.85), rgba(30, 58, 138, 0.85)),url(../images/banner.jpg);
     padding: 6rem 2rem;
}
.icon-church-div,
.mass-calendar {
    width: fit-content;
    padding: .8rem;
}  
.icon-church-div svg {
    width: 3rem;
    height: 3rem;
    color: var(--icon-yellow);
}
.icon-church-div {
    background-color: #ffffff0f;
    color: var(--color-yellow);
}
.mass-calendar {
    background-color: var(--gradient-white2);
    color: var(--bg-white);
}
.mass-calendar svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--bg-white);
}
.banner-heading {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bg-white);
    margin-top: 20px;
}
.banner-heading-sm {
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 2.5rem;
    color: var(--card-blue-border);
    margin-top: .5rem;
}

.get-involved h3,
.text-lg,
.regular-services h3 {
    font-size: 1.875rem;
    line-height: 2.25rem;    
}
.text-lg {
    color: var(--border-blue);
    margin: 2rem 0;
}
.text-sm,
.ready-to-connect p {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-sm {
    color: var(--card-blue-border);
}
.inner-box,
.gradient-box-inner{
    background-color: var(--gradient-white);
}
.inner-box {
    border:solid 1px var(--gradient-white2);
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
}
.inner-box svg {    
    width: 2rem;
    height: 2rem;
    color: var(--icon-yellow);
}
.inner-box h4 {
    color: var(--bg-white);
}
.inner-box p {
    font-size: .875rem;
    line-height: 1.25rem;
    color: var(--card-blue-border);
}
.join-community-btn {
    background-color: var(--gradient-yellow);
    color: var(--dark-blue);
}
.ready-to-connect-btn {
    background-color: var(--gradient-white2);
    color: var(--bg-white);
    font-weight: 600;
    padding: .7rem 1.5rem !important;
    margin-right: 10px;
}
.ready-to-connect-btn:hover {
    color: var(--bg-white);
}
.display-flex {
    display: inline-flex;
}
.to-blue-900\/85 {
    --tw-gradient-to: rgb(30 58 138 / .85) var(--tw-gradient-to-position);
}

.via-blue-800\/80 {
    --tw-gradient-to: rgb(30 64 175 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(30 64 175 / .8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}



.from-blue-900\/85 {
    --tw-gradient-from: rgb(30 58 138 / .85) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/****SECTION REGULAR SERVICES****/

.blue-gradient-box {
    background: #3B82F6;
    background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(37, 99, 235, 1) 100%);
    border-radius: var(--radius);
}
.orange-gradient-box {
    background: #EAB308;
    background: linear-gradient(90deg, rgba(234, 179, 8, 1) 0%, rgba(249, 115, 22, 1) 100%);
    border-radius: var(--radius);
}
.regular-services {
    color: var(--bg-white);
}
.regular-services h3 {
    margin: 20px 0 ;
    font-weight: 700;
}
.gradient-box-inner {
    border-radius: var(--radius);
    display: flex;
}
.gradient-box-inner svg {
    color: var(--icon-yellow);
    width: 1.5rem;
    height: 1.5rem;
}
.orange-gradient-box .gradient-box-inner svg {
    color: var(--border-blue);
}
.service-button {
    background-color: rgba(250 204 21);
    color: var(--dark-blue);
    padding: 1rem;
    border-radius: var(--radius);
}
.service-button p {
    margin-bottom: 0;
}
/***SECTION CELEBRATION***/
.h_border_yellow,
.gradient_h_border_yellow {
    width: 6rem;
    height: .25rem;
}
.gradient_h_border_yellow {
    background: #2563EB;
    background: linear-gradient(to right, #2563EB 0%, #CA8A04 100%);
}
.h_border_yellow {
    background-color: var(--gradient-yellow);
}
.celebration .h4,
.regular-services .h4 {
    font-size: 1.25rem;
    line-height: 1.85rem;
    font-weight: 400;
    color: var(--color-h4);
}
.celebration .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--icon-blue);
}
.celebration-month-box {
    background-color: var(--card-blue);
    border: 1px solid var(--card-blue-border);
    border-radius: var(--radius);
    height: 100%; 
}
.celebration-month-box,
.blue-gradient-box,
.orange-gradient-box
{    
    transition-duration: .3s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.celebration-month-box:hover,
.blue-gradient-box:hover,
.orange-gradient-box:hover {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-translate-y: -.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.celebration .card-blue {
    background-color: var(--card-blue);
    border-color: var(--card-blue-border);
}
.celebration .card-pink {
    background-color: var(--card-pink);
    border-color: var(--card-pink-border);
}
.celebration .card-purple {
    background-color: var(--background-purple);
    border-color: var(--border-purple);
}
.celebration .card-green {
    background-color: var(--bg-green);
    border-color: var(--border-green);
}
.celebration .card-orange {
    background-color: var(--bg-orange);
    border-color: var(--border-orange);
}
.celebration .card-yellow {
    background-color: var(--bg-yellow);
    border-color: var(--border-yellow);
}
.celebration .card-amber {
    background-color: var(--bg-amber);
    border-color: var(--border-amber);
}
.celebration .month-name,
.service-button {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dark-blue);
}

.celebration .month-name {
    --tw-space-x-reverse: 0;
    margin-right: calc(.75rem * var(--tw-space-x-reverse));
    margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.celebration h3 {
    color: rgba(31 41 55);
    --tw-space-y-reverse: 0;
    margin-top: calc(.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.375rem * var(--tw-space-y-reverse));
    font-size: 1.2rem;
    line-height: 1.75rem;
    font-weight: 700;
}
.celebration p {
    line-height: 1.625;
}

.icon-star {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gradient-yellow);
    margin: 0 7px;
}
.button-join-us {
    font-weight: 500;
}

/****JOIN US & STAY CONNECT****/
.div-get-involved {
    background: #EFF6FF;
    background: linear-gradient(180deg, rgba(239, 246, 255, 1) 0%, rgba(252, 253, 254, 1) 100%);
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border: solid 2px var(--border-blue);
    border-radius: var(--radius);
}
.get-involved h3 {
    color: var(--dark-blue);
    letter-spacing: -.025em;
    font-size: 1.875rem;
    line-height: 2.25rem; 
}

.icon-person,
.icon-person-green,
.icon-heart {
    padding: .75rem;
    width: fit-content;
}
.icon-person svg,
.icon-person-green svg,
.icon-heart svg {    
    width: 2rem;
    height: 2rem;
}

.icon-person,
.icon-email {
    background-color: rgb(219 234 254);
    color: var(--icon-blue);
}
.icon-person-green,
.icon-phone {
    background-color: rgb(220 252 231);
    color: rgb(22 163 74);
}
.icon-heart {
    background-color: var(--bg-yellow);
    color: var(--color-yellow);
}

.icon-email,
.icon-phone {
    padding: .4rem .55rem;
    width: fit-content;
}

.icon-email svg ,
.icon-phone svg {
    width: 1.5rem;
    height: 1.5rem;
}
.get-involved h4,
.contact-button,
.join-community-btn,
.inner-box h4,
.gradient-box-inner span {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
   
}
a.join-community-btn{
transition: transform .5s ease;
}

a:hover.join-community-btn {    
   transform:scale(1.1);
}
.get-involved h4 {
    color: var(--dark-blue);    
    margin-top: 15px;
}
.contact-info-div {
    background-color: var(--bg-white);
    border: 1px solid rgb(229 231 235);
    border-radius: var(--radius);
}
.contact-info-div h3,
.ready-to-connect h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}
.contact-info-div h3 {    
    color: rgb(31 41 55);
}
.contact-info-div p {
    margin-bottom: 0;
}
.small-heading {
    font-weight: 600;
    color: rgb(31 41 55);
}
.contact-button {
    background-color: var(--icon-blue);
    color: #fff;
}
.contact-button,
.join-community-btn,
.ready-to-connect-btn {
    padding: .7rem 2rem;
    transition: transform 0.3s ease;
}
.contact-button:hover {
    background-color: rgb(29 78 216);
    color: #fff;
    transform: scale(1.1); /* Adjust zoom level */
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {



}

/* ============ mobile view ============ */
@media(max-width: 991px) {

    h2 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .banner-heading {
        font-size: 2.25rem;
        line-height: 1.25;
    }
    .banner-heading-sm {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .text-lg, 
    .regular-services h3{
        font-size: 1.25rem;
        line-height: 2.25rem;
    }
    .text-sm {
        font-size: 1.125rem;
        line-height: 1.625;
    }
    /*.get-involved h3, .text-lg, .regular-services h3 {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }*/

	
}