@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

.wavy_bottom {
  clip-path: shape(from 0 0,vline to calc(100% - 25px),curve to 6.25% calc(100% - 15.5px) with 4.17% calc(100% - 15px),curve to 10.42% calc(100% - 9px) with 8.33% calc(100% - 16px),curve to 14.58% calc(100% - 20px) with 12.5% calc(100% - 2px),curve to 18.75% calc(100% - 44px) with 16.67% calc(100% - 38px),curve to 22.92% calc(100% - 27.5px) with 20.83% calc(100% - 50px),curve to 27.08% calc(100% - 20.5px) with 25% calc(100% - 5px),curve to 31.25% calc(100% - 23.5px) with 29.17% calc(100% - 36px),curve to 35.42% calc(100% - 10.5px) with 33.33% calc(100% - 11px),curve to 39.58% calc(100% - 5.5px) with 37.5% calc(100% - 10px),curve to 43.75% calc(100% - 9.5px) with 41.67% calc(100% - 1px),curve to 47.92% calc(100% - 11.5px) with 45.83% calc(100% - 18px),curve to 52.08% calc(100% - 20px) with 50% calc(100% - 5px),curve to 56.25% calc(100% - 23px) with 54.17% calc(100% - 35px),curve to 60.42% calc(100% - 28px) with 58.33% calc(100% - 11px),curve to 64.58% calc(100% - 24.5px) with 62.5% calc(100% - 45px),curve to 68.75% calc(100% - 25.5px) with 66.67% calc(100% - 4px),curve to 72.92% calc(100% - 44.5px) with 70.83% calc(100% - 47px),curve to 77.08% calc(100% - 31px) with 75% calc(100% - 42px),curve to 81.25% calc(100% - 26.5px) with 79.17% calc(100% - 20px),curve to 85.42% calc(100% - 23.5px) with 83.33% calc(100% - 33px),curve to 89.58% calc(100% - 13.5px) with 87.5% calc(100% - 14px),curve to 93.75% calc(100% - 26.5px) with 91.67% calc(100% - 13px),curve to 100% calc(100% - 25px) with 95.83% calc(100% - 40px),vline to 0, hline to 0);
}

.wavy_both {
  clip-path: shape(from 0 25px,curve to 6.25% 15.5px with 4.17% 15px,curve to 10.42% 9px with 8.33% 16px,curve to 14.58% 20px with 12.5% 2px,curve to 18.75% 44px with 16.67% 38px,curve to 22.92% 27.5px with 20.83% 50px,curve to 27.08% 20.5px with 25% 5px,curve to 31.25% 23.5px with 29.17% 36px,curve to 35.42% 10.5px with 33.33% 11px,curve to 39.58% 5.5px with 37.5% 10px,curve to 43.75% 9.5px with 41.67% 1px,curve to 47.92% 11.5px with 45.83% 18px,curve to 52.08% 20px with 50% 5px,curve to 56.25% 23px with 54.17% 35px,curve to 60.42% 28px with 58.33% 11px,curve to 64.58% 24.5px with 62.5% 45px,curve to 68.75% 25.5px with 66.67% 4px,curve to 72.92% 44.5px with 70.83% 47px,curve to 77.08% 31px with 75% 42px,curve to 81.25% 26.5px with 79.17% 20px,curve to 85.42% 23.5px with 83.33% 33px,curve to 89.58% 13.5px with 87.5% 14px,curve to 93.75% 26.5px with 91.67% 13px,curve to 100% 25px with 95.83% 40px,vline to calc(100% - 25px),curve to 93.75% calc(100% - 28.5px) with 95.83% calc(100% - 42px),curve to 89.58% calc(100% - 7.5px) with 91.67% calc(100% - 15px),curve to 85.42% calc(100% - 12.5px) with 87.5% calc(100% - 0px),curve to 81.25% calc(100% - 27.5px) with 83.33% calc(100% - 25px),curve to 77.08% calc(100% - 28px) with 79.17% calc(100% - 30px),curve to 72.92% calc(100% - 27px) with 75% calc(100% - 26px),curve to 68.75% calc(100% - 34px) with 70.83% calc(100% - 28px),curve to 64.58% calc(100% - 28px) with 66.67% calc(100% - 40px),curve to 60.42% calc(100% - 31px) with 62.5% calc(100% - 16px),curve to 56.25% calc(100% - 37px) with 58.33% calc(100% - 46px),curve to 52.08% calc(100% - 23.5px) with 54.17% calc(100% - 28px),curve to 47.92% calc(100% - 12px) with 50% calc(100% - 19px),curve to 43.75% calc(100% - 11px) with 45.83% calc(100% - 5px),curve to 39.58% calc(100% - 22.5px) with 41.67% calc(100% - 17px),curve to 35.42% calc(100% - 29.5px) with 37.5% calc(100% - 28px),curve to 31.25% calc(100% - 23.5px) with 33.33% calc(100% - 31px),curve to 27.08% calc(100% - 32px) with 29.17% calc(100% - 16px),curve to 22.92% calc(100% - 30px) with 25% calc(100% - 48px),curve to 18.75% calc(100% - 27px) with 20.83% calc(100% - 12px),curve to 14.58% calc(100% - 41px) with 16.67% calc(100% - 42px),curve to 10.42% calc(100% - 33px) with 12.5% calc(100% - 40px),curve to 6.25% calc(100% - 24px) with 8.33% calc(100% - 26px),curve to 0 calc(100% - 25px) with 4.17% calc(100% - 22px),vline to 0);
}

.wavy_top {
  clip-path: shape(from 0 100%,vline to 12.5px,curve to 3.13% 7.5px with 2.08% 7px,curve to 5.21% 4.5px with 4.17% 8px,curve to 7.29% 10px with 6.25% 1px,curve to 9.38% 22px with 8.33% 19px,curve to 11.46% 13.5px with 10.42% 25px,curve to 13.54% 10px with 12.5% 2px,curve to 15.63% 11.5px with 14.58% 18px,curve to 17.71% 5px with 16.67% 5px,curve to 19.79% 2.5px with 18.75% 5px,curve to 21.88% 4.5px with 20.83% 0px,curve to 23.96% 6px with 22.92% 9px,curve to 26.04% 10px with 25% 3px,curve to 28.13% 11px with 27.08% 17px,curve to 30.21% 13.5px with 29.17% 5px,curve to 32.29% 12px with 31.25% 22px,curve to 34.38% 12.5px with 33.33% 2px,curve to 36.46% 22px with 35.42% 23px,curve to 38.54% 15.5px with 37.5% 21px,curve to 40.63% 13.5px with 39.58% 10px,curve to 42.71% 12px with 41.67% 17px,curve to 44.79% 7px with 43.75% 7px,curve to 46.88% 13.5px with 45.83% 7px,curve to 48.96% 20.5px with 47.92% 20px,curve to 51.04% 14px with 50% 21px,curve to 53.13% 3.5px with 52.08% 7px,curve to 55.21% 6.5px with 54.17% 0px,curve to 57.29% 14px with 56.25% 13px,curve to 59.38% 14px with 58.33% 15px,curve to 61.46% 13.5px with 60.42% 13px,curve to 63.54% 17px with 62.5% 14px,curve to 65.63% 14px with 64.58% 20px,curve to 67.71% 15.5px with 66.67% 8px,curve to 69.79% 18.5px with 68.75% 23px,curve to 71.88% 12px with 70.83% 14px,curve to 73.96% 6.5px with 72.92% 10px,curve to 76.04% 5.5px with 75% 3px,curve to 78.13% 11px with 77.08% 8px,curve to 80.21% 14.5px with 79.17% 14px,curve to 82.29% 11.5px with 81.25% 15px,curve to 84.38% 16px with 83.33% 8px,curve to 86.46% 15px with 85.42% 24px,curve to 88.54% 13.5px with 87.5% 6px,curve to 90.63% 20.5px with 89.58% 21px,curve to 92.71% 16.5px with 91.67% 20px,curve to 94.79% 12px with 93.75% 13px,curve to 96.88% 14.5px with 95.83% 11px,curve to 100% 12.5px with 97.92% 18px,vline to 100%, hline to 0);
}

* {
    font-family: 'Tajawal';
    font-weight: normal;
}

p.uk-text,p.uk-text-small {
    text-align: justify;
}

.uk-navbar-nav>li>a {
    font-family: 'Tajawal';
    font-size: 17px;
}
 
h1,h2,h3,h4,h5,h6{
    font-family: 'Tajawal';
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6{
    font-family: 'Tajawal';
}

.uk-text {
    font-size: 22px;
    line-height: 1.6;
}

ul {
    list-style: none;
    padding: 0;
}

ul li.tclink {
    display: flex;
    align-items: center;
    font-size: 22px;
    line-height: 1.5;
}

ul li.tclink::before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    background: url('http://localhost//tc/assets/images/bolt-1_poly.svg') no-repeat center center;
    background-size: contain;
    margin-right: 10px;
}

.tc_primary_color{
    color: #041E42;
}

.tc_section_bg{
    background-color: #f1f1f1;
}

.tc_color_primary{
    color: #041E42;
}

.tc_color_secondary{
    color: #4e85c8;
}


.tc_center_vertically{
    align-content: center;
}

.overlay-container {
    position: relative;
    background: url('/tc/assets/images/bg3.jpg') no-repeat center center;
    background-size: cover;
}

.overlay-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 108, 204, 0.5); /* Black with 50% opacity */
}

/* Responsive Typography - Mobile First Approach */
/* Mobile devices (up to 768px) */
@media (max-width: 768px) {
    /* Body text */
    .uk-text {
        font-size: 16px;
        line-height: 1.7;
        padding: 0 10px;
    }
    
    /* Navigation links */
    .uk-navbar-nav>li>a {
        font-size: 16px;
        padding: 10px 15px;
    }
    
    /* List items */
    ul li.tclink {
        font-size: 16px;
        line-height: 1.6;
        padding: 8px 0;
    }
    
    /* Hero Section Text - Mobile Specific */
    .uk-section-regular.uk-width-1-1 .uk-h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
        padding: 0 20px;
    }
    
    .uk-section-regular.uk-width-1-1 .uk-text-lead {
        font-size: 16px !important;
        line-height: 1.7 !important;
        margin-bottom: 25px !important;
        padding: 0 20px;
    }
    
    .uk-section-regular.uk-width-1-1 .uk-button-xlarge {
        font-size: 16px !important;
        padding: 12px 24px !important;
        width: 80% !important;
        max-width: 300px !important;
    }
    
    /* Headings */
    h1, .uk-h1 {
        font-size: 28px;
        line-height: 1.2;
    }
    
    h2, .uk-h2 {
        font-size: 24px;
        line-height: 1.3;
    }
    
    h3, .uk-h3 {
        font-size: 20px;
        line-height: 1.4;
    }
    
    h4, .uk-h4 {
        font-size: 18px;
        line-height: 1.4;
    }
    
    h5, .uk-h5 {
        font-size: 16px;
        line-height: 1.5;
    }
    
    h6, .uk-h6 {
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* Card titles */
    .uk-card-title {
        font-size: 20px;
        line-height: 1.3;
    }
    
    /* Section headings */
    .uk-h2.uk-text-center {
        font-size: 24px;
        line-height: 1.3;
    }
    
    /* Lead text */
    .uk-text-lead {
        font-size: 18px;
        line-height: 1.6;
    }
    
    /* Button text */
    .uk-button {
        font-size: 16px;
        padding: 10px 20px;
    }
    
    /* Icon text */
    [uk-icon] + span {
        font-size: 16px;
    }
    
    /* Mobile-specific section height fixes */
    /* Fix hero section height to prevent overlap */
    .uk-position-relative.uk-container.uk-container-small.uk-flex.uk-flex-middle.uk-flex-center[uk-height-viewport] {
        min-height: 60vh !important;
        height: auto !important;
    }
    
    /* Make first section responsive */
    .uk-section-responsive-height {
        min-height: 400px !important;
        height: auto !important;
        padding: 40px 0 !important;
    }
    
    /* Adjust other sections for mobile */
    .uk-section.uk-section-muted {
        padding: 40px 0 !important;
    }
    
    .overlay-container {
        height: 400px !important;
        min-height: 400px !important;
    }
    
    /* Fix section with 650px height */
    .uk-section.tc_center_vertically[style*="height:650px"] {
        height: auto !important;
        min-height: 500px !important;
        padding: 40px 0 !important;
    }
    
    /* Fix section with 300px height */
    .uk-section.uk-section-muted[style*="height:300px"] {
        height: auto !important;
        min-height: 250px !important;
        padding: 30px 0 !important;
    }
    
    /* Ensure proper spacing between sections */
    .uk-section {
        margin-bottom: 0 !important;
    }
    
    /* Fix image sizes on mobile */
    .uk-align-center[style*="width:400px"] {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
    }
    
    .uk-align-center[style*="width:380px"] {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
    }
}

/* Tablet devices (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Body text */
    .uk-text {
        font-size: 18px;
        line-height: 1.65;
    }
    
    /* Navigation links */
    .uk-navbar-nav>li>a {
        font-size: 16px;
    }
    
    /* List items */
    ul li.tclink {
        font-size: 18px;
        line-height: 1.55;
    }
    
    /* Hero Section Text - Tablet Specific */
    .uk-section-regular.uk-width-1-1 .uk-h1 {
        font-size: 36px !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        padding: 0 30px;
    }
    
    .uk-section-regular.uk-width-1-1 .uk-text-lead {
        font-size: 18px !important;
        line-height: 1.65 !important;
        margin-bottom: 30px !important;
        padding: 0 30px;
    }
    
    .uk-section-regular.uk-width-1-1 .uk-button-xlarge {
        font-size: 17px !important;
        padding: 14px 28px !important;
        width: 70% !important;
        max-width: 350px !important;
    }
    
    /* Headings */
    h1, .uk-h1 {
        font-size: 36px;
        line-height: 1.2;
    }
    
    h2, .uk-h2 {
        font-size: 30px;
        line-height: 1.3;
    }
    
    h3, .uk-h3 {
        font-size: 24px;
        line-height: 1.4;
    }
    
    h4, .uk-h4 {
        font-size: 22px;
        line-height: 1.4;
    }
    
    h5, .uk-h5 {
        font-size: 18px;
        line-height: 1.5;
    }
    
    h6, .uk-h6 {
        font-size: 16px;
        line-height: 1.5;
    }
    
    /* Card titles */
    .uk-card-title {
        font-size: 22px;
        line-height: 1.3;
    }
    
    /* Section headings */
    .uk-h2.uk-text-center {
        font-size: 30px;
        line-height: 1.3;
    }
    
    /* Lead text */
    .uk-text-lead {
        font-size: 20px;
        line-height: 1.6;
    }
    
    /* Button text */
    .uk-button {
        font-size: 16px;
    }
}

/* Desktop devices (1025px and above) */
@media (min-width: 1025px) {
    /* Body text */
    .uk-text {
        font-size: 22px;
        line-height: 1.6;
    }
    
    /* Navigation links */
    .uk-navbar-nav>li>a {
        font-size: 17px;
    }
    
    /* List items */
    ul li.tclink {
        font-size: 22px;
        line-height: 1.5;
    }
    
    /* Headings */
    h1, .uk-h1 {
        font-size: 48px;
        line-height: 1.2;
    }
    
    h2, .uk-h2 {
        font-size: 36px;
        line-height: 1.3;
    }
    
    h3, .uk-h3 {
        font-size: 28px;
        line-height: 1.4;
    }
    
    h4, .uk-h4 {
        font-size: 24px;
        line-height: 1.4;
    }
    
    h5, .uk-h5 {
        font-size: 20px;
        line-height: 1.5;
    }
    
    h6, .uk-h6 {
        font-size: 18px;
        line-height: 1.5;
    }
    
    /* Card titles */
    .uk-card-title {
        font-size: 24px;
        line-height: 1.3;
    }
    
    /* Section headings */
    .uk-h2.uk-text-center {
        font-size: 36px;
        line-height: 1.3;
    }
    
    /* Lead text */
    .uk-text-lead {
        font-size: 22px;
        line-height: 1.6;
    }
    
    /* Button text */
    .uk-button {
        font-size: 17px;
    }
}