.elementor-2285 .elementor-element.elementor-element-0d256df > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-2285 .elementor-element.elementor-element-5e08612 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-2285 .elementor-element.elementor-element-0166be7 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-2285 .elementor-element.elementor-element-48a3789 .ube-gallery-item{padding:calc(5px/2);}.elementor-2285 .elementor-element.elementor-element-48a3789 .row{margin-left:calc(0px - 5px/2);margin-right:calc(0px - 5px/2);}.elementor-2285 .elementor-element.elementor-element-48a3789 .ube-gallery-masonry .card-img{border-radius:12px 12px 12px 12px;}.elementor-2285 .elementor-element.elementor-element-48a3789 .ube-gallery-masonry .card-img-overlay{border-radius:12px 12px 12px 12px;}.elementor-2285 .elementor-element.elementor-element-1311b0e > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-2285 .elementor-element.elementor-element-0d393b1 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-2285 .elementor-element.elementor-element-c144130 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-2285 .elementor-element.elementor-element-4fee516 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-2285 .elementor-element.elementor-element-3a540ab > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-2285 .elementor-element.elementor-element-4945b2e > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-537be50 *//*==================================
Sun Shade Hero Section
==================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

.sunshade-hero{

position:relative;
overflow:hidden;

padding:120px 20px;

background:
linear-gradient(135deg,#fafafa,#f4f6f9);

}

.sunshade-hero::before{

content:"";

position:absolute;

width:420px;
height:420px;

background:#E2231A;

opacity:.06;

border-radius:50%;

top:-180px;
right:-180px;

}

.sunshade-hero::after{

content:"";

position:absolute;

width:320px;
height:320px;

border:28px solid #111;

opacity:.05;

border-radius:50%;

bottom:-160px;
left:-160px;

}

.hero-wrapper{

position:relative;
z-index:2;

max-width:900px;

margin:auto;

text-align:center;

}

.hero-badge{

display:inline-block;

padding:12px 24px;

background:#E2231A;

color:#fff;

font-size:14px;

font-weight:600;

border-radius:40px;

margin-bottom:28px;

letter-spacing:.5px;

}

.hero-wrapper h1{

font-size:56px;

line-height:1.15;

font-weight:700;

color:#111;

margin-bottom:30px;

}

.hero-text{

font-size:18px;

line-height:1.9;

color:#555;

margin-bottom:22px;

text-align:justify;

}

.hero-btns{

display:flex;

justify-content:center;

gap:18px;

margin-top:45px;

flex-wrap:wrap;

}

.btn-primary{

display:inline-block;

padding:17px 34px;

background:#E2231A;

color:#fff;

text-decoration:none;

font-weight:600;

border-radius:50px;

transition:.35s;

}

.btn-primary:hover{

background:#111;

}

.btn-outline{

display:inline-block;

padding:17px 34px;

border:2px solid #E2231A;

color:#E2231A;

text-decoration:none;

font-weight:600;

border-radius:50px;

transition:.35s;

}

.btn-outline:hover{

background:#E2231A;

color:#fff;

}

/*====================
Large Tablet
====================*/

@media(max-width:1024px){

.hero-wrapper h1{

font-size:46px;

}

.hero-text{

font-size:17px;

}

}

/*====================
Tablet
====================*/

@media(max-width:768px){

.sunshade-hero{

padding:90px 20px;

}

.hero-wrapper h1{

font-size:36px;

}

.hero-text{

text-align:center;

font-size:16px;

line-height:1.8;

}

.hero-btns{

flex-direction:column;

align-items:center;

}

.hero-btns a{

width:280px;

text-align:center;

}

}

/*====================
Mobile
====================*/

@media(max-width:480px){

.sunshade-hero{

padding:70px 15px;

}

.hero-badge{

font-size:12px;

padding:10px 18px;

}

.hero-wrapper h1{

font-size:28px;

line-height:1.3;

}

.hero-text{

font-size:15px;

line-height:1.8;

}

.hero-btns a{

width:100%;

padding:15px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-109d497 *//*===================================
About Section
====================================*/

.umbrella-about{

padding:120px 20px;

background:#0c0c0c;

overflow:hidden;

}

.about-container{

max-width:1200px;

margin:auto;

position:relative;

display:flex;

align-items:center;

justify-content:center;

}

.about-red{

width:380px;

height:520px;

background:#E2231A;

border-radius:30px;

padding:50px;

color:#fff;

display:flex;

flex-direction:column;

justify-content:center;

box-shadow:0 25px 60px rgba(226,35,26,.35);

}

.about-red span{

letter-spacing:5px;

font-size:14px;

font-weight:600;

margin-bottom:25px;

}

.about-red h2{

font-size:48px;

line-height:1.2;

font-weight:700;

}

.about-card{

background:#fff;

width:760px;

margin-left:-90px;

padding:60px;

border-radius:25px;

box-shadow:0 30px 80px rgba(0,0,0,.25);

position:relative;

z-index:5;

}

.about-card h3{

font-size:34px;

margin-bottom:25px;

color:#111;

}

.about-card p{

font-size:17px;

line-height:1.9;

color:#555;

margin-bottom:22px;

text-align:justify;

}

.about-card strong{

color:#111;

}

.about-features{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:30px;

}

.about-features span{

background:#111;

color:#fff;

padding:14px 22px;

border-radius:40px;

font-size:15px;

transition:.35s;

}

.about-features span:hover{

background:#E2231A;

transform:translateY(-6px);

}

/*====================
Tablet
====================*/

@media(max-width:991px){

.about-container{

flex-direction:column;

}

.about-red{

width:100%;

height:auto;

padding:40px;

border-radius:25px 25px 0 0;

text-align:center;

}

.about-red h2{

font-size:38px;

}

.about-card{

width:100%;

margin-left:0;

margin-top:-20px;

padding:40px;

border-radius:0 0 25px 25px;

}

}

/*====================
Mobile
====================*/

@media(max-width:576px){

.umbrella-about{

padding:70px 15px;

}

.about-red{

padding:30px;

}

.about-red h2{

font-size:28px;

}

.about-card{

padding:25px;

}

.about-card h3{

font-size:24px;

}

.about-card p{

font-size:15px;

text-align:left;

}

.about-features{

flex-direction:column;

}

.about-features span{

text-align:center;

width:100%;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1b72086 */.umbrella-features{

padding:120px 20px;

background:linear-gradient(135deg,#101010,#1b1b1b);

overflow:hidden;

}

.section-title{

text-align:center;
margin-bottom:80px;

}

.section-title span{

display:inline-block;

padding:10px 24px;

background:#E2231A;

color:#fff;

border-radius:30px;

margin-bottom:20px;

}

.section-title h2{

color:#fff;

font-size:42px;

}

.orbit{

position:relative;

width:700px;
height:700px;

margin:auto;

}

.center-circle{

position:absolute;

left:50%;
top:50%;

transform:translate(-50%,-50%);

width:220px;
height:220px;

border-radius:50%;

background:#E2231A;

display:flex;

justify-content:center;
align-items:center;

text-align:center;

color:#fff;

font-size:28px;

font-weight:700;

box-shadow:0 0 40px rgba(226,35,26,.45);

}

.feature{

position:absolute;

width:190px;

padding:15px;

background:#fff;

border-radius:50px;

text-align:center;

font-weight:600;

font-size:15px;

transition:.35s;

}

.feature:hover{

background:#E2231A;

color:#fff;

transform:scale(1.08);

}

.f1{top:0;left:255px;}
.f2{top:80px;right:0;}
.f3{top:250px;right:-40px;}
.f4{bottom:80px;right:0;}
.f5{bottom:0;left:255px;}
.f6{bottom:80px;left:0;}
.f7{top:250px;left:-40px;}
.f8{top:80px;left:0;}
.f9{top:160px;left:80px;}
.f10{bottom:160px;right:80px;}

@media(max-width:991px){

.orbit{

width:100%;
height:auto;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.center-circle,
.feature{

position:static;

transform:none;

width:100%;

}

.center-circle{

height:180px;

grid-column:1/3;

border-radius:20px;

}

}

@media(max-width:576px){

.orbit{

grid-template-columns:1fr;

}

.center-circle{

grid-column:auto;

}

.section-title h2{

font-size:30px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8f40839 *//*====================================
Benefits Section
====================================*/

.sun-benefits{

padding:110px 20px;

background:#ffffff;

}

.sun-benefits .container{

max-width:1200px;

margin:auto;

}

.benefits-heading{

text-align:center;

margin-bottom:70px;

}

.benefits-heading span{

display:inline-block;

background:#E2231A;

color:#fff;

padding:10px 22px;

border-radius:40px;

font-size:14px;

margin-bottom:18px;

}

.benefits-heading h2{

font-size:42px;

color:#111;

}

.benefits-list{

display:flex;

flex-direction:column;

gap:22px;

}

.benefit{

max-width:620px;

padding:22px 30px;

font-size:18px;

font-weight:600;

border-radius:60px;

transition:.35s;

box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.left{

background:#111;

color:#fff;

margin-right:auto;

border-left:8px solid #E2231A;

}

.right{

background:#F5F7FA;

color:#111;

margin-left:auto;

border-right:8px solid #E2231A;

}

.benefit:hover{

transform:scale(1.03);

background:#E2231A;

color:#fff;

}

/* Tablet */

@media(max-width:991px){

.benefit{

max-width:100%;

margin:0!important;

}

.benefits-heading h2{

font-size:34px;

}

}

/* Mobile */

@media(max-width:576px){

.sun-benefits{

padding:70px 15px;

}

.benefits-heading h2{

font-size:28px;

}

.benefit{

font-size:16px;

padding:18px 20px;

border-radius:18px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5d1003d *//*==================================
Applications Section
==================================*/

.umbrella-applications{

padding:110px 20px;

background:#111111;

}

.umbrella-applications .container{

max-width:1200px;

margin:auto;

}

.app-heading{

text-align:center;

margin-bottom:70px;

}

.app-heading span{

display:inline-block;

padding:10px 24px;

background:#E2231A;

color:#fff;

border-radius:30px;

font-size:14px;

margin-bottom:18px;

}

.app-heading h2{

font-size:42px;

color:#fff;

}

.app-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}

.app-item{

background:#1d1d1d;

color:#fff;

padding:30px 25px;

border-radius:18px;

font-size:18px;

font-weight:600;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

min-height:120px;

}

.app-item.large{

min-height:180px;

background:#E2231A;

}

.app-item:hover{

transform:translateY(-8px);

background:#ffffff;

color:#111;

}

/* Tablet */

@media(max-width:991px){

.app-grid{

grid-template-columns:repeat(2,1fr);

}

.app-heading h2{

font-size:34px;

}

}

/* Mobile */

@media(max-width:576px){

.umbrella-applications{

padding:70px 15px;

}

.app-grid{

grid-template-columns:1fr;

}

.app-heading h2{

font-size:28px;

}

.app-item,

.app-item.large{

min-height:100px;

font-size:16px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-96c098e *//*==================================
Why Choose Us
==================================*/

.why-umbrella{

padding:110px 20px;

background:#F5F7FA;

}

.why-umbrella .container{

max-width:1200px;
margin:auto;

}

.why-header{

max-width:850px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.why-header span{

display:inline-block;

padding:10px 24px;

background:#111;

color:#fff;

border-radius:30px;

font-size:14px;

margin-bottom:20px;

}

.why-header h2{

font-size:42px;

color:#111;

margin-bottom:20px;

}

.why-header p{

font-size:17px;

line-height:1.9;

color:#555;

}

.why-timeline{

display:flex;

flex-direction:column;

gap:18px;

}

.timeline-item{

display:grid;

grid-template-columns:90px 1fr;

align-items:center;

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.35s;

}

.number{

background:#E2231A;

color:#fff;

font-size:24px;

font-weight:700;

display:flex;

justify-content:center;

align-items:center;

height:100%;

min-height:80px;

}

.content{

padding:24px 30px;

font-size:18px;

font-weight:600;

color:#222;

}

.timeline-item:hover{

transform:translateX(10px);

box-shadow:0 18px 35px rgba(0,0,0,.12);

}

.timeline-item:hover .number{

background:#111;

}

/* Tablet */

@media(max-width:768px){

.why-header h2{

font-size:34px;

}

.timeline-item{

grid-template-columns:70px 1fr;

}

.content{

font-size:16px;

padding:20px;

}

.number{

font-size:20px;

min-height:70px;

}

}

/* Mobile */

@media(max-width:576px){

.why-umbrella{

padding:70px 15px;

}

.why-header h2{

font-size:28px;

}

.why-header p{

font-size:15px;

}

.timeline-item{

grid-template-columns:60px 1fr;

}

.number{

font-size:18px;

}

.content{

font-size:15px;

padding:18px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0511bd1 *//*=================================
CTA Section
==================================*/

.umbrella-cta{

padding:120px 20px;

background:linear-gradient(135deg,#111111 50%,#E2231A 50%);

}

.cta-wrapper{

max-width:1200px;

margin:auto;

display:flex;

justify-content:center;

}

.cta-card{

max-width:900px;

background:#ffffff;

padding:60px;

border-radius:25px;

text-align:center;

box-shadow:0 30px 60px rgba(0,0,0,.18);

position:relative;

overflow:hidden;

}

.cta-card::before{

content:"";

position:absolute;

width:180px;

height:180px;

background:rgba(226,35,26,.08);

border-radius:50%;

top:-70px;

right:-70px;

}

.cta-card span{

display:inline-block;

padding:10px 22px;

background:#111;

color:#fff;

border-radius:30px;

font-size:14px;

margin-bottom:20px;

font-weight:600;

}

.cta-card h2{

font-size:42px;

margin-bottom:20px;

color:#111;

}

.cta-card p{

font-size:17px;

line-height:1.9;

color:#555;

max-width:760px;

margin:auto auto 35px;

}

.cta-btn{

display:inline-block;

padding:18px 40px;

background:#E2231A;

color:#fff;

text-decoration:none;

font-weight:700;

border-radius:50px;

transition:.35s;

}

.cta-btn:hover{

background:#111;

transform:translateY(-5px);

}

/* Tablet */

@media(max-width:991px){

.umbrella-cta{

background:#111;

}

.cta-card{

padding:45px;

}

.cta-card h2{

font-size:34px;

}

}

/* Mobile */

@media(max-width:576px){

.umbrella-cta{

padding:70px 15px;

}

.cta-card{

padding:30px 22px;

}

.cta-card h2{

font-size:28px;

}

.cta-card p{

font-size:15px;

line-height:1.8;

}

.cta-btn{

width:100%;

text-align:center;

padding:16px;

}

}/* End custom CSS */