body { font-family: Inter; } /* addressbar */ #addressBar, #navbar { position: sticky; top: 0; z-index: 100; } .addressBar { height: 30px; background-color: #f5f5f5; display: flex; justify-content: space-between; align-items: center; padding: 10px 120px 10px 120px; margin-top: 0px; font-size: 14px; } .addressBarLeft { font-weight: bold; display: flex; gap: 10px; align-items: center; } .addressBarRight { display: flex; gap: 20px; } .addressBarPhone { display: flex; align-items: center; gap: 3px; } .addressBarEmail { display: flex; align-items: center; gap: 3px; } .contactLink { text-decoration: none; color: black; } /* navbar */ .navbar { background-color: #ffffff; display: flex; justify-content: space-between; align-items: center; padding: 10px 120px 10px 120px; color: black; } .logo img { width: 218px; height: auto; } .nav-items { list-style: none; display: flex; gap: 30px; } .nav-items li { margin-right: 20px; } .nav-items a { text-decoration: none; color: black; letter-spacing: 0.00938em; font-size: 17px; font-weight: 500; } .nav-items li a:hover { color: #ff0000; } /* body */ .bodyContainer { padding: 10px 120px 10px 120px; } /* section1 */ .section1 { background-color: #d5e9f9; display: flex; justify-content: space-between; } .section1_left, .section1_right { flex-basis: 50%; } .section1_left { display: flex; align-items: center; justify-content: center; } .section1_leftContainer { display: flex; flex-direction: column; align-items: flex-start; } .section1Title { font-size: 60px; } .section1_leftContainer p { margin-top: -30px; } .section1_btnGroup { display: flex; gap: 25px; margin-top: 20px; } .section1_btn1 { background-color: #17c1a3; color: white; border: none; padding: 20px 40px 20px 40px; font-size: 16px; border-radius: 10px; cursor: pointer; } .section1_btn2 { text-decoration: underline; font-size: 16px; display: flex; align-items: center; gap: 5px; background-color: transparent; color: black; border: none; cursor: pointer; } .section1_right img { width: auto; height: 750px; } /* section 1 form */ .bookAppointmentContainer { display: flex; justify-content: center; margin-top: -118px; } .bookAppointmentForm { width: 1166px; display: flex; height: 200px; background-color: white; border-radius: 10px; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.2); padding: 20px; flex-direction: column; justify-content: space-around; } .input-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } .input-field { width: 350px; height: 56px; } .select-field { width: 355px; height: 56px; } .form_btn1 { background-color: #17c1a3; width: 350px; color: white; border: none; padding: 20px 40px 20px 40px; font-size: 16px; border-radius: 10px; cursor: pointer; } /* carousel */ .ourDepartments { margin-top: 80px; } .readmoreBtn { text-decoration: underline; font-size: 18px; display: flex; align-items: center; gap: 5px; background-color: transparent; color: #17c1a3; border: none; cursor: pointer; } #container { width: 100%; } #slider-container { position: relative; width: 97%; overflow: hidden; padding: 20px; } #slider-container .btn { position: absolute; top: calc(50% - 30px); height: 30px; width: 30px; border-left: 8px solid #17c1a3; border-top: 8px solid #17c1a3; } #slider-container .btn:hover { transform: scale(1.2); } #slider-container .btn.inactive { border-color: rgb(153, 121, 126); } #slider-container .btn:first-of-type { transform: rotate(-45deg); left: 10px; } #slider-container .btn:last-of-type { transform: rotate(135deg); right: 10px; } #slider-container #slider { display: flex; width: 90%; height: 100%; transition: all 0.5s; gap: 30px; } #slider-container #slider .slide { height: 90%; margin: auto 10px; box-shadow: 2px 2px 4px 2px white, -2px -2px 4px 2px white; display: grid; place-items: center; } #slider-container #slider .slide span { color: white; font-size: 150px; } /* whyGGSection */ .whyGGSection { background-color: #eaf2ff; height: 773px; margin-top: 100px; display: flex; } .whyGGSectionLeft { width: 65%; } .whyGGSectionRight { width: 35%; } .whyGGSectionLeft img { max-width: 100%; } .whyGGSectionList { list-style-type: none; line-height: 1.5; letter-spacing: 0.00938em; color: black; font-size: 20px; font-style: normal; font-weight: 400; padding-left: 4px; padding-right: 30px; } .whyGGSectionList li { padding-left: 40px; background: url("../images/greenticklogo.png") no-repeat; background-size: 25px 25px; list-style-image: none; margin-bottom: 40px; } /* career section */ .careerSection { margin-top: 150px; } .careerCard { box-sizing: border-box; margin: 36px 0px 0px; flex-direction: row; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; background-color: white; padding: 25px; border-radius: 10px; } .careerCardBtn { background-color: #17c1a3; width: 120px; color: white; border: none; padding: 20px 40px 20px 40px; font-size: 16px; border-radius: 10px; cursor: pointer; display: flex; white-space: nowrap; justify-content: center; } /* contact section */ .contactContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 200px; } .contactBookAppointmentForm { width: 838px; display: flex; height: 332px; background-color: white; /* border-radius: 10px; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.2); */ padding: 20px; /* flex-direction: column; */ justify-content: space-evenly; } .contactInputContainer { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } .contactSection { display: flex; flex-direction: row; margin-top: 50px; } .contactRightSection { display: flex; flex-direction: column; align-items: center; justify-content: center; } .ggdetails { width: 450px; height: 361px; padding: 20px; z-index: 10000; background-color: white; border-radius: 10px; box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.2); } .imagediv { margin-top: -275px; height: 300px; } /* footer */ .footer { margin-top: 120px; background-color: #f6f6f6; padding: 100px; } .footerSection1 { display: flex; justify-content: space-between; } .footerSection2 { display: flex; justify-content: space-between; margin-top: 50px; } .section1Col1 { flex-basis: 30%; } .section1Col { flex-basis: 20%; } .subItem { display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; cursor: pointer; } .column { flex: 1; }