.section .reference{background-color: #CCF0FC; border-radius: 6px; margin-bottom: 0.75rem; padding: 4px 12px 4px 8px; width: fit-content; letter-spacing: 1.6px;}

.section .arrows-list{list-style: none;}
.section .arrows-list > li > span, .section .dots-list > li > span{background: black; border-radius: 50%; color: white; display: inline-flex; justify-content: center; width: 24px;}
.section .arrows-list > li{position: relative;}
.section .arrows-list > li:not(:last-child){margin-bottom: 1rem;}
.section .arrows-list > li::before{content: url('/digital-building-blocks/sites/download/attachments/710119737/ico-arrow-right.svg?api=v2'); position: absolute; top: 1px; left: -30px;}


#sec-1-demo-day{padding-block: 108px; background-size: cover; background-repeat: no-repeat;  background-image: url('/digital-building-blocks/sites/download/attachments/710119737/img-sec-1.jpg?api=v2');}
#sec-1-demo-day .left-col h2{color: white;font-size: 48px;line-height: 56px;}
#sec-1-demo-day .right-col{display: flex; gap: 2rem; position: relative;}
#sec-1-demo-day .right-col .divider{background-color: #00B3EF; width: 3px;}
#sec-1-demo-day .right-col h3{color: white; max-width: min(600px, 95%); margin: 0; font-size: 40px;line-height: 48px;}
#sec-1-demo-day .right-col > p{display: none;}


#sec-2-demo-day{padding-block: 100px;}
#sec-2-demo-day img{width: 100%; max-width: 650px; margin-bottom: 40px;}
#sec-2-demo-day p.txt{margin-top: 3rem; max-width: 600px;}

#sec-3-demo-day{padding-block: 64px; background-color: #CCF0FC;}
#sec-3-demo-day .col-12{display: flex; justify-content: space-around;}
#sec-3-demo-day .col-12 .col-wrapper{flex: 1; padding-inline: 4px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;}
#sec-3-demo-day .col-12 .col-wrapper > span{font-size: clamp(32px, 10vw, 48px); font-weight: 600; line-height: 48px;}
#sec-3-demo-day .col-12 .col-wrapper > p.txt{font-size: clamp(24px, 2vw, 36px); margin-block: auto; line-height: 36px; max-width: 260px; text-align: center;}
#sec-3-demo-day .col-12 .divider{min-width: 2px; background-color: #46CAF5;}

#sec-4-demo-day{background-color: #E6F7FD; padding-block: 100px;}
#sec-4-demo-day .left-modal{padding: 24px 40px; background-color: white; border-radius: 1rem; display: flex; flex-direction: column;}
#sec-4-demo-day .left-modal .modal-reference{margin: 0; margin-bottom: 24px; padding: 4px 12px 4px 8px; background-color: #F6F5F7; border-radius: 6px; margin-left: auto;}
#sec-4-demo-day .left-modal .sec-wrapper{display: flex; flex-direction: column; gap: 1.5rem;}
/* subtitle for all */
#sec-4-demo-day .left-modal .subtitle{display: flex; align-items: center; gap: 0.5rem;}
#sec-4-demo-day .left-modal .subtitle > p.txt{margin: 0; font-weight: 600;}
#sec-4-demo-day .left-modal .subtitle > p.txt > span{font-size: 1rem;}

#sec-4-demo-day .left-modal .sec-wrapper{position: relative; margin-bottom: 24px;}
#sec-4-demo-day .left-modal .sec-wrapper:not(:last-child){padding-bottom: 24px;}
#sec-4-demo-day .left-modal .sec-wrapper:not(:last-child)::after{position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 1px; background-color: rgb(235, 235, 235);}
#sec-4-demo-day .left-modal .sec-wrapper .flags-wrapper{display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
#sec-4-demo-day .left-modal .sec-wrapper .flags-wrapper > img{border-radius: 50%; width: 24px; height: 24px;}

#sec-4-demo-day .left-modal .sec-wrapper .imgs-wrapper.grid{display: flex; flex-wrap: wrap; align-items: center; gap: 24px;}
#sec-4-demo-day .left-modal .sec-wrapper .imgs-wrapper.grid img{width: 82px;}
#sec-4-demo-day .left-modal .sec-wrapper .imgs-wrapper.grid img.lg{width: 110px;}
#sec-4-demo-day .left-modal .sec-wrapper .imgs-wrapper.grid img.lgr{width: 130px;}


#sec-4-demo-day .col-7{margin-right: -1.5rem;}
#sec-4-demo-day .col-7 img{width: 57%;}

#sec-4-demo-day .type-video {max-width: 900px !important;}
#sec-4-demo-day .type-video iframe{width: 100%; height: min(550px, 80vw); border-radius: 1rem; border: none;}


#sec-4-demo-day { position: relative; }
#sec-4-demo-day .col-7 img { position: absolute; max-width: 800px; top: 21%; right: 0; }

@media screen and ( max-width: 768px ) {
	#sec-4-demo-day .sec-4-cols { display: flex; flex-direction: column; }
	#sec-4-demo-day .col-5 { order: 2; }
	#sec-4-demo-day .col-7 img { position: unset; width: 100%; }
}


#sec-5-demo-day{padding-block: 100px;}
#sec-5-demo-day .txt{margin-top: 40px;}
#sec-5-demo-day .col-left{padding-right: 40px;}
#sec-5-demo-day .col-right{padding-left: 50px;}
#sec-5-demo-day .col-right img{width: 100%; max-width: 500px;}

#sec-6-demo-day{background-color: #E6F7FD; padding-block: 100px;}
#sec-6-demo-day .left-col img{width: 100%; max-width: 500px;}
#sec-6-demo-day h2{margin-bottom: 40px;}

#sec-7-demo-day{padding-block: 100px;}
#sec-7-demo-day h2{margin-bottom: 40px;}
#sec-7-demo-day .left-col{padding-right: 40px;}
#sec-7-demo-day .right-col{padding-left: 40px;}
#sec-7-demo-day .right-col img{width: 100%; max-width: 500px;}

#sec-8-demo-day{background-color: #F6F5F7; padding-block: 100px;}
#sec-8-demo-day .cols:not(:first-child){margin-bottom: 64px;}
#sec-8-demo-day .cols:last-child{margin-bottom: -1rem;}
#sec-8-demo-day .modal-wrapper {background-color: white; border-radius: 1rem; padding: 64px;}
#sec-8-demo-day .modal-wrapper > p{margin: 0;}
#sec-8-demo-day .modal-wrapper:not(:last-child){margin-bottom: 40px;}
#sec-8-demo-day .modal-wrapper .modal-title{margin-bottom: 40px; font-weight: 600;}
#sec-8-demo-day .modal-wrapper .modal-content{display: flex; gap: 24px;}
#sec-8-demo-day .modal-wrapper .modal-content:not(:last-of-type){margin-bottom: 40px;}
#sec-8-demo-day .modal-wrapper .modal-content .left-col{display: flex; align-items: center; flex: 1;}
#sec-8-demo-day .modal-wrapper .modal-content .left-col img{width: 100%;}
#sec-8-demo-day .modal-wrapper .modal-content .right-col{margin-top: 48px; width: 340px;}
#sec-8-demo-day .modal-wrapper .modal-content .right-col p, #sec-8-demo-day .modal-wrapper .modal-content .right-col li { color: #4A3D5D; }

#sec-9-demo-day{padding-block: 100px;}
#sec-9-demo-day img{width: 100%;}

#sec-10-demo-day{background-color: #E6F7FD; padding-top: 100px; padding-bottom: 160px;}
#sec-10-demo-day h2{max-width: 808px;}

#sec-11-demo-day{background-color: #E6F7FD; padding-top: 170px; padding-bottom: 120px;
                background-image: url('https://ec.europa.eu/digital-building-blocks/sites/download/attachments/710119737/img-gradient-bot.svg?api=v2'); 
                background-size: cover; background-repeat: no-repeat; }

#sec-11-demo-day h2{color: white; margin-bottom: 40px;}

#sec-11-demo-day .card-item{height: 100%; background-color: white; border-radius: 1rem; padding: 32px; display: flex; flex-direction: column;}
#sec-11-demo-day .card-item h5{font-weight: 600; font-size: 24px; line-height: 28px;}
#sec-11-demo-day .card-item > p{font-size: 14.5px; min-height: 75px;}
#sec-11-demo-day .card-item > div { display: flex; justify-content: flex-end; margin-top: auto;}
#sec-11-demo-day .card-item > a{margin-top: auto; width: fit-content;}
/* confluence p hide */
#sec-11-demo-day .col-4 > p, #sec-11-demo-day .col-4 > span{display: none;}

@media(max-width: 1100px){
        #sec-8-demo-day{padding-block: 64px;}
        #sec-8-demo-day .cols:not(:first-child){margin-inline: 0;}
        #sec-8-demo-day .modal-wrapper{padding: 40px 24px;}
        #sec-8-demo-day .modal-wrapper .modal-content{flex-direction: column;}
        #sec-8-demo-day .modal-wrapper .modal-content .right-col{width: 100%;}
}

@media(max-width: 768px){
        #sec-1-demo-day{padding-block: 80px;}
        #sec-1-demo-day .right-col{flex-direction: column; align-items: unset;}
        #sec-1-demo-day .right-col .divider{width: 100%; height: 3px;}


        #sec-2-demo-day{padding-block: 80px;}

        #sec-3-demo-day .col-12 > p{display: none;}
        #sec-3-demo-day .col-12{display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px;}
        #sec-3-demo-day .col-12 .divider{display: none;}

        #sec-4-demo-day .left-modal .sec-wrapper .imgs-wrapper.grid img{width: 70px;}
        #sec-4-demo-day .left-modal .sec-wrapper .imgs-wrapper.grid img.lg{width: 95px;}
        #sec-4-demo-day .left-modal .sec-wrapper .imgs-wrapper.grid img.lgr{width: 110px;}


        #sec-5-demo-day .col-right{padding: 1rem;}
        #sec-5-demo-day .col-left{padding: 1rem;}

        #sec-6-demo-day{padding-block: 64px;}
        #sec-6-demo-day .cols{display: flex; flex-direction: column;}
        #sec-6-demo-day .cols .left-col{order: 2;}

        #sec-7-demo-day{padding-block: 64px;}
        #sec-7-demo-day .left-col{padding: 1rem;}
        #sec-7-demo-day .right-col{padding: 1rem;}

        /* #sec-8-demo-day{padding-block: 64px;}
        #sec-8-demo-day .cols:not(:first-child){margin-inline: 0;}
        #sec-8-demo-day .modal-wrapper{padding: 40px 24px;}
        #sec-8-demo-day .modal-wrapper .modal-content{flex-direction: column;}
        #sec-8-demo-day .modal-wrapper .modal-content .right-col{width: 100%;} */


        #sec-9-demo-day{padding-block: 64px;}

        #sec-10-demo-day{padding-block: 64px;}
        
        #sec-11-demo-day{padding-block: 100px;}
        
}