@font-face {
    font-family: Rubik;
    src: url("../assets/fonts/rubik/Rubik-Regular.ttf");
}

@font-face{
    font-family: Rubik-bold;
    src: url(../assets/fonts/rubik/Rubik-Bold.ttf);
}

@font-face{
    font-family: Rubik-medium;
    src: url(../assets/fonts/rubik/Rubik-Medium.ttf);
}


:root {
    --title1-font-size: 40px;
    --title2-font-size: 20px;

    --title3-font-size:30px;


    --content1-font-size: 15px;
    --content2-font-size: 14px;
    --content3-font-size: 12px;
    --content4-font-size: 13px;
    --small-font-size:10px;

    --primary-orange:#DF661C;
    --color-white:#FFFFFF;
    --color-pink:#FFF2EA;
    --color-black: #000000;
    --shadow-color:#00000029;

    --rubik-regular:Rubik;
    --rubik-bold:Rubik-bold;
    --rubik-medium: Rubik-medium;
    
}

/* Base Styles */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.p-y-15{
    padding: 15px 0px;
}
.p-x-15{
    padding:0px 15px
}

.hero-container{
    position:relative
}
.hero-container img{
    max-width: 100%;
    height: auto;
}
.hero-text{
    position: absolute;
    bottom:0;
    left: 96px;
    padding: 3px 100px;
    background-color: var(--color-white);
}
.hero-text p{
    font-size: var(--title1-font-size);
    text-align: start;
}

@media screen and (max-width:1200px){
    .hero-text{
        left: 50px;
        padding: 0px 90px;
        background-color: var(--color-white);
    }
}
@media screen and (max-width:992px){
    .hero-text{
        left: 35px;
        padding: 0px 20px;
        background-color: var(--color-white);
    }   
}
@media screen and (max-width:768px){
    .hero-text{
        left: 35px;
        padding: 0px 50px;
        background-color: var(--color-white);
    }
    .hero-text p{
        font-size: var(--title2-font-size);
    }

}
@media screen and (max-width:576px){
    .hero-text{
        left: 35px;
        padding: 0px 30px;
        background-color: var(--color-white);
    }
    .hero-text p{
        font-size: var(--title2-font-size);
    }
}
@media screen and (max-width:370px){
    .hero-text{
        left: 10px;
        padding: 0px 10px;
       
    }
     .hero-text p{
       font-size: 15px;
    }
}


/* Common */
.container{
    padding: 50px 100px;
}



/*fleet-section-intro */
.fleet-container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
}
.fleet-img img{
 width: 100%;
}
.fleet-right{
    display: flex;
    align-items: center;
}
.fleet-right div h1{
    font-size: var(--title1-font-size);
    font-weight: 50;
}
.fleet-right div p{
    font-size: var(--content2-font-size);
}
.fleet-right-p-5{
    padding: 20px 0px;
}

@media screen and (max-width:768px){
    .container{
        padding: 20px 20px;
    }
    .fleet-container{
        grid-template-columns: repeat(1,1fr);
    }
}

@media screen and (max-width:370px){
    /* .fleet-right{
        margin-top:-20px;
    } */
}


/* fleet details */

.fleet-all{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
}
.fleet-card{
   padding-bottom: 10px;
}
.fleet-card img{
  box-shadow: var(--shadow-color) 0px 8px 24px;
}
.fleet-text p{
    font-size: var(--title2-font-size);
}
.fleet-text button{
   border: none;
   padding:5px 15px;
   font-size: var(--content3-font-size);
   border:2px solid var(--primary-orange);
   background-color: var(--color-white);
}
.fleet-all img{
    width: 100%;
}
@media screen and (max-width:768px){
    .fleet-all{
        grid-template-columns: repeat(2,1fr);
    }
}


/* get quote */

.quote-container{
    padding: 60px 280px;
    text-align: center;
    background-color: var(--primary-orange);
    color: var(--color-white);
}
.quote-container h1{
    font-size: var(--title1-font-size);
    font-weight: 50;
}
.quote-container p{
    font-size: var(--content1-font-size);
    padding-bottom: 15px;
    padding: 0px 40px;
}
.quote-container button{
 background-color: var(--color-black);
 color: var(--color-white);
 border: none;
 padding:10px 15px;
}


.quote-container .font-rubik-bold-20{
    padding: 15px 0px;
}
@media screen and (max-width:1200px){
    .quote-container{
        padding: 15px 30px; 
    }
    .quote-container p{
        padding: 5px 0px;
    }
}
@media screen and (max-width:768px){
    .quote-container{
        padding: 15px 20px; 
    }
    .quote-container p{
        padding: 5px 0px;
    }
}
@media screen and (max-width:370px){
    .quote-container{
        padding: 10px 5px;
    }
    .quote-container h1{
        font-size: var(--title2-font-size);
        font-weight: 50;
    }

}