/* 
  **********************************************
  ************  about all  section  ************
  **********************************************
 */ 

 section
{
    padding: 0px 0px;
}
.main 
{
    margin: 0px;
    padding: 0px;
    padding-top: 147px; 
}

.content
{
    margin-top: 0px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

/* 
  **********************************************
  ************       CARD about     ************
  **********************************************
 */  

.card-ABOUT
{
    background-color: #072826;
    height:274px;
    width: 1792px;
    overflow: hidden;
    border-radius: 15px;
    margin-top: 58px;
    position: relative;
    isolation: isolate;
    transition: 0.7s ease;
}
.card-ABOUT:after
{
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.5;
    background-position-y: -90px;
    background-size: 1792px ;
    background-repeat: no-repeat;
    transition: 0.7s ease;
}


.card-ABOUT:hover
{
    height:600px;
    background-color: #072826;
    border: 1px solid #4CDC6B;
}
     
.content .card-ABOUT h2
{
    font-family: 'MediumItalic';
    padding-top: 190px;
    padding-left: 35px;
    color: #fff;
    font-size: 60px;
    font-weight: 400;
}

.card-ABOUT p 
{
    font-family: 'Regular';
    user-select: none; 
    color: #fff;
    font-size: 25px;
    padding-left: 35px;
    padding-top: 33px;
    padding-right: 97px;
}
/* 
  **********************************************
  ************       card-VISION    ************
  **********************************************
 */  
.card-VISION
{
    background-color: #072826;
    height:274px;
    width: 1792px;
    overflow: hidden;
    border-radius: 15px;
    margin-top: 58px;
    position: relative;
    isolation: isolate;
    transition: 0.7s ease;
}
.card-VISION:after
{
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.5;
    background-position-y: -90px;
    background-size: 1792px ;
    background-repeat: no-repeat;
    transition: 0.7s ease;
}

.card-VISION:hover
{
    height:390px;
    background-color: #072826;
    border: 1px solid #4CDC6B;

}
     
.content .card-VISION h2
{
    font-family: 'MediumItalic';
    padding-top: 190px;
    padding-left: 35px;
    color: #fff;
    font-size: 60px;
    font-weight: 400;
}


.card-VISION p 
{
    font-family: 'Regular';
    user-select: none; 
    color: #fff;
    font-size: 25px;
    padding-left: 35px;
    padding-top: 33px;
    padding-right: 97px;
    padding-bottom: 25px;
}
/* 
  **********************************************
  ************       card-MiSSION    ************
  **********************************************
 */  
 .card-MiSSION 
 {
     background-color: #072826;
     height:274px;
     width: 1792px;
     overflow: hidden;
     border-radius: 15px;
     margin-top: 58px;
     position: relative;
     isolation: isolate;
     transition: 0.7s ease;
 }
 .card-MiSSION:after
 {
     content: '';
     position: absolute;
     z-index: -1;
     inset: 0;
     opacity: 0.5;
     background-position-y: -90px;
     background-size: 1792px ;
     background-repeat: no-repeat;
     transition: 0.7s ease;
 }

 .card-MiSSION:hover
 {
    height:390px;
    background-color: #072826;
    border: 1px solid #4CDC6B;
 }
    
 .content .card-MiSSION h2
 {
    font-family: 'MediumItalic';
     padding-top: 190px;
     padding-left: 35px;
     color: #fff;
     font-size: 60px;
     font-weight: 400;
 }
 
 
 .card-MiSSION p
  {
    font-family: 'Regular';
    user-select: none; 
    color: #fff;
    font-size: 25px;
    padding-left: 35px;
    padding-top: 33px;
    padding-right: 97px;
    padding-bottom: 25px;
 }
/* 
  **********************************************
  ************       card-COMPANY   ************
  **********************************************
 */  
 .card-COMPANY 
 {
    background-color: #072826;
    height:274px;
    width: 1792px;
    overflow: hidden;
    border-radius: 15px;
    margin-top: 58px;
    position: relative;
    isolation: isolate;
    transition: 0.7s ease;
 }
 .card-COMPANY:after
 {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.5;
    background-position-y: -90px;
    background-size: 1792px ;
    background-repeat: no-repeat;
    transition: 0.7s ease;
 }
 
 .card-COMPANY:hover
 {
    height:409px;
    background-color: #072826;
    border: 1px solid #4CDC6B;
 }
  
 .content .card-COMPANY h2
 {
    font-family: 'MediumItalic';
    padding-top: 110px;
    padding-left: 35px;
    color: #fff;
    font-size: 60px;
    font-weight: 400;
 }
 .card-COMPANY p
  {
     font-family: 'Regular';
     user-select: none; 
     color: #fff;
     font-size: 25px;
     padding-left: 35px;
     padding-top: 33px;
     padding-right: 97px;
     padding-bottom: 30px;
 }
 /* 
  **********************************************
  ************  Background-Image 3 card ********
  **********************************************
 */  
.card1-background
{
    background-color: #072826;
    height:274px;
    width: 1792px;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    isolation: isolate;
    transition: 0.7s ease;
}

.card1-background:after
{
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.5;
    background: url(../images/about-about.jpg) ;
    background-position-y: -273px;
    background-position-x: 0px;
    background-size: 1792px ;
    background-repeat: no-repeat;
}
 
.card1-background:hover:after
{
    opacity: 0.8;
}
     
.card-VISION .card1-background:after
{
    background: url(../images/about-vision.jpg) ;
    background-position-y: -463px;
    background-position-x: 0px;
    background-size: 1792px ;
}

.card-MiSSION .card1-background:after
{
    background: url(../images/about-mission.jpg) ;
    background-position-y: -463px;
    background-position-x: 0px;
    background-size: 1792px ;
}

.card-COMPANY .card1-background:after
{
    background: url(../images/about-company.jpg) ;
    background-position-y: -463px;
    background-position-x: 0px;
    background-size: 1792px ;
}


 /* 
  **********************************************
  ************ secand 2 section  ********
  **********************************************
 */  

.main2
{
    margin-top: 133px;
}

.main3
{
    margin-bottom: 133px;
}

.card2
{
    background-color: #072826;
    border: 1px solid #4CDC6B;
    margin-top:  18px;
    height: 469px;
    width: 586px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: 0.7s ease;
}
.card3
{
    background-color: #072826;
    border: 1px solid #4CDC6B;
    margin-top:  18px;
    margin-left: 18px;
    height: 469px;
    width: 586px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.7s ease;
}
.card2:hover,
.card3:hover
{
    transform: scale(1.02);
}
.content-card
{
    width: 462px;
    height: 362px;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.div-icon
{
    width: 98px;
    height: 98px;
    background-color: #4CDC6B;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    border-radius: 48px;
    margin-bottom: 57px;
}

.div-icon img
{
    width: 57px;
    height: 57px;   
}
.content-card  h2
{
    font-family: 'DemiBold';
    font-size: 35px;
    color: #fff;

}

.content-card p
{ 
    font-family: 'Light';
    color: #fff;
    font-size: 23px;
    
}

.parag
{   
    margin-top:50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;  
}



.footer-card
{

    
   width: 1792px; 
}


@media(max-width:1800px)
{
    .main 
    {
        padding-top: 97px; 
    }

    .card1-background
    {
        height:205px;
        width: 1343px;
    }

    .card-ABOUT,
    .card-VISION,
    .card-MiSSION,
    .card-COMPANY 
    {
        height:205px;
        width: 1343px;
    }

    .content .card-ABOUT h2,
    .content .card-VISION h2,
    .content .card-MiSSION h2
    {
       
        font-size: 50px;
        padding-top: 135px;
        padding-left: 25px;
    }
    .content .card-COMPANY h2
    {
        font-size: 40px;
        padding-top:100px;
        padding-left:35px;
    }

    .card-ABOUT p,
    .card-VISION p,
    .card-MiSSION p,
    .card-COMPANY p
    {
        font-size: 20px;
        padding-left: 35px;
        padding-top: 33px;
        padding-right: 97px;
    }

    .card-ABOUT:hover
    {
        height:500px;
    }
    
    .card-VISION:hover,
    .card-MiSSION:hover,
    .card-COMPANY:hover
    {
        height:330px;
    }

    .card1-background:after
    {
        background-size: 1343px;
        background-position-y: -193px;
    }
    .card-VISION .card1-background:after
    {
        background-size: 1343px;
        background-position-y: -293px;
    }
    .card-MiSSION .card1-background:after
    {
        background-size: 1343px;
        background-position-y: -343px;
       
    }
    .card-COMPANY .card1-background:after
    {
        background-size: 1343px;
        background-position-y: -363px;
    }

    .main2
    {
        margin-top:93px;
    }
    .main3
    {
        margin-bottom:93px;
    }

    .card2,
    .card3
    {
        height: 351.53px;
        width: 439px;
    }
    .content-card
    {
        height: 252px;
        width: 296px;
    }
    .div-icon
    {
        width: 74px;
        height: 74px;
        border-radius: 37px;
        margin-bottom: 26px;
    }
    .div-icon img
    {
        height: 42px;
        width: 43px;
    }
    .content-card  h2
    {
        font-size: 22px;
    }
    .content-card p
    {
        font-size: 14px;
    }
    .parag
    {
        margin-top:20px;
    }


    .footer-card
    {
       width: 1343px; 
    }

}

@media(max-width:1429px)
{

    .main 
    {
        padding-top: 77px; 
    }

    .card1-background
    {
        height: 194px;
        width: 1073px;
    }

    .card-ABOUT,
    .card-VISION,
    .card-MiSSION,
    .card-COMPANY 
    {
        height: 194px;
        width: 1073px;
        margin-top: 48px;
    }

    .content .card-ABOUT h2,
    .content .card-VISION h2,
    .content .card-MiSSION h2
    {
        font-size: 45px;
        padding-top:128px;
        padding-left: 25px;
    }
    .content .card-COMPANY h2
    {
        font-size: 35px;
        padding-top:100px;
        padding-left:24px;
    }

    .card-ABOUT p,
    .card-VISION p,
    .card-MiSSION p,
    .card-COMPANY p
    {
        font-size: 16px;
        padding-left: 25px;
        padding-top: 22px;
        padding-right: 60px;
    }

    .card-ABOUT:hover
    {
        height:410px;
    }
    
    .card-VISION:hover,
    .card-MiSSION:hover,
    .card-COMPANY:hover
    {
        height:290px;
    }

    .card1-background:after
    {
        background-size: 1073px ;
        background-position-y: -163px;
    }
    .card-VISION .card1-background:after
    {
        background-size: 1073px ;
        background-position-y: -243px;
    }
    .card-MiSSION .card1-background:after
    {
        background-size: 1073px ;
        background-position-y: -263px;
       
    }
    .card-COMPANY .card1-background:after
    {
        background-size: 1073px ;
        background-position-y: -233px;
    }

    .main2
    {
        margin-top:73px;
    }
    .main3
    {
        margin-bottom:73px;
    }

    .card2,
    .card3
    {
        height: 280px;
        width: 350px;
    }
    .card3
    {
        margin-left: 12px;
    }
    .content-card
    {
        height: 236px;
        width: 232px;
    }
    .div-icon
    {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        margin-bottom: 32px;
    }
    .div-icon img
    {
        height: 33px;
        width: 33px;
    }
    .content-card  h2
    {
        font-size: 17px;
    }
    .content-card p
    {
        font-size: 12px;
    }
    .parag
    {
        margin-top:28px;
    }


    .footer-card
    {
       width: 1073px;
    }
}

@media(max-width:1119px)
{

    .main 
    {
        padding-top: 77px; 
    }

    .card1-background
    {
        height: 116px;
        width: 760px;
    }

    .card-ABOUT,
    .card-VISION,
    .card-MiSSION,
    .card-COMPANY 
    {
        height: 116px;
        width: 760px;
        margin-top: 48px;
    }

    .content .card-ABOUT h2,
    .content .card-VISION h2,
    .content .card-MiSSION h2
    {
        font-size:30px;
        padding-top:70px;
        padding-left: 22px;
    }
    .content .card-COMPANY h2
    {
        font-size: 20px;
        padding-top:60px;
        padding-left:22px;
    }

    .card-ABOUT p,
    .card-VISION p,
    .card-MiSSION p,
    .card-COMPANY p
    {
        font-size: 11px;
        padding-left: 20px;
        padding-top: 18px;
        padding-right: 60px;
    }

    .card-ABOUT:hover
    {
        height:280px;
    }
    
    .card-VISION:hover,
    .card-MiSSION:hover,
    .card-COMPANY:hover
    {
        height:190px;
    }

    .card1-background:after
    {
        background-size: 760px;
        background-position-y: -103px;
    }
    .card-VISION .card1-background:after
    {
        background-size: 760px;
        background-position-y: -163px;
    }
    .card-MiSSION .card1-background:after
    {
        background-size: 760px;
        background-position-y: -193px;
       
    }
    .card-COMPANY .card1-background:after
    {
        background-size: 760px;
        background-position-y: -163px;
    }

    .main2
    {
        margin-top:63px;
    }
    .main3
    {
        margin-bottom:63px;
    }

    .card2,
    .card3
    {
        height: 195px;
        width: 245px;
    }
    .card3
    {
        margin-left: 12px;
    }
    .content-card
    {
        height: 142.79px;
        width: 196px;
    }
    .div-icon
    {
        width: 33px;
        height: 33px;
        border-radius: 16.5px;
        margin-bottom: 20px;
    }
    .div-icon img
    {
        height: 20px;
        width: 20px;
    }
    .content-card  h2
    {
        font-size: 11px;
    }
    .content-card p
    {
        font-size: 9px;
    }
    .parag
    {
        margin-top:18px;
    }


    .footer-card
    {
       width: 760px;
    }

}

@media (max-width: 779px)
{

    .main 
    {
        padding-top: 77px; 
    }

    .card1-background
    {
        height: 85px;
        width: 560px;
    }

    .card-ABOUT,
    .card-VISION,
    .card-MiSSION,
    .card-COMPANY 
    {
        height: 85px;
        width: 560px;
        margin-top: 28px;
    }

    .content .card-ABOUT h2,
    .content .card-VISION h2,
    .content .card-MiSSION h2
    {
        font-size:20px;
        padding-top:57px;
        padding-left: 15px;
    }
    .content .card-COMPANY h2
    {
        font-size: 15px;
        padding-top:44px;
        padding-left:15px;
    }

    .card-ABOUT p,
    .card-VISION p,
    .card-MiSSION p,
    .card-COMPANY p
    {
        font-size: 8px;
        padding-left: 15px;
        padding-top: 17px;
        padding-right: 50px;
    }

    .card-ABOUT:hover
    {
        height:210px;
    }
    
    .card-VISION:hover,
    .card-MiSSION:hover,
    .card-COMPANY:hover
    {
        height:140px;
    }

    .card1-background:after
    {
        background-size: 560px;
        background-position-y: -90px;
    }
    .card-VISION .card1-background:after
    {
        background-size: 560px;
        background-position-y: -120px;
    }
    .card-MiSSION .card1-background:after
    {
        background-size: 560px;
        background-position-y: -150px;
       
    }
    .card-COMPANY .card1-background:after
    {
        background-size: 560px;
        background-position-y: -142px;
    }

    .main2
    {
        margin-top:43px;
    }
    .main3
    {
        margin-bottom:43px;
    }

    .card2,
    .card3
    {
        height: 143px;
        width: 179px;
    }
    .content-card
    {
        height: 95px;
        width: 120px;
    }
    .div-icon
    {
        width: 27px;
        height: 27px;
        border-radius: 13px;
        margin-bottom: 11px;
    }
    .div-icon img
    {
        height: 16px;
        width: 16px;
    }
    .content-card  h2
    {
        font-size: 8px;
    }
    .content-card p
    {
        font-size: 6px;
    }
    .parag
    {
        margin-top:16px;
    }


    .footer-card
    {
       width: 560px;
    }

}
@media (max-width: 579px)
{
    .main 
    {
        padding-top: 67px; 
    }

    .card1-background
    {
        height: 60px;
        width: 340px;
    }

    .card-ABOUT,
    .card-VISION,
    .card-MiSSION,
    .card-COMPANY 
    {
        height: 60px;
        width: 340px;
        margin-top: 20px;
    }

    .content .card-ABOUT h2,
    .content .card-VISION h2,
    .content .card-MiSSION h2
    {
        font-size:14px;
        padding-top:39px;
        padding-left: 12px;
    }
    .content .card-COMPANY h2
    {
        font-size: 10px;
        padding-top:30px;
        padding-left: 12px;
    }

    .card-ABOUT p,
    .card-VISION p,
    .card-MiSSION p,
    .card-COMPANY p
    {
        font-size: 6px;
        padding-left: 10px;
        padding-top: 12px;
        padding-right: 20px;
    }

    .card-ABOUT:hover
    {
        height:170px;
    }
    
    .card-VISION:hover,
    .card-MiSSION:hover,
    .card-COMPANY:hover
    {
        height:100px;
    }

    .card1-background:after
    {
        background-size: 344px;
        background-position-y: -40px;
    }
    .card-VISION .card1-background:after
    {
        background-size: 344px;
        background-position-y: -70px;
    }
    .card-MiSSION .card1-background:after
    {
        background-size: 344px;
        background-position-y: -80px;
       
    }
    .card-COMPANY .card1-background:after
    {
        background-size: 344px;
        background-position-y: -62px;
    }

    .main2
    {
        margin-top:23px;
    }
    .main3
    {
        margin-bottom:23px;
    }

    .card2,
    .card3
    {
        height: 100.44px;
        width: 111px;
    }
    .card3
    {
        margin-left:5px;
    }
    .content-card
    {
        height:71px;
        width: 78PX;
    }
    .div-icon
    {
        width: 19px;
        height: 19px;
        border-radius: 13px;
        margin-bottom: 11px;
    }
    .div-icon img
    {
        height: 12px;
        width: 12px;
    }
    .content-card  h2
    {
        font-size: 5px;
    }
    .content-card p
    {
        font-size: 4px;
    }
    .parag
    {
        margin-top:9px;
    }


    .footer-card
    {
       width: 344px;
    }


}