.p_1_s178{ .whyMain { padding-bottom: 50px; } .whyMainGrid { grid-template-columns: 2fr 1fr; } .whyInnerMain { background-color: var(--themeBg1); padding: 80px 0px; border-radius: 60px; background-position: bottom left, top right; background-size: 350px, 280px; background-repeat: no-repeat, no-repeat; } .firstInnerSec { background-position: 220px -80px; background-size: 290px; background-repeat: no-repeat; border-radius: 20px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .secondInnerSec { background-position: 220px -80px; background-size: 290px; background-repeat: no-repeat; border-radius: 20px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .subHeading { font-family: var(--o1Font); font-size: 25px; text-transform: uppercase; color: var(--headingColor1); letter-spacing: 3px; word-spacing: 5px; } .mainHeading { font-size: 45px; font-weight: 500; text-transform: capitalize; margin-bottom: 10px; color: var(--headingColor2); } .subPara { font-size: 15px; font-weight: 500; color: var(--paragraphColorBlack); line-height: 25px; } .marBot50 { margin-bottom: 50px; } .whyCardText { padding: 30px; } .whyCardNo { color: var(--paragraphColorWhite); font-size: 45px; font-weight: 600; } .whyCardInnerText { color: var(--paragraphColorWhite); font-size: 20px; font-weight: 600; line-height: 25px; } .whyCardImg { line-height: 0px; } .whyCardImg img { height: 100%; border-radius: 20px; object-fit: contain; } .cardInnerSec { padding: 30px; border-radius: 20px; background-color: var(--themeBg2); box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.1); } .cardInnerGrid { grid-template-columns: 50px 1fr; } .cardIcon { width: 50px; height: 50px; } .cardHeading { font-size: 22px; font-weight: 600; margin-bottom: 5px; color: var(--headingColor2); } .cardSubPara { font-size: 15px; color: var(--paragraphColorBlack); font-weight: 500; line-height: 25px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .cardInnerSec:hover .cardIcon svg { animation-name: zoom; animation-duration: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes zoom { 100% { transform: scale(0.9); } } @media only screen and (max-width: 1250px) { .whyInnerMain { width: calc(90% - 40px); padding: 20px; border-radius: 20px; } .subHeading { font-size: 16px; line-height: 28px; letter-spacing: 0px; } .mainHeading { font-size: 25px; line-height: 35px; } .subPara { line-height: 25px; } .whyMainGrid { grid-template-columns: 1fr; } .gridRow3 { grid-template-rows: 1fr; } .cardInnerGrid { grid-template-columns: 1fr; text-align: center; } .cardIcon { margin: 0 auto; } .cardSubPara { -webkit-line-clamp: 3; } .cardInnerSec { padding: 20px; } } }.p_1_s178{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_1_s180{ .dealMainSec { padding: 50px 0px; } .gridMainSec .grid3 .disBtnMainSec { top: 140px; left: 50%; transform: translateX(-50%); } .grids:hover .disBtnMainSec button .firstIcon { width: 0px; } .grids:hover .disBtnMainSec button .secondIcon { width: 20px; } .gridMainSec .grid2 .disBtnMainSec { top: 150px; left: 40px; } .grids img { object-fit: contain; border-radius: 20px; } .disBtnMainSec button { margin-top: 20px; width: -webkit-fill-available; padding: 12px 27px; background-color: var(--btnColor); border: none; color: var(--btnTextColor); border-radius: 30px; cursor: pointer; font-size: 14px; font-weight: 500; transition: 0.3s; } .disBtnMainSec button:hover { background-color: var(--btnHoverColor); color: var(--btnHoverTextColor); } .disBtnMainSec button .firstIcon { display: block; transition: 0.5s; width: 20px; overflow: hidden; } .disBtnMainSec button .secondIcon { width: 0; margin-left: 10px; transition: 0.5s; overflow: hidden; } .bbCardSec:hover .disBtnMainSec button .firstIcon { width: 0px; } .bbCardSec:hover .disBtnMainSec button .secondIcon { width: 20px; } .smallHead { font-family: var(--o1Font); font-size: 25px; text-transform: uppercase; color: var(--headingColor1); letter-spacing: 3px; word-spacing: 5px; } .mainHeading { font-size: 45px; font-weight: 500; text-transform: capitalize; color: var(--headingColor2); font-family: var(--hFont); } .subPara { font-size: 15px; font-weight: 500; color: var(--paragraphColorBlack); font-family: var(--pFont); margin-bottom: 50px; } @media only screen and (max-width: 900px) { .dealMainSec { padding: 20px 0px; } .mainHeading { font-size: 30px; line-height: 40px; } .subPara { margin-bottom: 30px; } .gridMainSec .grid2 .disBtnMainSec { top: 83px; left: 22px; } .gap30 { gap: 10px; } } }.p_1_s180{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_1_s181{ .subHeading { font-family: var(--o1Font); font-size: 25px; text-transform: uppercase; color: var(--headingColor1); letter-spacing: 3px; word-spacing: 5px; } .mainHeading { font-size: 45px; font-weight: 500; text-transform: capitalize; margin: 10px 0px; color: var(--headingColor2); } .subPara { font-size: 15px; font-weight: 500; color: var(--paragraphColorBlack); line-height: 25px; } .aboutMain { padding: 50px 0px; background-position: center 650px; background-size: 300px; background-repeat: no-repeat; } .aboutInnerHeading { font-size: 21px; font-weight: 500; line-height: 30px; } .aboutInnerPara { margin: 20px 0px; font-size: 15px; color: rgba(0, 0, 0, 0.7); line-height: 25px; } .aboutCustomGrid { grid-template-columns: 260px 1fr; } .pointCheckIcon { width: 20px; height: 20px; color: var(--themeColor1); font-size: 20px; } .aboutInnerPointsPara { font-size: 15px; color: rgba(0, 0, 0, 0.7); line-height: 25px; font-weight: 500; } .pointsMainSec { margin-bottom: 10px; } .marBot50 { margin-bottom: 50px; } .aboutMain .disBtnMainSec button { width: auto; } .aboutMain .disBtnMainSec button:hover .firstIcon { width: 0px; } .aboutMain .disBtnMainSec button:hover .secondIcon { width: 20px; } .disBtnMainSec button { margin-top: 20px; width: -webkit-fill-available; padding: 12px 27px; background-color: var(--btnColor); border: none; color: var(--btnTextColor); border-radius: 30px; cursor: pointer; font-size: 14px; font-weight: 500; transition: 0.3s; } .disBtnMainSec button .firstIcon { display: block; transition: 0.5s; width: 20px; overflow: hidden; } .disBtnMainSec button .secondIcon { width: 0; margin-left: 10px; transition: 0.5s; overflow: hidden; } .disBtnMainSec button:hover { background-color: var(--btnHoverColor); } @media only screen and (max-width: 900px) { .gap90 { gap: 30px; } .aboutMain { padding: 20px 0px; background-image: none !important; } .subHeading { font-size: 16px; line-height: 28px; letter-spacing: 0px; } .mainHeading { font-size: 25px; line-height: 35px; } .aboutCustomGrid { grid-template-columns: 1fr; } .aboutCustomGrid.gap50 { gap: 30px; } .disBtnMainSec button { margin: 20px auto 0px; } } }.p_1_s181{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_1_s183{ .mainTextSec { margin-bottom: 50px; } .smallHead { font-family: var(--o1Font); font-size: 25px; text-transform: uppercase; color: var(--headingColor1); letter-spacing: 3px; word-spacing: 5px; } .smallHead img { width: 35px; margin-right: 10px; } .mainHeading { font-size: 45px; font-weight: 500; text-transform: capitalize; color: var(--headingColor2); font-family: var(--hFont); margin-bottom: 10px; } .mainSubPara { font-size: 15px; font-weight: 500; color: var(--paragraphColorBlack); font-family: var(--pFont); } .testiMain { padding: 80px 0px; background-color: var(--themeBg1); background-position: center bottom; background-repeat: no-repeat; background-size: 80%; } .arrowMainSec { top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; } .arrowRightIconSec, .arrowLeftIconSec { pointer-events: all; cursor: pointer; width: 40px; height: 40px; background-color: var(--btnColor); border-radius: 8px; transition: 0.3s; } .arrowRightIconSec:hover, .arrowLeftIconSec:hover { background-color: var(--btnHoverColor); } .arrowRightIconSec i, .arrowLeftIconSec i { color: var(--btnTextColor); transition: 0.3s; } .arrowRightIconSec:hover i, .arrowLeftIconSec:hover i { color: var(--btnHoverTextColor); } .testiSlider2 .owl-nav.disabled + .owl-dots { margin-top: 20px !important; } .testiSlider2 .owl-dots .owl-dot.active span { background-color: var(--themeColor1); } .testiCardMainSec { margin: 15px 0px; padding: 30px; background-color: white; border-radius: 12px; position: relative; transition: 0.3s; } .testiCardMainSec:hover { margin-top: 5px; } .testiCardName { font-size: 20px; font-weight: 600; } .testiCardDesig { font-size: 15px; } .starSec { width: 20px; height: 20px; } .starSec i { font-size: 14px; color: var(--themeColor1); } .testiCardComment { font-size: 15px; line-height: 25px; padding: 23px 0px 25px 0px; } .cardHead { margin: 0px 10px 0px 0px !important; font-size: 22px; font-weight: 700; line-height: 32px; } .quoteSec { width: 45px; height: auto; } .btnSec { width: fit-content; margin: 50px 0px 0px 0px; background-color: var(--btnColor); color: var(--btnTextColor); font-size: 15px; font-weight: 500; border: 0px; padding: 7px 15px; border-radius: 5px; cursor: pointer; transition: 0.4s; } .btnSec:hover { background-color: var(--btnHoverColor); color: var(--btnHoverTextColor); } @media only screen and (max-width: 900px) { .testiMain { padding: 20px 0px; } .mainHeading { font-size: 25px; line-height: 35px; } .arrowMainSec { display: none; } } }.p_1_s183{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_1_s184{ .blog_section_1 { padding: 80px 0px; } .smallHead { font-family: var(--o1Font); font-size: 25px; text-transform: uppercase; color: var(--headingColor1); letter-spacing: 3px; word-spacing: 5px; } .mainHeading { font-size: 40px; font-weight: 600; font-family: var(--hFont); color: var(--headingColor2); margin-bottom: 10px; } .subPara { font-size: 16px; line-height: 26px; font-weight: 400; margin-bottom: 50px; font-family: var(--pFont); color: var(--paragraphColorBlack); } .viewBtn { display: inline-block; margin-top: 50px; padding: 0 25px 0 13px; border-radius: 5.5px; background-color: var(--btnColor); color: var(--btnTextColor); font-size: 16px; font-weight: 500; line-height: 34px; transition: 0.4s; } .viewBtn:hover { background-color: var(--btnHoverColor); color: var(--btnHoverTextColor); } .arrowMainSec { top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; } .arrowRightIconSec, .arrowLeftIconSec { pointer-events: all; cursor: pointer; width: 40px; height: 40px; background-color: var(--btnColor); border-radius: 8px; transition: 0.4s; } .arrowRightIconSec:hover, .arrowLeftIconSec:hover { background-color: var(--btnHoverColor); } .arrowRightIconSec i, .arrowLeftIconSec i { color: var(--btnTextColor); transition: 0.4s; } .arrowRightIconSec:hover i, .arrowLeftIconSec:hover i { color: var(--btnHoverTextColor); } .blog_section_1 .owl-carousel .owl-stage-outer { padding: 20px; margin: -20px; } @media only screen and (max-width: 900px) { .mainHeading { font-size: 30px; line-height: 40px; } .subPara { margin-bottom: 30px; } } }.p_1_s184{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_1_s195{ .bannerMain { padding: 70px 0px; background-image: linear-gradient(180deg, var(--themeBg1) 0%, #ffffff00 100%), url("https://demo2.wpopal.com/havezic/wp-content/uploads/2024/07/h1_bg.png"); background-position: bottom; background-size: contain; background-repeat: no-repeat; } .gap15 { gap: 15px; } .grid7 { grid-template-columns: repeat(7, 1fr); } .inputMainGrid { grid-template-columns: 1fr 115px; } .subHeading { font-family: var(--o1Font); font-size: 25px; text-transform: uppercase; color: var(--headingColor1); letter-spacing: 3px; word-spacing: 5px; } .mainHeading { font-size: 45px; font-weight: 500; text-transform: capitalize; color: var(--headingColor2); margin: 10px 0px; } .subPara { font-size: 15px; font-weight: 500; color: var(--paragraphColorBlack); } .inputOuterMain { background-color: white; padding: 15px; border-radius: 30px; box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.1); } .inputMainSec { padding: 10px 20px; border-radius: 30px; border: 1px solid #dee0ea; display: flex; gap: 10px; align-items: center; font-weight: 500; } .inputMainSec i { font-size: 18px; } .inputMainSec select, .inputMainSec input { border: none; width: -webkit-fill-available; font-size: 16px; cursor: pointer; outline: none; color: #414141; } .searchBannerBtn button { background-color: var(--btnColor); color: var(--btnTextColor); border: none; padding: 10px 15px; border-radius: 30px; font-weight: 500; cursor: pointer; transition: 0.4s; font-size: 15px; } .searchBannerBtn button:hover { background-color: var(--btnHoverColor); color: var(--btnHoverTextColor); } .bannerImgMainSec img { border-radius: 20px; object-fit: cover; cursor: pointer; } .bannerImgMainSec { border-radius: 20px; overflow: hidden; } .dropBoxMain { display: none; position: absolute; top: 45px; left: 0px; width: calc(100% - 40px); padding: 15px 20px; background-color: white; border-radius: 10px; border: 1px solid #dee0ea; } .countBox { border: 1px solid #dee0ea; border-radius: 30px; height: 35px; overflow: hidden; } .minus, .plus { width: 100%; height: 100%; transition: 0.4s; cursor: pointer; } .minus i, .plus i { font-size: 15px; margin: 0px; } .minus:hover, .plus:hover { background-color: var(--themeBg2); color: var(--paragraphColorBlack); } .dropGrid { grid-template-columns: 1fr 80px; } .leftSide input { width: 40px; text-align: center; border: none; font-size: 20px; } .arrow i { margin-right: 0px; } @media only screen and (max-width: 1250px) { .inputGrid { grid-template-columns: repeat(2, 1fr); } .bannerMain { height: 70vh; } .searchBannerBtn button { width: 100%; height: 50px; } .inputOuterMain { display: grid; grid-template-columns: 1fr 150px; align-items: center; } .bannerImgMainSec { grid-template-columns: 1fr; } } @media only screen and (max-width: 900px) { .inputGrid { grid-template-columns: 1fr; } .inputOuterMain { grid-template-columns: 1fr; border-radius: 10px; } .bannerMain { height: auto; } .lastImg { display: none; } .grid7 { grid-template-columns: 1fr 1fr; } .searchBannerBtn button { height: auto; } .subHeading { font-size: 16px; line-height: 28px; letter-spacing: 0px; } .mainHeading { font-size: 25px; line-height: 35px; } .bannerMain { padding: 30px 0px; } .searchBannerBtn { width: 100%; } .inputMainSec { padding: 10px; /* width: calc(100% - 40px); */ } .countBox { grid-template-columns: 1fr 1fr; height: 30px; } .dropBoxMain { padding: 10px; width: calc(100% - 20px); } .gap15 { gap: 10px; } .leftSide input { font-size: 15px; width: 30px; } .catName { font-size: 15px; } .inputMainSec select, .inputMainSec input { width: 100%; } } }.p_1_s195{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_1_s200{ .profile_section_2 { padding: 80px 0px; } .whyInnerMain { background-color: var(--themeBg1); padding: 80px 0px; border-radius: 60px; background-position: bottom left, top right; background-size: 350px, 280px; background-repeat: no-repeat, no-repeat; } .subHeading { font-family: var(--o1Font); font-size: 25px; text-transform: uppercase; color: var(--headingColor1); letter-spacing: 3px; word-spacing: 5px; } .mainHeading { font-size: 45px; font-weight: 500; text-transform: capitalize; color: var(--headingColor2); margin-bottom: 10px; } .subPara { font-size: 15px; font-weight: 500; color: rgba(0, 0, 0, 0.8); line-height: 25px; margin-bottom: 50px; } .teamCard { border-radius: 10px; background-color: var(--themeBg2); padding: 130px 16px 16px 16px; margin-top: 120px; } .imgSec { margin-top: -225px; margin-bottom: 20px; position: relative; z-index: 1; width: 190px; height: 190px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; } .imgSec img { transition: 0.4s; } .cardText { padding: 16px; background-color: var(--themeBg1); border-radius: 5px; transition: 0.4s; } .name { font-size: 25px; line-height: 35px; font-weight: 600; transition: 0.4s; } .desig { font-size: 16px; line-height: 26px; font-size: 400; color: var(--paragraphColorBlack); transition: 0.4s; } .socialSec { margin-top: 10px; } .socialIcon { border: 1px solid var(--themeColor1); width: 30px; height: 30px; border-radius: 50%; transition: 0.4s; } .socialIcon i { color: var(--themeColor1); transition: 0.4s; } .teamCard:hover .imgSec img { transform: scale(1.1); } .teamCard:hover .cardText { background-color: var(--themeColor1); } .teamCard:hover .name { color: var(--paragraphColorWhite); } .teamCard:hover .desig { color: var(--paragraphColorWhite); } .teamCard:hover .socialIcon { border: 1px solid var(--paragraphColorWhite); } .teamCard:hover .socialIcon i { color: var(--paragraphColorWhite); } .arrowMainSec { top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 10; } .arrowRightIconSec, .arrowLeftIconSec { pointer-events: all; cursor: pointer; width: 40px; height: 40px; background-color: var(--btnColor); border-radius: 8px; transition: 0.4s; } .arrowRightIconSec:hover, .arrowLeftIconSec:hover { background-color: var(--btnHoverColor); } .arrowRightIconSec i, .arrowLeftIconSec i { color: var(--btnTextColor); transition: 0.4s; } .arrowRightIconSec:hover i, .arrowLeftIconSec:hover i { color: var(--btnHoverTextColor); } @media only screen and (max-width: 900px) { .profile_section_2 { padding: 30px 0px; } .subHeading { font-size: 16px; line-height: 28px; letter-spacing: 0px; } .mainHeading { font-size: 25px; line-height: 35px; } .subPara { margin-bottom: 30px; } .imgSec { width: 100px; height: 100px; margin-top: -175px; } .name { font-size: 20px; line-height: 30px; } .teamCard { margin-top: 60px; } } .profile_section_2{ padding: 30px 0px 0px; } }.p_1_s200{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_1_s210{ .whyMain { padding-bottom: 50px; } .whyMainGrid { grid-template-columns: 2fr 1fr; } .whyInnerMain { background-color: var(--themeBg1); padding: 80px 0px; border-radius: 60px; background-position: bottom left, top right; background-size: 350px, 280px; background-repeat: no-repeat, no-repeat; } .subHeading { font-family: var(--o1Font); font-size: 25px; text-transform: uppercase; color: var(--headingColor1); letter-spacing: 3px; word-spacing: 5px; } .mainHeading { font-size: 45px; font-weight: 500; text-transform: capitalize; color: var(--headingColor2); margin-bottom: 10px; } .subPara { font-size: 15px; font-weight: 500; color: rgba(0, 0, 0, 0.8); line-height: 25px; } .marBot50 { margin-bottom: 50px; } .sliderProductBtn { top: 50%; transform: translateY(-50%); pointer-events: none; position: absolute; justify-content: space-between; z-index: 98; } .leftProductBtnSlider { pointer-events: all; cursor: pointer; margin: 0 10px; width: 40px; height: 40px; transition: 0.3s; background-color: var(--btnColor); border-radius: 10px; box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1); } .leftProductBtnSlider i { transition: 0.3s; font-size: 16px; color: var(--btnTextColor); } .leftProductBtnSlider:hover { background-color: var(--btnHoverColor); } .leftProductBtnSlider:hover i { color: var(--btnHoverTextColor); } .bbCardSec:hover .bbBlogImg img { transform: scale(1.05); } @media only screen and (max-width: 900px) { .whyInnerMain { width: calc(90% - 40px); padding: 20px; border-radius: 20px; } .subHeading { font-size: 16px; line-height: 28px; letter-spacing: 0px; } .mainHeading { font-size: 25px; line-height: 35px; } .subPara { line-height: 25px; } .leftProductBtnSlider { margin: 0px; } } }.p_1_s210{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }.p_1_s232{ .service_section_15 { padding: 80px 0px; } .smallHead { font-family: var(--o1Font); font-size: 25px; text-transform: uppercase; color: var(--headingColor1); letter-spacing: 3px; word-spacing: 5px; } .mainHeading { font-size: 45px; font-weight: 500; text-transform: capitalize; margin: 10px 0px; color: var(--headingColor2); } .subPara { font-size: 15px; font-weight: 500; color: var(--paragraphColorBlack); line-height: 25px; } .rightHead { justify-self: end; } .disBtnMainSec button { width: auto; } .disBtnMainSec button:hover .firstIcon { width: 0px; } .disBtnMainSec button:hover .secondIcon { width: 20px; } .disBtnMainSec button { width: -webkit-fill-available; padding: 12px 27px; background-color: var(--btnColor); border: none; color: var(--btnTextColor); border-radius: 30px; cursor: pointer; font-size: 14px; font-weight: 500; transition: 0.3s; } .disBtnMainSec button .firstIcon { display: block; transition: 0.5s; width: 20px; overflow: hidden; margin-right: 5px; } .disBtnMainSec button .secondIcon { width: 0; margin-left: 5px; transition: 0.5s; overflow: hidden; } .disBtnMainSec button:hover { background-color: var(--btnHoverColor); } .imgSec { height: 200px; border-radius: 30px; overflow: hidden; } .cardMainSec { margin-top: 50px; } .cardSec { position: relative; } .blank { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-color: var(--themeBg1); border-radius: 30px; opacity: 0; transition: 0.4s; } .cardSec:hover .blank { opacity: 0.5; } .cardTextSec { padding: 8px 15px; position: absolute; bottom: 15px; left: 15px; right: 15px; width: fit-content; border-radius: 30px; background-color: var(--themeBg2); z-index: 2; } .cardHead { font-size: 18px; color: var(--paragraphColorBlack); } .arrowSec { opacity: 0; position: absolute; top: 15px; right: 15px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--headingColor1); transform: rotate(45deg); transition: 0.4s; } .arrowSec i { color: var(--paragraphColorWhite); } .cardSec:hover .arrowSec { opacity: 1; } @media only screen and (max-width: 900px) { .service_section_15 { padding: 30px 0px; } .subHeading { font-size: 16px; line-height: 28px; letter-spacing: 0px; } .mainHeading { font-size: 25px; line-height: 35px; } .rightHead { justify-self: center; } .cardTextSec { padding: 8px; bottom: 5px; left: 5px; right: 5px; border-radius: 5px; } .blank { border-radius: 10px; } .imgSec { border-radius: 10px; } .cardHead { font-size: 13px; } .gap30 { gap: 10px; } .cardMainSec{ margin-top: 30px; } } }.p_1_s232{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }