/*
Project Name: তাকওয়া ড্রাইভিং স্কুল - Takwa Driving School
Theme URI: https://takwadriving.com/

Author: Ibnu Mahtab Hussain
Author URI: https://ibnumahtab.netlify.app/

Description: Taqwa Driving School - Institution approved by BRTA. Reg. No. 134/2019 We started our activities as we felt the need to establish a state-of-the-art driving training institute in the country to enhance the skills of individuals and drivers engaged in the transport sector in order to achieve the demand of the people for 'want an accident free road'.

Tags: Takwa Driving School, takwadriving, Best Driving School, driving school in Dhaka, best driving school in dhaka, mirpur driving school, best driving school at mirpur

Version: 1.7
Text Domain: takwadriving
*/

/* ----------------------------------
	0. Import Required Files
---------------------------------- */
/* --→ Google Fonts ←-- */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;700&display=swap');

/* --→ Bootstrap Icon ←-- */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css');

/* ----------------------------------
	1. Main Style CODE
---------------------------------- */
:root {
    --smaller: 0.75;
}

::selection {
    color: var(--bs-light);
    background-color: var(--bs-primary);
}

/* → Scroll Bar Style ← */
::-webkit-scrollbar {
    width: 12px;
    background-color: var(--bs-dark);
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #ffffff41;
    background-color: var(--bs-dark);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--bs-primary);
    border-radius: 10px;
}

body {
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 1.2rem;
}

/* --→ Header Section ←-- */
#header-section,
#call-to-action {
    background: rgb(0, 4, 40);
    background: linear-gradient(72deg, rgba(0, 4, 40, 1) 0%, rgba(0, 78, 146, 1) 100%);
}

.takwa-toggler-icon {
    color: var(--bs-light);
    font-size: 32px;
}

.brand-name {
    margin-right: 0;
}

/* --→ Our Packages ←-- */
#packeges .package-modal-btn:hover {
    color: var(--bs-light);
    background-color: var(--bs-primary);
}

#packeges img {
    transition: all 0.4s linear;
}

#packeges img:hover {
    transform: scale(1.1);
}

/* --→ Scroll to Top Button ←-- */
.scroll {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 100px;
    right: -80px;
    border-radius: 5%;
    background: rgb(13, 110, 253);
    background: radial-gradient(circle, rgba(13, 110, 253, 1) 35%, rgba(13, 202, 240, 1) 100%);
    color: #fff;
    font-size: 44px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 0 5px 0px #888;
    transition: 300ms;
    cursor: pointer;
}

.scroll i {
    margin-top: 10px;
    text-shadow: 0 0 2px #fff;
}

.scroll:hover i {
    animation-name: rotate;
    animation-duration: 300ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes rotate {
    from {
        margin-top: 15px;
    }
    to {
        margin-top: 5px;
    }
}

.visible {
    right: 30px;
    transition: all 400ms;
    transform: rotate(360deg);
}

/* Frosted Glass Effect */
#discount-offer .frosted-glass {
    position: relative;
    z-index: 1;
    background: inherit;
    overflow: hidden;
}

#discount-offer .frosted-glass:before {
    content: '';
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.2);
    filter: blur(10px);
    margin: -20px;
}

/* Countdown Timer Style */
#discount-offer #countdown-timer {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#discount-offer #countdown-timer {
    font-family: 'Hind Siliguri', sans-serif;
}

#discount-offer #countdown-timer .container {
    margin: 0 auto;
    text-align: center;
}

#discount-offer li {
    display: inline-block;
    font-size: 1.2em;
    list-style-type: none;
    padding: 0 1em;
}

#discount-offer li span {
    display: block;
    font-size: 1.9rem;
}

@media all and (max-width: 768px) {
    #discount-offer h3 {
        font-size: calc(1.5rem * var(--smaller));
    }

    #discount-offer li {
        font-size: calc(1.125rem * var(--smaller));
    }

    #discount-offer li span {
        font-size: calc(3.375rem * var(--smaller));
    }
}