@font-face {
    font-family: 'Montserrat';
    src: url("assets/fonts/Montserrat-Bold.ttf") format('truetype');
}

@font-face {
    font-family: 'Numans';
    src: url("assets/fonts/Numans-Regular.ttf") format('truetype');
}

@font-face {
    font-family: 'Lora';
    src: url("assets/fonts/Lora-Bold.ttf") format('truetype');
}

@font-face {
    font-family: 'Tangerine';
    src: url('../fonts/Tangerine-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Tangerine';
    src: url('../fonts/Tangerine-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --black: black;
    --white: white;
    --gray: gray;

    --primary-color: #caf0f8;
    --secondary-color: #0077b6;
    --action-color: #14213d;

    --bg1: green;
    --bg2: pink;

    --gradient1: background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);

    --heading: 'Montserrat', sans-serif;
    --sub-heading: 'Numans', sans-serif;
    --content: 'Lora', serif;
}

a {
    text-decoration: none;
    color: var(--action-color)
}

li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

p {
    /* font-family: var(--content); */
    font-size: 16px;
    line-height: 20px;
    /* text-align: justify; */
    word-break: break-word;
    margin-top: 10px;
}

/* ================== class ================= */


/* background color  */
.bg-black {
    background: var(--black);
}

.bg-white {
    background: white;
}

.bg-primary {
    background: var(--primary-color);
}

.bg-secondary {
    background: var(--secondary-color);
}

.bg-action {
    background: var(--action-color);
}

.bg1 {
    background: var(--bg1);
}

.bg2 {
    background: var(--bg2);
}

.bg-gradient1 {
    background: var(--gradient1);
}

.bg-gradient2 {
    background: var(--gradient2);
}

.white {
    color: white;
}

.black {
    color: var(--black);
}

.primary {
    color: var(--primary-color);
}

.secondary {
    color: var(--secondary-color);
}

.action {
    color: var(--action);
}


/* text color  */

section {
    padding: 0;
    margin: 0;
}

.container-fluid {
    position: relative;
    padding: 0;
    margin: 0;
}

.section-item {
    position: relative;
    padding: 70px clamp(15px, 6vw, 60px);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.align-item {
    display: flex;
    align-items: center;
}


/* -------------- button ------------- */




/* ============================================== */
/* HEADING */
/* ============================================== */

.heading-body {
    display: flex;
    flex-direction: column;
}

.heading-body .small-heading {
    color: var(--secondary);
    font-family: var(--sub-heading);
    font-style: italic;
    font-size: 17px;
    position: relative;
    width: fit-content;
    color: black;
    text-transform: capitalize;
}

.heading-body .small-heading::after {
    position: absolute;
    content: '';
    width: 20px;
    height: 1px;
    top: 11px;
    right: -28px;
    background: var(--primary-color);
}

.heading-body .small-heading::before {
    position: absolute;
    content: '';
    width: 35px;
    height: 1px;
    top: 16px;
    right: -43px;
    background: var(--primary-color);
}


.heading-body .big-heading {
    font-size: clamp(25px, 3.5vw, 70px);
    font-weight: 700;

    font-family: var(--heading);
    color: var(--action-color);
}

.heading-body .big-heading span {
    color: var(--action-color);
    font-weight: bold;
    font-family: var(--heading);
}

.heading-body .content-heading {
    width: 80%;
}

.center {
    align-items: center;
}

.start {
    align-items: start;
}

.end {
    align-items: end;
}


/* ==================== header ================= */

header {
    width: 100%;
    padding: 10px;
    background-color: var(--secondary-color);

}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .header-item a {
    color: var(--primary-color);
    font-weight: 600;
}

.mynavbar {
    background-color: var(--action-color);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.mynavbar {
    padding: 5px 0;
}

.mynavbar .logo {
    width: 160px;
    min-width: 70px;
}

.mynavbar .logo img {
    width: 100%;
}

.navbar-toggler {
    border: none !important;
    box-shadow: none !important;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-icon i {
    color: white;
}
.navbar-nav .nav-item .nav-link {
    font-size: 20px;
    padding: 10px 1.5vw;
    font-weight: 600;
    color: var(--primary-color);
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link.active,
.navbar-nav .nav-item .nav-link:active {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    outline: 1px solid var(--secondary-color);

}

.sticky {
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0;
}

.myslider{
    width: 100%;
}

.myslider .slider-banner {
    width: 100%
}

.myslider .slider-banner video,
.myslider .slider-banner img {
    width: 100%
}

.mybrand {
    padding: 40px 0;
    width: 700px;
    /* background-color: #6B48ED; */
}

.mybrand .swiper-wrapper {
    width: 100%;
    /* background-color: red; */
}

.slider-brand {
    position: relative;
    height: 240px;
    background: var(--secondary-color);
    background: #e2eafc;
    /*background: #90e0ef;*/
    border-radius: 14px;
    border: 2px solid  white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.4s ease;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    /* overflow: hidden; */
}


/* Active slide highlight */
.mybrand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mybrand .swiper-slide-active {
    transform: scale(1.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);

}

/* Logo wrapper */
.slider-brand .logo-img {
    width: 100%;
    /* background-color: red; */
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-brand .logo-img a {
    width: 100%;

    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo image */
.slider-brand .logo-img img {
    width: 80%;
    /*max-height: 100%;*/
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

/* Title */
.slider-brand .title {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

/* Active slide effects */
.mybrand .swiper-slide-active img {
    filter: grayscale(0);
    opacity: 1;
}

.mybrand .swiper-slide-active .title {
    opacity: 1;
    transform: translateY(0);
}

/* Hover effect */
.slider-brand:hover {
    transform: translateY(-6px);
}

.brand-section {
    background: linear-gradient(rgba(0, 0, 0, 0.325), rgba(0, 0, 0, 0.253)), url('../../asset/images/bg/520.jpg');
    /*background:url('../../asset/images/bg/520.jpg') ;*/
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    padding-bottom: 0;
}

.dark-background {
    background: black;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.dark-background  .title{
    color: white;
   padding-top:20px;
}
.dark-yellow{
    background: rgba(255, 255, 255, 0.15); /* transparent white */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border-radius: 16px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

    padding: 20px;
    color: #fff;
   
}
.dark-yellow  .title{
    color: white;
   padding-top:30px;
}


.company-name {
    /*font-size: 150px;*/
    font-size: clamp(40px, 6vw, 100px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    color: #F8BF01;
    /* line-height: 1; */
    overflow: hidden;
}

.company-name span {}

.about-img {
    width: 100%;
}

.about-img img {
    width: 100%;
}

.about-body {
    position: relative;
    background: linear-gradient(-135deg, #091227ec, #091227), url('../images/bg/about-bg.jpg');
    background: linear-gradient(-135deg, #005d8f, #0076b6e8), url('../images/bg/about-bg.jpg');

    background-size: contain;
    overflow: hidden;
}

.since {
    position: absolute;
    right: -10vh;
    bottom: 30%;
    font-size: 50px;
    font-size: clamp(26px, 4vw, 50px);
    line-height: 1;
    transform: rotate(90deg);
    font-family: 'Tangerine', cursive;
    background-color: var(--action-color);
    padding: 5px 20px;
    color: var(--primary-color);

}

.about-content {
    width: 100%;
}

.about-content h2 {
    color: #F7C100 !important;
}

.about-content .des p {
    color: whitesmoke;
}


.about-content .suptitil {
    background-color: var(--action-color);
    width: fit-content;
    font-family: var(--content);
    color: white;
    padding: 8px 18px;
    border-radius: 30px;
}

.about-content h2 {
    color: black;
    font-weight: 700;
}

.about-content .des {
    margin-top: 20px;
}

.suptitil {
    background-color: var(--action-color);
    width: fit-content;
    font-family: var(--content);
    color: white;
    padding: 8px 18px;
    border-radius: 30px;
}

#milestones {
    background: #091227;
}

.milest-body {
    border-left: 2px solid var(--primary-color);
}

.milest-card {
    width: 80%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin: auto;
    display: block;
    margin-top: 40px;
    padding: 40px 30px;
    border-radius: 4px;
    background-color: var(--secondary-color);
    position: relative;
    z-index: 10;
    
}

.milest-card::after {
    width: 30px;
    height: 30px;
    background: var(--primary-color);

    content: '';
    top: 40%;
    right: -15px;
    position: absolute;
    transform: rotate(45deg);
    z-index: -5;
    box-shadow: rgba(100, 100, 111, 0.2)
}

.milest-card::before {
    width: 30px;
    height: 50px;
    background: var(--secondary-color);

    content: '';
    top: 35%;
    right: 0;
    position: absolute;

    z-index: 0;
    box-shadow: rgba(100, 100, 111, 0.2)
}

.milest-card .title {
    color: white;
    font-size: 25px;
    margin-bottom: 10px;
    font-weight: 600;
}

.milest-card .des {
    color: whitesmoke;
}

.odd {
    margin-top: 100px;
}

.odd::after {
    right: auto;
    left: -15px;
}

.odd::before {
    right: auto;
    left: 0px;
}

#contact-us {
    background-color: var(--action-color);
    overflow: hidden;
}

.contact-img {
    width: 100%;
    /* height: 100%; */
    position: relative;
    z-index: 5;
}

.contact-img img {
    width: 80%;
    margin: auto;
    display: block;
    /* height: 100%; */
    /* object-fit: cover; */
}

.contact-bg {
    width: 60%;
    height: 200%;
    position: absolute;
    bottom: 0%;
    left: -30%;
    background-color: #F8BF01;
    transform: rotate(-145deg);
    z-index: 0;
}

.form-wrapper {
    background: var(--secondary-color);
    background-color: #5fa8d3;
    padding: 25px;
    width: 90%;
    margin: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.form-wrapper .heading {
    font-size: 30px;
    margin-bottom: 25px;
    margin-top: 5px;
    text-align: center;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #caf0f8;
    border-radius: 4px;
    font-size: 14px;
    color: var(--action-color);
    background: var(--primary-color);
}

.contact-form textarea {
    resize: none;
    height: 80px;
}

.phone-group {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 12px;
    padding: 0 8px;
}

.phone-group span {
    font-size: 14px;
    margin-right: 6px;
}

.phone-group input {
    border: none;
    outline: none;
    flex: 1;
    padding: 10px 6px;
}

.contact-form button {
    width: 100%;
    padding: 12px;
    background: #1f325c;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-form button:hover {
    background: var(--action-color);
}

.contact-icon {
    width: 12vw;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.contact-icon img {
    width: 100%;
}

.call-box{
    padding: 40px 10px;
    background: var(--secondary-color);
}
.tagline{
    font-size:20px;
    color: #F8BF01;
    font-weight: 600;
}
.contact-detail{
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 20px;
}
.contact-detail p a{
    color: white;
    font-size:20px;
}
footer {
    background-color: rgb(19, 19, 19);
    overflow: hidden;
}
.f-content .heading{
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
    position: relative;
}
.f-content .heading::after{
    position: absolute;
    content: '';
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 2px;
    transform: skew(40deg) translateX(-50%);
    background: #F8BF01;
    
}

.f-content ul {
    height: 200px;
    overflow-y:auto ;
    
}
.f-content ul::-webkit-scrollbar{
    width: 2px;
    background: white;
    
}
.f-content ul::-webkit-scrollbar-thumb{
    background: #F8BF01;
}

.f-content ul 
    li a {
    color: #D3D3D3;
    position:relative ;
    padding-bottom: 4px;
        transition: all 0.3s;
}
.f-content ul li {
    padding-top:10px !important;
    
    
}
.f-content ul li a::after{
       position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 0%;
    height: 1px;
    background: #F8BF01;
    transition: all 0.3s;
}
.f-content ul li i{
    color: #F8BF01;
    transform: rotate(-90deg);
}
.f-content ul li a:hover::after{
    width: 100%;
}
.f-content ul li a:hover{
    color: #F8BF01;
}
.content-bottom .heading{
    font-size: 20px;
    color: #F8BF01;
    font-weight: 600;
}
.socialmedia {
    display: flex;

    justify-content: end;
    flex-direction: column;
    align-items: end;
    gap: 10px;
}
.socialmedia .box{
    gap: 10px;
     display: flex;
    align-items: center;
    
}
.socialmedia .box .item{
    width: 30px  ;
    height: 30px;
    background: white;
      display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
.socialmedia .heading{
    font-size: 20px;
    color: #F8BF01;
    font-weight: 600;
    text-align: end;
}
.content-bottom .mother-company{
    display: flex;
    align-items: center;
    
    gap: 10px;
    flax-wrap:wrap;
}
.content-bottom .mother-company  a{
color: white;
    
}
.content-bottom .mother-company  a:hover{
    color: #F8BF01;
}
.f-adder{
    margin-top: 20px;
}
.f-adder p{
    color: white;
    text-align: end;
    margin-top: 30px;
}
.ventuer-our{
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    font-size:20px;
    font-weight: 600;
    
}
.ventuer-our .name{
    background: #FDC10D;
    padding: 10px 30px;
    line-height: 1;
    text-transform: uppercase;
    color: black;
    border-radius: 5px;
    
}
.copyright{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    background: #FDC10D;
}
.copyright p{
    color: black;
    font-weight: 600;
    font-size: 14px;
}