/* ================= Display ================= */
.block { display: block; }
.flex { display: flex; }
.hidden { display: none; }
.flex-1 { flex: 1;}

.flex-wrap { flex-wrap: wrap; }

.shrink-0 { flex-shrink: 0;}
.grow-1 { flex-grow: 1;}

.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px;}
.gap-30 { gap: 30px; }

/* ================= Flex ================= */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.z-1 { z-index: 1;}
.z-2 { z-index: 2;}
.-z-1 { z-index: -1;}
.-z-2 { z-index: -2;}



.bg-f5f5f5 { background-color: #f5f5f5;}
/* ================= Position ================= */
.position-relative { position: relative; }
.position-absolute { position: absolute; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.bottom-190 { bottom: 190px; }
.left-0 { left: 0; }

/* ================= Width / Height ================= */
.w-full { width: 100%; }
.w-calc-100-30 { width: calc(100% + 30px);}
.w-40 { width: 40px; }
.w-70 { width: 70px;}
.w-180 { width: 180px;}
.w-200 { width: 200px;}
.w-60p { width: 60%;}
.w-40p { width: 40%;}
.w-33p { width: 33.33%;}

.max-w-full { max-width: 100%;}
.max-w-980 { max-width: 980px; }
.max-w-80p { max-width: 80%;}


.h-full { height: 100%; }
.h-40 { height: 40px; }
.h-70 { height: 70px;}
.h-180 { height: 180px;} 
.h-200 { height: 200px;}
.min-h-350 { min-height: 350px;}
/* ================= Typography ================= */
.text-center { text-align: center; }

.fs-14 { font-size: 14px; }
.fs-18 { font-size: 18px; }
.fs-24 { font-size: 24px; }
.fs-32 { font-size: 32px; }
.fs-36 { font-size: 36px; }
.fs-50 { font-size: 50px; }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.lh-normal { line-height: 1.2;}


.underline { text-decoration: underline;}
/* ================= Spacing ================= */
.mx-auto { margin-left: auto; margin-right: auto; }

.ml-30 { margin-left: 30px; }
.-ml-30 { margin-left: -30px; }
.-ml-15 { margin-left: -15px;}

.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }

.mt-30 { margin-top: 30px;}

.px-15 { padding: 0 15px;}
.p-20 { padding: 20px;}
.p-30 { padding: 30px;}
.pt-100 { padding-top: 100px; }
.pb-50 { padding-bottom: 50px; }
.pr-20 { padding-right: 20px;}

.pb-30p { padding-bottom: 30%;}
.pb-100p { padding-bottom: 100%;}

/* ================= Colors ================= */
.text-black { color: var(--black); }
.text-white { color: var(--white); }
.text-green { color: var(--green); }


.bg-black { background-color: var(--black);}
.bg-light-orange { background-color: #FFE1CF;}
.bg-light-blue { background-color: #00536b1a;}
.bg-light-green { background-color: #CFEDCF;}

.opacity-20 { opacity: .2;}
.opacity-40 { opacity: .4;}
/* ================= Media ================= */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

.overflow-hidden { overflow: hidden;}
/* ================= Border ================= */
.border-radius-20 { border-radius: 20px;}



/* ================= Hover ================= */
.hover-zoom {transition: all .3s ease-in; }
.hover-zoom-parent:hover .hover-zoom { transform: scale(1.05); }

.hover-underline:hover { text-decoration: underline; }
.hover-no-underline:hover { text-decoration: none; }

/* ======================================================
   Custom style Utility Classes End
====================================================== */



.content-container { padding: 100px 0; }
/* ============================== HomePage CSS Start ====================================== */




/* ============================== HomePage CSS End ====================================== */

/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) { 

	.xl-hidden { display: none;}


	.xl-max-w-80p { max-width: 80%;}
}

/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) { 

	.lg-hidden { display: none;}
	.lg-block { display: block;}


   .lg-max-w-full { max-width: 100%;}
	.lg-max-w-80p { max-width: 80%;}
   .lg-w-full { width: 100%;}
   .lg-w-50p { width: 50%;}
   .lg-h-auto { height: auto;}

   .lg-p-0 { padding: 0;}
	.lg-pb-35p { padding-bottom: 35%;}
   .lg-pt-60 { padding-top: 60px;}

   .lg-mb-30 { margin-bottom: 30px;}

   .lg-fs-28 { font-size: 28px;}
   .lg-fs-34 { font-size: 34px;}

}

/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px) { 

	.md-hidden { display: none;}
	.md-block { display: block;}
	.md-flex { display: flex;}


	.md-max-w-full { max-width: 100%;}

   .md-w-full { width: 100%;}


   .md-pb-50 { padding-bottom: 50px;}

   .md-fs-16 { font-size: 16px;}
   .md-fs-28 { font-size: 28px;}

   .md-fs-24 { font-size: 24px;}
   .md-fs-26 { font-size: 26px;}

}

/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width:575.98px) { }