.elementor-4624 .elementor-element.elementor-element-0564034{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-2em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--padding-top:7em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-4624 .elementor-element.elementor-element-0564034:not(.elementor-motion-effects-element-type-background), .elementor-4624 .elementor-element.elementor-element-0564034 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4624 .elementor-element.elementor-element-d1b131d{--display:flex;--min-height:389px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:center;}.elementor-4624 .elementor-element.elementor-element-d1b131d:not(.elementor-motion-effects-element-type-background), .elementor-4624 .elementor-element.elementor-element-d1b131d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(269deg, #FFFFFF 0%, #255AB81A 100%);}.elementor-4624 .elementor-element.elementor-element-d1b131d.e-con{--e-con-transform-rotateZ:-360deg;}.elementor-4624 .elementor-element.elementor-element-78dda49{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4624 .elementor-element.elementor-element-78dda49.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4624 .elementor-element.elementor-element-05c133e{--display:flex;--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4624 .elementor-element.elementor-element-a7468bb .elementor-heading-title{font-family:"Space Grotesk", Sans-serif;font-size:50px;font-weight:500;line-height:50px;letter-spacing:0px;}.elementor-4624 .elementor-element.elementor-element-bf43763{--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-widget-text-editor.elementor-drop-cap-view-letter-big .elementor-drop-cap{color:var( --e-global-color-primary );}.elementor-4624 .elementor-element.elementor-element-4d03caa{width:var( --container-widget-width, 67% );max-width:67%;--container-widget-width:67%;--container-widget-flex-grow:0;font-family:"Mulish", Sans-serif;font-size:19px;font-weight:500;line-height:22px;letter-spacing:0px;}.elementor-4624 .elementor-element.elementor-element-dc2ab05{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-around;}.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-4624 .elementor-element.elementor-element-58bc34d{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--padding-top:3em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-4624 .elementor-element.elementor-element-58bc34d:not(.elementor-motion-effects-element-type-background), .elementor-4624 .elementor-element.elementor-element-58bc34d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4624 .elementor-element.elementor-element-5004a9c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4624 .elementor-element.elementor-element-f4d1f28{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4624 .elementor-element.elementor-element-f4d1f28.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4624 .elementor-element.elementor-element-32efc34 .elementor-heading-title{font-family:"Space Grotesk", Sans-serif;font-size:32px;font-weight:400;letter-spacing:0px;color:#000000;}.elementor-4624 .elementor-element.elementor-element-1f38989{font-family:"Mulish", Sans-serif;font-size:19px;font-weight:500;text-transform:none;line-height:22px;letter-spacing:0px;}.elementor-4624 .elementor-element.elementor-element-1bdf30c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4624 .elementor-element.elementor-element-1e7891b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4624 .elementor-element.elementor-element-1e7891b.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4624 .elementor-element.elementor-element-303a6c7 .elementor-heading-title{font-family:"Space Grotesk", Sans-serif;font-size:32px;font-weight:400;letter-spacing:0px;color:#000000;}.elementor-4624 .elementor-element.elementor-element-4127a2c{font-family:"Mulish", Sans-serif;font-size:19px;font-weight:500;text-transform:none;line-height:22px;letter-spacing:0px;}.elementor-4624 .elementor-element.elementor-element-add64eb{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--padding-top:5em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-4624 .elementor-element.elementor-element-add64eb:not(.elementor-motion-effects-element-type-background), .elementor-4624 .elementor-element.elementor-element-add64eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4624 .elementor-element.elementor-element-3016104{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4624 .elementor-element.elementor-element-9ebc741{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4624 .elementor-element.elementor-element-b13fac0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4624 .elementor-element.elementor-element-625b1dc{--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;}.elementor-4624 .elementor-element.elementor-element-625b1dc:not(.elementor-motion-effects-element-type-background), .elementor-4624 .elementor-element.elementor-element-625b1dc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4624 .elementor-element.elementor-element-112316d{--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;--margin-top:4em;--margin-bottom:4em;--margin-left:0em;--margin-right:0em;}.elementor-4624 .elementor-element.elementor-element-ca27da5{width:var( --container-widget-width, 8.103% );max-width:8.103%;--container-widget-width:8.103%;--container-widget-flex-grow:0;}.elementor-4624 .elementor-element.elementor-element-ca27da5.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4624 .elementor-element.elementor-element-ca27da5 blockquote{font-size:37px;line-height:40px;letter-spacing:0px;word-spacing:0px;color:#EEF4FF;border-style:none;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;}.elementor-4624 .elementor-element.elementor-element-ca27da5 blockquote i{color:#EEF4FF;font-size:54px;padding:0px 0px 0px 0px;}.elementor-4624 .elementor-element.elementor-element-ca27da5 blockquote svg{fill:#EEF4FF;}.elementor-4624 .elementor-element.elementor-element-8c4532a{width:var( --container-widget-width, 81.806% );max-width:81.806%;--container-widget-width:81.806%;--container-widget-flex-grow:0;}.elementor-4624 .elementor-element.elementor-element-8c4532a.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4624 .elementor-element.elementor-element-8c4532a blockquote{font-family:"Space Grotesk", Sans-serif;font-size:31px;line-height:40px;letter-spacing:0px;word-spacing:0px;color:#000000;border-style:none;padding:0px 0px 0px 0px;}.elementor-4624 .elementor-element.elementor-element-1a7b8cb{--display:flex;}.elementor-4624 .elementor-element.elementor-element-56bb938 blockquote{color:#245AB8;border-style:none;margin:0% 0% 0% -117%;}.elementor-4624 .elementor-element.elementor-element-56bb938 blockquote i{color:#EEF4FF;font-size:71px;margin:151px 0px 0px 0px;}.elementor-4624 .elementor-element.elementor-element-56bb938 blockquote svg{fill:#EEF4FF;}.elementor-4624 .elementor-element.elementor-element-79e0466{--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;}.elementor-4624 .elementor-element.elementor-element-79e0466:not(.elementor-motion-effects-element-type-background), .elementor-4624 .elementor-element.elementor-element-79e0466 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4624 .elementor-element.elementor-element-d9f8eee{width:var( --container-widget-width, 98.826% );max-width:98.826%;--container-widget-width:98.826%;--container-widget-flex-grow:0;text-align:center;}.elementor-4624 .elementor-element.elementor-element-d9f8eee.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4624 .elementor-element.elementor-element-d9f8eee, .elementor-4624 .elementor-element.elementor-element-d9f8eee > .elementor-container,.elementor-4624 .elementor-element.elementor-element-d9f8eee > .elementor-widget-wrap,.elementor-4624 .elementor-element.elementor-element-d9f8eee.e-container,.elementor-4624 .elementor-element.elementor-element-d9f8eee.e-con{-webkit-backdrop-filter:grayscale(0) blur(10px) !important;backdrop-filter:grayscale(0) blur(10px) !important;}.elementor-4624 .elementor-element.elementor-element-d9f8eee .elementor-heading-title{font-family:"Space Grotesk", Sans-serif;font-size:42px;font-weight:400;line-height:63.8px;color:#1D1D1D;}.elementor-4624 .elementor-element.elementor-element-0c95ea4{--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;}.elementor-4624 .elementor-element.elementor-element-0c95ea4:not(.elementor-motion-effects-element-type-background), .elementor-4624 .elementor-element.elementor-element-0c95ea4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4624 .elementor-element.elementor-element-3edef86{width:var( --container-widget-width, 98.764% );max-width:98.764%;--container-widget-width:98.764%;--container-widget-flex-grow:0;text-align:center;font-family:"Space Grotesk", Sans-serif;font-size:17px;font-weight:400;line-height:27.61px;}.elementor-4624 .elementor-element.elementor-element-3edef86.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-4624 .elementor-element.elementor-element-61b6016{--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:2em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-4624 .elementor-element.elementor-element-61b6016:not(.elementor-motion-effects-element-type-background), .elementor-4624 .elementor-element.elementor-element-61b6016 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4624 .elementor-element.elementor-element-27d1ddd{--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;}.elementor-4624 .elementor-element.elementor-element-9a0c6b3{--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;}.elementor-4624 .elementor-element.elementor-element-5fc339c{--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;--margin-top:-3em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;}.elementor-4624 .elementor-element.elementor-element-5fc339c:not(.elementor-motion-effects-element-type-background), .elementor-4624 .elementor-element.elementor-element-5fc339c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4624 .elementor-element.elementor-element-415f670{--display:flex;--flex-direction:row-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-4624 .elementor-element.elementor-element-bb3e1f4{--display:flex;}.elementor-4624 .elementor-element.elementor-element-cdf3086 img{width:100%;max-width:100%;height:408px;object-fit:cover;object-position:center center;border-style:none;border-radius:3px 3px 3px 3px;}.elementor-4624 .elementor-element.elementor-element-0c2012f{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4624 .elementor-element.elementor-element-046e978{--display:flex;--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-4624 .elementor-element.elementor-element-7c61d6e{--display:flex;}.elementor-4624 .elementor-element.elementor-element-28b90d5 .elementor-heading-title{font-family:"Space Grotesk", Sans-serif;font-size:50px;font-weight:400;letter-spacing:0px;color:#000000;}.elementor-4624 .elementor-element.elementor-element-ec8e1e7{--display:flex;}.elementor-4624 .elementor-element.elementor-element-e94e505{font-family:"Mulish", Sans-serif;font-size:19px;font-weight:500;line-height:22px;letter-spacing:0px;}@media(min-width:768px){.elementor-4624 .elementor-element.elementor-element-d1b131d{--width:73%;}.elementor-4624 .elementor-element.elementor-element-78dda49{--width:100.66%;}.elementor-4624 .elementor-element.elementor-element-05c133e{--width:85%;}.elementor-4624 .elementor-element.elementor-element-dc2ab05{--width:50%;}.elementor-4624 .elementor-element.elementor-element-5004a9c{--width:50%;}.elementor-4624 .elementor-element.elementor-element-f4d1f28{--width:101.818%;}.elementor-4624 .elementor-element.elementor-element-1bdf30c{--width:50%;}.elementor-4624 .elementor-element.elementor-element-1e7891b{--width:101.818%;}.elementor-4624 .elementor-element.elementor-element-3016104{--width:33.33%;}.elementor-4624 .elementor-element.elementor-element-9ebc741{--width:33.33%;}.elementor-4624 .elementor-element.elementor-element-b13fac0{--width:33.33%;}.elementor-4624 .elementor-element.elementor-element-bb3e1f4{--width:50%;}.elementor-4624 .elementor-element.elementor-element-0c2012f{--width:50%;}}@media(max-width:767px){.elementor-4624 .elementor-element.elementor-element-0564034{--flex-direction:column-reverse;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4624 .elementor-element.elementor-element-d1b131d{--min-height:151px;--margin-top:-1em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--z-index:1;}.elementor-4624 .elementor-element.elementor-element-a7468bb .elementor-heading-title{font-size:31px;line-height:1.2em;}.elementor-4624 .elementor-element.elementor-element-6c17fff > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0em 0em 0em 0em;}.elementor-4624 .elementor-element.elementor-element-32efc34 .elementor-heading-title{font-size:28px;}.elementor-4624 .elementor-element.elementor-element-1f38989{font-size:16px;}.elementor-4624 .elementor-element.elementor-element-303a6c7 .elementor-heading-title{font-size:28px;}.elementor-4624 .elementor-element.elementor-element-4127a2c{font-size:16px;}.elementor-4624 .elementor-element.elementor-element-8c4532a blockquote{font-size:21px;line-height:1.4em;letter-spacing:-0.5px;}.elementor-4624 .elementor-element.elementor-element-d9f8eee .elementor-heading-title{font-size:27px;line-height:1.2em;}.elementor-4624 .elementor-element.elementor-element-3edef86{line-height:1.3em;}.elementor-4624 .elementor-element.elementor-element-cdf3086 img{height:150px;object-fit:cover;}.elementor-4624 .elementor-element.elementor-element-28b90d5 .elementor-heading-title{font-size:30px;}.elementor-4624 .elementor-element.elementor-element-e94e505{font-size:17px;letter-spacing:0px;}}/* Start custom CSS for html, class: .elementor-element-10764e3 *//* CSS code */
.new-card {
width: 100%;
max-width: 680px;
height: 680px;
overflow: hidden;
position: relative;
transition: all 0.5s;
border: 1px solid black;
border-radius: 15px;
}
.bubble {
position: absolute;
top: 15px;
left: -55%;
background-color: white; /* Sample color, change as per need */
padding: 10px 15px;
border-radius: 23px; /* half of the height to make it round */
height: 40px;
width: 40%;
z-index: 2;
border: none;
cursor: pointer;
}
.m-card-1 .bubble-text {
color: #469B4B;
}
.m-card-2 .bubble-text {
color: #469B4B;
}
.m-card-3 .bubble-text {
color: #469B4B;
}
.image-section {
height: 40%;
width: 100%;
}
.image-section img {
height: 100%;
width: 100%;
/*object-fit: cover;*/
}
.content-section {
height: 60%;
background-color: white;
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
box-sizing: border-box;
transition: all 0.5s;
}
.content-title {
font-family: Space Grotesk;
color: black;
font-size: 40px;
font-weight: 400;
margin-bottom: 0.5em;
transition: all 0.5s;
}
.content-description {
font-family: Mulish;
font-size: 16px;
color: black;
height: 200px;
transition: all 0.5s;
overflow: hidden;
line-height: normal;
text-transform: capitalize;
text-overflow: ellipsis;
}
.content-button {
color: white;
font-family: Mulish;
font-weight: 600;
border: none;
padding: 7px 20px 7px 20px;
border-radius: 50px;
width: 169px;
transition: all 0.5s;
position: relative;
text-align: left;
overflow: hidden;
line-height:22px;
}
.m-card-1 .content-button{
background-color: #469B4B;
}
.m-card-2 .content-button{
background-color: #339799;
}
.m-card-3 .content-button{
background-color: #ED6A5A;
}
.arrow {
position: absolute;
right: 20px;
transition: all 0.5s;
}
.content-button:hover {
width: 253px; /* 50% more width on hover */
}
.content-button:hover .arrow {
right: 50px;
}
.m-card-1:hover .content-section {
background-color: #469B4B;
}
.m-card-2:hover .content-section {
background-color: #339799;
}
.m-card-3:hover .content-section {
background-color: #ED6A5A;
}
.new-card:hover .content-title,
.new-card:hover .content-description {
color: white;
}
.new-card:hover .content-button {
background-color: white;
color: black;
}
.content-button:hover {
width: 150%; /* 50% more width on hover */
}
/* Mobile Styles */
@media screen and (max-width: 768px) {
.card {
height: auto;
border: 1px solid black;
border-radius: 25px;
}
/* Adjust image and content dimensions */
.card-image, .card-content {
height: auto;
}
/* Make image take full width */
.card-image img {
width: 100%;
}
/* Set bubble/button */
.card-bubble {
position: absolute;
top: 10px;
left: 10px;
background-color: #7FD8BE; /* Sample color, change as per need */
color: white;
padding: 10px 15px;
border-radius: 50px;
width: auto;
height: 46px;
}
/* Adjust content box */
.card-content {
background-color: #7FD8BE; /* Sample color, change as per need */
padding: 20px;
color: white;
}
/* Content heading */
.content-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 30px;
margin-bottom: 1em;
}
/* Content description */
.content-description {
font-family: 'Mulish', sans-serif;
font-size: 14px;
/*height: 150px; */
overflow: hidden;
}
/* Learn more button */
.content-button {
text-align:center;
color: black;
background-color: white;
border: none;
line-height:0px;
/*padding: 10px 20px;*/
border-radius: 50px;
width: 169px;
/*height: 37px;*/
}
.content-button:hover {
width: 110%; /* 50% more width on hover */
}
/* Arrow position */
.arrow {
position: absolute;
right: 20px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-54b493e *//* CSS code */
.new-card {
width: 100%;
max-width: 680px;
height: 680px;
overflow: hidden;
position: relative;
transition: all 0.5s;
border: 1px solid black;
border-radius: 15px;
}
.bubble {
position: absolute;
top: 15px;
left: -55%;
background-color: white; /* Sample color, change as per need */
padding: 10px 15px;
border-radius: 23px; /* half of the height to make it round */
height: 40px;
width: 40%;
z-index: 2;
border: none;
cursor: pointer;
}
.m-card-1 .bubble-text {
color: #469B4B;
}
.m-card-2 .bubble-text {
color: #469B4B;
}
.m-card-3 .bubble-text {
color: #469B4B;
}
.image-section {
height: 40%;
width: 100%;
}
.image-section img {
height: 100%;
width: 100%;
/*object-fit: cover;*/
}
.content-section {
height: 60%;
background-color: white;
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
box-sizing: border-box;
transition: all 0.5s;
}
.content-title {
font-family: Space Grotesk;
color: black;
font-size: 40px;
font-weight: 400;
margin-bottom: 0.5em;
transition: all 0.5s;
}
.content-description {
font-family: Mulish;
font-size: 16px;
color: black;
height: 200px;
transition: all 0.5s;
overflow: hidden;
line-height: normal;
text-transform: capitalize;
text-overflow: ellipsis;
}
.content-button {
color: white;
font-family: Mulish;
font-weight: 600;
border: none;
padding: 7px 20px 7px 20px;
border-radius: 50px;
width: 169px;
transition: all 0.5s;
position: relative;
text-align: left;
overflow: hidden;
}
.m-card-1 .content-button{
background-color: #469B4B;
}
.m-card-2 .content-button{
background-color: #339799;
}
.m-card-3 .content-button{
background-color: #ED6A5A;
}
.arrow {
position: absolute;
right: 20px;
transition: all 0.5s;
}
.content-button:hover {
width: 253px; /* 50% more width on hover */
}
.content-button:hover .arrow {
right: 50px;
}
.m-card-1:hover .content-section {
background-color: #469B4B;
}
.m-card-2:hover .content-section {
background-color: #339799;
}
.m-card-3:hover .content-section {
background-color: #ED6A5A;
}
.new-card:hover .content-title,
.new-card:hover .content-description {
color: white;
}
.new-card:hover .content-button {
background-color: white;
color: black;
}
.content-button:hover {
width: 253px; /* 50% more width on hover */
}
/* Media Queries */
@media screen and (max-width: 768px) { /* for tablet screens */
.new-card {
max-width: 100%;
height: auto;
}
.content-title {
font-size: 30px;
}
.content-description {
font-size: 16px;
height: auto;
}
.content-button {
width: 150px;
height: 30px;
}
}
@media screen and (max-width: 480px) { /* for mobile screens */
.new-card {
max-width: 100%;
height: auto;
}
.content-title {
font-size: 24px;
}
.content-description {
font-size: 14px;
height: auto;
}
.content-button {
width: 130px;
height: 30px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1022642 *//* CSS code */
.new-card {
width: 100%;
max-width: 680px;
height: 680px;
overflow: hidden;
position: relative;
transition: all 0.5s;
border: 1px solid black;
border-radius: 15px;
}
.bubble {
position: absolute;
top: 15px;
left: -55%;
background-color: white; /* Sample color, change as per need */
padding: 10px 15px;
border-radius: 23px; /* half of the height to make it round */
height: 40px;
width: 40%;
z-index: 2;
border: none;
cursor: pointer;
}
.m-card-1 .bubble-text {
color: #469B4B;
}
.m-card-2 .bubble-text {
color: #469B4B;
}
.m-card-3 .bubble-text {
color: #469B4B;
}
.image-section {
height: 40%;
width: 100%;
}
.image-section img {
height: 100%;
width: 100%;
/*object-fit: cover;*/
}
.content-section {
height: 60%;
background-color: white;
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
box-sizing: border-box;
transition: all 0.5s;
}
.content-title {
font-family: Space Grotesk;
color: black;
font-size: 40px;
font-weight: 400;
margin-bottom: 0.5em;
transition: all 0.5s;
}
.content-description {
font-family: Mulish;
font-size: 16px;
color: black;
height: 200px;
transition: all 0.5s;
overflow: hidden;
line-height: normal;
text-transform: capitalize;
text-overflow: ellipsis;
}
.content-button {
color: white;
font-family: Mulish;
font-weight: 600;
border: none;
padding: 7px 20px 7px 20px;
border-radius: 50px;
width: 169px;
transition: all 0.5s;
position: relative;
text-align: left;
overflow: hidden;
}
.m-card-1 .content-button{
background-color: #469B4B;
}
.m-card-2 .content-button{
background-color: #339799;
}
.m-card-3 .content-button{
background-color: #ED6A5A;
}
.arrow {
position: absolute;
right: 20px;
transition: all 0.5s;
}
.content-button:hover {
width: 253px; /* 50% more width on hover */
}
.content-button:hover .arrow {
right: 50px;
}
.m-card-1:hover .content-section {
background-color: #469B4B;
}
.m-card-2:hover .content-section {
background-color: #339799;
}
.m-card-3:hover .content-section {
background-color: #ED6A5A;
}
.new-card:hover .content-title,
.new-card:hover .content-description {
color: white;
}
.new-card:hover .content-button {
background-color: white;
color: black;
}
.content-button:hover {
width: 253px; /* 50% more width on hover */
}
/* Media Queries */
@media screen and (max-width: 768px) { /* for tablet screens */
.new-card {
max-width: 100%;
height: auto;
}
.content-title {
font-size: 30px;
}
.content-description {
font-size: 16px;
height: auto;
}
.content-button {
width: 150px;
height: 30px;
}
}
@media screen and (max-width: 480px) { /* for mobile screens */
.new-card {
max-width: 100%;
height: auto;
}
.content-title {
font-size: 24px;
}
.content-description {
font-size: 14px;
height: auto;
}
.content-button {
width: 130px;
height: 30px;
}
}/* End custom CSS */