/* TemplateMo 562 Space Dynamic https://templatemo.com/tm-562-space-dynamic */ /* --------------------------------------------- Table of contents ------------------------------------------------ 01. font & reset css 02. reset 03. global styles 04. header 05. banner 06. features 07. testimonials 08. contact 09. footer 10. preloader 11. search 12. portfolio --------------------------------------------- */ /* --------------------------------------------- font & reset css --------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); /* --------------------------------------------- reset --------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, figure, header, nav, section, article, aside, footer, figcaption { margin: 0; padding: 0; border: 0; outline: 0; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-sizer, .grid-item { width: 50%; } .grid-item { float: left; } .grid-item img { display: block; max-width: 100%; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } ul, li { padding: 0; margin: 0; list-style: none; } header, nav, section, article, aside, footer, hgroup { display: block; } * { box-sizing: border-box; } html, body { font-family: 'Poppins', sans-serif; font-weight: 400; background-color: #fff; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none !important; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0px; } ul { margin-bottom: 0px; } p { font-size: 15px; line-height: 30px; color: #2a2a2a; } img { width: 100%; overflow: hidden; } /* --------------------------------------------- global styles --------------------------------------------- */ html, body { background: #fff; font-family: 'Poppins', sans-serif; } ::selection { background: #c09623; color: #fff; } ::-moz-selection { background: #c09623; color: #fff; } @media (max-width: 991px) { html, body { overflow-x: hidden; } .mobile-top-fix { margin-top: 30px; margin-bottom: 0px; } .mobile-bottom-fix { margin-bottom: 30px; } .mobile-bottom-fix-big { margin-bottom: 60px; } } .page-section { margin-top: 120px; } .section-heading h2 { font-size: 30px; text-transform: capitalize; color: #2a2a2a; font-weight: 700; letter-spacing: 0.25px; position: relative; z-index: 2; line-height: 44px; } .section-heading h2 em { font-style: normal; color: #c09623; } .section-heading h2 span { color: #fe3f40; } .main-blue-button a { display: inline-block; background-color: #c09623; font-size: 15px; font-weight: 400; color: #fff; text-transform: capitalize; padding: 12px 25px; border-radius: 23px; letter-spacing: 0.25px; } .main-red-button a { display: inline-block; background-color: #fe3f40; font-size: 15px; font-weight: 400; color: #fff; text-transform: capitalize; padding: 12px 25px; border-radius: 23px; letter-spacing: 0.25px; } .main-white-button a { display: inline-block; background-color: #fff; font-size: 15px; font-weight: 400; color: #fe3f40; text-transform: capitalize; padding: 12px 25px; border-radius: 23px; letter-spacing: 0.25px; } /* ===================================== Seu CSS Personalizado (style.css) Coloque este arquivo por último no ===================================== */ /* ----- Reset Básico e Outros Estilos (se necessário) ----- */ /* Adicione aqui outros estilos gerais que você precise */ /* ===================================== Header Styles (Responsivo) ===================================== */ .header-area { /* Estilos base já vêm do template (position, z-index, etc) */ background-color: #fff; padding: 0; /* Reset padding, controle via container */ height: 100px; /* Altura inicial */ width: 100%; transition: height 0.3s ease, box-shadow 0.3s ease; /* Transições suaves */ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } /* Estilos para o header quando 'sticky' (menor) */ .header-area.header-sticky { min-height: 80px; /* Evita colapso */ height: 80px; /* Altura reduzida */ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); } .header-area .main-nav { display: flex; justify-content: space-between; /* Logo esquerda, nav+trigger direita */ align-items: center; height: 100%; background-color: transparent; /* Sobrescreve template se necessário */ float: none; /* Sobrescreve template se necessário */ } /* Logo */ .header-area .main-nav .logo { padding: 0; flex-shrink: 0; /* Evita que o logo encolha demais */ } .header-area .main-nav .logo img { height: 100px; /* Altura no header normal - AJUSTE CONFORME NECESSÁRIO */ max-height: 100px; width: auto; /* Mantém proporção */ transition: height 0.3s ease; vertical-align: middle; /* IMPORTANTE: Use uma imagem de logo de alta resolução ou SVG */ } .header-area.header-sticky .main-nav .logo img { height: 80px; /* Altura no header sticky - AJUSTE CONFORME NECESSÁRIO */ max-height: 80px; } /* Menu de Navegação (UL) */ .header-area .main-nav .nav { display: flex; /* Itens lado a lado no desktop */ align-items: center; list-style: none; padding: 0; margin: 0 !important; /* Sobrescreve template se necessário */ float: none; /* Sobrescreve template se necessário */ } .header-area .main-nav .nav > li { padding-left: 15px; /* Espaço entre itens */ padding-right: 15px; } .header-area .main-nav .nav > li > a { display: block; font-weight: 500; font-size: 15px; color: #2a2a2a; text-transform: capitalize; transition: color 0.3s ease; /* Alinhamento vertical pelo line-height igual à altura do container do nav */ line-height: 100px; /* Altura do header normal */ height: auto; border: none; letter-spacing: 1px; white-space: nowrap; /* Evita quebra de linha nos links */ } .header-area.header-sticky .main-nav .nav > li > a { line-height: 80px; /* Altura do header sticky */ } .header-area .main-nav .nav > li > a:hover, .header-area .main-nav .nav > li > a.active { color: #fe3f40 !important; /* Cor vermelha hover/active */ } /* Estilo específico para o botão dentro do LI */ .header-area .main-nav .nav li .main-red-button { display: flex; align-items: center; /* Usa a mesma altura dos links para alinhar o botão */ height: 100px; } .header-area.header-sticky .main-nav .nav li .main-red-button { height: 80px; } .header-area .main-nav .nav li .main-red-button a { display: inline-block; background-color: #fe3f40; color: #fff !important; padding: 10px 20px; border-radius: 20px; font-size: 14px; font-weight: 500; line-height: normal; /* Reset line-height */ transition: background-color 0.3s ease; white-space: nowrap; } .header-area .main-nav .nav > li:last-child { padding-right: 0; /* Remove padding à direita do último item */ } .header-area .main-nav .nav li .main-red-button a:hover { background-color: #c09623; /* Cor dourada no hover */ color: #fff !important; } /* --- Menu Trigger (Hamburger Icon) --- */ /* O estilo visual (barras) vem do template */ .header-area .main-nav .menu-trigger { display: none; /* Escondido no desktop */ cursor: pointer; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 32px; height: 40px; z-index: 1001; /* Acima do nav mobile */ /* Estilos do ícone ativo (X) podem vir do template ou adicionar aqui */ } /* Exemplo de estilo para o X (se o template não tiver) */ .header-area .main-nav .menu-trigger.active span { background: transparent; } .header-area .main-nav .menu-trigger.active span:before { transform: translateY(6px) rotate(45deg); background: #1e1e1e; } .header-area .main-nav .menu-trigger.active span:after { transform: translateY(-6px) rotate(-45deg); background: #1e1e1e; } /* ===================================== Mobile Styles (< 992px) ===================================== */ @media (max-width: 991.98px) { .header-area, .header-area.header-sticky { height: 80px; /* Altura fixa mobile */ padding: 0 15px; } .header-area .main-nav .logo img, .header-area.header-sticky .main-nav .logo img { height: 80px; /* Logo menor - AJUSTE CONFORME NECESSÁRIO */ max-height: 80px; } /* Mostrar Hamburger */ .header-area .main-nav .menu-trigger { display: block; right: 15px; } /* Ajustar Menu Desktop e Preparar Mobile */ .header-area .main-nav .nav { position: absolute; top: 80px; /* Logo abaixo do header */ left: 0; width: 100%; background-color: #f7f7f7; flex-direction: column; align-items: stretch; padding: 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); overflow: hidden; max-height: 0; /* Fechado por padrão */ transition: max-height 0.4s ease-out; } /* Classe .open para mostrar menu (via JS) */ .header-area .main-nav .nav.open { max-height: calc(100vh - 80px); /* Altura máxima = tela - header */ overflow-y: auto; /* Scroll se necessário */ } /* Estilo Itens Mobile */ .header-area .main-nav .nav > li { margin: 0; padding: 0; width: 100%; border-bottom: 1px solid #eee; text-align: center; } .header-area .main-nav .nav > li:last-child { border-bottom: none; padding: 15px 0; /* Espaço para o botão */ } .header-area .main-nav .nav > li > a { line-height: 50px; /* Altura de cada item */ height: 50px; width: 100%; color: #1e1e1e !important; padding: 0 20px !important; display: block; } .header-area .main-nav .nav > li > a:hover, .header-area .main-nav .nav > li > a.active { background-color: #eee; color: #fe3f40 !important; } /* Botão Mobile */ .header-area .main-nav .nav li .main-red-button { height: auto; /* Reset altura */ padding: 0; margin: 0; display: block; text-align: center; } .header-area .main-nav .nav li .main-red-button a { padding: 10px 25px; margin: 0 auto; } } /* ===================================== Correção Header Fixo Sobrepondo Conteúdo ===================================== */ body { padding-top: 100px; /* Igual altura inicial do header desktop */ /* Garante transição suave se o padding mudar */ transition: padding-top 0.3s ease; } @media (max-width: 991.98px) { body { padding-top: 80px; /* Igual altura do header mobile/tablet */ } } /* Opcional: Se usar a classe .header-sticky dinamicamente no BODY também */ /* body.header-is-sticky { padding-top: 80px; } */ /* ===================================== Outros Estilos (Ex: Divisória) ===================================== */ .header-divider { width: 100%; height: 5px; background: linear-gradient(90deg, #fe3f40, #f1c40f); /* Não precisa de margin-top, o padding-top do body resolve */ } /* ===================================== Ajustes Seção Serviços Mobile (Exemplo) ===================================== */ @media (max-width: 767.98px) { /* Breakpoint menor para ajustes finos */ .about-us .services .item { margin-bottom: 20px; /* Mais espaço entre itens no mobile */ text-align: center; /* Centraliza texto dos itens */ } .about-us .services .item .right-text { /* Se houver ícones ou imagens à esquerda, ajustar aqui */ margin-left: 0; } .about-us .services .item h4 { font-size: 18px; /* Ajuste tamanho fonte */ } .about-us .services .item p { font-size: 14px; /* Ajuste tamanho fonte */ } /* Ajuste da imagem na seção About Us */ .about-us .left-image { text-align: center; /* Centraliza a imagem se a coluna ficar 100% */ margin-bottom: 30px; } .about-us .left-image img { max-width: 80%; /* Controla tamanho máximo da imagem */ height: auto; } /* Ajuste da imagem no Banner */ .main-banner .right-image img { max-width: 100%; /* Garante que não vaze */ height: auto; margin-top: 30px; /* Espaço acima da imagem no mobile */ } .main-banner .left-content { text-align: center; /* Centraliza texto do banner */ } } /* --------------------------------------------- preloader --------------------------------------------- */ .js-preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; opacity: 1; visibility: visible; z-index: 9999; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .js-preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } @-webkit-keyframes dot { 50% { -webkit-transform: translateX(96px); transform: translateX(96px); } } @keyframes dot { 50% { -webkit-transform: translateX(96px); transform: translateX(96px); } } @-webkit-keyframes dots { 50% { -webkit-transform: translateX(-31px); transform: translateX(-31px); } } @keyframes dots { 50% { -webkit-transform: translateX(-31px); transform: translateX(-31px); } } .preloader-inner { position: relative; width: 142px; height: 40px; background: #fff; } .preloader-inner .dot { position: absolute; width: 16px; height: 16px; top: 12px; left: 15px; background: #fe3f40; border-radius: 50%; -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation: dot 2.8s infinite; animation: dot 2.8s infinite; } .preloader-inner .dots { -webkit-transform: translateX(0); transform: translateX(0); margin-top: 12px; margin-left: 31px; -webkit-animation: dots 2.8s infinite; animation: dots 2.8s infinite; } .preloader-inner .dots span { display: block; float: left; width: 16px; height: 16px; margin-left: 16px; background: #fe3f40; border-radius: 50%; } /* --------------------------------------------- Banner Style --------------------------------------------- */ .main-banner { background-repeat: no-repeat; background-position: center center; background-size: cover; margin-top: 180px; /* Aumenta o espaço pra compensar o header inteiro */ padding: 120px 0px 120px 0px; /* Padding mais confortável */ position: relative; overflow: hidden; } .main-banner:after { content: ''; background-image: url(../images/baner-dec-left.png); background-repeat: no-repeat; position: absolute; left: 0; top: 100px; width: 193px; height: 467px; } .main-banner:before { content: ''; background-image: url(../images/baner-dec-right.png); background-repeat: no-repeat; position: absolute; right: 0; top: 100px; width: 98px; height: 290px; } .main-banner .left-content { margin-right: 45px; } .main-banner .left-content h6 { text-transform: uppercase; font-size: 18px; color: #fe3f40; margin-bottom: 15px; } .main-banner .left-content h2 { font-size: 50px; font-weight: 700; color: #2a2a2a; line-height: 72px; } .main-banner .left-content h2 em { color: #c09623; font-style: normal; } .main-banner .left-content h2 span { color: #fe3f40; } .main-banner .left-content p { margin: 20px 0px; } .main-banner .left-content form { margin-top: 30px; width: 470px; height: 66px; position: relative; } .main-banner .left-content form button { position: absolute; right: 10px; top: 10px; display: inline-block; background-color: #fff; font-size: 15px; font-weight: 500; color: #fe3f40; text-transform: capitalize; padding: 12px 25px; border-radius: 23px; letter-spacing: 0.25px; outline: none; border: none; } .main-banner .left-content form input { width: 470px; height: 66px; background-color: #c09623; border-radius: 33px; border: none; outline: none; padding: 0px 25px; color: #fff; letter-spacing: 0.25px; font-size: 15px; font-weight: 300; } .main-banner .left-content form input::placeholder { color: #fff; } /* --------------------------------------------- About Us Style --------------------------------------------- */ #about { margin-top: 120px; } .about-us { background-image: url(../images/about-bg.png); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 140px 0px 120px 0px; } .about-us .left-image { margin-right: 45px; } /* Centraliza o conteúdo e alinha verticalmente na seção de serviços */ .about-us .services .item { display: flex; align-items: center; /* Alinha o texto e o ícone verticalmente */ justify-content: center; /* Centraliza os itens horizontalmente */ text-align: left; /* Alinha o texto à esquerda, se necessário */ margin-bottom: 30px; /* Ajuste o espaçamento entre os itens */ } /* Ajuste os ícones */ .about-us .services .item .icon { margin-right: 15px; /* Ajuste a distância entre o ícone e o texto */ display: flex; justify-content: center; align-items: center; } /* Alinhamento do texto */ .about-us .services .item .right-text { text-align: left; /* Alinha o texto à esquerda dentro de cada item */ display: flex; flex-direction: column; /* Organiza o título e o parágrafo em uma coluna */ justify-content: center; } /* Ajuste o tamanho dos ícones */ .about-us .services .item .icon img { max-width: 50px; /* Ajuste o tamanho dos ícones */ height: auto; } /* Aplique um espaçamento uniforme nas colunas */ .about-us .services .row { display: flex; justify-content: space-between; flex-wrap: wrap; } /* Alinha os ícones e o texto centralizado no container geral */ .about-us .services { display: flex; justify-content: center; align-items: center; flex-direction: column; } .about-us .services .item .icon img { max-width: 70px; } .about-us .services .item h4 { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 12px; } .about-us .services .item p { color: #fff; } /* --------------------------------------------- Services Style --------------------------------------------- */ .our-services { margin-top: 0px; padding-top: 120px; } .our-services .left-image { margin-right: 45px; } .our-services .section-heading h2 { margin-right: 100px; } .our-services .section-heading p { margin-top: 30px; margin-bottom: 60px; } .our-services .progress-skill-bar { margin-bottom: 30px; position: relative; width: 100%; } .our-services .progress-skill-bar span { position: absolute; top: 0; font-size: 18px; font-weight: 600; color: #c09623; } .our-services .first-bar span { left: 69%; } .our-services .second-bar span { left: 81%; } .our-services .third-bar span { left: 88%; } .our-services .progress-skill-bar h4 { font-size: 18px; font-weight: 700; color: #2a2a2a; margin-bottom: 14px; } .our-services .progress-skill-bar .full-bar { width: 100%; height: 6px; border-radius: 3px; background-color: #f7eff1; position: relative; z-index: 1; } .our-services .progress-skill-bar .filled-bar { background: rgb(255,77,30); background: linear-gradient(105deg, rgba(255,77,30,1) 0%, #c09623); height: 6px; border-radius: 3px; margin-bottom: -6px; position: relative; z-index: 2; } .our-services .first-bar .filled-bar { width: 71%; } .our-services .second-bar .filled-bar { width: 83%; } .our-services .third-bar .filled-bar { width: 90%; } /* --------------------------------------------- Portfolio --------------------------------------------- */ .our-portfolio { padding-top: 120px; margin-top: 0px; } .our-portfolio .section-heading h2 { text-align: center; margin: 0px 90px 0px 90px; margin-bottom: 120px; position: relative; z-index: 1; } .our-portfolio .item { position: relative; } .our-portfolio .item:hover .hidden-content { top: -100px; opacity: 1; visibility: visible; } .our-portfolio .item:hover .showed-content { top: 90px; } .our-portfolio .hidden-content { background: rgb(255,77,30); background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%); padding: 30px; border-radius: 20px; text-align: center; opacity: 0; top: 0; visibility: hidden; position: absolute; z-index: 2; transition: all 0.5s; } .our-portfolio .hidden-content:after { width: 20px; height: 20px; position: absolute; background: rgb(255,77,30); content: ''; left: 50%; bottom: -8px; margin-left: -5px; transform: rotate(45deg); background: linear-gradient(105deg, rgba(255,52,69,1) 0%, rgba(255,51,78,1) 100%); z-index: -1; } .our-portfolio .hidden-content h4 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 20px; } .our-portfolio .hidden-content p { color: #fff; } .our-portfolio .showed-content { top: 0px; position: relative; z-index: 3; background-color: #fff; text-align: center; padding: 50px; border-radius: 20px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); transition: all 0.5s; } .our-portfolio .showed-content img { max-width: 100px; } /* --------------------------------------------- Blog --------------------------------------------- */ .our-blog { position: relative; margin-top: 80px; padding-top: 120px; } .our-blog .section-heading h2 { margin-right: 180px; } .our-blog .top-dec { text-align: right; margin-top: -80px; } .our-blog .top-dec img { max-width: 270px; } .our-blog .left-image { position: relative; } .our-blog .left-image img { border-radius: 20px; box-shadow: 0px 0px 15px rgba(0,0,0,0.1); } .our-blog .left-image .info { position: relative; } .our-blog .left-image .info .inner-content { background-color: #fff; box-shadow: 0px 0px 15px rgba(0,0,0,0.1); border-radius: 20px; margin-right: 75px; position: absolute; margin-top: -100px; padding: 30px; } .our-blog .left-image ul li { display: inline-block; font-size: 15px; color: #afafaf; font-weight: 300; margin-right: 20px; } .our-blog .left-image ul li:last-child { margin-right: 0px; } .our-blog .left-image ul li i { color: #ee1a1a; font-size: 16px; margin-right: 8px; } .our-blog .left-image h4 { font-size: 20px; font-weight: 700; color: #2a2a2a; margin: 20px 0px 15px 0px; } .our-blog .left-image .info .main-blue-button { position: absolute; bottom: -80px; left: 0; } .our-blog .right-list { margin-left: 30px; } .our-blog .right-list ul li { display: inline-flex; width: 100%; margin-bottom: 30px; } .our-blog .right-list .left-content { margin-right: 45px; } .our-blog .right-list .left-content span { font-size: 15px; color: #afafaf; font-weight: 300; } .our-blog .right-list .left-content span i { color: #ee1a1a; font-size: 16px; margin-right: 8px; } .our-blog .right-list .left-content h4 { font-size: 20px; font-weight: 700; color: #2a2a2a; margin: 20px 0px 15px 0px; } .our-blog .right-list .right-image img { width: 250px; border-radius: 20px; } /* --------------------------------------------- contact --------------------------------------------- */ .contact-us { padding: 160px 0px; background-image: url(../images/contact-bg.png); background-repeat: no-repeat; background-position: center center; background-size: cover; } .contact-us .section-heading h2, .contact-us .section-heading h2 em, .contact-us .section-heading h2 span { color: #fff; } .contact-us .section-heading p { color: #fff; margin-top: 30px; } .phone-info { margin-top: 40px; } .phone-info h4 { font-size: 20px; font-weight: 700; color: #fff; } .phone-info h4 span i { width: 46px; height: 46px; display: inline-block; text-align: center; line-height: 46px; background-color: #fff; border-radius: 50%; color: #ee1a1a; font-size: 22px; margin-left: 30px; margin-right: 15px; } .phone-info h4 span a { color: #fff; font-size: 15px; font-weight: 400; } form#contact .contact-dec { position: absolute; right: -166px; bottom: 0; } form#contact .contact-dec img { max-width: 178px; } form#contact { margin-left: 30px; position: relative; background-color: #fff; padding: 60px 30px; border-radius: 20px; } form#contact input { width: 100%; height: 46px; border-radius: 33px; background-color: #d1f3ff; border: none; outline: none; font-size: 15px; font-weight: 300; color: #2a2a2a; padding: 0px 20px; margin-bottom: 20px; } form#contact input::placeholder { color: #2a2a2a; } form#contact textarea { width: 100%; min-width: 100%; max-width: 100%; max-height: 180px; min-height: 140px; height: 140px; border-radius: 20px; background-color: #d1f3ff; border: none; outline: none; font-size: 15px; font-weight: 300; color: #2a2a2a; padding: 15px 20px; margin-bottom: 20px; } form#contact textarea::placeholder { color: #2a2a2a; } form#contact button { display: inline-block; background-color: #c09623; font-size: 15px; font-weight: 400; color: #fff; text-transform: capitalize; padding: 12px 25px; border-radius: 23px; letter-spacing: 0.25px; border: none; outline: none; transition: all .3s; } form#contact button:hover { background-color: #ee1a1a; } /* --------------------------------------------- Footer Style --------------------------------------------- */ footer p { text-align: center; margin: 30px 0px 45px 0px; } footer p a { color: #ee1a1a; } /* --------------------------------------------- responsive --------------------------------------------- */ @media (max-width: 1645px) { form#contact .contact-dec { display: none; } } @media (max-width: 992px) { .main-banner { padding-top: 196px; } .main-banner .left-content { margin-right: 0px; text-align: center; margin-bottom: 45px; } .main-banner:after { top: 76px; z-index: -1; } .main-banner .left-content form, .main-banner .left-content form input { width: 100%!important; } #about { margin-top: 0px; } .about-us { position: relative; background-image: none; padding: 0px; } .about-us .left-image { margin-right: 0px; position: absolute; bottom: -220px; right: 0; } .about-us .services { text-align: center; } .about-us .services .item { background: rgb(182, 11, 11); background: linear-gradient(105deg, rgba(182, 11, 11) 0%, rgb(187, 126, 14) 100%); padding: 30px; border-radius: 20px; display: inline-block; } .about-us .services .item .right-text { text-align: left; } .our-services { margin-top: 200px; } .our-services .left-image { margin-right: 0px; margin-bottom: 45px; } .our-services .section-heading h2, .our-services .section-heading p { margin-right: 0px; text-align: center; } .our-portfolio .section-heading h2 { margin: 0px 0px 80px 0px; } .our-portfolio .item { margin-bottom: 15px; } .our-blog { margin-top: 0px; } .our-blog .top-dec { display: none; } .our-blog .section-heading h2 { margin-right: 0px; text-align: center; margin-bottom: 45px; } .our-blog .left-image .info .inner-content { position: relative; margin-right: 0px; } .our-blog .left-image .info .main-blue-button { position: relative; bottom: 0px; margin-top: 30px; } .our-blog .left-image { margin-bottom: 45px; } .contact-us { margin-top: 60px; padding: 120px 0px; } .contact-us .section-heading { text-align: center; } form#contact { margin-left: 0px; margin-top: 30px; } form#contact .contact-dec { display: none; } footer p { margin: 15px 0px 30px 0px; } } @media (max-width: 767px) { .about-us .left-image { bottom: -280px; } .our-blog .right-list { margin-left: 0px; } .our-blog .right-list ul li { display: inline-block; margin-top: 0px; padding-top: 30px; border-top: 1px solid #eee; } .our-blog .right-list .left-content { margin-right: 0px; width: 100%; margin-bottom: 15px; } .our-blog .right-list .right-image, .our-blog .right-list .right-image img { width: 100%; } .phone-info h4 span { display: block; margin-top: 15px; } .phone-info h4 span i { margin-left: 0px; } }