.p_50_s377{ .service_section_7 { padding: 70px 0px; background-color: var(--themeBg1); background-position: center; background-repeat: no-repeat; background-size: cover; } .smallHead { font-size: 14px; font-weight: 600; font-family: var(--hFont); color: var(--headingColor2); letter-spacing: 4px; } .mainHeading { color: var(--headingColor1); font-family: var(--hFont); font-size: 45px; font-weight: 500; margin: 20px 0px 50px; line-height: 60px; } .subPara { color: var(--paragraphColorBlack); font-size: 16px; line-height: 30px; font-family: var(--pFont); } .allBtn { display: inline-block; font-family: var(--pFont); font-weight: 500; border-style: none; border-radius: 100px; padding: 15px 30px 15px 30px; background-color: var(--btnColor); color: var(--btnTextColor); font-size: 13px; transition: 0.4s; margin-top: 20px; } .allBtn:hover { background-color: var(--btnHoverColor); color: var(--btnHoverTextColor); } .serCard { padding: 35px; background-color: var(--themeBg2); border-radius: 20px; } .cardHead { font-size: 25px; font-family: var(--hFont); font-weight: 500; line-height: 34px; margin-bottom: 12px; color: var(--headingColor1); transition: 0.4s; } .serCard:hover .cardHead { color: var(--headingColor2); } .cardPara { font-family: var(--pFont); font-size: 16px; line-height: 30px; margin-bottom: 20px; color: var(--paragraphColorBlack); } .iconSec { width: 90px; height: 90px; background-color: var(--themeBg1); border-radius: 50%; margin-bottom: 20px; } .iconSec img { width: 50px; height: auto; transition: 0.4s; } .serCard:hover .iconSec img { transform: rotateY(360deg); } .learnBtn { display: inline-block; font-size: 13px; font-weight: 500; color: var(--btnColor); transition: 0.3s; } .learnBtn:hover { color: var(--btnHoverColor); } @media only screen and (max-width: 900px) { .mainHeading { margin-bottom: 0px; font-size: 25px; line-height: 35px; } .subPara{ font-size: 14px; line-height: 25px; } .cardHead{ font-size: 20px; line-height: 30px; } .cardPara{ font-size: 14px; line-height: 25px; } .service_section_7 .gap50 { gap: 20px; } .allBtn{ margin-bottom: 30px; } .serCard{ padding: 20px; } } }.p_50_s377{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_50_s378{ .service_section_23 { padding: 80px 0px; } .custGrid { grid-template-columns: 500px 1fr 1fr; } .mainHeading { width: fit-content; font-size: 50px; line-height: 60px; color: var(--headingColor1); font-family: var(--hFont); font-weight: 600; margin-bottom: 40px; position: relative; z-index: 1; } .headOut { width: fit-content; position: relative; } .headOut::after { position: absolute; content: ""; top: 50%; left: -40px; transform: translateY(-50%); width: 100px; height: 100px; border-radius: 50%; background-color: var(--themeBg1); z-index: 0; } .subPara { max-width: 900px; font-size: 15px; line-height: 25px; color: var(--paragraphColorBlack); } .topSec { margin-bottom: 50px; } .cardSec { padding: 30px; box-shadow: 0px 0px 10px 0px #efefef; border-radius: 30px; background-color: var(--themeBg2); transition: 0.3s; } .cardHead { font-size: 20px; line-height: 30px; color: var(--headingColor2); font-weight: 600; margin-bottom: 10px; transition: 0.3s; } .cardPara { font-size: 15px; line-height: 26px; color: var(--paragraphColorBlack); margin-bottom: 20px; transition: 0.3s; } .cardSec:hover .cardPara { color: var(--paragraphColorWhite); } .btn { width: 45px; height: 45px; border-radius: 50%; transition: 0.3s; } .cardSec:hover .btn { background-color: #fff !important; } .btn i { font-size: 16px; vertical-align: middle; transition: 0.3s; color: var(--paragraphColorWhite); } .imgSec { border-radius: 30px; line-height: 0px; overflow: hidden; } @media only screen and (max-width: 900px) { .service_section_23 { padding: 40px 0px; } .mainHeading { font-size: 30px; line-height: 40px; margin-bottom: 30px; } .headOut::after { width: 70px; height: 70px; left: -30px; } .custGrid { grid-template-columns: 1fr; } .gap50 { gap: 30px; } .topSec{ margin-bottom: 30px; } } .service_section_23{ padding-top: 50px; } }.p_50_s378{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_50_s379{ .marquee_slider_3 { overflow-x: hidden; padding: 30px 0px; } .marqueeInner { background: linear-gradient(90deg, var(--themeColor1) 0%, var(--themeColor2) 100%); padding: 20px 0; position: relative; } .marqueeInner::before { position: absolute; content: ""; width: 110%; height: 100%; top: 0; left: -10px; background: var(--themeBg2); transform: rotate(-1.09deg); z-index: -1; } .iconSec { width: 20px; } .cardPara { font-size: 16px; font-weight: 500; color: var(--paragraphColorWhite); letter-spacing: 1px; } .cardSec { justify-content: space-evenly; } .marquee_slider_3{ margin-top: -40px; position: relative; z-index: 3; } }.p_50_s379{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_50_s381{ .service_section_22 { padding: 80px 0px; } .smallHead { font-size: 16px; line-height: 26px; color: var(--headingColor2); font-family: var(--pFont); margin-bottom: 25px; font-weight: 600; } .subPara { font-size: 14px; line-height: 24px; color: var(--paragraphColorBlack); font-family: var(--pFont); margin-bottom: 50px; } .headOut { width: fit-content; position: relative; } .headOut::after { position: absolute; content: ""; top: 50%; left: -40px; transform: translateY(-50%); width: 100px; height: 100px; border-radius: 50%; background-color: var(--themeBg1); z-index: 0; } .mainHeading { width: fit-content; font-size: 50px; line-height: 60px; color: var(--headingColor1); font-family: var(--hFont); font-weight: 600; margin-bottom: 25px; position: relative; z-index: 1; } .imgSec { aspect-ratio: 1; border-radius: 50%; border: 30px solid var(--themeBg2); overflow: hidden; box-shadow: 0px 0px 10px 0px #efefef; position: relative; } .uprSec { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--themeColor2); width: 180px; height: 180px; border-radius: 50%; color: var(--paragraphColorBlack); font-size: 20px; line-height: 30px; font-weight: 600; padding: 20px; } .cardSec { padding: 15px; box-shadow: 0px 0px 10px 0px #efefef; border-radius: 10px; position: relative; } .cardSec:nth-child(1n)::before { content: ""; position: absolute; width: 10px; height: 10px; background-color: var(--themeColor1); right: -55px; top: 50%; transform: translateY(-50%); z-index: -1; border-radius: 50%; box-shadow: 0px 0px 5px 1px var(--themeColor1); animation: zoom 1s linear infinite; } .cardSec:nth-child(1n)::after { content: ""; position: absolute; width: 100px; right: -100px; top: 50%; transform: translateY(-50%); border-bottom: 3px dashed #ccc; z-index: -2; } .right .cardSec:nth-child(1n)::after { left: -100px; right: auto; } .right .cardSec:nth-child(1n)::before { left: -55px; right: auto; } .cardSec:nth-child(1)::before { bottom: 43px; top: auto; right: -75px; } .cardSec:nth-child(1)::after { width: 150px; right: -150px; bottom: 50px; top: auto; transform: rotateZ(15deg); } .right .cardSec:nth-child(1)::after { left: -150px; right: auto; transform: rotateZ(-15deg); } .right .cardSec:nth-child(1)::before { left: -75px; right: auto; } .cardSec:nth-child(3)::before { top: 53px; right: -75px; } .cardSec:nth-child(3)::after { width: 150px; right: -150px; top: 50px; transform: rotateZ(-15deg); } .right .cardSec:nth-child(3)::after { left: -150px; right: auto; transform: rotateZ(15deg); } .right .cardSec:nth-child(3)::before { left: -75px; right: auto; } @keyframes zoom { 0% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.2); } 100% { transform: translateY(-50%) scale(1); } } .custGrid { grid-template-columns: 100px 1fr; } .iconSec { aspect-ratio: 1; border-radius: 10px; overflow: hidden; } .cardHead { font-size: 18px; font-weight: 600; line-height: 28px; } .cardPara { font-size: 15px; line-height: 25px; color: var(--paragraphColorBlack); } @media only screen and (max-width: 900px) { .service_section_22 { padding: 40px 0px; } .mainHeading { font-size: 30px; line-height: 40px; margin-bottom: 30px; } .headOut::after { width: 70px; height: 70px; left: -30px; } .custGrid { grid-template-columns: 80px 1fr; } .cardSec:nth-child(1n)::before { content: none; } .cardSec:nth-child(1n)::after { content: none; } .gap100 { gap: 30px; } } }.p_50_s381{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }