/** service-section **/ .service-section { position: relative; } .service-block-one .inner-box { position: relative; display: block; margin-bottom: 30px; background: #fff; border-radius: 20px; transition: all 500ms ease; overflow: visible; } .service-block-one .inner-box:hover { box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1); } .service-block-one .inner-box .image-box { position: relative; display: block; } .service-block-one .inner-box .image-box .image { position: relative; display: block; overflow: hidden; border-radius: 20px 20px 0px 0px; } .service-block-one .inner-box .image-box .image img { width: 100%; transition: all 500ms ease; } .service-block-one .inner-box:hover .image-box .image img { transform: scale(1.05); } .service-block-one .inner-box .lower-content { position: relative; display: block; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0px 0px 20px 20px; padding: 40px 40px 40px 105px; transition: all 500ms ease; overflow: visible; min-height: 285px; } .service-block-one .inner-box .lower-content2{ position: relative; display: block; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0px 0px 20px 20px; padding: 40px 40px 40px 40px; transition: all 500ms ease; overflow: visible; min-height: 285px; } .service-block-one .inner-box:hover .lower-content { border-color: #fff; } .service-block-one .inner-box .lower-content .icon-box { position: absolute; left: -13px; bottom: 40px; width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 60px; color: #fff; border-radius: 0px 10px 10px 0px; background: #102548; transition: all 500ms ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); z-index: 10; } .service-block-one .inner-box .lower-content .icon-box img { width: 70px; height: 70px; } .service-block-one .inner-box:hover .lower-content .icon-box { bottom: 183px; } .service-block-one .inner-box .lower-content .icon-box:before { position: absolute; content: ''; background: #102548; width: 12px; height: 14px; left: 0px; bottom: -14px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%); } .service-block-one .inner-box .lower-content h3 { position: relative; display: block; font-size: 26px; line-height: 36px; font-weight: 600; margin-bottom: 15px; } .service-block-one .inner-box .lower-content h3 a { display: inline-block; color: var(--title-color); transition: color 300ms ease; } .service-block-one .inner-box .lower-content h3 a:hover { color: var(--theme-color); } .service-block-one .inner-box .lower-content2 { position: relative; display: block; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0px 0px 20px 20px; padding: 40px 30px 40px 30px; transition: all 500ms ease; overflow: visible; min-height: 285px; } .service-block-one .inner-box:hover .lower-content2 { border-color: #fff; } .service-block-one .inner-box .lower-content2 .icon-box { position: absolute; left: -13px; bottom: 40px; width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 60px; color: #fff; border-radius: 0px 10px 10px 0px; background: var(--theme-color); transition: all 500ms ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); z-index: 10; } .service-block-one .inner-box:hover .lower-content2 .icon-box { bottom: 183px; } .service-block-one .inner-box .lower-content2 .icon-box:before { position: absolute; content: ''; background: #bc0000; width: 12px; height: 14px; left: 0px; bottom: -14px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%); } .service-block-one .inner-box .lower-content2 h3 { color: #bc0000; position: relative; display: block; font-size: 26px; line-height: 36px; font-weight: 600; margin-bottom: 15px; } .service-block-one .inner-box .lower-content2 h3 a { display: inline-block; color: var(--title-color); transition: color 300ms ease; } .service-block-one .inner-box .lower-content2 h3 a:hover { color: var(--theme-color); } /** service-style-two **/ .service-style-two{ position: relative; background: #bc0000; } .service-style-two .service-block-one .inner-box{ border-radius: 20px; } .service-style-two .pattern-layer .pattern-1{ position: absolute; left: 0px; bottom: 0px; width: 702px; height: 447px; background-repeat: no-repeat; } .service-style-two .pattern-layer .pattern-2{ position: absolute; top: 0px; right: 0px; width: 632px; height: 403px; background-repeat: no-repeat; } /** RTL-CSS **/ /** RESPONSIVE-CSS **/ @media only screen and (max-width: 1200px){ } @media only screen and (max-width: 991px){ .service-style-two .pattern-layer{ display: none; } } @media only screen and (max-width: 767px){ } @media only screen and (max-width: 599px){ } @media only screen and (max-width: 499px){ } @media (max-width: 1200px) and (min-width: 768px) { .service-block-one .inner-box .lower-content { min-height: 315px; padding:40px 31px 40px 105px; } }