/* Developed by Muhammad Tufail Khan LinkedIn: https://www.linkedin.com/in/bewithkhan/ */ /********** Template CSS **********/ /* :root tokens now come from /brand-tokens.css (linked in every *.html ) */ html { scroll-behavior: smooth; } .py-6 { padding-top: 6rem; padding-bottom: 6rem; } .my-6 { margin-top: 6rem; margin-bottom: 6rem; } .back-to-top { position: fixed; display: none; right: 30px; bottom: 30px; z-index: 99; } /*** Spinner ***/ #spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; } #spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; } /*** Chatbot ***/ .chatbot-toggler { display: flex; align-items: center; justify-content: center; outline: none; cursor: pointer; background: hsl(var(--primary)); border-radius: 50%; width: 60px; height: 60px; position: fixed; bottom: 20px; right: 20px; z-index: 1050; /* Ensure the button is on top of everything */ transition: all 0.2s ease; } .show-chatbot .chatbot-toggler { transform: rotate(90deg); } .chatbot-toggler span { position: absolute; } .show-chatbot .chatbot-toggler span:first-child, .chatbot-toggler span:last-child { opacity: 0; } .show-chatbot .chatbot-toggler span:last-child { opacity: 1; } .chatbot { position: fixed; right: 40px; bottom: 100px; width: 420px; transform: scale(0.5); opacity: 0; pointer-events: none; overflow: hidden; background: #fff; border-radius: 15px; transform-origin: bottom right; box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5); transition: all 0.1s ease; z-index: 1040; } .show-chatbot .chatbot { transform: scale(1); opacity: 1; pointer-events: auto; } .chatbot header { background: hsl(var(--primary)); padding: 16px 0; text-align: center; position: relative; } .chatbot header h2 { color: #fff; font-size: 1.4rem; } .chatbot header span { position: absolute; right: 20px; top: 50%; color: #fff; cursor: pointer; display: none; transform: translateY(-50%); } .chatbot .chatbox { height: 400px; overflow-y: auto; padding: 30px 20px 100px; } .chatbox .chat { display: flex; } .chatbox .incoming span { height: 32px; width: 32px; color: #fff; align-self: flex-end; background: hsl(var(--primary)); text-align: center; line-height: 32px; border-radius: 4px; margin: 0 10px 7px 0; } .chatbox .outgoing { margin: 20px 0; justify-content: flex-end; } .chatbox .chat p { color: #fff; max-width: 75%; white-space: pre-wrap; font-size: 0.95rem; padding: 12px 16px; border-radius: 10px 10px 0 10px; background: hsl(var(--primary)); } .chatbox .chat p.error { color: #721c24; background: #f8d7da; } .chatbox .incoming p { color: #000; background: #f2f2f2; border-radius: 10px 10px 10px 0; } .chatbot .chat-input { position: absolute; bottom: 0; width: 100%; display: flex; gap: 5px; background: #fff; padding: 5px 20px; border-top: 1px solid #ccc; } .chat-input textarea { height: 55px; width: 100%; border: none; outline: none; max-height: 180px; font-size: 0.95rem; resize: none; padding: 16px 15px 16px 0; } .chat-input span { align-self: flex-end; height: 55px; line-height: 55px; color: hsl(var(--primary)); font-size: 1.35rem; cursor: pointer; visibility: hidden; } .chat-input textarea:valid ~ span { visibility: visible; } /* Added this so the chatbot will be full screen on mobile devices */ @media (max-width: 490px) { .chatbot { right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; } .chatbot .chatbox { height: 90%; } } /*** Button ***/ .btn { font-weight: 500; transition: all 0.3s ease; } .btn.btn-primary, .btn.btn-outline-primary:hover { color: #FFFFFF; } .btn.btn-primary:hover { filter: brightness(0.9); transform: translateY(-1px); } .btn.btn-primary:active { transform: translateY(0); } .btn-square { width: 38px; height: 38px; } .btn-sm-square { width: 32px; height: 32px; } .btn-lg-square { width: 48px; height: 48px; } .btn-square, .btn-sm-square, .btn-lg-square { padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal; } /*** Navbar ***/ .navbar.sticky-top { top: -100px; transition: .5s; } .navbar .navbar-brand, .navbar a.btn { height: 80px } .navbar .navbar-nav .nav-link { margin-right: 30px; padding: 25px 0; color: hsl(var(--foreground)); font-weight: 500; text-transform: uppercase; outline: none; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: hsl(var(--primary)); } .navbar .dropdown-toggle::after { border: none; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; vertical-align: middle; margin-left: 8px; } /* Added this so it'll be h2 on larger screens and h5 on smaller screens for our navbar brand */ /* Default styles for h2 and h5 */ .navbar-brand h2, .navbar-brand h5 { display: none; } /* Display h2 on larger screens */ @media (min-width: 991.99px) { .navbar-brand h2 { display: block; } } /* Display h5 on smaller screens */ @media (max-width: 991.98px) { .navbar-brand h5 { display: block; } } @media (max-width: 991.98px) { /* this means the navbar will be collapsed for screens smaller than 992px */ .navbar-toggler { padding: .1rem .3rem; font-size: 1rem; /* Added unit */ } .px-4{padding-right:.25rem !important;padding-left:0.5rem !important} /* Adjust the padding of the navbar-toggler button TODO: Not working for some reason so I had to manually override in the actual bootstrap.min.css file which is not ideal */ .navbar .navbar-nav .nav-link { margin-right: 0; padding: 10px 0; } .navbar .navbar-nav { border-top: 1px solid #EEEEEE; } } @media (min-width: 992px) { .navbar .nav-item .dropdown-menu { display: block; border: none; margin-top: 0; top: 150%; opacity: 0; visibility: hidden; transition: .5s; } .navbar .nav-item:hover .dropdown-menu { top: 100%; visibility: visible; transition: .5s; opacity: 1; } } /*** Header ***/ .carousel-caption { top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(0, 0, 0, .75); z-index: 1; } .carousel-control-prev, .carousel-control-next { width: 15%; } .carousel-control-prev-icon, .carousel-control-next-icon { width: 3rem; height: 3rem; background-color: hsl(var(--primary)); border: 10px solid hsl(var(--primary)); } /* it is a must to have this for mobile devices, otherwise the carousel will not look nice */ @media (max-width: 768px) { #header-carousel .carousel-item { position: relative; min-height: 450px; } #header-carousel .carousel-item img { position: absolute; width: 100%; /* Fill the width of the carousel item */ height: 100%; /* Fill the height of the carousel item */ object-fit: cover; /* Scale the image to cover the carousel item, cropping if necessary */ } } /* Styles for larger screens */ /* Adjusted this height for monitors but laptop screens won't have forced enlarged height 1070px images. Tablets or smaller laptops might have buttons going up and down though, but very very slightly. Not worth locking the height to that size for tablets for aesthetic reasons even if it deals with the button issue */ /* Keeping it commented out because the cropped images are almost perfect anyways, so a little movement of the buttons and not being perfectly alighned is fine if it means a more pleasant and aesthetic look to the carousel on any device. */ /* @media (min-width: 1700px) { #header-carousel .carousel-item { position: relative; height: 1070px; } #header-carousel .carousel-item img { position: absolute; width: 100%; height: 100%; object-fit: cover; } } */ .page-header { background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(../img/bckgnd.jpg) center center no-repeat; background-size: cover; } .breadcrumb-item+.breadcrumb-item::before { color: #999999; } /*** Awards ***/ .award-link { display: inline-block; transition: transform 0.3s ease; } .award-link:hover { transform: scale(1.1); } .award-image { max-width: 150px; height: auto; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 10px; } /*** Facts ***/ @media (min-width: 991.98px) { .facts { position: relative; /* margin-top: -75px; */ /* Adjust the margin-top as needed to show the award before the change was because the gap was too big so if I remove award then TODO: uncomment section if i remove award*/ z-index: 1; } } @media (max-width: 991.98px) { .facts { margin-top: -100px; /* Adjust this value as needed */ padding-top: 20px; /* Adjust this value as needed */ } } /*** Courses ***/ .courses { min-height: 100vh; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url(../bckgnd.jpg) center center no-repeat; background-attachment: fixed; background-size: cover; } .driving-courses-item .driving-courses-overlay { position: absolute; width: 100%; height: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); overflow: hidden; opacity: 0; transition: .5s; } .driving-courses-item:hover .driving-courses-overlay { height: 100%; opacity: 1; } .driving-courses-item .bg-primary del { font-size: 0.8em; opacity: 0.7; } /*** Team ***/ .team-items { margin: -.75rem; } .team-item { padding: .75rem; } .team-item img { /*height: 350px; /* Adjust the height as needed */ /*width: 100%; /* This will make the image take full width of the container */ /*object-fit: cover; /* This prevents the image from stretching */ /*object-position: center; /* This will center the image within the frame */ } .team-item::after { position: absolute; content: ""; width: 100%; height: 0; top: 0; left: 0; background: #FFFFFF; transition: .5s; z-index: -1; } .team-item:hover::after { height: 100%; background: hsl(var(--primary)); } .team-item .team-social { position: absolute; width: 100%; height: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .75); overflow: hidden; opacity: 0; transition: .5s; } .team-item:hover .team-social { height: 100%; opacity: 1; } /*** Testimonial ***/ .testimonial-carousel .owl-dots { height: 40px; margin-top: 25px; display: flex; align-items: center; justify-content: center; } .testimonial-carousel .owl-dot { position: relative; display: inline-block; margin: 0 5px; width: 20px; height: 20px; background: transparent; border: 2px solid hsl(var(--primary)); transition: .5s; } .testimonial-carousel .owl-dot.active { width: 40px; height: 40px; background: hsl(var(--primary)); } .testimonial-carousel .owl-item img { width: 150px; /* Fixed width */ height: 150px; /* Fixed height */ object-fit: cover; /* This will prevent the image from stretching */ object-position: center; /* Center the image within the frame */ /* border-radius: 50%; To maintain the rounded circle shape */ } /*** Footer ***/ .footer .btn.btn-link { display: block; margin-bottom: 5px; padding: 0; text-align: left; color: hsl(var(--background)); font-weight: normal; text-transform: capitalize; transition: .3s; } .footer .btn.btn-link::before { position: relative; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: hsl(var(--background)); margin-right: 10px; } .footer .btn.btn-link:hover { color: hsl(var(--primary)); letter-spacing: 1px; box-shadow: none; } .copyright { background: #222325; } .copyright a { color: hsl(var(--primary)); } .copyright a:hover { color: hsl(var(--background)); } /* Contact Form Error Messages */ .help-block { color : hsl(var(--primary)); /* Red color for error messages */ margin-top: 5px; } /* This will style the unordered list within the help-block class used for error messages */ .help-block ul { margin: 0; padding: 0; list-style-type: none; } /* This will style each list item within the help-block class used for error messages */ .help-block li { font-size: 14px; } /* Styling for individual form control validation state */ .form-control.is-invalid, .form-control.is-valid { border-color: hsl(var(--primary)); /* Add other styling like box-shadow if needed */ } /* Styling for valid input fields, optional if you want to highlight valid fields */ .form-control.is-valid { border-color: #28a745; /* Bootstrap success color */ } /* You may also want to style the validation message for the valid state */ .valid-feedback { color: #28a745; /* Bootstrap success color */ } /* Custom Navbar Styles added on the request of waseem by tufail*/ /* Navbar background and text */ .navbar { background-color: black !important; /* Keep navbar black */ } .navbar .navbar-nav .nav-link { color: white !important; /* Navbar links white */ } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: hsl(var(--primary)) !important; /* Gold hover/active text color */ } /* Logo and brand text */ .navbar-brand h2 { color: hsl(var(--primary)) !important; /* Set Vision School of Motoring to gold */ font-weight: bold; /* Optional: Make it bold */ } .navbar-brand h2:hover { color: #e8c55f !important; /* Optional: Slightly lighter gold on hover */ } /* Dropdown menu */ /* Navbar Dropdown Toggle Button */ .navbar .dropdown-toggle::after { color: white !important; /* Change the arrow color to white */ font-size: 1rem; /* Adjust size if needed */ vertical-align: middle; margin-left: 5px; /* Space between text and icon */ } /* Dropdown Menu Background */ .navbar .dropdown-menu { background-color: black !important; /* Match the navbar background */ color: white !important; /* Ensure dropdown text is visible */ border: 1px solid hsl(var(--primary)); /* Optional: Add a gold border for style */ } /* Dropdown Menu Links */ .navbar .dropdown-menu .dropdown-item { color: white !important; /* Ensure links are visible */ } .navbar .dropdown-menu .dropdown-item:hover { background-color: hsl(var(--primary)) !important; /* Highlight color for hover (gold) */ color: black !important; /* Text contrast on hover */ } /* Toggler Button for Mobile */ .navbar-toggler { background-color: hsl(var(--primary)) !important; /* Gold background for toggler */ border: none; } .navbar-toggler-icon { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 viewBox%3D%220 0 30 30%22%3E%3Cpath stroke%3D%22rgba(151,151,151,1)%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-miterlimit%3D%2210%22 d%3D%22M4 7h22M4 15h22M4 23h22%22/%3E%3C/svg%3E') !important; /* Add these properties */ width: 3em; /* Adjust as needed: could be px or em */ height: 3em; /* Adjust as needed */ background-size: 3em 3em !important; background-repeat: no-repeat; background-position: center; } /* WhatsApp Icon Styles */ .whatsapp_float { position: fixed; bottom: 20px; left: 20px; z-index: 100; } .whatsapp-icon { font-size: 50px; color: #25D366; } @media screen and (max-width: 767px) { .whatsapp-icon { font-size: 40px; } .whatsapp_float { bottom: 15px; left: 15px; } } /*** Mobile Navbar - Login/Book Now button visible on mobile ***/ @media (max-width: 991.98px) { .navbar .navbar-collapse .btn-primary.d-none.d-lg-block { display: block !important; width: 100%; text-align: center; margin-top: 10px; padding: 12px 20px; } .navbar .navbar-collapse .navbar-nav { padding: 10px 0; } .navbar .navbar-collapse .navbar-nav .nav-link { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .navbar .navbar-collapse .navbar-nav .nav-link:last-child { border-bottom: none; } } /*** Focus States for Accessibility ***/ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; } /*** Card & Item Hover Effects ***/ .team-item { transition: box-shadow 0.3s ease, transform 0.3s ease; } .team-item:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); transform: translateY(-4px); } .driving-courses-item { transition: box-shadow 0.3s ease, transform 0.3s ease; } .driving-courses-item:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); transform: translateY(-4px); } /*** Image Loading Placeholder ***/ img { background-color: #e9ecef; } /*** Footer Link Hover Transitions ***/ .footer a { transition: color 0.3s ease; } .footer .btn-square.btn-outline-light { transition: all 0.3s ease; } .footer .btn-square.btn-outline-light:hover { background-color: hsl(var(--primary)) !important; border-color: hsl(var(--primary)) !important; transform: translateY(-2px); } .copyright a { transition: color 0.3s ease; } /*** Print Styles ***/ @media print { .navbar, .footer, .copyright, .back-to-top, .whatsapp_float, .chatbot-toggler, .chatbot, #spinner { display: none !important; } body { color: #000 !important; background: #fff !important; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; } .page-header { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .container-fluid, .container { padding: 0 !important; margin: 0 !important; } }