*{
    margin: 0;
    padding: 0;
}

:root{
    --main-color : #80d0c7 ;
    --secondary-color : #13547a ;
}
body{*{
    margin: 0;
    padding: 0;
}

:root{
    --main-color : #80d0c7 ;
    --secondary-color : #13547a ;
}
body{
    font-family: "Open Sans", sans-serif;
    /* height: 7000px; */
}

nav{
    background: linear-gradient( to right , #498a94 , #80d0c7 );
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    padding: 10px;
}

nav .leftnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}
nav .leftnav ul   {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
}
nav .leftnav ul li   {
    padding: 20px;
    text-transform: uppercase;
    list-style: none;
    position: relative;
}
nav .leftnav ul li a{
    color: white;
    text-decoration: none;
    transition: 0.5s;
}
nav .leftnav ul li a:hover ,
nav .leftnav ul li a.active{
    color: var(--secondary-color);
}
nav .leftnav div{
    display: flex;
    gap: 5px;
    font-size: 30px;
    font-weight: 700;
}
nav .rightnav i{
    display: block;
    width: 35px;
    height: 35px;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    font-size: 18px;
    cursor: pointer;

   
}
nav .rightnav i:hover{
    color: white;
    background-color: var(--secondary-color);
}

nav .leftnav ul li .drop1{
    background-color: #fff;
    padding: 20px;
    width: 150px;
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    font-size: 16px;
    transition: 0.5s;
    border-radius: 10px;
    top:150%;
    opacity: 0;
}
nav .leftnav ul li .drop1 a{
    color: #000;
    font-weight: 300;
}
nav .leftnav ul li .drop1::after{
    content: '';
    position: absolute;
    border: 10px solid white;
    left: 30px;
    top:-9px;
    transform: rotate(45deg);
}
nav .leftnav ul li:nth-child(5):hover .drop1{
    top: 100%;
    opacity: 1; 
}
nav .rightnav .bi-list{
    font-size: 30px;
    /* color: #fff; */
    cursor: pointer;
    display: none;
}
@media (max-width:995px) {
    nav .rightnav .bi-list{
        display: block;
    }
    nav{
        position: relative;
    }
    nav .leftnav ul {
        position: absolute;
        flex-direction: column;

        width: 100%;
        background-color: var(--main-color);
        left: 0;
        z-index: 5;
        gap: 5px;
        top: 200%;
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: 0.5s;
        padding-bottom: 0;
    }   
    nav:hover ul{
        top: 100%;
        opacity: 1;
        height: auto;
        padding-bottom:150px ;
        /* overflow: visible; */
    }
    nav .leftnav ul li{
        width: 100%;
        padding: 0;

    }
    nav .leftnav ul li a{
        display: block;
        width: 100%;
        text-align: center;
        position: relative;
        padding: 5px 0;

    }
    nav .leftnav ul li a::after{
        content: '';
        position: absolute;
        width: 0px;
        height: 2px;
        background-color: var(--secondary-color);
        top: 0;
        /* left: 0; */
        bottom: 0;
        right: 0;
        transition: 1s;
    }
    nav .leftnav ul li a::before{
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background-color: var(--secondary-color);
        bottom: 0;
        /* right: 0; */
        left: 0px;
        bottom: 0px;

        transition: 1s;
    }
    nav .leftnav ul li a:hover::after{
        width: 100%;
    }
    nav .leftnav ul li a:hover::before{
        width: 100%;
    }
    nav .leftnav ul li a:hover{
        background-color: #fff;
        color: var(--secondary-color);
        border-radius: 30px;
    }
    nav .leftnav ul li .drop1{
        left: 50%;
        opacity: 1;
        top: 100%;
    }
}
/* start  top header */
 header{
    height: 200vh;
    background-color: var(--main-color);
    display: flex;
    flex-direction: column;
   
 }

 header h1{
    /* margin-bottom: 200px; */
    font-weight: 700;
    font-size: 60px;
    color: white;
 }
 header b{
color: var(--secondary-color);
font-size: 24px;
font-weight: 600; 
}
header .top{
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient( 10deg ,  #13547a  , #80d0c7 ) ;
    /* transform: translateY(-60px); */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 100px;
    
}
header .top div{
    display: flex;
    flex-direction: row;
    /* margin-top: 10px; */
    width: 60%;
    background-color: #fff;
    position: relative;
     height: 80px; 
    border-radius: 40px;

}
header .top div input{
    /* position: absolute; */
    /* background-color: aqua; */
    border-radius: 40px;
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    margin-left: 30px;
}
header .top div input::placeholder{
    font-size: 20px;
    margin-left: 20px;

}
header .top div i{
    /* position: absolute; */
margin-top: 25px; 
margin-left: 15px;   
/* top:20px;
left: 10px; */
font-size: 20px;
}
header .top div button{
    border-radius: 50px;
    /* margin-left: 300px; */
    height: 60px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    background-color: var(--main-color);
    border: none;
    outline: none;
    transition: 0.5s;
}
header .top div button:hover{
    background-color: var(--secondary-color);
}

/* top header */

/* start  down header */
header .down{
    transform: translateY(-180px);
    display: flex;
    gap: 20px;
    padding: 0 200px;
    margin-left: 110px;
    /* margin-bottom: 300px; */
    /* background-color: aqua; */

}
@media (max-width:995px) {
    /* header{
        height: auto;
    } */
    header .top h1{
        font-size: 45px ;
    }
    header .top b{
        font-size: 20px ;
    }
    /* header .top div{
        height: 65px;
    } */
}
@media (max-width:768px){
    header .top h1{
        font-size: 35px ;
    }
    header .top b{
        font-size: 18px ;
    }
    header .top div{
        width: 90%;
    }
    header .top div input::placeholder{
        font-size: 14px;
    }
}
header .down .card1
{
    width:400px;

    border-radius: 20px;
    background-color: #fff;
    /* box-sizing: border-box; */
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 0.5s;
    gap:10px;
    margin-bottom: 200px ;

}
header .down .card1 img 
{
    width: 100%;
    height: 300px;
}
header .down .card1 div ,
.topic ul li :nth-child(1) .drop1 .card div
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .down .card1 div b  {

    font-weight: 500;
    font-size: 25px;
    color: #000;
}

header .down .card1 div span {
    background-color: #00B0FF;
    color: white;
    padding: 3px;
    border-radius: 5px;
}
header .down .card1  p  {
opacity: 0.7;
line-height: 1.5;
font-size: 18px;
}
header .down .card1:hover  {
    transform: translateY(-10px);
}

header .down .card2 {
    width:600px;
    display: block;
    border-radius: 20px;
    background-color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 0.5s;
    gap:10px;
    margin-bottom: 200px ;
    position: relative;
   
}

header .down .card2::after{
    content: '';
    background:linear-gradient(5deg , #13547aab , #80d0c7ea);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -4;
}

header .down .card2 img 
{
    width: 100%;
    height: 300px;
}
header .down .card2 div
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .down .card2 div b {

    font-weight: 500;
    font-size: 25px;
    line-height: 1.5;
    color: black;
}

header .down .card2 div span{
    background-color: #536DFE;;
    color: white;
    padding: 3px;
    border-radius: 5px;
}
header .down .card2  p {
/* opacity: 0.7; */
color: black;
line-height: 1.5;
font-size: 18px;
}
header .down .card2 button{
    background-color: var(--main-color);
    border-radius: 50px;
    /* margin-left: 300px; */
    height: 50px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    background-color: var(--main-color);
    border: none;
    outline: none;
    transition: 0.5s;

}
header .down .card2 button:hover{
    background-color: var(--secondary-color);
}
header .down .card2:hover{
    transform: translateY(-10px);
}
header .down .card2 .downcard{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .down .card2 .downcard .icons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

header .down .card2 .downcard .icons div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px 20px;
}

header .down .card2 .downcard .icons div i{
    width: 35px;
    height: 35px;
    background-color: var(--main-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

header .down .card2 .downcard i{
    color: black;
    font-size: 20px;
    padding: 0px 5px;
}

@media (max-width:995px) {
    header{
        height: auto;
    }
    header .down {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }
    header .down .card1 {
        width: 80%;
    }
    header .down .card2{
        width: 80%;
    }
    header .down .card2 .downcard .icons{
        gap: 2px;
    }
    header .down .card2 .downcard i{
        color: black;
        font-size: 16px;
        padding: 0px 2px;
    }
    header .down .card2 .downcard .icons div{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        padding: 2px 10px;
    }
    header .down .card2 .downcard .icons div i{
        width: 15px;
        height: 15px;
        background-color: var(--main-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    header .down .card2 div b ,
    header .down .card1 div b{

        font-weight: 500;
        font-size: 25px;
        line-height: 1.5;
        color: black;
    }
    
    header .down .card2 div span ,
    header .down .card1 div span{
        background-color: #536DFE;;
        color: white;
        padding: 1px;
        border-radius: 2px;
    }
    header .down .card2  p ,
    header .down .card1 div p {
    /* opacity: 0.7; */
    color: black;
    line-height: 1;
    font-size: 16px;
    }
    header .down .card2 button{
        background-color: var(--main-color);
        border-radius: 50px;
        /* margin-left: 300px; */
        height: 20px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 14px;
        margin-top: 10px;
        background-color: var(--main-color);
        border: none;
        outline: none;
        transition: 0.5s;
    
    }
}

@media (max-width:760px) {
    header{
        width: auto;
        height: auto;
    }
    header .down {
        width: auto;

        height: auto;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }
    header .down .card1 {
        width: 100%;
        /* display: flex;
        align-items: flex-start;
        justify-content: flex-start; */
    }
    header .down .card2{
        width: 100%;
        /* right: 10%; */
        /* display: flex;
        align-items: flex-start;
        justify-content: flex-start; */
    }
    header .down .card2 .downcard .icons{
        gap: 1px;
    }
    header .down .card2 .downcard i{
        color: black;
        font-size: 12px;
        padding: 0px 1px;
    }
    header .down .card2 .downcard .icons div{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1px;
        padding: 1px 2px;
    }
    header .down .card2 .downcard .icons div i{
        width: 3px;
        height: 3px;
        background-color: var(--main-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    header .down .card2 div b ,
    header .down .card1 div b{

        font-weight: 100;
        font-size: 14px;
        line-height: 1;
        color: black;
    }
    
    header .down .card2 div span ,
    header .down .card1 div span{
        width: 15px;
        background-color: #536DFE;;
        color: white;
        padding: 0px;
        border-radius: 2px;
    }
    header .down .card2  p ,
    header .down .card1  p {
    /* opacity: 0.7; */
    color: black;
    /* line-height: 1; */
    font-size: 10px;
    }
    header .down .card2 button{
        background-color: var(--main-color);
        border-radius: 50px;
        /* margin-left: 300px; */
        height: 10px;
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 12px;
        margin-top: 10px;
        background-color: var(--main-color);
        border: none;
        outline: none;
        transition: 0.5s;
    
    }
}
/* end down header */

/* start sec */

.topic{

    margin: 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;

}
.topic .sectitle{
    font-size: 50px;
    text-align: center;
}
.topic ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    border-bottom: 1px solid #13547a60;
    gap: 10px;
    position: relative;
    
}
.topic ul li{
    list-style: none;
    padding: 20px 30px;
    font-size: 18px;
    font-weight: 400;
    border-bottom: 2px solid white;
    cursor: pointer;
 
}


.topic ul li:hover ,
.topics ul li.active {
    border-bottom: 2px solid var(--secondary-color);
    color: var(--secondary-color);
}
.topic .cont {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 100px;
}
.topic .cont .card {
    width:calc((100% - 40px ) / 3 ) ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    box-sizing: border-box;
}
.topic .cont .card  {
    width:400px;

    border-radius: 20px;
    background-color: #fff;
    /* box-sizing: border-box; */
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 0.5s;
    gap:10px;
    margin-bottom: 200px ;

}
.topic .cont .card img
{
    width: 100%;
    height: 300px;
}

.topic .cont .card div
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;

}

.topic .cont .card b {

    font-weight: 500;
    font-size: 25px;
    color: #000;
}


.topic .cont .card span{
    background-color: #00B0FF;
    color: white;
    padding: 3px;
    border-radius: 5px;
}

.topic .cont .card p{
opacity: 0.7;
line-height: 1.5;
font-size: 18px;
}

.topic .cont .card:hover {
    transform: translateY(-10px);
}


/* end cont */


/* start  cards drop1 */


.topic ul li:nth-child(2) .drop1{
    position: absolute;
    width: 100% ;
    left: 0;
    top: 70px;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    z-index: 5;
    padding: 30px 100px;
    box-sizing: border-box;
    gap: 20px;
    display: none;
    transition: 0.5s;
    z-index: 10;
   
}
.topic ul li:nth-child(2):hover .drop1{
    display: flex;
    flex-wrap: wrap;
}

/* @media (max-width: 995px) {
    .topic ul li{
        font-size: 16px;
    }

    .topic .cont .card{
        width:calc((100% - 20px ) / 2) ;
    }
    .topic ul li:nth-child(2) .drop1 .card{
        width:calc((100% - 20px) / 2) ;
        box-sizing:border-box ;
    }
   
} */
/* @media (max-width: 768px) {
    .topic ul{
        gap: 5px;
    }
    .topic ul li{
        font-size: 16px;
        padding: 20px 5px;
    }
    .topic .cont {
        padding: 0 50px;
    }
    .topic .cont .card{
        width:100%;
    }
    .topic ul li:nth-child(2) .drop1{
        padding: 30px 50px;
        display: flex;
        flex-direction: column;

    }
    .topic ul li:nth-child(2) .drop1 .card{
        width:100% ;
        background-color: #00B0FF;
    }
} */
.topic ul li:nth-child(2) .drop1 .card{
    width:calc((100% - 40px ) / 3 ) ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;
    height: 500px;

}
.topic ul li:nth-child(2) .drop1 .card div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;

}
.topic ul li:nth-child(2) .drop1 .card div b{
    font-weight: 500;
    font-size: 25px;
}
.topic ul li:nth-child(2) .drop1 .card div span{
    padding: 5px;
    border-radius: 5px;
    background-color: #F50057;
    color: #fff;
}
.topic ul li:nth-child(2) .drop1 .card p{
    line-height: 1.5;
    opacity: 0.7;
    font-size: 18px;
}
.topic ul li:nth-child(2) .drop1 .card img{
    width: 100%;
    height: 250px;
}

/* end drop1 */


/* start drop 2 */


.topic ul li:nth-child(3) .drop2{
    position: absolute;
    width: 100% ;
    left: 0;
    top: 70px;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;

    align-items: flex-start;
    background-color: #fff;
    z-index: 5;
    padding: 30px 100px;
    box-sizing: border-box;
    gap: 20px;
    display: none;
    transition: 0.5s;
}
.topic ul li:nth-child(3):hover .drop2{
    display: flex;
    flex-wrap: wrap;

}
.topic ul li:nth-child(3) .drop2 .card{
    width:calc((100% - 20px ) / 2 ) ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;
    /* height: 450px; */

}
.topic ul li:nth-child(3) .drop2 .card:hover{
    transform: translateY(-10px);
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(1){
    /* width: 100%; */
    width:calc((100% - 20px ) / 2 ) ;
    height: 450px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2){
    width:calc((100% - 20px ) / 2 ) ;
    height: 450px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;

}


.topic ul li:nth-child(3) .drop2 .card:nth-child(2){
    width:calc((100% - 20px ) / 2 ) ;
    height: 450px;
   background: linear-gradient(5deg , #13547aab , #80d0c7ea);
   display: block;
    border-radius: 20px;
    /* background-color: #fff; */
    padding: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 0.5s;
    gap:10px;
    margin-bottom: 200px ;
    position: relative;
   
}
.topic ul li:nth-child(3) .drop2 .card div 
/* , .topic ul li:nth-child(3) .drop2 .card2 div{ */
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 20px;

}

.topic ul li:nth-child(3) .drop2 .card:nth-child(2) div{
    background: transparent ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    height: max-content;
    padding: 20px;
    border: none;

}
/* .topic ul li:nth-child(3) .drop2 .card2 div{
    display: flex;
    align-items: center;
    justify-content: space-between;
} */
.topic ul li:nth-child(3) .drop2 .card div b 
/* , .topic ul li:nth-child(3) .drop2 .card2 div b */
{
    font-weight: 500;
    font-size: 25px;
}

.topic ul li:nth-child(3) .drop2 .card div span
{
    padding: 5px;
    border-radius: 5px;
    background-color: #536DFE;
    color: #fff;
}
.topic ul li:nth-child(3) .drop2 .card p 
/* ,.topic ul li:nth-child(3) .drop2 .card2 p */
{
    line-height: 1.5;
    opacity: 0.7;
    font-size: 18px;
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) button{
    background-color: var(--main-color);
    border-radius: 50px;
    /* margin-left: 300px; */
    height: 50px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    background-color: var(--main-color);
    border: none;
    outline: none;
    transition: 0.5s;

}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) button:hover{
    background-color: var(--secondary-color);
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2):hover{
    transform: translateY(-10px);
}
/* .topic ul li:nth-child(3) .drop2 .card2{
    display: flex;
    justify-content: space-between;
    align-items: center;
} */
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) .downcard2 .icons{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: row;
    gap: 5px;
    height: max-content;
    width: max-content;
    /* margin-top: 50px; */
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) .downcard2 .icons div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px 20px;
    height: max-content;
    width: max-content;
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) .downcard2 .icons div i{
    width: 35px;
    height: 35px;
    /* background-color: var(--main-color); */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) .downcard2 i{
    color: black;
    font-size: 20px;
    padding: 0px 5px;
}

/* end drop 2 */


/* start drop 3 */


.topic ul li:nth-child(4) .drop3{
    position: absolute;
    width: 100% ;
    left: 0;
    top: 70px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    z-index: 5;
    padding: 30px 100px;
    box-sizing: border-box;
    gap: 20px;
    display: none;
    transition: 0.5s;
}
.topic ul li:nth-child(4):hover .drop3{
    display: flex;
    flex-wrap: wrap;

}
.topic ul li:nth-child(4) .drop3 .card{
    width:calc((100% - 40px ) / 3 ) ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;
    height: 500px;

}
.topic ul li:nth-child(4) .drop3 .card div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;

}
.topic ul li:nth-child(4) .drop3 .card div b{
    font-weight: 500;
    font-size: 25px;
}
.topic ul li:nth-child(4) .drop3 .card div span{
    padding: 5px;
    border-radius: 5px;
    background-color: #F9A826;
    color: #fff;
}
.topic ul li:nth-child(4) .drop3 .card p{
    line-height: 1.5;
    opacity: 0.7;
    font-size: 18px;
}
.topic ul li:nth-child(4) .drop3 .card img{
    width: 100%;
    height: 250px;
}

/* end drop3 */


/* start drop 4 */


.topic ul li:nth-child(5) .drop4{
    position: absolute;
    width: 100% ;
    left: 0;
    top: 70px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    z-index: 5;
    padding: 30px 100px;
    box-sizing: border-box;
    gap: 20px;
    display: none;
    transition: 0.5s;
}
.topic ul li:nth-child(5):hover .drop4{
    display: flex;
    flex-wrap: wrap;
}
.topic ul li:nth-child(5) .drop4 .card{
    width:calc((100% - 20px ) / 2 ) ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;
    height: 500px;

}
.topic ul li:nth-child(5) .drop4 .card div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}
.topic ul li:nth-child(5) .drop4 .card div b{
    font-weight: 500;
    font-size: 25px;
}
.topic ul li:nth-child(5) .drop4 .card div span{
    background-color: #00BFA6;
    color: white;
    padding: 3px;
    border-radius: 5px;
}
.topic ul li:nth-child(5) .drop4 .card p{
    line-height: 1.5;
    opacity: 0.7;
    font-size: 18px;
}
.topic ul li:nth-child(5) .drop4 .card img{
    width: 100%;
    height: 250px;
}

@media (max-width: 995px) {
    .topic ul li{
        font-size: 16px;
    }

    .topic .cont .card{
        width:calc((100% - 20px ) / 2 ) ;
    }
    .topic ul li:nth-child(2) .drop1 .card{
        width:calc((100% - 20px ) / 2 ) ;
    }
    /* .topic ul li:nth-child(3) .drop2 .card{
        width:calc((100% - 20px ) / 2 ) ;
    } */
    .topic ul li:nth-child(4) .drop3 .card{
        width:calc((100% - 20px ) / 2 ) ;
    }
    .topic ul li:nth-child(5) .drop4 .card{
        width:calc((100% - 20px ) / 2 ) ;
    }
    
}
@media (max-width: 768px) {
    .topic ul{
        gap: 5px;
    }
    .topic ul li{
        font-size: 16px;
        padding: 20px 5px;
    }
    .topic .cont {
        padding: 0 50px;
    }
    .topic .cont .card{
        width:100%;
    }
    .topic ul li:nth-child(2) .drop1{
        padding: 30px 50px;
    }
    .topic ul li:nth-child(2) .drop1 .card{
        width:100% ;
    }
    .topic ul li:nth-child(3) .drop2{
        padding: 30px 50px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .topic ul li:nth-child(3) .drop2 .card:nth-child(1) {
        width:100% ;
        height: 900px;
    }
    .topic ul li:nth-child(3) .drop2 .card:nth-child(2) {
        width:100% ;
        height: 900px;

    }
    .topic ul li:nth-child(4) .drop3 {
        padding: 30px 50px;
    }
    .topic ul li:nth-child(4) .drop3 .card{
        width:100% ;
    }
    .topic ul li:nth-child(5) .drop4 {
        padding: 30px 50px;
    }
    .topic ul li:nth-child(5) .drop4 .card{
        width:100% ;
        height: 900px;

    }
}


/* end sec */



/* start sec work */
 
.work {
    background: linear-gradient( 15deg ,  #13547ac9 , #80d0c7d5 ) , url(imgs/work.jpg) ;
    background-size:cover;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 50px 0px;
    gap: 80px;
    top: 0px;
    bottom: 0px;
    color: white;
    
}

.work h3{
    text-align: center;
    font-size: 50px;
    font-weight: 800;
}

.work .cont{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 100px;
    position: relative;
}

.work .cont::before{
    content: '';
    width: 10px;
    height: 70%;
    position: absolute;
    /* z-index: -1; */
    top: 0px;
    left: 22.4%;
    background-color: var(--main-color);
    z-index: 1;
}
@media (max-width: 1000px) {
    .work .cont::before{
        height: 70%;
        left: 24%;
    }
}
@media (max-width: 760px) {
    .work .cont::before{
        height: 65%;
        left: 30%;
    }
}

.work .cont .card{
    display: flex;
    width: 60%;
    gap: 70px;
}

.work .cont .card .details{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.work .cont .card .details b{
    font-size: 28px;
}

.work .cont .card .details p{
    font-size: 20px;
    line-height: 2;
}

.work .cont .button{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.work .cont .button span{
    font-size: 20px;
}
.work .cont .button button{
    border-radius: 40px;
    width: 220px;
    height: 50px;
    font-size: 20px;
    border: 2px solid var(--main-color);
    background-color: transparent;
    color:var(--main-color);
    font-weight: 600;
    transition: 0.5s;
}
.work .cont .button button:hover{
    background-color: var(--main-color);
    color: white;
}
.work .cont .icon{
 background-color: var(--main-color);
 border-radius: 50%;
 height: max-content;
 padding: 25px;
 border: 5px solid white;
 outline: 10px solid var(--main-color);
 z-index: 2;

}
.work .cont .icon i{
    font-size: 25px;
    font-weight: 600;
}


/* end sec work */

/* start sec questions */

.que{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.que h4{
    font-size: 40px;
    width: 350px ;
    padding-top: 20px;
}
.que .cont{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
 .que .cont .img {
    width: calc(( 100% - 10px ) / 2);
    box-sizing: border-box;
    padding: 20px;
 } 

 .que .cont .img img{
    width: 100%;
 }
 .que .cont .details{
    width: calc(( 100% - 10px ) / 2);
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }
 .que .cont .details div p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid white;
    padding: 20px 30px;
    border-radius: 30px;
    transition: 0.5s;
 }
 .que .cont .details div p:hover{
    
    background-color:#13547a34;
    
 }
 .que .cont .details div span{
    font-size: 18px;
    height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    line-height: 1.5;
    transition: 0.5s;
 }
 /* .que .cont .details div article{
    font-size: 18px;
    height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    line-height: 1.5;
    transition: 0.5s;
 } */
 .que .cont .details div:hover span {
    
    overflow: visible;
    padding: 15px 25px ;
    display: block;
    opacity: 1;
    height: max-content;

 }
 @media (max-width:995px) {
    .que .cont{
        flex-direction: column;

    }
    .que .cont .img{
        width: 100% ;
    }
    .que .cont .details{
        width: 100% ;
    }
}

/* end sec questions */

.contact {
    width: 100%;
    /* height: 500px; */
    background-color: #f0f8ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.contact h5{
    font-weight: 900;
    font-size: 40px;
    top: 0px;
}
.contact .cont{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 30px;
    padding: 20px 30px
}
.contact .cont .map{
    width: 40% ;
    background-color: #00B0FF;
    height: 300px ;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

}
.contact .cont .map iframe{
    width: 100%;
    height: 100%;
}
.contact .cont .card{
    width: calc( (60% - 90px) / 2 );
    height: 300px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
   align-items: center;
   line-height: 2;
    /* justify-content: center; */
    /* text-align: center; */
    /* padding: auto; */
    /* background-color: #13547a; */
}

.contact .cont .card  b{
    display: block;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    padding: 20px 0px;
}

.contact .cont .card  span{
display: block;
padding: 10px 100px;
font-size: 20px;
color: #717275;
border-bottom: 1px solid #71727574;
;
}

.contact .cont .card  p{
    display: block;
padding: 10px 0px;
font-size: 18px;
color: #717275;

}

@media (max-width:995px) {
    contact{
       height: auto;
    }
    .contact .cont .map{
        width: 100%;
    }
    .contact .cont .card{
        width: 100%;
        /* height: 300px; */
        box-sizing: border-box;
        display: flex;
        flex-direction: column; 
        /* align-items: center; */
        line-height: 1;
    }
    .contact .cont .card  b{
        display: block;
        font-size: 20px;
        font-weight: 400;
        text-align: center;
        padding: 10px 0px;
    }
    
    .contact .cont .card  span{
    display: block;
    padding: 5px 50px;
    font-size: 18px;
    color: #717275;
    border-bottom: 1px solid #71727574;
    
    }
    
    .contact .cont .card  p{
        display: block;
    padding: 5px 0px;
    font-size: 16px;
    color: #717275;
    
    }
    /* .contact .cont .card:nth-child(2){
        width: 100%;
    } */
}



footer{
    display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;

align-items: center;
padding: 50px 10px;
position: relative;
overflow: hidden;
z-index: 2;

}
footer .card {
width: calc( 100% / 4);
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;

align-items: center;
box-sizing: border-box;
padding: 0px 50px;
}
footer .card div {
    /* width: calc( 100% / 4); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer .card:nth-child(1) b{
    font-size: 35px;
}    

footer .card:nth-child(2) b , 
footer .card:nth-child(3) b { 
    padding: 10px 0px  ;
    font-size: 25px;
    font-weight: 600;
    color: var(--secondary-color);
}

footer .card:nth-child(2) div , 
footer .card:nth-child(3) div { 
    
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: flex-start;
padding: 10px 0px;

}

footer .card:nth-child(2) div a, 
footer .card:nth-child(3) div a { 

    color:#80d0c7b1;
    text-decoration: none;

}
    
footer .card:nth-child(2) div a:hover, 
footer .card:nth-child(3) div a:hover { 

    color:var(--secondary-color);
    /* text-decoration: none; */

}
    
footer .card:nth-child(4) {
    /* padding: 10px 0px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}
footer .card:nth-child(4) button{
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: var(--main-color);
    border: none;
    border-radius: 10px;
    /* display: block; */
    transition: 0.5s;
}
footer .card:nth-child(4) button:hover{
    background-color: var(--secondary-color);
}
/* footer .card:nth-child(3) button{
    
} */
footer .card:nth-child(4) div{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
footer .card:nth-child(4) div p{
    opacity: 0.7;

}

footer::before{
    content: '';
    position: absolute;

    width: 100%;
    height: 10px;
    background-color: var(--main-color);

    left: 0;
    bottom: 0;
}
footer::after{
    content: '';
    position: absolute;

    width: 300px;
    height: 300px;
    background-color: var(--main-color);
    transform: rotate(45deg);

    bottom: -150px;
    right: -150px;
    z-index: -1;
}

@media (max-width:995px) {
    footer{
        padding: 100px 30px 200px;
    }
    footer .card:nth-child(1) {
        width: 100%;
    }
    
}

@media (max-width:768px) {
    footer{
        padding: 100px 30px 200px;
    }
    footer .card:nth-child(2) , 
    footer .card:nth-child(3){
        width: calc((100% - 30px) / 2);
    } 
    footer .card:nth-child(4){
        width: 100%;
    }
}
    font-family: "Open Sans", sans-serif;
    /* height: 7000px; */
}

nav{
    background: linear-gradient( to right , #498a94 , #80d0c7 );
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    padding: 10px;
}

nav .leftnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}
nav .leftnav ul   {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
}
nav .leftnav ul li   {
    padding: 20px;
    text-transform: uppercase;
    list-style: none;
    position: relative;
}
nav .leftnav ul li a{
    color: white;
    text-decoration: none;
    transition: 0.5s;
}
nav .leftnav ul li a:hover ,
nav .leftnav ul li a.active{
    color: var(--secondary-color);
}
nav .leftnav div{
    display: flex;
    gap: 5px;
    font-size: 30px;
    font-weight: 700;
}
nav .rightnav i{
    display: block;
    width: 35px;
    height: 35px;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    font-size: 18px;
    cursor: pointer;

   
}
nav .rightnav i:hover{
    color: white;
    background-color: var(--secondary-color);
}

nav .leftnav ul li .drop1{
    background-color: #fff;
    padding: 20px;
    width: 150px;
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    font-size: 16px;
    transition: 0.5s;
    border-radius: 10px;
    top:150%;
    opacity: 0;
}
nav .leftnav ul li .drop1 a{
    color: #000;
    font-weight: 300;
}
nav .leftnav ul li .drop1::after{
    content: '';
    position: absolute;
    border: 10px solid white;
    left: 30px;
    top:-9px;
    transform: rotate(45deg);
}
nav .leftnav ul li:nth-child(5):hover .drop1{
    top: 100%;
    opacity: 1; 
}

/* start  top header */
 header{
    height: 200vh;
    background-color: var(--main-color);
    display: flex;
    flex-direction: column;
   
 }

 header h1{
    /* margin-bottom: 200px; */
    font-weight: 700;
    font-size: 60px;
    color: white;
 }
 header b{
color: var(--secondary-color);
font-size: 24px;
font-weight: 600; 
}
header .top{
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient( 10deg ,  #13547a  , #80d0c7 ) ;
    /* transform: translateY(-60px); */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 100px;
    
}
header .top div{
    display: flex;
    flex-direction: row;
    /* margin-top: 10px; */
    width: 60%;
    background-color: #fff;
    position: relative;
     height: 80px; 
    border-radius: 40px;

}
header .top div input{
    /* position: absolute; */
    /* background-color: aqua; */
    border-radius: 40px;
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    margin-left: 30px;
}
header .top div input::placeholder{
    font-size: 20px;
    margin-left: 20px;

}
header .top div i{
    /* position: absolute; */
margin-top: 25px; 
margin-left: 15px;   
/* top:20px;
left: 10px; */
font-size: 20px;
}
header .top div button{
    border-radius: 50px;
    /* margin-left: 300px; */
    height: 60px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    background-color: var(--main-color);
    border: none;
    outline: none;
    transition: 0.5s;
}
header .top div button:hover{
    background-color: var(--secondary-color);
}

/* top header */

/* start  down header */
header .down{
    transform: translateY(-180px);
    display: flex;
    gap: 20px;
    padding: 0 200px;
    margin-left: 110px;
    /* margin-bottom: 300px; */
    /* background-color: aqua; */

}
@media (max-width:995px) {
    /* header{
        height: auto;
    } */
    header .top h1{
        font-size: 45px ;
    }
    header .top b{
        font-size: 20px ;
    }
    /* header .top div{
        height: 65px;
    } */
}
@media (max-width:768px){
    header .top h1{
        font-size: 35px ;
    }
    header .top b{
        font-size: 18px ;
    }
    header .top div{
        width: 90%;
    }
    header .top div input::placeholder{
        font-size: 14px;
    }
}
header .down .card1
{
    width:400px;

    border-radius: 20px;
    background-color: #fff;
    /* box-sizing: border-box; */
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 0.5s;
    gap:10px;
    margin-bottom: 200px ;

}
header .down .card1 img 
{
    width: 100%;
    height: 300px;
}
header .down .card1 div ,
.topic ul li :nth-child(1) .drop1 .card div
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .down .card1 div b  {

    font-weight: 500;
    font-size: 25px;
    color: #000;
}

header .down .card1 div span {
    background-color: #00B0FF;
    color: white;
    padding: 3px;
    border-radius: 5px;
}
header .down .card1  p  {
opacity: 0.7;
line-height: 1.5;
font-size: 18px;
}
header .down .card1:hover  {
    transform: translateY(-10px);
}

header .down .card2 {
    width:600px;
    display: block;
    border-radius: 20px;
    background-color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 0.5s;
    gap:10px;
    margin-bottom: 200px ;
    position: relative;
   
}

header .down .card2::after{
    content: '';
    background:linear-gradient(5deg , #13547aab , #80d0c7ea);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -4;
}

header .down .card2 img 
{
    width: 100%;
    height: 300px;
}
header .down .card2 div
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .down .card2 div b {

    font-weight: 500;
    font-size: 25px;
    line-height: 1.5;
    color: black;
}

header .down .card2 div span{
    background-color: #536DFE;;
    color: white;
    padding: 3px;
    border-radius: 5px;
}
header .down .card2  p {
/* opacity: 0.7; */
color: black;
line-height: 1.5;
font-size: 18px;
}
header .down .card2 button{
    background-color: var(--main-color);
    border-radius: 50px;
    /* margin-left: 300px; */
    height: 50px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    background-color: var(--main-color);
    border: none;
    outline: none;
    transition: 0.5s;

}
header .down .card2 button:hover{
    background-color: var(--secondary-color);
}
header .down .card2:hover{
    transform: translateY(-10px);
}
header .down .card2 .downcard{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .down .card2 .downcard .icons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}
header .down .card2 .downcard .icons div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px 20px;
}
header .down .card2 .downcard .icons div i{
    width: 35px;
    height: 35px;
    background-color: var(--main-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
header .down .card2 .downcard i{
    color: black;
    font-size: 20px;
    padding: 0px 5px;
}


/* end down header */

/* start sec */

.topic{

    margin: 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;

}
.topic .sectitle{
    font-size: 50px;
    text-align: center;
}
.topic ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    border-bottom: 1px solid #13547a60;
    gap: 10px;
    position: relative;
    
}
.topic ul li{
    list-style: none;
    padding: 20px 30px;
    font-size: 18px;
    font-weight: 400;
    border-bottom: 2px solid white;
    cursor: pointer;
 
}


.topic ul li:hover ,
.topics ul li.active {
    border-bottom: 2px solid var(--secondary-color);
    color: var(--secondary-color);
}
.topic .cont {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 100px;
}
.topic .cont .card {
    width:calc((100% - 40px ) / 3 ) ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    box-sizing: border-box;
}
.topic .cont .card  {
    width:400px;

    border-radius: 20px;
    background-color: #fff;
    /* box-sizing: border-box; */
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 0.5s;
    gap:10px;
    margin-bottom: 200px ;

}
.topic .cont .card img
{
    width: 100%;
    height: 300px;
}

.topic .cont .card div
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;

}

.topic .cont .card b {

    font-weight: 500;
    font-size: 25px;
    color: #000;
}


.topic .cont .card span{
    background-color: #00B0FF;
    color: white;
    padding: 3px;
    border-radius: 5px;
}

.topic .cont .card p{
opacity: 0.7;
line-height: 1.5;
font-size: 18px;
}

.topic .cont .card:hover {
    transform: translateY(-10px);
}


/* end cont */


/* start  cards drop1 */


.topic ul li:nth-child(2) .drop1{
    position: absolute;
    width: 100% ;
    left: 0;
    top: 70px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    z-index: 5;
    padding: 30px 100px;
    box-sizing: border-box;
    gap: 20px;
    display: none;
    transition: 0.5s;
}
.topic ul li:nth-child(2):hover .drop1{
    display: flex;
}
.topic ul li:nth-child(2) .drop1 .card{
    width:calc((100% - 40px ) / 3 ) ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;
    height: 500px;

}
.topic ul li:nth-child(2) .drop1 .card div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;

}
.topic ul li:nth-child(2) .drop1 .card div b{
    font-weight: 500;
    font-size: 25px;
}
.topic ul li:nth-child(2) .drop1 .card div span{
    padding: 5px;
    border-radius: 5px;
    background-color: #F50057;
    color: #fff;
}
.topic ul li:nth-child(2) .drop1 .card p{
    line-height: 1.5;
    opacity: 0.7;
    font-size: 18px;
}
.topic ul li:nth-child(2) .drop1 .card img{
    width: 100%;
    height: 250px;
}

/* end drop1 */


/* start drop 2 */


.topic ul li:nth-child(3) .drop2{
    position: absolute;
    width: 100% ;
    left: 0;
    top: 70px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    background-color: #fff;
    z-index: 5;
    padding: 30px 100px;
    box-sizing: border-box;
    gap: 20px;
    display: none;
    transition: 0.5s;
}
.topic ul li:nth-child(3):hover .drop2{
    display: flex;
}
.topic ul li:nth-child(3) .drop2 .card{
    width:calc((100% - 20px ) / 2 ) ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;
    /* height: 450px; */

}
.topic ul li:nth-child(3) .drop2 .card:hover{
    transform: translateY(-10px);
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(1){
    /* width: 100%; */
    width:calc((100% - 20px ) / 2 ) ;
    height: 450px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2){
    width:calc((100% - 20px ) / 2 ) ;
    height: 450px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;

}


.topic ul li:nth-child(3) .drop2 .card:nth-child(2){
    width:calc((100% - 20px ) / 2 ) ;
    height: 450px;
   background: linear-gradient(5deg , #13547aab , #80d0c7ea);
   display: block;
    border-radius: 20px;
    /* background-color: #fff; */
    padding: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: 0.5s;
    gap:10px;
    margin-bottom: 200px ;
    position: relative;
   
}
.topic ul li:nth-child(3) .drop2 .card div 
/* , .topic ul li:nth-child(3) .drop2 .card2 div{ */
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 20px;

}

.topic ul li:nth-child(3) .drop2 .card:nth-child(2) div{
    background: transparent ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    height: max-content;
    padding: 20px;
    border: none;

}
/* .topic ul li:nth-child(3) .drop2 .card2 div{
    display: flex;
    align-items: center;
    justify-content: space-between;
} */
.topic ul li:nth-child(3) .drop2 .card div b 
/* , .topic ul li:nth-child(3) .drop2 .card2 div b */
{
    font-weight: 500;
    font-size: 25px;
}

.topic ul li:nth-child(3) .drop2 .card div span
{
    padding: 5px;
    border-radius: 5px;
    background-color: #536DFE;
    color: #fff;
}
.topic ul li:nth-child(3) .drop2 .card p 
/* ,.topic ul li:nth-child(3) .drop2 .card2 p */
{
    line-height: 1.5;
    opacity: 0.7;
    font-size: 18px;
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) button{
    background-color: var(--main-color);
    border-radius: 50px;
    /* margin-left: 300px; */
    height: 50px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    background-color: var(--main-color);
    border: none;
    outline: none;
    transition: 0.5s;

}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) button:hover{
    background-color: var(--secondary-color);
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2):hover{
    transform: translateY(-10px);
}
/* .topic ul li:nth-child(3) .drop2 .card2{
    display: flex;
    justify-content: space-between;
    align-items: center;
} */
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) .downcard2 .icons{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: row;
    gap: 5px;
    height: max-content;
    width: max-content;
    /* margin-top: 50px; */
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) .downcard2 .icons div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px 20px;
    height: max-content;
    width: max-content;
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) .downcard2 .icons div i{
    width: 35px;
    height: 35px;
    /* background-color: var(--main-color); */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.topic ul li:nth-child(3) .drop2 .card:nth-child(2) .downcard2 i{
    color: black;
    font-size: 20px;
    padding: 0px 5px;
}

/* end drop 2 */


/* start drop 3 */


.topic ul li:nth-child(4) .drop3{
    position: absolute;
    width: 100% ;
    left: 0;
    top: 70px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    z-index: 5;
    padding: 30px 100px;
    box-sizing: border-box;
    gap: 20px;
    display: none;
    transition: 0.5s;
}
.topic ul li:nth-child(4):hover .drop3{
    display: flex;
}
.topic ul li:nth-child(4) .drop3 .card{
    width:calc((100% - 40px ) / 3 ) ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;
    height: 500px;

}
.topic ul li:nth-child(4) .drop3 .card div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;

}
.topic ul li:nth-child(4) .drop3 .card div b{
    font-weight: 500;
    font-size: 25px;
}
.topic ul li:nth-child(4) .drop3 .card div span{
    padding: 5px;
    border-radius: 5px;
    background-color: #F9A826;
    color: #fff;
}
.topic ul li:nth-child(4) .drop3 .card p{
    line-height: 1.5;
    opacity: 0.7;
    font-size: 18px;
}
.topic ul li:nth-child(4) .drop3 .card img{
    width: 100%;
    height: 250px;
}

/* end drop3 */


/* start drop 4 */


.topic ul li:nth-child(5) .drop4{
    position: absolute;
    width: 100% ;
    left: 0;
    top: 70px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    z-index: 5;
    padding: 30px 100px;
    box-sizing: border-box;
    gap: 20px;
    display: none;
    transition: 0.5s;
}
.topic ul li:nth-child(5):hover .drop4{
    display: flex;
}
.topic ul li:nth-child(5) .drop4 .card{
    width:calc((100% - 20px ) / 2 ) ;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
    /* padding: 20px; */
    display: flex;
    flex-direction: column;
    
    gap: 10px;
    cursor: pointer;
    transition: 0.5s;
    height: 500px;

}
.topic ul li:nth-child(5) .drop4 .card div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}
.topic ul li:nth-child(5) .drop4 .card div b{
    font-weight: 500;
    font-size: 25px;
}
.topic ul li:nth-child(5) .drop4 .card div span{
    background-color: #00BFA6;
    color: white;
    padding: 3px;
    border-radius: 5px;
}
.topic ul li:nth-child(5) .drop4 .card p{
    line-height: 1.5;
    opacity: 0.7;
    font-size: 18px;
}
.topic ul li:nth-child(5) .drop4 .card img{
    width: 100%;
    height: 250px;
}

@media (max-width: 995px) {
    .topic ul li{
        font-size: 16px;
    }

    .topic .cont .card{
        width:calc((100% - 20px ) / 2 ) ;
    }
    .topic ul li:nth-child(2) .drop1 .card{
        width:calc((100% - 20px ) / 2 ) ;
    }
}
@media (max-width: 768px) {
    .topic ul{
        gap: 5px;
    }
    .topic ul li{
        font-size: 16px;
        padding: 20px 5px;
    }
    .topic .cont {
        padding: 0 50px;
    }
    .topic .cont .card{
        width:100%;
    }
    .topic ul li:nth-child(2) .drop1{
        padding: 30px 50px;
    }
    .topic ul li:nth-child(2) .drop1 .card{
        width:100% ;
    }
}


/* end sec */



/* start sec work */
 
.work {
    background: linear-gradient( 15deg ,  #13547ac9 , #80d0c7d5 ) , url(imgs/work.jpg) ;
    background-size:cover;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 50px 0px;
    gap: 80px;
    top: 0px;
    bottom: 0px;
    color: white;
    
}

.work h3{
    text-align: center;
    font-size: 50px;
    font-weight: 800;
}

.work .cont{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 100px;
    position: relative;
}

.work .cont::before{
    content: '';
    width: 10px;
    height: 70%;
    position: absolute;
    /* z-index: -1; */
    top: 0px;
    left: 22.4%;
    background-color: var(--main-color);
    z-index: 1;
}
.work .cont .card{
    display: flex;
    width: 60%;
    gap: 70px;
}

.work .cont .card .details{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.work .cont .card .details b{
    font-size: 28px;
}

.work .cont .card .details p{
    font-size: 20px;
    line-height: 2;
}

.work .cont .button{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.work .cont .button span{
    font-size: 20px;
}
.work .cont .button button{
    border-radius: 40px;
    width: 220px;
    height: 50px;
    font-size: 20px;
    border: 2px solid var(--main-color);
    background-color: transparent;
    color:var(--main-color);
    font-weight: 600;
    transition: 0.5s;
}
.work .cont .button button:hover{
    background-color: var(--main-color);
    color: white;
}
.work .cont .icon{
 background-color: var(--main-color);
 border-radius: 50%;
 height: max-content;
 padding: 25px;
 border: 5px solid white;
 outline: 10px solid var(--main-color);
 z-index: 2;

}
.work .cont .icon i{
    font-size: 25px;
    font-weight: 600;
}


/* end sec work */

/* start sec questions */

.que{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.que h4{
    font-size: 40px;
    width: 350px ;
    padding-top: 20px;
}
.que .cont{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
 .que .cont .img {
    width: calc(( 100% - 10px ) / 2);
    box-sizing: border-box;
    padding: 20px;
 } 

 .que .cont .img img{
    width: 100%;
 }
 .que .cont .details{
    width: calc(( 100% - 10px ) / 2);
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }
 .que .cont .details div p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid white;
    padding: 20px 30px;
    border-radius: 30px;
    transition: 0.5s;
 }
 .que .cont .details div p:hover{
    
    background-color:#13547a34;
    
 }
 .que .cont .details div span{
    font-size: 18px;
    height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    line-height: 1.5;
    transition: 0.5s;
 }
 /* .que .cont .details div article{
    font-size: 18px;
    height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    line-height: 1.5;
    transition: 0.5s;
 } */
 .que .cont .details div:hover span {
    
    overflow: visible;
    padding: 15px 25px ;
    display: block;
    opacity: 1;
    height: max-content;

 }
 @media (max-width:995px) {
    .que .cont{
        flex-direction: column;

    }
    .que .cont .img{
        width: 100% ;
    }
    .que .cont .details{
        width: 100% ;
    }
}

/* end sec questions */

.contact {
    width: 100%;
    /* height: 500px; */
    background-color: #f0f8ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.contact h5{
    font-weight: 900;
    font-size: 40px;
    top: 0px;
}
.contact .cont{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 30px;
    padding: 20px 30px
}
.contact .cont .map{
    width: 40% ;
    background-color: #00B0FF;
    height: 300px ;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

}
.contact .cont .map iframe{
    width: 100%;
    height: 100%;
}
.contact .cont .card{
    width: calc( (60% - 90px) / 2 );
    height: 300px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
   align-items: center;
   line-height: 2;
    /* justify-content: center; */
    /* text-align: center; */
    /* padding: auto; */
    /* background-color: #13547a; */
}

.contact .cont .card  b{
    display: block;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
    padding: 20px 0px;
}

.contact .cont .card  span{
display: block;
padding: 10px 100px;
font-size: 20px;
color: #717275;
border-bottom: 1px solid #71727574;
;
}

.contact .cont .card  p{
    display: block;
padding: 10px 0px;
font-size: 18px;
color: #717275;

}

@media (max-width:995px) {
    contact{
       height: auto;
    }
    .contact .cont .map{
        width: 100%;
    }
    .contact .cont .card{
        width: 100%;
        /* height: 300px; */
        box-sizing: border-box;
        display: flex;
        flex-direction: column; 
        /* align-items: center; */
        line-height: 1;
    }
    .contact .cont .card  b{
        display: block;
        font-size: 20px;
        font-weight: 400;
        text-align: center;
        padding: 10px 0px;
    }
    
    .contact .cont .card  span{
    display: block;
    padding: 5px 50px;
    font-size: 18px;
    color: #717275;
    border-bottom: 1px solid #71727574;
    
    }
    
    .contact .cont .card  p{
        display: block;
    padding: 5px 0px;
    font-size: 16px;
    color: #717275;
    
    }
    /* .contact .cont .card:nth-child(2){
        width: 100%;
    } */
}



footer{
    display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;

align-items: center;
padding: 50px 10px;
position: relative;
overflow: hidden;
z-index: 2;

}
footer .card {
width: calc( 100% / 4);
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;

align-items: center;
box-sizing: border-box;
padding: 0px 50px;
}
footer .card div {
    /* width: calc( 100% / 4); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer .card:nth-child(1) b{
    font-size: 35px;
}    

footer .card:nth-child(2) b , 
footer .card:nth-child(3) b { 
    padding: 10px 0px  ;
    font-size: 25px;
    font-weight: 600;
    color: var(--secondary-color);
}

footer .card:nth-child(2) div , 
footer .card:nth-child(3) div { 
    
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: flex-start;
padding: 10px 0px;

}

footer .card:nth-child(2) div a, 
footer .card:nth-child(3) div a { 

    color:#80d0c7b1;
    text-decoration: none;

}
    
footer .card:nth-child(2) div a:hover, 
footer .card:nth-child(3) div a:hover { 

    color:var(--secondary-color);
    /* text-decoration: none; */

}
    
footer .card:nth-child(4) {
    /* padding: 10px 0px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}
footer .card:nth-child(4) button{
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: var(--main-color);
    border: none;
    border-radius: 10px;
    /* display: block; */
    transition: 0.5s;
}
footer .card:nth-child(4) button:hover{
    background-color: var(--secondary-color);
}
/* footer .card:nth-child(3) button{
    
} */
footer .card:nth-child(4) div{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
footer .card:nth-child(4) div p{
    opacity: 0.7;

}

footer::before{
    content: '';
    position: absolute;

    width: 100%;
    height: 10px;
    background-color: var(--main-color);

    left: 0;
    bottom: 0;
}
footer::after{
    content: '';
    position: absolute;

    width: 300px;
    height: 300px;
    background-color: var(--main-color);
    transform: rotate(45deg);

    bottom: -150px;
    right: -150px;
    z-index: -1;
}

@media (max-width:995px) {
    footer{
        padding: 100px 30px 200px;
    }
    footer .card:nth-child(1) {
        width: 100%;
    }
    
}

@media (max-width:768px) {
    footer{
        padding: 100px 30px 200px;
    }
    footer .card:nth-child(2) , 
    footer .card:nth-child(3){
        width: calc((100% - 30px) / 2);
    } 
    footer .card:nth-child(4){
        width: 100%;
    }
}