.navbar { padding: 10px 0px; } .navbar ul { list-style: none; } .nav-logo { z-index: 3; } .nav-logo img { width: 200px; } .navbar-collapse { justify-content: center; } .right-sidbar { width: 280px; position: fixed; height: 100vh; top: 0; left: -355px; overflow-x: hidden; transition: 0.5s; padding: 20px; z-index: 99; background-color: #fff; } .open-aside { display: none; z-index: 2; } .right-sidbar ul { list-style: none; } aside .fa-xmark { padding: 8px 13px; background-color: #069fea; color: #fff; border: none; border-radius: 10px; font-size: 22px; } aside .fa-caret-down { color: #069fea; font-size: 22px; } aside a { text-decoration: none; color: black; } aside a:hover { color: #069fea; } aside .active a { color: #069fea !important; } #slid-drop { display: none; } aside li { padding: 12px; } #slid-drop li { padding: 12px 0px; } .aside-dropdwon { display: block !important; } .page-btn { padding: 10px 0px; color: #069fea; background-color: transparent; border: none; font-size: 18px; } .navbar ul li a { color: black; padding: 12px; } .navbar ul li a:hover { color: #069fea; } .navbar ul li .active { color: #a15653 !important; } .navbar .dropdown-item:hover, .navbar .active.dropdown-item { color: #fff !important; background-color: #069fea; } .dropdown ul { width: 200px; } .dropdown-menu { display: block; overflow: hidden; padding: 0px; transition: all 0.3s ease-in; visibility: hidden; } .dropdown ul li a { color: black; } .open-aside { padding: 9px 14px; background-color: #069fea; border: none; border-radius: 10px; font-size: 25px; color: white; } .Follow-us .fa-brands, .fab { color: #a15653; transition: all 0.3s ease-in; } .Follow-us li:first-child a:hover { color: #2b2d2f; } .Follow-us a i:hover { color: #2b2d2f; } @media screen and (max-width: 1199px) { header .navbar ul li { font-size: 14px; } } @media screen and (min-width: 991px) { .navbar-expand-lg .navbar-collapse { justify-content: end; } } @media screen and (max-width: 991px) { .open-aside { padding: 8px 14px; display: block; } .join-btn { display: none; } .nav-logo img { width: 150px; } .side-nav-logo { padding-bottom: 20px; } .navbar { padding: 15px 0px; } } @media screen and (max-width: 768px) { .open-aside { padding: 9px 14px; } .nav-logo img { width: 130px; } .page-btn { font-size: 16px; } } @media screen and (max-width: 480px) { .nav-logo img { width: 120px; } aside .fa-xmark { font-size: 20px; } .open-aside { padding: 8px 14px; font-size: 22px; } .page-btn { font-size: 14px; } } /* End of 1.1. header section */ /* 1.2. Hero section */ .Hero { padding: 100px 0px 0px 0px; } .Hero .col-lg-5 { padding-bottom: 100px; } .Hero p { padding: 15px 90px 15px 0px; color: #2b2d2f; } .Hero h1 { color: #2b2d2f; padding: 30px 0px 0px 0px; } .Hero .Doctor img:first-child { position: absolute; right: 32%; width: 76%; z-index: 2; bottom: 0px; } .Hero .Doctor img:nth-child(2) { position: absolute; left: 12px; z-index: 1; bottom: 0px; width: 77%; } .Hero .bg figure { background: url("../image/Hero_Circle.png"); } .Hero .bg figure:first-child img { position: absolute; z-index: 3; top: 0; right: 0; } .Hero .Doctor { height: 600px; width: 100%; } .Hero .bg1 { position: absolute; z-index: 4; right: 10%; bottom: 400px; } .Hero .bg1 figure { background: url("../image/Hero_Circle.png"); padding: 10px; background-repeat: no-repeat; background-size: 100%; } .Hero .bg1 img { width: 100%; border-radius: 50%; transition: transform 0.3s ease-in-out; } .Hero .bg1 img:hover { transform: rotate(15deg); } .Hero .bg2 { position: absolute; z-index: 4; right: 10%; bottom: 100px; } .Hero .bg2 figure { background: url("../image/Hero_Circle.html"); padding: 10px; background-repeat: no-repeat; background-size: 100%; } .Hero .bg2 img { width: 100%; border-radius: 50%; transition: transform 0.3s ease-in-out; } .Hero .bg2 img:hover { transform: rotate(15deg); } .Hero .hero-btn { padding-top: 20px; } @media screen and (max-width: 1399px) { .Hero .bg1 { right: 0%; bottom: 330px; } .Hero .bg2 { right: 0%; bottom: 80px; } .Hero .Doctor img:nth-child(2) { left: 68px; } .Hero .Doctor img:first-child { right: 24%; } } @media screen and (max-width: 1280px) { .Hero p { padding: 15px 20px 15px 0px; } } @media screen and (max-width: 1199px) { .Hero .Doctor img:nth-child(2) { left: 20px; width: 80%; } .Hero .Doctor img:first-child { right: 26%; width: 85%; } .Hero .bg2 figure { background-size: 85%; } .Hero .bg2 img { width: 84%; } .Hero .bg1 { right: -2%; bottom: 290px; } .Hero .bg2 { right: -2%; } .Hero .bg1 figure { background-size: 85%; } .Hero .bg1 img { width: 84%; } } @media screen and (max-width: 1024px) { .Hero p { padding: 15px 47px 15px 0px; } .Hero { padding: 10px 0px 0px 0px; } } @media screen and (max-width: 991px) { .Hero { padding: 10px 0px; } .Hero .col-lg-5 { padding-bottom: 30px; } .Hero .Doctor { height: 100%; width: 100%; padding-top: 30px; } .Hero .Doctor img:first-child { right: 32%; width: 64%; } .Hero .bg1 { right: 13%; bottom: 61%; } .Hero .bg2 { right: 13%; bottom: 21%; } .Hero .Doctor img:nth-child(2) { position: relative; left: 17%; width: 60%; } } @media screen and (max-width: 768px) { .Hero .Doctor img:nth-child(2) { position: relative; left: 17%; width: 68%; } .Hero h1 { text-align: center; } .Hero p { padding: 15px 30px 15px 30px; text-align: center; } .Hero .hero-btn { padding-top: 30px; text-align: center; justify-content: center; } .Hero .col-lg-5 { padding-bottom: 0px; } .Hero .Doctor img:first-child { right: 25%; width: 72%; } .Hero .bg2 { right: 4%; bottom: 17%; } .Hero .bg1 { right: 4%; bottom: 61%; } } @media screen and (max-width: 767px) { .Hero .bg1 figure { background-size: 70%; } .Hero h1 { text-align: center; padding: 0px; } .Hero p { text-align: center; padding: 15px 30px 15px 30px; } .Hero .bg1 { top: 22%; right: 2%; } .Hero .bg2 { top: 64%; right: 2%; } .Hero .bg1 img { width: 66%; } .Hero .bg2 figure { background-size: 70%; } .Hero .bg2 img { width: 66%; } .Hero .d-flex a { padding: 12px 30px; } .Hero h1 { text-align: center; } .Hero .hero-btn { padding-top: 25px; text-align: center; } } @media screen and (max-width: 540px) { .Hero .bg2 figure { rotate: 90deg; } .Hero .bg2 img { rotate: 270deg; } .Hero .bg1 figure { rotate: 90deg; } .Hero .bg1 img { rotate: 270deg; } } @media screen and (max-width: 480px) { .Hero { padding: 35px 0px 0px; } .Hero .bg1 figure { background-size: 50%; padding: 6px; } .Hero .bg1 img { width: 46%; } .Hero .bg2 figure { background-size: 50%; padding: 6px; } .Hero .bg2 img { width: 46%; } .Hero .bg2 { top: 70%; right: 0%; } .Hero .bg1 { top: 30%; right: 0%; } .Hero p { padding: 15px 0px 15px 0px; width: 100%; margin: auto; } } @media screen and (max-width: 414px) { .Hero .bg1 figure { position: relative; top: 20px; left: 12px; } .Hero .bg2 figure { position: relative; top: 20px; left: 12px; } } @media screen and (max-width: 360px) { .Hero p { padding: 15px 0px 15px 0px; } .Hero .bg1 figure { background-size: 40%; padding: 3px; top: 34px; left: 14px; } .Hero .bg1 img { width: 38%; } .Hero .bg2 figure { background-size: 40%; padding: 3px; left: 14px; } .Hero .bg2 img { width: 38%; } .Hero .d-flex a { padding: 6px 14px; } } @media screen and (max-width: 320px) { .Hero .Doctor { padding-top: 40px; } .Hero .bg1 { bottom: 40%; } .Hero .bg2 { bottom: 0%; } .Hero .bg1 figure { top: 44px; left: 20px; } .Hero .bg2 figure { top: 35px; left: 20px; } } /* End of 1.2. Hero section */ /* 1.3. Inputs section */ .Input_fields { position: relative; top: -20px; z-index: 10; } .Input_fields h2 { padding: 0px 220px 30px 220px; color: #2b2d2f; } .Input_fields .Input_fields_Bg { padding: 50px 30px; background: rgba(255, 255, 255, 1); border: 1px solid rgba(216, 241, 255, 1); border-radius: 20px; box-shadow: 0px 37px 40px 0px #0000000d; } .Input_fields input, select { width: 100%; outline: none; padding: 15px 15px; border: 1px solid rgba(241, 241, 241, 1); border-radius: 7px; color: #848a8f; } .Input_fields option[hidden] { display: none; } .Input_fields input::placeholder { color: rgba(132, 138, 143, 1); } .Input_fields button { width: 100%; padding: 15px 15px; outline: none; border: none; border-radius: 7px; background-image: linear-gradient(205deg,#f0b46c 0%,#93464e 100%); color: #fff; } .Input_fields .align-items-center { gap: 20px; } .Input_fields .Input1st { width: 42%; gap: 20px; } .Input_fields .Service { width: 42%; gap: 20px; position: relative; } .Input_fields .Service::after { content: "\f0dd"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: gray; font-size: 16px; position: absolute; right: 6px; top: 25%; transform: translateX(-100%); pointer-events: none; } .Input_fields .Service select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; } .Input_fields .book-now { width: 16%; } @media screen and (max-width: 1199px) { .Input_fields .Input1st { width: 100%; } .Input_fields .Service { width: 100%; } .Input_fields .align-items-center { flex-direction: column; } .Input_fields .book-now { width: 100%; } .Input_fields .hover1 { width: 100%; } .Input_fields h2 { padding: 0px 120px 30px 120px; } .Input_fields button { width: 49%; } } @media screen and (max-width: 991px) { .Input_fields h2 { font-size: 36px; } .Input_fields .book-now { text-align: center; } } @media screen and (max-width: 768px) { .Input_fields h2 { padding: 0px 70px 25px 70px; } .Input_fields .Input_fields_Bg { padding: 50px 30px; } .Input_fields .book-now { text-align: center; } } @media screen and (max-width: 767px) { .Input_fields h2 { font-size: 28px; } .Input_fields .Input1st { flex-direction: column; } .Input_fields .Service::after { top: 68%; } .Input_fields .Service { flex-direction: column; } .Input_fields .hover1 { width: 100%; } .Input_fields button { width: 100%; } .Input_fields .Input_fields_Bg { padding: 30px 20px; } } @media screen and (max-width: 480px) { .Input_fields h2 { padding: 0px 0px 20px 0px; font-size: 22px; } .Input_fields input { padding: 12px 12px; } .Input_fields button { padding: 15px 12px; } } @media screen and (max-width: 360px) { .Input_fields h2 { font-size: 18px; } .d-flex .hover3 { padding: 12px 18px 12px 18px; } .Input_fields .Input_fields_Bg { padding: 50px 30px; } } @media screen and (max-width: 320px) { .Input_fields .Input_fields_Bg { padding: 24px 12px; } } /* End of 1.3. Inputs section */ /* 1.4. Cards section */ .Cards { padding: 80px 0px 100px; } .Cards .flex-column { border: 1px solid #d8f1ff; box-shadow: 0px 37px 40px 0px #0000000d; background: #ffffff; border-radius: 20px; padding: 40px 30px; text-align: center; } .Cards img[alt="Health"] { width: 66px; } .Cards img[alt="Trusted"] { width: 84px; } .Cards img[alt="Therapist"] { width: 66px; } .Cards .col-lg-3 a { padding: 10px 16px; border-radius: 50%; border: 0.8px solid #a15653; background: #ffffff; position: absolute; bottom: -18px; right: 42%; z-index: 1; } .Cards h4 { padding: 15px 0px; color: #2b2d2f; } .Cards p { color: #2b2d2f; flex-grow: 1; } .Cards .flex-column a i { color: #a15653; } .Cards .col-lg-3 .flex-column:hover a, .Cards .col-lg-3 .flex-column:hover { background-image: linear-gradient(205deg,#f0b46c 0%,#93464e 100%); } .Cards .flex-column:hover a i { color: #ffffff; } @media screen and (max-width: 1199px) { .Cards .flex-column { padding: 40px 16px; } } @media screen and (max-width: 991px) { .Cards .row { gap: unset; } } @media screen and (max-width: 768px) { .Cards { padding: 50px 0px 70px; } .Cards img[alt="Trusted"] { width: 66px; } } @media screen and (max-width: 767px) { .Cards .row { row-gap: 30px; } .Cards { padding: 30px 0px 50px; } .Cards .col-lg-3 a { right: 46%; } } @media screen and (max-width: 540px) { .Cards .col-lg-3 a { right: 45%; } } @media screen and (max-width: 360px) { .Cards .col-lg-3 a { right: 42%; padding: 10px 17px; } } /* End of 1.4. Cards section */ /* 1.5. Healing section */ .Healing { padding: 100px 0px 80px 0px; position: relative; } .Healing p { color: #2b2d2f; } .Healing .flex-column h2 { color: #2b2d2f; } .Healing figure img { position: absolute; top: -8%; width: 50%; left: 10%; } .Healing h2 span { font-family: "Marcellus", serif; } .Healing .Rating { background-color: rgba(251, 251, 251, 1); border: 1px solid rgba(216, 241, 255, 1); border-radius: 20px; padding: 30px 30px; box-shadow: 0px 0px 30px 0px #00000012; } .Healing .Rating hr { color: rgba(216, 216, 216, 1); margin: 5px; opacity: 1; width: 100%; } .Healing .Rating_Contant { padding: 40px 26px; background-image: linear-gradient(205deg,#f0b46c 0%,#93464e 100%); border-radius: 20px; } .Healing .gap-2 .Cases { position: relative; left: -5px; } .Healing .col-lg-4 img { width: 100%; border-radius: 20px; } .Healing .col-lg-5 .gap-3 { padding: 25px 40px 0px 50px; } .Healing .col-lg-5 .mt-lg-4 { padding: 0px; } .Healing .text-lg-start h2 { padding-right: 50px; } .Healing span { font-family: "Inspiration", "cursive"; font-weight: 400; font-size: 44px; line-height: 54px; color: rgba(43, 45, 47, 1); width: max-content; display: inline-block; } .Healing .col-lg-5 hr { margin: 0px; opacity: 1; color: rgba(43, 45, 47, 1); position: absolute; width: 100%; bottom: 21%; } .Healing img[alt="Cases"] { width: 28px; padding-top: 10px; } .Healing img[alt="Winner"], img[alt="Happiness"] { width: 43px; padding-top: 10px; } .Healing .col-lg-5 .mt-3 .gap-2 i { color: #8f3d4b; } .Healing .hr-bottom { width: 100%; margin-top: 120px; border: 1px solid #d8f1ff; opacity: 1; } @media screen and (max-width: 1400px) { .Healing figure img { top: -8%; width: 48%; } .Healing .Rating { padding: 20px 30px; } .Healing .Rating_Contant { padding: 28px 26px; } .Healing .col-lg-5 .gap-3 { padding: 0px 20px 0px 25px; } .Healing .col-lg-5 .mt-lg-4 { padding: 0px; } } @media screen and (max-width: 1280px) { .Healing .hr-bottom { margin-top: 100px; } } @media screen and (max-width: 1199px) { .Healing .hover3 { padding: 18px 20px 18px 20px; } .Healing .col-lg-5 .gap-3 { padding: 0px 0px 0px 10px; } .Healing .Rating_Contant { padding: 15px 16px; } .Healing .Rating { padding: 0px 20px; } .Healing .mt-lg-3 { padding: 0px; } .Healing .mt-lg-3 .hover3 { padding: 14px 20px; } } @media screen and (max-width: 1024px) { .Healing .col-lg-4 div { height: 100%; } .Healing .col-lg-4 img { width: 100%; height: 98%; object-fit: cover; } .Healing .Rating { padding: 10px 15px; } .Healing figure img { top: -4%; width: 49%; left: 9%; } } @media screen and (max-width: 991px) { .Healing { padding: 70px 0px 50px 0px; } .Healing .col-lg-4 img { width: 72%; } .Healing .row { row-gap: 20px; } .Healing .col-lg-5 .gap-3 { padding: 30px 0px 0px; } .Healing .col-lg-5 .text-lg-start p { text-align: start; } .Healing .col-lg-5 .text-lg-start h2 { text-align: start; padding-bottom: 10px; } .Healing .col-lg-5 .text-lg-start .gap-lg-3 p { padding: 0px; } .Healing .col-md-12 .gap-md-3 { padding-right: 270px; } .Healing figure img { display: none; } .Healing .hr-bottom { margin-top: 50px; } .Healing .w-50 { width: 80% !important; } .Healing .w-25 { width: 18% !important; } .Healing .w-25 hr { width: 100%; } } @media screen and (max-width: 912px) { .Healing .col-lg-4 img { width: 78%; } .Healing .w-25 { width: 20% !important; } } @media screen and (max-width: 820px) { .Healing .col-lg-4 img { width: 88%; } .Healing .w-25 { width: 26% !important; } } @media screen and (max-width: 768px) { .Healing { padding: 40px 0px 50px 0px; } .Healing .col-lg-4 div { display: flex; justify-content: center; } .Healing .col-lg-4 img { width: 90%; height: 100%; object-fit: cover; } .Healing .col-lg-5 { order: 1; } .Healing .col-lg-3 { order: 2; } .Healing .col-lg-4 { order: 3; } .Healing .row { row-gap: 50px; } .Healing .col-md-12 .gap-md-3 { padding-right: 0px; } .Healing .col-lg-5 .text-lg-start h2 { text-align: center; padding-bottom: 10px; padding-right: 0px; } .Healing .col-lg-5 .justify-content-around { justify-content: center !important; width: 80%; margin: auto; } .Healing .col-lg-5 .text-lg-start p { text-align: center; padding: 0px 30px 0px 30px; } .Healing .col-lg-5 .mt-lg-4 { justify-content: center; } .Healing .Rating { gap: 10px !important; padding: 15px 15px 20px; } } @media screen and (max-width: 767px) { .Healing { padding: 50px 0px 25px 0px; } .Healing .row { row-gap: 25px; } .Healing .w-50 { padding-right: 86px; } .Healing .Rating { padding: 20px 15px; gap: 15px !important; } .Healing .hr-bottom { margin-top: 25px; margin-bottom: 0px; } .Healing .col-lg-5 .gap-3 { padding: 0px 0px 0px; } .Healing .col-lg-5 .mt-lg-4 { padding-top: 20px; } .Healing .col-lg-5 .text-lg-start p { padding: 0px; } .Healing .col-lg-4 img { width: 100%; } } @media screen and (max-width: 540px) { .Healing .w-50 { flex-direction: column; } .Healing img[alt="Cases"] { position: relative; left: -5px; } .Healing .hover3 { padding: 14px 16px 14px 16px; } } @media screen and (max-width: 480px) { .Healing .flex-column h2 { padding: 0px 0px 0px 8px; } .Healing .gap-2 p { padding-left: 7px; } .Healing .w-50 { padding-right: 0px; } .Healing .col-lg-5 .mt-lg-3 { padding: 10px 0px; } } @media screen and (max-width: 414px) { .Healing .w-50 { width: unset !important; } .Healing .col-md-12 .align-items-end { gap: 20px; } .Healing .col-lg-5 .justify-content-around { justify-content: space-between !important; width: 100%; } } @media screen and (max-width: 360px) { .Healing .col-lg-5 .mt-lg-4 { flex-direction: column; } } @media screen and (max-width: 320px) { .Healing .col-md-12 .align-items-end { flex-direction: column; align-items: center !important; } .Healing .col-lg-5 .justify-content-around { justify-content: center !important; } } /* End of 1.5. Healing section */ /* 1.6. Companies section */ .Companies { padding: 0px 0px 100px; } .Companies h2 { color: #2b2d2f; } .Companies .Trusted-companies { margin: auto; text-align: center; padding-bottom: 30px; } .Companies .CompaniesSlider { width: 90%; max-width: 1120px; margin: auto; } .Companies .CompaniesSlider img { width: 170px; opacity: 0.5; margin: 0 auto; } .CompaniesSlider div a { display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1024px) { .Companies .CompaniesSlider img { width: 140px; } } @media screen and (max-width: 991px) { .Companies { padding: 0px 0px 70px; } .Companies .CompaniesSlider img { width: 180px; } } @media screen and (max-width: 768px) { .Companies .CompaniesSlider img { width: 160px; } } @media screen and (max-width: 480px) { .Companies .CompaniesSlider img { width: 140px; } .Companies { padding: 0px 0px 50px; } } /* End of 1.6. Companies section */ /* 1.7. Best section */ .Best { background: linear-gradient(to bottom, #eeedfc, #f3f3f5); padding: 70px 0px 150px 0px; position: relative; } .Best .circle img { position: absolute; top: 30%; right: 6%; width: 48%; z-index: 1; } .Best h2:nth-of-type(1) { padding: 0px 250px 0px 250px; text-align: center; color: #2b2d2f; } .Best p:nth-child(2) { text-align: center; padding: 15px 230px 50px 230px; color: #2b2d2f; } .Best .col-lg-8 .text-center { width: 40%; flex-grow: 1; border-radius: 20px; border: 1px solid #d8f1ff; background-color: #ffff; padding: 35px 67px; box-shadow: 0px 37px 40px 0px #0000000d; } .Best .col-lg-8 .text-center:hover { border: 1px solid #0197EC; } .Best .col-lg-8 h4 { color: #2b2d2f; } .Best .col-lg-8 p { font-size: 14px; line-height: 16px; color: #2b2d2f; } .Best figure img { width: 96%; border-radius: 20px; } .Best .col-md-4 .proudly_text { width: 273px; border-radius: 20px; padding: 30px 40px; text-align: center; background-image: linear-gradient(205deg,#f0b46c 0%,#93464e 100%); position: absolute; bottom: -12%; left: 15%; z-index: 2; } .Best .col-md-12 .gap-3 a { color: #2b2d2f; } .Best img[alt="therapy"] { width: 66px; } .Best img[alt="Message"] { width: 68px; } .Best img[alt="Sport"] { width: 72px; } .Best img[alt="chiropratic"] { width: 56px; } @media screen and (max-width: 1400px) { .Best .circle img { top: 35%; width: 51%; } .Best .col-md-12 .gap-3 { bottom: -25%; left: 10%; } .Best p:nth-child(2) { padding: 15px 180px 50px 180px; } .Best .col-md-4 .proudly_text { bottom: -24%; left: 10%; } } @media screen and (max-width: 1280px) { .Best .circle img { right: 10%; width: 50%; } } @media screen and (max-width: 1199px) { .Best .circle img { right: 5%; width: 58%; } .Best .col-md-12 .gap-3 { bottom: -46%; left: 2%; } .Best .col-lg-4 .text-center { padding: 30px 30px; } .Best p:nth-child(2) { padding: 15px 100px 50px 100px; } } @media screen and (max-width: 1024px) { .Best .circle img { width: 56%; right: 6%; top: 38%; } .Best .col-md-4 .proudly_text { width: 282px; padding: 35px 40px; bottom: -44%; left: 0%; } .Best .col-lg-8 .text-center { padding: 20px 47px; } } @media screen and (max-width: 991px) { .Best .circle img { display: none; } .Best .col-lg-8 .text-center { padding: 20px 20px; } .Best .col-md-4 .proudly_text { width: 92%; bottom: -34%; left: 2%; } } @media screen and (max-width: 820px) { .Best .col-md-4 .proudly_text { width: 92%; bottom: -45%; padding: 20px 16px; } .Best .col-lg-8 .text-center { padding: 20px 20px; } } @media screen and (max-width: 768px) { .Best { padding: 70px 0px; } .Best figure img { width: 100%; } .Best .col-md-4 .proudly_text { width: 100%; left: unset; } .Best .col-md-4 .proudly_text { bottom: -54%; padding: 40px 16px; } } @media screen and (max-width: 767px) { .Best { padding: 50px 0px; } .Best .col-lg-8 .text-center { padding: 30px 20px; } .Best p:nth-child(2) { padding: 15px 20px 50px 20px; } .Best .col-md-4 .proudly_text { bottom: 0%; padding: 20px 16px; } .Best figure { text-align: center; } .Best h2:nth-of-type(1) { padding: 0px 50px 0px 50px; } } @media screen and (max-width: 480px) { .Best .col-lg-8 .text-center { width: 100%; } .Best p:nth-child(2) { padding: 15px 0px 50px 0px; } } @media screen and (max-width: 360px) { .Best figure img { width: 100%; } .Best .col-md-12 .gap-3 { width: 100%; } } /* End of 1.7. Best section */ /* 1.8. Testimonials section */ .Testimonials { background-color: #fbfbfb; } .Testimonials .row .col-md-12 { padding: 0px; } .Testimonials figure { width: 780px; height: 100%; position: relative; } .Testimonials h2 { padding: 10px 240px 0px 240px; color: rgba(43, 45, 47, 1); color: #2b2d2f; } .Testimonials .Main-P { padding: 15px 290px 0px 290px; color: rgba(43, 45, 47, 1); color: #2b2d2f; } .Testimonials .bg { background: linear-gradient(72.65deg, #e2a469 1.46%, rgba(143, 61, 75, 0.65) 90.12%); width: 100%; height: 100%; position: absolute; top: 0; } .Testimonials figure::before { position: absolute; z-index: -1; } .Testimonials figure img { width: 100%; height: 100%; object-fit: cover; } .Testimonials .content { position: relative; padding: 100px 0px; } .TestimonialsSlider { display: flex; position: relative; padding: 100px 0px 50px 0px; } .TestimonialsSlider p { color: #2b2d2f; } .Testimonials .row { margin-right: 0px; margin-left: 0px; padding-left: 0px; padding-right: 0px; } .Testimonials h6 { color: #a15653; padding-bottom: 5px; } .Testimonials .Person { padding: 25px 60px; border-radius: 20px; background-color: #ffff; box-shadow: 3px 25px 20px 1px #0000000d; position: relative; } .Testimonials .stars .fa-star { color: #ffcd06; padding-bottom: 10px; } .Testimonials .Person .d-flex img { position: absolute; width: 130px; bottom: 12px; right: 4px; border-radius: 50%; } .TestimonialsSlider .Person a { padding-top: 10px; color: #01afec; } .TestimonialsSlider .slick-track { display: flex; gap: 20px; } .TestimonialsSlider .slick-list { overflow-x: clip !important; overflow-y: visible !important; } @media screen and (min-width: 1440px) { .Testimonials figure { width: 123%; } } @media screen and (max-width: 1280px) { .Testimonials figure { width: 700px; } .Testimonials .Person .d-flex img { width: 110px; bottom: 20px; right: -28px; } .Testimonials .Person { padding: 25px 40px; } .Testimonials .Main-P { padding: 10px 250px 10px 250px; } } @media screen and (max-width: 1024px) { .Testimonials figure { width: 550px; } .Testimonials .Main-P { padding: 10px 90px 10px 157px; } .Testimonials .content { position: relative; padding: 40px 0px; } .TestimonialsSlider { padding: 40px 0px 50px 0px; } .Testimonials .Person .d-flex img { width: 110px; bottom: 20px; right: 0px; } } @media screen and (max-width: 991px) { .TestimonialsSlider { right: 0%; } .Testimonials figure { width: 100%; } .Testimonials .Main-P { padding: 10px 0px 10px 0px; display: flex; justify-content: center; } } @media screen and (max-width: 768px) { .Testimonials .content { padding: 10px 0px 70px 0px; } .Testimonials figure { height: 90%; } } @media screen and (max-width: 767px) { .Testimonials .content { padding: 15px 0px 50px; } .TestimonialsSlider { padding: 40px 0px 30px 0px; } } @media screen and (max-width: 540px) { .Testimonials h2 { padding: 0px; } .Testimonials .Main-P { width: 70%; text-align: center; margin: auto; } } @media screen and (max-width: 360px) { .Testimonials .Person .d-flex img { width: 101px; bottom: 29px; right: -5px; } .Testimonials .Main-P { width: 100%; } } @media screen and (max-width: 320px) { .Testimonials .Person .d-flex img { width: 90px; bottom: 0; right: -28px; } } /* End of 1.8. Testimonials section */ /* 1.9. Experience section */ .Experience { padding: 70px 0px; position: relative; background: linear-gradient(180deg, rgba(78, 224, 163, 0.1) 0%, rgba(78, 224, 163, 0) 100%); } .Experience .background2 img { position: absolute; left: -1%; top: 1%; width: 46%; z-index: 1; } .Experience .Doctor { width: 450px; } .Experience .Doctor img { width: 100%; border-radius: 20px; } .Experience .text-center { width: 273px; border-radius: 20px; padding: 35px 40px; background-image: linear-gradient(205deg,#f0b46c 0%,#93464e 100%); position: absolute; top: 320px; left: 305px; z-index: 1; } .Experience h2 { color: #2b2d2f; padding: 0px 50px 10px 0px; } .Experience h4 { color: #2b2d2f; } .Experience .gap-4 p { width: 350px; color: #2b2d2f; } .Experience .gap-1 hr { width: 80%; margin: 10px 0; } .Experience .flex-column .mt-4 { padding-top: 20px; align-items: center; } .Experience img[alt="trainer"] { width: 56px; } .Experience img[alt="prices"] { width: 50px; } .Experience img[alt="services"] { width: 58px; } @media screen and (max-width: 1400px) { .Experience .text-center { left: 260px; } .Experience .background2 img { width: 50%; } } @media screen and (max-width: 1024px) { .Experience .text-center { top: 84%; left: unset; width: 94%; padding: 25px 30px; } .Experience .background2 img { width: 51%; bottom: 12%; } .Experience .background2 img { display: none; } } @media screen and (max-width: 991px) { .Experience .gap-1 .gap-4 p { width: 100%; } .Experience .gap-1 hr { width: 100%; } .Experience .Doctor { width: 100%; } .Experience .flex-column .mt-4 { flex-wrap: wrap; align-items: center; justify-content: center; } .Experience .text-center { top: 79%; } .Experience h2 { padding: 0px 0px 15px 0px; } } @media screen and (max-width: 768px) { .Experience { padding: 70px 0px; } .Experience h2 { padding: 0px 0px 15px 0px; } } @media screen and (max-width: 767px) { .Experience { padding: 50px 0px; } .Experience .row { row-gap: 50px; flex-direction: column-reverse; } .Experience .col-lg-6:first-child { display: flex; flex-direction: column; align-items: center; } .Experience .Doctor { display: flex; justify-content: center; align-items: center; } } @media screen and (max-width: 540px) { .Experience h2 { padding: 0px 0px 20px 0px; } .Experience .gap-1 hr { width: 100%; } .Experience .text-center { padding: 30px; } } @media screen and (max-width: 480px) { .Experience h2 { padding: 0px 0px 20px 0px; } .Experience .text-center { width: 90%; padding: 20px; top: 82%; } .Experience { padding: 50px 0px; } } @media screen and (max-width: 360px) { .Experience { padding: 50px 0px 90px; } .Experience .gap-1 .mt-4 { flex-direction: column; } .Experience .text-center { bottom: -40px; } } @media screen and (max-width: 320px) { .Experience .gap-1 .gap-4 { align-items: center !important; flex-direction: column; text-align: center; gap: 10px !important; } .Experience .gap-1 .gap-4 div p { margin: auto; } .Experience .text-center { width: 93%; } .Experience h2 { text-align: center; } } /* End of 1.9. Experience section */ /* 1.10. Team section */ .Team { padding-bottom: 100px; } .Team .content h2 { color: #2b2d2f; } .Team .content p { color: #2b2d2f; padding-top: 15px; } .Team .Doctor { position: relative; overflow: hidden; border-radius: 20px; } .Team .Doctor img { width: 100%; } .Team .hover { position: absolute; bottom: 0; right: 0; background-image: linear-gradient(205deg,#f0b46c 0%,#93464e 100%); overflow: hidden; width: 100%; height: 80%; transition: all 0.4s ease; border-radius: 50%; opacity: 0; left: -50px; top: 100%; } .Team .Doctor:hover .hover { top: 120px; opacity: 1; } .Team .hover_data { position: absolute; top: 70%; left: 50%; transform: translate(-40%, -50%); opacity: 0; transition: opacity 0.2s ease 0.2s, top 0.4s ease 0.2s; display: flex; flex-direction: column; gap: 10px; } .Team .Doctor:hover .hover_data { top: 50%; opacity: 1; } .Team .Doctor .hover h4, .Team .Doctor .hover p { color: #ffffff; } .Team .hover_icons { display: flex; justify-content: space-between; width: 100px; } .Team .hover_icons a i { transition: all 0.2s ease-in; color: #ffffff; } .Team .hover_icons a i:hover { color: #2b2d2f; transform: translateY(-10%); } .Team .content { text-align: center; margin-bottom: 50px; } .Team .dr-images { display: flex; justify-content: space-between; } .Team .d-flex { margin-top: 40px; } @media screen and (max-width: 1280px) { .Team .hover { left: -35px; } } @media screen and (max-width: 1199px) { .Team .hover { left: -28px; } .Team .Doctor:hover .hover { top: 85px; } .Team .Doctor .hover_data h4 { font-size: 20px; } } @media screen and (max-width: 1024px) { .Team .Doctor:hover .hover { top: 88px; } .Team { padding-bottom: 70px; } } @media screen and (max-width: 991px) { .Team .hover_data { gap: 4px; } } @media screen and (max-width: 820px) { .Team .Doctor:hover .hover { top: 62px; } .Team .hover { width: 108%; height: 88%; } } @media screen and (max-width: 768px) { .Team .Doctor:hover .hover { top: 70px; } .Team .hover { left: -24px; } .Team .Doctor .hover_data h4 { font-size: 18px; } .Team { padding-bottom: 50px; } .Team .hover .hover_icons a { font-size: 12px; } .Team .hover_icons { justify-content: unset; gap: 10px; } } @media screen and (max-width: 540px) { .Team .hover .hover_icons a { font-size: 20px; } .Team .hover { width: 85%; left: -80px; } .Team .hover_icons { gap: 16px; } .Team .hover_data { gap: 12px; } .Team .Doctor:hover .hover { height: 66%; top: 284px; } .Team .Doctor { margin-bottom: 20px; } .Team .view-all-btn { margin-top: 20px; } .Team .d-flex { margin-top: 15px; } } @media screen and (max-width: 480px) { .Team .Doctor:hover .hover { top: 240px; } } @media screen and (max-width: 375px) { .Team .Doctor:hover .hover { top: 194px; } .Team .hover { left: -55px; } .Team .content p { margin: auto; width: 100%; } .Team .content { margin-bottom: 30px; } } @media screen and (max-width: 320px) { .Team .Doctor:hover .hover_data { top: 39%; gap: 2px; } .Team .Doctor:hover .hover { width: 100%; height: 80%; top: 150px; } } /* End of 1.10. Team section */ /* 1.11. Steps section */ .Steps { background-color: #f5f5f5; padding: 100px 0px; } .Steps .gap-3 h2 { color: #2b2d2f; padding-top: 30px; padding-bottom: 10px; } .Steps .gap-3 p { color: #2b2d2f; } .Steps .gap-md-2 .gmail_p { width: min-content; } .Steps .gap-3 h4 { color: #2b2d2f; } .Steps .align-items-start { display: flex; gap: 50px; padding: 20px 0px 0px; } .Steps .flex-column hr { width: 82%; color: #3d3f41; opacity: 1; } .Steps .gap-2 figure { justify-content: center; align-items: center; width: 50px; height: 50px; padding: 20px; display: flex; background: #a15653; border-radius: 50%; } .Steps .gap-2 figure img { width: 22px; } .Steps .mt-lg-4 { padding-top: 10px; } .Steps .Doctor { position: relative; right: -18%; z-index: 1; } .Steps .Doctor img { width: 100%; border-radius: 20px; } .Steps .z-2 { top: 30px; display: flex; flex-direction: column; gap: 20px; } .Steps .d-flex .numbers { width: 82px; height: 82px; padding: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 18px solid #ffffff; background-image: linear-gradient(205deg,#f0b46c 0%,#93464e 100%); } .Steps .d-flex .numbers h2 { color: #ffffff; transform: scale(0.9); } .Steps .position-relative .d-flex h4 { color: #2b2d2f; } .Steps .position-relative .d-flex p { color: #2b2d2f; padding: 10px 0px; } .Steps .position-relative .d-flex hr { width: 100%; height: 2px; opacity: 1; color: #3d3f41; } @media screen and (max-width: 1400px) { .Steps .z-2 { top: 25px; gap: 0px; } .Steps .Doctor img { width: 111%; } .Steps .Doctor { right: -12%; } .Steps .position-relative .d-flex hr { margin: 10px 0; } } @media screen and (max-width: 1199px) { .Steps .gap-lg-4 { flex-direction: column; align-items: start !important; } .Steps .flex-lg-column { flex-direction: row !important; } .Steps .d-flex .numbers h2 { transform: scale(0.7); } .Steps h4 { font-size: 18px; } .Steps .d-flex .numbers { padding: 26px; } .Steps .Doctor img { width: 132%; } .Steps .Doctor { right: 6%; } .Steps .gap-3 h2 { padding-top: 0px; } } @media screen and (max-width: 991px) { .Steps .Doctor img { width: 90%; } .Steps .row { row-gap: 50px; } .Steps .row .col-md-7 { align-content: center; } .Steps .Doctor { position: static; } .Steps .z-2 { position: static; top: unset; } .Steps .gap-lg-4 { flex-direction: row; } .Steps .mt-lg-4 { padding-top: 20px; } .Steps .col-md-12 .gap-3:first-child { padding-right: 290px; } .Steps .gap-3 h2 { padding-bottom: 0px; } } @media screen and (max-width: 820px) { .Steps .Doctor img { width: 95%; } } @media screen and (max-width: 768px) { .Steps .Doctor img { width: 100%; } .Steps { padding: 70px 0px 70px; } .Steps .col-md-12 .gap-3:first-child { padding-right: 0px; align-items: center; justify-content: center; } .Steps .align-items-start { gap: 50px; } } @media screen and (max-width: 767px) { .Steps .Doctor img { width: 100%; } .Steps .gap-3 h2 { text-align: center; } .Steps .gap-3 p { text-align: center; } .Steps .align-items-start { gap: 80px; justify-content: center; } .Steps .mt-lg-4 { justify-content: center; display: flex; } .Steps .Doctor { display: flex; justify-content: center; } .Steps { padding: 50px 0px; } .Steps .z-2 { gap: 20px; align-items: center; } .Steps .flex-lg-column .flex-column { gap: 0 !important; } .Steps .col-md-12 .gap-3:first-child { padding-right: 0px; } .Steps .flex-column hr { width: 100%; } } @media screen and (max-width: 480px) { .Steps .pe-lg-4 { padding: 0px 25px 0px 25px; } .Steps .align-items-start { gap: 8px; } .Steps .d-flex .numbers h2 { transform: scale(1); } .Steps .row { row-gap: 25px; } .Steps .hover3 { padding: 12px 20px; } } @media screen and (max-width: 430px) { .Steps .align-items-start { gap: 20px; flex-direction: column; margin: auto; padding: 0px; } .Steps .d-flex .numbers { border: 14px solid #ffffff; } .Steps .d-flex .numbers h2 { transform: scale(1.2); } .Steps .gap-2 figure img { width: 20px; } .Steps .flex-column hr { margin: 0px; } .Steps .pe-lg-4 { padding: 0px; } .Steps .mt-lg-4 { padding-top: 0px; } } @media screen and (max-width: 320px) { .Steps .d-flex .numbers h2 { transform: scale(1.2); } .Steps .z-2 .gap-2 { flex-direction: column; text-align: center; align-items: center; } .Steps .Doctor img { width: 100%; } } /* End of 1.11. Steps section */ /* 1.12. Bone section */ .Bone { margin: 150px 0px; background-image: linear-gradient(205deg,#f0b46c 0%,#93464e 100%); } .Bone_Contant { padding: 100px 0px; } .Bone h2 { padding: 0px 100px 0px 0px; color: #2b2d2f; } .Bone p { padding: 15px 180px 25px 0px; color: #2b2d2f; } .Bone .gap-3 { display: flex; align-items: center; } .Bone_Doctor figure:first-child { position: absolute; bottom: -125px; right: 177px; } .Bone_Doctor figure:first-child img { width: 740px; } .Bone .disease span { font-family: "Roboto", sans-serif; color: #2b2d2f; } .Bone .disease hr { position: absolute; background-color: #fff; color: #fff; width: 60px; opacity: 1; margin: 0px; height: 2px; } .Bone .disease div { color: #2b2d2f; background: #fff; border-radius: 50%; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; text-align: center; } .Bone .disease1 { border: 2px solid #fff; padding: 5px; border-radius: 50%; position: absolute; left: 5%; bottom: 360px; } .Bone .disease1 hr { left: 110px; top: 50px; } .Bone .disease2 { border: 2px solid #fff; padding: 5px; border-radius: 50%; position: absolute; bottom: 25px; left: 0%; } .Bone .disease2 hr { top: 53px; left: 110px; } .Bone .disease3 { border: 2px solid #fff; padding: 5px; border-radius: 50%; position: absolute; bottom: 57px; left: 37%; } .Bone .disease3 hr { top: 54px; right: 110px; } .Bone_Doctor figure:nth-child(2) { position: absolute; bottom: 0; right: 0px; } .Bone_Doctor figure:nth-child(2) img { width: 560px; } .Bone .gap-3 .hover2 { z-index: 10; } @media screen and (max-width: 1400px) { .Bone_Doctor figure:nth-child(2) img { width: 543px; } .Bone .disease3 { left: 31%; } .Bone_Doctor figure:first-child { right: 152px; } .Bone .disease1 { left: -7%; bottom: 385px; } .Bone .disease2 { bottom: 156px; left: -7%; } } @media screen and (max-width: 1199px) { .Bone { margin: 0px 0px 100px 0px; } .Bone .mt-3 .hover3 { padding: 14px 20px 14px 20px; } .Bone h2 { padding: 0px 20px 0px 0px; } .Bone p { padding: 15px 50px 25px 0px; } .Bone_Doctor figure:first-child { right: 60px; } .Bone_Doctor figure:nth-child(2) { right: -32px; } .Bone_Doctor figure:nth-child(2) img { width: 450px; } .Bone .disease1 { left: -13%; bottom: 415px; } .Bone .disease2 { bottom: 150px; left: -10%; } .Bone .disease3 { left: 34%; } } @media screen and (max-width: 1024px) { .Bone h2 { padding: 0px; } .Bone_Doctor figure:nth-child(2) { right: 0px; } .Bone p { padding: 15px 80px 25px 0px; } .Bone_Doctor figure:nth-child(2) { right: -12px; } .Bone_Doctor figure:nth-child(2) img { width: 410px; } .Bone_Doctor figure:first-child img { width: 690px; } .Bone_Doctor figure:first-child { bottom: -14%; } .Bone .disease hr { width: 45px; } .Bone .disease div { width: 85px; height: 85px; } .Bone_Doctor figure:first-child { right: 72px; } .Bone .disease2 { bottom: 162px; left: -5%; } .Bone .disease2 hr { top: 46px; left: 97px; } .Bone .disease3 { left: 32%; } .Bone .disease3 hr { top: 47px; right: 96px; } .Bone .disease1 hr { left: 97px; top: 46px; } .Bone .disease1 { left: -3%; bottom: 390px; } } @media screen and (max-width: 991px) { .Bone { margin: 0px; } .Faqs_Bone { margin-bottom: 100px; } .Bone_Contant { padding: 70px 0px; } .Bone_Doctor { display: flex; } .Bone_Doctor figure:first-child { position: relative; right: 50px; } .Bone_Doctor figure:nth-child(2) { position: relative; right: 70px; align-items: end; justify-content: end; display: flex; } .Bone_Doctor figure:first-child img { width: 135%; } .Bone_Doctor figure:nth-child(2) img { width: 135%; } .Bone .Position { position: unset; } .Bone .disease3 { left: 39%; bottom: 187px; } .Bone .disease1 { left: 16%; bottom: 76%; } .Bone .disease2 { bottom: 30%; left: 15%; } .Bone h2 { padding: 0px 150px 0px 150px; text-align: center; } .Bone p { padding: 15px 200px 25px 200px; text-align: center; } .Bone .mt-3 { align-items: center; justify-content: center; } .Bone_Contant { padding: 70px 0px 20px 0px; } } @media screen and (max-width: 912px) { .Bone .disease1 { left: 15%; } .Bone .disease3 { left: 38%; bottom: 136px; } } @media screen and (max-width: 820px) { .Bone .disease1 { left: 12%; bottom: 76%; } .Bone .disease2 { bottom: 25%; left: 11%; } .Bone .disease3 { bottom: 154px; } } @media screen and (max-width: 768px) { .Faqs_Bone { margin-bottom: 70px; } .Bone .disease1 { left: 11%; bottom: 74%; } .Bone .disease2 { bottom: 28%; } .Bone .disease3 { bottom: 118px; left: 38%; } .Bone h2 { padding: 0px 50px 0px 50px; text-align: center; } .Bone p { padding: 15px 100px 25px 100px; text-align: center; } .Bone_Contant { padding: 70px 0px 20px 0px; } .Bone h2 { width: 90%; margin: auto; } .Bone p { width: 90%; margin: auto; } } @media screen and (max-width: 540px) { .Faqs_Bone { margin-bottom: 50px; } .Bone .disease2 { left: 2%; } .Bone .disease1 { left: 1%; bottom: 70%; } .Bone .disease3 { bottom: 40px; left: 38%; } } @media screen and (max-width: 480px) { .Bone_Contant { padding: 50px 0px; } .Bone_Doctor figure:nth-child(2) { right: 20px; } .Bone_Doctor figure:first-child { right: 20px; } .Bone span { font-size: 12px; } .Bone .disease div { width: 65px; height: 65px; } .Bone .disease1 hr { left: 77px; top: 37px; width: 30px; } .Bone .disease2 hr { top: 37px; left: 75px; width: 30px; } .Bone .disease3 hr { top: 35px; right: 76px; width: 30px; } .Bone .disease1 { left: 10%; } .Bone .disease2 { left: 9%; bottom: 26%; } .Bone .disease3 { top: 67%; left: 41%; bottom: unset; } .Bone h2 { padding: 0px; width: 100%; } .Bone p { padding: 15px 0px 25px 0px; width: 100%; } .Bone_Contant { padding: 50px 0px 20px 0px; } .Bone .mt-3 { flex-direction: column; gap: 20px; } } @media screen and (max-width: 430px) { .Bone .disease1 { left: 7%; } .Bone .disease2 { left: 8%; bottom: 33%; } } @media screen and (max-width: 414px) { .Bone .disease2 { left: 7%; bottom: 32%; } .Bone .disease1 { left: 6%; } .Bone .disease3 { top: 65%; } } @media screen and (max-width: 375px) { .Bone .disease2 { left: 4%; bottom: 31%; } .Bone .disease1 { left: 2%; } .Bone .disease3 { top: 65%; } } @media screen and (max-width: 360px) { .Bone .disease { border: 1px solid #fff; padding: 3px; } .Bone .disease2 { left: 2%; bottom: 17%; } .Bone .disease1 { left: 5%; bottom: 64%; } .Bone .disease1 hr { left: 72px; top: 32px; width: 24px; height: 1px; } .Bone .disease2 hr { top: 32px; left: 71px; width: 24px; height: 1px; } .Bone .disease3 hr { top: 32px; right: 72px; width: 24px; height: 1px; } .Bone .disease3 { top: 62%; left: 40%; } .Bone_Doctor figure:nth-child(2) { right: 0px; } } @media screen and (max-width: 320px) { .Bone .disease1 { left: 1%; } .Bone .disease2 { left: 1%; bottom: 24%; } .Bone .disease3 { top: 60%; } .Bone_Doctor figure:nth-child(2) img { width: 153%; } .Bone_Doctor figure:nth-child(2) { right: -10px; } } /* End of 1.12. Bone section */ /* 1.13. Blog section */ .Blog { padding: 50px 0px 100px; } .Blog .BlogCard { border: 1px solid #f1f1f1; background: #ffffff; border-radius: 20px; box-shadow: 0px 37px 40px 0px #0000000d; padding: 20px; display: flex; flex-direction: column; gap: 10px; height: 100%; } .Blog .BlogCard div:first-child { overflow: hidden; } .Blog .BlogCard h4 { color: #2b2d2f; transition: all 0.3s ease-in; } .Blog .BlogCard p { color: #2b2d2f; flex-grow: 1; } .Blog .BlogCard img { width: 100%; transition: all 0.3s ease-in; } .Blog .BlogCard img:hover { transform: scale(1.1) rotate(3deg); border-radius: 10px; } .Blog .BlogCard i { font-size: 20px; color: #a15653; } .Blog .BlogCard a:hover h4 { color: #01afece6; } .Blog .BlogCard a { color: #1d448e; font-weight: 400; } .Blog .BlogCard p { color: #2b2d2f; padding-right: 50px; } .Blog .content { padding-top: 110px; } .Blog .content h2 { color: #2b2d2f; } .Blog .content p { padding: 15px 40px 0px 0px; color: #2b2d2f; } .Blog .content .mt-4 .hover2 { color: #2b2d2f; } .Blog .hover2:hover { color: #01afece6; } @media screen and (max-width: 1400px) { .Blog .content { padding-top: 90px; } } @media screen and (max-width: 1024px) { .Blog .BlogCard p { padding-right: 0px; } .Blog .content { padding-top: 75px; } } @media screen and (max-width: 991px) { .Blog .BlogCard { height: 100%; } .Blog .content h2 { font-size: 32px; } .Blog .content { padding-top: 70px; } } @media screen and (max-width: 768px) { .Blog .content { padding: 0px 0px 24px; text-align: center; width: 80%; margin: auto; } .Blog .content h2 { font-size: 32px; } .Blog .content p:nth-child(2) { padding-right: 0px; } .Blog .content p:nth-child(3) { padding: 30px 0px 10px 0px; } .Blog { padding: 70px 0px; } .Blog .content .d-flex .hover2 { margin-top: 20px; } .Blog .BlogCard { height: 100%; } .Blog .col-lg-4:nth-of-type(1) { order: 3; flex-basis: 50%; } .Blog .col-lg-4:nth-of-type(2) { order: 2; flex-basis: 50%; } .Blog .col-lg-4:nth-of-type(3) { order: 1; flex-basis: 100%; } .Blog .BlogCard p { padding-right: 50px; } } @media screen and (max-width: 767px) { .Blog { padding: 50px 0px; } .Blog .row { row-gap: 20px; } .Blog .content { width: 100%; margin: auto; padding: 0px 0px 20px 0px; text-align: center; } .Blog .content p:nth-child(3) { padding: 15px 0px 0px 0px; } .Blog .content p:nth-child(2) { padding-top: 18px; } } @media screen and (max-width: 540px) { .Blog .col-lg-4:nth-of-type(1) { flex-basis: 100%; } .Blog .col-lg-4:nth-of-type(2) { flex-basis: 100%; } } @media screen and (max-width: 360px) { .Blog .content p { font-size: 14px; } .Blog .content .d-flex { justify-content: center; } .Blog .BlogCard p { padding-right: 20px; } } /* End of 1.13. Blog section */ /* 1.14. Footer section */ footer { background-color: #a15653; padding-top: 50px; } footer .footer-menu a:hover { color: #069fea; } footer .col-md-4 .gap-md-4 a { width: min-content; } footer img { width: 240px; } footer .SocialIcon { padding-top: 10px; } footer .SocialIcon i { color: #fff; transition: all 0.1s ease-in; font-size: 21px; } footer .SocialIcon i:hover { color: #029aeb; transform: translateY(-10%); } footer p { color: #ffff; padding: 15px 150px 25px 0px; } footer .subscribe .d-flex { width: 100%; justify-content: space-between; align-items: center; padding: 40px 0px 40px 0px; } footer .subscribe .d-flex h4 { color: #ffff; white-space: nowrap; padding-right: 30px; } footer .subscribe .d-flex form { width: 100%; gap: 20px; opacity: 0px; display: flex; align-items: center; } footer .subscribe .d-flex form input { width: 70%; padding: 14px 20px; color: #ffffff; gap: 10px; border: 0.5px solid #ffffff; background-color: transparent; outline: none; border-radius: 7px; } footer .subscribe .d-flex input::placeholder { color: #ffff; } footer .subscribe .d-flex form button { width: 30%; padding: 14px 0px; font-weight: 500; border: none; border-radius: 7px; color: #1d448e; border: 0.6px solid#ffffff; background-color: #ffffff; transition: 0.3s ease-in-out; } footer .subscribe .d-flex form button:hover { background-color: transparent; color: #ffff; border: 0.6px solid #ffff; } footer .FooterLinks { padding: 40px 0px 20px 0px; display: flex; justify-content: space-between; border: none; } footer .subscribe .FooterLinks a { color: #fff; text-decoration: none; } footer .subscribe .FooterLinks ul li { padding-bottom: 20px; } footer .subscribe .FooterLinks ul li a:hover { color: #029aeb; } footer hr { color: #FFFFFF; height: 0.6px; opacity: 1; } footer .copyright p { text-align: center; width: 100%; padding: 10px 0px 20px 0px; } @media screen and (max-width: 1280px) { footer p { padding: 15px 100px 25px 0px; } footer .FooterLinks { padding: 30px 0px 20px 0px; } } @media screen and (max-width: 1199px) { footer .subscribe .d-flex { gap: 10px; flex-direction: column; padding: 50px 0px 30px 0px; } footer .gap-md-4 { padding-top: 43px; } } @media screen and (max-width: 1024px) { footer .subscribe .d-flex { align-items: start; } footer .FooterLinks { padding: 30px 0px 0px 0px; } footer p { padding: 10px 40px 20px 0px; } } @media screen and (max-width: 991px) { .footer-menu { padding: 28px 38px 0px 0px; } .footer-menu ul li a { font-size: 14px; } footer .FooterLinks { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 40px 0px 0px 0px; } footer .FooterLinks ul { width: 150px; padding-bottom: 20px; } footer .gap-md-4 { padding-top: 40px; } } @media screen and (max-width: 820px) { footer .gap-md-4 { padding-top: 24px; } footer .FooterLinks { padding: 40px 0px 0px 0px; } } @media screen and (max-width: 768px) { footer { padding-top: 70px; } footer .subscribe .d-flex h4 { padding-right: 0px; } footer .gap-md-4 { padding-top: 64px; } footer img { width: 200px; } footer .SocialIcon { padding: 24px 0px 0px 0px; } footer .subscribe .d-flex { align-items: start; padding: 0px 0px 10px 0px; } footer .FooterLinks ul { width: 35%; padding-bottom: 0px; } footer .FooterLinks { padding: 40px 0px 20px 0px; } footer .FooterLinks ul:nth-child(3) { display: none; } footer .gap-md-4 { padding-top: 0px; } } @media screen and (max-width: 767px) { footer .subscribe .d-flex { padding: 25px 0px 50px 0px; } footer p { text-align: center; padding: 0px 150px 0px 150px; } footer { padding-top: 50px; } footer .SocialIcon { padding: 20px 0px 0px 0px; justify-content: center; } footer .gap-md-4 { flex-direction: column !important; align-items: center; justify-content: center; } footer .FooterLinks { padding: 10px 10px 0px 10px; } footer .FooterLinks ul { padding-bottom: 0px; } footer .subscribe .d-flex { align-items: center; } footer hr { margin: 0px 0px; } } @media screen and (max-width: 540px) { footer form { flex-direction: column; } footer p { padding: 0px 100px 0px 100px; } footer .subscribe .d-flex form input { width: 100%; padding: 12px 20px; } footer .subscribe .d-flex form button { padding: 12px 0px; width: 100%; } } @media screen and (max-width: 480px) { footer .gap-md-4 { flex-direction: column !important; align-items: center; padding-top: 25px; width: 100%; margin: auto; padding: 0px 20px 0px 20px; text-align: center; } footer .FooterLinks { padding: 30px 0px 10px 0px; } footer .subscribe .d-flex form { gap: 12px; } footer .copyright { padding-top: 10px; } footer img { width: 180px; } footer p { padding: 0px; } footer .FooterLinks ul { width: 40%; } footer .FooterLinks ul:nth-child(4) { flex-grow: 1; } } /* End of 1.14. Footer section */ /*======== 2.1. NextPages_Hero section ========*/ .NextPages_Hero { background: linear-gradient(180deg, rgba(167, 93, 83, 0.8) 0%, rgba(197, 135, 101, 0.8) 100%), url("../image/bg/help-bg.html"); width: 100%; background-position: right; background-repeat: no-repeat; background-size: cover; padding: 70px 0px; } .NextPages_Hero h1 { color: #fff; } .NextPages_Hero p { width: 32%; color: #2b2d2f; } @media screen and (max-width: 1400px) { .NextPages_Hero p { width: 46%; } } @media screen and (max-width: 1024px) { .NextPages_Hero p { width: 56%; } } @media screen and (max-width: 768px) { .NextPages_Hero { padding: 70px 0px; } .NextPages_Hero h1 { text-align: center; } .NextPages_Hero p { width: 100%; text-align: center; margin: auto; } } @media screen and (max-width: 767px) { .NextPages_Hero { text-align: center; } .NextPages_Hero p { width: 100%; } } @media screen and (max-width: 480px) { .NextPages_Hero { padding: 50px 0px; } } /*======== End of 2.1. NextPages_Hero section ========*/ /*======== 2.2. About_healing section ========*/ .About_healing { padding: 150px 0px 100px; } .About_healing .Doctor { width: 100%; height: 100%; } .About_healing .Doctor img { width: 100%; border-radius: 20px; } .About_healing .gap-lg-4 img { width: 90%; height: 100%; border-radius: 20px; } .About_healing .col-lg-5 .gap-lg-2 { gap: 24px !important; padding: 0px 80px 0 20px; } .About_healing .col-lg-5 .mt-3 .gap-2 i { color: rgba(55, 231, 213, 1); } .About_healing .col-lg-5 span { font-family: "Inspiration", "cursive"; font-weight: 400; font-size: 44px; line-height: 54px; color: rgba(43, 45, 47, 1); width: max-content; display: inline-block; } .About_healing .col-lg-5 hr { margin: 0px; opacity: 1; color: rgba(43, 45, 47, 1); position: absolute; width: 100%; bottom: 21%; } .About_healing figure img { position: absolute; top: -12%; width: 48%; left: 3%; } @media screen and (max-width: 1400px) { .About_healing .col-lg-5 .gap-lg-2 { gap: 10px !important; padding: 0px 30px 0 20px; } } @media screen and (max-width: 1199px) { .About_healing .col-lg-5 .gap-lg-2 { padding: 0px; } .About_healing .hover3 { padding: 18px 25px; } } @media screen and (max-width: 991px) { .About_healing { padding: 100px 0px 100px; } .About_healing figure img { display: none; } .About_healing .col-lg-5 .gap-lg-2 { gap: 30px !important; padding-right: 300px; } .About_healing .row { row-gap: 50px; } .About_healing .col-md-12 { order: 1; } .About_healing .col-md-7 { order: 2; } .About_healing .col-md-5 { order: 3; } .About_healing .gap-lg-4 img { width: 96%; } } @media screen and (max-width: 768px) { .About_healing { padding: 70px 0px 70px; } .About_healing .col-lg-5 .gap-lg-2 { padding-right: 0px; gap: 20px !important; } .About_healing .col-lg-5 p { width: 90%; margin: auto; text-align: center; } .About_healing .col-lg-5 .gap-lg-2 h2 { text-align: center; } .About_healing .col-lg-5 .justify-content-around { justify-content: center !important; } .About_healing .col-lg-5 .justify-content-around p { width: 100%; text-align: start !important; } .About_healing .col-lg-5 .mt-lg-3 { padding-top: 15px; justify-content: center; } } @media screen and (max-width: 767px) { .About_healing { padding: 50px 0px 50px; } .About_healing .col-lg-3 .flex-sm-row { gap: 30px; } .About_healing .gap-lg-4 img { width: 100%; } .About_healing .col-lg-5 .gap-lg-2 { padding-right: 0px; gap: 20px !important; } .About_healing .col-lg-5 .flex-sm-column { flex-direction: column; width: 100% !important; } .About_healing .row { row-gap: 28px; } .About_healing .col-lg-5 p { width: 100%; } } @media screen and (max-width: 360px) { .About_healing .col-lg-5 .mt-lg-3 { flex-direction: column; } } @media screen and (max-width: 320px) { .About_healing .col-lg-5 .align-items-end { flex-direction: column; align-items: center !important; gap: 20px; margin: auto; } } /*======== End of 2.2. About_healing section ========*/ /*======== 2.3. Counters section ========*/ .Counters { padding: 70px 0px; } .Counters hr { opacity: 1; width: 100%; height: 2px; color: #D8F1FF; margin-top: 100px; margin-bottom: 0px; } .Counters .col-md-4 .gap-4 { background: #FBFBFB; border: 1px solid #D8F1FF; border-radius: 20px; padding: 20px 20px; box-shadow: 0px 37px 40px 0px #0000000D; } .Counters .col-md-4 .gap-4 span { font-size: 44px; line-height: 54px; font-weight: 400; color: #2b2d2f; } .Counters .col-md-4 .gap-4 h2 { color: #2b2d2f; } .Counters .col-md-4 .gap-4 p { color: #2b2d2f; } .Counters .col-md-4 img[alt="Winner"] { padding-top: 15px; width: 44px; } .Counters .col-md-4 img[alt="Cases"] { padding-top: 15px; width: 28px; } .Counters .col-md-4 img[alt="Happy"] { padding-top: 15px; width: 44px; } .Counters .col-md-4 .Raiting { width: 32%; } @media screen and (max-width: 1400px) { .Counters .col-md-4 .Raiting { width: 40%; } .Counters { padding: 70px 0px; } } @media screen and (max-width: 1199px) { .Counters .col-md-4 .Raiting { width: 56%; } .Counters { padding: 0px 0px 70px; } } @media screen and (max-width: 768px) { .Counters { padding: 0px 0px 35px; } .Counters .col-md-4 img[alt="Winner"] { padding-top: 5px; } .Counters .col-md-4 img[alt="Cases"] { padding-top: 5px; } .Counters hr { margin-top: 35px; } } @media screen and (max-width: 767px) { .Counters { padding: 0px 0px 40px; } .Counters .col-md-4 .Raiting { width: unset; } .Counters .col-md-4 img[alt="Cases"] { padding-top: 14px; position: relative; left: -5px; } .Counters .col-md-4 img[alt="Winner"] { padding-top: 14px; } .Counters hr { margin-top: 50px; } .Counters .row { row-gap: 20px; } } /*======== End of 2.3. Counters section ========*/ /*======== 2.4. Treatment section ========*/ .Treatment { padding: 100px 0px; background: linear-gradient(360deg, rgba(211, 207, 255, 0) -8.63%, rgba(203, 199, 255, 0.3) 100%); } .Treatment .content h2 { color: #2b2d2f; padding-right: 160px; } .Treatment h3 { color: #2b2d2f; } .Treatment .col-lg-5 figure img { width: 96%; border-radius: 20px; } .Treatment .treatment-p { color: #2b2d2f; padding: 15px 200px 0px 0px; } .Treatment .flex-column { padding: 30px 0px 0px; } .Treatment .flex-column p { width: 410px; padding: 10px 0px 20px; color: #2b2d2f; } .Treatment .circle img { width: 46%; position: absolute; top: -6%; right: -1%; z-index: -1; } .Treatment img[alt="Mission"] { width: 48px; padding-top: 5px; } .Treatment img[alt="Vision"] { padding-top: 5px; width: 50px; } @media screen and (max-width: 1400px) { .Treatment .col-lg-5 figure { position: relative; top: 18%; } .Treatment .content h2 { padding-right: 70px; } .Treatment .circle img { top: 10%; } } @media screen and (max-width: 1280px) { .Treatment .col-lg-5 figure { top: 10%; } .Treatment .treatment-p { padding: 30px 0px 0px 0px; } .Treatment .content h2 { padding-right: 0px; } } @media screen and (max-width: 1199px) { .Treatment .circle img { width: 43%; right: 1px; } } @media screen and (max-width: 1024px) { .Treatment .col-lg-5 figure { top: 25%; } .Treatment .circle img { width: 45%; top: 22%; right: -1%; } .Treatment .treatment-p { padding: 20px 30px 0px 0; } } @media screen and (max-width: 991px) { .Treatment .circle img { display: none; } .Treatment .col-lg-7 .content { padding-right: 300px; } .Treatment .flex-column p { width: 100%; } .Treatment .col-lg-5 figure { position: static; top: unset; padding-top: 30px; display: flex; justify-content: center; } .Treatment .col-lg-5 figure img { width: 80%; } } @media screen and (max-width: 768px) { .Treatment { padding: 70px 0px; } .Treatment .flex-column { width: 78%; margin: auto; } .Treatment .flex-column p { padding: 10px 0px 10px; } .Treatment .col-lg-7 .content { padding-right: 0px; } .Treatment .content h2 { text-align: center; } .Treatment .treatment-p { margin: auto; width: 90%; text-align: center; padding: 15px 0px 0px 0; } } @media screen and (max-width: 767px) { .Treatment { padding: 50px 0px; } .Treatment .content h2 { margin: auto; text-align: center; } .Treatment .treatment-p { width: 100%; text-align: center; margin: auto; padding: 20px 0px; } .Treatment .flex-column p { width: 100%; margin: auto; } .Treatment .flex-column { width: 100%; text-align: center; margin: auto; padding: 0px; } .Treatment .gap-3 { flex-direction: column; } .Treatment .col-lg-7 .content { padding-right: 0px; } } @media screen and (max-width: 480px) { .Treatment .col-lg-5 figure img { width: 100%; } .Treatment .col-lg-5 figure { padding-top: 40px; } } /*======== End of 2.4. Treatment section ========*/ /* 3.1. Contact section */ .Contact { background: linear-gradient(180deg, rgba(6, 158, 235, 0.8) 0%, rgba(51, 224, 216, 0.8) 100%); width: 100%; padding: 100px 0px; color: #2b2d2f; } .Contact p { width: 32%; } @media screen and (max-width: 1400px) { .Contact p { width: 38%; } } @media screen and (max-width: 1024px) { .Contact p { width: 56%; } } @media screen and (max-width: 768px) { .Contact { padding: 70px 0px; } .Contact p { width: 47%; } } @media screen and (max-width: 767px) { .Contact { padding: 50px 0px; } .Contact h1 { width: 100%; text-align: center; } .Contact p { text-align: center; width: 100%; } } /* End of 3.1. Contact section */ /* 3.2. Getinformation section */ .Getinformation { padding: 60px 0px 0px; } .Getinformation .justify-content-center { width: 80px; height: 80px; background: #ffffff; border-radius: 50%; border: 1px solid #d8f1ff; box-shadow: 0px 37px 40px 0px #0000000d; } .Getinformation .justify-content-center a i { font-size: 26px; background: linear-gradient(180deg, #01AFEC 50%, #19B5A2 50%); color: transparent; background-clip: text; } .Getinformation .gap-1 { width: 384px; } .Getinformation p, .Getinformation h2, .Getinformation h4 { color: #2b2d2f; } .Getinformation .lets-talk { width: 100%; border: 1px solid #d8f1ff; box-shadow: 0px 37px 40px 0px #0000000d; background: #ffffff; padding: 40px; border-radius: 20px; } .Getinformation .lets-talk .hover3 { padding: 14px 36px 14px 36px; } .Getinformation form input { padding: 14px; color: #848a8f; margin-bottom: 16px; } .Getinformation form input:focus { box-shadow: none; } .Getinformation form textarea { padding: 14px 0px 80px 14px; } .Getinformation form textarea:focus { box-shadow: none; } .Getinformation hr { width: 100%; height: 2px; border: 2px solid #d8f1ff; opacity: 1; margin: 60px 0px 30px 0px; } @media screen and (max-width: 1024px) { .Getinformation .lets-talk { width: 95%; top: -180px; } .Getinformation .justify-content-center { padding: 20px; } } @media screen and (max-width: 991px) { .Getinformation .lets-talk { width: 95%; } .Getinformation { padding: 100px 0px 150px; } .Getinformation .justify-content-center { padding: 30px; } .Getinformation hr { display: none; } } @media screen and (max-width: 768px) { .Getinformation { padding: 70px 0px 100px; } .Getinformation .lets-talk { top: -150px; } .Getinformation .justify-content-center { width: 70px; height: 70px; } } @media screen and (max-width: 767px) { .Getinformation .gap-1 { width: 100%; } .Getinformation { padding: 50px 0px 0px; } .Getinformation h2 { text-align: center; } .Getinformation .lets-talk p { text-align: center; } .Getinformation .lets-talk div:last-child { text-align: center; } .Getinformation .gap-1 { width: 100%; } .Getinformation .lets-talk { width: 100%; position: static; margin: 70px auto; padding: 25px 20px; } .Getinformation .justify-content-center a i { font-size: 22px; } .Getinformation .lets-talk .hover3 { width: 100%; } } @media screen and (max-width: 480px) { .Getinformation .gap-1 { width: 100%; } .Getinformation .lets-talk { margin: 50px auto; } .Getinformation .justify-content-center { padding: 30px; } .Getinformation .lets-talk { width: 100%; text-align: center; } } @media screen and (max-width: 320px) { .Getinformation .gap-5 .gap-4 { flex-direction: column; text-align: center; } .Getinformation .justify-content-center { margin: auto; } } /* End of 3.2. Getinformation section */ /* 3.3. Map section */ .Map { padding: 60px 0px; } .Map .social-media { width: 254px; background: linear-gradient(180deg, #0197ec 0%, #39ead5 99.02%); padding: 24px 60px; text-align: center; border-radius: 20px; box-shadow: 0px 37px 40px 0px #0000000d; position: absolute; top: -26%; right: 15%; } .Map h4 { color: #ffff; padding-bottom: 24px; } .Map .justify-content-center { width: 50px; height: 50px; background: #ffffff; border-radius: 50%; } .Map .d-flex { gap: 14px; text-align: center; margin-bottom: 10px; } .Map .d-flex a { color: #ffffff; } .Map .d-flex a i { font-size: 26px; color: rgb(1, 175, 236, 0.9); display: inline-block; } @media screen and (max-width: 768px) { .Map { padding: 70px 0px 70px 0px; } .Map .social-media { top: -90px; } } @media screen and (max-width: 767px) { .Map { padding: 50px 0px 50px 0px; } .Map .social-media { position: absolute; top: -10%; right: 15%; } } @media screen and (max-width: 540px) { .Map .social-media { width: 60%; position: relative; top: -60px; right: unset; display: flex; flex-direction: column; margin: auto; padding: 15px 20px 10px 20px; } .Map .d-flex { gap: 20px; margin: 5px auto; } .Map h4 { width: 60%; margin: auto; padding-bottom: 5px; } } @media screen and (max-width: 480px) { .Map h4 { width: 70%; } } @media screen and (max-width: 360px) { .Map .social-media { width: 100%; top: -55px; align-items: center; } .Map .d-flex { gap: 10px; } .Map h4 { width: 56%; } } /* End of 3.3. Map section */ /*======== 4.1. Latest section */ .Latest { padding: 100px 0px; } .Latest .row { row-gap: 20px; } .Latest h2 { color: #2b2d2f; } .Latest .BlogCard { height: 100%; } .Latest .justify-content-between { padding: 0px 0px 50px 0px; } .Latest form { display: flex; position: relative; align-items: center; } .Latest form input { padding: 14px 100px 14px 10px; border-radius: 10px; border: 1px solid #848a8f; } .Latest form input:focus { outline: none; } .Latest form button { position: absolute; right: 10px; border: none; background: none; } .Latest form button i { font-size: 20px; color: #848a8f; } @media screen and (max-width: 991px) { .Latest .BlogCard h4 { padding-right: 50px; } } @media screen and (max-width: 768px) { .Latest form button { right: 0; width: 0; } .Latest { padding: 70px 0px; } .Latest .col-lg-4:nth-of-type(1), .Latest .col-lg-4:nth-of-type(2), .Latest .col-lg-4:nth-of-type(3) { flex-basis: unset; } .Latest .justify-content-between { padding: 0px 0px 30px 0px; } } @media screen and (max-width: 767px) { .Latest { padding: 50px 0px; } } @media screen and (max-width: 480px) { .Latest .justify-content-between { flex-direction: column; } .Latest form input { width: 100%; padding: 12px 160px 12px 10px; margin-top: 10px; } .Latest form button { top: 16px; } } @media screen and (max-width: 360px) { .Latest form input { padding: 10px 50px 10px 10px; } .Latest .BlogCard h4 { padding-right: 20px; } } /*========End of 4.1. Latest section */ /* 5.1. BlogDetail section */ .BlogDetail { background: linear-gradient(180deg, #0197ec 0%, #39ead5 100%); width: 100%; padding: 120px 0px; position: relative; } .BlogDetail h1 { color: #2b2d2f; } .BlogDetail p { padding: 15px 0px 0px 0px; width: 40%; color: #2b2d2f; } @media screen and (max-width: 1400px) { .BlogDetail p { width: 46%; } } @media screen and (max-width: 1024px) { .BlogDetail p { width: 56%; } } @media screen and (max-width: 768px) { .BlogDetail { padding: 70px 0px; } .BlogDetail p { padding-bottom: 15px; text-align: center; width: 100%; } .BlogDetail h1 { text-align: center; } } @media screen and (max-width: 767px) { .BlogDetail { padding: 50px 0px; } .BlogDetail p { margin: auto; width: 100%; padding-bottom: 25px; } } @media screen and (max-width: 480px) { .BlogDetail p { padding-bottom: 15px; } } /* End of 5.1. BlogDetail section */ /* 5.2. BlogComment section */ .BlogComment { position: relative; /* top: -110px;*/ } .BlogComment h2 { color: #2b2d2f; } .BlogComment p { color: #2b2d2f; } .BlogComment figure img { width: 100%; border-radius: 20px; } .BlogComment .reply { width: 600px; margin-top: 30px; } .BlogComment .gap-4 i { font-size: 22px; color: rgb(1, 175, 236, 0.9); } .BlogComment .reply .pt-lg-4 { color: #2b2d2f; } .BlogComment .reply form { padding-top: 50px; } .BlogComment .reply form .gap-2 input { margin-top: 6px !important; } .BlogComment .reply form label { color: #2b2d2f; } .BlogComment .reply form textarea { padding: 20px; border-color: #848a8f; } .BlogComment .reply form textarea:focus { box-shadow: none; } .BlogComment .reply form input { padding: 20px; border-color: #848a8f; } .BlogComment .reply form input:focus { box-shadow: none; } .BlogComment .reply form div:last-child { margin-top: 50px; } .BlogComment .hover3 { padding: 16px 36px 16px 36px; } @media screen and (max-width: 1199px) { .BlogComment { top: -80px; } } @media screen and (max-width: 991px) { .BlogComment p { padding-right: 215px; } .BlogComment .reply { margin-top: 20px; } } @media screen and (max-width: 768px) { .BlogComment { top: -64px; } .BlogComment p { padding-right: 0px !important; text-align: center; margin: auto; } .BlogComment h2 { text-align: center; } .BlogComment .reply form { padding-top: 30px; } .BlogComment form p { text-align: start; } .BlogComment .reply form input { padding: 15px; } .BlogComment .reply { width: 100%; } } @media screen and (max-width: 767px) { .BlogComment p { padding-right: 0px; } .BlogComment .gap-4 i { font-size: 20px; } .BlogComment .reply form input { padding: 12px; } .BlogComment .reply form textarea { padding: 12px; } .BlogComment .reply button { display: flex; margin: auto; } .BlogComment .reply form div:last-child { margin-top: 25px; } .BlogComment .hover3 { padding: 12px 20px 12px 20px; } .BlogComment .reply form { padding-top: 15px; } } @media screen and (max-width: 480px) { .BlogComment .reply form textarea { padding: 0px; } .BlogComment .reply form input { padding: 8px; } .BlogComment { top: -50px; } } /* End of 5.2. BlogComment section */ /*======== 6.1. ServiceCards section ========*/ .ServiceCards { position: relative; z-index: 2; margin: 60px 0px; } .ServiceCards .text-center { background: #ffffff; border: 1px solid #d8f1ff; box-shadow: 0px 37px 40px 0px #0000000d; border-radius: 20px; padding: 30px; height: 100%; } .ServiceCards .text-center:hover { border: 1px solid #0197EC; } .ServiceCards .row { row-gap: 25px; } .ServiceCards p { color: #2b2d2f; font-size: 14px; line-height: 16px; } .ServiceCards h4 { color: #2b2d2f; } .ServiceCards .text-center img { width: 66px; } .ServiceCards .text-center img[alt="Message"] { width: 68px; } .ServiceCards .text-center img[alt="sport"] { width: 72px; } .ServiceCards .text-center img[alt="therapy"] { width: 56px; } .ServiceCards .text-center img[alt="pilates"] { width: 59px; } @media screen and (max-width: 1199px) { .ServiceCards .text-center { padding: 28px; } } @media screen and (max-width: 1024px) { .ServiceCards { top: 150px; } } @media screen and (max-width: 991px) { .ServiceCards { top: 144px; } } @media screen and (max-width: 768px) { .ServiceCards .text-center { padding: 30px 10px; } .ServiceCards { top: 80px; } } @media screen and (max-width: 767px) { .ServiceCards { position: relative; height: 100%; top: unset; padding: 50px 0px 50px 0px; } .ServiceCards .text-center { padding: 30px 30px; } } @media screen and (max-width: 320px) { .ServiceCards .text-center { padding: 40px 20px; } } /*========End of 6.1. ServiceCards section ========*/ /*======== 6.2. Avail section ========*/ .Avail { background: linear-gradient(180deg, #0197ec 0%, #39ead5 100%); width: 100%; padding: 200px 0px 150px; z-index: 2; } .Avail p, .Avail h2 { color: #2b2d2f; } .Avail .text { margin: auto; width: 662px; padding-top: 30px; text-align: center; } @media screen and (max-width: 991px) { .Avail .text { padding-top: 0px; } } @media screen and (max-width: 768px) { .Avail { padding: 100px 0px 100px; } .Avail .text { width: 496px; } } @media screen and (max-width: 767px) { .Avail { padding: 40px 0px 80px; } .Avail .text { width: 100%; } } /*========End of 6.2. Avail section ========*/ /* 6.3. ServicesForm section ==*/ .ServicesForm { position: relative; top: -80px; } .ServicesForm .Service-input { padding: 50px 30px; } @media screen and (max-width: 768px) { .ServicesForm { padding-bottom: 25px; } } @media screen and (max-width: 767px) { .ServicesForm { padding-bottom: 15px; top: -48px; } } /* End of 6.3. ServicesForm section ==*/ /*======== 7.1. Testimonial section ========*/ .Testimonial { padding: 125px 0px 100px; } .Testimonial .person { background: #ffffff; box-shadow: 0px 37px 40px 0px #0000000d; padding: 30px 50px; border-radius: 20px; position: relative; } .Testimonial .row { row-gap: 80px; } .Testimonial .person p { color: #2b2d2f; } .Testimonial .person img { width: 140px; position: absolute; top: -40px; right: 30px; border-radius: 50%; } .Testimonial .person a { color: #0197ec; } .Testimonial .d-flex i { color: #f5b83d; } @media screen and (max-width: 1280px) { .Testimonial .person { padding: 30px 36px; } } @media screen and (max-width: 1199px) { .Testimonial .person { padding: 30px 20px; } .Testimonial .person img { width: 110px; } } @media screen and (max-width: 768px) { .Testimonial { padding: 90px 0px 70px; } } @media screen and (max-width: 767px) { .Testimonial { padding: 70px 0px 50px; } } @media screen and (max-width: 320px) { .Testimonial .person img { top: 10px; width: 80px; } .Testimonial .person p { padding: 0px 0px 5px 0px !important; } .Testimonial .person .pt-4 { padding: 4px 0px 0px !important; } } /*======== End of 7.1. Testimonial section ========*/ /* 8.1. Accordians section */ .Accordians { padding: 100px 0px 80px; background-color: #fbfbfb; } .Accordians .accordion-button { font-family: "Marcellus", serif; font-size: 22px; } .Accordians .accordion-button:not(.collapsed) { color: #F1F1F1; } .Accordians .accordion-button.collapsed, .Accordians p { color: #2b2d2f; } .Accordians .accordion-item .accordion-body { padding: 14px; } .Accordians .accordion-button::after { background-image: url("../image/icons/accordion-btn.svg"); } .Accordians .accordion-button:not(.collapsed)::after { transform: rotate(180deg); background-image: url("../image/icons/accordion-btn-open.svg"); color: #F1F1F1; } .Accordians .accordion-button:not(.collapsed) { background-color: #1d448e !important; color: #F1F1F1; border: none; border-radius: 7px; } .Accordians .accordion-button:focus { box-shadow: none; border: none; } .Accordians .accordion-button .collapsed { background-color: transparent !important; border: none; } .Accordians .accordion .accordion-button { padding: 14px; } .Accordians .accordion .accordion-item { margin-bottom: 20px; border: none; border-radius: 7px; } @media screen and (max-width: 768px) { .Accordians { padding: 70px 0px 40px; } .Accordians .accordion-button { font-size: 18px; } } @media screen and (max-width: 480px) { .Accordians { padding: 50px 0px 30px; } .Accordians .accordion-item .accordion-body { font-size: 14px; } } @media screen and (max-width: 320px) { .Accordians .accordion .accordion-button { padding: 8px; } } /* End of 8.1. Accordians section */ /* 9.1. Team_Hero section */ .Team_Hero { background: linear-gradient(180deg, #0197ec 0%, #39ead5 100%); width: 100%; padding: 100px 0px; } .Team_Hero p { color: #2b2d2f; width: 40%; } .Team_Hero .pt-2, .Team_Hero h1 { color: #2b2d2f; } @media screen and (max-width: 1400px) { .Team_Hero p { width: 46%; } } @media screen and (max-width: 1024px) { .Team_Hero p { width: 56%; } } @media screen and (max-width: 768px) { .Team_Hero { padding: 70px 0px; } .Team_Hero h1 { text-align: center; } .Team_Hero p { width: 90%; text-align: center; margin: auto; padding-bottom: 15px; } } @media screen and (max-width: 767px) { .Team_Hero { padding: 50px 0px; text-align: center; } .Team_Hero p { width: 100%; } } /*======== End of 9.1. Team_Hero section ========*/ /*======== 9.2. Team_Cards section ========*/ .Team_Cards .flex-column { width: 50%; padding: 40px 16px; border-radius: 20px; border: 1px solid #d8f1ff; box-shadow: 0px 40px 40px 0px #0000000d; background: #ffffff; } .Team_Cards .flex-column:hover { border: 1px solid #0197EC; } .Team_Cards p, .Team_Cards h4 { color: #2b2d2f; } .Team_Cards img { width: 65px; } .Team_Cards { position: relative; top: -120px; } @media screen and (max-width: 1024px) { .Team_Cards { top: -90px; } } @media screen and (max-width: 991px) { .Team_Cards { top: -65px; } .Team_Cards .flex-column { padding: 50px 40px; } } @media screen and (max-width: 767px) { .Team_Cards { position: static; padding: 50px 0px; } .Team_Cards .row .d-flex:first-child { flex-direction: column; } .Team_Cards .flex-column { width: 100%; } } /*======== End of 9.2. Team_Cards section ========*/ /*======== 9.3. AllTeam section ========*/ .AllTeam { padding: 0px 0px 100px; } .AllTeam .row { row-gap: 50px; } @media screen and (max-width: 1024px) { .AllTeam { padding: 0px 0px 100px; } } @media screen and (max-width: 991px) { .AllTeam .Doctor:hover .hover { top: 126px; } } @media screen and (max-width: 768px) { .AllTeam { padding: 0px 0px 70px; } .AllTeam .Doctor:hover .hover { top: 100px; } } @media screen and (max-width: 540px) { .AllTeam .row { row-gap: 15px; } .AllTeam { padding: 0px 0px 50px; } .AllTeam .Doctor:hover .hover { top: 270px; } } @media screen and (max-width: 480px) { .AllTeam .Doctor:hover .hover { top: 250px; } } @media screen and (max-width: 360px) { .AllTeam .Doctor:hover .hover { top: 194px; } } @media screen and (max-width: 320px) { .AllTeam .Doctor:hover .hover { top: 150px; } } /* End of 9.3 AllTeams section */ /* 10.1. Comming section */ .Comming { width: 100%; min-height: 100svh; background: linear-gradient(180deg, rgba(1, 151, 236, 0.9) 0%, rgba(57, 234, 213, 0.9) 100%), url("../image/BG/comming.jpg") no-repeat center/cover; background-attachment: fixed; padding: 150px 0px 10px 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .Comming .gap-2 { padding: 0px 30px 0px 30px; width: 80%; margin: auto; } .Comming .gap-2 h1 { font-size: 150px; color: #2b2d2f; } .Comming .gap-2 .pt-2 { padding-top: 50px !important; } .Comming p { color: #2b2d2f; } .Comming .gap-2 p { width: 698px; padding-top: 70px; } .Comming .gap-3 p { width: 298px; } .Comming .flex-column:nth-child(2) { padding-top: 70px; } .Comming .flex-column .gap-3 .gap-3 { padding: 20px 0px; } .Comming .flex-column .gap-3 p { width: 330px; text-align: center; } .Comming .flex-column .gap-3 a i { color: #2b2d2f; font-size: 22px; transition: all 0.2s ease-in; } .Comming .flex-column .gap-3 a i:hover { color: #0197ec; transform: translateY(-20%); } @media screen and (max-width: 1400px) { .Comming .gap-2 { width: 100%; } } @media screen and (max-width: 1199px) { .Comming .gap-2 h1 { font-size: 130px; } } @media screen and (max-width: 820px) { .Comming .gap-2 h1 { font-size: 110px; } .Comming .gap-2 .pt-2 { padding-top: 20px !important; } .Comming { padding: 100px 0px 10px 0px; } .Comming .gap-2 p { padding-top: 50px; } } @media screen and (max-width: 767px) { .Comming .gap-2 p { width: 100%; } .Comming .gap-2 h1 { font-size: 80px; } } @media screen and (max-width: 540px) { .Comming .gap-2 { padding: 0px 0px 0px 0px; } .Comming .gap-2 p { padding-top: 40px; } } @media screen and (max-width: 480px) { .Comming .gap-2 h1 { font-size: 60px; } .Comming p { width: 100%; } } @media screen and (max-width: 375px) { .Comming .gap-2 h1 { font-size: 50px; } .Comming .gap-2 .pt-2 { padding-top: 10px !important; } } @media screen and (max-width: 360px) { .Comming .gap-2 h1 { font-size: 44px; } .Comming .gap-2 .pt-2 { padding-top: 0px !important; } .Comming .gap-2 p { padding-top: 20px; } .Comming .flex-column:nth-child(2) { padding-top: 50px; } .Comming .gap-3 p { width: 100%; } } @media screen and (max-width: 320px) { .Comming .gap-2 h1 { font-size: 40px; } } /* End of 10.1. Comming section */ /* 11.1. Error section */ .Error { width: 100%; min-height: 100svh; background: linear-gradient(180deg, rgba(1, 151, 236, 0.9) 0%, rgba(57, 234, 213, 0.9) 100%), url("../image/BG/error.jpg") no-repeat center/cover; background-attachment: fixed; padding: 150px 0px 10px 0px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .Error h1 { color: #2b2d2f; } .Error p { color: #2b2d2f; } .Error .gap-3 { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0px 30px 0px 30px; } .Error .gap-3 h1 { font-size: 150px; } .Error .gap-3 p { color: #2b2d2f; width: 680px; padding-top: 40px; } .Error .gap-3 .d-flex { margin-top: 40px; } .Error .flex-column { margin-top: 40px; } .Error .flex-column:last-child p { color: #2b2d2f; width: 280px; text-align: center; } .Error .flex-column a i { color: #2b2d2f; font-size: 22px; transition: all 0.2s ease-in; } .Error .flex-column .gap-4 a i:hover { transform: translateY(-20%); color: #0197ec; } @media screen and (max-width: 1024px) { .Error .gap-3 h1 { font-weight: 400; } } @media screen and (max-width: 767px) { .Error .gap-3 p { width: 100%; padding-top: 70px; } .Error .gap-3 { padding: 0px; } .Error .gap-3 .d-flex { margin-top: 15px; } .Error .flex-column { margin-top: 15px; } .Error { padding: 50px 0px 10px 0px; } } @media screen and (max-width: 480px) { .Error .gap-3 h1 { font-size: 120px; } .Error .flex-column .gap-3 { padding: 10px 0px; } .Error .gap-3 p { padding-top: 50px; } .Error .flex-column p { width: 100%; } .Error .hover3 { padding: 12px 20px; } } @media screen and (max-width: 320px) { .Error .flex-column:last-child p { width: 100%; } } .snn-rggf h4{ color: #fff; } .sbh-dnhhfg h4{ color: #fff; } .sbh-dnhhfg a{ color: #fff; } .sbb-drr h4{ color: #fff; } .sbhh-duur h2{ color: #fff; } .sbhh-duur p{ color: #fff; } .nnn-ewww a{ color: #fff; } .snnn-ee a{ color: #000; } .back-to-top { background-color: #8f3d4b !important; } .snnnn-ee{ background: #fff !important; color: #000; } .ann-rbggdftr h2{ font-size: 30px; padding-bottom: 20px; } .ann-rbggdftr p{ line-height: 28px; text-align: justify; padding-bottom: 7px; } .dnn-rhhf{ text-align: center; } .dnn-rhhf h4{ font-size: 22px; padding-bottom: 3px; font-weight: 600; } .dnn-rhhf p{ font-size: 13px; font-weight: 400; } .dnn-rhhf{ padding-top: 10px; } .fjjj-rnbbv h1{ font-size: 30px; line-height: 50px; } .snn-djhgf ul{ padding: 0; margin: 0; } .snn-djhgf ul li i{ font-size: 15px; color: #fff; } .snn-djhgf ul li{ font-size: 14px; margin-right: 10px; color: #fff; display: inline-block; } .snn-djhgf ul li a{ color: #fff; } .snn-djhgf{ text-align: center; } .fjjj-rnbbv{ text-align: center; } .snnn-dfff-ww{ background: linear-gradient(360deg, rgba(211, 207, 255, 0) -8.63%, rgba(203, 199, 255, 0.3) 100%); } .bnv-gbhhf{ background: #fff; padding: 10px; border-radius: 10px; } .ncvjcjvdfjd h3{ color: #000; font-weight: 600; font-size: 25px; padding-bottom: 5px; margin-bottom: 20px; border-bottom: 1px solid #e6ac68; display: inline-block; } .ncvjcjvdfjd p{ line-height: 30px; font-size: 15px; text-align: justify; font-weight: 400; padding-bottom: 10px; } .ncvjcjvdfjd ul{ padding: 0; margin: 0; } .ncvjcjvdfjd ul li{ list-style: none; font-size: 15px; background: url(../image/fst.png) no-repeat 0 5px; padding: 0 0 20px 25px; font-weight: 400; font-family: "Roboto", sans-serif; } .ncvjcjvdfjd ul li ul{ margin-top: 15px; } .hh-dd .bnv-gbhhf{ width: 100% !important; } .dropdown-item { white-space: normal !important; } .dropdown-menu li a{ font-size: 14px !important; } .navbar ul li a { padding: 9px !important; } .khh-dgvhhdggd h2{ color: #000; font-weight: 600; padding-bottom: 10px; } .khh-dgvhhdggd p{ line-height: 30px; font-size: 15px; text-align: justify; font-weight: 400; } .new-nbhhfggfgf{ background: linear-gradient(to bottom, #eeedfc, #f3f3f5); padding: 60px 0px; top: 0 !important; } .new-category-detail{ padding: 60px 0px; background: #fff; } .snn-fjuhg img{ border-radius: 10px; border: 1px solid #a15653; padding: 5px; } .khh-dgvhhdggd h2{ font-size: 30px; } .dvgg-fhyyt p{ -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-height: 22px !important; } .khh-dgvhhdggd p strong { font-size: 17px; } .cnnn-rfff{ padding: 60px 0px; } .an-shuu { position: fixed; bottom: 20px; left: 20px; z-index: 9999999; } .new-nhhdfdh{ padding: 60px 0px; background: #f6f6f6; } .njhnmxjd{ background: #fff; padding: 5px; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); } .top-njjdfjd h3{ color: #fff !important; font-weight: 600; font-size: 20px; border-bottom: 1px solid #fff; display: inline-block; padding-bottom: 5px; margin-bottom: 10px; } .top-njjdfjd p{ color: #fff; font-size: 15px; font-weight: 600; } .top-njjdfjd p a{ color: #fff; }