.elementor-48 .elementor-element.elementor-element-8f6747a{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:150px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-48 .elementor-element.elementor-element-8f6747a:not(.elementor-motion-effects-element-type-background), .elementor-48 .elementor-element.elementor-element-8f6747a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1F2021;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-48 .elementor-element.elementor-element-c93db24 .elementor-heading-title{font-family:"Segoe UI", Sans-serif;font-size:16px;font-weight:600;}.elementor-48 .elementor-element.elementor-element-cfc7b71 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:44px;font-weight:800;color:#FFFFFF;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-48 .elementor-element.elementor-element-d77ca3a.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-48 .elementor-element.elementor-element-d77ca3a{left:902.997px;}body.rtl .elementor-48 .elementor-element.elementor-element-d77ca3a{right:902.997px;}.elementor-48 .elementor-element.elementor-element-d77ca3a{top:-76.986px;}body:not(.rtl) .elementor-48 .elementor-element.elementor-element-6e57fee{left:15px;}body.rtl .elementor-48 .elementor-element.elementor-element-6e57fee{right:15px;}.elementor-48 .elementor-element.elementor-element-6e57fee{top:553px;}.elementor-48 .elementor-element.elementor-element-6d068da{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-48 .elementor-element.elementor-element-433bb48{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:200;}.elementor-48 .elementor-element.elementor-element-d4a9d51{--display:flex;--padding-top:50px;--padding-bottom:0px;--padding-left:200px;--padding-right:200px;}.elementor-48 .elementor-element.elementor-element-a72fcfb > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-48 .elementor-element.elementor-element-a72fcfb{text-align:start;}.elementor-48 .elementor-element.elementor-element-a72fcfb .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:44px;font-weight:800;line-height:1.2em;color:#000000;}.elementor-48 .elementor-element.elementor-element-939c3bc{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-48 .elementor-element.elementor-element-410154e{width:100%;max-width:100%;font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;color:#212529;}.elementor-48 .elementor-element.elementor-element-410154e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-48 .elementor-element.elementor-element-410154e.elementor-element{--align-self:flex-start;}@media(min-width:768px){.elementor-48 .elementor-element.elementor-element-d4a9d51{--content-width:700px;}.elementor-48 .elementor-element.elementor-element-939c3bc{--content-width:1090px;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-48 .elementor-element.elementor-element-cfc7b71{text-align:center;}.elementor-48 .elementor-element.elementor-element-cfc7b71 .elementor-heading-title{font-size:34px;}.elementor-48 .elementor-element.elementor-element-d77ca3a{width:var( --container-widget-width, 202px );max-width:202px;--container-widget-width:202px;--container-widget-flex-grow:0;top:20px;}body:not(.rtl) .elementor-48 .elementor-element.elementor-element-d77ca3a{left:11px;}body.rtl .elementor-48 .elementor-element.elementor-element-d77ca3a{right:11px;}body:not(.rtl) .elementor-48 .elementor-element.elementor-element-6e57fee{left:433px;}body.rtl .elementor-48 .elementor-element.elementor-element-6e57fee{right:433px;}.elementor-48 .elementor-element.elementor-element-6e57fee{top:412px;}.elementor-48 .elementor-element.elementor-element-433bb48{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-48 .elementor-element.elementor-element-d4a9d51{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-48 .elementor-element.elementor-element-a72fcfb > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-48 .elementor-element.elementor-element-410154e > .elementor-widget-container{margin:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-a0ac1b1 */.card-container {
  width: 380px;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card-img__container {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.card-img {
  display: block;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 300ms ease-in-out;
}
.card-container:hover .card-img {
  transform: scale(1.1);
}

.card-img__overlay {
  position: absolute;
  inset: 0;
  background-color: black;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}
.card-container:hover .card-img__overlay {
  opacity: 0.4;
}

.card-shape__container {
  position: absolute;
  bottom: 0;
  opacity: 1;
  transition: opacity 300ms linear, bottom 300ms ease-in-out;
}

.card-container:hover .card-shape__container {
  bottom: -50px;
  opacity: 0;
}

.card-shape--img {
  display: block;
}
.card-icon{
    width: 70px;
}
.card-contents__container {
  flex: 1;
  height: 100%;
  position: relative;
  background: white;
}

.card-contents {
  --bg-color: white;
  --text-color: black;
  --action-color:white;
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 0;
  background-color: var(--bg-color);
  padding: 20px;
  transition: all 300ms ease-in-out;
}

.card-container:hover .card-contents {
  --bg-color: red;
  --text-color: white;
}

.card-title {
  color: var(--text-color);
  transition: all 300ms ease-in-out;
  font-size: 22px;
  font-weight: 700;
  padding: 30px 0 0 0;
}
.card-subtitle {
  color: var(--text-color);
  transition: all 300ms ease-in-out;
}

.card-action--btn {
  display: block;
  position: relative;
  overflow: hidden;
  height: 0px;
  transition: height 300ms ease-in-out;
  color: var(--action-color)
}
.card-container:hover .card-action--btn {
  --action-color:white;
  height: 50px;
}
.card-action--btn .fa-greater-than{
    margin-left: 10px;
}
/* second one end *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0d8ab1d */.card-container {
  width: 400px;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card-img__container {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.card-img {
  display: block;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 300ms ease-in-out;
}
.card-container:hover .card-img {
  transform: scale(1.1);
}

.card-img__overlay {
  position: absolute;
  inset: 0;
  background-color: black;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}
.card-container:hover .card-img__overlay {
  opacity: 0.4;
}

.card-shape__container {
  position: absolute;
  bottom: 0;
  opacity: 1;
  transition: opacity 300ms linear, bottom 300ms ease-in-out;
}

.card-container:hover .card-shape__container {
  bottom: -50px;
  opacity: 0;
}

.card-shape--img {
  display: block;
}
.card-icon{
    width: 70px;
}
.card-contents__container {
  flex: 1;
  height: 100%;
  position: relative;
  background: white;
}

.card-contents {
  --bg-color: white;
  --text-color: black;
  --action-color:white;
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 0;
  background-color: var(--bg-color);
  padding: 20px;
  transition: all 300ms ease-in-out;
}

.card-container:hover .card-contents {
  --bg-color: red;
  --text-color: white;
}

.card-title {
  color: var(--text-color);
  transition: all 300ms ease-in-out;
}
.card-subtitle {
  color: var(--text-color);
  transition: all 300ms ease-in-out;
}

.card-action--btn {
  display: block;
  position: relative;
  overflow: hidden;
  height: 0px;
  transition: height 300ms ease-in-out;
  color: var(--action-color)
}
.card-container:hover .card-action--btn {
  --action-color:white;
  height: 50px;
}
.card-action--btn .fa-greater-than{
    margin-left: 10px;
}
/* second one end *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f41f64b */.card-container {
  width: 300px;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card-img__container {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.card-img {
  display: block;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 300ms ease-in-out;
}
.card-container:hover .card-img {
  transform: scale(1.1);
}

.card-img__overlay {
  position: absolute;
  inset: 0;
  background-color: black;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}
.card-container:hover .card-img__overlay {
  opacity: 0.4;
}

.card-shape__container {
  position: absolute;
  bottom: 0;
  opacity: 1;
  transition: opacity 300ms linear, bottom 300ms ease-in-out;
}

.card-container:hover .card-shape__container {
  bottom: -50px;
  opacity: 0;
}

.card-shape--img {
  display: block;
}
.card-icon{
    width: 70px;
}
/*.card-title{*/
/*    font-family: Montserrat;*/
/*    font-size: 22px;*/
/*    font-weight: 700px;*/
/*}*/
.card-contents__container {
  flex: 1;
  height: 100%;
  position: relative;
  background: white;
}

.card-contents {
  --bg-color: white;
  --text-color: black;
  --action-color:white;
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 0;
  background-color: var(--bg-color);
  padding: 20px;
  transition: all 300ms ease-in-out;
}

.card-container:hover .card-contents {
  --bg-color: red;
  --text-color: white;
}

.card-title {
  color: var(--text-color);
  transition: all 300ms ease-in-out;
}
.card-subtitle {
  color: var(--text-color);
  transition: all 300ms ease-in-out;
}

.card-action--btn {
  display: block;
  position: relative;
  overflow: hidden;
  height: 0px;
  transition: height 300ms ease-in-out;
  color: var(--action-color)
}
.card-container:hover .card-action--btn {
  --action-color:white;
  height: 50px;
}
.card-action--btn .fa-greater-than{
    margin-left: 10px;
}
/* second one end *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8f6747a */.elementor-48 .elementor-element.elementor-element-8f6747a{
    overflow: hidden;
}

a.card-action--btn p {
    color: #ff1d24;
}

h2.card-title a {
    color: #000;
}
    
.card-container:hover h2.card-title a {
    color: #fff;
}
    
    
@media (min-width: 767px) {



.card-container {
    width: 350px;
}

}



    
    
@media (max-width: 767px) {



.card-container {
    width: 95%;
}

}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Segoe UI';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://moderndayroof.com/wp-content/uploads/2024/04/latest-1.woff2') format('woff2'),
		url('https://moderndayroof.com/wp-content/uploads/2024/04/latest-1.woff') format('woff');
}
/* End Custom Fonts CSS */