/* Typography */ /* // End typography */ /* Resets ------ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; } ul{list-style: none;} article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video{display: block;} blockquote, q{quotes: none;} blockquote:before, blockquote:after, q:before, q:after{content: ''; content: none;} table{border-collapse: collapse; border-spacing: 0;} b, strong{font-weight: bold;} [type="checkbox"], [type="radio"]{box-sizing: border-box; padding: 0;} [type="search"]{-webkit-appearance: textfield; outline-offset: -2px;} [type="search"]::-webkit-search-decoration{-webkit-appearance: none;} ::-webkit-file-upload-button{-webkit-appearance: button; font: inherit;} .clear:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0} a img{border:0; width: auto; height: auto; max-width: 100%; vertical-align: bottom; border-style: none;} a,input,select,textarea{outline:none;} img{width: auto; height: auto; max-width: 100%; vertical-align: bottom; border-style: none;} /* Selection colours */ img::selection{background: transparent;} img::-moz-selection{background: transparent;} a{text-decoration: none; display: inline-block;} input[type='number']{-moz-appearance:textfield;} input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance: none;} input::-moz-focus-inner{border:0; padding: 0; } input:invalid, input:required{box-shadow: none;} input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration{display: none;} input:required { box-shadow:none; } input::-moz-focus-inner{box-shadow:0 0 0px transparent;} input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="number"],input[type="submit"],input[type="password"],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;} a img{border:0; width: auto; height: auto; max-width: 100%; vertical-align: bottom; border-style: none; -webkit-perspective: 0; perspective: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); visibility: visible; backface-visibility: hidden;} img{width: auto; height: auto; max-width: 100%; vertical-align: bottom; border-style: none; -webkit-perspective: 0; perspective: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); visibility: visible; backface-visibility: hidden;} /* Default Layout ------------------------------------------------------------------------------- */ html { height: 100%; max-height: 100%; min-height: 100%; overflow: hidden; overflow-y: scroll; } :root{ /* Core Constants */ --White: #ffffff; --Black: #000000; /* BRAND COLORS (White Ice Theme) */ --Brand_Green: #0ba953; /* Vivid Green */ --Brand_Red: #FF2A2A; /* Vivid Red */ --Brand_Grey: #6f6e73; /* Standard Text/Brackets Grey */ --White_Ice: #F4F7F9; /* Clean White Ice Background */ --Dark_Text: #1E232E; /* High contrast dark slate for Headings */ /* Re-mapped to original variables for layout stability */ --Teal_Blue: var(--White_Ice); /* Replaces dark blue sections with White Ice */ --Seagull: var(--Brand_Green); /* Primary Buttons and Highlights */ --Calypso: var(--Brand_Red); /* Secondary Accents/Subheadings */ --Tiber: var(--Dark_Text); /* Primary Headings */ --Alabaster: var(--White_Ice); /* Surface backgrounds */ --Mirage: var(--Dark_Text); /* Secondary Headings */ --Blue_Bayoux: var(--Brand_Grey); --Mine_Shaft: var(--Dark_Text); --Gray: var(--Brand_Grey); /* Main Body Text */ --Cod_Gray: #13161C; /* Dark Footer */ --Cod_Gray_tow: var(--Dark_Text); --Alto: #E2E6EA; /* Borders & Subtle Dividers */ --Montserrat: 'Montserrat', sans-serif; } /* ========================================================================== Global Color Variables (Light & Dark Mode) ========================================================================== */ /* 1. Default Light Theme */ :root { --bg-main: #ffffff; --bg-secondary: #f7f9fa; --bg-card: #ffffff; --text-main: #374151; --text-heading: #111827; --accent-color: #ef4444; /* Vivid Red */ --border-color: #e5e7eb; --shadow-color: rgba(0,0,0,0.06); } /* 2. Dark Theme Overrides (Neon Style) */ [data-theme="dark"] { --bg-main: #0b1120; /* Deep dark blue */ --bg-secondary: #0f172a; --bg-card: #1e293b; --text-main: #94a3b8; --text-heading: #f8fafc; --accent-color: #00f3ff; /* Neon Cyan! */ --border-color: #334155; --shadow-color: rgba(0, 243, 255, 0.15); /* Neon glow */ } body{background: var(--White); -webkit-text-size-adjust: 100%; -moz-text-size-adjust:100%; -moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased; font-family: var(--Montserrat); color: var(--Gray); font-size: 16px; line-height: 36px; font-weight: 500;} *{-webkit-box-sizing: border-box;-moz-box-sizing:border-box; box-sizing: border-box;} /* Global style */ h1, h2, h3, h4, h5, h6{font-weight: 700; color: var(--Dark_Text);} h1{font-size: 55px; line-height: 75px; text-transform: uppercase;} h2{font-size: 45px; line-height: 60px;} h3{font-size: 32px; line-height: 30px;} h4{font-size: 24px; line-height: 32px;} h5{font-size: 20px; line-height: 24px;} h6{font-size: 18px; line-height: 27px; text-transform: uppercase; color: var(--Brand_Red); letter-spacing: 0.2em;} h1 span{color: var(--Brand_Green);} span, em, dfn{display: inline;} .lead-text{font-size: 20px; line-height: 36px; color: var(--Brand_Grey);} .small-text{font-size: 14px; line-height: 26px;} dfn, address, em{font-style: normal;} label, input[type="submit"]{cursor: pointer;} button:focus{outline: none;} /* Modern Button Styling (Vivid Red Theme) */ .btn { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; transition: all .4s ease-in-out; text-align: center; font-size: 14px; line-height: 24px; padding: 18px 24px; border: 2px solid var(--Brand_Red); background-color: var(--Brand_Red); color: var(--White); /* Solid Red */ border-radius: 50px; min-width: 186px; font-weight: 700; } .btn:hover { background-color: transparent; border-color: var(--Brand_Red); color: var(--Brand_Red); /* Transparent with Red text/border */ } /* Secondary Button / Outline Button */ .transparent { background-color: transparent; color: var(--Dark_Text); /* Black/Dark text by default */ border: 2px solid var(--Brand_Red); /* Red Border */ } .transparent:hover { background-color: var(--Brand_Red); color: var(--White); /* Solid Red on hover */ } .arrow-btn{font-size: 14px; line-height: 16px; color: var(--Brand_Red); font-weight: 700; padding-right: 24px; position: relative;} .arrow-btn:after{position: absolute; content: ''; top: 0; right: 0; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-image: url(../svgs/btn-arrow.svg); transition: .3s ease-in-out; filter: invert(34%) sepia(93%) saturate(3015%) hue-rotate(345deg) brightness(101%) contrast(106%);} .arrow-btn:hover:after{right: -3px;} .secondary-arrow-btn{font-size: 16px; line-height: 24px; color: var(--Brand_Red); font-weight: 700; position: relative; padding-right: 60px;} .secondary-arrow-btn:after{position: absolute; content: ''; top: 0; right: 0; width: 35px; height: 24px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; background-image: url(../svgs/ARROW.svg); transition: .3s ease-in-out; filter: invert(34%) sepia(93%) saturate(3015%) hue-rotate(345deg) brightness(101%) contrast(106%);} .secondary-arrow-btn:hover:after{right: -4px;} .mobi{display: none;} .desk{display: block;} .common-wrap{max-width: 1290px; margin: 0 auto; clear: both; padding: 0 20px;} .centerY { position: absolute; left: 0; right: 0; text-align: center; top: 50%; width: 100%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); color: var(--Dark_Text); } /* Flex style */ .flex-box{display: -webkit-flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;} .flex-horizontal-align{-webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;} .flex-vertical-align{-webkit-box-align: center; align-items: center;} .flex-bottom-align{-webkit-box-align: flex-end; align-items: flex-end;} .flex-content-align{-webkit-align-content: center; -moz-align-content: center; align-content: center;} .order-1{-webkit-order: 1; -moz-order: 1; -ms-order: 1; order: 1;} .order-2{-webkit-order: 2; -moz-order: 2; -ms-order: 2; order: 2;} .flex{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-flow: row wrap;} section, footer, header{float: left; width: 100%; position: relative;} body,html{height: 100%;} .main-wrap{min-height: 100%; overflow: hidden; position: relative; overflow-x: hidden;} /* Start Header Style */ .main-header-section{float: left; width: 100%; position: relative; background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid var(--Alto); box-shadow: 0 2px 20px rgba(0,0,0,0.03);} .main-header-section .common-wrap{max-width: 100%; padding: 0 0 0 20px} @media only screen and (min-width: 1281px) {.main-header-section .common-wrap{max-width: 100%; padding: 0 0 0 95px}} .header-inner{width: 100%;} .header-logo-wrap{width: 100%; justify-content: space-between; align-items: center;} .header-logo{width: 180px;} .hamburger-wrap{width: 95px; height: 95px; background: rgba(11, 169, 83, 0.08); padding: 20px; justify-content: center; align-items: center; cursor: pointer; position: relative; border-left: 1px solid var(--Alto);} .hamburger{position: relative; width: 27px; height: 20px;} .hamburger div {background-color: var(--Brand_Green); height: 3px; position: absolute; right: 0; top: 0; transition: .3s ease-in-out; width: 100%; -webkit-animation: div2 2s linear infinite; animation: div2 2s linear infinite; -webkit-animation-delay: .3s; animation-delay: .3s; transition-delay: 0s!important; } .hamburger div:nth-child(2) { -webkit-animation: div1 2s linear infinite; animation: div1 2s linear infinite; top: 50%; transform: translateY(-50%); transition-delay: 0s!important; width: 75%; } .hamburger div:nth-child(3) { -webkit-animation: div1 2s linear infinite; animation: div1 2s linear infinite; -webkit-animation-delay: .3s; animation-delay: .3s; bottom: 0; top: auto; transition-delay: 0s!important; width: 50%; } @-webkit-keyframes div1 { 0% { width: 25% } 50% { width: 100% } to { width: 25% } } @keyframes div1 { 0% { width: 25% } 50% { width: 100% } to { width: 25% } } @-webkit-keyframes div2 { 0% { width: 100% } 50% { width: 25% } to { width: 100% } } @keyframes div2 { 0% { width: 100% } 50% { width: 25% } to { width: 100% } } /* Light Pattern Animation */ .common-pattern{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-flow: row wrap; align-items: flex-end;} .common-pattern > div{width: 20%; height: 100%; background: linear-gradient(180deg, rgba(11, 169, 83, 0.04) 0%, rgba(255, 255, 255, 0) 100%); -webkit-animation: div3 10s linear infinite; animation: div3 10s linear infinite; -webkit-animation-delay: .3s; animation-delay: .3s; bottom: 0; top: auto; transition-delay: 0s!important;} .common-pattern > div:nth-child(even){height: 50%; -webkit-animation: div4 10s linear infinite; animation: div4 10s linear infinite; -webkit-animation-delay: .3s; animation-delay: .3s; bottom: 0; top: auto; transition-delay: 0s!important;} /* Start Hero Style */ .hero-wrap{float: left; width: 100%; position: relative; background-color: var(--White_Ice); padding: 74px 0 283px;} .hero-inner{width: 100%; position: relative; z-index: 1; justify-content: center;} .hero-content-wrap{width: 100%; max-width: 700px; text-align: center;} .hero-content-wrap h1{margin-bottom: 40px; color: var(--Dark_Text);} .hero-content-wrap p{max-width: 623px; margin: 0 auto; text-align: center; color: var(--Brand_Grey);} .hero-btn{width: 100%; margin-top: 40px; justify-content: center; column-gap: 32px;} /* Start Find us Style */ .find-us-wrap{float: left; width: 100%; padding-bottom: 160px;} .find-us-inner{width: 100%; margin-top: -209px;} .find-us-thumb{width: 100%; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.08);} .find-us-thumb figure{width: 100%; height: 100%;} .find-us-thumb figure img, .find-us-thumb video{width: 100%; height: 100%; object-fit: cover;} .play-btn{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 124px; height: 124px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(6px); cursor: pointer; box-shadow: 0 10px 30px rgba(11, 169, 83, 0.15);} .play-btn:after{position: absolute; content: ''; top: 50%; left: 50%; width: 29px; height: 34px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; background-image: url(../svgs/PLAY.svg); transform: translate(-50%, -50%); filter: invert(47%) sepia(93%) saturate(1394%) hue-rotate(114deg) brightness(95%) contrast(92%);} .find-us-item-wrap{width: 100%; align-items: center; margin-top: 70px; justify-content: space-evenly;} .find-us-item{max-width: 171px;} /* Start Home About Style */ .home-about-wrap{float: left; width: 100%; background-color: var(--White);} .home-about-wrap .common-wrap{max-width: 100%; padding: 0;} .home-about-title-wrap{width: 41.38888888888889%; justify-content: flex-end; padding: 77px 20px;} .home-about-title{max-width: 480px; width: 100%;} .home-about-title h6{margin-bottom: 14px;} .home-about-title h2{max-width: 393px;} .home-about-title-thumb-wrap{width: 100%; margin-top: 75px;} .home-about-title-thumb{max-width: 360px;} .home-about-title-thumb figure{width: 100%;} .home-about-title-thumb figure img{width: 100%;} .home-about-content-wrap{width: 58.61111111111111%; background-color: var(--White_Ice); align-items: center; justify-content: flex-start; padding: 20px 20px 20px 52px; position: relative;} .home-about-content{max-width: 698px; width: 100%; position: relative; z-index: 1;} .home-about-content p{margin-bottom: 36px; color: var(--Brand_Grey);} .home-about-content p:last-child{margin-bottom: 0;} .home-about-pattern{ width: 60%; height: 414px; left: auto; right: 0;} .home-about-pattern > div{width: 33.333333%;} /* Start Our Services Style */ .our-services-wrap{float: left; width: 100%; padding: 160px 0 80px;} .our-services-inner{width: 100%;} .common-title{width: 100%; text-align: center;} .common-title h6{margin-bottom: 20px;} .our-services-title h2{max-width: 603px; margin: 0 auto;} .find-us-item-wrap .js-marquee-wrapper{display: flex;} .find-us-item-wrap .js-marquee-wrapper .js-marquee{margin-right: 40px !important; display: flex; flex-flow: row wrap; align-items: center; column-gap: 40px;} .our-services-component-wrap{width: 100%; margin-top: 78px; align-items: flex-start; column-gap: 2.826666666666667%;} .our-services-component{width: 22.88%; border-radius: 10px; background-color: var(--White_Ice); border: 1px solid var(--Alto); padding: 54px 20px 19px; transition: .3s ease-in-out;} .our-services-component:hover{box-shadow: 0 10px 30px rgba(0,0,0,0.04); transform: translateY(-5px);} .our-services-component:nth-child(odd){margin-top: 36px;} .our-services-component-icon-wrap{width: 100%; justify-content: center;} .our-services-component-icon{width: 72px; height: 72px; border-radius: 50%; background-color: rgba(11, 169, 83, 0.1); padding: 15px; display: flex; align-items: center; justify-content: center;} .our-services-component-icon img{max-width: 30px; filter: brightness(0) saturate(100%) invert(47%) sepia(93%) saturate(1394%) hue-rotate(114deg) brightness(95%) contrast(92%);} .our-services-component-content{width: 100%; text-align: center; margin-top: 34px;} .our-services-component-btn{width: 100%; text-align: center; margin-top: 46px;} /* Start Our Project Style */ .our-project-wrap{float: left; width: 100%; padding: 80px 0 160px;} .our-project-wrap .common-wrap{max-width: 958px;} .our-project-inner{width: 100%;} .our-project-title h2{max-width: 603px; margin: 0 auto;} .project-component-wrap{width: 100%; justify-content: space-between; margin-top: 90px; align-items: flex-start; row-gap: 13px;} .project-component{width: 42.81045751633987%;} .project-component:nth-child(even){margin-top: 80px;} .project-component-thumb{float: left; width: 100%; background-color: var(--White_Ice); border-radius: 10px; overflow: hidden; border: 1px solid var(--Alto);} .project-component-thumb figure{width: 100%;} .project-component-thumb figure img{width: 100%; transition: .4s ease-in-out;} .project-component-thumb:hover figure img{transform: scale(1.03);} .project-component-content{float: left; width: 100%; padding-top: 32px;} .project-component-content h4{margin-bottom: 9px; color: var(--Dark_Text);} .project-component-content p{max-width: 367px; line-height: 32px;} .project-component-content-btn{width: 100%; margin-top: 7px;} .our-project-btn{width: 100%; margin-top: 85px; justify-content: center;} /* Start testimonial Style */ .testimonial-wrap{float: left; width: 100%; padding: 86px 0; background-color: var(--White_Ice);} .testimonial-inner{width: 100%;} .testimonial-title-wrap{width: 100%;} .testimonial-title{max-width: 426px;} .testimonial-title h6{margin-bottom: 14px;} .testimonial-component-wrap { width: calc(100% + 35px); margin-top: 68px; } .testimonial-component { width: 393px; background-color: var(--White); padding: 32px; border-radius: 10px; margin-right: 35px; display: flex !important; flex-flow: row wrap; align-content: space-between; border: 1px solid var(--Alto); box-shadow: 0 5px 20px rgba(0,0,0,0.02);} .testimonial-component-author{width: 100%; margin-top: 18px;} .testimonial-component-author-thumb{width: 50px; height: 50px;} .testimonial-component-author-thumb figure{width: 100%; height: 100%;} .testimonial-component-author-thumb figure img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%;} .testimonial-component-author-content{width: calc(100% - 50px); padding-left: 20px;} .testimonial-component-author-content h6{font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: capitalize; margin-bottom: 12px;} .testimonial-component-author-content em{font-size: 12px; line-height: 14px; display: block; color: var(--Brand_Grey);} .testimonial-component-wrap .slick-track{display: flex !important;} .testimonial-component-wrap .slick-list{display: flex !important;} .slick-prev{left: -75px;} .slick-next{right: -45px;} .slick-arrow{width: 72px; height: 72px;} .slick-arrow::before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-color: var(--White); filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.05)); transition: .3s ease-in-out; background-repeat: no-repeat; background-size: 40px 40px; background-position: center center; border-radius: 50%; border: 1px solid var(--Alto); opacity: 1;} .slick-arrow:hover:before{background-color: var(--Brand_Green); border-color: var(--Brand_Green); filter: drop-shadow(0px 10px 20px rgba(11, 169, 83, 0.2));} .slick-prev:before{background-image: url(../svgs/arrow-left.svg);} .slick-prev:hover:before{background-image: url(../svgs/arrow-left-hover.svg); filter: brightness(0) invert(1);} .slick-next:before{background-image: url(../svgs/arrow-right.svg);} .slick-next:hover:before{background-image: url(../svgs/arrow-right-hover.svg); filter: brightness(0) invert(1);} .testimonial-component-wrap .slick-arrow{top: -150px;} .testimonial-component-wrap .slick-prev{right: 142px; left: auto;} .testimonial-component-wrap .slick-next{right: 35px;} /* Start Blog Style */ .blog-wrap{float: left; width: 100%; padding: 160px 0 66px;} .blog-inner{width: 100%;} .blog-component-wrap{width: 100%; margin-top: 56px; column-gap: 2.84%; row-gap: 40px;} .blog-component{width: 31.44%; display: flex; flex-flow: row wrap; align-items: flex-start;} .blog-component-thumb{width: 100%; height: 210px; border-radius: 10px; overflow: hidden;} .blog-component-thumb figure, .blog-component-thumb picture{width: 100%; height: 100%;} .blog-component-thumb figure img, .blog-component-thumb picture img, .blog-component-thumb video{width: 100%; height: 100%; object-fit: cover;} .blog-component-content{width: 100%; margin-top: 20px;} .blog-component-content h5{margin-bottom: 16px; color: var(--Dark_Text); line-height: 36px;} .blog-component-author {width: 100%; margin-top: 15px; align-self: flex-end;} .blog-component-author-thumb{width: 50px; height: 50px;} .blog-component-author-thumb figure{width: 100%; height: 100%;} .blog-component-author-thumb figure img{width: 100%; height: 100%; border-radius: 50%; object-fit: cover;} .blog-component-author-content{width: calc(100% - 50px); padding-left: 20px;} .blog-component-author-content h6{font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: capitalize; margin-bottom: 12px;} .blog-component-author-content em{font-size: 12px; line-height: 14px; display: block; color: var(--Brand_Grey);} /* Start CTA Style */ .cta-wrap{float: left; width: 100%; padding: 66px 0 0;} .cta-inner{width: 100%; position: relative; background-color: var(--White_Ice); border: 1px solid var(--Alto); border-radius: 12px; padding: 90px 20px; justify-content: center; z-index: 2;} .cta-content{max-width: 758px; width: 100%; text-align: center; position: relative; z-index: 1;} .cta-content h2{color: var(--Dark_Text); font-size: 55px; line-height: 75px;} .cta-content-btn{width: 100%; justify-content: center; margin-top: 32px;} /* Start Footer Style */ .main-footer-section{float: left; width: 100%; background-color: var(--Cod_Gray); padding-top: 322px; margin-top: -219px;} .main-footer-section .common-pattern{align-items: flex-start;} .footer-inner{width: 100%; position: relative; z-index: 1;} .footer-main{width: 100%; padding-bottom: 50px;} .footer-info{width: auto; max-width: 212px;} .footer-widget-wrap{width: calc(100% - 212px); justify-content: flex-end; column-gap: 32px; padding-top: 6px;} .footer-widget{width: 104px;} .footer-widget.big-widget{width: 176px;} .footer-logo{float: left; width: 100%;} .footer-logo a{max-width: 180px; width: 100%;} .footer-logo a img{width: 100%; filter: brightness(0) invert(1);} /* Makes logo white for dark footer */ .footer-info-list{float: left; width: 100%; margin-top: 57px;} .footer-info-list ul{width: 100%; display: flex; flex-flow: row wrap; row-gap: 20px;} .footer-info-list ul li{width: 100%;} .footer-info-list ul li a{display: flex; align-items: center; font-size: 14px; line-height: 20px; color: #A0A5AF; font-weight: 600; transition: .3s ease-in-out;} .footer-info-list ul li a:hover{color: var(--Brand_Green);} .footer-info-list ul li a img{width: 20px; filter: brightness(0) invert(0.7);} .footer-info-list ul li a span{padding-left: 12px;} .footer-widget h6{font-size: 16px; line-height: 23px; font-weight: 700; color: var(--White); letter-spacing: 0; text-transform: unset;} .footer-widget ul { width: 100%; margin-top: 20px; display: flex; flex-flow: row wrap; } .footer-widget ul li{width: 100%;} .footer-widget ul li a{font-size: 14px; line-height: 18px; color: #A0A5AF; transition: .3s ease-in-out; font-weight: 600;} .footer-widget ul li a:hover{color: var(--Brand_Green);} .footer-widget.social-widget ul{display: flex; flex-flow: row wrap; justify-content: space-between;} .footer-widget.social-widget ul li{width: 20px;} .footer-widget.social-widget ul li a{width: 100%;} .footer-widget.social-widget ul li a img{width: 100%; filter: brightness(0) invert(0.7);} .footer-widget.social-widget ul li a:hover img{filter: brightness(0) saturate(100%) invert(47%) sepia(93%) saturate(1394%) hue-rotate(114deg) brightness(95%) contrast(92%);} .footer-bottom{float: left; width: 100%; text-align: center; padding: 40px 0; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 43px;} .footer-bottom p{font-size: 12px; line-height: 17px; font-weight: 700; color: #A0A5AF;} /* Start Pricing Style */ .pricing-page .hero-wrap { padding: 110px 0 325px; } .pricing-page .hero-content-wrap { max-width: 916px;} .pricing-page .hero-content-wrap h1{text-transform: unset; margin-bottom: 18px;} .pricing-page .hero-btn {margin-top: 22px;} .pricing-wrap{float: left; width: 100%; padding: 0 0 92px;} .pricing-inner { width: 100%; margin-top: -245px; } .pricing-component-wrap{width: 100%; column-gap: 2.84%;} .pricing-component{width: 31.44%; padding: 36px 30px 30px; background-color: var(--White); display: flex; flex-flow: row wrap; align-content: space-between; border: 1px solid var(--Alto); border-radius: 10px; position: relative; z-index: 2;} .pricing-component.popular{filter: drop-shadow(0px 15px 40px rgba(0, 0, 0, 0.05)); z-index: 1; border-color: var(--Brand_Green);} .pricing-component-content-wrap{width: 100%;} .pricing-component-title{width: 100%; justify-content: space-between; margin-bottom: 16px;} .pricing-component-title span{font-size: 12px; line-height: 14px; color: var(--Brand_Green); padding: 10px; background-color: rgba(11, 169, 83, 0.1); border-radius: 900px; font-weight: 700;} .pricing-component-content-wrap p{color: var(--Brand_Grey); margin-bottom: 15px; line-height: 32px;} .pricing-component-content-wrap > span{display: block; font-size: 32px; line-height: 30px; color: var(--Dark_Text); font-weight: 700;} .pricing-component-content-wrap span em{font-size: 24px; color: #A3A3A3;} .pricing-component-content-wrap ul{width: 100%; padding-top: 28px; margin-top: 24px; display: flex; flex-flow: row wrap; row-gap: 24px; border-top: 1px solid var(--Alto);} .pricing-component.popular ul{border: none;} .pricing-component-content-wrap ul li{width: 100%; font-size: 14px; line-height: 16px; color: var(--Dark_Text); position: relative; padding-left: 26px; font-weight: 500;} .pricing-component-content-wrap ul li.disabled{opacity: .5;} .pricing-component-content-wrap ul li:before{position: absolute; content: ''; top: 0; left: 0; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-image: url(../svgs/pricing/check.svg); filter: brightness(0) saturate(100%) invert(47%) sepia(93%) saturate(1394%) hue-rotate(114deg) brightness(95%) contrast(92%);} .pricing-component-btn{width: 100%; margin-top: 24px;} .pricing-component-btn a{padding: 20px; width: 100%; display: block; text-align: center; background-color: var(--White_Ice); color: var(--Dark_Text); border: 1px solid var(--Alto); font-size: 14px; line-height: 24px; font-weight: 700; transition: .3s ease-in-out; border-radius: 50px;} .pricing-component-btn a:hover{background-color: var(--Brand_Green); color: var(--White); border-color: var(--Brand_Green);} .pricing-component.popular .pricing-component-btn a {background-color: var(--Brand_Green); color: var(--White); border-color: var(--Brand_Green);} .satisfied-clients-wrap{float: left; width: 100%; padding: 100px 0 192px;} .satisfied-clients-inner{width: 100%;} .satisfied-clients-item-wrap{margin-top: 50px; width: 100%;} .satisfied-clients-item{width: 286px; filter: grayscale(100%); opacity: 0.6; transition: 0.3s;} .satisfied-clients-item:hover{filter: grayscale(0%); opacity: 1;} .satisfied-clients-item-wrap .js-marquee-wrapper{display: flex !important;} .satisfied-clients-item-wrap .js-marquee{display: flex !important; column-gap: 35px; margin-right: 35px !important;} .pricing-about-wrap{float: left; width: 100%; padding: 144px 0; background-color: var(--White_Ice);} .pricing-about-inner{width: 100%;} .pricing-about-container .testimonial-component{opacity: .7; transition: .3s ease-in-out;} .pricing-about-container .testimonial-component:hover{opacity: 1; border-color: var(--Brand_Green);} .pricing-about-container{width: 100%; margin-top: 80px; row-gap: 35px;} .pricing-about-component-wrap{width: 100%;} .pricing-about-component-wrap .js-marquee-wrapper{display: flex !important;} .pricing-about-component-wrap .js-marquee{display: flex !important; margin-right: 0 !important;} .faq-wrap{float: left; width: 100%; padding: 194px 0 124px;} .faq-wrap .common-wrap{max-width: 1076px;} .faq-inner{width: 100%;} .faq-accordion-wrap{width: 100%; margin-top: 68px; row-gap: 20px;} .faq-accordion-item{width: 100%; border: 1px solid var(--Alto); border-radius: 10px; transition: .3s ease-in-out; background-color: var(--White); box-shadow: 0px 1px 14px rgba(0,0,0,0.02);} .faq-accordion-item.active{background-color: rgba(11, 169, 83, 0.03); border: 1px solid rgba(11, 169, 83, 0.2); box-shadow: 0px 5px 15px rgba(11, 169, 83, 0.05);} .faq-accordion-item.active .faq-accordion-item-title{padding-bottom: 20px;} .faq-accordion-item-title{width: 100%; padding: 39px 40px; position: relative; cursor: pointer; transition: .3s ease-in-out;} .faq-accordion-item-title:after{position: absolute; top: 50%; right: 40px; width: 24px; height: 24px; content: ''; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; background-image: url(../svgs/pricing/arrow.svg); transition: .3s ease-in-out; transform: translateY(-50%);} .faq-accordion-item.active .faq-accordion-item-title:after{transform: rotate(180deg) translateY(11%); filter: invert(47%) sepia(93%) saturate(1394%) hue-rotate(114deg) brightness(95%) contrast(92%);} .faq-accordion-item-title h6{font-size: 16px; line-height: 24px; font-weight: 600; color: var(--Dark_Text); border-bottom: 1px solid transparent; letter-spacing: 0; text-transform: unset; padding-right: 20px;} .faq-accordion-item.active .faq-accordion-item-title h6 {color: var(--Brand_Green);} .faq-accordion-item-content{width: 100%; display: none; padding: 28px 40px 31px; position: relative;} .faq-accordion-item-content:before{position: absolute; top: 0; width: calc(100% - 80px); content: ''; left: 50%; transform: translateX(-50%); border-top: 1px solid var(--Alto);} .faq-accordion-item:nth-child(1) .faq-accordion-item-content{display: block;} .faq-accordion-item-content p{font-size: 14px; line-height: 32px; color: var(--Brand_Grey); max-width: 919px;} /* Start career Style */ .career-page .hero-wrap { padding: 110px 0 325px; } .career-page .hero-content-wrap { max-width: 842px;} .career-page .hero-content-wrap h1{text-transform: unset; margin-bottom: 18px;} .career-page .hero-btn {margin-top: 22px;} .career-information-wrap{float: left; width: 100%; padding-bottom: 160px;} .career-information-inner{width: 100%; margin-top: -206px;} .career-information-thumb{width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--Alto);} .career-information-thumb figure{width: 100%; height: 100%;} .career-information-thumb figure img{width: 100%; height: 100%; object-fit: cover;} .career-information-container{width: 100%; margin-top: 160px; justify-content: space-between;} .career-information-item-wrap{width: 347px; row-gap: 76px; align-content: flex-start;} .career-information-item{width: 100%; align-items: center;} .career-information-item-icon{width: 72px; height: 72px; border-radius: 50%; background-color: var(--White_Ice); border: 1px solid var(--Alto); display: flex; flex-flow: row wrap; justify-content: center; align-items: center; padding: 10px;} .career-information-item-icon img{max-width: 32px;} .career-information-item-content{width: calc(100% - 72px); padding-left: 35px;} .career-information-item-content span{display: block; margin-bottom: 20px; font-size: 45px; line-height: 52px; font-weight: 700; color: var(--Brand_Red);} .career-information-item-content em{display: block; font-size: 24px; line-height: 28px; font-weight: 500; color: var(--Brand_Grey);} .career-information-content{width: calc(100% - 347px); max-width: 841px; padding-left: 20px;} .career-information-content h2{margin-bottom: 30px;} .career-information-content p{margin-bottom: 34px;} .career-information-content p:last-child{margin-bottom: 0;} .positions-wrap{float: left; width: 100%; background-color: var(--White_Ice); padding: 111px 0; border-top: 1px solid var(--Alto);} .positions-wrap .common-wrap{max-width: 1076px;} .positions-inner{width: 100%;} .positions-title{width: 100%;} .positions-title h2{color: var(--Dark_Text); margin-bottom: 30px;} .positions-title p{max-width: 642px; color: var(--Brand_Grey);} .positions-component-wrap{width: 100%; margin-top: 51px; row-gap: 30px;} .positions-component{width: 100%; padding: 40px; background-color: var(--White); border: 1px solid var(--Alto); border-radius: 10px; align-items: center;} .positions-component-content{width: calc(100% - 170px); padding-right: 20px;} .positions-component-content h4{color: var(--Brand_Green); margin-bottom: 14px;} .positions-component-content p{font-size: 16px; line-height: 24px; font-weight: 500; color: var(--Brand_Grey);} .positions-component-btn{width: 170px;} .positions-component-btn a.btn{min-width: 165px;} .benefit-wrap{float: left; width: 100%; padding: 160px 0;} .benefit-title h2{color: var(--Dark_Text);} .benefit-component-wrap{width: 100%; margin-top: 50px; column-gap: 2.826666666666667%; row-gap: 35px; counter-reset: section;} .benefit-component{width: 22.88%; transition: .3s ease-in-out; background-color: var(--White_Ice); border: 1px solid var(--Alto); border-radius: 10px; padding: 24px 24px 30px; min-height: 170px; display: flex; flex-flow: row wrap; align-content: space-between;} .benefit-component:hover{background-color: var(--White); border-color: var(--Brand_Green); box-shadow: 0 10px 20px rgba(0,0,0,0.05);} .benefit-component em{width: 100%; height: 20px; font-size: 20px; line-height: 23px; font-weight: 700; color: var(--Brand_Green); position: relative;} .benefit-component em:after{position: absolute; counter-increment: section; content: "0" counter(section); top: 0; left: 0; font-size: 20px; line-height: 23px; font-weight: 700; color: var(--Brand_Green);} .benefit-component h5{font-size: 20px; line-height: 23px; font-weight: 600; color: var(--Dark_Text); margin-top: 20px;} .our-mission-wrap{float: left; width: 100%; padding: 74px 0; position: relative;} .our-mission-wrap:before{position: absolute; content: ''; top: 0; left: 0; width: 26.52777777777778%; height: 100%; background-color: rgba(11, 169, 83, 0.05);} .our-mission-inner{width: 100%;} .our-mission-thumb{width: 393px; border-radius: 10px; overflow: hidden; border: 1px solid var(--Alto);} .our-mission-thumb figure{width: 100%; height: 100%;} .our-mission-thumb figure img{width: 100%; height: 100%; object-fit: cover;} .our-mission-content{width: calc(100% - 393px); padding-left: 70px;} .our-mission-content h6{margin-bottom: 18px;} .our-mission-content h2{margin-bottom: 30px;} .our-mission-content p{margin-bottom: 36px; max-width: 746px;} .our-mission-content p:last-child{margin-bottom: 0;} .career-page .cta-wrap { padding: 157px 0 0; } /* End career Style */ /* Start Career Details Style */ .career-detail-hero-wrap{float: left; width: 100%; padding: 104px 0; background-color: var(--White_Ice); border-bottom: 1px solid var(--Alto);} .career-detail-hero-wrap .common-wrap{max-width: 860px;} .career-detail-hero-inner{width: 100%;} .career-detail-hero-content{width: 100%;} .career-detail-hero-content h2{color: var(--Dark_Text); margin-bottom: 22px;} .career-detail-hero-content p{font-size: 24px; line-height: 24px; font-weight: 500; color: var(--Brand_Grey);} .career-submission-wrap{float: left; width: 100%; padding: 61px 0 90px;} .career-submission-wrap .common-wrap{max-width: 860px;} .career-submission-inner{width: 100%;} .career-submission-content-wrap{width: 100%;} .career-submission-content{width: 100%; margin-bottom: 50px;} .career-submission-content h5{color: var(--Dark_Text); margin-bottom: 20px;} .career-submission-content p{color: var(--Brand_Grey);} .career-submission-content ul{list-style: disc; padding-left: 25px; color: var(--Brand_Grey);} .career-submission-form{width: 100%; margin-top: 28px;} .career-submission-form h2{color: var(--Dark_Text); margin-bottom: 15px;} .career-submission-form p{color: var(--Brand_Grey); max-width: 705px;} .career-submission-form form{width: 100%; margin-top: 44px;} .input-row-wrap{width: 100%; row-gap: 35px;} .input-row{width: 100%; justify-content: space-between;} .input-col{width: 47.92682926829268%;} .input-row input{width: 100%; height: 85px; background-color: var(--White); outline: none; border: 1px solid var(--Alto); border-radius: 5px; padding: 28px 28px; font-size: 16px; line-height: 24px; color: var(--Dark_Text); font-family: var(--Montserrat); font-weight: 500; transition: 0.3s;} .input-row textarea{width: 100%; height: 243px; background-color: var(--White); outline: none; border: 1px solid var(--Alto); border-radius: 5px; padding: 28px 28px; font-size: 16px; line-height: 24px; color: var(--Dark_Text); font-family: var(--Montserrat); font-weight: 500; resize: none; transition: 0.3s;} .input-row textarea:focus, .input-row input:focus{ border-color: var(--Brand_Red); box-shadow: 0 0 10px rgba(255, 42, 42, 0.1); /* Subtle red glow/shadow */ } .input-row textarea::placeholder, .input-row input::placeholder{color: #A0A5AF;} .input-row-submit {justify-content: flex-end;} .input-row-submit input{width: 186px; font-size: 14px; line-height: 29px; color: var(--White); padding: 15px; height: 64px; background-color: var(--Brand_Green); border: 2px solid var(--Brand_Green); border-radius: 50px; transition: .3s ease-in-out; cursor: pointer; font-weight: 700;} .input-row-submit input:hover{background-color: transparent; color: var(--Brand_Green);} .career-details-page .cta-wrap { padding: 91px 0 0; } /* End Career Details Style */ /* Strat Blog Page Style */ .blog-page .hero-wrap { padding: 110px 0 325px; } .blog-page .hero-content-wrap { max-width: 842px;} .blog-page .hero-content-wrap h1{text-transform: unset; margin-bottom: 18px;} .blog-page .hero-btn {margin-top: 22px;} .blog-page .blog-wrap{padding: 0 0 81px;} .blog-page .blog-inner { margin-top: -207px; position: relative; z-index: 1; } .largest-blog-component{width: 100%; background-color: var(--White); border: 1px solid var(--Alto); border-radius: 10px; padding: 30px; box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.03);} .largest-blog-component .blog-component-thumb{width: 48.48739495798319%; height: auto; border-radius: 8px; overflow: hidden;} .largest-blog-component-content{width: 51.51260504201681%; padding-left: 35px;} .largest-blog-component .blog-component-content{margin-top: 0;} .largest-blog-component .blog-component-content h2{margin-bottom: 10px;} .largest-blog-component .blog-component-author { margin-top: 26px; } .blog-page .blog-component-wrap{margin-top: 150px; row-gap: 83px;} /* End Blog Page Style */ /* Start Blog Details Style */ .blog-details-wrap{float: left; width: 100%; padding: 85px 0 60px;} .blog-details-inner{width: 100%;} .blog-details-component{width: 100%;} .blog-details-component-thumb{width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--Alto);} .blog-details-component-thumb figure{width: 100%; height: 100%;} .blog-details-component-thumb figure img{width: 100%; height: 100%; object-fit: cover;} .blog-details-component-content{width: 100%; margin-top: 60px;} .blog-details-component-content h2{color: var(--Dark_Text);} .blog-details-component .blog-component-author-content h6{font-size: 20px; line-height: 20px; color: var(--Dark_Text);} .blog-details-component .blog-component-author-content em { font-size: 14px; color: var(--Brand_Grey);} .blog-details-component .blog-component-author{margin-top: 54px;} .blog-details-discription-wrap{width: 100%; justify-content: center; margin-top: 60px;} .blog-details-discription{width: 100%; max-width: 1035px;} .blog-details-discription-content{width: 100%;} .blog-details-discription-content p{margin-bottom: 36px;} .blog-details-discription-item-wrap{width: 100%; margin-top: 35px; row-gap: 34px;} .blog-details-discription-item{width: 100%;} .blog-details-discription-item h4{color: var(--Brand_Red);} .blog-details-discription-item figure{float: left; width: 100%; margin: 32px 0 24px; border-radius: 10px; overflow: hidden;} .blog-details-discription-item figure img{width: 100%;} .blog-details-discription-item p{color: var(--Brand_Grey);} .blog-details-page .blog-wrap { padding-top: 74px; } /* End Blog Details Style */ /* Start Work Style */ .work-page .hero-wrap { padding: 110px 0 325px; } .work-page .hero-content-wrap { max-width: 842px;} .work-page .hero-content-wrap h1{text-transform: unset; margin-bottom: 18px;} .work-page .hero-btn {margin-top: 22px;} .largest-work-wrap{float: left; width: 100%;} .largest-work-inner{width: 100%; margin-top: -207px; position: relative; z-index: 1;} .largest-work-component{width: 100%; background-color: var(--White); border: 1px solid var(--Alto); border-radius: 10px; padding: 30px; box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.03); align-items: center;} .work-component-thumb{width: 48.48739495798319%; height: auto; border-radius: 8px; overflow: hidden;} .work-component-thumb figure{width: 100%; height: 100%;} .work-component-thumb figure img{width: 100%; height: 100%; object-fit: cover;} .largest-work-component-content{width: 51.51260504201681%; padding-left: 51px;} .work-component-content{width: 100%;} .work-component-content h2{max-width: 428px; margin-bottom: 17px;} .largest-work-component .project-component-content-btn {margin-top: 20px; } .work-page .project-component-wrap { margin-top: 70px;} .work-page .our-project-wrap { padding-bottom: 77px; } /* End Work Style */ /* Start Work Details Style */ .work-details-wrap{float: left; width: 100%; padding: 132px 0 70px;} .work-details-inner{width: 100%;} .work-details-title-and-content{width: 100%; justify-content: space-between;} .work-details-title{width: 32.8%;} .work-details-title h2{color: var(--Brand_Red);} .work-details-content{width: 59.92%;} .work-details-thumb{width: 100%; margin-top: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--Alto);} .work-details-thumb figure{width: 100%; height: 100%;} .work-details-thumb figure img{width: 100%; height: 100%; object-fit: cover;} .work-details-driscription-wrap{width: 100%; margin-top: 140px; justify-content: center;} .work-details-driscription{max-width: 1036px; row-gap: 84px;} .work-details-driscription-content-wrap{width: 100%;} .work-details-driscription-content-wrap:nth-child(even){justify-content: flex-end;} .work-details-driscription-content{max-width: 749px; width: 100%;} .work-details-driscription-content h2{color: var(--Brand_Red); margin-bottom: 26px;} .work-details-video-wrap{width: 100%; margin-top: 90px; position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--Alto);} .work-details-video-wrap figure{width: 100%; height: 100%; position: relative;} .work-details-video-wrap figure img, .work-details-video-wrap video{width: 100%; height: 100%; object-fit: cover;} .work-details-play-btn{width: 124px; height: 124px; position: absolute; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); cursor: pointer;} .work-details-content-component-wrap{width: 100%; margin-top: 126px; column-gap: 8.8%; row-gap: 40px;} .work-details-content-component{width: 40%;} .work-details-content-component h2{color: var(--Brand_Red); margin-bottom: 24px;} .related-work-wrap{float: left; width: 100%; padding: 66px 0 66px;} .related-work-inner{width: 100%;} .related-work-title{width: 100%;} .related-work-title h2{color: var(--Brand_Red);} .related-work-component-wrap{width: 100%; margin-top: 55px; column-gap: 2.84%; row-gap: 40px;} .related-work-component-wrap .project-component{width: 31.44%; margin-top: 0 !important;} /* End Work Details Style */ /* Start Contact Style */ .contact-page .hero-wrap { padding: 110px 0 325px; } .contact-page .hero-content-wrap { max-width: 842px;} .contact-page .hero-content-wrap h1{text-transform: unset; margin-bottom: 18px;} .contact-page .hero-btn {margin-top: 22px;} .contact-wrap{float: left; width: 100%; padding: 0 0 75px;} .contact-inner{width: 100%; margin-top: -201px; position: relative; z-index: 1;} .contact-container{width: 100%; background-color: var(--White); border-radius: 12px; border: 1px solid var(--Alto); box-shadow: 0 10px 40px rgba(0,0,0,0.05);} .contact-tab-trigger{width: 100%; border-bottom: 1px solid var(--Alto); padding: 54px 20px 45px; justify-content: center;} .contact-tab-trigger ul{max-width: 1035px; width: 100%; column-gap: 50px; display: flex; flex-flow: row wrap;} .contact-tab-trigger ul li a{position: relative; font-size: 24px; line-height: 32px; color: #A3A3A3; font-weight: 700; transition: 0.3s;} .contact-tab-trigger ul li a:after{position: absolute; content: ''; left: 50%; transform: translateX(-50%); bottom: -52px; height: 3px; background-color: var(--Brand_Red); width: 0; transition: 0.3s;} .contact-tab-trigger ul li.active a{color: var(--Brand_Red);} .contact-tab-trigger ul li.active a:after{width: 90px;} .contact-tab-item-wrap{width: 100%; justify-content: center; padding: 72px 20px 50px;} .contact-tab-item{width: 100%; max-width: 1035px; display: none;} .contact-tab-item:nth-child(1){display: block;} .contact-title{width: 100%; text-align: center;} .contact-title h2{margin-bottom: 19px;} .contact-title p{max-width: 517px; margin: 0 auto; font-weight: 500;} .contact-title p a{font-weight: 700; color: var(--Brand_Red);} .contact-tab-item form{width: 100%; margin-top: 52px;} .input-row h6{font-size: 16px; line-height: 29px; font-weight: 700; color: var(--Dark_Text); letter-spacing: 0; text-transform: unset;} .radio-input-row-wrap{width: 100%; margin-top: 16px; row-gap: 16px; column-gap: 16px;} .radio-input-row{width: auto; display: flex; flex-flow: row wrap;} .radio-input-row input{width: 0; height: 0; position: absolute; top: 0; left: 0; border: none; padding: 0; margin: 0; opacity: 0; visibility: hidden;} .radio-input-row label{padding: 16px; font-size: 16px; line-height: 25px; color: var(--Brand_Grey); transition: .3s ease-in-out; font-weight: 500; border-radius: 5px; border: 1px solid var(--Alto); text-align: center; box-shadow: 12px 12px 60px rgba(0,0,0,0); outline: 1px solid transparent;} .radio-input-row-budget .radio-input-row label{min-width: 184px;} .radio-input-row input:checked + label{border: 1px solid var(--Brand_Green); outline: 1px solid var(--Brand_Green); box-shadow: 0 5px 20px rgba(11, 169, 83, 0.1); color: var(--Dark_Text); font-weight: 600; background-color: rgba(11, 169, 83, 0.05);} .get-in-touch-wrap{float: left; width: 100%; padding: 88px 0; background-color: var(--White_Ice); border-top: 1px solid var(--Alto);} .get-in-touch-inner{width: 100%; justify-content: space-between;} .get-in-touch-thumb-wrap{width: 31.44%; background-color: var(--White); border: 1px solid var(--Alto); border-radius: 12px; padding: 30px; justify-content: center; align-items: center; position: relative; min-height: 300px; box-shadow: 0 5px 20px rgba(0,0,0,0.03);} .get-in-touch-logo{max-width: 226px; width: 70%;} .get-in-touch-logo img{width: 100%;} .get-in-touch-thumb-wrap .common-pattern div{width: 33.333333333%;} .get-in-touch-content{width: 62.16%;} .get-in-touch-title{width: 100%;} .get-in-touch-title h2{margin-bottom: 28px;} .get-in-touch-title p{max-width: 642px;} .get-in-touch-item-wrap{width: 100%; row-gap: 50px; margin-top: 55px;} .get-in-touch-item{width: 50%;} .get-in-touch-item a{margin-top: 24px; font-size: 24px; line-height: 28px; font-weight: 700; color: var(--Brand_Red);} .get-in-touch-item-icon{width: 100%;} .get-in-touch-item-icon a{max-width: 32px; margin-top: 0;} .get-in-touch-item span{display: block; font-size: 14px; line-height: 16px; margin-top: 14px;} /* End Contact Style */ /* Start Terms And Condition Style */ .terms-and-policy .hero-wrap{padding: 107px 0 177px;} .terms-and-policy .hero-wrap .common-wrap{max-width: 1074px;} .terms-and-policy .hero-inner{justify-content: flex-start;} .terms-and-policy .hero-content h1{text-transform: unset; margin-bottom: 32px;} .terms-and-policy .hero-content p{font-size: 24px;} .terms-and-policy-section{float: left; width: 100%; padding: 113px 0 30px;} .terms-and-policy-section .common-wrap{max-width: 1075px;} .terms-and-policy-inner{width: 100%;} .terms-and-policy-content{width: 100%; row-gap: 70px;} .terms-and-policy-content-item{width: 100%;} .terms-and-policy-content-item h2{margin-bottom: 28px; color: var(--Brand_Red);} .terms-and-policy-content-item h4{margin-bottom: 24px; color: var(--Brand_Red);} .terms-and-policy-content-item ul{list-style: disc; padding-left: 25px;} .terms-and-policy-content-item h5{margin-bottom: 20px;} .privacy-policy .terms-and-policy-content{row-gap: 50px;} .privacy-policy .terms-and-policy-content ul{padding-left: 0; list-style: none; display: flex; flex-flow: row wrap; row-gap: 24px;} .privacy-policy .terms-and-policy-content ul li{width: 100%; padding-left: 32px; position: relative; line-height: 20px;} .privacy-policy .terms-and-policy-content ul li:before{position: absolute; content: ''; top: 0; left: 0; width: 20px; height: 20px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; background-image: url(../svgs/check.svg); filter: brightness(0) saturate(100%) invert(47%) sepia(93%) saturate(1394%) hue-rotate(114deg) brightness(95%) contrast(92%);} /* End Terms And Condition Style */ /* Start About Style */ .about-hero{min-height: 800px;} .about-hero .hero-content-wrap{max-width: 100%; justify-content: space-between; text-align: left;} .hero-title{width: 52%;} .about-hero .hero-content-wrap h1{text-transform: unset; text-align: left;} .about-hero .hero-content-wrap p{color: var(--Brand_Grey); text-align: left;} .about-hero .hero-content{width: 43.04%;} .about-counter-wrap{float: left; width: 100%; padding-bottom: 150px;} .about-counter-inner{width: 100%; margin-top: -517px; position: relative; z-index: 2;} .about-counter-thumb{width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--Alto);} .about-counter-thumb figure{width: 100%; height: 100%;} .about-counter-thumb figure img{width: 100%; height: 100%; object-fit: cover;} .about-counter-item-wrap{width: 100%; margin-top: 70px;} .about-counter-item{width: 25%; position: relative; text-align: center; padding: 0 10px;} .about-counter-item:after{position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 65px; content: ''; background-color: var(--Alto);} .about-counter-item:last-child:after{display: none;} .about-counter-item span{display: block; font-size: 45px; line-height: 52px; color: var(--Brand_Red); margin-bottom: 20px; font-weight: 700;} .about-counter-item dfn{display: block; font-size: 24px; line-height: 28px; color: var(--Brand_Grey);} .exist-wrap{float: left; width: 100%; padding: 70px 0 90px; position: relative;} .exist-wrap:before{position: absolute; content: ''; top: 0; left: 0; height: 100%; width: 26.52777777777778%; background: rgba(11, 169, 83, 0.05);} .exist-inner{width: 100%; align-items: center; justify-content: space-between;} .exist-thumb{width: 31.44%; border-radius: 10px; overflow: hidden; border: 1px solid var(--Alto);} .exist-thumb figure{width: 100%; height: 100%;} .exist-thumb figure img{width: 100%; height: 100%; object-fit: cover;} .exist-content{width: 63.76%;} .exist-content h2{margin-bottom: 32px;} .exist-content p{max-width: 746px; margin-bottom: 30px;} .exist-content p:last-child{margin-bottom: 0;} .clients-wrap{float: left; width: 100%; padding: 150px 0;} .clients-inner{width: 100%;} .clients-title{width: 100%; text-align: center;} .clients-item-wrap{width: 100%; margin-top: 50px; column-gap: 2.826666666666667%; row-gap: 35px;} .clients-item{width: 22.88%; background-color: var(--White_Ice); border: 1px solid var(--Alto); border-radius: 10px; padding: 10px; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; min-height: 170px; filter: grayscale(100%); opacity: 0.6; transition: 0.3s;} .clients-item:hover { filter: grayscale(0%); opacity: 1; border-color: var(--Brand_Green); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .team-wrap{float: left; width: 100%; padding: 112px 0; background-color: var(--White_Ice); border-top: 1px solid var(--Alto);} .team-inner{width: 100%;} .team-title{width: 100%; text-align: center;} .team-component-wrap{width: 100%; margin-top: 70px; column-gap: 2.826666666666667%; row-gap: 35px; justify-content: center;} .team-component{width: 30%; background: var(--White); border: 1px solid var(--Alto); border-radius: 10px; padding: 40px 20px; text-align: center; display: none; box-shadow: 0 5px 15px rgba(0,0,0,0.02);} .team-component-inner{width: 100%; height: 100%; display: flex; flex-flow: row wrap; align-content: space-between;} .team-component-thumb{width: 100%; display: flex; flex-flow: row wrap; justify-content: center;} .team-component-thumb figure{width: 110px; height: 110px; border: 3px solid rgba(11, 169, 83, 0.2); border-radius: 50%; padding: 4px;} .team-component-thumb figure img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%;} .team-component-content{width: 100%;} .team-component-title{width: 100%; text-align: center; margin-top: 20px;} .team-component-title h5{font-size: 21px; line-height: 31px; color: var(--Dark_Text); margin-bottom: 10px;} .team-component-title span{font-size: 12px; line-height: 17px; color: var(--Brand_Grey); display: block;} .team-component-social{width: 100%; display: flex; flex-flow: row wrap; justify-content: center; margin-top: 20px;} .team-component-social ul{display: flex; flex-flow: row wrap; column-gap: 15px; align-items: center;} .team-component-social ul li{width: 25px;} .team-component-social ul li a{opacity: .5; transition: .3s ease-in-out;} .team-component-social ul li a:hover{opacity: 1; filter: invert(47%) sepia(93%) saturate(1394%) hue-rotate(114deg) brightness(95%) contrast(92%);} .team-btn{width: 100%; margin-top: 70px; justify-content: center;} .process-wrap{float: left; width: 100%; padding: 150px 0 80px;} .process-inner{width: 100%;} .process-title h2{margin-bottom: 20px;} .process-title p{max-width: 642px; margin: 0 auto;} .process-component-wrap{width: 100%; margin-top: 60px; column-gap: 2.826666666666667%; row-gap: 35px; counter-reset: section;} .process-component{width: 22.88%; background-color: var(--White_Ice); border: 1px solid var(--Alto); border-radius: 10px; transition: .3s ease-in-out; box-shadow: 0 5px 20px rgba(0,0,0,0.02); position: relative; overflow: hidden;} .process-component:before{position: absolute; top: 50px; left: 30px; width: 32px; height: 24px; color: var(--Dark_Text); font-size: 16px; line-height: 24px; font-weight: 700; counter-increment: section; content: "0" counter(section); transition: 0.3s;} .process-component:hover{background-color: var(--White); border-color: var(--Brand_Green); box-shadow: 0 10px 30px rgba(11, 169, 83, 0.08);} .process-component:hover:before{color: var(--Brand_Green);} .process-component-shape{width: 100%; min-height: 227px; position: relative;} .process-component-shape .common-pattern div{width: 50%; background: linear-gradient(180deg, rgba(11, 169, 83, 0.05) 0%, rgba(255, 255, 255, 0) 100%);} .process-component-content{width: 100%; margin-top: -40px; position: relative; z-index: 1; padding: 0 30px 30px;} .process-component-content h5{margin-bottom: 20px; font-size: 24px; line-height: 37px; color: var(--Dark_Text); transition: .3s ease-in-out;} .process-component-content p{font-size: 12px; line-height: 28px; color: var(--Brand_Grey); transition: .3s ease-in-out;} .process-component:hover .process-component-content h5{color: var(--Brand_Green);} .process-component:hover .process-component-content p{color: var(--Dark_Text);} /* End About Style */ /* Start Menu Style */ .hamburger {transition: .3s ease-in-out;} .navShown .hamburger {height: 5px;} .navShown .hamburger div{animation: unset !important; background-color: var(--Brand_Red);} .navShown .hamburger div:nth-child(1){transform: rotate(-45deg); top: 0;} .navShown .hamburger div:nth-child(2){background-color: transparent;} .navShown .hamburger div:nth-child(3){transform: rotate(45deg); top: 0; width: 100%;} .navbar-wrap{width: 100%; height: calc(100% - 96px); position: fixed; top: auto; left: 0; bottom: 0; z-index: 999; opacity: 0; visibility: hidden; transition: .3s ease-in-out;} .navShown .navbar-wrap{opacity: 1; visibility: visible;} .navbar-wrap:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: rgba(244, 247, 249, 0.9); backdrop-filter: blur(15px);} .navbar{position: fixed; right: 0; bottom: 0; width: 100%; max-width: 916px; height: calc(100% - 96px); background-color: var(--White); border-left: 1px solid var(--Alto); padding: 54px 72px; overflow-y: scroll; z-index: 1; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webki-ttransition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .navShown{overflow: hidden;} .navShown .navbar{transform: translateX(0); box-shadow: -10px 0 30px rgba(0,0,0,0.05);} .navbar::-webkit-scrollbar{display: none;} .navbar-logo{width: 100%;} .navbar-logo a{width: 180px;} .nav-wrap{width: 100%; margin-top: 41px; justify-content: space-between;} .nav-social { width: 24px; row-gap: 14px; display: flex; flex-flow: row wrap; padding-top: 22px; align-items: flex-start; align-content: flex-start; } .nav-social ul{width: 100%; display: flex; flex-flow: row wrap; row-gap: 16px;} .nav-social ul li{width: 100%; display: flex; flex-flow: row wrap; justify-content: center;} .nav-social ul li a{max-width: 24px;} .nav-social ul li a:hover { filter: invert(47%) sepia(93%) saturate(1394%) hue-rotate(114deg) brightness(95%) contrast(92%); } .nav-social-line{width: 100%; justify-content: center;} .nav-social-line img { filter: invert(0.8); } .main-nav{width: 50%;} .main-nav ul{width: 100%; display: flex; flex-flow: row wrap; row-gap: 39px;} .main-nav ul li{width: 100%; width: 100%;} .main-nav ul li a{width: 100%; font-size: 55px; line-height: 75px; color: var(--Dark_Text); transition: .3s ease-in-out; text-transform: uppercase; font-weight: 700;} .main-nav ul li a:hover,.main-nav ul li.active a{color: var(--Brand_Green);} .nav-contact{width: 214px;} .nav-contact ul{width: 100%; display: flex; flex-flow: row wrap; row-gap: 28px;} .nav-contact ul li{width: 100%;} .nav-contact ul li a{display: flex; flex-flow: row wrap; align-items: flex-start; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--Dark_Text); transition: 0.3s;} .nav-contact ul li a:hover { color: var(--Brand_Green); } .nav-contact ul li a img{width: 20px;} .nav-contact ul li a span{width: calc(100% - 20px); padding-left: 12px;} /* End Menu Style */ .animate-from-bottom{opacity:0;-webkit-transform:translateY(70px);-moz-transform:translateY(70px);transform:translateY(70px);-webkit-transform:translate3d(0,70px,0);transform:translate3d(0,70px,0);transition:all .8s ease;-webkit-transition:all .8s ease;-moz-transition:all .8s ease} .animate-from-bottom.in-view{opacity:1;transform:translateY(0px);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition:all .8s ease;-webkit-transition:all .8s ease;-moz-transition:all .8s ease} @media only screen and (min-width: 769px) { .exist-wrap:before{transform: translateX(-100%); opacity: 0; transition:all .8s ease;-webkit-transition:all .8s ease;-moz-transition:all .8s ease} .exist-wrap.animate-from-bottom.in-view:before{transform: translateX(0); opacity: 1; transition:all .8s ease;-webkit-transition:all .8s ease;-moz-transition:all .8s ease} } .justify-center .line { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .line { position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; } .line span{-webkit-transition: 1.2s cubic-bezier(0.19,1,0.22,1) -webkit-transform;transition: 1.2s cubic-bezier(0.19,1,0.22,1) -webkit-transform;-o-transition: 1.2s cubic-bezier(0.19,1,0.22,1) transform;transition: 1.2s cubic-bezier(0.19,1,0.22,1) transform;transition: 1.2s cubic-bezier(0.19,1,0.22,1) transform, 1.2s cubic-bezier(0.19,1,0.22,1) -webkit-transform;} .split-heading:not(.is-visible) .line .words{ -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%);} /* ======================================================================================================= ============================================ Responsive style ========================================== */ /* Mobile Layout: 320px and 480px and more but less than or equal to 767px. ---------------------------------------------------------------------------------- */ @media only screen and (min-width: 320px) and (max-width: 480px) { input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="number"],input[type="submit"],input[type="password"],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;} body {font-size: 16px; line-height: 28px;} h1 { font-size: 36px; line-height: 44px;} h2 { font-size: 32px; line-height: 40px;} h3 { font-size: 26px; line-height: 30px;} h6 { font-size: 14px; line-height: 24px; letter-spacing: 0.4em; } .lead-text { font-size: 18px; line-height: 30px;} .btn { padding: 12px 16px; border: 2px solid; border-radius: 40px; min-width: 160px; } /* Start Home Style */ .header-logo { width: 150px; padding: 12px 0; } .hamburger-wrap { width: 60px; height: 60px; padding: 15px;} .hero-btn {column-gap: 12px; row-gap: 18px; margin-top: 28px;} .hero-content-wrap h1 { margin-bottom: 20px; } .hero-wrap { padding: 80px 0 190px; } .find-us-wrap{padding-bottom: 60px;} .find-us-inner{margin-top: -115px;} .find-us-thumb {height: 230px;} .play-btn{width: 60px; height: 60px;} .play-btn:after { width: 16px; height: 18px;} .find-us-item-wrap{margin-top: 40px;} .home-about-title-wrap { width: 100%; padding: 60px 20px; } .home-about-title{max-width: 100%;} .home-about-title-thumb-wrap{margin-top: 45px;} .home-about-content-wrap {width: 100%; padding: 60px 20px;} .home-about-content p { margin-bottom: 20px;} .our-services-wrap{padding: 60px 0;} .common-title h6 { margin-bottom: 16px; } .our-services-component-wrap {margin-top: 48px; column-gap: 4%; row-gap: 20px;} .our-services-component{width: 100%;} .our-services-component:nth-child(odd){margin-top: 0;} .our-project-wrap{padding: 60px 0;} .project-component-wrap{margin-top: 48px; row-gap: 40px;} .project-component{width: 100%;} .project-component:nth-child(even){margin-top: 0;} .our-project-btn{margin-top: 60px;} .testimonial-wrap{padding: 60px 0;} .testimonial-component-wrap{margin-top: 48px; width: 100%; padding-bottom: 80px;} .testimonial-component{margin-right: 20px; padding: 20px;} .slick-arrow { width: 52px; height: 52px; } .testimonial-wrap .common-wrap{padding: 0;} .testimonial-title-wrap{padding: 0 20px;} .testimonial-component-wrap .slick-arrow{bottom: -40px; top: auto;} .testimonial-component-wrap .slick-next{right: calc(50% - 65px);} .testimonial-component-wrap .slick-prev{left: calc(50% - 65px);} .testimonial-component-wrap .slick-list { padding: 0 50px 0 20px; } .blog-wrap{padding: 60px 0;} .blog-component-wrap{row-gap: 40px;} .blog-component { width: 100%;} .cta-content h2 { font-size: 32px; line-height: 40px; } .cta-inner{padding: 60px 20px;} .cta-wrap{padding: 0;} .main-footer-section { padding-top: 250px; margin-top: -175px; } .footer-info { width: 100%; max-width: 100%; } .footer-main{row-gap: 40px;} .footer-info-list{margin-top: 40px;} .footer-widget-wrap { width: 100%; justify-content: flex-start; column-gap: 4%; padding-top: 0; row-gap: 40px;} .footer-widget { width: 48%; } .footer-widget.big-widget { width: 100%; } .footer-widget.social-widget ul { justify-content: unset; column-gap: 28px; } .footer-bottom{margin-top: 0; padding: 35px 0;} .find-us-item-wrap{display: block !important;} /* End Home Style */ /* Start Pricing Style */ .pricing-wrap{padding-bottom: 60px;} .pricing-component { width: 100%; padding: 20px;} .pricing-component-wrap{row-gap: 20px;} .pricing-component-content-wrap > span { font-size: 26px; line-height: 26px;} .pricing-component-content-wrap ul { padding-top: 20px; margin-top: 20px; row-gap: 20px;} .pricing-component-title span { font-size: 10px; line-height: 12px; padding: 8px;} .satisfied-clients-wrap{padding: 60px 0;} .satisfied-clients-item-wrap{margin-top: 40px;} .satisfied-clients-item-wrap .js-marquee{column-gap: 20px; margin-right: 20px !important;} .satisfied-clients-item { width: 175px; } .pricing-about-wrap{padding: 60px 0;} .pricing-about-container{margin-top: 40px; row-gap: 20px;} .pricing-about-container .testimonial-component{width: 280px;} .faq-wrap{padding: 60px 0;} .faq-accordion-item-title{padding: 20px;} .faq-accordion-item-title h6{padding-right: 20px;} .faq-accordion-item-title:after{right: 20px;} .faq-accordion-item-content{padding: 15px 20px 20px;} .faq-accordion-item-content:before{width: calc(100% - 40px);} /* End Pricing Style */ /* Start Career Style */ .career-information-thumb{height: 280px;} .career-information-container{margin-top: 40px;} .career-information-item-content span { margin-bottom: 16px; font-size: 36px; line-height: 42px;} .career-information-item-content em {font-size: 20px; line-height: 24px;} .career-information-item-wrap{row-gap: 40px;} .career-information-content { width: 100%; max-width: 100%; padding-left: 0; margin-top: 40px; } .career-information-content h2 { margin-bottom: 20px; } .career-information-content p { margin-bottom: 20px; } .career-information-wrap{padding-bottom: 60px;} .positions-wrap{padding: 60px 0;} .positions-title h2{margin-bottom: 20px;} .positions-component-wrap{margin-top: 40px;} .positions-component{padding: 20px;} .positions-component-content { width: 100%; padding-right: 0; } .positions-component-btn { width: 100%; margin-top: 30px; } .benefit-wrap{padding: 60px 0;} .benefit-component-wrap{margin-top: 40px; column-gap: 2%; row-gap: 20px;} .benefit-component { width: 49%; padding: 20px;} .benefit-component h5 { font-size: 18px; line-height: 20px;} .our-mission-thumb { width: 100%; } .our-mission-wrap{padding: 60px 0;} .our-mission-wrap:before{width: 100%; height: 25%;} .our-mission-content { width: 100%; padding-left: 0; margin-top: 40px; } .our-mission-content h2 { margin-bottom: 18px; } .our-mission-content p { margin-bottom: 20px;} .career-page .cta-wrap{padding-top: 60px;} /* End Career Style */ /* Start Career Details Style */ .career-detail-hero-wrap {padding: 60px 0;} .career-detail-hero-content p { font-size: 18px; line-height: 20px;} .career-submission-wrap { padding: 60px 0; } .career-submission-content{margin-bottom: 40px;} .career-submission-form{margin-top: 0;} .career-submission-form form{margin-top: 40px;} .input-row-wrap{row-gap: 20px;} .input-row{row-gap: 20px;} .input-col { width: 100%; } .career-details-page .cta-wrap{padding-top: 60px;} /* End Career Details Style */ /* Start Blog Style */ .blog-page .blog-inner { margin-top: -260px;} .largest-blog-component{padding: 20px;} .largest-blog-component .blog-component-thumb { width: 100%;} .largest-blog-component-content { width: 100%; padding-left: 0; margin-top: 35px; } .blog-page .blog-component-wrap{margin-top: 40px; row-gap: 40px;} /* End Blog Style */ /* Start Blog Details Style */ .blog-details-wrap{padding: 60px 0;} .blog-details-component-thumb { height: 240px; } .blog-details-component-content{margin-top: 40px;} .blog-details-component .blog-component-author{margin-top: 40px;} .blog-details-component .blog-component-author-content h6 { font-size: 14px; line-height: 16px; } .blog-details-component .blog-component-author-content em { font-size: 12px; } .blog-details-discription-content p{margin-bottom: 24px;} .blog-details-discription-item figure{height: 220px; margin: 20px 0 18px;} .blog-details-discription-item figure img{height: 100%; object-fit: cover;} .blog-details-page .blog-wrap{padding-top: 40px;} /* End Blog Details Style */ /* Start Work Style */ .largest-work-component{padding: 20px;} .work-component-thumb { width: 100%;} .largest-work-component-content { width: 100%; padding: 40px 0 0; } .largest-work-inner { margin-top: -250px; } .work-page .project-component-wrap{margin-top: 40px;} /* End Work Style */ /* Start Work Details Style */ .work-details-wrap{padding: 80px 0 60px;} .work-details-title{width: 100%;} .work-details-content{width: 100%; margin-top: 24px;} .work-details-thumb{margin-top: 40px; height: 280px;} .work-details-driscription-wrap{margin-top: 40px;} .work-details-driscription{row-gap: 40px;} .work-details-driscription-content h2{margin-bottom: 20px;} .work-details-video-wrap{margin-top: 40px; height: 280px;} .work-details-play-btn{width: 65px; height: 65px;} .work-details-content-component-wrap{margin-top: 40px;} .work-details-content-component{width: 100%;} .work-details-content-component h2{margin-bottom: 20px;} .related-work-wrap{padding: 40px 0 60px;} .related-work-component-wrap{margin-top: 32px;} .related-work-component-wrap .project-component{width: 100%;} /* End Work Details Style */ /* Start Contact Style */ .contact-tab-trigger {padding: 40px 15px 20px;} .contact-tab-trigger ul{column-gap: 20px;} .contact-tab-trigger ul li a { font-size: 18px; line-height: 24px;} .contact-tab-trigger ul li a:after { bottom: -25px;} .contact-tab-item-wrap{padding: 40px 15px 40px;} .radio-input-row label { padding: 12px; font-size: 14px; line-height: 22px;} .radio-input-row-budget .radio-input-row label { min-width: auto; } .radio-input-row-wrap{margin-top: 0;} .get-in-touch-title h2 { font-size: 28px; margin-bottom: 15px; } .get-in-touch-thumb-wrap{width: 100%;} .get-in-touch-content{width: 100%; margin-top: 40px;} .get-in-touch-item-wrap{margin-top: 35px; row-gap: 30px;} .get-in-touch-item{width: 100%;} .get-in-touch-item a { margin-top: 16px; font-size: 18px; line-height: 24px;} .get-in-touch-item-icon a{margin-top: 0;} /* End Contact Style */ /* Start Terms And Condition Style */ .terms-and-policy .hero-wrap { padding: 80px 0 100px; } .terms-and-policy-section{padding: 60px 0;} .terms-and-policy-content-item h2{margin-bottom: 18px;} .terms-and-policy-content-item h4{margin-bottom: 18px;} .terms-and-policy-content{row-gap: 40px !important;} /* End Terms And Condition Style */ /* Start About Style */ .about-hero{min-height: 560px;} .hero-title { width: 100%; } .about-hero .hero-content { width: 100%; } .about-counter-inner { margin-top: -148px;} .about-counter-item { width: 100%; padding: 10px 0; } .about-counter-item-wrap{margin-top: 40px;} .about-counter-item span { font-size: 32px; line-height: 38px; margin-bottom: 14px;} .about-counter-item dfn {font-size: 18px; line-height: 22px;} .about-counter-item:after{top: auto; bottom: 0; width: 100%; height: 1px; left: 50%; transform: translateX(-50%); right: 0;} .about-counter-wrap{padding-bottom: 60px;} .exist-thumb { width: 100%; } .exist-content { width: 100%; margin-top: 40px;} .exist-content h2 { margin-bottom: 16px; } .exist-wrap:before{height: 300px; width: 100%;} .exist-content p{margin-bottom: 18px;} .exist-wrap{padding: 60px 0 30px;} .clients-wrap{padding: 30px 0 60px;} .clients-item-wrap{margin-top: 30px; column-gap: 4%; row-gap: 20px;} .clients-item { width: 48%; padding: 20px; min-height: 120px; } .clients-item img{height: 30px;} .team-wrap{padding: 60px 0;} .team-component-wrap{margin-top: 35px; row-gap: 20px;} .team-component { width: 100%;} .team-btn{margin-top: 35px;} .process-wrap{padding: 60px 0;} .process-component-wrap{margin-top: 35px;} .process-component { width: 100%;} /* End About Style */ /* Start Menu Style */ .navbar-wrap { height: calc(100% - 61px);} .navbar { height: calc(100% - 61px);} .navbar{padding: 50px 20px;} .navbar-logo{display: none;} .main-nav{width: calc(100% - 24px); padding-left: 20px;} .main-nav ul li a { font-size: 42px; line-height: 45px; } .nav-contact { width: 100%; margin-top: 50px; } .nav-social{padding-top: 0;} .nav-wrap{margin-top: 0;} .nav-social-line img{width: 5px;} /* End Menu Style */ } @media only screen and (min-width: 320px) and (max-width: 374px) { .main-nav ul li a { font-size: 38px; line-height: 42px; } } /* Tablet Layout: 768px. ----------------------------------------------------------------- */ @media only screen and (min-width: 481px) and (max-width: 768px) { input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="number"],input[type="submit"],input[type="password"],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;} body {font-size: 16px; line-height: 28px;} h1 { font-size: 36px; line-height: 44px;} h2 { font-size: 32px; line-height: 40px;} h6 { font-size: 14px; line-height: 24px; letter-spacing: 0.4em; } .lead-text { font-size: 18px; line-height: 30px;} .btn { padding: 12px 16px; border: 2px solid; border-radius: 40px; min-width: 160px; } /* Start Home Style */ .header-logo { width: 150px; padding: 12px 0; } .hamburger-wrap { width: 60px; height: 60px; padding: 15px;} .hero-btn {column-gap: 12px; row-gap: 18px; margin-top: 28px;} .hero-content-wrap h1 { margin-bottom: 20px; } .hero-wrap { padding: 80px 0 190px; } .find-us-wrap{padding-bottom: 60px;} .find-us-inner{margin-top: -115px;} .find-us-thumb {height: 230px;} .play-btn{width: 60px; height: 60px;} .play-btn:after { width: 16px; height: 18px;} .find-us-item-wrap{margin-top: 40px;} .home-about-title-wrap { width: 100%; padding: 60px 20px; } .home-about-title{max-width: 100%;} .home-about-title-thumb-wrap{margin-top: 45px;} .home-about-content-wrap {width: 100%; padding: 60px 20px;} .home-about-content p { margin-bottom: 20px;} .our-services-wrap{padding: 60px 0;} .common-title h6 { margin-bottom: 16px; } .our-services-component-wrap {margin-top: 48px; column-gap: 4%; row-gap: 20px;} .our-services-component{width: 48%;} .our-services-component:nth-child(odd){margin-top: 0;} .our-project-wrap{padding: 60px 0;} .project-component-wrap{margin-top: 48px; row-gap: 20px; column-gap: 4%;} .project-component{width: 48%;} .project-component:nth-child(even){margin-top: 40px;} .our-project-btn{margin-top: 60px;} .testimonial-wrap{padding: 60px 0;} .testimonial-component-wrap{margin-top: 48px; width: 100%; padding-bottom: 80px;} .testimonial-component{margin-right: 20px; padding: 20px;} .slick-arrow { width: 52px; height: 52px; } .testimonial-wrap .common-wrap{padding: 0;} .testimonial-title-wrap{padding: 0 20px;} .testimonial-component-wrap .slick-arrow{bottom: -40px; top: auto;} .testimonial-component-wrap .slick-next{right: calc(50% - 65px);} .testimonial-component-wrap .slick-prev{left: calc(50% - 65px);} .testimonial-component-wrap .slick-list { padding: 0 50px 0 20px; } .blog-wrap{padding: 60px 0;} .blog-component-wrap{row-gap: 40px; column-gap: 4%;} .blog-component { width: 48%;} .cta-content h2 { font-size: 32px; line-height: 40px; } .cta-inner{padding: 80px 20px;} .cta-wrap{padding: 0;} .main-footer-section { padding-top: 250px; margin-top: -175px; } .footer-info { width: 100%; max-width: 100%; } .footer-main{row-gap: 40px;} .footer-info-list{margin-top: 40px;} .footer-widget-wrap { width: 100%; justify-content: flex-start; column-gap: 0; padding-top: 0; row-gap: 40px;} .footer-widget{ width: 20%;} .footer-widget.big-widget { width: 30%;} .footer-widget.social-widget ul { justify-content: unset; column-gap: 16px; } .footer-bottom{margin-top: 0; padding: 35px 0;} .find-us-item-wrap{display: block !important;} /* End Home Style */ /* Start Pricing Style */ .pricing-wrap{padding-bottom: 60px;} .pricing-component { width: 100%; padding: 20px;} .pricing-component-wrap{row-gap: 20px;} .pricing-component-content-wrap > span { font-size: 26px; line-height: 26px;} .pricing-component-content-wrap ul { padding-top: 20px; margin-top: 20px; row-gap: 20px;} .pricing-component-title span { font-size: 10px; line-height: 12px; padding: 8px;} .satisfied-clients-wrap{padding: 60px 0;} .satisfied-clients-item-wrap{margin-top: 40px;} .satisfied-clients-item-wrap .js-marquee{column-gap: 20px; margin-right: 20px !important;} .satisfied-clients-item { width: 175px; } .pricing-about-wrap{padding: 60px 0;} .pricing-about-container{margin-top: 40px; row-gap: 20px;} .pricing-about-container .testimonial-component{width: 320px;} .faq-wrap{padding: 60px 0;} .faq-accordion-item-title{padding: 20px;} .faq-accordion-item-title h6{padding-right: 20px;} .faq-accordion-item-title:after{right: 20px;} .faq-accordion-item-content{padding: 15px 20px 20px;} .faq-accordion-item-content:before{width: calc(100% - 40px);} /* End Pricing Style */ /* Start Career Style */ .career-information-thumb{height: 280px;} .career-information-container{margin-top: 40px;} .career-information-item-content span { margin-bottom: 16px; font-size: 36px; line-height: 42px;} .career-information-item-content em {font-size: 20px; line-height: 24px;} .career-information-item-wrap{row-gap: 40px;} .career-information-content { width: 100%; max-width: 100%; padding-left: 0; margin-top: 40px; } .career-information-content h2 { margin-bottom: 20px; } .career-information-content p { margin-bottom: 20px; } .career-information-wrap{padding-bottom: 60px;} .positions-wrap{padding: 60px 0;} .positions-title h2{margin-bottom: 20px;} .positions-component-wrap{margin-top: 40px;} .positions-component{padding: 20px;} .benefit-wrap{padding: 60px 0;} .benefit-component-wrap{margin-top: 40px; column-gap: 2%; row-gap: 20px;} .benefit-component { width: 49%; padding: 20px;} .benefit-component h5 { font-size: 18px; line-height: 20px;} .our-mission-thumb { width: 100%; } .our-mission-wrap{padding: 60px 0;} .our-mission-wrap:before{width: 100%; height: 25%;} .our-mission-content { width: 100%; padding-left: 0; margin-top: 40px; } .our-mission-content h2 { margin-bottom: 18px; } .our-mission-content p { margin-bottom: 20px;} .career-page .cta-wrap{padding-top: 60px;} /* End Career Style */ /* Start Career Details Style */ .career-detail-hero-wrap {padding: 75px 0;} .career-detail-hero-content p { font-size: 18px; line-height: 20px;} .career-submission-wrap { padding: 60px 0; } .career-submission-content{margin-bottom: 40px;} .career-submission-form{margin-top: 0;} .career-submission-form form{margin-top: 40px;} .input-row-wrap{row-gap: 20px;} .input-row{row-gap: 20px;} .input-col { width: 100%; } .career-details-page .cta-wrap{padding-top: 60px;} /* End Career Details Style */ /* Start Blog Style */ .blog-page .blog-inner { margin-top: -260px;} .largest-blog-component{padding: 20px;} .largest-blog-component .blog-component-thumb { width: 100%; height: 280px;} .largest-blog-component-content { width: 100%; padding-left: 0; margin-top: 35px; } .blog-page .blog-component-wrap{margin-top: 40px; row-gap: 40px;} /* End Blog Style */ /* Start Blog Details Style */ .blog-details-wrap{padding: 60px 0;} .blog-details-component-thumb { height: 280px; } .blog-details-component-content{margin-top: 40px;} .blog-details-component .blog-component-author{margin-top: 40px;} .blog-details-component .blog-component-author-content h6 { font-size: 14px; line-height: 16px; } .blog-details-component .blog-component-author-content em { font-size: 12px; } .blog-details-discription-content p{margin-bottom: 24px;} .blog-details-discription-item figure{height: 250px; margin: 20px 0 18px;} .blog-details-discription-item figure img{height: 100%; object-fit: cover;} .blog-details-page .blog-wrap{padding-top: 40px;} /* End Blog Details Style */ /* Start Work Style */ .largest-work-component{padding: 20px;} .work-component-thumb { width: 100%;} .largest-work-component-content { width: 100%; padding: 40px 0 0; } .largest-work-inner { margin-top: -250px; } .work-page .project-component-wrap{margin-top: 40px;} /* End Work Style */ /* Start Work Details Style */ .work-details-wrap{padding: 80px 0 60px;} .work-details-title{width: 100%;} .work-details-content{width: 100%; margin-top: 24px;} .work-details-thumb{margin-top: 40px; height: 380px;} .work-details-driscription-wrap{margin-top: 40px;} .work-details-driscription{row-gap: 40px;} .work-details-driscription-content h2{margin-bottom: 20px;} .work-details-video-wrap{margin-top: 40px; height: 380px;} .work-details-play-btn{width: 65px; height: 65px;} .work-details-content-component-wrap{margin-top: 40px;} .work-details-content-component{width: 100%;} .work-details-content-component h2{margin-bottom: 20px;} .related-work-wrap{padding: 40px 0 60px;} .related-work-component-wrap{margin-top: 32px; column-gap: 4%;} .related-work-component-wrap .project-component{width: 48%;} /* End Work Details Style */ /* Start Contact Style */ .contact-tab-trigger {padding: 40px 20px 20px;} .contact-tab-trigger ul{column-gap: 20px;} .contact-tab-trigger ul li a { font-size: 18px; line-height: 24px;} .contact-tab-trigger ul li a:after { bottom: -25px;} .contact-tab-item-wrap{padding: 40px 20px 40px;} .radio-input-row label { padding: 12px; font-size: 14px; line-height: 22px;} .radio-input-row-budget .radio-input-row label { min-width: auto; } .radio-input-row-wrap{margin-top: 0;} .get-in-touch-title h2 { font-size: 28px; margin-bottom: 15px; } .get-in-touch-thumb-wrap{width: 100%;} .get-in-touch-content{width: 100%; margin-top: 40px;} .get-in-touch-item-wrap{margin-top: 35px; row-gap: 30px;} .get-in-touch-item a { margin-top: 16px; font-size: 18px; line-height: 24px;} .get-in-touch-item-icon a{margin-top: 0;} /* End Contact Style */ /* Start Terms And Condition Style */ .terms-and-policy .hero-wrap { padding: 80px 0 100px; } .terms-and-policy-section{padding: 60px 0;} .terms-and-policy-content-item h2{margin-bottom: 18px;} .terms-and-policy-content-item h4{margin-bottom: 18px;} .terms-and-policy-content{row-gap: 40px !important;} /* End Terms And Condition Style */ /* Start About Style */ .about-hero{min-height: 560px;} .hero-title { width: 100%; } .about-hero .hero-content { width: 100%; } .about-hero .hero-content-wrap p{float: left;} .about-counter-inner { margin-top: -230px;} .about-counter-item { width: 50%; padding: 10px 0; } .about-counter-item-wrap{margin-top: 40px;} .about-counter-item span { font-size: 32px; line-height: 38px; margin-bottom: 14px;} .about-counter-item dfn {font-size: 18px; line-height: 22px;} .about-counter-item:nth-child(2n + 2)::after{display: none;} .about-counter-wrap{padding-bottom: 60px;} .exist-thumb { width: 100%; height: 420px;} .exist-content { width: 100%; margin-top: 40px;} .exist-content h2 { margin-bottom: 16px; } .exist-wrap:before{height: 300px; width: 100%;} .exist-content p{margin-bottom: 18px;} .exist-wrap{padding: 60px 0 30px;} .clients-wrap{padding: 30px 0 60px;} .clients-item-wrap{margin-top: 30px; column-gap: 4%; row-gap: 35px;} .clients-item { width: 48%; padding: 20px; min-height: 120px; } .clients-item img{height: 40px;} .team-wrap{padding: 60px 0;} .team-component-wrap{margin-top: 35px; row-gap: 35px; column-gap: 4%;} .team-component { width: 48%;} .team-btn{margin-top: 35px;} .process-wrap{padding: 60px 0;} .process-component-wrap{margin-top: 35px; column-gap: 4%;} .process-component { width: 48%;} /* End About Style */ .home-about-title-thumb { max-width: 80%; } /* Start Menu Style */ .navbar-wrap { height: calc(100% - 61px);} .navbar { height: calc(100% - 61px);} .navbar{padding: 50px 20px;} .navbar-logo{display: none;} .main-nav{width: calc(100% - 30px); padding-left: 40px;} .main-nav ul li a { font-size: 60px; line-height: 66px; } .nav-contact { width: 100%; margin-top: 50px; } .nav-social{padding-top: 0;} .nav-wrap{margin-top: 0;} /* End Menu Style */ } /* Tablet Layout: 1024px. ----------------------------------------------------------------- */ @media only screen and (min-width: 769px) and (max-width: 991px) { input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="number"],input[type="submit"],input[type="password"],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;} body{line-height: 28px;} h1 { font-size: 42px; line-height: 52px;} h2 { font-size: 36px; line-height: 46px;} /* Start Blog Style */ .largest-blog-component{padding: 20px;} .largest-blog-component-content{padding-left: 20px;} .blog-page .blog-component-wrap { margin-top: 80px; row-gap: 60px;} .cta-content h2 { font-size: 42px; line-height: 60px; } /* End Blog Style */ /* Start Work Style */ .largest-work-component{padding: 20px; align-items: unset;} .largest-work-component-content { padding-left: 25px; } .work-page .project-component-wrap{margin-top: 25px;} .work-details-wrap { padding: 100px 0 60px; } .work-details-title { width: 35.8%; } .work-details-driscription-wrap{margin-top: 80px;} .work-details-driscription{row-gap: 60px;} .work-details-play-btn { width: 100px; height: 100px;} .work-details-content-component-wrap{margin-top: 100px; column-gap: 6%;} .work-details-content-component { width: 47%; } /* End Work Style */ /* Start Contact Style */ .contact-tab-trigger ul li a:after { bottom: -48px;} .get-in-touch-thumb-wrap{width: 100%; min-height: 400px;} .get-in-touch-content{width: 100%; margin-top: 30px;} /* End Contact Style */ /* Start About Style */ .about-hero { min-height: 650px; } .about-counter-inner {margin-top: -330px;} .exist-inner{align-items: unset;} .process-component-shape { width: 100%; min-height: 150px;} .process-component:before{top: 25px; left: 15px;} .process-component-content{padding: 0 20px 15px 20px;} .about-counter-item span { font-size: 36px; line-height: 46px;} .about-counter-item dfn { font-size: 16px; line-height: 22px;} .about-counter-wrap{padding-bottom: 100px;} .exist-content p{margin-bottom: 20px;} .exist-content h2{margin-bottom: 20px;} .clients-wrap{padding: 80px 0;} .team-wrap{padding: 80px 0;} .team-component { width: 31.45%;} .team-component-title h5 { font-size: 20px; line-height: 30px;} .process-wrap{padding: 80px 0 50px;} .process-component-content h5 { margin-bottom: 16px; font-size: 18px; line-height: 24px;} .process-component-content p{line-height: 22px;} /* End About Style */ /* Start Menu Style */ .navbar{padding: 50px 20px;} .navbar-logo{display: none;} /* End Menu Style */ } @media only screen and (min-width: 992px) and (max-width: 1024px) { input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="number"],input[type="submit"],input[type="password"],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;} h1 { font-size: 48px; line-height: 64px;} h2 { font-size: 40px; line-height: 52px;} /* Start About Style */ .about-counter-inner {margin-top: -450px;} .exist-inner{align-items: unset;} .process-component-shape { width: 100%; min-height: 190px;} .process-component:before{left: 20px;} .process-component-content{padding: 0 20px 20px 20px;} /* End About Style */ } /* ======================================================== WordPress Overrides: Reset Visited Link Colors ======================================================== */ a:visited { color: var(--Brand_Red); } /* Force specific buttons to keep their original colors */ .btn:visited, .arrow-btn:visited, .secondary-arrow-btn:visited, .project-component-thumb:visited { color: inherit; text-decoration: none; } /* 1. Force ONLY the Company and Message CF7 wrappers to take full width */ span.wpcf7-form-control-wrap.company, span.wpcf7-form-control-wrap.your-message { width: 100%; flex: 1; display: block; } /* 2. Force the actual input box and text area to stretch inside those wrappers */ .input-row p{ width: 100% !important; max-width: 100%; box-sizing: border-box; } /* ========================================================================== CF7 CUSTOM LAYOUT (Replaces Inline Styles) ========================================================================== */ /* Stack the form vertically */ .tab-two-form { flex-direction: column; } /* Radio Button Row Layout */ .custom-radio-row { flex-direction: column; align-items: flex-start; margin-bottom: 30px; } /* Radio Group Titles */ .radio-group-title { display: block; margin-bottom: 15px; font-weight: 700; color: var(--Dark_Text); font-size: 14px; } /* Full Width Columns */ .company-col, .message-col { width: 100%; } /* Align Submit Button to the Right */ .submit-right { justify-content: flex-end; width: 100%; } /* ========================================================================== CF7 RADIO BUTTON STYLING ========================================================================== */ .wpcf7-radio .wpcf7-list-item input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .wpcf7-radio .wpcf7-list-item { display: inline-block; margin: 0 15px 15px 0; } .wpcf7-radio .wpcf7-list-item label { cursor: pointer; display: block; margin: 0; } .wpcf7-radio .wpcf7-list-item-label { display: inline-block; padding: 12px 24px; border: 1px solid var(--Alto); border-radius: 5px; color: var(--Brand_Grey); font-size: 16px; background-color: var(--White); transition: all 0.3s ease; } .wpcf7-radio .wpcf7-list-item:hover .wpcf7-list-item-label { border-color: var(--Brand_Green); } .wpcf7-radio .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label { border: 2px solid var(--Brand_Green); color: var(--Dark_Text); font-weight: 600; box-shadow: 0 5px 15px rgba(11, 169, 83, 0.1); padding: 11px 23px; background-color: rgba(11, 169, 83, 0.05); } .work-details-video-wrap { position: relative; cursor: pointer; } .work-details-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: block; } .work-details-play-btn img { pointer-events: none; } .work-details-page .largest-work-inner{ margin-top:120px ;} .work-details-page .work-details-driscription-wrap{margin-top:20px ;} .terms-and-policy-section h4.wp-block-heading, .terms-and-policy-section ul.wp-block-list{ padding: 35px 0 !important ;} /* ========================================================================== OVERRIDE: WHITE ICE THEME, VIVID COLORS, AND LAYOUT FIXES ========================================================================== */ /* 1. Global Color Variables (White Ice Theme) */ :root { --Brand_Green: #0ba953; --Brand_Red: #FF2A2A; --White_Ice: #F4F7F9; --Dark_Text: #1E232E; } /* Base Background */ body, .main-wrap { background-color: var(--White_Ice) !important; } /* 2. Remove Staggered (Even/Odd) Project Layout */ .project-component:nth-child(even) { margin-top: 0 !important; } .project-component-wrap { row-gap: 40px !important; } /* 3. Primary Button (Solid Red -> Transparent Hover) */ .btn { background-color: var(--Brand_Red) !important; color: var(--bg-main) !important; border: 2px solid var(--Brand_Red) !important; transition: all .4s ease-in-out !important; } .btn:hover { background-color: transparent !important; color: var(--Brand_Red) !important; } /* 4. Secondary/Outline Button (Transparent -> Solid Red Hover) */ .transparent { background-color: transparent !important; color: var(--Dark_Text) !important; /* Black/Dark text */ border: 2px solid var(--Brand_Red) !important; } .transparent:hover { background-color: var(--Brand_Red) !important; color: var(--bg-main) !important; } /* 5. Force ALL Arrow Links to be identical Vivid Red */ .project-component-content-btn a, .arrow-btn, .secondary-arrow-btn { color: var(--Brand_Red) !important; font-weight: 700 !important; opacity: 1 !important; transition: 0.3s ease-in-out !important; } /* Arrow icon color match (Vivid Red filter) */ .project-component-content-btn a:after, .arrow-btn:after, .secondary-arrow-btn:after { filter: invert(34%) sepia(93%) saturate(3015%) hue-rotate(345deg) brightness(101%) contrast(106%) !important; transition: .3s ease-in-out !important; } /* Arrow hover effect (Slides right smoothly) */ .project-component-content-btn a:hover, .arrow-btn:hover, .secondary-arrow-btn:hover { color: var(--Brand_Red) !important; } .project-component-content-btn a:hover:after, .arrow-btn:hover:after, .secondary-arrow-btn:hover:after { right: -5px !important; } /* 6. Form Input Focus Border (Red) */ .input-row textarea:focus, .input-row input:focus { border-color: var(--Brand_Red) !important; box-shadow: 0 0 10px rgba(255, 42, 42, 0.1) !important; outline: none !important; } /* 7. Blog Titles Normal Color */ .blog-component-content h5, .blog-details-component-content h2 { color: var(--Dark_Text) !important; } /* ========================================================================== FIX: TESTIMONIAL SLIDER ARROWS (No Buggy Hover) ========================================================================== */ /* 1. Default State: Clean white button, default grey arrow */ .slick-arrow::before { background-color: var(--White) !important; border: 1px solid var(--Alto) !important; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05) !important; /* Replaced filter drop-shadow with box-shadow for stability */ filter: none !important; /* Removes any previous buggy filters */ transition: all 0.3s ease-in-out !important; } /* 2. Hover State: Solid Red background, keep the same grey arrow */ .slick-arrow:hover::before { background-color: var(--Brand_Red) !important; border-color: var(--Brand_Red) !important; box-shadow: 0px 5px 15px rgba(255, 42, 42, 0.3) !important; filter: none !important; /* Ensures the background color doesn't invert/glitch */ } /* 3. Stop the image swap on hover to keep the arrow consistently grey */ .slick-prev:hover::before { background-image: url(../svgs/arrow-left.svg) !important; } .slick-next:hover::before { background-image: url(../svgs/arrow-right.svg) !important; } /* ========================================================================== FIX: FOOTER SPACING (More Breathing Room) ========================================================================== */ /* 1. Add more padding inside the main footer container */ .footer-main { padding-top: 40px !important; padding-bottom: 70px !important; /* Adds more space before the bottom border */ } /* 2. Increase horizontal space (gap) between the widget columns */ .footer-widget-wrap { justify-content: flex-end !important; /* Keeps them aligned to the right side */ column-gap: 80px !important; /* INCREASE THIS VALUE (e.g., 90px or 100px) if you want even more space */ } /* 2. Optional: Give each widget a specific minimum width to ensure they don't squish */ .footer-widget { min-width: 120px !important; /* Ensures the column takes up enough space */ } /* 3. Increase vertical space between the widget links */ .footer-widget ul { margin-top: 25px !important; /* Space between Heading and first link */ row-gap: 18px !important; /* Space between each link */ } .footer-widget.social-widget { min-width: auto !important; padding-left: 20px !important; /* Adds a bit of extra space just before the social icons */ } /* 4. Increase vertical space in the left contact info list */ .footer-info-list { margin-top: 40px !important; } .footer-info-list ul { row-gap: 24px !important; /* Space between website, email, and phone */ } /* 5. Adjust Mobile/Tablet spacing gracefully */ @media only screen and (max-width: 768px) { .footer-widget-wrap { justify-content: flex-start !important; /* On mobile, left alignment is better */ column-gap: 40px !important; row-gap: 40px !important; } } /* ========================================================================== FIX: TESTIMONIAL SECTION BACKGROUND (Distinct Light Grey) ========================================================================== */ /* 1. Apply a deeper, clear Light Grey background to separate the sections */ .testimonial-wrap, .pricing-about-wrap { background-color: #F0F2F5 !important; /* A cool, distinct light grey */ border-top: 1px solid var(--Alto) !important; /* Adds a crisp line above */ border-bottom: 1px solid var(--Alto) !important; /* Adds a crisp line below */ } /* 2. Ensure the individual testimonial cards remain Pure White to pop out */ .testimonial-component { background-color: var(--bg-main) !important; border: 1px solid #E2E6EA !important; box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important; /* Slightly stronger shadow for depth */ } /* ========================================================================== FIX: MENU TEXT SIZE & SPACING (Balanced "Sweet Spot") ========================================================================== */ /* 1. Default Desktop (Bold but contained) */ .main-nav ul { row-gap: 22px !important; /* Spacing ektu barano holo */ } .main-nav ul li a { font-size: 48px !important; /* Ager 55 theke komiye 46 kora holo (Perfect balance) */ line-height: 58px !important; } /* 2. Standard Responsive adjustments for Tablets/Mobiles */ @media only screen and (max-width: 991px) { .main-nav ul { row-gap: 20px !important; } .main-nav ul li a { font-size: 38px !important; line-height: 48px !important; } } /* 3. CRITICAL: Height-based adjustments for short windows (Laptops) */ @media only screen and (max-height: 750px) { .navbar { padding: 40px 50px !important; } .nav-wrap { margin-top: 25px !important; } .main-nav ul { row-gap: 15px !important; } .main-nav ul li a { font-size: 34px !important; /* 26 theke bariye 34 kora holo */ line-height: 44px !important; } } /* Extra safety for extremely short windows (Height less than 600px) */ @media only screen and (max-height: 600px) { .navbar { padding: 25px !important; } .main-nav ul { row-gap: 10px !important; } .main-nav ul li a { font-size: 26px !important; /* 22 theke bariye 26 kora holo */ line-height: 36px !important; } } /* ========================================================================== FIX: ACTIVE MENU ITEM (Current Page Highlight) ========================================================================== */ /* Target normal .active class AND WordPress specific current page classes */ .main-nav ul li.active > a, .main-nav ul li.current-menu-item > a, .main-nav ul li.current_page_item > a { color: var(--Brand_Green) !important; text-shadow: 0 0 15px rgba(11, 169, 83, 0.3) !important; /* Ektu subtle glow jate clear bojha jay */ } /* Same for the contact menu (if they have active states) */ .nav-contact ul li.active > a, .nav-contact ul li.current-menu-item > a, .nav-contact ul li.current_page_item > a { color: var(--Brand_Green) !important; } /* ========================================================================== FIX: LOGO SIZE ADJUSTMENT (260px Width) ========================================================================== */ /* 1. Header Logo */ .header-logo { width: 260px !important; max-width: 100% !important; } /* 2. Full-Screen Navbar Menu Logo */ .navbar-logo a { width: 260px !important; max-width: 100% !important; } /* 3. Footer Logo */ .footer-logo a { max-width: 260px !important; /* Footer-e mainly max-width limit kora thake */ width: 100% !important; } /* 4. Mobile Safety (So it doesn't overlap the hamburger menu on small phones) */ @media only screen and (max-width: 768px) { .header-logo { width: 200px !important; /* Mobile-e ektu chhoto rakhlei clean lagbe */ } } /* ========================================================================== Single Services Page Styles ========================================================================== */ /* --- 1. Hero Banner Adjustments --- */ .service-details-page .hero-wrap{ padding-bottom: 83px;} .service-hero-content { margin: 0 auto; text-align: center; } .service-hero-excerpt { max-width: 800px; margin: 20px auto 0; } /* --- 2. Main Content Wrap & Typography --- */ .service-content-wrap { padding: 80px 0; background: var(--bg-main); } .service-content-wrap .content-area { max-width: 800px; margin: 0 auto; font-size: 18px; line-height: 1.8; color: var(--text-main); } .service-content-wrap .content-area p { margin-bottom: 30px; } .service-content-wrap .content-area h1.wp-block-heading{ padding-top: 50px;} .service-content-wrap .content-area h2, .service-content-wrap .content-area h3, .service-content-wrap .content-area h4 { color: var(--text-heading); margin-top: 50px; margin-bottom: 20px; line-height: 1.3; } /* --- 3. Lists Styling (Inside Editor) --- */ .service-content-wrap .content-area ul { list-style: none; padding-left: 0; margin-bottom: 35px; } .service-content-wrap .content-area ul li { position: relative; padding-left: 35px; margin-bottom: 15px; font-size: 17px; } .service-content-wrap .content-area ul li::before { content: '✓'; position: absolute; left: 0; top: 2px; color: #10b981; /* MarkupMarvel Green */ font-weight: 800; font-size: 18px; } .service-content-wrap .content-area ol { margin-bottom: 35px; padding-left: 20px; } .service-content-wrap .content-area ol li { margin-bottom: 15px; font-size: 17px; padding-left: 10px; } /* --- 4. Embedded Media Styling (Images & Video) --- */ .service-content-wrap .content-area figure { padding: 50px 0; } .service-content-wrap .content-area img { border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); width: 100%; height: auto; display: block; } /* Makes YouTube/Vimeo embeds perfectly responsive */ .service-content-wrap .content-area .wp-block-embed-youtube, .service-content-wrap .content-area .wp-block-embed-vimeo { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .service-content-wrap .content-area .wp-block-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* --- 5. More Services Section (Bottom Area) --- */ .more-services-wrap { padding: 100px 0; background: var(--bg-secondary); border-top: 1px solid #e5e7eb; } .more-services-title { text-align: center; margin-bottom: 60px; } .more-services-title h6 { color: var(--accent-color); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } .more-services-title h2 { font-size: 38px; color: var(--text-heading); } /* --- 6. Sleek Agency Grid & Cards --- */ .more-services-grid { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; } .service-hover-card { width: calc(33.333% - 20px); min-width: 300px; background: var(--bg-main); padding: 40px; border-radius: 12px; border: 1px solid #f3f4f6; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.02); } .service-hover-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); border-color: var(--bg-main); } /* Card Internal Elements */ .service-hover-card .card-icon { margin-bottom: 25px; width: 60px; height: 60px; background: #eef2ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .service-hover-card .card-icon img { width: 30px; height: 30px; } .service-hover-card .card-icon span { font-size: 24px; color: #10b981; } .service-hover-card h4 { margin-bottom: 15px; font-size: 22px; color: var(--text-heading); } .service-hover-card h4 a { text-decoration: none; color: inherit; transition: color 0.3s ease; } .service-hover-card:hover h4 a { color: var(--accent-color); } .service-hover-card p { color: #6b7280; font-size: 15px; line-height: 1.7; margin-bottom: 30px; } .service-detail-link { color: var(--accent-color); font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .service-detail-link span { font-size: 18px; } /* --- Inline Links & Post Navigation --- */ .service-content-wrap .content-area a { color: var(--accent-color); /* Vivid red */ text-decoration: none; font-weight: 600; /* Makes the link stand out from regular text */ transition: all 0.3s ease; } .service-content-wrap .content-area a:hover { color: #dc2626; /* Slightly darker red on hover */ text-decoration: underline; } /* Optional: Adds spacing if those "Previous / Next" links are smashed together */ .service-content-wrap .content-area .nav-links, .service-content-wrap .content-area .post-navigation { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eaeaea; display: flex; justify-content: space-between; } /* Retina media query. */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { }