* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit'; } 

.ctprofileimg{
    background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 3px, transparent 3px) 0% 0%/8px 8px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 3px, transparent 3px) 100% 0%/8px 8px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 3px, transparent 3px) 0% 100%/8px 8px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 3px, transparent 3px) 100% 100%/8px 8px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 10px) calc(100% - 16px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 16px) calc(100% - 10px) no-repeat,
            linear-gradient(280deg, #2065d8 0%, #1d9905 100%) 63% 13%/153% 181%;
border-radius: 8px;
padding: 9px;
box-sizing: border-box;
    text-align: center !important;
    
}

:root { --green: #1D9905; --blue: #2065D8; } 
html { scroll-behavior: smooth; } 
body { background: linear-gradient(119.36deg, #E0EAFF 14%, #D8FFD3 86%); overflow-x: hidden; padding-top: 150px; } 
img { max-width: 100%}
.blue-btn { background: var(--blue); } 
.green-btn { background: var(--green); } 

.d-flex { display: flex; } 
.a-c { align-items: center; } 
.j-c-c { justify-content: center; } 
.j-c-s-b { justify-content: space-between; } 
.f-d-c { flex-direction: column; } 

@media (max-width:767px){
   .m-f-d-c { flex-direction: column; } 
   .m-f-d-c > div { width: 100%; } 
}

.container { width: 100%; max-width: 1440px; padding-left: 15px; padding-right: 15px; margin: 0 auto; position: relative; } 
a { transition: 0.3s all ease-in; } 

/* header */
.header-main { background: #fff; padding-left: 15px; padding-right: 15px; border-radius: 20px; position: fixed; top: 0; left: 0; right: 0; transform: translate(0, 20px); z-index: 9;max-width: 1410px; } 
.header-main a { text-decoration: none; color: #000; } 
.header-main nav { display: flex; grid-gap: 40px; } 
.header-main nav a { position: relative; } 
.header-main nav a:hover { color: var(--green); } 
.header-main nav a::before { content: ''; width: 1px; height: 2px; opacity: 0; background: #000; display: inline-block; position: absolute; left: 0; right: 0; bottom: -4px; margin: 0 auto; transition: 0.3s all ease-in; border-radius: 5px; } 
.header-main nav a:hover::before { width: 100%; transition: 0.3s all ease-in; background: var(--green); opacity: 1; } 
.header-right { grid-gap: 20px; } 
.header-right .btn { padding: 10px 20px; background: #000; color: #fff; border-radius: 10px; } 
.header-right .btn.get-a-quote { background: var(--green); } 
.header-right .btn.call-us { background: var(--blue); } 
.header-right .btn.get-a-quote:hover { background: #106200}
.header-right .btn.call-us:hover { background: #134699; } 

/* hero section */
.hero-section { padding-bottom: 50px; overflow: hidden; } 
.hero-section .container { padding-top: 120px; } 
.hero-ttl-img { position: absolute; left: 0; right: 0; } 
.hero-item-left h1 { font-weight: 600; font-size: 48px; line-height: 60px; margin-bottom: 20px; } 
.hero-item-left h1 strong { color: var(--blue); font-weight: 600; } 
.hero-item-left h3 {font-weight: 500;font-size: 32px;line-height: 40px;margin-bottom: 20px; } 
.hero-item-left > strong { font-size: 18px; font-weight: 500; margin-bottom: 30px; display: flex; } 
.hero-item-left .blue-btn { padding: 10px 20px; background: var(--blue); color: #fff; border-radius: 10px; text-decoration: none; } 
.hero-item-right { position: relative; } 
.hero-item-right .hero-img { border: 10px solid #fff; border-radius: 20px; } 
.hero-badge { position: absolute; right: -60px; top: 30%; z-index: 1; } 
.hero-section .owl-nav { display: flex; justify-content: center; align-items: center; margin-top: -80px; grid-gap: 30px; position: relative; z-index: 1; } 
.hero-section .owl-nav button span { display: none; } 
.hero-section .owl-nav button { width: 100px; height: 100px; background: rgba(255, 255, 255, 0.7) !important; display: grid; place-content: center; border-radius: 100%; } 
.hero-section .owl-nav button:hover { background: rgba(255, 255, 255, 1) !important; } 
.hero-section .owl-nav button::before { content: ''; width: 40px; height: 40px; display: inline-block; background: url(images/arrow.png) no-repeat center; background-size: 38px; } 
.hero-section .owl-nav button.owl-next::before { transform: rotate(180deg); } 

/* who we are start */
.who-we-section { padding: 70px 0 80px; background: #fff; scroll-margin: 80px; } 
.who-we-top { margin-bottom: 50px; } 
.who-we-section h2 { font-weight: 600; font-size: 48px; line-height: 60px; color: var(--blue); margin-bottom: 20px; } 
.who-we-top p { margin-bottom: 15px; } 
.who-we-btm_right { grid-gap: 30px; } 
.who-we-item { display: flex; flex-direction: column; align-items: flex-start; padding: 30px; gap: 10px; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 20px; } 
.who-we-item h3 { color: var(--green); font-weight: 500; font-size: 22px; } 
.who-we-item p { line-height: 24px; } 
.who-we-btm_left img { border-radius: 50px 250px 50px 50px; min-width: calc(100% + 150px); } 
.who-we-top-content {display: flex;grid-gap: 30px;}
.who-we-top_right {text-align: left;display: flex;flex-direction: column;}
.who-we-top_right h3 { font-size: 20px; color: #1D9905;display: inline-block; margin-bottom: 5px;}
.who-we-top_right strong { font-weight: 600;}
.who-we-top_right img {width: 100%;height: 200px;object-fit: contain;object-position: center;margin-bottom: 10px;}
@media (min-width: 769px) {
    .who-we-top_right {width: 250px;min-width: 250px;}
}
@media (max-width: 768px) {
    .who-we-top-content {flex-direction: column-reverse;}
    .who-we-top-content {grid-gap: 20px;}
}


/* category section start */
.cat-section { padding: 70px 0; scroll-margin: 80px; } 
.cat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; } 
.cat-item { display: flex; flex-direction: column; height: 80vh; overflow: hidden; position: relative; border-radius: 20px; } 
.cat-item img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; object-position: center; z-index: -1; transition: 0.8s all ease-in-out; } 
.cat-item:hover img { transform: scale(1.1); transition: 0.8s all ease-in-out; } 
.cat-item::before { content: ''; width: 100%; height: 70%; background: linear-gradient(0deg, rgba(0,0,0,0.8), transparent); position: absolute; bottom: 0; z-index: 0; transition: 0.4s all ease-in-out; } 
.cat-item:hover::before { height: 100%; background: linear-gradient(0deg, rgba(0,0,0,1), transparent); transition: 0.4s all ease-in-out; } 
.cat-item-content { padding: 30px; position: absolute; bottom: 0; z-index: 0; color: #fff; transition: 0.4s all ease-in-out; } 
.cat-item:hover .cat-item-content { padding-bottom: 50px; transition: 0.4s all ease-in-out; } 
.cat-item-content h3 { font-size: 28px; font-weight: 600; margin-bottom: 20px; } 
.cat-item-content h4 { font-size: 18px; font-weight: 500; line-height: 30px; } 

/* process section */
.process-section { padding: 60px 0; scroll-margin: 80px; } 
.process-top { text-align: center; margin-bottom: 50px; font-weight: 600; } 
.process-top h2 { font-weight: 600; font-size: 48px; line-height: 60px; color: var(--blue); margin-bottom: 20px; } 
.process-btm { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;grid-gap: 70px; } 
.process-item { position: relative; padding: 60px 30px; } 
.process-item::before { content: ''; height: 100%; width: 150px; display: inline-block; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); border-radius: 165px; position: absolute; left: 0; top: 0; z-index: -1; } 
.process-item:not(:last-child)::after { content: ''; width: 28px; height: 6px; display: inline-block; background: url(images/process-separator.svg) no-repeat center; position: absolute; right: -10px; top: 50%; } 
.process-item h4 { font-size: 28px; color: #333; font-weight: 600; } 

/* why us section */
.why-us { padding: 60px 0; scroll-margin: 80px; } 
.why-us-left h2 { font-weight: 600; font-size: 48px; line-height: 60px; color: var(--blue); margin-bottom: 20px; } 
.why-us-left p { line-height: 24px; } 
.why-us-left_list { margin: 40px 0; display: flex; flex-direction: column; grid-gap: 15px; } 
.why-us-left_list h4 { font-size: 24px; font-weight: 600; position: relative; display: flex; align-items: center; } 
.why-us-left_list h4::before { content: ''; width: 40px; height: 40px; display: inline-block; background: url(images/check-icon.png) no-repeat center; background-size: contain; margin-right: 15px; } 
.why-us-right { position: relative; } 
.why-us-right img { border-radius: 20px; } 
.why-us-right h2 {display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 20px 40px;grid-gap: 10px;background: #FFFFFF;border-radius: 10px;font-weight: 600; } 
.why-us-contact { align-items: center; padding: 20px 50px; background: #2065D8; border-radius: 10px; font-weight: 600; font-size: 42px; color: #FFFFFF; text-decoration: none; transition: 0.4s all ease-in; display: inline-block; } 
.why-us-contact:hover { background: #134699; transition: 0.4s all ease-in; } 

/* review section */
.review-section { padding: 60px 0; background: #fff; scroll-margin: 80px; } 
.review-section h2 { font-weight: 600; font-size: 48px; line-height: 60px; color: var(--blue); margin-bottom: 30px; } 
.review-ttl { font-size: 24px; margin-bottom: 20px; } 
.review-section img { height: 20px; width: 100px !important; object-fit: contain; margin: 0 0 20px; } 
.review-section p { line-height: 24px; } 

/* footer */
footer { text-align: center; line-height: 30px; padding: 70px 0 30px; } 
footer h2 { font-weight: 600; font-size: 48px; line-height: 60px; color: var(--blue); margin-bottom: 30px; } 
.ftr-form { margin: 50px 0; padding-bottom: 50px; border-bottom: 1px solid #ccc; } 
.form-input { display: grid; grid-gap: 30px; grid-template-columns: repeat(2, 1fr);max-width: 800px;margin: 0 auto; } 
.ftr-form input, .ftr-form textarea { height: 50px; background: #fff; border: none; border-radius: 10px; padding-left: 15px; width: 100%; } 
.ftr-form textarea {padding-top: 15px;}
.ftr-form .field.full-width { grid-template-columns: span 2; grid-column: 1 / -1; resize: vertical; } 
.ftr-form-btn { padding: 10px 20px; background: var(--blue); color: #fff; border-radius: 10px; border: none; margin-top: 30px; font-size: 16px; font-weight: 500; cursor: pointer; } 
.ftr-btm { grid-gap: 10px; } 
.ftr-logo { border-radius: 10px; } 
.ftr-email { text-decoration: none; color: #000; }  

/* Responsive design */
@media (min-width: 1024px){
    .who-we-btm_left, .who-we-btm_right { width: 50%; } 
    .why-us-right h2 { position: absolute; left: -100px; bottom: 60px; } 
    .why-us-left, .why-us-right { width: 50%; } 
}

@media (min-width: 1200px) {
    .hero-item-left { width: 60%; padding-right: 30px; } 
    .hero-item-right { width: 40%; } 
}
@media (max-width: 1440px){
    .header-main { transform: translate(0, 0); border-radius: 0; } 
    .hero-section .container { padding-top: 0px; } 
    .hero-badge { right: 30px; top: 30px; } 
}
@media (max-width: 1199px) {
    .hero-item-left { width: 60%; } 
    .hero-section .owl-nav { justify-content: flex-start; margin-top: -20px; } 
}
@media (max-width: 1023px) {
    body { padding-top: 100px; } 
    .menu-trigger { width: 40px; height: 40px; background: #333; border-radius: 10px; position: relative; display: grid; place-content: center; } 
    .logo img { height: 70px; display: flex; } 
    .header-main nav { position: absolute; background: #dbffd3; padding: 15px; left: 0; top: 70px; width: 100%; justify-content: center; transform: translate(0px, -10px); transition: 0.4s all ease-in; opacity: 0; visibility: hidden; } 
    .header-main nav.active { transition: 0.4s all ease-in; opacity: 1; transform: translate(0px, 00px); visibility: visible; } 
    .hero-ttl-img, .hero-badge { display: none; } 
    .hero-item-left h1 { font-size: 32px; line-height: 46px; margin-bottom: 10px; } 
    .hero-item-left h3 { font-size: 22px; line-height: 30px; } 
    .hero-item-left > strong { font-size: 16px; } 
    .hero-section .owl-nav button { width: 60px; height: 60px; } 
    .hero-section .owl-nav button::before { background-size: 28px; width: 30px; height: 30px; } 
    .hero-section .owl-nav { grid-gap: 10px; } 
    .who-we-section h2, .process-top h2, .review-section h2,.why-us-left h2, footer h2 { margin-bottom: 10px; font-size: 32px; line-height: 40px; } 
    .cat-item-content h3, .process-item h4 { font-size: 24px; } 
    .cat-item-content h4 { font-size: 16px; font-weight: 400; line-height: 24px; } 
    .why-us-left_list h4, .review-ttl, .why-us-right h2 { font-size: 18px; } 
    .why-us-left_list { margin: 20px 0; display: flex; flex-direction: column; grid-gap: 5px; } 
    .why-us-left_list h4::before { margin-right: 10px; width: 30px; height: 30px; } 
    .why-us-contact { padding: 20px 30px; font-size: 24px; } 
    .why-us-right h2 { padding: 10px; } 
    .who-we-btm_left img { border-radius: 0; min-width: calc(100% + 30px); margin-left: -15px; } 
    .process-btm { grid-template-columns: 1fr 1fr; grid-gap: 30px; } 
    .process-item:not(:last-child)::after { display: none; } 
}
@media (max-width:767px){
    .cat-item { min-width: 300px; height: 50vh; } 
    .cat-grid { overflow: auto; } 
    .hero-item-left .blue-btn { display: inline-block; margin-bottom: 20px; } 
    .hero-section .owl-nav { justify-content: center; margin-top: 20px; } 
    .hero-section { padding-bottom: 0; } 
    .who-we-section, .cat-section, .process-section, .why-us, .review-section, footer { padding: 30px 0; } 
    .cat-item-content h3, .process-item h4 { font-size: 18px; } 
    .process-item .process-icon { width: 48px; } 
    .process-item { padding: 30px 20px; } 
    .process-item::before { width: 100px; } 
    .process-top, .why-us-left { margin-bottom: 20px; } 
    .ftr-form { margin: 20px 0; padding-bottom: 20px; } 
    footer { line-height: 20px; } 
}
@media (max-width:540px) { 
    body { padding-top: 120px; } 
    .header-main nav { top: 110px; } 
    .header-main { padding-top: 40px; } 
    .header-right .btn.get-a-quote { right: auto; left: 0; } 
    .header-right .btn { width: 50%; position: absolute; right: 0; top: 0; border-radius: 0; text-align: center; } 
    .header-main nav { grid-gap: 15px; text-align: center; font-size: 14px; padding: 10px; } 
    .form-input { grid-template-columns: 1fr; } 
}