.elementor-2817 .elementor-element.elementor-element-0789635{--display:grid;--min-height:500px;--e-con-grid-template-columns:repeat(5, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:20px 20px;--row-gap:20px;--column-gap:20px;--grid-auto-flow:row;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2817 .elementor-element.elementor-element-dcc5890{--display:flex;--min-height:499px;--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:flex-end;--overflow:hidden;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2817 .elementor-element.elementor-element-dcc5890:not(.elementor-motion-effects-element-type-background), .elementor-2817 .elementor-element.elementor-element-dcc5890 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://thesocialoutlook.com.au/wp-content/uploads/2026/04/Screenshot_1-e1775858343924.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2817 .elementor-element.elementor-element-7131c8d{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:0px 0px 20px 20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2817 .elementor-element.elementor-element-7131c8d:not(.elementor-motion-effects-element-type-background), .elementor-2817 .elementor-element.elementor-element-7131c8d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#161212BA;}.elementor-2817 .elementor-element.elementor-element-e2e1a7c{--display:flex;--min-height:499px;--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:flex-end;--overflow:hidden;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2817 .elementor-element.elementor-element-e2e1a7c:not(.elementor-motion-effects-element-type-background), .elementor-2817 .elementor-element.elementor-element-e2e1a7c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://thesocialoutlook.com.au/wp-content/uploads/2026/04/Photo-for-homepage-7.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2817 .elementor-element.elementor-element-89317d7{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:0px 0px 20px 20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2817 .elementor-element.elementor-element-89317d7:not(.elementor-motion-effects-element-type-background), .elementor-2817 .elementor-element.elementor-element-89317d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#161212BA;}.elementor-2817 .elementor-element.elementor-element-c82b184{--display:flex;--min-height:499px;--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:flex-end;--overflow:hidden;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2817 .elementor-element.elementor-element-c82b184:not(.elementor-motion-effects-element-type-background), .elementor-2817 .elementor-element.elementor-element-c82b184 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://thesocialoutlook.com.au/wp-content/uploads/2026/04/Photo-for-homepage-11.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2817 .elementor-element.elementor-element-10f8ff0{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:0px 0px 20px 20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2817 .elementor-element.elementor-element-10f8ff0:not(.elementor-motion-effects-element-type-background), .elementor-2817 .elementor-element.elementor-element-10f8ff0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#161212BA;}.elementor-2817 .elementor-element.elementor-element-5307b3d{--display:flex;--min-height:499px;--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:flex-end;--overflow:hidden;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2817 .elementor-element.elementor-element-5307b3d:not(.elementor-motion-effects-element-type-background), .elementor-2817 .elementor-element.elementor-element-5307b3d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://thesocialoutlook.com.au/wp-content/uploads/2026/04/Photo-for-homepage-15.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2817 .elementor-element.elementor-element-8b660e1{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:0px 0px 20px 20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2817 .elementor-element.elementor-element-8b660e1:not(.elementor-motion-effects-element-type-background), .elementor-2817 .elementor-element.elementor-element-8b660e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#161212BA;}.elementor-2817 .elementor-element.elementor-element-079d9e7{--display:flex;--min-height:499px;--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:flex-end;--overflow:hidden;--border-radius:20px 20px 20px 20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2817 .elementor-element.elementor-element-079d9e7:not(.elementor-motion-effects-element-type-background), .elementor-2817 .elementor-element.elementor-element-079d9e7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://thesocialoutlook.com.au/wp-content/uploads/2026/04/Photo-for-homepage-9.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2817 .elementor-element.elementor-element-2be0338{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:0px 0px 20px 20px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-2817 .elementor-element.elementor-element-2be0338:not(.elementor-motion-effects-element-type-background), .elementor-2817 .elementor-element.elementor-element-2be0338 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#161212BA;}@media(min-width:768px){.elementor-2817 .elementor-element.elementor-element-0789635{--content-width:100%;}}@media(max-width:1024px){.elementor-2817 .elementor-element.elementor-element-0789635{--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(3, 1fr);--grid-auto-flow:row;}}@media(max-width:767px){.elementor-2817 .elementor-element.elementor-element-0789635{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2817 .elementor-element.elementor-element-dcc5890{--min-height:600px;}.elementor-2817 .elementor-element.elementor-element-e2e1a7c{--min-height:600px;}.elementor-2817 .elementor-element.elementor-element-c82b184{--min-height:600px;}.elementor-2817 .elementor-element.elementor-element-5307b3d{--min-height:600px;}.elementor-2817 .elementor-element.elementor-element-079d9e7{--min-height:600px;}}/* Start custom CSS for container, class: .elementor-element-dcc5890 *//* ১. মেইন বক্স বা প্যারেন্ট বক্সের সেটিং */
.elementor-2817 .elementor-element.elementor-element-dcc5890.service-item {
    overflow: hidden; /* জুম হওয়ার সময় ইমেজ যেন বক্সের বাইরে চলে না যায় */
}

/* ২. ইমেজের নরমাল অবস্থা */
.elementor-2817 .elementor-element.elementor-element-dcc5890.service-item img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* স্মুথ ট্রানজিশন */
}

/* ৩. প্যারেন্ট বক্সে মাউস নিলে ইমেজের জুম ইফেক্ট */
.elementor-2817 .elementor-element.elementor-element-dcc5890.service-item:hover img {
    transform: scale(1.1); /* ইমেজের সাইজ ১০% বড় হবে */
}

/* ৪. আপনার বর্তমান কোডটিও নিচে দেওয়া হলো যেন দুটো একসাথে কাজ করে */
.elementor-2817 .elementor-element.elementor-element-dcc5890.service-item .hover-content {
    transform: translateY(40%);
    transition: all .4s ease;
    opacity: 0;
    visibility: hidden;
}

.elementor-2817 .elementor-element.elementor-element-dcc5890.service-item:hover .hover-content {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* কন্টেইনারের সেটিংস */
.elementor-2817 .elementor-element.elementor-element-dcc5890.service-item {
    position: relative;
    overflow: hidden !important;
    z-index: 1;
}

/* কন্টেইনারের ব্যাকগ্রাউন্ড জুম ইফেক্ট */
.elementor-2817 .elementor-element.elementor-element-dcc5890.service-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* নিচের লাইনে আপনার ইমেজের লিংকটি দিতে পারেন অথবা এলিমেন্টর থেকে ব্যাকগ্রাউন্ড ইমেজ থাকলে সেটি ইনহেরিট করবে */
    background-image: inherit; 
    background-size: cover;
    background-position: center center;
    transition: transform 0.8s ease-in-out;
    z-index: -1; /* কন্টেন্টের নিচে থাকবে */
    pointer-events: none; /* ক্লিকের ক্ষেত্রে কোনো বাধা দিবে না */
}

/* হোভার করলে ইমেজ বড় হবে */
.elementor-2817 .elementor-element.elementor-element-dcc5890.service-item:hover::before {
    transform: scale(1.15);
}

/* কন্টেন্টের পজিশনিং ঠিক রাখার জন্য */
.elementor-2817 .elementor-element.elementor-element-dcc5890.service-item > .e-con-inner,
.elementor-2817 .elementor-element.elementor-element-dcc5890.service-item > .elementor-widget-wrap {
    position: relative;
    z-index: 2;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e2e1a7c *//* ১. মেইন বক্স বা প্যারেন্ট বক্সের সেটিং */
.elementor-2817 .elementor-element.elementor-element-e2e1a7c.service-item {
    overflow: hidden; /* জুম হওয়ার সময় ইমেজ যেন বক্সের বাইরে চলে না যায় */
}

/* ২. ইমেজের নরমাল অবস্থা */
.elementor-2817 .elementor-element.elementor-element-e2e1a7c.service-item img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* স্মুথ ট্রানজিশন */
}

/* ৩. প্যারেন্ট বক্সে মাউস নিলে ইমেজের জুম ইফেক্ট */
.elementor-2817 .elementor-element.elementor-element-e2e1a7c.service-item:hover img {
    transform: scale(1.1); /* ইমেজের সাইজ ১০% বড় হবে */
}

/* ৪. আপনার বর্তমান কোডটিও নিচে দেওয়া হলো যেন দুটো একসাথে কাজ করে */
.elementor-2817 .elementor-element.elementor-element-e2e1a7c.service-item .hover-content {
    transform: translateY(40%);
    transition: all .4s ease;
    opacity: 0;
    visibility: hidden;
}

.elementor-2817 .elementor-element.elementor-element-e2e1a7c.service-item:hover .hover-content {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* কন্টেইনারের সেটিংস */
.elementor-2817 .elementor-element.elementor-element-e2e1a7c.service-item {
    position: relative;
    overflow: hidden !important;
    z-index: 1;
}

/* কন্টেইনারের ব্যাকগ্রাউন্ড জুম ইফেক্ট */
.elementor-2817 .elementor-element.elementor-element-e2e1a7c.service-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* নিচের লাইনে আপনার ইমেজের লিংকটি দিতে পারেন অথবা এলিমেন্টর থেকে ব্যাকগ্রাউন্ড ইমেজ থাকলে সেটি ইনহেরিট করবে */
    background-image: inherit; 
    background-size: cover;
    background-position: center center;
    transition: transform 0.8s ease-in-out;
    z-index: -1; /* কন্টেন্টের নিচে থাকবে */
    pointer-events: none; /* ক্লিকের ক্ষেত্রে কোনো বাধা দিবে না */
}

/* হোভার করলে ইমেজ বড় হবে */
.elementor-2817 .elementor-element.elementor-element-e2e1a7c.service-item:hover::before {
    transform: scale(1.15);
}

/* কন্টেন্টের পজিশনিং ঠিক রাখার জন্য */
.elementor-2817 .elementor-element.elementor-element-e2e1a7c.service-item > .e-con-inner,
.elementor-2817 .elementor-element.elementor-element-e2e1a7c.service-item > .elementor-widget-wrap {
    position: relative;
    z-index: 2;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c82b184 *//* ১. মেইন বক্স বা প্যারেন্ট বক্সের সেটিং */
.elementor-2817 .elementor-element.elementor-element-c82b184.service-item {
    overflow: hidden; /* জুম হওয়ার সময় ইমেজ যেন বক্সের বাইরে চলে না যায় */
}

/* ২. ইমেজের নরমাল অবস্থা */
.elementor-2817 .elementor-element.elementor-element-c82b184.service-item img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* স্মুথ ট্রানজিশন */
}

/* ৩. প্যারেন্ট বক্সে মাউস নিলে ইমেজের জুম ইফেক্ট */
.elementor-2817 .elementor-element.elementor-element-c82b184.service-item:hover img {
    transform: scale(1.1); /* ইমেজের সাইজ ১০% বড় হবে */
}

/* ৪. আপনার বর্তমান কোডটিও নিচে দেওয়া হলো যেন দুটো একসাথে কাজ করে */
.elementor-2817 .elementor-element.elementor-element-c82b184.service-item .hover-content {
    transform: translateY(40%);
    transition: all .4s ease;
    opacity: 0;
    visibility: hidden;
}

.elementor-2817 .elementor-element.elementor-element-c82b184.service-item:hover .hover-content {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* কন্টেইনারের সেটিংস */
.elementor-2817 .elementor-element.elementor-element-c82b184.service-item {
    position: relative;
    overflow: hidden !important;
    z-index: 1;
}

/* কন্টেইনারের ব্যাকগ্রাউন্ড জুম ইফেক্ট */
.elementor-2817 .elementor-element.elementor-element-c82b184.service-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* নিচের লাইনে আপনার ইমেজের লিংকটি দিতে পারেন অথবা এলিমেন্টর থেকে ব্যাকগ্রাউন্ড ইমেজ থাকলে সেটি ইনহেরিট করবে */
    background-image: inherit; 
    background-size: cover;
    background-position: center center;
    transition: transform 0.8s ease-in-out;
    z-index: -1; /* কন্টেন্টের নিচে থাকবে */
    pointer-events: none; /* ক্লিকের ক্ষেত্রে কোনো বাধা দিবে না */
}

/* হোভার করলে ইমেজ বড় হবে */
.elementor-2817 .elementor-element.elementor-element-c82b184.service-item:hover::before {
    transform: scale(1.15);
}

/* কন্টেন্টের পজিশনিং ঠিক রাখার জন্য */
.elementor-2817 .elementor-element.elementor-element-c82b184.service-item > .e-con-inner,
.elementor-2817 .elementor-element.elementor-element-c82b184.service-item > .elementor-widget-wrap {
    position: relative;
    z-index: 2;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5307b3d *//* ১. মেইন বক্স বা প্যারেন্ট বক্সের সেটিং */
.elementor-2817 .elementor-element.elementor-element-5307b3d.service-item {
    overflow: hidden; /* জুম হওয়ার সময় ইমেজ যেন বক্সের বাইরে চলে না যায় */
}

/* ২. ইমেজের নরমাল অবস্থা */
.elementor-2817 .elementor-element.elementor-element-5307b3d.service-item img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* স্মুথ ট্রানজিশন */
}

/* ৩. প্যারেন্ট বক্সে মাউস নিলে ইমেজের জুম ইফেক্ট */
.elementor-2817 .elementor-element.elementor-element-5307b3d.service-item:hover img {
    transform: scale(1.1); /* ইমেজের সাইজ ১০% বড় হবে */
}

/* ৪. আপনার বর্তমান কোডটিও নিচে দেওয়া হলো যেন দুটো একসাথে কাজ করে */
.elementor-2817 .elementor-element.elementor-element-5307b3d.service-item .hover-content {
    transform: translateY(40%);
    transition: all .4s ease;
    opacity: 0;
    visibility: hidden;
}

.elementor-2817 .elementor-element.elementor-element-5307b3d.service-item:hover .hover-content {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* কন্টেইনারের সেটিংস */
.elementor-2817 .elementor-element.elementor-element-5307b3d.service-item {
    position: relative;
    overflow: hidden !important;
    z-index: 1;
}

/* কন্টেইনারের ব্যাকগ্রাউন্ড জুম ইফেক্ট */
.elementor-2817 .elementor-element.elementor-element-5307b3d.service-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* নিচের লাইনে আপনার ইমেজের লিংকটি দিতে পারেন অথবা এলিমেন্টর থেকে ব্যাকগ্রাউন্ড ইমেজ থাকলে সেটি ইনহেরিট করবে */
    background-image: inherit; 
    background-size: cover;
    background-position: center center;
    transition: transform 0.8s ease-in-out;
    z-index: -1; /* কন্টেন্টের নিচে থাকবে */
    pointer-events: none; /* ক্লিকের ক্ষেত্রে কোনো বাধা দিবে না */
}

/* হোভার করলে ইমেজ বড় হবে */
.elementor-2817 .elementor-element.elementor-element-5307b3d.service-item:hover::before {
    transform: scale(1.15);
}

/* কন্টেন্টের পজিশনিং ঠিক রাখার জন্য */
.elementor-2817 .elementor-element.elementor-element-5307b3d.service-item > .e-con-inner,
.elementor-2817 .elementor-element.elementor-element-5307b3d.service-item > .elementor-widget-wrap {
    position: relative;
    z-index: 2;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-079d9e7 *//* ১. মেইন বক্স বা প্যারেন্ট বক্সের সেটিং */
.elementor-2817 .elementor-element.elementor-element-079d9e7.service-item {
    overflow: hidden; /* জুম হওয়ার সময় ইমেজ যেন বক্সের বাইরে চলে না যায় */
}

/* ২. ইমেজের নরমাল অবস্থা */
.elementor-2817 .elementor-element.elementor-element-079d9e7.service-item img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* স্মুথ ট্রানজিশন */
}

/* ৩. প্যারেন্ট বক্সে মাউস নিলে ইমেজের জুম ইফেক্ট */
.elementor-2817 .elementor-element.elementor-element-079d9e7.service-item:hover img {
    transform: scale(1.1); /* ইমেজের সাইজ ১০% বড় হবে */
}

/* ৪. আপনার বর্তমান কোডটিও নিচে দেওয়া হলো যেন দুটো একসাথে কাজ করে */
.elementor-2817 .elementor-element.elementor-element-079d9e7.service-item .hover-content {
    transform: translateY(40%);
    transition: all .4s ease;
    opacity: 0;
    visibility: hidden;
}

.elementor-2817 .elementor-element.elementor-element-079d9e7.service-item:hover .hover-content {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* কন্টেইনারের সেটিংস */
.elementor-2817 .elementor-element.elementor-element-079d9e7.service-item {
    position: relative;
    overflow: hidden !important;
    z-index: 1;
}

/* কন্টেইনারের ব্যাকগ্রাউন্ড জুম ইফেক্ট */
.elementor-2817 .elementor-element.elementor-element-079d9e7.service-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* নিচের লাইনে আপনার ইমেজের লিংকটি দিতে পারেন অথবা এলিমেন্টর থেকে ব্যাকগ্রাউন্ড ইমেজ থাকলে সেটি ইনহেরিট করবে */
    background-image: inherit; 
    background-size: cover;
    background-position: center center;
    transition: transform 0.8s ease-in-out;
    z-index: -1; /* কন্টেন্টের নিচে থাকবে */
    pointer-events: none; /* ক্লিকের ক্ষেত্রে কোনো বাধা দিবে না */
}

/* হোভার করলে ইমেজ বড় হবে */
.elementor-2817 .elementor-element.elementor-element-079d9e7.service-item:hover::before {
    transform: scale(1.15);
}

/* কন্টেন্টের পজিশনিং ঠিক রাখার জন্য */
.elementor-2817 .elementor-element.elementor-element-079d9e7.service-item > .e-con-inner,
.elementor-2817 .elementor-element.elementor-element-079d9e7.service-item > .elementor-widget-wrap {
    position: relative;
    z-index: 2;
}/* End custom CSS */