/* banner section */

.banner-section {
    width: 100%;
}

.banner-box {
    width: 100%;
    aspect-ratio: 1728/554;
}

.banner-img-box {
    width: 100%;
    aspect-ratio: 1728/554;
    overflow: hidden;
}

.banner-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner-overlay {
    background: #00000099;
    z-index: 10;
    inset: 0;
}

.banner-content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    /* width: 60%; */
    color: #fff;
}

.banner-content h3 {
    font-size: 3rem;
    color: var(--main-clr);
    text-decoration: underline;
    text-underline-offset: 10px;
}

.banner-content p {
    font-size: 1rem;
}

.welcome {
    color: var(--main-clr);
}

@media (width <=768px) {
    .banner-box {
        width: 100%;
        aspect-ratio: 360/273;
    }

    .banner-img-box {
        width: 100%;
        aspect-ratio: 360/273;
        overflow: hidden;
    }

    .banner-content h3 {
        font-size: 2rem;
    }
}

/* service section */
.service {
    width: 100%;
    padding: var(--pad);
    max-width: calc(var(--max-width) + 10%);
    margin-inline: auto;
}

.service h3 {
    font-size: var(--h4);
    font-weight: 600;
    font-family: 'Poppins';
    color: var(--secoundry-clr);
    text-decoration: underline;
    text-decoration-color: var(--main-clr);
    text-underline-offset: 7px;
    margin-bottom: 20px;
}

.service-grid {
    width: 100%;
}

.sg-left {
    width: calc(60% - 10px);
}

.sg-left p {
    font-size: var(--p);
    font-family: 'Poppins';
}

.sg-right {
    width: calc(40% - 10px);
}

.sg-right img {
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 682/370;
    object-position: top;
}

@media (width<=768px) {
    .service h3 {
        text-align: center;
    }

    .service-grid {
        flex-direction: column-reverse;
    }

    .sg-left {
        width: 100%;
    }

    .sg-right {
        width: 100%;
    }
}

/* objectives section */

.objectives {
    width: 100%;
    padding: var(--pad);
    background: var(--main-clr);
    padding-top: 30px;
    border-radius: 30px;
}

.objectives-grid{
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
}

.objectives>h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: 'Poppins';
    display: none;
}

.og-left {
    width: calc(70% - 10px);
}

.og-right {
    width: calc(30% - 10px);
}

.og-right img {
    width: 100%;
}

.og-left h3 {
    margin-bottom: 20px;
    font-size: var(--h4);
    font-weight: 600;
    font-family: 'Poppins';
}

.og-left div {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.og-left div span {
    width: 10px;
    min-width: 10px;
    aspect-ratio: 1/1;
    background: #000;
    transform: rotate(45deg);
    margin-top: 5px;
}

.og-left div p {
    font-size: var(--p);
    line-height: var(--p);
    font-weight: 600;
    font-family: 'Poppins';
}

@media (width <=768px) {
    .objectives>h3 {
        display: block;
    }

    .og-left h3 {
        display: none;
    }

    .objectives-grid {
        flex-direction: column-reverse;
    }

    .og-left {
        width: 100%;
    }

    .og-right {
        width: 100%;
    }

    .og-right img {
        width: 50%;
        margin: 0px auto;
        display: block;
    }
}

/* industries section */

.industries {
    width: 100%;
    padding: var(--pad);
    margin-inline: auto;
    max-width:calc(var(--max-width) + 10%) ;
}

.industries h3 {
    font-size: var(--h4);
    color: var(--secoundry-clr);
    font-weight: 600;
    font-family: 'Poppins';
    margin-bottom: 20px;
    width: 100%;
}

.industries-left {
    width: calc(30% - 10px);
}

.industries-left img {
    width: 100%;
    aspect-ratio: 421/512;
    object-fit: cover;
}

.industries-right {
    width: calc(70% - 10px);
}

.industries-right div {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.industries-right div span {
    width: 10px;
    min-width: 10px;
    aspect-ratio: 1/1;
    background: #000;
    transform: rotate(45deg);
    margin-top: 9px;
}

.industries-right div p {
    font-size: var(--p);
    font-weight: 600;
    font-family: 'Poppins';
}

@media (width <=768px) {
    .industries-left {
        width: 100%;
    }

    .industries-right {
        width: 100%;
    }

    .industries h3 {
        text-align: center;
    }
}

/* facilities section */
.facilities {
    width: 100%;
    padding: var(--pad);
    margin-inline: auto;
    max-width:calc(var(--max-width) + 10%) ;
}
.facilities h3{
    font-size: var(--h4);
    color: var(--secoundry-clr);
    font-weight: 600;
    font-family: 'Poppins';
    margin-bottom: 20px;
    width: 100%;
}
.facilities-left{
    width: calc(70% - 10px);
}
.facilities-left div {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.facilities-left div span {
    width: 10px;
    min-width: 10px;
    aspect-ratio: 1/1;
    background: #000;
    transform: rotate(45deg);
    margin-top: 9px;
}

.facilities-left div p {
    font-size: var(--p);
    font-weight: 600;
    font-family: 'Poppins';
}
.facilities-right{
    width: calc(30% - 10px);
}
.facilities-right img{
   width: 100%;
   aspect-ratio: 421/512;
   object-fit: cover;
}

@media (width <= 768px){
    .facilities{
        flex-direction: column;
    }
    .facilities h3{
        text-align: center;
    }
    .facilities-left{
        width:100%;
        order: 2;
    }
    .facilities-right{
        width:100%;
      
    }
}

/* dedicated section */
.dedicated{
    width: 100%;
    padding: var(--pad);
    margin-inline: auto;
    max-width:calc(var(--max-width) + 10%) ;
}
.dedicated h3{
    font-size: 1.5rem;
    font-weight: 600;
    font-family: 'Poppins';
    margin-bottom: 30px;
}
.dedicated h4{
    font-size: var(--h4);
    font-weight: 600;
    font-family: 'Poppins';
    margin-bottom: 20px;
    color: var(--secoundry-clr);
}

.dedicated div {
    margin-bottom: 20px;
    
}

.dedicated div span {
    width: 10px;
    min-width: 10px;
    aspect-ratio: 1/1;
    background: #000;
    transform: rotate(45deg);
    margin-top: 9px;
}

.dedicated div p {
    font-size: var(--p);
    font-weight: 600;
    font-family: 'Poppins';
}

@media (width <=768px){
    .dedicated h3{
        text-align: center;
    }
}